diff --git a/resources/js/components/add-remove-rows.js b/resources/js/components/add-remove-rows.js index 3213c4835..488654279 100644 --- a/resources/js/components/add-remove-rows.js +++ b/resources/js/components/add-remove-rows.js @@ -1,5 +1,5 @@ import {onChildEvent} from '../services/dom'; -import {uniqueId} from '../services/util'; +import {uniqueId} from '../services/util.ts'; import {Component} from './component'; /** diff --git a/resources/js/components/auto-suggest.js b/resources/js/components/auto-suggest.js index 2eede241c..07711312f 100644 --- a/resources/js/components/auto-suggest.js +++ b/resources/js/components/auto-suggest.js @@ -1,4 +1,4 @@ -import {escapeHtml} from '../services/util'; +import {escapeHtml} from '../services/util.ts'; import {onChildEvent} from '../services/dom'; import {Component} from './component'; import {KeyboardNavigationHandler} from '../services/keyboard-navigation'; diff --git a/resources/js/components/dropdown-search.js b/resources/js/components/dropdown-search.js index 2344619f5..787e11c87 100644 --- a/resources/js/components/dropdown-search.js +++ b/resources/js/components/dropdown-search.js @@ -1,4 +1,4 @@ -import {debounce} from '../services/util'; +import {debounce} from '../services/util.ts'; import {transitionHeight} from '../services/animations'; import {Component} from './component'; diff --git a/resources/js/components/global-search.js b/resources/js/components/global-search.js index 798bd7aac..44c0d02f9 100644 --- a/resources/js/components/global-search.js +++ b/resources/js/components/global-search.js @@ -1,5 +1,5 @@ import {htmlToDom} from '../services/dom'; -import {debounce} from '../services/util'; +import {debounce} from '../services/util.ts'; import {KeyboardNavigationHandler} from '../services/keyboard-navigation'; import {Component} from './component'; diff --git a/resources/js/components/page-display.js b/resources/js/components/page-display.js index 1e13ae388..ff9d68c7a 100644 --- a/resources/js/components/page-display.js +++ b/resources/js/components/page-display.js @@ -1,5 +1,5 @@ import * as DOM from '../services/dom'; -import {scrollAndHighlightElement} from '../services/util'; +import {scrollAndHighlightElement} from '../services/util.ts'; import {Component} from './component'; function toggleAnchorHighlighting(elementId, shouldHighlight) { diff --git a/resources/js/components/page-editor.js b/resources/js/components/page-editor.js index 216067552..9450444ca 100644 --- a/resources/js/components/page-editor.js +++ b/resources/js/components/page-editor.js @@ -1,5 +1,5 @@ import {onSelect} from '../services/dom'; -import {debounce} from '../services/util'; +import {debounce} from '../services/util.ts'; import {Component} from './component'; import {utcTimeStampToLocalTime} from '../services/dates.ts'; diff --git a/resources/js/markdown/codemirror.js b/resources/js/markdown/codemirror.js index a6332cbb8..664767605 100644 --- a/resources/js/markdown/codemirror.js +++ b/resources/js/markdown/codemirror.js @@ -1,5 +1,5 @@ import {provideKeyBindings} from './shortcuts'; -import {debounce} from '../services/util'; +import {debounce} from '../services/util.ts'; import {Clipboard} from '../services/clipboard.ts'; /** diff --git a/resources/js/services/util.js b/resources/js/services/util.ts similarity index 67% rename from resources/js/services/util.js rename to resources/js/services/util.ts index 1264d1058..7f684dd42 100644 --- a/resources/js/services/util.js +++ b/resources/js/services/util.ts @@ -4,37 +4,39 @@ * N milliseconds. If `immediate` is passed, trigger the function on the * leading edge, instead of the trailing. * @attribution https://davidwalsh.name/javascript-debounce-function - * @param {Function} func - * @param {Number} waitMs - * @param {Boolean} immediate - * @returns {Function} */ -export function debounce(func, waitMs, immediate) { - let timeout; - return function debouncedWrapper(...args) { - const context = this; +export function debounce(func: Function, waitMs: number, immediate: boolean): Function { + let timeout: number|null = null; + return function debouncedWrapper(this: any, ...args: any[]) { + const context: any = this; const later = function debouncedTimeout() { timeout = null; if (!immediate) func.apply(context, args); }; const callNow = immediate && !timeout; - clearTimeout(timeout); - timeout = setTimeout(later, waitMs); + if (timeout) { + clearTimeout(timeout); + } + timeout = window.setTimeout(later, waitMs); if (callNow) func.apply(context, args); }; } +function isDetailsElement(element: HTMLElement): element is HTMLDetailsElement { + return element.nodeName === 'DETAILS'; +} + /** - * Scroll and highlight an element. - * @param {HTMLElement} element + * Scroll-to and highlight an element. */ -export function scrollAndHighlightElement(element) { +export function scrollAndHighlightElement(element: HTMLElement): void { if (!element) return; + // Open up parent
elements if within let parent = element; while (parent.parentElement) { parent = parent.parentElement; - if (parent.nodeName === 'DETAILS' && !parent.open) { + if (isDetailsElement(parent) && !parent.open) { parent.open = true; } } @@ -44,15 +46,15 @@ export function scrollAndHighlightElement(element) { const highlight = getComputedStyle(document.body).getPropertyValue('--color-link'); element.style.outline = `2px dashed ${highlight}`; element.style.outlineOffset = '5px'; - element.style.transition = null; + element.style.removeProperty('transition'); setTimeout(() => { element.style.transition = 'outline linear 3s'; element.style.outline = '2px dashed rgba(0, 0, 0, 0)'; const listener = () => { element.removeEventListener('transitionend', listener); - element.style.transition = null; - element.style.outline = null; - element.style.outlineOffset = null; + element.style.removeProperty('transition'); + element.style.removeProperty('outline'); + element.style.removeProperty('outlineOffset'); }; element.addEventListener('transitionend', listener); }, 1000); @@ -61,10 +63,8 @@ export function scrollAndHighlightElement(element) { /** * Escape any HTML in the given 'unsafe' string. * Take from https://stackoverflow.com/a/6234804. - * @param {String} unsafe - * @returns {string} */ -export function escapeHtml(unsafe) { +export function escapeHtml(unsafe: string): string { return unsafe .replace(/&/g, '&') .replace(/ (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); return (`${S4() + S4()}-${S4()}-${S4()}-${S4()}-${S4()}${S4()}${S4()}`); @@ -86,10 +84,8 @@ export function uniqueId() { /** * Generate a random smaller unique ID. - * - * @returns {string} */ -export function uniqueIdSmall() { +export function uniqueIdSmall(): string { // eslint-disable-next-line no-bitwise const S4 = () => (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); return S4(); @@ -97,10 +93,8 @@ export function uniqueIdSmall() { /** * Create a promise that resolves after the given time. - * @param {int} timeMs - * @returns {Promise} */ -export function wait(timeMs) { +export function wait(timeMs: number): Promise { return new Promise(res => { setTimeout(res, timeMs); }); diff --git a/resources/js/wysiwyg-tinymce/plugin-drawio.js b/resources/js/wysiwyg-tinymce/plugin-drawio.js index 342cac0af..197c50b0e 100644 --- a/resources/js/wysiwyg-tinymce/plugin-drawio.js +++ b/resources/js/wysiwyg-tinymce/plugin-drawio.js @@ -1,5 +1,5 @@ import * as DrawIO from '../services/drawio.ts'; -import {wait} from '../services/util'; +import {wait} from '../services/util.ts'; let pageEditor = null; let currentNode = null;