diff --git a/frontend/src/core/utility.js b/frontend/src/core/utility.js index 6b74920dd..dba52923a 100644 --- a/frontend/src/core/utility.js +++ b/frontend/src/core/utility.js @@ -3,7 +3,7 @@ export function isValidUtility(utility) { return false; } - if (Utility.selector) { + if (!utility.selector) { return false; } diff --git a/frontend/src/utils/asidenav/asidenav.js b/frontend/src/utils/asidenav/asidenav.js index 09d295063..3b5c048ff 100644 --- a/frontend/src/utils/asidenav/asidenav.js +++ b/frontend/src/utils/asidenav/asidenav.js @@ -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'; } - }; } } diff --git a/frontend/src/utils/async-table/async-table.js b/frontend/src/utils/async-table/async-table.js index d3da0b6f3..f32f8df33 100644 --- a/frontend/src/utils/async-table/async-table.js +++ b/frontend/src/utils/async-table/async-table.js @@ -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); - }; -} diff --git a/frontend/src/utils/check-all/check-all.js b/frontend/src/utils/check-all/check-all.js index d5fa39719..5c1a754db 100644 --- a/frontend/src/utils/check-all/check-all.js +++ b/frontend/src/utils/check-all/check-all.js @@ -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; }); }