MDL-69166 core_payment: Use a custom modal type for gateway selector
authorShamim Rezaie <shamim@moodle.com>
Wed, 15 Jan 2020 11:48:26 +0000 (22:48 +1100)
committerShamim Rezaie <shamim@moodle.com>
Tue, 27 Oct 2020 03:37:28 +0000 (14:37 +1100)
payment/amd/build/events.min.js [new file with mode: 0644]
payment/amd/build/events.min.js.map [new file with mode: 0644]
payment/amd/build/gateways_modal.min.js
payment/amd/build/gateways_modal.min.js.map
payment/amd/build/modal_gateways.min.js [new file with mode: 0644]
payment/amd/build/modal_gateways.min.js.map [new file with mode: 0644]
payment/amd/src/events.js [new file with mode: 0644]
payment/amd/src/gateways_modal.js
payment/amd/src/modal_gateways.js [new file with mode: 0644]
payment/templates/modal_gateways.mustache [new file with mode: 0644]

diff --git a/payment/amd/build/events.min.js b/payment/amd/build/events.min.js
new file mode 100644 (file)
index 0000000..6ca6dec
Binary files /dev/null and b/payment/amd/build/events.min.js differ
diff --git a/payment/amd/build/events.min.js.map b/payment/amd/build/events.min.js.map
new file mode 100644 (file)
index 0000000..4d0874f
Binary files /dev/null and b/payment/amd/build/events.min.js.map differ
index 60b3213..a2d21ee 100644 (file)
Binary files a/payment/amd/build/gateways_modal.min.js and b/payment/amd/build/gateways_modal.min.js differ
index 35d4384..57e85ac 100644 (file)
Binary files a/payment/amd/build/gateways_modal.min.js.map and b/payment/amd/build/gateways_modal.min.js.map differ
diff --git a/payment/amd/build/modal_gateways.min.js b/payment/amd/build/modal_gateways.min.js
new file mode 100644 (file)
index 0000000..cf50a3a
Binary files /dev/null and b/payment/amd/build/modal_gateways.min.js differ
diff --git a/payment/amd/build/modal_gateways.min.js.map b/payment/amd/build/modal_gateways.min.js.map
new file mode 100644 (file)
index 0000000..ad60518
Binary files /dev/null and b/payment/amd/build/modal_gateways.min.js.map differ
diff --git a/payment/amd/src/events.js b/payment/amd/src/events.js
new file mode 100644 (file)
index 0000000..bab2f69
--- /dev/null
@@ -0,0 +1,27 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Contain the events the payment modal can fire.
+ *
+ * @module     core_payment/events
+ * @package    core_payment
+ * @copyright  2020 Shamim Rezaie <shamim@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+export default {
+    proceed: 'core_payment-modal_gateways:proceed',
+};
index 1d29915..01cf70b 100644 (file)
@@ -28,8 +28,10 @@ import {get_string as getString} from 'core/str';
 import {getGatewaysSupportingCurrency} from './repository';
 import Selectors from './selectors';
 import ModalEvents from 'core/modal_events';
+import PaymentEvents from 'core_payment/events';
 import {add as addToast, addToastRegion} from 'core/toast';
 import Notification from 'core/notification';
+import ModalGateways from './modal_gateways';
 
 /**
  * Register event listeners for the module.
@@ -65,7 +67,7 @@ const show = async(rootNode, {
     focusOnClose = null,
 } = {}) => {
     const modal = await ModalFactory.create({
-        type: ModalFactory.types.SAVE_CANCEL,
+        type: ModalGateways.TYPE,
         title: await getString('selectpaymenttype', 'core_payment'),
         body: await Templates.render('core_payment/gateways_modal', {}),
     });
@@ -84,7 +86,7 @@ const show = async(rootNode, {
         }
     });
 
-    modal.getRoot().on(ModalEvents.save, (e) => {
+    modal.getRoot().on(PaymentEvents.proceed, (e) => {
         const root = modal.getRoot()[0];
         const gateway = (root.querySelector(Selectors.values.gateway) || {value: ''}).value;
 
diff --git a/payment/amd/src/modal_gateways.js b/payment/amd/src/modal_gateways.js
new file mode 100644 (file)
index 0000000..d7d6661
--- /dev/null
@@ -0,0 +1,101 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Contain the logic for the gateways modal: A modal with proceed and cancel buttons.
+ *
+ * @module     core_payment/modal_gateways
+ * @package    core_payment
+ * @copyright  2020 Shamim Rezaie <shamim@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+define([
+    'jquery',
+    'core/notification',
+    'core/custom_interaction_events',
+    'core/modal',
+    'core/modal_events',
+    'core_payment/events',
+    'core/modal_registry'
+],
+function(
+    $,
+    Notification,
+    CustomEvents,
+    Modal,
+    ModalEvents,
+    PaymentEvents,
+    ModalRegistry
+) {
+
+    var registered = false;
+    var SELECTORS = {
+        PROCEED_BUTTON: '[data-action="proceed"]',
+        CANCEL_BUTTON: '[data-action="cancel"]',
+    };
+
+    /**
+     * Constructor for the Modal.
+     *
+     * @param {object} root The root jQuery element for the modal
+     */
+    var ModalGateways = function(root) {
+        Modal.call(this, root);
+    };
+
+    ModalGateways.TYPE = 'core_payment-modal_gateways';
+    ModalGateways.prototype = Object.create(Modal.prototype);
+    ModalGateways.prototype.constructor = ModalGateways;
+
+    /**
+     * Set up all of the event handling for the modal.
+     *
+     * @method registerEventListeners
+     */
+    ModalGateways.prototype.registerEventListeners = function() {
+        // Apply parent event listeners.
+        Modal.prototype.registerEventListeners.call(this);
+
+        this.getModal().on(CustomEvents.events.activate, SELECTORS.PROCEED_BUTTON, function(e, data) {
+            var proceedEvent = $.Event(PaymentEvents.proceed);
+            this.getRoot().trigger(proceedEvent, this);
+
+            if (!proceedEvent.isDefaultPrevented()) {
+                this.hide();
+                data.originalEvent.preventDefault();
+            }
+        }.bind(this));
+
+        this.getModal().on(CustomEvents.events.activate, SELECTORS.CANCEL_BUTTON, function(e, data) {
+            var cancelEvent = $.Event(ModalEvents.cancel);
+            this.getRoot().trigger(cancelEvent, this);
+
+            if (!cancelEvent.isDefaultPrevented()) {
+                this.hide();
+                data.originalEvent.preventDefault();
+            }
+        }.bind(this));
+    };
+
+    // Automatically register with the modal registry the first time this module is imported so that you can create modals
+    // of this type using the modal factory.
+    if (!registered) {
+        ModalRegistry.register(ModalGateways.TYPE, ModalGateways, 'core_payment/modal_gateways');
+        registered = true;
+    }
+
+    return ModalGateways;
+});
diff --git a/payment/templates/modal_gateways.mustache b/payment/templates/modal_gateways.mustache
new file mode 100644 (file)
index 0000000..4d75cea
--- /dev/null
@@ -0,0 +1,45 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core_payment/modal_gateways
+
+    Moodle modal template with save and cancel buttons.
+
+    The purpose of this template is to render a modal.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Context variables required for this template:
+    * title A cleaned string (use clean_text()) to display.
+    * body HTML content for the boday
+
+    Example context (json):
+    {
+        "title": "Example gateways modal",
+        "body": "Some example content for the body"
+    }
+}}
+{{< core/modal }}
+    {{$footer}}
+        <button type="button" class="btn btn-primary" data-action="proceed">{{#str}} proceed {{/str}}</button>
+        <button type="button" class="btn btn-secondary" data-action="cancel">{{#str}} cancel {{/str}}</button>
+    {{/footer}}
+{{/ core/modal }}