fraport/fradrive-old
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

check-all-checkbox: remove caching idea

Browse Source
This commit is contained in:
Felix Hamann 2019-02-22 21:58:21 +01:00
parent 4fd23e9497
commit 05733ec85b
1 changed files with 34 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
static/js/utils/checkAll.js
View File

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