all js utilities starting with »a« are checked and working

This commit is contained in:
Felix Hamann 2019-05-28 22:07:52 +02:00
parent befa9f3941
commit fa9c67a918
4 changed files with 41 additions and 54 deletions

View File

@ -3,7 +3,7 @@ export function isValidUtility(utility) {
return false; return false;
} }
if (Utility.selector) { if (!utility.selector) {
return false; return false;
} }

View File

@ -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';
} }
}; };
} }
} }

View File

@ -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);
};
}

View File

@ -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;
}); });
} }