replace th of checkbox column with check-all-checkbox

static/js/utils/checkAll.js

@@ -3,8 +3,12 @@
 
   window.utils = window.utils || {};
 
-  var JS_INITIALIZED_CLASS = 'js-initialized';
+  var JS_INITIALIZED_CLASS = 'js-check-all-initialized';
-  var CHECKBOX_SELECTOR = '.checkbox';
+  var CHECKBOX_SELECTOR = '[type="checkbox"]';
+
+  function getCheckboxId() {
+    return 'check-all-checkbox-' + Math.floor(Math.random() * 100000);
+  }
 
   window.utils.checkAll = function(wrapper, options) {
 
@@ -14,15 +18,21 @@
     options = options || {};
 
     var columns = [];
+    var checkboxColumn = [];
+    var checkAllCheckbox = null;
+    var lastInputWasCheckAllCheckbox = false;
 
     function init() {
 
       columns = gatherColumns(wrapper);
 
-      var checkboxColumn = findCheckboxColumn(columns);
+      var checkboxColumnId = findCheckboxColumn(columns);
-      if (checkboxColumn) {
+      if (checkboxColumn !== null) {
-        setup(checkboxColumn);
+        checkboxColumn = columns[checkboxColumnId];
+        setupCheckAllCheckbox(checkboxColumnId);
       }
+
+      wrapper.classList.add(JS_INITIALIZED_CLASS);
     }
 
     function gatherColumns(table) {
@@ -53,7 +63,6 @@
     function isCheckboxColumn(col) {
       var onlyCheckboxes = true;
       col.forEach(function(cell) {
-        console.log('checking', cell);
         if (onlyCheckboxes && !cell.querySelector(CHECKBOX_SELECTOR)) {
           onlyCheckboxes = false;
         }
@@ -61,8 +70,52 @@
       return onlyCheckboxes;
     }
 
-    function setup(column) {
+    function setupCheckAllCheckbox(columnId) {
-      console.log('setting up column', column);
+      var firstRow = wrapper.querySelector('tr');
+      var th = Array.from(firstRow.querySelectorAll('th, td'))[columnId];
+      th.innerHTML = 'test';
+      checkAllCheckbox = document.createElement('input');
+      checkAllCheckbox.setAttribute('type', 'checkbox');
+      checkAllCheckbox.setAttribute('id', getCheckboxId());
+      th.innerHTML = '';
+      th.insertBefore(checkAllCheckbox, null);
+      window.utils.setup('checkboxRadio', checkAllCheckbox);
+
+      // attach event listener to new checkbox
+      checkAllCheckbox.addEventListener('input', function(event) {
+        lastInputWasCheckAllCheckbox = true;
+        toggleAll(checkAllCheckbox.checked);
+      });
+
+      // attach event listeners to each checkbox in column
+      columns[columnId]
+        .reduce(function(acc, cell) {
+          acc.push(cell.querySelector(CHECKBOX_SELECTOR));
+          return acc;
+        }, [])
+        .forEach(function(checkbox) {
+          checkbox.addEventListener('input', function(event) {
+            lastInputWasCheckAllCheckbox = false;
+            updateCheckboxState();
+          });
+        });
+    }
+
+    function updateCheckboxState() {
+      checkAllCheckbox.checked = checkboxColumn.reduce(function(acc, cell) {
+        return acc && cell.querySelector(CHECKBOX_SELECTOR).checked;
+      }, true);
+    }
+
+    function toggleAll() {
+      // remember current state and maybe apply it later if no other checkbox got clicked inbetween
+      checkboxColumn.forEach(function(cell) {
+        cell.querySelector(CHECKBOX_SELECTOR).checked = checkAllCheckbox.checked;
+      });
+
+      if (lastInputWasCheckAllCheckbox) {
+        // restore previous state
+      }
     }
 
     init();