mirror of
https://github.com/flarum/core.git
synced 2025-10-14 00:15:51 +02:00
104 lines
2.6 KiB
JavaScript
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();
|
|
});
|
|
}
|
|
}
|