From 9d95f54aa23ebc684255ba301cc8391333b61860 Mon Sep 17 00:00:00 2001
From: Fabien Basmaison <contact@arkhi.org>
Date: Tue, 6 Apr 2021 17:48:56 +0200
Subject: [PATCH] [assets] Refactor `toggleAction` and `toggleMenu` a bit.

---
 bookwyrm/static/js/bookwyrm.js | 102 ++++++++++++++++++++++++---------
 1 file changed, 74 insertions(+), 28 deletions(-)

diff --git a/bookwyrm/static/js/bookwyrm.js b/bookwyrm/static/js/bookwyrm.js
index 63947aaa4..0ec14336f 100644
--- a/bookwyrm/static/js/bookwyrm.js
+++ b/bookwyrm/static/js/bookwyrm.js
@@ -9,25 +9,29 @@ let BookWyrm = new class {
     }
 
     initEventListeners() {
-        // buttons that display or hide content
         document.querySelectorAll('[data-controls]')
-            .forEach(button => button.addEventListener('click', this.toggleAction.bind(this)));
+            .forEach(button => button.addEventListener(
+                'click',
+                this.toggleAction.bind(this))
+            );
 
-        // javascript interactions (boost/fav)
         document.querySelectorAll('.interaction')
-            .forEach(button => button.addEventListener('submit', this.interact.bind(this)));
+            .forEach(button => button.addEventListener(
+                'submit',
+                this.interact.bind(this))
+            );
 
-        // handle aria settings on menus
-        document.querySelectorAll('.pulldown-menu')
-            .forEach(button => button.addEventListener('click', this.toggleMenu.bind(this)));
-
-        // hidden submit button in a form
         document.querySelectorAll('.hidden-form input')
-            .forEach(button => button.addEventListener('change', this.revealForm.bind(this)));
+            .forEach(button => button.addEventListener(
+                'change',
+                this.revealForm.bind(this))
+            );
 
-        // browser back behavior
         document.querySelectorAll('[data-back]')
-            .forEach(button => button.addEventListener('click', this.back));
+            .forEach(button => button.addEventListener(
+                'click',
+                this.back)
+            );
     }
 
     /**
@@ -125,45 +129,48 @@ let BookWyrm = new class {
      */
     toggleAction(event) {
         let trigger = event.currentTarget;
-        let pressed = trigger.getAttribute('aria-pressed') == 'false';
+        let pressed = trigger.getAttribute('aria-pressed') === 'false';
         let targetId = trigger.dataset.controls;
 
-        // Un‑press all triggers controlling the same target.
+        // Toggle pressed status on all triggers controlling the same target.
         document.querySelectorAll('[data-controls="' + targetId + '"]')
-            .forEach(triggers => triggers.setAttribute(
+            .forEach(otherTrigger => otherTrigger.setAttribute(
                 'aria-pressed',
-                (triggers.getAttribute('aria-pressed') == 'false'))
-            );
+                otherTrigger.getAttribute('aria-pressed') === 'false'
+            ));
 
-        if (targetId) {
+        // @todo Find a better way to handle the exception.
+        if (targetId && ! trigger.classList.contains('pulldown-menu')) {
             let target = document.getElementById(targetId);
 
             this.addRemoveClass(target, 'hidden', !pressed);
             this.addRemoveClass(target, 'is-active', pressed);
         }
 
+        // Show/hide pulldown-menus.
+        if (trigger.classList.contains('pulldown-menu')) {
+            this.toggleMenu(trigger, targetId);
+        }
+
         // Show/hide container.
         let container = document.getElementById('hide-' + targetId);
 
         if (container) {
-            this.addRemoveClass(container, 'hidden', pressed);
+            this.toggleContainer(container, pressed);
         }
 
         // Check checkbox, if appropriate.
         let checkbox = trigger.dataset['controls-checkbox'];
 
         if (checkbox) {
-            document.getElementById(checkbox).checked = !!pressed;
+            this.toggleCheckbox(checkbox, pressed);
         }
 
         // Set focus, if appropriate.
         let focus = trigger.dataset['focus-target'];
 
         if (focus) {
-            let focusEl = document.getElementById(focus);
-
-            focusEl.focus();
-            setTimeout(function() { focusEl.selectionStart = focusEl.selectionEnd = 10000; }, 0);
+            this.toggleFocus(focus);
         }
     }
 
@@ -192,7 +199,7 @@ let BookWyrm = new class {
     }
 
     /**
-     * Handle ARIA states on toggled menus.
+     * Show or hide menus.
      *
      * @note This function seems to be redundant and conflicts with toggleAction.
      *
@@ -200,10 +207,8 @@ let BookWyrm = new class {
      *
      * @return {undefined}
      */
-    toggleMenu(event) {
-        let trigger = event.currentTarget;
+    toggleMenu(trigger, targetId) {
         let expanded = trigger.getAttribute('aria-expanded') == 'false';
-        let targetId = trigger.dataset.controls;
 
         trigger.setAttribute('aria-expanded', expanded);
 
@@ -214,6 +219,47 @@ let BookWyrm = new class {
         }
     }
 
+    /**
+     * Show or hide generic containers.
+     *
+     * @param  {object}  container - DOM node
+     * @param  {boolean} pressed   - Is the trigger pressed?
+     *
+     * @return {undefined}
+     */
+    toggleContainer(container, pressed) {
+        this.addRemoveClass(container, 'hidden', pressed);
+    }
+
+    /**
+     * Check or uncheck a checbox.
+     *
+     * @param  {object}  checkbox - DOM node
+     * @param  {boolean} pressed  - Is the trigger pressed?
+     *
+     * @return {undefined}
+     */
+    toggleCheckbox(checkbox, pressed) {
+        document.getElementById(checkbox).checked = !!pressed;
+    }
+
+    /**
+     * Give the focus to an element.
+     *
+     * @param  {string} nodeId - ID of the DOM node to focus (button, link…)
+     *
+     * @return {undefined}
+     */
+    toggleFocus(nodeId) {
+        let node = document.getElementById(nodeId);
+
+        node.focus();
+
+        setTimeout(function() {
+            node.selectionStart = node.selectionEnd = 10000;
+        }, 0);
+    }
+
     /**
      * Submit a form using POST.
      *