115 lines
4.1 KiB
JavaScript
115 lines
4.1 KiB
JavaScript
(function(context,$) {
|
|
|
|
"use strict";
|
|
|
|
context.JK = context.JK || {};
|
|
context.JK.AccountProfileAvatarScreen = function(app) {
|
|
var logger = context.JK.logger;
|
|
var rest = context.JK.Rest(app);
|
|
var userId;
|
|
var user = {};
|
|
var tmpUploadPath = null;
|
|
var userDetail = null;
|
|
|
|
function beforeShow(data) {
|
|
userId = data.id;
|
|
}
|
|
|
|
function afterShow(data) {
|
|
resetForm();
|
|
renderAvatarScreen()
|
|
}
|
|
|
|
function resetForm() {
|
|
// remove all display errors
|
|
$('#account-profile-avatar-content-scroller form .error-text').remove()
|
|
$('#account-profile-avatar-content-scroller form .error').removeClass("error")
|
|
}
|
|
|
|
function populateAvatar(userDetail) {
|
|
this.userDetail = userDetail;
|
|
var template= context.JK.fillTemplate($('#template-account-profile-avatar').html(), {
|
|
"fp_apikey" : gon.fp_apikey,
|
|
"data-fp-store-path" : gon.fp_upload_dir + '/tmp/' + userDetail.id + '/'
|
|
});
|
|
$('#account-profile-avatar-content-scroller').html(template);
|
|
|
|
|
|
// prefer tmpUploadPath if it is set; otherwise use the user account's photo_url
|
|
// renderAvatar(tmpUploadPath ? tmpUploadPath : userDetail.photo_url);
|
|
//renderAvatar(null);
|
|
renderAvatar('public/avatars/tmp/fbcdfef5-202c-4a7f-bf56-b72e06c61208/FxUUqWP9Qcm7roWZszLs_confirm_email_page.png')
|
|
}
|
|
|
|
// events for main screen
|
|
function events() {
|
|
// wire up main panel clicks
|
|
$('#account-profile-avatar-content-scroller').on('click', '#account-edit-avatar-cancel', function(evt) { evt.stopPropagation(); navToEditProfile(); return false; } );
|
|
$('#account-profile-avatar-content-scroller').on('click', '#account-edit-avatar-submit', function(evt) { evt.stopPropagation(); handleUpdateEmail(); return false; } );
|
|
$('#account-profile-avatar-content-scroller').on('change', 'input[type=filepicker-dragdrop]', function(evt) { evt.stopPropagation(); afterImageUpload(evt); return false; } );
|
|
}
|
|
|
|
function renderAvatarScreen() {
|
|
rest.getUserDetail()
|
|
.done(populateAvatar)
|
|
.error(app.ajaxError)
|
|
}
|
|
|
|
function navToEditProfile() {
|
|
resetForm()
|
|
window.location = '#/account/profile'
|
|
}
|
|
|
|
function renderAvatar(path) {
|
|
|
|
// clear out
|
|
var avatarSpace = $('#account-profile-avatar-content-scroller .account-profile-avatar .avatar-space');
|
|
avatarSpace.children().remove();
|
|
|
|
if(!path) {
|
|
// no avatar found for account
|
|
var noAvatarSpace = $('<div></div>');
|
|
noAvatarSpace.addClass('no-avatar-space');
|
|
noAvatarSpace.text('Please upload a photo');
|
|
avatarSpace.append(noAvatarSpace);
|
|
}
|
|
else {
|
|
// create a s3 shared link
|
|
rest.getPhotoUrl({
|
|
photo_path : path })
|
|
.done(function(response) {
|
|
var photo_url = response.photo_url;
|
|
var avatar = $('<img/>');
|
|
avatar.attr('src', photo_url);
|
|
avatar.attr('alt', 'profile avatar')
|
|
|
|
avatarSpace.append(avatar);
|
|
avatar.Jcrop();
|
|
|
|
})
|
|
.error(app.ajaxError);
|
|
}
|
|
}
|
|
|
|
function afterImageUpload(event) {
|
|
tmpUploadPath = event.originalEvent.fpfile.key;
|
|
|
|
renderAvatar(tmpUploadPath);
|
|
}
|
|
|
|
function initialize() {
|
|
var screenBindings = {
|
|
'beforeShow': beforeShow,
|
|
'afterShow': afterShow
|
|
};
|
|
app.bindScreen('account/profile/avatar', screenBindings);
|
|
events();
|
|
}
|
|
|
|
this.initialize = initialize;
|
|
this.beforeShow = beforeShow;
|
|
this.afterShow = afterShow;
|
|
return this;
|
|
};
|
|
|
|
})(window,jQuery); |