Allow configuration of debounce in form-autosubmit (#48)

* Add more internal callbacks in elements

* Allow configuration of debounce in form-autosubmit

Author: robbevp

src/elements/form_autosubmit_element.js

@@ -4,26 +4,42 @@ import { debounce } from "../lib/debounce";
 /**
  * This element submits a form automatically clicking on a hidden submit input/button
  *
- * The form gets submitted on each change, or on input with a debounce.
+ * The form gets submitted on each change or input with a configurable debounce.
  * You still need to make sure that this is what the user expects and/or that the submit is captured
  * and only part of the DOM get's updated using a technique like turbo frames.
  * (We don't use `form.submit()` since that event isn't captured by turbo)
+ *
+ * The debounce for the change or input event can be configured with `data-change-debounce`
+ * or `data-input-debounce`. This value is only picked up when the component is connected
+ * any later changes to this attribute are ignored.
  */
 export default class FormAutosubmitElement extends SprinklesElement {
   static tagName = "form-autosubmit";
   static refs = ["button"];
   static events = {
-    change: "submit",
-    input: "debouncedSubmit",
+    change: "handleChange",
+    input: "handleInput",
   };
 
-  debouncedSubmit = debounce(this.#submit.bind(this), 250);
+  beforeConnected() {
+    this.changeDebounce = this.hasAttribute("data-change-debounce")
+      ? parseInt(this.getAttribute("data-change-debounce"))
+      : 0;
+    this.inputDebounce = this.hasAttribute("data-input-debounce")
+      ? parseInt(this.getAttribute("data-input-debounce"))
+      : 250;
 
-  submit() {
-    this.debouncedSubmit.trigger();
+    this.handleChange = debounce(this.#submit.bind(this), this.changeDebounce);
+    this.handleInput = debounce(this.#submit.bind(this), this.inputDebounce);
   }
 
   #submit() {
+    // If one debounce triggers, we clear both
+    // This avoids the two debounces being triggered close too each other
+    this.handleChange.clear();
+    this.handleInput.clear();
+
+    // Submit the form
     this.refs.button.click();
   }
 }

src/elements/sprinkles_element.js

@@ -42,6 +42,7 @@ export default class SprinklesElement extends HTMLElement {
   refs = {};
 
   connectedCallback() {
+    this.beforeConnected();
     this.#detectRefs();
     this.#bindEvents();
     this.afterConnected();
@@ -50,12 +51,15 @@ export default class SprinklesElement extends HTMLElement {
   disconnectedCallback() {
     this.beforeDisconnect();
     this.#unbindEvents();
+    this.afterDisconnect();
   }
 
   // Callbacks
+  beforeConnected() {}
   afterConnected() {}
 
   beforeDisconnect() {}
+  afterDisconnect() {}
 
   // Setup
   #detectRefs() {

src/lib/debounce.js

@@ -31,11 +31,19 @@ export function debounce(callback, wait) {
   };
 
   debounced.trigger = () => {
+    debounced.clear();
+    run();
+  };
+
+  debounced.flush = () => {
+    if (timeout) debounced.trigger();
+  };
+
+  debounced.clear = () => {
     if (timeout) {
       clearTimeout(timeout);
       timeout = null;
     }
-    run();
   };
 
   return debounced;