Accords-Library-Archive
/
gallery.accords-library.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

client/file-dropper: refactor to use events

This commit is contained in:
rr- 2016-08-20 22:30:08 +02:00
parent 8feac2950b
commit ecd50f5c88
3 changed files with 32 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
client/js/controls/file_dropper_control.js
View File

@ -1,12 +1,16 @@
'use strict'; 'use strict';
const events = require('../events.js');
const views = require('../util/views.js'); const views = require('../util/views.js');
class FileDropperControl { const template = views.getTemplate('file-dropper');
class FileDropperControl extends events.EventTarget {
constructor(target, options) { constructor(target, options) {
super();
this._options = options; this._options = options;
this._template = views.getTemplate('file-dropper'); const source = template({
const source = this._template({
allowMultiple: this._options.allowMultiple, allowMultiple: this._options.allowMultiple,
id: 'file-' + Math.random().toString(36).substring(7), id: 'file-' + Math.random().toString(36).substring(7),
}); });
@ -34,15 +38,17 @@ class FileDropperControl {
reset() { reset() {
this._dropperNode.innerHTML = this._originalHtml; this._dropperNode.innerHTML = this._originalHtml;
this.dispatchEvent(new CustomEvent('reset'));
} }
_resolve(files) { _emitFiles(files) {
files = Array.from(files); files = Array.from(files);
if (this._options.lock) { if (this._options.lock) {
this._dropperNode.innerText = this._dropperNode.innerText =
files.map(file => file.name).join(', '); files.map(file => file.name).join(', ');
} }
this._options.resolve(files); this.dispatchEvent(
new CustomEvent('fileadd', {detail: {files: files}}));
} }
_evtFileChange(e) { _evtFileChange(e) {
@ -65,6 +71,10 @@ class FileDropperControl {
e.preventDefault(); e.preventDefault();
} }
_evtFileChange(e) {
this._emitFiles(e.target.files);
}
_evtDrop(e) { _evtDrop(e) {
e.preventDefault(); e.preventDefault();
this._dropperNode.classList.remove('active'); this._dropperNode.classList.remove('active');
@ -74,7 +84,7 @@ class FileDropperControl {
if (!this._options.allowMultiple && e.dataTransfer.files.length > 1) { if (!this._options.allowMultiple && e.dataTransfer.files.length > 1) {
window.alert('Cannot select multiple files.'); window.alert('Cannot select multiple files.');
} }
this._resolve(e.dataTransfer.files); this._emitFiles(e.dataTransfer.files);
} }
} }

24
client/js/controls/post_edit_sidebar_control.js
View File

@ -62,25 +62,19 @@ class PostEditSidebarControl extends events.EventTarget {
if (this._contentInputNode) { if (this._contentInputNode) {
this._contentFileDropper = new FileDropperControl( this._contentFileDropper = new FileDropperControl(
this._contentInputNode, this._contentInputNode, {lock: true});
{ this._contentFileDropper.addEventListener('fileadd', e => {
lock: true, this._newPostContent = e.detail.files[0];
resolve: files => { });
this._newPostContent = files[0];
},
});
} }
if (this._thumbnailInputNode) { if (this._thumbnailInputNode) {
this._thumbnailFileDropper = new FileDropperControl( this._thumbnailFileDropper = new FileDropperControl(
this._thumbnailInputNode, this._thumbnailInputNode, {lock: true});
{ this._thumbnailFileDropper.addEventListener('fileadd', e => {
lock: true, this._newPostThumbnail = e.detail.files[0];
resolve: files => { this._thumbnailRemovalLinkNode.style.display = 'block';
this._newPostThumbnail = files[0]; });
this._thumbnailRemovalLinkNode.style.display = 'block';
},
});
} }
if (this._thumbnailRemovalLinkNode) { if (this._thumbnailRemovalLinkNode) {

17
client/js/views/user_edit_view.js
View File

@ -21,16 +21,13 @@ class UserEditView extends events.EventTarget {
this._avatarContent = null; this._avatarContent = null;
if (this._avatarContentInputNode) { if (this._avatarContentInputNode) {
new FileDropperControl( this._avatarFileDropper = new FileDropperControl(
this._avatarContentInputNode, this._avatarContentInputNode, {lock: true});
{ this._avatarFileDropper.addEventListener('fileadd', e => {
lock: true, this._hostNode.querySelector(
resolve: files => { '[name=avatar-style][value=manual]').checked = true;
this._hostNode.querySelector( this._avatarContent = e.detail.files[0];
'[name=avatar-style][value=manual]').checked = true; });
this._avatarContent = files[0];
},
});
} }
this._formNode.addEventListener('submit', e => this._evtSubmit(e)); this._formNode.addEventListener('submit', e => this._evtSubmit(e));