From e4954140f86dec8f8c59a78fdbf73bb7366ea543 Mon Sep 17 00:00:00 2001
From: rr- <rr-@sakuya.pl>
Date: Sat, 30 Jul 2016 12:20:40 +0200
Subject: [PATCH] client/tags: rewrite tag input

Suggestions will be reimplemented in separate commit
---
 client/css/forms.styl                   |  43 +-
 client/css/posts.styl                   |  12 -
 client/html/post_readonly_sidebar.tpl   |   2 +-
 client/js/controls/tag_input_control.js | 518 ++++++------------------
 4 files changed, 155 insertions(+), 420 deletions(-)

diff --git a/client/css/forms.styl b/client/css/forms.styl
index 3590c8c..1252dd9 100644
--- a/client/css/forms.styl
+++ b/client/css/forms.styl
@@ -134,7 +134,6 @@ input[type=checkbox]:focus + .checkbox:before
 /*
  * Regular inputs
  */
-div.tag-input,
 select,
 textarea,
 input[type=text],
@@ -175,28 +174,26 @@ input:disabled
     cursor: not-allowed
 
 div.tag-input
-    min-height: 4.75em
-    vertical-align: top
-    display: inline-block
-    cursor: text
-    word-wrap: break-word
-    a
-        line-height: 110%
-        position: relative
-        z-index: 1
-    span
-        line-height: 110%
-        &.new a
-            background: $new-tag-background-color
-            color: $new-tag-text-color
-        &.duplicate a
-            background: $duplicate-tag-background-color
-            color: $duplicate-tag-text-color
-        &.editable
-            outline: 0
-            padding-right: 0.2em
-            &:last-child
-                padding-left: 0.2em
+    li.new
+        background: $new-tag-background-color
+        color: $new-tag-text-color
+    li.duplicate
+        background: $duplicate-tag-background-color
+        color: $duplicate-tag-text-color
+    ul
+        margin-top: 0.2em
+
+ul.compact-tags
+    line-height: 130%
+    word-break: break-all
+    li
+        margin: 0
+    i
+        padding-right: 0.4em
+    .count
+        color: $inactive-link-color
+        padding-left: 0.7em
+        font-size: 90%
 
 div.tag-relations
     font-size: 80%
diff --git a/client/css/posts.styl b/client/css/posts.styl
index eb27199..805a54e 100644
--- a/client/css/posts.styl
+++ b/client/css/posts.styl
@@ -300,16 +300,8 @@ $safety-unsafe = #F3985F
 
     .tags
         margin-top: 2em
-        line-height: 130%
-        word-break: break-all
         h1
             margin-bottom: 0.5em
-        i
-            padding-right: 0.4em
-        .count
-            color: $inactive-link-color
-            padding-left: 0.7em
-            font-size: 90%
 
 .post-view .edit-sidebar
     section
@@ -324,10 +316,6 @@ $safety-unsafe = #F3985F
             flex-grow: 1
             display: inline-block
 
-    .tags
-        .tag-input
-            min-height: 6.25em
-
     label
         margin-bottom: 0.3em
         display: block
diff --git a/client/html/post_readonly_sidebar.tpl b/client/html/post_readonly_sidebar.tpl
index 0b096a8..0492b7e 100644
--- a/client/html/post_readonly_sidebar.tpl
+++ b/client/html/post_readonly_sidebar.tpl
@@ -63,7 +63,7 @@
     <nav class='tags'>
         <h1>Tags (<%- ctx.post.tags.length %>)</h1>
         <% if (ctx.post.tags.length) { %>
-            <ul><!--
+            <ul class="compact-tags"><!--
                 --><% for (let tag of ctx.post.tags) { %><!--
                     --><li><!--
                         --><% if (ctx.canViewTags) { %><!--
diff --git a/client/js/controls/tag_input_control.js b/client/js/controls/tag_input_control.js
index 2ec5b0d..fe36f2c 100644
--- a/client/js/controls/tag_input_control.js
+++ b/client/js/controls/tag_input_control.js
@@ -7,198 +7,138 @@ const events = require('../events.js');
 const views = require('../util/views.js');
 const TagAutoCompleteControl = require('./tag_auto_complete_control.js');
 
-const KEY_A = 65;
-const KEY_END = 35;
-const KEY_HOME = 36;
-const KEY_LEFT = 37;
-const KEY_RIGHT = 39;
 const KEY_SPACE = 32;
 const KEY_RETURN = 13;
-const KEY_BACKSPACE = 8;
-const KEY_DELETE = 46;
-
-class TagInputEvent extends Event {
-    constructor(name, tagInput) {
-        super(name);
-        this.tagInput = tagInput;
-        this.tags = tagInput.tags;
-    }
-}
 
 class TagInputControl extends events.EventTarget {
     constructor(sourceInputNode) {
         super();
         this.tags = [];
-        this.readOnly = sourceInputNode.readOnly;
 
         this._relationsTemplate = views.getTemplate('tag-relations');
-        this._relationsNodes = [];
-        this._autoCompleteControls = [];
         this._sourceInputNode = sourceInputNode;
 
         this._install();
     }
 
     _install() {
-        // set up main edit area
-        this._editAreaNode = views.htmlToDom('<div class="tag-input"></div>');
-        this._editAreaNode.autocorrect = false;
-        this._editAreaNode.autocapitalize = false;
-        this._editAreaNode.spellcheck = false;
-        this._editAreaNode.addEventListener(
-            'click', e => this._evtEditAreaClick(e));
+        this._editAreaNode = document.createElement('div');
+        this._editAreaNode.classList.add('tag-input');
 
-        // set up tail editor
-        this._tailWrapperNode = this._createWrapper();
-        if (!this.readOnly) {
-            this._tailInputNode = this._createInput();
-            this._tailInputNode.tabIndex = 0;
-            this._tailWrapperNode.appendChild(this._tailInputNode);
-        } else {
-            this._tailInputNode = null;
-        }
-        this._editAreaNode.appendChild(this._tailWrapperNode);
+        this._tagInputNode = views.htmlToDom(
+            '<input type="text" placeholder="type to add…"/>');
+        this._autoCompleteControl = new TagAutoCompleteControl(
+            this._tagInputNode, {
+                getTextToFind: () => {
+                    return this._tagInputNode.value;
+                },
+                confirm: text => {
+                    this._tagInputNode.value = '';
+                    this.addTag(text, true);
+                },
+                verticalShift: -2,
+            });
+        this._tagInputNode.addEventListener(
+            'keydown', e => this._evtInputKeyDown(e));
+        this._tagInputNode.addEventListener(
+            'paste', e => this._evtInputPaste(e));
+        this._editAreaNode.appendChild(this._tagInputNode);
 
-        // add existing tags
-        this.addMultipleTags(this._sourceInputNode.value, false);
+        this._tagListNode = views.htmlToDom('<ul class="compact-tags"></ul>');
+        this._editAreaNode.appendChild(this._tagListNode);
 
         // show
         this._sourceInputNode.style.display = 'none';
         this._sourceInputNode.parentNode.insertBefore(
             this._editAreaNode, this._sourceInputNode.nextSibling);
+
+        this.addEventListener('change', e => this._evtTagsChanged(e));
+        this.addEventListener('add', e => this._evtTagAdded(e));
+        this.addEventListener('remove', e => this._evtTagRemoved(e));
+
+        // add existing tags
+        this.addMultipleTags(this._sourceInputNode.value, false);
     }
 
-    addMultipleTags(text, sourceNode, addImplications) {
-        for (let tag of text.split(/\s+/).filter(word => word)) {
-            this.addTag(tag, sourceNode, addImplications, false);
-        }
-    }
-
-    isTaggedWith(tag) {
+    isTaggedWith(tagName) {
         return this.tags
             .map(t => t.toLowerCase())
-            .includes(tag.toLowerCase());
+            .includes(tagName.toLowerCase());
     }
 
-    addTag(text, sourceNode, addImplications, suggestRelations) {
-        text = tags.getOriginalTagName(text);
-
-        if (!sourceNode) {
-            sourceNode = this._tailWrapperNode;
+    addMultipleTags(text, addImplications) {
+        for (let tagName of text.split(/\s+/).filter(word => word).reverse()) {
+            this.addTag(tagName, addImplications);
         }
+    }
 
-        if (!text) {
+    addTag(tagName, addImplications) {
+        tagName = tags.getOriginalTagName(tagName);
+
+        if (!tagName) {
             return;
         }
 
-        if (this.tags.map(tag => tag.toLowerCase())
-                .includes(text.toLowerCase())) {
-            this._getWrapperFromTag(text).classList.add('duplicate');
-            return;
+        if (!this.isTaggedWith(tagName)) {
+            this.tags.push(tagName);
         }
-
-        this._hideVisualCues();
-
-        this.tags.push(text);
-        this.dispatchEvent(new TagInputEvent('add', this));
-        this.dispatchEvent(new TagInputEvent('change', this));
-        this._sourceInputNode.value = this.tags.join(' ');
-
-        const sourceWrapperNode = this._getWrapperFromChild(sourceNode);
-        const targetWrapperNode = this._createWrapper();
-        if (!this.readOnly) {
-            targetWrapperNode.appendChild(this._createInput());
-        }
-        if (!tags.getTagByName(text)) {
-            targetWrapperNode.classList.add('new');
-        }
-        targetWrapperNode.appendChild(this._createLink(text));
-        targetWrapperNode.setAttribute('data-tag', text);
-        this._editAreaNode.insertBefore(targetWrapperNode, sourceWrapperNode);
-        this._editAreaNode.insertBefore(this._createSpace(), sourceWrapperNode);
+        this.dispatchEvent(new CustomEvent('add', {
+            detail: {
+                tagName: tagName,
+            },
+        }));
+        this.dispatchEvent(new CustomEvent('change'));
 
         // XXX: perhaps we should aggregate suggestions from all implications
         // for call to the _suggestRelations
         if (addImplications) {
-            for (let otherTag of tags.getAllImplications(text)) {
-                this.addTag(otherTag, sourceNode, true, false);
+            for (let otherTagName of tags.getAllImplications(tagName)) {
+                this.addTag(otherTagName, true, false);
             }
         }
-
-        if (suggestRelations) {
-            this._suggestRelations([], tags.getSuggestions(text) || []);
-        }
     }
 
-    deleteTag(tag) {
-        if (!tag) {
+    deleteTag(tagName) {
+        if (!tagName) {
             return;
         }
-        if (!this.tags.map(tag => tag.toLowerCase())
-                .includes(tag.toLowerCase())) {
+        if (!this.isTaggedWith(tagName)) {
             return;
         }
         this._hideAutoComplete();
-        this.tags = this.tags.filter(t => t.toLowerCase() != tag.toLowerCase());
-        this.dispatchEvent(new TagInputEvent('remove', this));
-        this.dispatchEvent(new TagInputEvent('change', this));
+        this.tags = this.tags.filter(
+            t => t.toLowerCase() != tagName.toLowerCase());
+        this.dispatchEvent(new CustomEvent('remove', {
+            detail: {
+                tagName: tagName,
+            },
+        }));
+        this.dispatchEvent(new CustomEvent('change'));
+    }
+
+    _evtTagsChanged(e) {
         this._sourceInputNode.value = this.tags.join(' ');
-        for (let wrapperNode of this._getAllWrapperNodes()) {
-            if (this._getTagFromWrapper(wrapperNode).toLowerCase() ==
-                    tag.toLowerCase()) {
-                if (wrapperNode.contains(document.activeElement)) {
-                    const nextWrapperNode = this._getNextWrapper(wrapperNode);
-                    const nextInputNode =
-                        nextWrapperNode.querySelector('.editable');
-                    if (nextInputNode) {
-                        nextInputNode.focus();
-                    }
-                }
-                this._editAreaNode.removeChild(wrapperNode);
-                break;
+    }
+
+    _evtTagAdded(e) {
+        const tagName = e.detail.tagName;
+        let listItemNode = this._getListItemNodeFromTagName(tagName);
+        if (listItemNode) {
+            listItemNode.classList.add('duplicate');
+        } else {
+            listItemNode = this._createListItemNode(tagName);
+            if (!tags.getTagByName(tagName)) {
+                listItemNode.classList.add('new');
             }
+            this._tagListNode.prependChild(listItemNode);
         }
     }
 
-    _evtEditAreaClick(e) {
-        if (e.target.nodeName.toLowerCase() === 'a') {
-            return;
+    _evtTagRemoved(e) {
+        const listItemNode = this._getListItemNodeFromTagName(e.detail.tagName);
+        if (listItemNode) {
+            listItemNode.parentNode.removeChild(listItemNode);
         }
-
-        if (this.readOnly) {
-            return;
-        }
-
-        e.preventDefault();
-
-        let closestInputNode = null;
-        let closestDistance = Infinity;
-
-        const mouseX = e.clientX;
-        const mouseY = e.clientY;
-
-        for (let wrapperNode of this._getAllWrapperNodes()) {
-            const inputNode = wrapperNode.querySelector('.editable');
-            if (!inputNode) {
-                continue;
-            }
-            const inputNodeRect = inputNode.getBoundingClientRect();
-            const inputNodeX = inputNodeRect.left;
-            const inputNodeY = inputNodeRect.top;
-            const distance = Math.sqrt(
-                Math.pow(mouseX - inputNodeX, 2) +
-                Math.pow(mouseY - inputNodeY, 2));
-            if (distance < closestDistance) {
-                closestDistance = distance;
-                closestInputNode = inputNode;
-            }
-        }
-
-        if (closestDistance > 25) {
-            closestInputNode = this._tailInputNode;
-        }
-
-        closestInputNode.focus();
     }
 
     _evtInputPaste(e) {
@@ -211,274 +151,84 @@ class TagInputControl extends events.EventTarget {
             window.alert('Pasted text is too long.');
             return;
         }
-        this.addMultipleTags(pastedText);
+        this._addTagsFromInput(pastedText);
     }
 
     _evtInputKeyDown(e) {
-        const inputNode = e.target;
-        const wrapperNode = this._getWrapperFromChild(inputNode);
-        const key = e.which;
-
-        if (key == KEY_A && e.ctrlKey) {
+        if (e.which == KEY_RETURN || e.which == KEY_SPACE) {
             e.preventDefault();
-            e.stopImmediatePropagation();
-            e.stopPropagation();
-            const selection = window.getSelection();
-            const range = document.createRange();
-            range.selectNode(this._editAreaNode);
-            selection.removeAllRanges();
-            selection.addRange(range);
-        }
-
-        if (key == KEY_HOME) {
-            if (window.getSelection().getRangeAt(0).startOffset !== 0) {
-                return;
-            }
-            e.preventDefault();
-            this._getAllWrapperNodes()[0].querySelector('.editable').focus();
-        }
-
-        if (key == KEY_END) {
-            if (window.getSelection().getRangeAt(0).endOffset !==
-                    inputNode.textContent.length) {
-                return;
-            }
-            e.preventDefault();
-            this._getAllWrapperNodes()[this._getAllWrapperNodes().length - 1]
-                .querySelector('.editable').focus();
-        }
-
-        if (key == KEY_LEFT) {
-            if (window.getSelection().getRangeAt(0).startOffset !== 0) {
-                return;
-            }
-            e.preventDefault();
-            const prevWrapperNode = this._getPreviousWrapper(wrapperNode);
-            if (prevWrapperNode) {
-                prevWrapperNode.querySelector('.editable').focus();
-            }
-        }
-
-        if (key == KEY_RIGHT) {
-            if (window.getSelection().getRangeAt(0).endOffset !==
-                    inputNode.textContent.length) {
-                return;
-            }
-            e.preventDefault();
-            const nextWrapperNode = this._getNextWrapper(wrapperNode);
-            if (nextWrapperNode) {
-                nextWrapperNode.querySelector('.editable').focus();
-            }
-        }
-
-        if (key == KEY_BACKSPACE) {
-            if (inputNode.textContent !== '') {
-                return;
-            }
-            e.preventDefault();
-            const prevWrapperNode = this._getPreviousWrapper(wrapperNode);
-            this.deleteTag(this._getTagFromWrapper(prevWrapperNode));
-        }
-
-        if (key == KEY_DELETE) {
-            if (inputNode.textContent !== '') {
-                return;
-            }
-            e.preventDefault();
-            if (!wrapperNode.contains(this._mainEditNode)) {
-                this.deleteTag(this._getTagFromWrapper(wrapperNode));
-            }
-        }
-
-        if (key == KEY_RETURN || key == KEY_SPACE) {
-            e.preventDefault();
-            this.addTag(inputNode.textContent, inputNode, true, true);
-            inputNode.innerHTML = '';
+            this._addTagsFromInput(this._tagInputNode.value);
         }
     }
 
-    _evtInputBlur(e) {
-        const inputNode = e.target;
-        this.addTag(inputNode.textContent, inputNode, true, true);
-        inputNode.innerHTML = '';
-    }
-
-    _evtTagLinkClick(e) {
-        e.preventDefault();
-        const wrapperNode = this._getWrapperFromChild(e.target);
-        const tagName = this._getTagFromWrapper(wrapperNode);
-        const actualTag = tags.getTagByName(tagName);
-        if (!actualTag) {
-            return;
-        }
-        api.get('/tag-siblings/' + tagName, {noProgress: true})
-            .then(response => {
-                return Promise.resolve(response.results);
-            }, response => {
-                return Promise.resolve([]);
-            }).then(siblings => {
-                const suggestionNames = actualTag.suggestions || [];
-                const siblingNames = siblings.map(s => s.tag.names[0]);
-                this._suggestRelations(siblingNames, suggestionNames);
-            });
-    }
-
-    _evtRelationSuggestionLinkClick(e) {
-        e.preventDefault();
-        this.addTag(e.target.textContent, null, true, true);
-    }
-
-    _getWrapperFromChild(startNode) {
-        let node = startNode;
-        while (node) {
-            if ('classList' in node && node.classList.contains('wrapper')) {
-                return node;
-            }
-            node = node.parentNode;
-        }
-        throw Error('Wrapper node not found');
-    }
-
-    _getPreviousWrapper(wrapperNode) {
-        let result = wrapperNode.previousSibling;
-        while (result && result.nodeType === 3) {
-            result = result.previousSibling;
-        }
-        return result;
-    }
-
-    _getNextWrapper(wrapperNode) {
-        let result = wrapperNode.nextSibling;
-        while (result && result.nodeType === 3) {
-            result = result.nextSibling;
-        }
-        return result;
-    }
-
-    _getAllWrapperNodes() {
-        const result = [];
-        for (let child of this._editAreaNode.childNodes) {
-            if (child.nodeType === 3) {
-                continue;
-            }
-            result.push(child);
-        }
-        return result;
-    }
-
-    _getTagFromWrapper(wrapperNode) {
-        if (!wrapperNode || !wrapperNode.hasAttribute('data-tag')) {
-            return null;
-        }
-        return wrapperNode.getAttribute('data-tag');
-    }
-
-    _getWrapperFromTag(tag) {
-        for (let wrapperNode of this._getAllWrapperNodes()) {
-            if (this._getTagFromWrapper(wrapperNode).toLowerCase() ==
-                    tag.toLowerCase()) {
-                return wrapperNode;
+    _getListItemNodeFromTagName(tagName) {
+        for (let listItemNode of this._tagListNode.querySelectorAll('li')) {
+            if (listItemNode.getAttribute('data-tag').toLowerCase() ===
+                    tagName.toLowerCase()) {
+                return listItemNode;
             }
         }
         return null;
     }
 
-    _suggestRelations(siblingNames, suggestionNames) {
-        this._hideRelationSuggestions();
-        siblingNames = siblingNames
-            .filter(tag => !this.isTaggedWith(tag));
-        suggestionNames = suggestionNames
-            .filter(tag => !this.isTaggedWith(tag));
-
-        if (!siblingNames.length && !suggestionNames.length) {
-            return;
-        }
-
-        const node = this._relationsTemplate({
-            siblings: siblingNames,
-            suggestions: suggestionNames,
-        });
-
-        for (let link of node.querySelectorAll('a')) {
-            link.addEventListener(
-                'click', e => this._evtRelationSuggestionLinkClick(e));
-        }
-
-        // TODO: slide down
-        this._editAreaNode.parentNode.insertBefore(
-            node, this._editAreaNode.nextSibling);
-        views.slideDown(node);
-        this._relationsNodes.push(node);
+    _addTagsFromInput(text) {
+        this._hideAutoComplete();
+        this.addMultipleTags(text, true);
+        this._tagInputNode.value = '';
+        // TODO: suggest relations!
     }
 
-    _createWrapper() {
-        return views.htmlToDom('<span class="wrapper"></span>');
-    }
+    _createListItemNode(tagName) {
+        const actualTag = tags.getTagByName(tagName);
+        const className = actualTag ?
+            misc.makeCssName(actualTag.category, 'tag') :
+            '';
 
-    _createSpace(text) {
-        // space between elements serves two purposes:
-        // - the wrappers play nicely with word-wrap: break-word
-        // - copying the input text to clipboard shows spaces
-        return document.createTextNode(' ');
-    }
-
-    _createInput(text) {
-        const inputNode = views.htmlToDom(
-            '<span class="editable" contenteditable>');
-        const autoCompleteControl = new TagAutoCompleteControl(
-            inputNode, {
-                getTextToFind: () => {
-                    return inputNode.textContent;
-                },
-                confirm: text => {
-                    const wrapperNode = this._getWrapperFromChild(inputNode);
-                    inputNode.innerHTML = '';
-                    this.addTag(text, inputNode, true, true);
-                },
-                verticalShift: -2,
-            });
-        inputNode.addEventListener('keydown', e => this._evtInputKeyDown(e));
-        inputNode.addEventListener('paste', e => this._evtInputPaste(e));
-        inputNode.addEventListener('blur', e => this._evtInputBlur(e));
-        this._autoCompleteControls.push(autoCompleteControl);
-        return inputNode;
-    }
-
-    _createLink(text) {
-        const actualTag = tags.getTagByName(text);
-        const link = views.htmlToDom(
+        const tagLinkNode = views.htmlToDom(
             views.makeNonVoidElement(
                 'a',
                 {
-                    class: actualTag ?
-                        misc.makeCssName(actualTag.category, 'tag') :
-                        '',
-                    href: '/tag/' + text,
+                    class: className,
+                    href: '/tag/' + encodeURIComponent(tagName),
                 },
-                text));
-        link.addEventListener('click', e=> this._evtTagLinkClick(e));
-        return link;
-    }
+                '<i class="fa fa-tag"></i>'));
 
-    _hideRelationSuggestions() {
-        while (this._relationsNodes.length) {
-            const node = this._relationsNodes.pop(0);
-            views.slideUp(node).then(() => node.parentNode.removeChild(node));
-        }
+        const searchLinkNode = views.htmlToDom(
+            views.makeNonVoidElement(
+                'a',
+                {
+                    class: className,
+                    href: '/posts/query=' + encodeURIComponent(tagName),
+                },
+                actualTag ? actualTag.names[0] : tagName));
+
+        const usagesNode = views.htmlToDom(
+            views.makeNonVoidElement(
+                'span',
+                {class: 'count'},
+                actualTag ? actualTag.usages : 0));
+
+        const removalLinkNode = views.htmlToDom(
+            views.makeNonVoidElement(
+                'a',
+                {href: '#', class: 'count'},
+                '×'));
+        removalLinkNode.addEventListener('click', e => {
+            e.preventDefault();
+            this.deleteTag(tagName);
+        });
+
+        const listItemNode = document.createElement('li');
+        listItemNode.setAttribute('data-tag', tagName);
+        listItemNode.appendChild(tagLinkNode);
+        listItemNode.appendChild(searchLinkNode);
+        listItemNode.appendChild(usagesNode);
+        listItemNode.appendChild(removalLinkNode);
+        return listItemNode;
     }
 
     _hideAutoComplete() {
-        for (let autoCompleteControl of this._autoCompleteControls) {
-            autoCompleteControl.hide();
-        }
-    }
-
-    _hideVisualCues() {
-        for (let wrapperNode of this._getAllWrapperNodes()) {
-            wrapperNode.classList.remove('duplicate');
-        }
-        this._hideAutoComplete();
-        this._hideRelationSuggestions();
+        this._autoCompleteControl.hide();
     }
 }