refactor check all checkbox js utility

src/Foundation.hs

@@ -1073,9 +1073,9 @@ siteLayout' headingOverride widget = do
       -- addScript $ StaticR js_utils_asyncForm_js
       -- addScript $ StaticR js_utils_asyncTable_js
       -- addScript $ StaticR js_utils_asyncTableFilter_js
-      -- addScript $ StaticR js_utils_checkAll_js
       -- addScript $ StaticR js_utils_httpClient_js
       -- JavaScript utils
+      addScript $ StaticR js_utils_checkAll_js
       addScript $ StaticR js_utils_form_js
       addScript $ StaticR js_utils_inputs_js
       addScript $ StaticR js_utils_modal_js

static/css/utils/checkbox.scss

@@ -16,8 +16,8 @@
 
   label {
     display: block;
-    height: 24px;
-    width: 24px;
+    height: 20px;
+    width: 20px;
     background-color: #f3f3f3;
     box-shadow: inset 0 1px 2px 1px rgba(50, 50, 50, 0.05);
     border: 2px solid var(--color-primary);
@@ -55,14 +55,16 @@
   :checked + label::before {
     background-color: white;
     transform: rotate(45deg);
-    left: 4px;
+    left: 2px;
+    top: 11px;
   }
 
   :checked + label::after {
     background-color: white;
     transform: rotate(-45deg);
-    top: 11px;
-    width: 13px;
+    top: 9px;
+    width: 12px;
+    left: 7px;
   }
 
   [disabled] + label {

static/js/utils/checkAll.js

@@ -3,38 +3,54 @@
 
   window.utils = window.utils || {};
 
-  var ASYNC_TABLE_CONTENT_CHANGED_CLASS = 'async-table--changed';
-  var JS_INITIALIZED_CLASS = 'js-check-all-initialized';
+  /**
+   *
+   * Check All Checkbox Utility
+   *  adds a Check All Checkbox above columns with only checkboxes
+   *
+   * Attribute: [none]
+   *   (will be set up automatically on tables)
+   *
+   * Example usage:
+  *   (table with one column thats only checkboxes)
+   */
+
+  var CHECK_ALL_UTIL_NAME = 'checkAll';
+  var CHECK_ALL_UTIL_SELECTOR = 'table';
+
   var CHECKBOX_SELECTOR    = '[type="checkbox"]';
 
-  function getCheckboxId() {
-    return 'check-all-checkbox-' + Math.floor(Math.random() * 100000);
-  }
-
-  window.utils.checkAll = function(wrapper, options) {
-
-    if ((!wrapper || wrapper.classList.contains(JS_INITIALIZED_CLASS)) && !wrapper.classList.contains(ASYNC_TABLE_CONTENT_CHANGED_CLASS)) {
-      return false;
-    }
-    options = options || {};
+  var CHECK_ALL_INITIALIZED_CLASS = 'check-all--initialized';
 
+  var checkAllUtil = function(element) {
     var columns = [];
     var checkboxColumn = [];
     var checkAllCheckbox = null;
 
-    var utilInstances = [];
-
     function init() {
+      if (!element) {
+        throw new Error('Check All utility cannot be setup without an element!');
+      }
 
-      columns = gatherColumns(wrapper);
+      gatherColumns();
+      setupCheckAllCheckbox();
 
-      setupCheckAllCheckbox(findCheckboxColumn(columns));
+      // mark initialized
+      element.classList.add(CHECK_ALL_INITIALIZED_CLASS);
 
-      wrapper.classList.add(JS_INITIALIZED_CLASS);
+      return {
+        name: CHECK_ALL_UTIL_NAME,
+        element: element,
+        destroy: function() {},
+      };
     }
 
-    function gatherColumns(table) {
-      var rows = Array.from(table.querySelectorAll('tr'));
+    function getCheckboxId() {
+      return 'check-all-checkbox-' + Math.floor(Math.random() * 100000);
+    }
+
+    function gatherColumns(tble) {
+      var rows = Array.from(element.querySelectorAll('tr'));
       var cols = [];
       rows.forEach(function(tr) {
         var cells = Array.from(tr.querySelectorAll('td'));
@@ -45,7 +61,7 @@
           cols[cellIndex].push(cell);
         });
       });
-      return cols;
+      columns = cols;
     }
 
     function findCheckboxColumn(columns) {
@@ -68,21 +84,25 @@
       return onlyCheckboxes;
     }
 
-    function setupCheckAllCheckbox(columnId) {
-      if (columnId === null) {
+    function setupCheckAllCheckbox() {
+      var checkboxColumnId = findCheckboxColumn(columns);
+      if (checkboxColumnId === null) {
         return;
       }
 
-      checkboxColumn = columns[columnId];
-      var firstRow = wrapper.querySelector('tr');
-      var th = Array.from(firstRow.querySelectorAll('th, td'))[columnId];
+      checkboxColumn = columns[checkboxColumnId];
+      var firstRow = element.querySelector('tr');
+      var th = Array.from(firstRow.querySelectorAll('th, td'))[checkboxColumnId];
       th.innerHTML = 'test';
       checkAllCheckbox = document.createElement('input');
       checkAllCheckbox.setAttribute('type', 'checkbox');
       checkAllCheckbox.setAttribute('id', getCheckboxId());
       th.innerHTML = '';
       th.insertBefore(checkAllCheckbox, null);
-      utilInstances.push(window.utils.setup('checkbox', checkAllCheckbox));
+
+      if (UtilRegistry) {
+        UtilRegistry.setup(UtilRegistry.find('checkbox'));
+      }
 
       checkAllCheckbox.addEventListener('input', onCheckAllCheckboxInput);
       setupCheckboxListeners();
@@ -103,9 +123,9 @@
     }
 
     function updateCheckAllCheckboxState() {
-      var allChecked = checkboxColumn.reduce(function(acc, cell) {
-        return acc && cell.querySelector(CHECKBOX_SELECTOR).checked;
-      }, true);
+      var allChecked = checkboxColumn.every(function(cell) {
+        return cell.querySelector(CHECKBOX_SELECTOR).checked;
+      })
       checkAllCheckbox.checked = allChecked;
     }
 
@@ -115,17 +135,15 @@
       });
     }
 
-    function destroy() {
-      utilInstances.forEach(function(util) {
-        util.destroy();
-      });
-    }
-
-    init();
-
-    return {
-      scope: wrapper,
-      destroy: destroy,
-    };
+    return init();
   };
+
+  // register check all checkbox util
+  if (UtilRegistry) {
+    UtilRegistry.register({
+      name: CHECK_ALL_UTIL_NAME,
+      selector: CHECK_ALL_UTIL_SELECTOR,
+      setup: checkAllUtil
+    });
+  }
 })();