diff --git a/static/js/utils/checkAll.js b/static/js/utils/checkAll.js index 6e2048ce8..5decca2de 100644 --- a/static/js/utils/checkAll.js +++ b/static/js/utils/checkAll.js @@ -1,4 +1,4 @@ -(function collonadeClosure() { +(function() { 'use strict'; window.utils = window.utils || {}; @@ -20,17 +20,12 @@ 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); - } + setupCheckAllCheckbox(findCheckboxColumn(columns)); wrapper.classList.add(JS_INITIALIZED_CLASS); } @@ -40,24 +35,24 @@ var cols = []; rows.forEach(function(tr) { var cells = Array.from(tr.querySelectorAll('td')); - cells.forEach(function(cell, iCell) { - if (!cols[iCell]) { - cols[iCell] = []; + cells.forEach(function(cell, cellIndex) { + if (!cols[cellIndex]) { + cols[cellIndex] = []; } - cols[iCell].push(cell); + cols[cellIndex].push(cell); }); }); return cols; } - function findCheckboxColumn(cols) { - var checkboxColumn = null; - cols.forEach(function(col, i) { + function findCheckboxColumn(columns) { + var checkboxColumnId = null; + columns.forEach(function(col, i) { if (isCheckboxColumn(col)) { - checkboxColumn = i; + checkboxColumnId = i; } }); - return checkboxColumn; + return checkboxColumnId; } function isCheckboxColumn(col) { @@ -71,6 +66,11 @@ } function setupCheckAllCheckbox(columnId) { + if (columnId === null) { + return; + } + + checkboxColumn = columns[columnId]; var firstRow = wrapper.querySelector('tr'); var th = Array.from(firstRow.querySelectorAll('th, td'))[columnId]; th.innerHTML = 'test'; @@ -81,41 +81,35 @@ 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); - }); + checkAllCheckbox.addEventListener('input', onCheckAllCheckboxInput); + setupCheckboxListeners(); + } - // attach event listeners to each checkbox in column - columns[columnId] - .reduce(function(acc, cell) { - acc.push(cell.querySelector(CHECKBOX_SELECTOR)); - return acc; - }, []) + function onCheckAllCheckboxInput() { + toggleAll(checkAllCheckbox.checked); + } + + function setupCheckboxListeners() { + checkboxColumn + .map(function(cell) { + return cell.querySelector(CHECKBOX_SELECTOR); + }) .forEach(function(checkbox) { - checkbox.addEventListener('input', function(event) { - lastInputWasCheckAllCheckbox = false; - updateCheckboxState(); - }); + checkbox.addEventListener('input', updateCheckAllCheckboxState); }); } - function updateCheckboxState() { - checkAllCheckbox.checked = checkboxColumn.reduce(function(acc, cell) { + function updateCheckAllCheckboxState() { + var allChecked = checkboxColumn.reduce(function(acc, cell) { return acc && cell.querySelector(CHECKBOX_SELECTOR).checked; }, true); + checkAllCheckbox.checked = allChecked; } - function toggleAll() { - // remember current state and maybe apply it later if no other checkbox got clicked inbetween + function toggleAll(checked) { checkboxColumn.forEach(function(cell) { - cell.querySelector(CHECKBOX_SELECTOR).checked = checkAllCheckbox.checked; + cell.querySelector(CHECKBOX_SELECTOR).checked = checked; }); - - if (lastInputWasCheckAllCheckbox) { - // restore previous state - } } init();