fradrive/static/js/utils/checkAll.js

(function collonadeClosure() {
  'use strict';

  window.utils = window.utils || {};

  var JS_INITIALIZED_CLASS = 'js-check-all-initialized';
  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)) {
      return false;
    }
    options = options || {};

    var columns = [];
    var checkboxColumn = [];
    var checkAllCheckbox = null;
    var lastInputWasCheckAllCheckbox = false;

    function init() {

      columns = gatherColumns(wrapper);

      var checkboxColumnId = findCheckboxColumn(columns);
      if (checkboxColumnId !== null) {
        checkboxColumn = columns[checkboxColumnId];
        setupCheckAllCheckbox(checkboxColumnId);
      }

      wrapper.classList.add(JS_INITIALIZED_CLASS);
    }

    function gatherColumns(table) {
      var rows = Array.from(table.querySelectorAll('tr'));
      var cols = [];
      rows.forEach(function(tr) {
        var cells = Array.from(tr.querySelectorAll('td'));
        cells.forEach(function(cell, iCell) {
          if (!cols[iCell]) {
            cols[iCell] = [];
          }
          cols[iCell].push(cell);
        });
      });
      return cols;
    }

    function findCheckboxColumn(cols) {
      var checkboxColumn = null;
      cols.forEach(function(col, i) {
        if (isCheckboxColumn(col)) {
          checkboxColumn = i;
        }
      });
      return checkboxColumn;
    }

    function isCheckboxColumn(col) {
      var onlyCheckboxes = true;
      col.forEach(function(cell) {
        if (onlyCheckboxes && !cell.querySelector(CHECKBOX_SELECTOR)) {
          onlyCheckboxes = false;
        }
      });
      return onlyCheckboxes;
    }

    function setupCheckAllCheckbox(columnId) {
      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();
  };
})();