client/posts: add expanders to edit sidebar

2 files changed, 97 insertions, 0 deletions

diff --git a/client/js/controls/expander_control.js b/client/js/controls/expander_control.js
new file mode 100644
index 0000000..36628f3
--- /dev/null
+++ b/client/js/controls/expander_control.js
@@ -0,0 +1,86 @@
+'use strict';
+
+const ICON_CLASS_OPENED = 'fa-chevron-down';
+const ICON_CLASS_CLOSED = 'fa-chevron-up';
+
+class ExpanderControl {
+    constructor(title, nodes) {
+        this._title = title;
+
+        nodes = Array.from(nodes).filter(n => n);
+        if (!nodes.length) {
+            return;
+        }
+
+        const expanderNode = document.createElement('section');
+        expanderNode.classList.add('expander');
+
+        const toggleLinkNode = document.createElement('a');
+        const toggleIconNode = document.createElement('i');
+        toggleIconNode.classList.add('fa');
+        toggleLinkNode.textContent = title;
+        toggleLinkNode.appendChild(toggleIconNode);
+        toggleLinkNode.addEventListener('click', e => this._evtToggleClick(e));
+
+        const headerNode = document.createElement('header');
+        headerNode.appendChild(toggleLinkNode);
+        expanderNode.appendChild(headerNode);
+
+        const expanderContentNode = document.createElement('div');
+        expanderContentNode.classList.add('expander-content');
+        expanderNode.appendChild(expanderContentNode);
+
+        nodes[0].parentNode.insertBefore(expanderNode, nodes[0]);
+
+        for (let node of nodes) {
+            expanderContentNode.appendChild(node);
+        }
+
+        this._expanderNode = expanderNode;
+        this._toggleIconNode = toggleIconNode;
+
+        expanderNode.classList.toggle(
+            'collapsed',
+            this._allStates[this._title] === undefined ?
+                false :
+                !this._allStates[this._title]);
+        this._syncIcon();
+    }
+
+    get _isOpened() {
+        return !this._expanderNode.classList.contains('collapsed');
+    }
+
+    get _allStates() {
+        try {
+            return JSON.parse(localStorage.getItem('expander')) || {};
+        } catch (e) {
+            return {};
+        }
+    }
+
+    _save() {
+        const newStates = Object.assign({}, this._allStates);
+        newStates[this._title] = this._isOpened;
+        localStorage.setItem('expander', JSON.stringify(newStates));
+    }
+
+    _evtToggleClick(e) {
+        e.preventDefault();
+        this._expanderNode.classList.toggle('collapsed');
+        this._save();
+        this._syncIcon();
+    }
+
+    _syncIcon() {
+        if (this._isOpened) {
+            this._toggleIconNode.classList.add(ICON_CLASS_OPENED);
+            this._toggleIconNode.classList.remove(ICON_CLASS_CLOSED);
+        } else {
+            this._toggleIconNode.classList.add(ICON_CLASS_CLOSED);
+            this._toggleIconNode.classList.remove(ICON_CLASS_OPENED);
+        }
+    }
+}
+
+module.exports = ExpanderControl;
diff --git a/client/js/controls/post_edit_sidebar_control.js b/client/js/controls/post_edit_sidebar_control.js
index edc5ac8..a3f1377 100644
--- a/client/js/controls/post_edit_sidebar_control.js
+++ b/client/js/controls/post_edit_sidebar_control.js
@@ -5,6 +5,7 @@ const events = require('../events.js');
 const misc = require('../util/misc.js');
 const views = require('../util/views.js');
 const TagInputControl = require('./tag_input_control.js');
+const ExpanderControl = require('../controls/expander_control.js');
 const FileDropperControl = require('../controls/file_dropper_control.js');
 
 const template = views.getTemplate('post-edit-sidebar');
@@ -32,6 +33,16 @@ class PostEditSidebarControl extends events.EventTarget {
             canFeaturePosts: api.hasPrivilege('posts:feature'),
         }));
 
+        new ExpanderControl(
+            'Basic info',
+            this._hostNode.querySelectorAll('.safety, .relations, .flags'));
+        new ExpanderControl(
+            'Tags',
+            this._hostNode.querySelectorAll('.tags'));
+        new ExpanderControl(
+            'Content',
+            this._hostNode.querySelectorAll('.post-content, .post-thumbnail'));
+
         if (this._formNode) {
             this._formNode.addEventListener('submit', e => this._evtSubmit(e));
         }