Modularize sorter

manage/filters.js

@@ -1,5 +1,5 @@
 /* global installed messageBox */
-/* global updateSort */
+/* global sorter */
 'use strict';
 
 const filtersSelector = {
@@ -156,7 +156,7 @@ function filterOnChange({target: el, forceRefilter}) {
   if (installed) {
     reapplyFilter();
   }
-  debounce(updateSort);
+  debounce(sorter().updateSort);
 }
 
 

manage/manage.js

@@ -3,7 +3,7 @@
 /* global checkUpdate, handleUpdateInstalled */
 /* global objectDiff */
 /* global configDialog */
-/* global sortInit, sortStyles, updateSort */
+/* global sorter */
 'use strict';
 
 let installed;
@@ -85,7 +85,7 @@ function initGlobalEvents() {
 
   // N.B. triggers existing onchange listeners
   setupLivePrefs();
-  sortInit();
+  sorter().sortInit();
 
   $$('[id^="manage.newUI"]')
     .forEach(el => (el.oninput = (el.onchange = switchUI)));
@@ -108,7 +108,7 @@ function initGlobalEvents() {
 
 
 function showStyles(styles = []) {
-  const sorted = sortStyles({
+  const sorted = sorter().sortStyles({
     parser: 'style',
     styles: styles.map(style => ({
       style,
@@ -459,7 +459,7 @@ function handleUpdate(style, {reason, method} = {}) {
     handleUpdateInstalled(entry, reason);
   }
   filterAndAppend({entry});
-  debounce(updateSort);
+  debounce(sorter().updateSort);
   if (!entry.matches('.hidden') && reason !== 'import') {
     animateElement(entry);
     scrollElementIntoView(entry);
@@ -568,18 +568,6 @@ function switchUI({styleOnly} = {}) {
 }
 
 
-function updateStripes() {
-  let index = 0;
-  [...installed.children].forEach(entry => {
-    const list = entry.classList;
-    if (!list.contains('hidden')) {
-      list.add(index % 2 ? 'odd' : 'even');
-      list.remove(index++ % 2 ? 'even' : 'odd');
-    }
-  });
-}
-
-
 function rememberScrollPosition() {
   history.replaceState({scrollY: window.scrollY}, document.title);
 }

manage/sort.js

@@ -2,12 +2,14 @@
 /* global messageBox */
 'use strict';
 
-const sorterType = {
+var sorter = (() => {
+
+  const sorterType = {
     alpha: (a, b) => (a < b ? -1 : a === b ? 0 : 1),
     number: (a, b) => a - b
-};
+  };
 
-const tagData = {
+  const tagData = {
     title: {
       text: t('genericTitle'),
       parse: {
@@ -48,11 +50,11 @@ const tagData = {
       },
       sorter: sorterType.number
     }
-};
+  };
 
-// Adding (assumed) most commonly used ('title,asc' should always be first)
+  // Adding (assumed) most commonly used ('title,asc' should always be first)
-// whitespace before & after the comma is ignored
+  // whitespace before & after the comma is ignored
-const sortSelectOptions = [
+  const sortSelectOptions = [
     '{groupAsc}',
     'title,asc',
     'dateInstalled,desc, title,asc',
@@ -70,11 +72,11 @@ const sortSelectOptions = [
     'usercss,desc, title,desc',
     'disabled,desc, title,desc',
     'disabled,desc, usercss,asc, title,desc'
-];
+  ];
 
-const sortByRegex = /\s*,\s*/;
+  const sortByRegex = /\s*,\s*/;
 
-function addSortOptions() {
+  function addSortOptions() {
     let container;
     const select = $('#sort-select');
     const renderBin = document.createDocumentFragment();
@@ -119,9 +121,9 @@ function addSortOptions() {
     renderBin.appendChild(container);
     select.appendChild(renderBin);
     select.value = prefs.get('manage.newUI.sort');
-}
+  }
 
-function sortStyles({styles, parser}) {
+  function sortStyles({styles, parser}) {
     if (!styles) {
       styles = [...installed.children];
       parser = 'entry';
@@ -142,15 +144,9 @@ function sortStyles({styles, parser}) {
       }
       return result;
     });
-}
+  }
 
-function manageSort(event) {
+  function updateSort() {
-  event.preventDefault();
-  prefs.set('manage.newUI.sort', this.value);
-  debounce(updateSort);
-}
-
-function updateSort() {
     const renderBin = document.createDocumentFragment();
     const entries = sortStyles({parser: 'entry'});
     const isDiffSort = [...installed.children].find((entry, index) => entry.id !== entries[index].id);
@@ -174,9 +170,15 @@ function updateSort() {
       installed.appendChild(renderBin);
       updateStripes();
     }
-}
+  }
 
-function showSortHelp(event) {
+  function manageSort(event) {
+    event.preventDefault();
+    prefs.set('manage.newUI.sort', this.value);
+    debounce(updateSort);
+  }
+
+  function showSortHelp(event) {
     event.preventDefault();
     messageBox({
       className: 'help-text',
@@ -187,10 +189,24 @@ function showSortHelp(event) {
             $create('p', line))),
       buttons: [t('confirmOK')],
     });
-}
+  }
 
-function sortInit() {
+  function sortInit() {
     $('#sort-select').addEventListener('change', manageSort);
     $('#sorter-help').onclick = showSortHelp;
     addSortOptions();
-}
+  }
+
+  function updateStripes() {
+    let index = 0;
+    [...installed.children].forEach(entry => {
+      const list = entry.classList;
+      if (!list.contains('hidden')) {
+        list.add(index % 2 ? 'odd' : 'even');
+        list.remove(index++ % 2 ? 'even' : 'odd');
+      }
+    });
+  }
+
+  return {sortInit, updateSort, sortStyles, updateStripes};
+});

manage/updater-ui.js

@@ -1,6 +1,6 @@
 /* global messageBox */
 /* global ENTRY_ID_PREFIX, newUI */
-/* global filtersSelector, filterAndAppend, updateSort */
+/* global filtersSelector, filterAndAppend, sorter */
 'use strict';
 
 onDOMready().then(() => {
@@ -144,7 +144,7 @@ function reportUpdateState(state, style, details) {
   }
   if (filtersSelector.hide) {
     filterAndAppend({entry});
-    debounce(updateSort);
+    debounce(sorter().updateSort);
   }
 }