Merge pull request #520 from exadel-inc/bugfix/depends-on-utils

[EAK-516] Add embedded debounce implementation to not rely on `jquery-debounce` module persistence

docs/content/getting-started/installation.md

@@ -11,7 +11,7 @@ seoTitle: Installation - Exadel Authoring Kit
 <dependency>
    <groupId>com.exadel.etoolbox</groupId>
    <artifactId>etoolbox-authoring-kit-core</artifactId>
-   <version>2.4.1</version> <!-- Prefer the latest stable version whenever possible -->
+   <version>2.5.1</version> <!-- Prefer the latest stable version whenever possible -->
    <scope>provided</scope> <!-- Do not use compile or runtime scope!-->
 </dependency>
 ```
@@ -21,7 +21,7 @@ seoTitle: Installation - Exadel Authoring Kit
 <plugin>
     <groupId>com.exadel.etoolbox</groupId>
     <artifactId>etoolbox-authoring-kit-plugin</artifactId>
-    <version>2.4.1</version>
+    <version>2.5.1</version>
     <executions>
         <execution>
             <goals>
@@ -79,7 +79,7 @@ You need to do two steps.
 <dependency>
     <groupId>com.exadel.etoolbox</groupId>
     <artifactId>etoolbox-authoring-kit-all</artifactId>
-    <version>2.4.1</version>
+    <version>2.5.1</version>
     <type>content-package</type>
 </dependency>
 ```

ui.apps/package.json

@@ -1,7 +1,7 @@
 {
   "name": "depends-on",
   "description": "A clientlib that executes defined action on dependent fields",
-  "version": "2.4.1",
+  "version": "2.5.1",
   "private": true,
   "devDependencies": {
     "eslint": "^8.45.0",

ui.apps/src/main/content/jcr_root/apps/etoolbox-authoring-kit/depends-on/js/dependsOn.js

@@ -61,7 +61,8 @@
     };
 
     // Track new component initialization
-    $document.off('foundation-contentloaded.dependsOn')
+    $document
+        .off('foundation-contentloaded.dependsOn')
         .on('foundation-contentloaded.dependsOn', (e) => ns.initialize((e && e.target) || document));
 
     // Track reference field changes
@@ -72,13 +73,14 @@
         .off('change:value.dependsOn').on('change:value.dependsOn', '[data-dependsonref]', handleChange);
 
     // Track input event
-    const handleChangeDebounced = $.debounce(750, handleChange);
     $document
-        .off('input.dependsOn').on('input', '[data-dependsonref]:not([data-dependsonreflazy])', handleChangeDebounced);
+        .off('input.dependsOn')
+        .on('input', '[data-dependsonref]:not([data-dependsonreflazy])', ns.debounce(handleChange, 750));
 
     // Track collection change to update dynamic references
     $document
-        .off('coral-collection:remove.dependsOn coral-collection:add.dependsOn').on('coral-collection:remove.dependsOn coral-collection:add.dependsOn', 'coral-multifield', (e) => {
+        .off('coral-collection:remove.dependsOn coral-collection:add.dependsOn')
+        .on('coral-collection:remove.dependsOn coral-collection:add.dependsOn', 'coral-multifield', (e) => {
             // We should actualize references on coral-collection:remove and coral-collection:add too.
             ns.ElementReferenceRegistry.handleChange(e);
             ns.ElementReferenceRegistry.actualize();

ui.apps/src/main/content/jcr_root/apps/etoolbox-authoring-kit/depends-on/js/dependsOnUtils.js

@@ -184,4 +184,17 @@
         }
         return fn;
     };
+
+    /**
+     * Debounce function wrapper
+     * @param {function} fn
+     * @param {number} timeout
+     */
+    ns.debounce = function (fn, timeout) {
+        let timer;
+        return function (...args) {
+            clearTimeout(timer);
+            timer = setTimeout(() => fn.apply(this, args), timeout);
+        };
+    };
 })(Granite.$, Granite.DependsOnPlugin = (Granite.DependsOnPlugin || {}));