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