client/file-dropper: add ability to lock URLs

client/html/file_dropper.tpl

@@ -15,6 +15,10 @@
     </label>
     <% if (ctx.allowUrls) { %>
         <input type='text' name='url' placeholder='Alternatively, paste an URL here.'/>
+        <% if (ctx.lock) { %>
+            <button>Confirm</button>
+        <% } else { %>
             <button>Add URL</button>
         <% } %>
+    <% } %>
 </div>

client/js/controls/file_dropper_control.js

@@ -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]/));