From f4c5d3e159e606b7c2bb9969856d874765aa7dfa Mon Sep 17 00:00:00 2001 From: barisusakli Date: Sat, 3 Oct 2015 18:36:50 -0400 Subject: [PATCH] parse picture modals when needed https://github.com/NodeBB/nodebb-theme-persona/issues/161 --- public/src/client/account/edit.js | 177 +++++++++++++++--------------- 1 file changed, 91 insertions(+), 86 deletions(-) diff --git a/public/src/client/account/edit.js b/public/src/client/account/edit.js index 886069a40c..907c52acf0 100644 --- a/public/src/client/account/edit.js +++ b/public/src/client/account/edit.js @@ -29,12 +29,10 @@ define('forum/account/edit', ['forum/account/header', 'uploader', 'translator'], handleImageChange(); handleAccountDelete(); - handleImageUpload(); handleEmailConfirm(); handlePasswordChange(); updateSignature(); updateAboutMe(); - updateImages(); }; function updateProfile() { @@ -68,7 +66,7 @@ define('forum/account/edit', ['forum/account/header', 'uploader', 'translator'], if (data.userslug) { var oldslug = $('.account-username-box').attr('data-userslug'); - $('.account-username-box a').each(function(index) { + $('.account-username-box a').each(function() { $(this).attr('href', $(this).attr('href').replace(oldslug, data.userslug)); }); @@ -104,49 +102,78 @@ define('forum/account/edit', ['forum/account/header', 'uploader', 'translator'], } function handleImageChange() { - function selectImageType(type) { - $('#gravatar-box .fa-check').toggle(type === 'gravatar'); - $('#uploaded-box .fa-check').toggle(type === 'uploaded'); - selectedImageType = type; - } $('#changePictureBtn').on('click', function() { - selectedImageType = ''; - updateImages(); + templates.parse('partials/modals/change_picture_modal', {uploadedpicture: uploadedPicture}, function(html) { + translator.translate(html, function(html) { + function updateImages() { + var currentPicture = $('#user-current-picture').attr('src'); - $('#change-picture-modal').modal('show'); - $('#change-picture-modal').removeClass('hide'); + if (gravatarPicture) { + modal.find('#user-gravatar-picture').attr('src', gravatarPicture); + } - return false; - }); + if (uploadedPicture) { + modal.find('#user-uploaded-picture').attr('src', uploadedPicture); + } - $('#gravatar-box').on('click', function() { - selectImageType('gravatar'); - }); + modal.find('#gravatar-box').toggle(!!gravatarPicture); + modal.find('#uploaded-box').toggle(!!uploadedPicture); - $('#uploaded-box').on('click', function() { - selectImageType('uploaded'); - }); + modal.find('#gravatar-box .fa-check').toggle(currentPicture !== uploadedPicture); + modal.find('#uploaded-box .fa-check').toggle(currentPicture === uploadedPicture); + } - $('#savePictureChangesBtn').on('click', function() { - $('#change-picture-modal').modal('hide'); + function selectImageType(type) { + modal.find('#gravatar-box .fa-check').toggle(type === 'gravatar'); + modal.find('#uploaded-box .fa-check').toggle(type === 'uploaded'); + selectedImageType = type; + } - if (!selectedImageType) { - return; - } - changeUserPicture(selectedImageType, function(err) { - if (err) { - return app.alertError(err.message); - } + var modal = $(html); + modal.on('hidden.bs.modal', function() { + modal.remove(); + }); + selectedImageType = ''; + updateImages(); - if (selectedImageType === 'gravatar') { - $('#user-current-picture').attr('src', gravatarPicture); - updateHeader(gravatarPicture); - } else if (selectedImageType === 'uploaded') { - $('#user-current-picture').attr('src', uploadedPicture); - updateHeader(uploadedPicture); - } + modal.modal('show'); + + modal.find('#gravatar-box').on('click', function() { + selectImageType('gravatar'); + }); + + modal.find('#uploaded-box').on('click', function() { + selectImageType('uploaded'); + }); + + handleImageUpload(modal); + + modal.find('#savePictureChangesBtn').on('click', function() { + + modal.modal('hide'); + + if (!selectedImageType) { + return; + } + changeUserPicture(selectedImageType, function(err) { + if (err) { + return app.alertError(err.message); + } + + if (selectedImageType === 'gravatar') { + $('#user-current-picture').attr('src', gravatarPicture); + updateHeader(gravatarPicture); + } else if (selectedImageType === 'uploaded') { + $('#user-current-picture').attr('src', uploadedPicture); + updateHeader(uploadedPicture); + } + }); + }); + }); }); + + return false; }); } @@ -178,32 +205,23 @@ define('forum/account/edit', ['forum/account/header', 'uploader', 'translator'], }); } - function handleImageUpload() { + function handleImageUpload(modal) { function onUploadComplete(urlOnServer) { urlOnServer = urlOnServer + '?' + new Date().getTime(); $('#user-current-picture').attr('src', urlOnServer); - $('#user-uploaded-picture').attr('src', urlOnServer); updateHeader(urlOnServer); uploadedPicture = urlOnServer; - $('#removeUploadedPictureBtn').removeClass('hide'); } function onRemoveComplete(urlOnServer) { $('#user-current-picture').attr('src', urlOnServer); - $('#user-uploaded-picture').attr('src', ''); updateHeader(urlOnServer); uploadedPicture = ''; - $('#removeUploadedPictureBtn').addClass('hide'); } - $('#upload-picture-modal').on('hide', function() { - $('#userPhotoInput').val(''); - }); - - $('#uploadPictureBtn').on('click', function() { - - $('#change-picture-modal').modal('hide'); + modal.find('#uploadPictureBtn').on('click', function() { + modal.modal('hide'); uploader.open(config.relative_path + '/api/user/' + ajaxify.data.userslug + '/uploadpicture', {}, config.maximumProfileImageSize, function(imageUrlOnServer) { onUploadComplete(imageUrlOnServer); }); @@ -211,39 +229,44 @@ define('forum/account/edit', ['forum/account/header', 'uploader', 'translator'], return false; }); - $('#uploadFromUrlBtn').on('click', function() { - $('#change-picture-modal').modal('hide'); - var uploadModal = $('#upload-picture-from-url-modal'); - uploadModal.modal('show').removeClass('hide'); + modal.find('#uploadFromUrlBtn').on('click', function() { + modal.modal('hide'); + templates.parse('partials/modals/upload_picture_from_url_modal', {}, function(html) { + translator.translate(html, function(html) { + var uploadModal = $(html); + uploadModal.modal('show'); + + uploadModal.find('.upload-btn').on('click', function() { + var url = uploadModal.find('#uploadFromUrl').val(); + if (!url) { + return; + } + socket.emit('user.uploadProfileImageFromUrl', {url: url, uid: ajaxify.data.theirid}, function(err, imageUrlOnServer) { + if (err) { + return app.alertError(err.message); + } + onUploadComplete(imageUrlOnServer); - uploadModal.find('.upload-btn').on('click', function() { - var url = uploadModal.find('#uploadFromUrl').val(); - if (!url) { - return; - } - socket.emit('user.uploadProfileImageFromUrl', {url: url, uid: ajaxify.data.theirid}, function(err, imageUrlOnServer) { - if (err) { - return app.alertError(err.message); - } - onUploadComplete(imageUrlOnServer); + uploadModal.modal('hide'); + }); - uploadModal.modal('hide'); + return false; + }); }); - - return false; }); + return false; }); - $('#removeUploadedPictureBtn').on('click', function() { + modal.find('#removeUploadedPictureBtn').on('click', function() { socket.emit('user.removeUploadedPicture', {uid: ajaxify.data.theirid}, function(err, imageUrlOnServer) { + modal.modal('hide'); if (err) { return app.alertError(err.message); } onRemoveComplete(imageUrlOnServer); - $('#change-picture-modal').modal('hide'); }); - }) + }); } function handleEmailConfirm() { @@ -348,24 +371,6 @@ define('forum/account/edit', ['forum/account/header', 'uploader', 'translator'], }, callback); } - function updateImages() { - var currentPicture = $('#user-current-picture').attr('src'); - - if (gravatarPicture) { - $('#user-gravatar-picture').attr('src', gravatarPicture); - } - - if (uploadedPicture) { - $('#user-uploaded-picture').attr('src', uploadedPicture); - } - - $('#gravatar-box').toggle(!!gravatarPicture); - $('#uploaded-box').toggle(!!uploadedPicture); - - $('#gravatar-box .fa-check').toggle(currentPicture !== uploadedPicture); - $('#uploaded-box .fa-check').toggle(currentPicture === uploadedPicture); - } - function getCharsLeft(el, max) { return el.length ? '(' + el.val().length + '/' + max + ')' : ''; }