client/file-dropper: add ability to lock URLs
This commit is contained in:
parent
5dfdfd49e9
commit
34366b72fb
2 changed files with 28 additions and 3 deletions
|
@ -15,6 +15,10 @@
|
|||
</label>
|
||||
<% if (ctx.allowUrls) { %>
|
||||
<input type='text' name='url' placeholder='Alternatively, paste an URL here.'/>
|
||||
<button>Add URL</button>
|
||||
<% if (ctx.lock) { %>
|
||||
<button>Confirm</button>
|
||||
<% } else { %>
|
||||
<button>Add URL</button>
|
||||
<% } %>
|
||||
<% } %>
|
||||
</div>
|
||||
|
|
|
@ -5,6 +5,8 @@ const views = require('../util/views.js');
|
|||
|
||||
const template = views.getTemplate('file-dropper');
|
||||
|
||||
const KEY_RETURN = 13;
|
||||
|
||||
class FileDropperControl extends events.EventTarget {
|
||||
constructor(target, options) {
|
||||
super();
|
||||
|
@ -14,6 +16,7 @@ class FileDropperControl extends events.EventTarget {
|
|||
extraText: options.extraText,
|
||||
allowMultiple: options.allowMultiple,
|
||||
allowUrls: options.allowUrls,
|
||||
lock: options.lock,
|
||||
id: 'file-' + Math.random().toString(36).substring(7),
|
||||
});
|
||||
|
||||
|
@ -37,8 +40,12 @@ class FileDropperControl extends events.EventTarget {
|
|||
'change', e => this._evtFileChange(e));
|
||||
|
||||
if (this._urlInputNode) {
|
||||
this._urlInputNode.addEventListener(
|
||||
'keydown', e => this._evtUrlInputKeyDown(e));
|
||||
}
|
||||
if (this._urlConfirmButtonNode) {
|
||||
this._urlConfirmButtonNode.addEventListener(
|
||||
'click', e => this._evtUrlConfirm(e));
|
||||
'click', e => this._evtUrlConfirmButtonClick(e));
|
||||
}
|
||||
|
||||
this._originalHtml = this._dropperNode.innerHTML;
|
||||
|
@ -62,6 +69,10 @@ class FileDropperControl extends events.EventTarget {
|
|||
|
||||
_emitUrls(urls) {
|
||||
urls = Array.from(urls).map(url => url.trim());
|
||||
if (this._options.lock) {
|
||||
this._dropperNode.innerText =
|
||||
urls.map(url => url.split(/\//).reverse()[0]).join(', ');
|
||||
}
|
||||
for (let url of urls) {
|
||||
if (!url) {
|
||||
return;
|
||||
|
@ -106,7 +117,17 @@ class FileDropperControl extends events.EventTarget {
|
|||
this._emitFiles(e.dataTransfer.files);
|
||||
}
|
||||
|
||||
_evtUrlConfirm(e) {
|
||||
_evtUrlInputKeyDown(e) {
|
||||
if (e.which !== KEY_RETURN) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
this._dropperNode.classList.remove('active');
|
||||
this._emitUrls(this._urlInputNode.value.split(/[\r\n]/));
|
||||
this._urlInputNode.value = '';
|
||||
}
|
||||
|
||||
_evtUrlConfirmButtonClick(e) {
|
||||
e.preventDefault();
|
||||
this._dropperNode.classList.remove('active');
|
||||
this._emitUrls(this._urlInputNode.value.split(/[\r\n]/));
|
||||
|
|
Loading…
Reference in a new issue