[FEATURE] Custom Event listeners

1drop · Sep 14, 2018 · 48ea44a · 48ea44a
1 parent ad78263
commit 48ea44a
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -72,6 +72,14 @@ Onedrop:
     includeJavascript: true
 ```
 
+## JS Events
+
+You can use 2 events to register you event listens.
+
+Before Send Ajax Form `Onedrop.AjaxForm:before`
+
+After render Ajax Form to HTML `Onedrop.AjaxForm:after`
+
 ### Form reload
 
 As the content of your form is being replaced by the confirmation message you usually want 

diff --git a/Resources/Private/TypeScript/form.ts b/Resources/Private/TypeScript/form.ts
@@ -7,7 +7,12 @@ 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');
 
+    /**
+     * @param {Element} element
+     */
     constructor(element: Element) {
         this._delegator = element;
         if (element.hasAttribute('data-ajax-uri')) {
@@ -22,7 +27,8 @@ class AjaxForm {
     }
 
     /**
-     *  Ajax helper to send only one simultaneous request
+     * Ajax helper to send only one simultaneous request
+     *
      * @param {FormData} formData
      * @param {Function} callback
      */
@@ -43,6 +49,7 @@ class AjaxForm {
     private handleResponse() {
         if (this._request.status >= 200 && this._request.status < 400) {
             this._delegator.innerHTML = this._request.response;
+            window.dispatchEvent(this._customEventAfter);
             this._form = <HTMLFormElement>this._delegator.querySelector('form');
             // another form step has been returned, so we keep handling the form
             if (this._form) {
@@ -63,6 +70,7 @@ class AjaxForm {
 
     /**
      * Capture the form submission and convert it to a ajax operation
+     *
      * @param {Event} e
      */
     private onFormSubmit(e: Event) {
@@ -72,6 +80,7 @@ class AjaxForm {
             formData.append(this._submitter.name, this._submitter.value);
             this._submitter = null;
         }
+        window.dispatchEvent(this._customEventBefore);
         this.ajax(formData, this.handleResponse.bind(this));
     }
 
@@ -95,7 +104,7 @@ class AjaxForm {
  * INITIALIZE ALL ELEMENTS
  */
 (function () {
-    document.addEventListener("DOMContentLoaded", function() {
+    document.addEventListener("DOMContentLoaded", function () {
         let ajaxForms = document.querySelectorAll('[data-ajax="ajax-form"]');
         for (let i = 0; i < ajaxForms.length; i++) {
             new AjaxForm(ajaxForms.item(i));

diff --git a/Resources/Private/tsconfig.json b/Resources/Private/tsconfig.json
@@ -9,7 +9,7 @@
         "target": "es5"
     },
     "files": [
-        "TypeScript/form"
+        "./TypeScript/form.ts"
     ],
     "compileOnSave": true
 }
diff --git a/Resources/Public/JavaScript/form.js b/Resources/Public/JavaScript/form.js
@@ -1,6 +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._delegator = element;
         if (element.hasAttribute('data-ajax-uri')) {
             this._formUri = element.getAttribute('data-ajax-uri');
@@ -27,6 +29,7 @@ var AjaxForm = (function () {
         var _this = this;
         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();
@@ -50,6 +53,7 @@ var AjaxForm = (function () {
             formData.append(this._submitter.name, this._submitter.value);
             this._submitter = null;
         }
+        window.dispatchEvent(this._customEventBefore);
         this.ajax(formData, this.handleResponse.bind(this));
     };
     AjaxForm.prototype.bindFormSubmitListener = function () {