client: Use expanders and full tag input control on the upload page

client/css/expander-control.styl

@@ -19,7 +19,7 @@
                 font-size: 1em
                 color: $inactive-link-color
                 float: right
-                line-height: 2em
+                line-height: 2rem
     .expander-content
         padding: 0.5em 0.5em 2em 0.5em
 

client/css/post-upload.styl

@@ -16,15 +16,21 @@ $cancel-button-color = tomato
         &.inactive .always-upload-similar
         &.inactive .pause-remain-on-error
         &.inactive .upload-all-anonymous
+        &.inactive .expander
         &.inactive #common-tags,
         &.uploading input[type=submit],
         &.uploading .skip-duplicates,
         &.uploading .always-upload-similar
         &.uploading .pause-remain-on-error
         &.uploading .upload-all-anonymous
+        &.uploading .expander
         &:not(.uploading) .cancel
             display: none
 
+        &.inactive .control-strip
+        &.uploading .control-strip
+            gap: 0
+
     .dropper-container
         margin: 0 auto
         .file-dropper
@@ -33,42 +39,35 @@ $cancel-button-color = tomato
             small
                 font-size: 60%
 
-    label[for=common-tags]
-        display: none !important
-
-    input[type=submit]
-        margin-top: 1em
+    .expander
+        &.collapsed
+            margin-bottom: 0
+        .expander-content
+            padding: 0.5em
 
     .cancel
-        margin-top: 1em
         background: $cancel-button-color
         border-color: $cancel-button-color
         &:focus
             border: 2px solid $text-color
 
-    .skip-duplicates
-        margin-left: 1em
-
-    .always-upload-similar
-        margin-left: 1em
-
-    .pause-remain-on-error
-        margin-left: 1em
-
-    .upload-all-anonymous
-        margin-left: 1em
-
     form>.messages
         margin-top: 1em
 
     .control-strip
         display: flex
         flex-direction: column
-        gap: 0.5em
+        gap: 1em
+        margin-top: 1em
 
     .control-options
         display: flex
-        flex-direction: column
+        flex-wrap: wrap
+        gap: 0 1em
+
+        span
+            flex: 1 1 30%
+            white-space: nowrap
 
     .uploadables-container
         list-style-type: none

client/html/post_upload.tpl

@@ -3,8 +3,6 @@
         <div class='dropper-container'></div>
 
         <div class='control-strip'>
-            <input type='submit' value='Upload all' class='submit'/>
-
             <div class='control-options'>
                 <span class='skip-duplicates'>
                     <%= ctx.makeCheckbox({
@@ -39,8 +37,11 @@
                 </span>
             </div>
 
-            <%= ctx.makeTextInput({placeholder: 'Common tags', id: 'common-tags', name: 'common-tags'}) %>
+            <section class='common-tags'>
+                <%= ctx.makeTextInput({name: 'common-tags'}) %>
+            </section>
 
+            <input type='submit' value='Upload all' class='submit'/>
             <input type='button' value='Cancel' class='cancel'/>
         </div>
 

client/js/views/post_upload_view.js

@@ -4,13 +4,13 @@ const events = require("../events.js");
 const api = require("../api.js");
 const views = require("../util/views.js");
 const FileDropperControl = require("../controls/file_dropper_control.js");
+const ExpanderControl = require("../controls/expander_control.js");
+const TagInputControl = require("../controls/tag_input_control.js");
 
 const template = views.getTemplate("post-upload");
 const rowTemplate = views.getTemplate("post-upload-row");
 
-const misc = require('../util/misc.js');
-const TagAutoCompleteControl =
-    require('../controls/tag_auto_complete_control.js');
+const TagList = require("../models/tag_list.js");
 
 function _mimeTypeToPostType(mimeType) {
     return (
@@ -164,6 +164,7 @@ class PostUploadView extends events.EventTarget {
         this._uploadables.find = (u) => {
             return this._uploadables.findIndex((u2) => u.key === u2.key);
         };
+        this._commonTags = new TagList();
 
         this._contentFileDropper = new FileDropperControl(
             this._contentInputNode,
@@ -190,14 +191,21 @@ class PostUploadView extends events.EventTarget {
         );
         this._formNode.classList.add("inactive");
 
+        this._commonTagsExpander = new ExpanderControl(
+            "common-tags",
+            "Common Tags (0)",
+            this._hostNode.querySelectorAll(".common-tags")
+        );
+
         if (this._commonTagsInputNode) {
-            this._autoCompleteControl = new TagAutoCompleteControl(
+            this._commonTagsControl = new TagInputControl(
                 this._commonTagsInputNode,
-                {
-                    confirm: tag =>
-                        this._autoCompleteControl.replaceSelectedText(
-                            misc.escapeSearchTerm(tag.names[0]), true),
-                });
+                this._commonTags
+            );
+
+            this._commonTagsControl.addEventListener("change", (_) => {
+                this._commonTagsExpander.title = `Common Tags (${this._commonTags.length})`;
+            });
         }
     }
 
@@ -321,9 +329,7 @@ class PostUploadView extends events.EventTarget {
 
         uploadable.tags = [];
         if (this._commonTagsInputNode) {
-            var tags = this._commonTagsInputNode.value.split(' ');
-            tags = tags.filter(t => t != "").map(t => t.replace('\\', ''));
-            uploadable.tags = uploadable.tags.concat(tags);
+            uploadable.tags = this._commonTags.map((tag) => tag.names[0]);
         }
         uploadable.relations = [];
         for (let [i, lookalike] of uploadable.lookalikes.entries()) {
@@ -460,7 +466,9 @@ class PostUploadView extends events.EventTarget {
     }
 
     get _uploadAllAnonymous() {
-        return this._hostNode.querySelector("form [name=upload-all-anonymous]");
+        return this._hostNode.querySelector(
+            "form [name=upload-all-anonymous]"
+        );
     }
 
     get _submitButtonNode() {
@@ -476,7 +484,7 @@ class PostUploadView extends events.EventTarget {
     }
 
     get _commonTagsInputNode() {
-        return this._formNode.querySelector('form [name=common-tags]');
+        return this._formNode.querySelector(".common-tags input");
     }
 }