feat(SLB-209): debounce-based autosave

AmazeeLabs · Apr 14, 2024 · 004a708 · 004a708
1 parent 7dd097f
commit 004a708
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 13 deletions.
diff --git a/apps/cms/config/sync/silverback_autosave.settings.yml b/apps/cms/config/sync/silverback_autosave.settings.yml
@@ -1,6 +1,6 @@
 _core:
   default_config_hash: HaTNbtQe6_A0WF-ZElHNWcv0VK_aqOj5lBEFhAgY85s
-interval: 3000
+interval: 2000
 only_on_form_change: false
 active_on:
   content_entity_forms: true

diff --git a/packages/drupal/silverback_autosave/js/silverback_autosave.js b/packages/drupal/silverback_autosave/js/silverback_autosave.js
@@ -84,7 +84,7 @@
         Drupal.autosaveForm.form.submit(function () {
           if (Drupal.autosaveForm.autosaveFormRunning) {
             Drupal.autosaveForm.autosaveFormRunning = false;
-            clearInterval(Drupal.autosaveForm.timer);
+            clearTimeout(Drupal.autosaveForm.timer);
             Drupal.autosaveForm.timer = null;
           }
         });
@@ -100,7 +100,7 @@
           !Drupal.autosaveForm.autosaveFormRunning &&
           Drupal.autosaveForm.timer
         ) {
-          clearInterval(Drupal.autosaveForm.timer);
+          clearTimeout(Drupal.autosaveForm.timer);
           Drupal.autosaveForm.timer = null;
         } else {
           return;
@@ -237,7 +237,7 @@
           ) {
             if (xmlhttprequest.status === 0 || xmlhttprequest.status >= 400) {
               Drupal.autosaveForm.autosaveFormRunning = false;
-              clearInterval(Drupal.autosaveForm.timer);
+              clearTimeout(Drupal.autosaveForm.timer);
               Drupal.autosaveForm.timer = null;
 
               if (!Drupal.autosaveForm.beforeUnloadCalled) {
@@ -307,16 +307,17 @@
               );
             }, 500);
           }
-          // TODO: Implement a mechanism that takes user interaction into account.
-          //       E.g. autosave after the user did not interact for 2 seconds.
 
-          Drupal.autosaveForm.timer = setInterval(function () {
-            if (!Drupal.ajax.instances.some(isAjaxing)) {
-              triggerAjaxSubmitWithoutProgressIndication(
-                Drupal.autosaveForm.autosave_submit_class,
-              );
-            }
-          }, Drupal.autosaveForm.interval);
+          $('body').on('click keyup', () => {
+            clearTimeout(Drupal.autosaveForm.timer);
+            Drupal.autosaveForm.timer = setTimeout(function () {
+              if (!Drupal.ajax.instances.some(isAjaxing)) {
+                triggerAjaxSubmitWithoutProgressIndication(
+                  Drupal.autosaveForm.autosave_submit_class,
+                );
+              }
+            }, Drupal.autosaveForm.interval);
+          });
         }
       }