refactor(internal): Make sure all controllers use new dispatch API, w…

…ith default event options

src/async_block_controller.ts

@@ -26,6 +26,7 @@ export class AsyncBlockController extends BaseController {
   }
 
   loadContent() {
+    let self = this;
     let el = (this.hasReplaceTarget ? this.replaceTarget : this.element) as HTMLElement;
     fetch(this.endpointValue)
     .then((response) => response.text())
@@ -39,18 +40,14 @@ export class AsyncBlockController extends BaseController {
         el.replaceWith(...newEl.children);
       }
       // Trigger event to show block has loaded
-      let event = new CustomEvent("ajax:success", {"detail": ""});
-      el.dispatchEvent(event);
+      self.dispatch(el, "ajax:success");
     })
     .catch(err => {
       el.replaceWith(this._errorMessage);
-
-      let event = new CustomEvent("ajax:error", {"detail": ""});
-      el.dispatchEvent(event);
+      self.dispatch(el, "ajax:error");
     })
     .finally(() => {
-      let event = new CustomEvent("ajax:complete", {"detail": ""});
-      el.dispatchEvent(event);
+      self.dispatch(el, "ajax:complete");
     });
   }
 }

src/auto_submit_form_controller.ts

@@ -15,13 +15,7 @@ export class AutoSubmitFormController extends BaseController {
   }
 
   private handler(e: Event) {
-    // this.element.submit()
-    // Moved to this to support remote forms and CSRF properly
-    (this.element as HTMLElement).dispatchEvent(
-      new CustomEvent("submit", {
-        bubbles: true,
-        cancelable: true,
-      }),
-    );
+    // Trigger synthetic "submit" event on form
+    this.dispatch((this.element as HTMLElement), "submit");
   }
 }

src/empty_dom_controller.ts

@@ -40,12 +40,7 @@ export class EmptyDomController extends BaseController {
         let classes = this.emptyClass.split(" ");
         classes.forEach(klass => this.element.classList.add(klass));
       }
-      this.element.dispatchEvent(
-        new CustomEvent("dom:empty", {
-          bubbles: true,
-          cancelable: true,
-        }),
-      );
+      this.dispatch(this.element as HTMLElement, "dom:empty");
     } else {
       if (this.hasNotEmptyClass) {
         let classes = this.notEmptyClass.split(" ");
@@ -55,15 +50,7 @@ export class EmptyDomController extends BaseController {
         let classes = this.emptyClass.split(" ");
         classes.forEach(klass => this.element.classList.remove(klass));
       }
-      this.element.dispatchEvent(
-        new CustomEvent("dom:not-empty", {
-          bubbles: true,
-          cancelable: true,
-          detail: {
-            count: children.length,
-          },
-        }),
-      );
+      this.dispatch(this.element as HTMLElement, "dom:not-empty", {detail: {target: this.element, count: children.length}});
     }
   }
 

src/intersection_controller.ts

@@ -29,8 +29,6 @@ export class IntersectionController extends BaseController {
       this.element as HTMLElement,
       "intersection:appear",
       {
-        cancelable: true,
-        bubbles: true,
         detail: {
           element: this.element,
         },
@@ -43,8 +41,6 @@ export class IntersectionController extends BaseController {
       this.element as HTMLElement,
       "intersection:disappear",
       {
-        cancelable: true,
-        bubbles: true,
         detail: {
           element: this.element,
         },

src/limited_selection_checkboxes_controller.ts

@@ -29,13 +29,13 @@ export class LimitedSelectionCheckboxesController extends BaseController {
     if (tickedInputs > this.maxValue) {
       event.preventDefault();
       target.checked = false;
-      target.dispatchEvent(new CustomEvent("change", {bubbles: true, cancelable: true}));
-      target.dispatchEvent(new CustomEvent("limited-selection:too-many", {bubbles: true, cancelable: true, detail: {target}}));
+      this.dispatch(target, "change");
+      this.dispatch(target, "limited-selection:too-many");
       if (this.hasErrorTarget) {
         this.errorTarget.innerHTML = this.messageValue;
       }
     } else {
-      target.dispatchEvent(new CustomEvent("limited-selection:selection", {bubbles: true, cancelable: true, detail: {target}}));
+      this.dispatch(target, "limited-selection:selection");
       if (this.hasErrorTarget) {
         this.errorTarget.innerHTML = "";
       }

src/password_confirm_controller.ts

@@ -30,12 +30,12 @@ export class PasswordConfirmController extends BaseController {
   private checkPasswordsMatch() {
     let element = this.element as HTMLElement;
     if (this.allPasswordsMatch()) {
-      element.dispatchEvent(new CustomEvent("password-confirm:match"));
+      this.dispatch(element, "password-confirm:match");
       if (this.hasErrorClass) {
         this.passwordTargets.forEach(el => el.classList.remove(this.errorClass));
       }
     } else {
-      element.dispatchEvent(new CustomEvent("password-confirm:no-match"));
+      this.dispatch(element, "password-confirm:no-match");
       if (this.hasErrorClass) {
         this.passwordTargets.forEach(el => el.classList.add(this.errorClass));
       }

src/teleport_controller.ts

@@ -26,14 +26,15 @@ export class TeleportController extends EphemeralController {
     if (event) {
       event.preventDefault();
     }
+    let element = this.element as HTMLElement;
     let destination = document.querySelector(this.targetValue);
 
     if (destination == null) {
-      this.element.dispatchEvent(new CustomEvent("teleport:error", {bubbles: true, cancelable: true}));
+      this.dispatch(element, "teleport:error");
       return;
     }
 
-    let copy = this.element.cloneNode(true) as HTMLElement;
+    let copy = element.cloneNode(true) as HTMLElement;
     this.cleanup(copy);
 
     switch (this.insertValue) {
@@ -59,7 +60,7 @@ export class TeleportController extends EphemeralController {
         throw new Error("`insert` value was not specified");
 
     }
-    this.element.remove();
+    element.remove();
   }
 
 }