client/posts: add expanders to edit sidebar

1 files changed, 86 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;