[assets] Use classes for JS files:

- Classes strictly parse code implicitly.
- Fix previously updated code.

bookwyrm/static/js/bookwyrm.js

@@ -1,70 +1,80 @@
+/* exported BookWyrm */
 /* globals TabGroup */
 
-// set up javascript listeners
+let BookWyrm = new class {
-window.onload = function() {
+    constructor() {
+        this.initOnLoad();
+        this.initEventListeners();
+    }
+
+    initEventListeners() {
         // buttons that display or hide content
         document.querySelectorAll('[data-controls]')
-        .forEach(t => t.onclick = toggleAction);
+            .forEach(t => t.onclick = this.toggleAction.bind(this));
 
         // javascript interactions (boost/fav)
         document.querySelectorAll('.interaction')
-        .forEach(t => t.onsubmit = interact);
+            .forEach(t => t.onsubmit = this.interact.bind(this));
 
         // handle aria settings on menus
         document.querySelectorAll('.pulldown-menu')
-        .forEach(t => t.onclick = toggleMenu);
+            .forEach(t => t.onclick = this.toggleMenu.bind(this));
 
         // hidden submit button in a form
         document.querySelectorAll('.hidden-form input')
-        .forEach(t => t.onchange = revealForm);
+            .forEach(t => t.onchange = this.revealForm.bind(this));
 
         // polling
         document.querySelectorAll('[data-poll]')
-        .forEach(el => polling(el));
+            .forEach(el => this.polling(el));
 
         // browser back behavior
         document.querySelectorAll('[data-back]')
-        .forEach(t => t.onclick = back);
+            .forEach(t => t.onclick = this.back);
+    }
 
+    initOnLoad(){
+        // set up javascript listeners
+        window.onload = function() {
             document.querySelectorAll('.tab-group')
                 .forEach(t => new TabGroup(t));
-};
+        };
+    }
 
-function back(e) {
+    back(e) {
         e.preventDefault();
         history.back();
-}
+    }
 
-function polling(el, delay) {
+    polling(el, delay) {
+        let poller = this;
         delay = delay || 10000;
         delay += (Math.random() * 1000);
         setTimeout(function() {
             fetch('/api/updates/' + el.getAttribute('data-poll'))
                 .then(response => response.json())
-            .then(data => updateCountElement(el, data));
+                .then(data => poller.updateCountElement(el, data));
-        polling(el, delay * 1.25);
+            poller.polling(el, delay * 1.25);
         }, delay, el);
-}
+    }
 
-function updateCountElement(el, data) {
+    updateCountElement(el, data) {
         const currentCount = el.innerText;
         const count = data.count;
         if (count != currentCount) {
-        addRemoveClass(el.closest('[data-poll-wrapper]'), 'hidden', count < 1);
+            this.addRemoveClass(el.closest('[data-poll-wrapper]'), 'hidden', count < 1);
             el.innerText = count;
         }
-}
+    }
 
-
+    revealForm(e) {
-function revealForm(e) {
         var hidden = e.currentTarget.closest('.hidden-form').getElementsByClassName('hidden')[0];
         if (hidden) {
-        removeClass(hidden, 'hidden');
+            this.removeClass(hidden, 'hidden');
+        }
     }
-}
 
-
+    toggleAction(e) {
-function toggleAction(e) {
         var el = e.currentTarget;
         var pressed = el.getAttribute('aria-pressed') == 'false';
 
@@ -74,14 +84,14 @@ function toggleAction(e) {
 
         if (targetId) {
             var target = document.getElementById(targetId);
-        addRemoveClass(target, 'hidden', !pressed);
+            this.addRemoveClass(target, 'hidden', !pressed);
-        addRemoveClass(target, 'is-active', pressed);
+            this.addRemoveClass(target, 'is-active', pressed);
         }
 
         // show/hide container
         var container = document.getElementById('hide-' + targetId);
         if (container) {
-        addRemoveClass(container, 'hidden', pressed);
+            this.addRemoveClass(container, 'hidden', pressed);
         }
 
         // set checkbox, if appropriate
@@ -97,53 +107,54 @@ function toggleAction(e) {
             focusEl.focus();
             setTimeout(function(){ focusEl.selectionStart = focusEl.selectionEnd = 10000; }, 0);
         }
-}
+    }
 
-function interact(e) {
+    // @todo Only update status if the promise is successful.
+    interact(e) {
         e.preventDefault();
-    ajaxPost(e.target);
+        this.ajaxPost(e.target);
         var identifier = e.target.getAttribute('data-id');
-    // @todo This should be `querySelector`, unless there are duplicated IDs,
-    //       which is a problem in itself.
-    document.querySelectorAll(`#${identifier}`)
-        .forEach(t => addRemoveClass(t, 'hidden', t.className.indexOf('hidden') == -1));
-}
 
-function toggleMenu(e) {
+        // @todo This probably should be done with IDs.
+        document.querySelectorAll(`.${identifier}`)
+            .forEach(t => this.addRemoveClass(t, 'hidden', t.className.indexOf('hidden') == -1));
+    }
+
+    toggleMenu(e) {
         var el = e.currentTarget;
         var expanded = el.getAttribute('aria-expanded') == 'false';
         el.setAttribute('aria-expanded', expanded);
         var targetId = el.getAttribute('data-controls');
         if (targetId) {
             var target = document.getElementById(targetId);
-        addRemoveClass(target, 'is-active', expanded);
+            this.addRemoveClass(target, 'is-active', expanded);
+        }
     }
-}
 
-function ajaxPost(form) {
+    ajaxPost(form) {
         fetch(form.action, {
             method : "POST",
             body: new FormData(form)
         });
-}
-
-function addRemoveClass(el, classname, bool) {
-    if (bool) {
-        addClass(el, classname);
-    } else {
-        removeClass(el, classname);
     }
-}
 
-function addClass(el, classname) {
+    addRemoveClass(el, classname, bool) {
+        if (bool) {
+            this.addClass(el, classname);
+        } else {
+            this.removeClass(el, classname);
+        }
+    }
+
+    addClass(el, classname) {
         var classes = el.className.split(' ');
         if (classes.indexOf(classname) > -1) {
             return;
         }
         el.className = classes.concat(classname).join(' ');
-}
+    }
 
-function removeClass(el, className) {
+    removeClass(el, className) {
         var classes = [];
         if (el.className) {
             classes = el.className.split(' ');
@@ -153,4 +164,5 @@ function removeClass(el, className) {
             classes.splice(idx, 1);
         }
         el.className = classes.join(' ');
+    }
 }

bookwyrm/static/js/localstorage.js

@@ -1,28 +1,32 @@
-/* exported updateDisplay */
+/* exported LocalStorageTools */
-/* globals addRemoveClass */
+/* globals BookWyrm */
 
-// set javascript listeners
+let LocalStorageTools = new class {
-function updateDisplay(e) {
+    constructor() {
+        // display based on localstorage vars
+        document.querySelectorAll('[data-hide]')
+            .forEach(t => this.setDisplay(t));
+
+        // update localstorage
+        document.querySelectorAll('.set-display')
+            .forEach(t => t.onclick = this.updateDisplay.bind(this));
+    }
+
+    // set javascript listeners
+    updateDisplay(e) {
         // used in set reading goal
         var key = e.target.getAttribute('data-id');
         var value = e.target.getAttribute('data-value');
         window.localStorage.setItem(key, value);
 
         document.querySelectorAll('[data-hide="' + key + '"]')
-        .forEach(t => setDisplay(t));
+            .forEach(t => this.setDisplay(t));
-}
+    }
 
-function setDisplay(el) {
+    setDisplay(el) {
         // used in set reading goal
         var key = el.getAttribute('data-hide');
         var value = window.localStorage.getItem(key);
-    addRemoveClass(el, 'hidden', value);
+        BookWyrm.addRemoveClass(el, 'hidden', value);
+    }
 }
-
-// display based on localstorage vars
-document.querySelectorAll('[data-hide]')
-    .forEach(t => setDisplay(t));
-
-// update localstorage
-document.querySelectorAll('.set-display')
-    .forEach(t => t.onclick = updateDisplay);