128 lines
3.4 KiB
JavaScript
128 lines
3.4 KiB
JavaScript
import { Utility } from '../../core/utility';
|
|
import { TableIndices } from '../../lib/table/table';
|
|
|
|
const CHECKBOX_SELECTOR = '[type="checkbox"]';
|
|
|
|
const CHECK_ALL_INITIALIZED_CLASS = 'check-all--initialized';
|
|
|
|
@Utility({
|
|
selector: 'table:not([uw-no-check-all])',
|
|
})
|
|
export class CheckAll {
|
|
_element;
|
|
|
|
_columns = new Array();
|
|
_checkAllColumns = new Array();
|
|
|
|
_tableIndices;
|
|
|
|
constructor(element, app) {
|
|
if (!element) {
|
|
throw new Error('Check All utility cannot be setup without an element!');
|
|
}
|
|
|
|
this._element = element;
|
|
|
|
if (this._element.classList.contains(CHECK_ALL_INITIALIZED_CLASS)) {
|
|
return false;
|
|
}
|
|
|
|
this._tableIndices = new TableIndices(this._element);
|
|
|
|
this._gatherColumns();
|
|
this._findCheckboxColumns().forEach(columnId => this._checkAllColumns.push(new CheckAllColumn(this._element, app, this._columns[columnId])));
|
|
|
|
// mark initialized
|
|
this._element.classList.add(CHECK_ALL_INITIALIZED_CLASS);
|
|
}
|
|
|
|
_gatherColumns() {
|
|
for (const rowIndex of new Array(this._tableIndices.maxRow + 1)) {
|
|
for (const colIndex of new Array(this._tableIndices.maxCol + 1)) {
|
|
const cell = this._tableIndices.getCell(rowIndex, colIndex);
|
|
|
|
if (!cell)
|
|
continue;
|
|
|
|
if (!this._columns[colIndex])
|
|
this._columns[colIndex] = new Array();
|
|
|
|
this._columns[colIndex][rowIndex] = cell;
|
|
}
|
|
}
|
|
}
|
|
|
|
_findCheckboxColumns() {
|
|
let checkboxColumnIds = new Array();
|
|
this._columns.forEach((col, i) => {
|
|
if (this._isCheckboxColumn(col)) {
|
|
checkboxColumnIds.push(i);
|
|
}
|
|
});
|
|
return checkboxColumnIds;
|
|
}
|
|
|
|
_isCheckboxColumn(col) {
|
|
return col.every(cell => cell.tagName == 'TH' || cell.querySelector(CHECKBOX_SELECTOR))
|
|
&& col.some(cell => cell.querySelector(CHECKBOX_SELECTOR));
|
|
}
|
|
}
|
|
|
|
class CheckAllColumn {
|
|
_app;
|
|
_table;
|
|
_column;
|
|
|
|
_checkAllCheckbox;
|
|
_checkboxId = 'check-all-checkbox-' + Math.floor(Math.random() * 100000);
|
|
|
|
constructor(table, app, column) {
|
|
this._column = column;
|
|
this._table = table;
|
|
this._app = app;
|
|
|
|
const th = this._column.filter(element => element.tagName == 'TH')[0];
|
|
if (!th)
|
|
return false;
|
|
|
|
this._checkAllCheckbox = document.createElement('input');
|
|
this._checkAllCheckbox.setAttribute('type', 'checkbox');
|
|
this._checkAllCheckbox.setAttribute('id', this._checkboxId);
|
|
th.insertBefore(this._checkAllCheckbox, th.firstChild);
|
|
|
|
// set up new checkbox
|
|
this._app.utilRegistry.initAll(th);
|
|
|
|
this._checkAllCheckbox.addEventListener('input', this._onCheckAllCheckboxInput.bind(this));
|
|
this._setupCheckboxListeners();
|
|
}
|
|
|
|
_onCheckAllCheckboxInput() {
|
|
this._toggleAll(this._checkAllCheckbox.checked);
|
|
}
|
|
|
|
_setupCheckboxListeners() {
|
|
this._column
|
|
.flatMap(cell => cell.tagName == 'TH' ? new Array() : Array.from(cell.querySelectorAll(CHECKBOX_SELECTOR)))
|
|
.forEach(checkbox =>
|
|
checkbox.addEventListener('input', this._updateCheckAllCheckboxState.bind(this))
|
|
);
|
|
}
|
|
|
|
_updateCheckAllCheckboxState() {
|
|
const allChecked = this._column.every(cell =>
|
|
cell.tagName == 'TH' || cell.querySelector(CHECKBOX_SELECTOR).checked
|
|
);
|
|
this._checkAllCheckbox.checked = allChecked;
|
|
}
|
|
|
|
_toggleAll(checked) {
|
|
this._column.forEach(cell => {
|
|
if (cell.tagName == 'TH')
|
|
return;
|
|
|
|
cell.querySelector(CHECKBOX_SELECTOR).checked = checked;
|
|
});
|
|
}
|
|
}
|