all js utilities starting with »a« are checked and working
This commit is contained in:
parent
befa9f3941
commit
fa9c67a918
@ -3,7 +3,7 @@ export function isValidUtility(utility) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (Utility.selector) {
|
||||
if (!utility.selector) {
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
@ -14,6 +14,7 @@ const ASIDENAV_SUBMENU_CLASS = 'asidenav__nested-list-wrapper';
|
||||
export class Asidenav {
|
||||
|
||||
_element;
|
||||
_asidenavSubmenus;
|
||||
|
||||
constructor(element) {
|
||||
if (!element) {
|
||||
@ -34,12 +35,14 @@ export class Asidenav {
|
||||
}
|
||||
|
||||
destroy() {
|
||||
console.log('TBD: Destroy Asidenav');
|
||||
this._asidenavSubmenus.forEach((union) => {
|
||||
union.listItem.removeEventListener(union.hoverHandler);
|
||||
});
|
||||
}
|
||||
|
||||
_initFavoritesButton() {
|
||||
const favoritesBtn = document.querySelector('.' + FAVORITES_BTN_CLASS);
|
||||
favoritesBtn.addEventListener('click', function(event) {
|
||||
favoritesBtn.addEventListener('click', (event) => {
|
||||
favoritesBtn.classList.toggle(FAVORITES_BTN_ACTIVE_CLASS);
|
||||
this._element.classList.toggle(ASIDENAV_EXPANDED_CLASS);
|
||||
event.preventDefault();
|
||||
@ -47,7 +50,7 @@ export class Asidenav {
|
||||
}
|
||||
|
||||
_initAsidenavSubmenus() {
|
||||
const asidenavLinksWithSubmenus = Array.from(this._element.querySelectorAll('.' + ASIDENAV_LIST_ITEM_CLASS))
|
||||
this._asidenavSubmenus = Array.from(this._element.querySelectorAll('.' + ASIDENAV_LIST_ITEM_CLASS))
|
||||
.map(function(listItem) {
|
||||
const submenu = listItem.querySelector('.' + ASIDENAV_SUBMENU_CLASS);
|
||||
return { listItem, submenu };
|
||||
@ -55,13 +58,14 @@ export class Asidenav {
|
||||
return union.submenu !== null;
|
||||
});
|
||||
|
||||
asidenavLinksWithSubmenus.forEach(function(union) {
|
||||
union.listItem.addEventListener('mouseover', this.createMouseoverHandler(union));
|
||||
this._asidenavSubmenus.forEach((union) => {
|
||||
union.hoverHandler = this._createMouseoverHandler(union);
|
||||
union.listItem.addEventListener('mouseover', union.hoverHandler);
|
||||
});
|
||||
}
|
||||
|
||||
_createMouseoverHandler(union) {
|
||||
return function mouseoverHandler() {
|
||||
return () => {
|
||||
const rectListItem = union.listItem.getBoundingClientRect();
|
||||
const rectSubMenu = union.submenu.getBoundingClientRect();
|
||||
|
||||
@ -71,7 +75,6 @@ export class Asidenav {
|
||||
} else {
|
||||
union.submenu.style.top = rectListItem.top + 'px';
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { Utility } from '../../core/utility';
|
||||
import { HttpClient } from '../../services/http-client/http-client';
|
||||
import * as debounce from 'lodash.debounce';
|
||||
import './async-table-filter.scss';
|
||||
import './async-table.scss';
|
||||
|
||||
@ -132,7 +133,6 @@ export class AsyncTable {
|
||||
|
||||
_setupTableFilter() {
|
||||
const tableFilterForm = this._element.querySelector(ASYNC_TABLE_FILTER_FORM_SELECTOR);
|
||||
|
||||
if (tableFilterForm) {
|
||||
this._gatherTableFilterInputs(tableFilterForm);
|
||||
this._addTableFilterEventListeners(tableFilterForm);
|
||||
@ -140,62 +140,62 @@ export class AsyncTable {
|
||||
}
|
||||
|
||||
_gatherTableFilterInputs(tableFilterForm) {
|
||||
Array.from(tableFilterForm.querySelectorAll('input[type="search"]')).forEach(function(input) {
|
||||
Array.from(tableFilterForm.querySelectorAll('input[type="search"]')).forEach((input) => {
|
||||
this._tableFilterInputs.search.push(input);
|
||||
});
|
||||
|
||||
Array.from(tableFilterForm.querySelectorAll('input[type="text"]')).forEach(function(input) {
|
||||
Array.from(tableFilterForm.querySelectorAll('input[type="text"]')).forEach((input) => {
|
||||
this._tableFilterInputs.input.push(input);
|
||||
});
|
||||
|
||||
Array.from(tableFilterForm.querySelectorAll('input:not([type="text"]):not([type="search"])')).forEach(function(input) {
|
||||
Array.from(tableFilterForm.querySelectorAll('input:not([type="text"]):not([type="search"])')).forEach((input) => {
|
||||
this._tableFilterInputs.change.push(input);
|
||||
});
|
||||
|
||||
Array.from(tableFilterForm.querySelectorAll('select')).forEach(function(input) {
|
||||
Array.from(tableFilterForm.querySelectorAll('select')).forEach((input) => {
|
||||
this._tableFilterInputs.select.push(input);
|
||||
});
|
||||
}
|
||||
|
||||
_addTableFilterEventListeners(tableFilterForm) {
|
||||
this._tableFilterInputs.search.forEach(function(input) {
|
||||
const debouncedInput = debounce(function() {
|
||||
this._tableFilterInputs.search.forEach((input) => {
|
||||
const debouncedInput = debounce(() => {
|
||||
if (input.value.length === 0 || input.value.length > 2) {
|
||||
this.updateFromTableFilter(tableFilterForm);
|
||||
this._updateFromTableFilter(tableFilterForm);
|
||||
}
|
||||
}, INPUT_DEBOUNCE);
|
||||
input.addEventListener('input', debouncedInput);
|
||||
});
|
||||
|
||||
this._tableFilterInputs.input.forEach(function(input) {
|
||||
const debouncedInput = debounce(function() {
|
||||
this._tableFilterInputs.input.forEach((input) => {
|
||||
const debouncedInput = debounce(() => {
|
||||
if (input.value.length === 0 || input.value.length > 2) {
|
||||
this.updateFromTableFilter(tableFilterForm);
|
||||
this._updateFromTableFilter(tableFilterForm);
|
||||
}
|
||||
}, INPUT_DEBOUNCE);
|
||||
input.addEventListener('input', debouncedInput);
|
||||
});
|
||||
|
||||
this._tableFilterInputs.change.forEach(function(input) {
|
||||
input.addEventListener('change', function() {
|
||||
this.updateFromTableFilter(tableFilterForm);
|
||||
this._tableFilterInputs.change.forEach((input) => {
|
||||
input.addEventListener('change', () => {
|
||||
this._updateFromTableFilter(tableFilterForm);
|
||||
});
|
||||
});
|
||||
|
||||
this._tableFilterInputs.select.forEach(function(input) {
|
||||
input.addEventListener('change', function() {
|
||||
this.updateFromTableFilter(tableFilterForm);
|
||||
this._tableFilterInputs.select.forEach((input) => {
|
||||
input.addEventListener('change', () => {
|
||||
this._updateFromTableFilter(tableFilterForm);
|
||||
});
|
||||
});
|
||||
|
||||
tableFilterForm.addEventListener('submit', function(event) {
|
||||
tableFilterForm.addEventListener('submit', (event) =>{
|
||||
event.preventDefault();
|
||||
this.updateFromTableFilter(tableFilterForm);
|
||||
this._updateFromTableFilter(tableFilterForm);
|
||||
});
|
||||
}
|
||||
|
||||
_updateFromTableFilter(tableFilterForm) {
|
||||
const url = this.serializeTableFilterToURL();
|
||||
const url = this._serializeTableFilterToURL();
|
||||
let callback = null;
|
||||
|
||||
const focusedInput = tableFilterForm.querySelector(':focus, :active');
|
||||
@ -218,7 +218,7 @@ export class AsyncTable {
|
||||
this._updateTableFrom(url, callback);
|
||||
}
|
||||
|
||||
serializeTableFilterToURL() {
|
||||
_serializeTableFilterToURL() {
|
||||
const url = new URL(getLocalStorageParameter('currentTableUrl') || window.location.href);
|
||||
|
||||
const formIdElement = this._element.querySelector(ASYNC_TABLE_FILTER_FORM_ID_SELECTOR);
|
||||
@ -383,19 +383,3 @@ function getLocalStorageParameter(key) {
|
||||
const currentLSState = JSON.parse(window.localStorage.getItem(ASYNC_TABLE_LOCAL_STORAGE_KEY)) || {};
|
||||
return currentLSState[key];
|
||||
}
|
||||
|
||||
// debounce function, taken from Underscore.js
|
||||
function debounce(func, wait, immediate) {
|
||||
let timeout;
|
||||
return function() {
|
||||
const context = this, args = arguments;
|
||||
const later = function() {
|
||||
timeout = null;
|
||||
if (!immediate) func.apply(context, args);
|
||||
};
|
||||
const callNow = immediate && !timeout;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
if (callNow) func.apply(context, args);
|
||||
};
|
||||
}
|
||||
|
||||
@ -46,9 +46,9 @@ export class CheckAll {
|
||||
_gatherColumns() {
|
||||
const rows = Array.from(this._element.querySelectorAll('tr'));
|
||||
const cols = [];
|
||||
rows.forEach(function(tr) {
|
||||
rows.forEach((tr) => {
|
||||
const cells = Array.from(tr.querySelectorAll('td'));
|
||||
cells.forEach(function(cell, cellIndex) {
|
||||
cells.forEach((cell, cellIndex) => {
|
||||
if (!cols[cellIndex]) {
|
||||
cols[cellIndex] = [];
|
||||
}
|
||||
@ -60,8 +60,8 @@ export class CheckAll {
|
||||
|
||||
_findCheckboxColumn(columns) {
|
||||
let checkboxColumnId = null;
|
||||
columns.forEach(function(col, i) {
|
||||
if (this.isCheckboxColumn(col)) {
|
||||
columns.forEach((col, i) => {
|
||||
if (this._isCheckboxColumn(col)) {
|
||||
checkboxColumnId = i;
|
||||
}
|
||||
});
|
||||
@ -70,7 +70,7 @@ export class CheckAll {
|
||||
|
||||
_isCheckboxColumn(col) {
|
||||
let onlyCheckboxes = true;
|
||||
col.forEach(function(cell) {
|
||||
col.forEach((cell) => {
|
||||
if (onlyCheckboxes && !cell.querySelector(CHECKBOX_SELECTOR)) {
|
||||
onlyCheckboxes = false;
|
||||
}
|
||||
@ -104,23 +104,23 @@ export class CheckAll {
|
||||
}
|
||||
|
||||
_setupCheckboxListeners() {
|
||||
this._checkboxColumn.map(function(cell) {
|
||||
this._checkboxColumn.map((cell) => {
|
||||
return cell.querySelector(CHECKBOX_SELECTOR);
|
||||
})
|
||||
.forEach(function(checkbox) {
|
||||
.forEach((checkbox) => {
|
||||
checkbox.addEventListener('input', this.updateCheckAllCheckboxState);
|
||||
});
|
||||
}
|
||||
|
||||
_updateCheckAllCheckboxState() {
|
||||
const allChecked = this._checkboxColumn.every(function(cell) {
|
||||
const allChecked = this._checkboxColumn.every((cell) => {
|
||||
return cell.querySelector(CHECKBOX_SELECTOR).checked;
|
||||
});
|
||||
this._checkAllCheckbox.checked = allChecked;
|
||||
}
|
||||
|
||||
_toggleAll(checked) {
|
||||
this._checkboxColumn.forEach(function(cell) {
|
||||
this._checkboxColumn.forEach((cell) => {
|
||||
cell.querySelector(CHECKBOX_SELECTOR).checked = checked;
|
||||
});
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user