Started replacing jQuery #3303

package.json

@@ -25,15 +25,15 @@
     "@types/slickgrid": "^2.1.36",
     "dompurify": "^3.0.6",
     "fine-uploader": "^5.16.2",
-    "jquery": "^3.7.1",
     "jquery-simulate": "^1.0.2",
-    "jquery-ui": "^1.13.2",
     "mousetrap": "^1.6.5",
     "q": "^1.5.1",
     "slickgrid": "^4.0.1",
     "validator": "^13.11.0"
   },
   "peerDependencies": {
+    "jquery": "^3.7.1",
+    "jquery-ui-dist": "^1.13.2",
     "postcss": "^8.2.2"
   },
   "devDependencies": {
@@ -58,6 +58,7 @@
     "error-logger-webpack-plugin": "^1.1.1",
     "eslint": "^8.50.0",
     "glob": "^10.3.10",
+    "jquery-ui": "^1.13.2",
     "less": "^4.2.0",
     "less-loader": "^11.1.3",
     "mini-css-extract-plugin": "^2.7.6",

src/main/resources/assets/admin/common/js/Class.ts

@@ -1,10 +1,8 @@
 export class Class {
+    private readonly name: string;
+    private readonly fn: new (...args: any[]) => any;
 
-    private name: string;
-
-    private fn: Function;
-
-    constructor(name: string, fn: Function) {
+    constructor(name: string, fn: new (...args: any[]) => any) {
         this.name = name;
         this.fn = fn;
     }
@@ -14,9 +12,6 @@ export class Class {
     }
 
     newInstance(constructorParams?: any): any {
-
-        let newInstance = Object.create(this.fn.prototype);
-        newInstance.constructor.call(newInstance, constructorParams);
-        return newInstance;
+        return new this.fn(constructorParams);
     }
 }

src/main/resources/assets/admin/common/js/dom/Element.ts

@@ -1,6 +1,5 @@
-import * as $ from 'jquery';
-import 'jquery-ui/ui/tabbable';
 import * as Q from 'q';
+// import 'jquery-ui/ui/tabbable'; // jquery-ui is a peerDependency
 import {StyleHelper} from '../StyleHelper';
 import {StringHelper} from '../util/StringHelper';
 import {ObjectHelper} from '../ObjectHelper';
@@ -15,6 +14,10 @@ import {ElementRegistry} from './ElementRegistry';
 import {assert, assertNotNull, assertState} from '../util/Assert';
 import {ElementEvent} from './ElementEvent';
 import * as DOMPurify from 'dompurify';
+import {findHTMLElements} from './util/findHTMLElements';
+import {selectHTMLElement} from './util/selectHTMLElement';
+import {show} from './util/show';
+
 
 export interface PurifyConfig {
     addTags?: string[];
@@ -103,8 +106,8 @@ export class ElementFromHelperBuilder
     }
 
     static fromString(s: string, loadExistingChildren: boolean = true): ElementFromHelperBuilder {
-        let htmlEl = $(s).get(0);
-        let parentEl;
+        const htmlEl = selectHTMLElement(s);
+        let parentEl: Element | undefined;
         if (htmlEl && htmlEl.parentElement) {
             parentEl = Element.fromHtmlElement(htmlEl.parentElement);
         }
@@ -269,7 +272,7 @@ export class Element {
     }
 
     static fromHtml(html: string, loadExistingChildren: boolean = true): Element {
-        const htmlEl = $(html).get(0);
+        const htmlEl = selectHTMLElement(html);
 
         if (!htmlEl) {
             return null;
@@ -285,14 +288,13 @@ export class Element {
     }
 
     static fromSelector(s: string, loadExistingChildren: boolean = true): Element[] {
-        return $(s).map((_index, elem) => {
-            let htmlEl = elem;
-            let parentEl;
+        return findHTMLElements(s).map((htmlEl) => {
+            let parentEl: Element | undefined;
             if (htmlEl && htmlEl.parentElement) {
                 parentEl = Element.fromHtmlElement(htmlEl.parentElement);
             }
             return Element.fromHtmlElement(htmlEl, loadExistingChildren, parentEl);
-        }).get();
+        });
     }
 
     public loadExistingChildren(): Element {
@@ -380,7 +382,7 @@ export class Element {
 
     show() {
         // Using jQuery to show, since it seems to contain some smartness
-        $(this.el.getHTMLElement()).show();
+        show(this.el.getHTMLElement());
         this.notifyShown(this, true);
     }
 

src/main/resources/assets/admin/common/js/dom/ElementHelper.ts

@@ -1,7 +1,17 @@
-import * as $ from 'jquery';
 import {Element} from './Element';
 import {StringHelper} from '../util/StringHelper';
 import {assert, assertNotNull} from '../util/Assert';
+import {getData} from './util/getData';
+import {getOuterHeightWithMargin} from './util/getOuterHeightWithMargin';
+import {getOuterWidthWithMargin} from './util/getOuterWidthWithMargin';
+import {getOffset} from './util/getOffset';
+import {getOffsetParent} from './util/getOffsetParent';
+import {getPosition} from './util/getPosition';
+import {isVisible} from './util/isVisible';
+import {setData} from './util/setData';
+import {setInnerHtml} from './util/setInnerHtml';
+import {setOffset} from './util/setOffset';
+
 
 export interface ElementDimensions {
     top: number;
@@ -101,7 +111,7 @@ export class ElementHelper {
     }
 
     setInnerHtml(value: string, escapeHtml: boolean = true): ElementHelper {
-        $(this.el).html(escapeHtml ? StringHelper.escapeHtml(value) : value);
+        setInnerHtml(this.el, escapeHtml ? StringHelper.escapeHtml(value) : value);
         return this;
     }
 
@@ -110,7 +120,7 @@ export class ElementHelper {
     }
 
     setText(value: string): ElementHelper {
-        $(this.el).text(value);
+        this.el.textContent = value;
         return this;
     }
 
@@ -139,13 +149,12 @@ export class ElementHelper {
     setData(name: string, value: string): ElementHelper {
         assert(!StringHelper.isEmpty(name), 'Name cannot be empty');
         assert(!StringHelper.isEmpty(value), 'Value cannot be empty');
-        this.el.setAttribute('data-' + name, value);
-        $(this.el).data(name, value);
+        setData(this.el, name, value);
         return this;
     }
 
     getData(name: string): string {
-        let data = $(this.el).data(name);
+        let data = getData(this.el, name);
         return data ? data.toString() : undefined;
     }
 
@@ -331,19 +340,19 @@ export class ElementHelper {
     }
 
     getWidth(): number {
-        return $(this.el).innerWidth();
+        return this.el.clientWidth;
     }
 
     getWidthWithoutPadding(): number {
-        return $(this.el).width();
+        return this.el.getBoundingClientRect().width;
     }
 
     getWidthWithBorder(): number {
-        return $(this.el).outerWidth();
+        return this.el.offsetWidth;
     }
 
     getWidthWithMargin(): number {
-        return $(this.el).outerWidth(true);
+        return getOuterWidthWithMargin(this.el);
     }
 
     getMinWidth(): number {
@@ -365,7 +374,7 @@ export class ElementHelper {
     }
 
     getHeight(): number {
-        return $(this.el).innerHeight();
+        return this.el.clientHeight;
     }
 
     setMaxHeight(value: string): ElementHelper {
@@ -397,15 +406,15 @@ export class ElementHelper {
     }
 
     getHeightWithoutPadding(): number {
-        return $(this.el).height();
+        return this.el.getBoundingClientRect().height;
     }
 
     getHeightWithBorder(): number {
-        return $(this.el).outerHeight();
+        return this.el.offsetHeight;
     }
 
     getHeightWithMargin(): number {
-        return $(this.el).outerHeight(true);
+        return getOuterHeightWithMargin(this.el);
     }
 
     setTop(value: string): ElementHelper {
@@ -659,12 +668,15 @@ export class ElementHelper {
     getOffset(): {
         top: number; left: number;
     } {
-        return $(this.el).offset();
+        return getOffset(this.el);
     }
 
+    /**
+     * Set the coordinates of every element, in the set of matched elements, relative to the document.
+     */
     setOffset(offset: { top: number; left: number; }): ElementHelper {
-        $(this.el).offset(offset);
-        return this;
+        setOffset(this.el, offset);
+        return this; // TODO: return this or this.el?
     }
 
     getDimensions(): ElementDimensions {
@@ -695,7 +707,7 @@ export class ElementHelper {
      * @returns {HTMLElement}
      */
     getOffsetParent(): HTMLElement {
-        return $(this.el).offsetParent()[0];
+        return getOffsetParent(this.el);
     }
 
     /**
@@ -705,7 +717,7 @@ export class ElementHelper {
     getOffsetToParent(): {
         top: number; left: number;
     } {
-        return $(this.el).position();
+        return getPosition(this.el);
     }
 
     getOffsetTop(): number {
@@ -758,7 +770,7 @@ export class ElementHelper {
     }
 
     isVisible(): boolean {
-        return $(this.el).is(':visible');
+        return isVisible(this.el);
     }
 
     countChildren(): number {

src/main/resources/assets/admin/common/js/dom/WindowDOM.ts

@@ -1,4 +1,3 @@
-import * as $ from 'jquery';
 import {Element} from './Element';
 import {GLOBAL, GlobalLibAdmin, Store} from '../store/Store';
 

src/main/resources/assets/admin/common/js/dom/util/animateScrollTop.ts

@@ -0,0 +1,24 @@
+export function animateScrollTop(
+    el: HTMLElement,
+    targetTop: number,
+    durationMs: number,
+    complete: () => void
+) {
+    const startScrollTop = el.scrollTop;
+    const distance = targetTop - startScrollTop;
+    const framesPerSecond = 50;
+    const timeout = 1000 / framesPerSecond;
+    const intervals = durationMs / timeout;
+    const step = distance / intervals;
+    const timer = setInterval(() => {
+        if (el.scrollTop >= targetTop) {
+            clearInterval(timer);
+            if (el.scrollTop > targetTop) { // Handle overshoot (decimals)
+                el.scrollTop = targetTop;
+            }
+            complete();
+        } else {
+            el.scrollTop += step;
+        }
+    }, timeout);
+}

src/main/resources/assets/admin/common/js/dom/util/elementExists.ts

@@ -0,0 +1,2 @@
+export const elementExists = (element: Element) => typeof(element) != 'undefined' && element != null;
+

src/main/resources/assets/admin/common/js/dom/util/findElements.ts

@@ -0,0 +1,6 @@
+export function findElements(
+    selector: string,
+    context: Document | Element = document
+) {
+    return Array.from(context.querySelectorAll(selector));
+}

src/main/resources/assets/admin/common/js/dom/util/findHTMLElements.ts

@@ -0,0 +1,9 @@
+import {findElements} from './findElements';
+import {isHTMLElement} from './isHTMLElement';
+
+export function findHTMLElements(
+    selector: string,
+    context: Document | Element = document
+): HTMLElement[] {
+    return findElements(selector, context).filter((el) => isHTMLElement(el)) as HTMLElement[];
+}

src/main/resources/assets/admin/common/js/dom/util/first.ts

@@ -0,0 +1,6 @@
+export function first(
+    selector: string,
+    context: Document | Element = document
+) {
+    return context.querySelector(selector);
+}

src/main/resources/assets/admin/common/js/dom/util/getData.ts

@@ -0,0 +1,3 @@
+export function getData(el: Element, name: string): string | null {
+    return el.getAttribute(`data-${name}`);
+}

src/main/resources/assets/admin/common/js/dom/util/getInnerHeight.ts

@@ -0,0 +1,3 @@
+export function getInnerHeight(el: Element) {
+    return el.clientHeight;
+}