Revert loading event (#792)

* Revert "Remove jquery from loading event (#779)"

This reverts commit 05547f2.

* Build

* Replace jquery in data loader

* Build

* Restore test for tree.loading_data

* Add test for onLoading

docs/_entries/events/tree-loading-data.md

@@ -7,18 +7,21 @@ Called before and after data is loaded using ajax.
 
 The event data looks like this:
 
--   **isLoading**: true / false
--   **node**:
-    -   null; when loading the whole tree
-    -   a node; when a node is loaded on demand
+* **isLoading**: true / false
+* **node**:
+  * null; when loading the whole tree
+  * a node; when a node is loaded on demand
+* **$el**: dom element
+  * whole tree; when loading the whole tree
+  * dom element of node; when a node is loaded on demand
 
 Example code:
 
 {% highlight js %}
 $('#tree1').on(
-  'tree.loading_data',
-  function(e) {
-    console.log(e.isLoading, e.node);
-  }
+    'tree.loading_data',
+    function(e) {
+        console.log(e.isLoading, e.node, e.$el);
+    }
 );
 {% endhighlight %}

docs/_entries/general/changelog.md

@@ -3,14 +3,6 @@ title: Changelog
 name: changelog
 ---
 
-#### development
-
-Small braking change:
-
--   Issue #779: remove `onLoading` option.
-    -   The option can be replaced by using the `tree.loading_data` event
-    -   Related: remove the `$el` attribute from the `tree.loading_data` event.
-
 #### 1.8.0 (november 26 2023)
 
 This release drops support for very old browsers (like IE 11).

docs/_entries/options/onloading.md

@@ -0,0 +1,22 @@
+---
+title: onLoading
+name: options-onloading
+---
+
+The onLoading parameter is called when the tree data is loading. This gives us the opportunity to display a loading signal.
+
+Callback looks like this:
+
+```js
+function (isLoading, node, $el)
+```
+
+* **isLoading**: boolean
+  * true: data is loading
+  * false: data is loaded
+* **node**:
+  * Node: if a node is loading
+  * null: if the tree is loading
+* **$el**:
+  * if a node is loading this is the `li` element
+  * if the tree is loading is the `ul` element of the whole tree

src/dataLoader.ts

@@ -1,5 +1,5 @@
 import { Node } from "./node";
-import { DataFilter, OnLoadFailed } from "./jqtreeOptions";
+import { DataFilter, OnLoadFailed, OnLoading } from "./jqtreeOptions";
 import { LoadData, TriggerEvent } from "./jqtreeMethodTypes";
 
 export type HandleFinishedLoading = () => void;
@@ -8,6 +8,7 @@ interface DataLoaderParams {
     dataFilter?: DataFilter;
     loadData: LoadData;
     onLoadFailed?: OnLoadFailed;
+    onLoading?: OnLoading;
     treeElement: HTMLElement;
     triggerEvent: TriggerEvent;
 }
@@ -16,19 +17,22 @@ export default class DataLoader {
     private dataFilter?: DataFilter;
     private loadData: LoadData;
     private onLoadFailed?: OnLoadFailed;
+    private onLoading?: OnLoading;
     private treeElement: HTMLElement;
     private triggerEvent: TriggerEvent;
 
     constructor({
         dataFilter,
         loadData,
         onLoadFailed,
+        onLoading,
         treeElement,
         triggerEvent,
     }: DataLoaderParams) {
         this.dataFilter = dataFilter;
         this.loadData = loadData;
         this.onLoadFailed = onLoadFailed;
+        this.onLoading = onLoading;
         this.treeElement = treeElement;
         this.triggerEvent = triggerEvent;
     }
@@ -44,11 +48,11 @@ export default class DataLoader {
 
         const element = this.getDomElement(parentNode);
         this.addLoadingClass(element);
-        this.notifyLoading(true, parentNode);
+        this.notifyLoading(true, parentNode, element);
 
         const stopLoading = (): void => {
             this.removeLoadingClass(element);
-            this.notifyLoading(false, parentNode);
+            this.notifyLoading(false, parentNode, element);
         };
 
         const handleSuccess = (data: string | NodeData[]): void => {
@@ -87,10 +91,21 @@ export default class DataLoader {
         }
     }
 
-    private notifyLoading(isLoading: boolean, node: Node | null): void {
+    private notifyLoading(
+        isLoading: boolean,
+        node: Node | null,
+        element: HTMLElement,
+    ): void {
+        const $el = jQuery(element);
+
+        if (this.onLoading) {
+            this.onLoading(isLoading, node, $el);
+        }
+
         this.triggerEvent("tree.loading_data", {
             isLoading,
             node,
+            $el,
         });
     }
 

src/jqtreeOptions.ts

@@ -31,7 +31,7 @@ export type OnCreateLi = (node: Node, el: JQuery, isSelected: boolean) => void;
 export type OnLoading = (
     isLoading: boolean,
     node: Node | null,
-    element: HTMLElement,
+    $el: JQuery,
 ) => void;
 
 export interface JQTreeOptions {
@@ -55,6 +55,7 @@ export interface JQTreeOptions {
     onGetStateFromStorage?: OnGetStateFromStorage;
     onIsMoveHandle?: OnIsMoveHandle;
     onLoadFailed?: OnLoadFailed;
+    onLoading?: OnLoading;
     onSetStateFromStorage?: OnSetStateFromStorage;
     openedIcon?: IconElement;
     openFolderDelay: number | false;

src/test/jqTree/events.test.ts

@@ -170,46 +170,6 @@ describe("tree.load_data", () => {
     });
 });
 
-describe("tree.loading_data", () => {
-    const server = setupServer(
-        http.get("/tree/", () => HttpResponse.json(exampleData)),
-    );
-    beforeEach(() => {
-        server.listen();
-    });
-
-    afterAll(() => {
-        server.close();
-    });
-
-    it("fires tree.loading_data when the data is loading from an url", async () => {
-        const $tree = $("#tree1");
-
-        const onLoading = jest.fn();
-        $tree.on("tree.loading_data", onLoading);
-
-        $tree.tree({ dataUrl: "/tree/" });
-
-        await waitFor(() => {
-            expect(onLoading).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    isLoading: true,
-                    node: null,
-                }),
-            );
-        });
-
-        await waitFor(() => {
-            expect(onLoading).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    isLoading: false,
-                    node: null,
-                }),
-            );
-        });
-    });
-});
-
 describe("tree.select", () => {
     interface Vars {
         node1: INode;
@@ -260,3 +220,71 @@ describe("tree.select", () => {
         });
     });
 });
+
+describe("tree.loading_data", () => {
+    const server = setupServer(
+        http.get("/tree/", () => HttpResponse.json(exampleData)),
+    );
+    beforeEach(() => {
+        server.listen();
+    });
+
+    afterAll(() => {
+        server.close();
+    });
+
+    it("fires tree.loading_data when the data is loading from an url", async () => {
+        const $tree = $("#tree1");
+
+        const onLoading = jest.fn();
+        $tree.on("tree.loading_data", onLoading);
+
+        $tree.tree({ dataUrl: "/tree/" });
+
+        await waitFor(() => {
+            expect(onLoading).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    isLoading: true,
+                    node: null,
+                }),
+            );
+        });
+
+        await waitFor(() => {
+            expect(onLoading).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    isLoading: false,
+                    node: null,
+                }),
+            );
+        });
+    });
+});
+
+describe("onLoading", () => {
+    const server = setupServer(
+        http.get("/tree/", () => HttpResponse.json(exampleData)),
+    );
+    beforeEach(() => {
+        server.listen();
+    });
+
+    afterAll(() => {
+        server.close();
+    });
+
+    it("calls onLoading", async () => {
+        const $tree = $("#tree1");
+        const onLoading = jest.fn();
+
+        $tree.tree({ dataUrl: "/tree/", onLoading });
+
+        await waitFor(() => {
+            expect(onLoading).toHaveBeenCalledWith(false, null, $tree);
+        });
+
+        await waitFor(() => {
+            expect(onLoading).toHaveBeenCalledWith(false, null, $tree);
+        });
+    });
+});

src/tree.jquery.d.ts

@@ -54,16 +54,17 @@ interface IJQTreeOptions {
     dataFilter?: (data: NodeData[]) => NodeData[];
     dataUrl?: DataUrl;
     dragAndDrop?: boolean;
-    keyboardSupport?: boolean;
     nodeClass?: any;
+    keyboardSupport?: boolean;
     onCanMove?: (node: INode) => boolean;
     onCanSelectNode?: (node: INode) => boolean;
     onCreateLi?: (node: INode, el: JQuery, isSelected: boolean) => void;
     onDragMove?: (node: INode, event: JQuery.Event | Touch) => void;
     onDragStop?: (node: INode, event: JQuery.Event | Touch) => void;
-    onGetStateFromStorage?: () => string;
     onIsMoveHandle?: (el: JQuery) => boolean;
     onLoadFailed?: (response: JQuery.jqXHR) => void;
+    onLoading?: (isLoading: boolean, node: INode, $el: JQuery) => void;
+    onGetStateFromStorage?: () => string;
     onSetStateFromStorage?: (data: string) => void;
     openedIcon?: string | HTMLElement | JQuery<HTMLElement>;
     openFolderDelay?: number | false;

src/tree.jquery.ts

@@ -49,6 +49,7 @@ export class JqTreeWidget extends SimpleWidget<JQTreeOptions> {
         onGetStateFromStorage: undefined,
         onIsMoveHandle: undefined,
         onLoadFailed: undefined,
+        onLoading: undefined,
         onSetStateFromStorage: undefined,
         openedIcon: "&#x25bc;",
         openFolderDelay: 500, // The delay for opening a folder during drag and drop; the value is in milliseconds
@@ -1090,6 +1091,7 @@ export class JqTreeWidget extends SimpleWidget<JQTreeOptions> {
             onGetStateFromStorage,
             onIsMoveHandle,
             onLoadFailed,
+            onLoading,
             onSetStateFromStorage,
             openedIcon,
             openFolderDelay,
@@ -1134,6 +1136,7 @@ export class JqTreeWidget extends SimpleWidget<JQTreeOptions> {
             dataFilter,
             loadData,
             onLoadFailed,
+            onLoading,
             treeElement,
             triggerEvent,
         });