diff --git a/client/js/controls/file_dropper_control.js b/client/js/controls/file_dropper_control.js index 8c15cce4..c49ff1da 100644 --- a/client/js/controls/file_dropper_control.js +++ b/client/js/controls/file_dropper_control.js @@ -1,12 +1,16 @@ 'use strict'; +const events = require('../events.js'); const views = require('../util/views.js'); -class FileDropperControl { +const template = views.getTemplate('file-dropper'); + +class FileDropperControl extends events.EventTarget { constructor(target, options) { + super(); + this._options = options; - this._template = views.getTemplate('file-dropper'); - const source = this._template({ + const source = template({ allowMultiple: this._options.allowMultiple, id: 'file-' + Math.random().toString(36).substring(7), }); @@ -34,15 +38,17 @@ class FileDropperControl { reset() { this._dropperNode.innerHTML = this._originalHtml; + this.dispatchEvent(new CustomEvent('reset')); } - _resolve(files) { + _emitFiles(files) { files = Array.from(files); if (this._options.lock) { this._dropperNode.innerText = files.map(file => file.name).join(', '); } - this._options.resolve(files); + this.dispatchEvent( + new CustomEvent('fileadd', {detail: {files: files}})); } _evtFileChange(e) { @@ -65,6 +71,10 @@ class FileDropperControl { e.preventDefault(); } + _evtFileChange(e) { + this._emitFiles(e.target.files); + } + _evtDrop(e) { e.preventDefault(); this._dropperNode.classList.remove('active'); @@ -74,7 +84,7 @@ class FileDropperControl { if (!this._options.allowMultiple && e.dataTransfer.files.length > 1) { window.alert('Cannot select multiple files.'); } - this._resolve(e.dataTransfer.files); + this._emitFiles(e.dataTransfer.files); } } diff --git a/client/js/controls/post_edit_sidebar_control.js b/client/js/controls/post_edit_sidebar_control.js index 2c279d4d..670f8c56 100644 --- a/client/js/controls/post_edit_sidebar_control.js +++ b/client/js/controls/post_edit_sidebar_control.js @@ -62,25 +62,19 @@ class PostEditSidebarControl extends events.EventTarget { if (this._contentInputNode) { this._contentFileDropper = new FileDropperControl( - this._contentInputNode, - { - lock: true, - resolve: files => { - this._newPostContent = files[0]; - }, - }); + this._contentInputNode, {lock: true}); + this._contentFileDropper.addEventListener('fileadd', e => { + this._newPostContent = e.detail.files[0]; + }); } if (this._thumbnailInputNode) { this._thumbnailFileDropper = new FileDropperControl( - this._thumbnailInputNode, - { - lock: true, - resolve: files => { - this._newPostThumbnail = files[0]; - this._thumbnailRemovalLinkNode.style.display = 'block'; - }, - }); + this._thumbnailInputNode, {lock: true}); + this._thumbnailFileDropper.addEventListener('fileadd', e => { + this._newPostThumbnail = e.detail.files[0]; + this._thumbnailRemovalLinkNode.style.display = 'block'; + }); } if (this._thumbnailRemovalLinkNode) { diff --git a/client/js/views/user_edit_view.js b/client/js/views/user_edit_view.js index 45dc3559..0e07df37 100644 --- a/client/js/views/user_edit_view.js +++ b/client/js/views/user_edit_view.js @@ -21,16 +21,13 @@ class UserEditView extends events.EventTarget { this._avatarContent = null; if (this._avatarContentInputNode) { - new FileDropperControl( - this._avatarContentInputNode, - { - lock: true, - resolve: files => { - this._hostNode.querySelector( - '[name=avatar-style][value=manual]').checked = true; - this._avatarContent = files[0]; - }, - }); + this._avatarFileDropper = new FileDropperControl( + this._avatarContentInputNode, {lock: true}); + this._avatarFileDropper.addEventListener('fileadd', e => { + this._hostNode.querySelector( + '[name=avatar-style][value=manual]').checked = true; + this._avatarContent = e.detail.files[0]; + }); } this._formNode.addEventListener('submit', e => this._evtSubmit(e));