TS: Coverted util service

Author: ssddanbrown

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';
 
 /**

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

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

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

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) {

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

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';
 
 /**

resources/js/services/util.js renamed to 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 <details> 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, '&amp;')
         .replace(/</g, '&lt;')
@@ -75,32 +75,26 @@ export function escapeHtml(unsafe) {
 
 /**
  * Generate a random unique ID.
- *
- * @returns {string}
  */
-export function uniqueId() {
+export function uniqueId(): string {
     // eslint-disable-next-line no-bitwise
     const S4 = () => (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
     return (`${S4() + S4()}-${S4()}-${S4()}-${S4()}-${S4()}${S4()}${S4()}`);
 }
 
 /**
  * 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();
 }
 
 /**
  * Create a promise that resolves after the given time.
- * @param {int} timeMs
- * @returns {Promise}
  */
-export function wait(timeMs) {
+export function wait(timeMs: number): Promise<any> {
     return new Promise(res => {
         setTimeout(res, timeMs);
     });

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;