Merge pull request #3 from beardcoder/master

[FEATURE] Pass form to custom event
1drop · Sep 27, 2018 · 123e5da · 123e5da
2 parents 34e77a2 + 7ceb2f6
commit 123e5da
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 12 deletions.
diff --git a/Resources/Private/TypeScript/form.ts b/Resources/Private/TypeScript/form.ts
@@ -7,13 +7,16 @@ class AjaxForm {
     private _form: HTMLFormElement;
     private _request: XMLHttpRequest;
     private _submitter: HTMLInputElement;
-    private _customEventBefore: Event = new Event('Onedrop.AjaxForm:before');
-    private _customEventAfter: Event = new Event('Onedrop.AjaxForm:after');
+    private readonly _customEventBefore: CustomEvent;
+    private readonly _customEventAfter: CustomEvent;
 
     /**
      * @param {Element} element
      */
     constructor(element: Element) {
+        this._customEventBefore = new CustomEvent('Onedrop.AjaxForm:before', {detail: element});
+        this._customEventAfter = new CustomEvent('Onedrop.AjaxForm:after', {detail: element});
+
         this._delegator = element;
         if (element.hasAttribute('data-ajax-uri')) {
             this._formUri = element.getAttribute('data-ajax-uri');

diff --git a/Resources/Public/JavaScript/form.esm.js b/Resources/Public/JavaScript/form.esm.js
@@ -13,20 +13,20 @@
  */
 export class AjaxForm {
     constructor(element) {
-        this._customEventBefore = new Event('Onedrop.AjaxForm:before');
-        this._customEventAfter = new Event('Onedrop.AjaxForm:after');
+        this._customEventBefore = new CustomEvent('Onedrop.AjaxForm:before', {detail: element});
+        this._customEventAfter = new CustomEvent('Onedrop.AjaxForm:after', {detail: element});
         this._delegator = element;
         if (element.hasAttribute('data-ajax-uri')) {
             this._formUri = element.getAttribute('data-ajax-uri');
         }
         this._form = element.querySelector('form');
         if (!this._form) {
             throw new Error('No form element found in ajax container');
-        }
-        else {
+        } else {
             this.bindFormSubmitListener();
         }
     }
+
     ajax(formData, callback) {
         if (this._request) {
             this._request.abort();
@@ -37,26 +37,26 @@ export class AjaxForm {
         this._request.onreadystatechange = callback;
         this._request.send(formData);
     }
+
     handleResponse() {
         if (this._request.status >= 200 && this._request.status < 400) {
             this._delegator.innerHTML = this._request.response;
             window.dispatchEvent(this._customEventAfter);
             this._form = this._delegator.querySelector('form');
             if (this._form) {
                 this.bindFormSubmitListener();
-            }
-            else {
+            } else {
                 if (this._request.response.indexOf('data-reset-form') > -1) {
                     window.setTimeout(() => {
                         this.ajax(null, this.handleResponse.bind(this));
                     }, 5000);
                 }
             }
-        }
-        else {
+        } else {
             console.error('Something went wrong with the ajax form request');
         }
     }
+
     onFormSubmit(e) {
         e.preventDefault();
         let formData = new FormData(this._form);
@@ -67,6 +67,7 @@ export class AjaxForm {
         window.dispatchEvent(this._customEventBefore);
         this.ajax(formData, this.handleResponse.bind(this));
     }
+
     bindFormSubmitListener() {
         this._form.addEventListener('submit', (e) => this.onFormSubmit(e));
         let submittingElements = this._form.querySelectorAll('button[type="submit"],input[type="submit"]');

diff --git a/Resources/Public/JavaScript/form.js b/Resources/Public/JavaScript/form.js
@@ -1,8 +1,8 @@
 'use strict';
 var AjaxForm = (function () {
     function AjaxForm(element) {
-        this._customEventBefore = new Event('Onedrop.AjaxForm:before');
-        this._customEventAfter = new Event('Onedrop.AjaxForm:after');
+        this._customEventBefore = new CustomEvent('Onedrop.AjaxForm:before', { detail: element });
+        this._customEventAfter = new CustomEvent('Onedrop.AjaxForm:after', { detail: element });
         this._delegator = element;
         if (element.hasAttribute('data-ajax-uri')) {
             this._formUri = element.getAttribute('data-ajax-uri');