Bug 1446158 - Create a handleEvent custom element mixin to forward events from handleEvent to on* methods. r=MattN

browser/components/payments/res/components/rich-select.js

@@ -2,6 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+import HandleEventMixin from "../mixins/HandleEventMixin.js";
 import ObservedPropertiesMixin from "../mixins/ObservedPropertiesMixin.js";
 import RichOption from "./rich-option.js";
 
@@ -13,7 +14,7 @@ import RichOption from "./rich-option.js";
  * Note: The only supported way to change the selected option is via the
  *       `value` setter.
  */
-export default class RichSelect extends ObservedPropertiesMixin(HTMLElement) {
+export default class RichSelect extends HandleEventMixin(ObservedPropertiesMixin(HTMLElement)) {
   static get observedAttributes() {
     return [
       "disabled",
@@ -57,15 +58,10 @@ export default class RichSelect extends ObservedPropertiesMixin(HTMLElement) {
     return this.popupBox.querySelector(`:scope > [value="${CSS.escape(value)}"]`);
   }
 
-  handleEvent(event) {
-    switch (event.type) {
-      case "change": {
-        // Since the render function depends on the popupBox's value, we need to
-        // re-render if the value changes.
-        this.render();
-        break;
-      }
-    }
+  onChange(event) {
+    // Since the render function depends on the popupBox's value, we need to
+    // re-render if the value changes.
+    this.render();
   }
 
   render() {

browser/components/payments/res/containers/address-form.js

@@ -7,6 +7,7 @@ import LabelledCheckbox from "../components/labelled-checkbox.js";
 import PaymentRequestPage from "../components/payment-request-page.js";
 import PaymentStateSubscriberMixin from "../mixins/PaymentStateSubscriberMixin.js";
 import paymentRequest from "../paymentRequest.js";
+import HandleEventMixin from "../mixins/HandleEventMixin.js";
 /* import-globals-from ../unprivileged-fallbacks.js */
 
 /**
@@ -20,7 +21,8 @@ import paymentRequest from "../paymentRequest.js";
  * as it will be much easier to share the logic once we switch to Fluent.
  */
 
-export default class AddressForm extends PaymentStateSubscriberMixin(PaymentRequestPage) {
+export default class AddressForm extends
+    HandleEventMixin(PaymentStateSubscriberMixin(PaymentRequestPage)) {
   constructor() {
     super();
 
@@ -216,32 +218,18 @@ export default class AddressForm extends PaymentStateSubscriberMixin(PaymentRequ
     this.updateSaveButtonState();
   }
 
-  handleEvent(event) {
-    switch (event.type) {
-      case "change": {
-        if (event.target.id == "country") {
-          this.updateRequiredState();
-        }
-        this.updateSaveButtonState();
-        break;
-      }
-      case "click": {
-        this.onClick(event);
-        break;
-      }
-      case "input": {
-        this.onInput(event);
-        break;
-      }
-      case "invalid": {
-        if (event.target instanceof HTMLFormElement) {
-          this.onInvalidForm(event);
-          break;
-        }
+  onChange(event) {
+    if (event.target.id == "country") {
+      this.updateRequiredState();
+    }
+    this.updateSaveButtonState();
+  }
 
-        this.onInvalidField(event);
-        break;
-      }
+  onInvalid(event) {
+    if (event.target instanceof HTMLFormElement) {
+      this.onInvalidForm(event);
+    } else {
+      this.onInvalidField(event);
     }
   }
 

browser/components/payments/res/containers/address-picker.js

@@ -6,6 +6,7 @@ import AddressForm from "./address-form.js";
 import AddressOption from "../components/address-option.js";
 import RichPicker from "./rich-picker.js";
 import paymentRequest from "../paymentRequest.js";
+import HandleEventMixin from "../mixins/HandleEventMixin.js";
 
 /**
  * <address-picker></address-picker>
@@ -13,7 +14,7 @@ import paymentRequest from "../paymentRequest.js";
  * <address-option> listening to savedAddresses & tempAddresses.
  */
 
-export default class AddressPicker extends RichPicker {
+export default class AddressPicker extends HandleEventMixin(RichPicker) {
   static get pickerAttributes() {
     return [
       "address-fields",
@@ -197,18 +198,6 @@ export default class AddressPicker extends RichPicker {
     }) || "";
   }
 
-  handleEvent(event) {
-    switch (event.type) {
-      case "change": {
-        this.onChange(event);
-        break;
-      }
-      case "click": {
-        this.onClick(event);
-      }
-    }
-  }
-
   onChange(event) {
     let [selectedKey, selectedLeaf] = this.selectedStateKey.split("|");
     if (!selectedKey) {

browser/components/payments/res/containers/basic-card-form.js

@@ -10,6 +10,7 @@ import LabelledCheckbox from "../components/labelled-checkbox.js";
 import PaymentRequestPage from "../components/payment-request-page.js";
 import PaymentStateSubscriberMixin from "../mixins/PaymentStateSubscriberMixin.js";
 import paymentRequest from "../paymentRequest.js";
+import HandleEventMixin from "../mixins/HandleEventMixin.js";
 
 /* import-globals-from ../unprivileged-fallbacks.js */
 
@@ -20,7 +21,8 @@ import paymentRequest from "../paymentRequest.js";
  * as it will be much easier to share the logic once we switch to Fluent.
  */
 
-export default class BasicCardForm extends PaymentStateSubscriberMixin(PaymentRequestPage) {
+export default class BasicCardForm extends
+    HandleEventMixin(PaymentStateSubscriberMixin(PaymentRequestPage)) {
   constructor() {
     super();
 
@@ -268,32 +270,6 @@ export default class BasicCardForm extends PaymentStateSubscriberMixin(PaymentRe
     this.updateSaveButtonState();
   }
 
-  handleEvent(event) {
-    switch (event.type) {
-      case "change": {
-        this.onChange(event);
-        break;
-      }
-      case "click": {
-        this.onClick(event);
-        break;
-      }
-      case "input": {
-        this.onInput(event);
-        break;
-      }
-      case "invalid": {
-        if (event.target instanceof HTMLFormElement) {
-          this.onInvalidForm(event);
-          break;
-        }
-
-        this.onInvalidField(event);
-        break;
-      }
-    }
-  }
-
   onChange(evt) {
     let ccType = this.form.querySelector("#cc-type");
     this.cscInput.setAttribute("card-type", ccType.value);
@@ -390,6 +366,14 @@ export default class BasicCardForm extends PaymentStateSubscriberMixin(PaymentRe
     this.updateSaveButtonState();
   }
 
+  onInvalid(event) {
+    if (event.target instanceof HTMLFormElement) {
+      this.onInvalidForm(event);
+    } else {
+      this.onInvalidField(event);
+    }
+  }
+
   /**
    * @param {Event} event - "invalid" event
    * Note: Keep this in-sync with the equivalent version in address-form.js

browser/components/payments/res/containers/completion-error-page.js

@@ -2,6 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+import HandleEventMixin from "../mixins/HandleEventMixin.js";
 import PaymentRequestPage from "../components/payment-request-page.js";
 import PaymentStateSubscriberMixin from "../mixins/PaymentStateSubscriberMixin.js";
 import paymentRequest from "../paymentRequest.js";
@@ -15,7 +16,8 @@ import paymentRequest from "../paymentRequest.js";
  * as it will be much easier to implement and share the logic once we switch to Fluent.
  */
 
-export default class CompletionErrorPage extends PaymentStateSubscriberMixin(PaymentRequestPage) {
+export default class CompletionErrorPage extends
+    HandleEventMixin(PaymentStateSubscriberMixin(PaymentRequestPage)) {
   constructor() {
     super();
 
@@ -80,16 +82,14 @@ export default class CompletionErrorPage extends PaymentStateSubscriberMixin(Pay
     this.suggestionsList.appendChild(suggestionsFragment);
   }
 
-  handleEvent(event) {
-    if (event.type == "click") {
-      switch (event.target) {
-        case this.doneButton: {
-          this.onDoneButtonClick(event);
-          break;
-        }
-        default: {
-          throw new Error("Unexpected click target");
-        }
+  onClick(event) {
+    switch (event.target) {
+      case this.doneButton: {
+        this.onDoneButtonClick(event);
+        break;
+      }
+      default: {
+        throw new Error("Unexpected click target");
       }
     }
   }

browser/components/payments/res/containers/payment-dialog.js

@@ -2,6 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+import HandleEventMixin from "../mixins/HandleEventMixin.js";
 import PaymentStateSubscriberMixin from "../mixins/PaymentStateSubscriberMixin.js";
 import paymentRequest from "../paymentRequest.js";
 
@@ -26,7 +27,8 @@ import "./shipping-option-picker.js";
  * being exported once tests stop depending on it.
  */
 
-export default class PaymentDialog extends PaymentStateSubscriberMixin(HTMLElement) {
+export default class PaymentDialog extends
+    HandleEventMixin(PaymentStateSubscriberMixin(HTMLElement)) {
   constructor() {
     super();
     this._template = document.getElementById("payment-dialog-template");
@@ -77,22 +79,20 @@ export default class PaymentDialog extends PaymentStateSubscriberMixin(HTMLEleme
     super.disconnectedCallback();
   }
 
-  handleEvent(event) {
-    if (event.type == "click") {
-      switch (event.currentTarget) {
-        case this._viewAllButton:
-          let orderDetailsShowing = !this.requestStore.getState().orderDetailsShowing;
-          this.requestStore.setState({ orderDetailsShowing });
-          break;
-        case this._payButton:
-          this.pay();
-          break;
-        case this._manageText:
-          if (event.target instanceof HTMLAnchorElement) {
-            this.openPreferences(event);
-          }
-          break;
-      }
+  onClick(event) {
+    switch (event.currentTarget) {
+      case this._viewAllButton:
+        let orderDetailsShowing = !this.requestStore.getState().orderDetailsShowing;
+        this.requestStore.setState({ orderDetailsShowing });
+        break;
+      case this._payButton:
+        this.pay();
+        break;
+      case this._manageText:
+        if (event.target instanceof HTMLAnchorElement) {
+          this.openPreferences(event);
+        }
+        break;
     }
   }
 

browser/components/payments/res/containers/payment-method-picker.js

@@ -4,8 +4,10 @@
 
 import BasicCardOption from "../components/basic-card-option.js";
 import CscInput from "../components/csc-input.js";
+import HandleEventMixin from "../mixins/HandleEventMixin.js";
 import RichPicker from "./rich-picker.js";
 import paymentRequest from "../paymentRequest.js";
+
 /* import-globals-from ../unprivileged-fallbacks.js */
 
 /**
@@ -14,7 +16,7 @@ import paymentRequest from "../paymentRequest.js";
  * <basic-card-option> listening to savedBasicCards.
  */
 
-export default class PaymentMethodPicker extends RichPicker {
+export default class PaymentMethodPicker extends HandleEventMixin(RichPicker) {
   constructor() {
     super();
     this.dropdown.setAttribute("option-type", "basic-card-option");
@@ -115,18 +117,12 @@ export default class PaymentMethodPicker extends RichPicker {
     return this.getAttribute("selected-state-key");
   }
 
-  handleEvent(event) {
-    switch (event.type) {
-      case "input":
-      case "change": {
-        this.onInputOrChange(event);
-        break;
-      }
-      case "click": {
-        this.onClick(event);
-        break;
-      }
-    }
+  onInput(event) {
+    this.onInputOrChange(event);
+  }
+
+  onChange(event) {
+    this.onInputOrChange(event);
   }
 
   onInputOrChange({currentTarget}) {

browser/components/payments/res/containers/shipping-option-picker.js

@@ -4,6 +4,7 @@
 
 import RichPicker from "./rich-picker.js";
 import ShippingOption from "../components/shipping-option.js";
+import HandleEventMixin from "../mixins/HandleEventMixin.js";
 
 /**
  * <shipping-option-picker></shipping-option-picker>
@@ -11,7 +12,7 @@ import ShippingOption from "../components/shipping-option.js";
  * <option> listening to shippingOptions.
  */
 
-export default class ShippingOptionPicker extends RichPicker {
+export default class ShippingOptionPicker extends HandleEventMixin(RichPicker) {
   constructor() {
     super();
     this.dropdown.setAttribute("option-type", "shipping-option");
@@ -55,15 +56,6 @@ export default class ShippingOptionPicker extends RichPicker {
     }
   }
 
-  handleEvent(event) {
-    switch (event.type) {
-      case "change": {
-        this.onChange(event);
-        break;
-      }
-    }
-  }
-
   onChange(event) {
     let selectedOptionId = this.dropdown.value;
     this.requestStore.setState({

browser/components/payments/res/mixins/HandleEventMixin.js

@@ -0,0 +1,28 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/**
+ * A mixin to forward events to on* methods if defined.
+ *
+ * @param {string} superclass The class to extend.
+ * @returns {class}
+ */
+export default function HandleEventMixin(superclass) {
+  return class HandleEvent extends superclass {
+    handleEvent(evt) {
+      function capitalize(str) {
+        return str.charAt(0).toUpperCase() + str.slice(1);
+      }
+      if (super.handleEvent) {
+        super.handleEvent(evt);
+      }
+      // Check whether event name is a defined function in object.
+      let fn = "on" + capitalize(evt.type);
+      if (this[fn] && typeof(this[fn]) === "function") {
+        return this[fn](evt);
+      }
+      return null;
+    }
+  };
+}