From d43fbca0c3d2cda406889e3d96295e903b14f555 Mon Sep 17 00:00:00 2001 From: Felix Hamann Date: Sun, 7 Apr 2019 22:31:27 +0200 Subject: [PATCH] refactor check all checkbox js utility --- src/Foundation.hs | 2 +- static/css/utils/checkbox.scss | 12 ++-- static/js/utils/checkAll.js | 100 +++++++++++++++++++-------------- 3 files changed, 67 insertions(+), 47 deletions(-) diff --git a/src/Foundation.hs b/src/Foundation.hs index 3692aa39c..04ed0139d 100644 --- a/src/Foundation.hs +++ b/src/Foundation.hs @@ -1073,9 +1073,9 @@ siteLayout' headingOverride widget = do -- addScript $ StaticR js_utils_asyncForm_js -- addScript $ StaticR js_utils_asyncTable_js -- addScript $ StaticR js_utils_asyncTableFilter_js - -- addScript $ StaticR js_utils_checkAll_js -- addScript $ StaticR js_utils_httpClient_js -- JavaScript utils + addScript $ StaticR js_utils_checkAll_js addScript $ StaticR js_utils_form_js addScript $ StaticR js_utils_inputs_js addScript $ StaticR js_utils_modal_js diff --git a/static/css/utils/checkbox.scss b/static/css/utils/checkbox.scss index 4cab1568e..9a73b01e7 100644 --- a/static/css/utils/checkbox.scss +++ b/static/css/utils/checkbox.scss @@ -16,8 +16,8 @@ label { display: block; - height: 24px; - width: 24px; + height: 20px; + width: 20px; background-color: #f3f3f3; box-shadow: inset 0 1px 2px 1px rgba(50, 50, 50, 0.05); border: 2px solid var(--color-primary); @@ -55,14 +55,16 @@ :checked + label::before { background-color: white; transform: rotate(45deg); - left: 4px; + left: 2px; + top: 11px; } :checked + label::after { background-color: white; transform: rotate(-45deg); - top: 11px; - width: 13px; + top: 9px; + width: 12px; + left: 7px; } [disabled] + label { diff --git a/static/js/utils/checkAll.js b/static/js/utils/checkAll.js index b37a89454..3045d2bee 100644 --- a/static/js/utils/checkAll.js +++ b/static/js/utils/checkAll.js @@ -3,38 +3,54 @@ window.utils = window.utils || {}; - var ASYNC_TABLE_CONTENT_CHANGED_CLASS = 'async-table--changed'; - var JS_INITIALIZED_CLASS = 'js-check-all-initialized'; + /** + * + * Check All Checkbox Utility + * adds a Check All Checkbox above columns with only checkboxes + * + * Attribute: [none] + * (will be set up automatically on tables) + * + * Example usage: + * (table with one column thats only checkboxes) + */ + + var CHECK_ALL_UTIL_NAME = 'checkAll'; + var CHECK_ALL_UTIL_SELECTOR = 'table'; + 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)) && !wrapper.classList.contains(ASYNC_TABLE_CONTENT_CHANGED_CLASS)) { - return false; - } - options = options || {}; + var CHECK_ALL_INITIALIZED_CLASS = 'check-all--initialized'; + var checkAllUtil = function(element) { var columns = []; var checkboxColumn = []; var checkAllCheckbox = null; - var utilInstances = []; - function init() { + if (!element) { + throw new Error('Check All utility cannot be setup without an element!'); + } - columns = gatherColumns(wrapper); + gatherColumns(); + setupCheckAllCheckbox(); - setupCheckAllCheckbox(findCheckboxColumn(columns)); + // mark initialized + element.classList.add(CHECK_ALL_INITIALIZED_CLASS); - wrapper.classList.add(JS_INITIALIZED_CLASS); + return { + name: CHECK_ALL_UTIL_NAME, + element: element, + destroy: function() {}, + }; } - function gatherColumns(table) { - var rows = Array.from(table.querySelectorAll('tr')); + function getCheckboxId() { + return 'check-all-checkbox-' + Math.floor(Math.random() * 100000); + } + + function gatherColumns(tble) { + var rows = Array.from(element.querySelectorAll('tr')); var cols = []; rows.forEach(function(tr) { var cells = Array.from(tr.querySelectorAll('td')); @@ -45,7 +61,7 @@ cols[cellIndex].push(cell); }); }); - return cols; + columns = cols; } function findCheckboxColumn(columns) { @@ -68,21 +84,25 @@ return onlyCheckboxes; } - function setupCheckAllCheckbox(columnId) { - if (columnId === null) { + function setupCheckAllCheckbox() { + var checkboxColumnId = findCheckboxColumn(columns); + if (checkboxColumnId === null) { return; } - checkboxColumn = columns[columnId]; - var firstRow = wrapper.querySelector('tr'); - var th = Array.from(firstRow.querySelectorAll('th, td'))[columnId]; + checkboxColumn = columns[checkboxColumnId]; + var firstRow = element.querySelector('tr'); + var th = Array.from(firstRow.querySelectorAll('th, td'))[checkboxColumnId]; th.innerHTML = 'test'; checkAllCheckbox = document.createElement('input'); checkAllCheckbox.setAttribute('type', 'checkbox'); checkAllCheckbox.setAttribute('id', getCheckboxId()); th.innerHTML = ''; th.insertBefore(checkAllCheckbox, null); - utilInstances.push(window.utils.setup('checkbox', checkAllCheckbox)); + + if (UtilRegistry) { + UtilRegistry.setup(UtilRegistry.find('checkbox')); + } checkAllCheckbox.addEventListener('input', onCheckAllCheckboxInput); setupCheckboxListeners(); @@ -103,9 +123,9 @@ } function updateCheckAllCheckboxState() { - var allChecked = checkboxColumn.reduce(function(acc, cell) { - return acc && cell.querySelector(CHECKBOX_SELECTOR).checked; - }, true); + var allChecked = checkboxColumn.every(function(cell) { + return cell.querySelector(CHECKBOX_SELECTOR).checked; + }) checkAllCheckbox.checked = allChecked; } @@ -115,17 +135,15 @@ }); } - function destroy() { - utilInstances.forEach(function(util) { - util.destroy(); - }); - } - - init(); - - return { - scope: wrapper, - destroy: destroy, - }; + return init(); }; + + // register check all checkbox util + if (UtilRegistry) { + UtilRegistry.register({ + name: CHECK_ALL_UTIL_NAME, + selector: CHECK_ALL_UTIL_SELECTOR, + setup: checkAllUtil + }); + } })();