TS: Coverted util service

diff --git a/resources/js/components/add-remove-rows.js b/resources/js/components/add-remove-rows.js
index 3213c4835aa45fd5bad209e34b4b5a9e6b44967c..488654279b4e0cb558cf9d390c42bd6b7ffc4ebc 100644 (file)
--- 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 {onChildEvent} from '../services/dom';

-import {uniqueId} from '../services/util';
+import {uniqueId} from '../services/util.ts';

 import {Component} from './component';
 
 /**
 import {Component} from './component';
 
 /**

diff --git a/resources/js/components/auto-suggest.js b/resources/js/components/auto-suggest.js
index 2eede241c694dc323f53ff33070163de2a79cea4..07711312f1dfd85efbb1d842d92f1a3efd32d429 100644 (file)
--- 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';
 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 2344619f5e9b794de3177c6c4acf8a5c7550b351..787e11c875df3441bd8a81dabdcd5a975d7195d0 100644 (file)
--- 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';
 
 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 798bd7aacb0d5c00fb5d0ece92c6ae604678a235..44c0d02f9d48a94e7c17f741cb9c92b5f5bc6d75 100644 (file)
--- a/resources/js/components/global-search.js
+++ b/resources/js/components/global-search.js
@@ -1,5 +1,5 @@
 import {htmlToDom} from '../services/dom';
 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';
 
 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 1e13ae38800ebf6cd86a588cbe7e07ccc0957200..ff9d68c7a5a245bfd0d0712b34d6cbdf4046b1c7 100644 (file)
--- 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 * as DOM from '../services/dom';

-import {scrollAndHighlightElement} from '../services/util';
+import {scrollAndHighlightElement} from '../services/util.ts';

 import {Component} from './component';
 
 function toggleAnchorHighlighting(elementId, shouldHighlight) {
 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 2160675529bd5eef9a132141af2f7f9ee853dc01..9450444ca41eadf7e7eac2e83814160712f9025d 100644 (file)
--- a/resources/js/components/page-editor.js
+++ b/resources/js/components/page-editor.js
@@ -1,5 +1,5 @@
 import {onSelect} from '../services/dom';
 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';
 
 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 a6332cbb844fddc44d022e9708b0051fca5b41e3..664767605b8a91b33125512efc96476068da4c32 100644 (file)
--- a/resources/js/markdown/codemirror.js
+++ b/resources/js/markdown/codemirror.js
@@ -1,5 +1,5 @@
 import {provideKeyBindings} from './shortcuts';
 import {provideKeyBindings} from './shortcuts';

-import {debounce} from '../services/util';
+import {debounce} from '../services/util.ts';

 import {Clipboard} from '../services/clipboard.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 1264d105860e11ae68e9f7d53cbbfd02ea878837..7f684dd424770b0225606a426df7a6ada3830e9c 100644 (file)
--- 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
  * 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;
         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);
     };
 }
 
         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;
 
     if (!element) return;
 

+    // Open up parent <details> elements if within

     let parent = element;
     while (parent.parentElement) {
         parent = parent.parentElement;
     let parent = element;
     while (parent.parentElement) {
         parent = parent.parentElement;

-        if (parent.nodeName === 'DETAILS' && !parent.open) {
+        if (isDetailsElement(parent) && !parent.open) {

             parent.open = true;
         }
     }
             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';
     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);
     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);
         };
         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.
 /**
  * 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;')
     return unsafe
         .replace(/&/g, '&amp;')
         .replace(/</g, '&lt;')


@@ -75,10 +75,8 @@ export function escapeHtml(unsafe) {
 
 /**
  * Generate a random unique ID.
 
 /**
  * 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()}`);
     // 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()}`);


@@ -86,10 +84,8 @@ export function uniqueId() {
 
 /**
  * Generate a random smaller unique ID.
 
 /**
  * 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();
     // 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.
 
 /**
  * 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);
     });
     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 342cac0af74c4df3677482e5efc8ba4a92e60f90..197c50b0e448aec7c7d62f3a25f943ecf4112a1e 100644 (file)
--- 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 * as DrawIO from '../services/drawio.ts';

-import {wait} from '../services/util';
+import {wait} from '../services/util.ts';

 
 let pageEditor = null;
 let currentNode = null;
 
 let pageEditor = null;
 let currentNode = null;