scinote-web/app/assets/javascripts/sitewide/avatar_modal.js

103 lines
3.1 KiB
JavaScript
Raw Normal View History

2019-10-02 15:52:37 +08:00
2019-10-01 22:49:46 +08:00
/* eslint-disable no-restricted-globals, no-alert */
var avatarsModal = (function() {
2019-10-02 15:52:37 +08:00
var modal = '.modal-user-avatar';
2019-10-01 22:49:46 +08:00
function initUploadPhotoButton() {
$(modal).find('.upload-photo').click(() => {
2019-10-02 15:52:37 +08:00
$(modal).find('#raw_avatar').click();
});
}
function getBase64Image(img) {
var ctx;
var dataURL;
var canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 200;
ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
dataURL = canvas.toDataURL('image/png');
return dataURL;
2019-10-01 22:49:46 +08:00
}
function initCropTool() {
$(modal).find('#raw_avatar').change(function() {
var reader = new FileReader();
var inputField = this;
var croppieContainer;
$(modal).find('.current-avatar').hide();
reader.readAsDataURL(inputField.files[0]);
reader.onload = function() {
2019-10-02 15:52:37 +08:00
var avatarContainer = $(modal).find('.avatar-preview-container');
$(modal).find('.save-button').removeClass('disabled');
2019-10-01 22:49:46 +08:00
$(modal).find('#new_avatar').val(reader.result);
2019-10-02 15:52:37 +08:00
2019-10-01 22:49:46 +08:00
avatarContainer.show().children().remove();
$('<img class="avatar-cropping-preview" src="' + reader.result + '"></img>').appendTo(avatarContainer);
croppieContainer = $('.avatar-cropping-preview');
croppieContainer.croppie({ viewport: { width: 150, height: 150, type: 'circle' } });
avatarContainer.off('update.croppie').on('update.croppie', function() {
croppieContainer.croppie('result', { type: 'base64', format: 'jpeg', circle: false })
.then(function(image) {
$(modal).find('#new_avatar').val(image);
});
});
};
});
}
function initPredefinedAvatars() {
$(modal).find('.avatar-collection .avatar').click(function() {
2019-10-02 15:52:37 +08:00
$(modal).find('.save-button').removeClass('disabled');
$(modal).find('#raw_avatar')[0].value = null;
2019-10-01 22:49:46 +08:00
$(modal).find('.avatar-preview-container').hide();
$(modal).find('.current-avatar').show().find('img')
2019-10-02 15:52:37 +08:00
.attr('src', $(this).find('img').attr('src'));
$(modal).find('#new_avatar').val(getBase64Image($(this).find('img')[0]));
});
2019-10-01 22:49:46 +08:00
}
2019-10-02 15:52:37 +08:00
function initUpdateButton() {
$(modal).find('.save-button').click(function() {
if ($(this).hasClass('disabled')) return;
$(this).addClass('disabled');
$.ajax({
url: $(modal).data('update-url'),
type: 'PUT',
data: {
'user[avatar]': $(modal).find('#new_avatar').val(),
'user[change_avatar]': true
},
dataType: 'json',
success: () => {
location.reload();
},
error: () => {
$(this).removeClass('disabled');
}
});
});
2019-10-01 22:49:46 +08:00
}
return {
2019-10-02 15:52:37 +08:00
init: () => {
2019-10-11 18:22:09 +08:00
if ($(modal).length > 0) {
2019-10-02 15:52:37 +08:00
initUploadPhotoButton();
initCropTool();
initPredefinedAvatars();
initUpdateButton();
2019-11-05 17:43:02 +08:00
$('.user-settings-edit-avatar img, .avatar-container').click(() => {
2019-10-02 15:52:37 +08:00
$(modal).modal('show');
});
2019-10-01 22:49:46 +08:00
}
}
};
}());
$(document).on('turbolinks:load', function() {
avatarsModal.init();
});