* non-secure version of avatar upload
This commit is contained in:
parent
b4d7b99648
commit
95538d4857
|
|
@ -71,6 +71,7 @@
|
|||
}
|
||||
|
||||
self.updatingAvatar = true;
|
||||
renderAvatarSpinner();
|
||||
|
||||
rest.deleteAvatar()
|
||||
.done(deleteAvatarSuccess)
|
||||
|
|
@ -78,6 +79,9 @@
|
|||
app.ajaxError(arguments);
|
||||
self.updatingAvatar = false;
|
||||
})
|
||||
.always(function() {
|
||||
removeAvatarSpinner();
|
||||
})
|
||||
}
|
||||
|
||||
function deleteAvatarSuccess(response) {
|
||||
|
|
@ -96,26 +100,30 @@
|
|||
}
|
||||
|
||||
function handleFilePick() {
|
||||
|
||||
rest.getFilepickerPolicy()
|
||||
.done(function(filepickerPolicy) {
|
||||
renderAvatarSpinner();
|
||||
filepicker.setKey(gon.fp_apikey);
|
||||
filepicker.pickAndStore({
|
||||
mimetype: 'image/*',
|
||||
maxSize: 10000*1024,
|
||||
policy: filepickerPolicy.policy,
|
||||
signature: filepickerPolicy.signature
|
||||
}, { path: createStorePath(self.userDetail), access: 'public' },
|
||||
function(fpfiles) {
|
||||
afterImageUpload(fpfiles[0]);
|
||||
}, function(fperror) {
|
||||
if(fperror.code != 101) { // 101 just means the user closed the dialog
|
||||
alert("unable to upload file: " + JSON.stringify(fperror))
|
||||
}
|
||||
})
|
||||
mimetype: 'image/*',
|
||||
maxSize: 10000*1024,
|
||||
policy: filepickerPolicy.policy,
|
||||
signature: filepickerPolicy.signature
|
||||
}, { path: createStorePath(self.userDetail), access: 'public' },
|
||||
function(fpfiles) {
|
||||
removeAvatarSpinner();
|
||||
afterImageUpload(fpfiles[0]);
|
||||
}, function(fperror) {
|
||||
removeAvatarSpinner();
|
||||
|
||||
if(fperror.code != 101) { // 101 just means the user closed the dialog
|
||||
alert("unable to upload file: " + JSON.stringify(fperror))
|
||||
}
|
||||
})
|
||||
})
|
||||
.fail(app.ajaxError);
|
||||
|
||||
|
||||
}
|
||||
function renderAvatarScreen() {
|
||||
|
||||
|
|
@ -129,11 +137,45 @@
|
|||
window.location = '#/account/profile'
|
||||
}
|
||||
|
||||
function renderAvatarSpinner() {
|
||||
var avatarSpace = $('#account-profile-avatar-content-scroller .account-profile-avatar .avatar-space');
|
||||
// if there is already an image tag, we only obscure it.
|
||||
|
||||
var avatar = $('img.preview_profile_avatar', avatarSpace);
|
||||
|
||||
var spinner = $('<div class="spinner spinner-large"></div>')
|
||||
if(avatar.length == 0) {
|
||||
avatarSpace.prepend(spinner);
|
||||
}
|
||||
else {
|
||||
// in this case, just style the spinner to obscure using opacity, and center it
|
||||
var jcropHolder = $('.jcrop-holder', avatarSpace);
|
||||
spinner.width(jcropHolder.width());
|
||||
spinner.height(jcropHolder.height());
|
||||
spinner.addClass('op50');
|
||||
var jcrop = avatar.data('Jcrop');
|
||||
if(jcrop) {
|
||||
jcrop.disable();
|
||||
}
|
||||
avatarSpace.append(spinner);
|
||||
}
|
||||
}
|
||||
|
||||
function removeAvatarSpinner() {
|
||||
var avatarSpace = $('#account-profile-avatar-content-scroller .account-profile-avatar .avatar-space');
|
||||
var spinner = $('.spinner-large', avatarSpace);
|
||||
spinner.remove();
|
||||
var avatar = $('img.preview_profile_avatar', avatarSpace);
|
||||
var jcrop = avatar.data('Jcrop')
|
||||
if(jcrop) {
|
||||
jcrop.enable();
|
||||
}
|
||||
}
|
||||
|
||||
function renderAvatar(fpfile, storedSelection) {
|
||||
|
||||
// clear out
|
||||
var avatarSpace = $('#account-profile-avatar-content-scroller .account-profile-avatar .avatar-space');
|
||||
avatarSpace.children().remove();
|
||||
|
||||
if(!fpfile) {
|
||||
renderNoAvatar(avatarSpace);
|
||||
|
|
@ -142,10 +184,15 @@
|
|||
|
||||
rest.getFilepickerPolicy({handle: fpfile.url})
|
||||
.done(function(filepickerPolicy) {
|
||||
avatarSpace.children().remove();
|
||||
renderAvatarSpinner();
|
||||
|
||||
var photo_url = fpfile.url + '?signature=' + filepickerPolicy.signature + '&policy=' + filepickerPolicy.policy;
|
||||
avatar = new Image();
|
||||
$(avatar)
|
||||
.load(function(e) {
|
||||
removeAvatarSpinner();
|
||||
|
||||
avatar = $(this);
|
||||
avatarSpace.append(avatar);
|
||||
var width = avatar.naturalWidth();
|
||||
|
|
@ -209,6 +256,9 @@
|
|||
|
||||
function renderNoAvatar(avatarSpace) {
|
||||
// no avatar found for account
|
||||
|
||||
removeAvatarSpinner();
|
||||
|
||||
var noAvatarSpace = $('<div></div>');
|
||||
noAvatarSpace.addClass('no-avatar-space');
|
||||
noAvatarSpace.text('Please upload a photo');
|
||||
|
|
@ -225,6 +275,7 @@
|
|||
if(selection) {
|
||||
var currentSelection = selection;
|
||||
self.updatingAvatar = true;
|
||||
renderAvatarSpinner();
|
||||
|
||||
console.log("Converting...");
|
||||
|
||||
|
|
@ -266,10 +317,11 @@
|
|||
})
|
||||
.done(updateAvatarSuccess)
|
||||
.fail(app.ajaxError)
|
||||
.always(function() { self.updatingAvatar = false;})
|
||||
.always(function() { removeAvatarSpinner(); self.updatingAvatar = false;})
|
||||
},
|
||||
function(fperror) {
|
||||
alert("unable to scale selection. error code: " + fperror.code);
|
||||
removeAvatarSpinner();
|
||||
self.updatingAvatar = false;
|
||||
})
|
||||
})
|
||||
|
|
@ -277,6 +329,7 @@
|
|||
},
|
||||
function(fperror) {
|
||||
alert("unable to crop selection. error code: " + fperror.code);
|
||||
removeAvatarSpinner();
|
||||
self.updatingAvatar = false;
|
||||
}
|
||||
);
|
||||
|
|
@ -291,7 +344,8 @@
|
|||
self.userDetail = response;
|
||||
|
||||
// notify any listeners that the avatar changed
|
||||
$('.avatar_large img').trigger('avatar_changed', [self.userDetail.photo_url]);
|
||||
JK.Header.loadMe();
|
||||
// $('.avatar_large img').trigger('avatar_changed', [self.userDetail.photo_url]);
|
||||
|
||||
app.notify(
|
||||
{ title: "Avatar Changed",
|
||||
|
|
|
|||
|
|
@ -81,11 +81,24 @@
|
|||
.avatar-space {
|
||||
color: $color2;
|
||||
margin-bottom: 20px;
|
||||
position:relative;
|
||||
min-height:300px;
|
||||
|
||||
img.preview_profile_avatar {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.spinner-large {
|
||||
width:300px;
|
||||
height:300px;
|
||||
line-height: 300px;
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
z-index: 2000; // to win over jcrop
|
||||
}
|
||||
|
||||
.no-avatar-space {
|
||||
border:1px dotted $color2;
|
||||
|
||||
|
|
@ -98,10 +111,7 @@
|
|||
background-color:$ColorTextBoxBackground;
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -417,3 +417,11 @@ input[type="text"], input[type="password"]{
|
|||
/* Following is a style adjustment for the sign-in table spacing */
|
||||
#sign-in td { padding: 4px; }
|
||||
|
||||
|
||||
.spinner-large {
|
||||
background-image: url('/assets/shared/spinner.gif');
|
||||
background-repeat:no-repeat;
|
||||
background-position:center;
|
||||
width:128px;
|
||||
height:128px;
|
||||
}
|
||||
Loading…
Reference in New Issue