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;
}
if (Utility.selector) {
if (!utility.selector) {
return false;
}

View File

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

View File

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

View File

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