1
0
mirror of https://github.com/flarum/core.git synced 2025-10-14 00:15:51 +02:00
Files
php-flarum/js/forum/src/components/avatar-editor.js

104 lines
2.6 KiB
JavaScript

import Component from 'flarum/component';
import avatar from 'flarum/helpers/avatar';
import icon from 'flarum/helpers/icon';
import listItems from 'flarum/helpers/list-items';
import ItemList from 'flarum/utils/item-list';
import ActionButton from 'flarum/components/action-button';
import LoadingIndicator from 'flarum/components/loading-indicator';
export default class AvatarEditor extends Component {
constructor(props) {
super(props);
this.loading = m.prop(false);
}
view() {
var user = this.props.user;
return m('div.avatar-editor.dropdown', {
className: (this.loading() ? 'loading' : '')+' '+(this.props.className || '')
}, [
avatar(user),
m('a.dropdown-toggle[href=javascript:;][data-toggle=dropdown]', {onclick: this.quickUpload.bind(this)}, [
this.loading() ? LoadingIndicator.component() : icon('pencil icon')
]),
m('ul.dropdown-menu', listItems(this.controlItems().toArray()))
]);
}
controlItems() {
var items = new ItemList();
items.add('upload',
ActionButton.component({
icon: 'upload',
label: 'Upload',
onclick: this.upload.bind(this)
})
);
items.add('remove',
ActionButton.component({
icon: 'times',
label: 'Remove',
onclick: this.remove.bind(this)
})
);
return items;
}
quickUpload(e) {
if (!this.props.user.avatarUrl()) {
e.preventDefault();
e.stopPropagation();
this.upload();
}
}
upload() {
if (this.loading()) { return; }
var $input = $('<input type="file">');
var user = this.props.user;
var self = this;
$input.appendTo('body').hide().click().on('change', function() {
var data = new FormData();
data.append('avatar', $(this)[0].files[0]);
self.loading(true);
m.redraw();
m.request({
method: 'POST',
url: app.config['api_url']+'/users/'+user.id()+'/avatar',
data: data,
serialize: data => data,
background: true,
config: app.session.authorize.bind(app.session)
}).then(function(data) {
self.loading(false);
app.store.pushPayload(data);
delete user.avatarColor;
m.redraw();
});
});
}
remove() {
var self = this;
var user = this.props.user;
self.loading(true);
m.redraw();
m.request({
method: 'DELETE',
url: app.config['api_url']+'/users/'+user.id()+'/avatar',
config: app.session.authorize.bind(app.session)
}).then(function(data) {
self.loading(false);
app.store.pushPayload(data);
delete user.avatarColor;
m.redraw();
});
}
}