scinote-web/app/assets/javascripts/users/registrations/edit.js

103 lines
3.1 KiB
JavaScript
Raw Normal View History

2018-07-23 17:26:09 +08:00
(function() {
'use strict';
2016-02-12 23:52:43 +08:00
2018-07-23 17:26:09 +08:00
/**
* Toggle the view/edit form visibility.
* @param form - The jQuery form selector.
* @param edit - True to set form to edit mode;
* false to set form to view mode.
*/
2016-02-12 23:52:43 +08:00
2018-07-23 17:26:09 +08:00
/* global _ filesValidator animateSpinner FileTypeEnum */
2016-02-12 23:52:43 +08:00
2018-07-23 17:26:09 +08:00
var forms = $('form[data-for]');
function toggleFormVisibility(form, edit) {
2016-02-12 23:52:43 +08:00
var val = form.find("input[data-role='src']").val();
2018-07-23 17:26:09 +08:00
if (edit) {
form.find("[data-part='view']").hide();
form.find("[data-part='edit']").show();
form.find("[data-part='edit'] input:not([type='file']):not([type='submit']):first").focus();
} else {
form.find("[data-part='view']").show();
form.find("[data-part='edit'] input").blur();
form.find("[data-part='edit']").hide();
// Clear all errors on the parent form
form.clearFormErrors();
// Clear any neccesary fields
form.find("input[data-role='clear']").val('');
// Copy field data
form.find("input[data-role='edit']").val(val);
}
2016-02-12 23:52:43 +08:00
}
2018-07-23 17:26:09 +08:00
// Add "edit form" listeners
forms.find("[data-action='edit']").click(function(ev) {
var $form = $(this).closest('form');
ev.preventDefault();
// First, hide all form edits
_.each(forms, function() {
toggleFormVisibility($form, false);
});
2016-02-12 23:52:43 +08:00
2018-07-23 17:26:09 +08:00
// Then, edit the current form
toggleFormVisibility($form, true);
2016-02-12 23:52:43 +08:00
});
2018-07-23 17:26:09 +08:00
// Add "cancel form" listeners
forms.find("[data-action='cancel']").click(function(ev) {
var $form = $(this).closest('form');
ev.preventDefault();
2016-02-12 23:52:43 +08:00
2018-07-23 17:26:09 +08:00
// Hide the edit portion of the form
toggleFormVisibility($form, false);
});
2016-02-12 23:52:43 +08:00
2018-07-23 17:26:09 +08:00
// Add form submit listeners
forms.not("[data-for='avatar']")
.on('ajax:success', function() {
// Simply reload the page
location.reload();
})
.on('ajax:error', function(ev, data) {
// Render form errors
$(this).renderFormErrors('user', data.responseJSON);
});
2016-02-12 23:52:43 +08:00
$('#user_raw_avatar').change(function() {
var reader = new FileReader();
var inputField = this;
var croppieContainer;
reader.readAsDataURL(inputField.files[0]);
reader.onload = function() {
$('#user_avatar').val(reader.result);
$('.new-avatar-preview-container').css('display', '').children().remove();
$('<img class="new-avatar-cropping-preview" src="' + reader.result + '"></img>').appendTo('.new-avatar-preview-container');
croppieContainer = $('.new-avatar-cropping-preview');
croppieContainer.croppie({ viewport: { type: 'circle' } });
$('.new-avatar-preview-container').off('update.croppie').on('update.croppie', function() {
croppieContainer.croppie('result', { type: 'base64', format: 'jpeg', circle: false })
.then(function(html) {
$('#user_avatar').val(html);
});
});
};
});
$('#user-avatar-field :submit').click(function(ev) {
2018-07-23 17:26:09 +08:00
var $form = $(ev.target.form);
var $fileInput = $form.find('input[type=file]');
$form.clearFormErrors();
2016-02-12 23:52:43 +08:00
2018-07-23 17:26:09 +08:00
if (filesValidator(ev, $fileInput, FileTypeEnum.AVATAR)) {
// Local file uploading
animateSpinner();
}
});
2018-07-23 17:26:09 +08:00
}());