From 7f4a2c1ceb3f1212874e61a40f50eecbc364ed52 Mon Sep 17 00:00:00 2001
From: rr- <rr-@sakuya.pl>
Date: Tue, 23 Aug 2016 23:09:07 +0200
Subject: [PATCH] client/posts: show tag/note counters in expanders

---
 client/html/expander.tpl                      |  2 +-
 client/js/controls/expander_control.js        | 14 ++++---
 .../js/controls/post_edit_sidebar_control.js  | 39 ++++++++++++++-----
 3 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/client/html/expander.tpl b/client/html/expander.tpl
index abfd73e4..35c8e685 100644
--- a/client/html/expander.tpl
+++ b/client/html/expander.tpl
@@ -1,7 +1,7 @@
 <section class='expander'>
     <header>
         <a href>
-            <%- ctx.title %>
+            <span><%- ctx.title %></span>
             <i class='fa fa-chevron-down'></i>
         </a>
     </header>
diff --git a/client/js/controls/expander_control.js b/client/js/controls/expander_control.js
index 93ba2cb5..a07367a7 100644
--- a/client/js/controls/expander_control.js
+++ b/client/js/controls/expander_control.js
@@ -8,8 +8,8 @@ const views = require('../util/views.js');
 const template = views.getTemplate('expander');
 
 class ExpanderControl {
-    constructor(title, nodes) {
-        this._title = title;
+    constructor(name, title, nodes) {
+        this._name = name;
 
         nodes = Array.from(nodes).filter(n => n);
         if (!nodes.length) {
@@ -33,12 +33,16 @@ class ExpanderControl {
 
         expanderNode.classList.toggle(
             'collapsed',
-            this._allStates[this._title] === undefined ?
+            this._allStates[this._name] === undefined ?
                 false :
-                !this._allStates[this._title]);
+                !this._allStates[this._name]);
         this._syncIcon();
     }
 
+    set title(newTitle) {
+        this._expanderNode.querySelector('header span').textContent = newTitle;
+    }
+
     get _isOpened() {
         return !this._expanderNode.classList.contains('collapsed');
     }
@@ -53,7 +57,7 @@ class ExpanderControl {
 
     _save() {
         const newStates = Object.assign({}, this._allStates);
-        newStates[this._title] = this._isOpened;
+        newStates[this._name] = this._isOpened;
         localStorage.setItem('expander', JSON.stringify(newStates));
     }
 
diff --git a/client/js/controls/post_edit_sidebar_control.js b/client/js/controls/post_edit_sidebar_control.js
index b3fd7b5c..0b884c9e 100644
--- a/client/js/controls/post_edit_sidebar_control.js
+++ b/client/js/controls/post_edit_sidebar_control.js
@@ -37,21 +37,28 @@ class PostEditSidebarControl extends events.EventTarget {
         }));
 
         new ExpanderControl(
+            'post-info',
             'Basic info',
             this._hostNode.querySelectorAll('.safety, .relations, .flags'));
-        new ExpanderControl(
-            'Tags',
+        this._tagsExpander = new ExpanderControl(
+            'post-tags',
+            `Tags (${this._post.tags.length})`,
             this._hostNode.querySelectorAll('.tags'));
-        new ExpanderControl(
+        this._notesExpander = new ExpanderControl(
+            'post-notes',
             'Notes',
             this._hostNode.querySelectorAll('.notes'));
         new ExpanderControl(
+            'post-content',
             'Content',
             this._hostNode.querySelectorAll('.post-content, .post-thumbnail'));
         new ExpanderControl(
+            'post-management',
             'Management',
             this._hostNode.querySelectorAll('.management'));
 
+        this._syncExpanderTitles();
+
         if (this._formNode) {
             this._formNode.addEventListener('submit', e => this._evtSubmit(e));
         }
@@ -121,22 +128,36 @@ class PostEditSidebarControl extends events.EventTarget {
                 'input, textarea');
             for (let node of inputNodes) {
                 node.addEventListener(
-                    'change', e => {
-                        this.dispatchEvent(new CustomEvent('change'));
-                    });
+                    'change',
+                    e => this.dispatchEvent(new CustomEvent('change')));
             }
             this._postNotesOverlayControl.addEventListener(
-                'change', e => {
-                    this.dispatchEvent(new CustomEvent('change'));
-                });
+                'change',
+                e => this.dispatchEvent(new CustomEvent('change')));
         }
 
+        for (let eventType of ['add', 'remove']) {
+            this._post.notes.addEventListener(eventType, e => {
+                this._syncExpanderTitles();
+            });
+        }
+
+        this._tagControl.addEventListener('change', e => {
+            this._post.tags = this._tagControl.tags;
+            this._syncExpanderTitles();
+        });
+
         if (this._noteTextareaNode) {
             this._noteTextareaNode.addEventListener(
                 'change', e => this._evtNoteTextChangeRequest(e));
         }
     }
 
+    _syncExpanderTitles() {
+        this._notesExpander.title = `Notes (${this._post.notes.length})`;
+        this._tagsExpander.title = `Tags (${this._post.tags.length})`;
+    }
+
     _evtPostContentChange(e) {
         this._contentFileDropper.reset();
     }