gitlab-org--gitlab-foss/app/assets/javascripts/profile/profile.js

90 lines
2.4 KiB
JavaScript
Raw Normal View History

import $ from 'jquery';
import axios from '~/lib/utils/axios_utils';
import flash from '../flash';
2018-02-23 11:18:24 -05:00
export default class Profile {
constructor({ form } = {}) {
this.onSubmitForm = this.onSubmitForm.bind(this);
this.form = form || $('.edit-user');
this.setRepoRadio();
this.bindEvents();
this.initAvatarGlCrop();
}
2016-07-24 16:45:11 -04:00
2018-02-23 11:18:24 -05:00
initAvatarGlCrop() {
const cropOpts = {
filename: '.js-avatar-filename',
previewImage: '.avatar-image .avatar',
modalCrop: '.modal-profile-crop',
pickImageEl: '.js-choose-user-avatar-button',
uploadImageBtn: '.js-upload-user-avatar',
2018-03-20 12:00:10 -04:00
modalCropImg: '.modal-profile-crop-image',
2018-02-23 11:18:24 -05:00
};
2018-03-20 12:00:10 -04:00
this.avatarGlCrop = $('.js-user-avatar-input')
.glCrop(cropOpts)
.data('glcrop');
2018-02-23 11:18:24 -05:00
}
2016-09-08 11:18:35 -04:00
2018-02-23 11:18:24 -05:00
bindEvents() {
$('.js-preferences-form').on('change.preference', 'input[type=radio]', this.submitForm);
2018-02-23 11:18:24 -05:00
$('#user_notification_email').on('change', this.submitForm);
$('#user_notified_of_own_activity').on('change', this.submitForm);
this.form.on('submit', this.onSubmitForm);
}
2016-07-24 16:45:11 -04:00
2018-02-23 11:18:24 -05:00
submitForm() {
2018-03-20 12:00:10 -04:00
return $(this)
.parents('form')
.submit();
2018-02-23 11:18:24 -05:00
}
2016-09-08 11:18:35 -04:00
2018-02-23 11:18:24 -05:00
onSubmitForm(e) {
e.preventDefault();
return this.saveForm();
}
2016-07-24 16:45:11 -04:00
2018-02-23 11:18:24 -05:00
saveForm() {
const self = this;
2018-07-17 15:03:16 -04:00
const formData = new FormData(this.form.get(0));
2018-02-23 11:18:24 -05:00
const avatarBlob = this.avatarGlCrop.getBlob();
2016-09-08 11:18:35 -04:00
2018-02-23 11:18:24 -05:00
if (avatarBlob != null) {
formData.append('user[avatar]', avatarBlob, 'avatar.png');
2016-09-08 11:18:35 -04:00
}
2018-07-17 15:03:16 -04:00
formData.delete('user[avatar]-trigger');
2018-02-23 11:18:24 -05:00
axios({
method: this.form.attr('method'),
url: this.form.attr('action'),
data: formData,
})
.then(({ data }) => {
if (avatarBlob != null) {
this.updateHeaderAvatar();
}
flash(data.message, 'notice');
})
2018-03-20 12:00:10 -04:00
.then(() => {
window.scrollTo(0, 0);
// Enable submit button after requests ends
self.form.find(':input[disabled]').enable();
})
.catch(error => flash(error.message));
2016-09-08 11:18:35 -04:00
}
2016-07-24 16:45:11 -04:00
updateHeaderAvatar() {
$('.header-user-avatar').attr('src', this.avatarGlCrop.dataURL);
}
2018-02-23 11:18:24 -05:00
setRepoRadio() {
const multiEditRadios = $('input[name="user[multi_file]"]');
if (this.newRepoActivated || this.newRepoActivated === 'true') {
multiEditRadios.filter('[value=on]').prop('checked', true);
} else {
multiEditRadios.filter('[value=off]').prop('checked', true);
2016-07-24 16:45:11 -04:00
}
2018-02-23 11:18:24 -05:00
}
}