From b23dcc37f2445933cc4df48410a4faed112f8f72 Mon Sep 17 00:00:00 2001 From: Shamim Rezaie Date: Wed, 15 Jan 2020 22:48:26 +1100 Subject: [PATCH] MDL-69166 core_payment: Use a custom modal type for gateway selector --- payment/amd/build/events.min.js | 2 + payment/amd/build/events.min.js.map | 1 + payment/amd/build/gateways_modal.min.js | 2 +- payment/amd/build/gateways_modal.min.js.map | 2 +- payment/amd/build/modal_gateways.min.js | 2 + payment/amd/build/modal_gateways.min.js.map | 1 + payment/amd/src/events.js | 27 ++++++ payment/amd/src/gateways_modal.js | 6 +- payment/amd/src/modal_gateways.js | 101 ++++++++++++++++++++ payment/templates/modal_gateways.mustache | 45 +++++++++ 10 files changed, 185 insertions(+), 4 deletions(-) create mode 100644 payment/amd/build/events.min.js create mode 100644 payment/amd/build/events.min.js.map create mode 100644 payment/amd/build/modal_gateways.min.js create mode 100644 payment/amd/build/modal_gateways.min.js.map create mode 100644 payment/amd/src/events.js create mode 100644 payment/amd/src/modal_gateways.js create mode 100644 payment/templates/modal_gateways.mustache diff --git a/payment/amd/build/events.min.js b/payment/amd/build/events.min.js new file mode 100644 index 00000000000..6ca6dec092d --- /dev/null +++ b/payment/amd/build/events.min.js @@ -0,0 +1,2 @@ +define ("core_payment/events",["exports"],function(a){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.default=void 0;a.default={proceed:"core_payment-modal_gateways:proceed"};return a.default}); +//# sourceMappingURL=events.min.js.map diff --git a/payment/amd/build/events.min.js.map b/payment/amd/build/events.min.js.map new file mode 100644 index 00000000000..4d0874ff078 --- /dev/null +++ b/payment/amd/build/events.min.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../src/events.js"],"names":["proceed"],"mappings":"+IAwBe,CACXA,OAAO,CAAE,qCADE,C","sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see .\n\n/**\n * Contain the events the payment modal can fire.\n *\n * @module core_payment/events\n * @package core_payment\n * @copyright 2020 Shamim Rezaie \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nexport default {\n proceed: 'core_payment-modal_gateways:proceed',\n};\n"],"file":"events.min.js"} \ No newline at end of file diff --git a/payment/amd/build/gateways_modal.min.js b/payment/amd/build/gateways_modal.min.js index 60b32130f11..a2d21ee55ad 100644 --- a/payment/amd/build/gateways_modal.min.js +++ b/payment/amd/build/gateways_modal.min.js @@ -1,2 +1,2 @@ -define ("core_payment/gateways_modal",["exports","core/modal_factory","core/templates","core/str","./repository","./selectors","core/modal_events","core/toast","core/notification"],function(a,b,c,d,e,f,g,h,i){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.registerEventListeners=a.registerEventListenersBySelector=void 0;b=j(b);c=j(c);f=j(f);g=j(g);i=j(i);var m="undefined"!=typeof window?window:"undefined"!=typeof self?self:"undefined"!=typeof global?global:{};function j(a){return a&&a.__esModule?a:{default:a}}function k(a,b,c,d,e,f,g){try{var h=a[f](g),i=h.value}catch(a){c(a);return}if(h.done){b(i)}else{Promise.resolve(i).then(d,e)}}function l(a){return function(){var b=this,c=arguments;return new Promise(function(d,e){var h=a.apply(b,c);function f(a){k(h,d,e,f,g,"next",a)}function g(a){k(h,d,e,f,g,"throw",a)}f(void 0)})}}a.registerEventListenersBySelector=function registerEventListenersBySelector(a){document.querySelectorAll(a).forEach(function(a){n(a)})};var n=function(a){a.addEventListener("click",function(b){b.preventDefault();o(a,{focusOnClose:b.target})})};a.registerEventListeners=n;var o=function(){var a=l(regeneratorRuntime.mark(function a(j){var k,l,m,n,o,q,r,s,t,u,v=arguments;return regeneratorRuntime.wrap(function(a){while(1){switch(a.prev=a.next){case 0:k=1.\n\n/**\n * Contain the logic for the gateways modal.\n *\n * @module core_payment/gateways_modal\n * @package core_payment\n * @copyright 2019 Shamim Rezaie \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport ModalFactory from 'core/modal_factory';\nimport Templates from 'core/templates';\nimport {get_string as getString} from 'core/str';\nimport {getGatewaysSupportingCurrency} from './repository';\nimport Selectors from './selectors';\nimport ModalEvents from 'core/modal_events';\nimport {add as addToast, addToastRegion} from 'core/toast';\nimport Notification from 'core/notification';\n\n/**\n * Register event listeners for the module.\n *\n * @param {string} nodeSelector The root to listen to.\n */\nexport const registerEventListenersBySelector = (nodeSelector) => {\n document.querySelectorAll(nodeSelector).forEach((element) => {\n registerEventListeners(element);\n });\n};\n\n/**\n * Register event listeners for the module.\n *\n * @param {HTMLElement} rootNode The root to listen to.\n */\nexport const registerEventListeners = (rootNode) => {\n rootNode.addEventListener('click', (e) => {\n e.preventDefault();\n show(rootNode, {focusOnClose: e.target});\n });\n};\n\n/**\n * Shows the gateway selector modal.\n *\n * @param {HTMLElement} rootNode\n * @param {Object} options - Additional options\n * @param {HTMLElement} options.focusOnClose The element to focus on when the modal is closed.\n */\nconst show = async(rootNode, {\n focusOnClose = null,\n} = {}) => {\n const modal = await ModalFactory.create({\n type: ModalFactory.types.SAVE_CANCEL,\n title: await getString('selectpaymenttype', 'core_payment'),\n body: await Templates.render('core_payment/gateways_modal', {}),\n });\n\n addToastRegion(modal.getRoot()[0]);\n\n modal.show();\n\n modal.getRoot().on(ModalEvents.hidden, () => {\n // Destroy when hidden.\n modal.destroy();\n try {\n focusOnClose.focus();\n } catch (e) {\n // eslint-disable-line\n }\n });\n\n modal.getRoot().on(ModalEvents.save, (e) => {\n const root = modal.getRoot()[0];\n const gateway = (root.querySelector(Selectors.values.gateway) || {value: ''}).value;\n\n if (gateway) {\n processPayment(\n gateway,\n rootNode.dataset.amount,\n rootNode.dataset.currency,\n rootNode.dataset.component,\n rootNode.dataset.componentid,\n rootNode.dataset.description,\n ({success, message = ''}) => {\n modal.hide();\n if (success) {\n Notification.addNotification({\n message: message,\n type: 'success',\n });\n location.reload();\n } else {\n Notification.alert('', message);\n }\n },\n );\n } else {\n // We cannot use await in the following line.\n // The reason is that we are preventing the default action of the save event being triggered,\n // therefore we cannot define the event handler function asynchronous.\n getString('nogatewayselected', 'core_payment').then(message => addToast(message));\n }\n\n e.preventDefault();\n });\n\n const currency = rootNode.dataset.currency;\n const gateways = await getGatewaysSupportingCurrency(currency);\n const context = {\n gateways\n };\n\n const {html, js} = await Templates.renderForPromise('core_payment/gateways', context);\n Templates.replaceNodeContents(modal.getRoot().find(Selectors.regions.gatewaysContainer), html, js);\n};\n\n/**\n * Process payment using the selected gateway.\n *\n * @param {string} gateway The gateway to be used for payment\n * @param {number} amount Amount of payment\n * @param {string} currency The currency in the three-character ISO-4217 format\n * @param {string} component Name of the component that the componentid belongs to\n * @param {number} componentid An internal identifier that is used by the component\n * @param {string} description Description of the payment\n * @param {processPaymentCallback} callback The callback function to call when processing is finished\n * @returns {Promise}\n */\nconst processPayment = async(gateway, amount, currency, component, componentid, description, callback) => {\n const paymentMethod = await import(`pg_${gateway}/gateways_modal`);\n\n paymentMethod.process(amount, currency, component, componentid, description, callback);\n};\n\n/**\n * The callback definition for processPayment.\n *\n * @callback processPaymentCallback\n * @param {bool} success\n * @param {string} message\n */\n"],"file":"gateways_modal.min.js"} \ No newline at end of file +{"version":3,"sources":["../src/gateways_modal.js"],"names":["registerEventListenersBySelector","nodeSelector","document","querySelectorAll","forEach","element","registerEventListeners","rootNode","addEventListener","e","preventDefault","show","focusOnClose","target","ModalFactory","ModalGateways","TYPE","Templates","render","type","title","body","create","modal","getRoot","on","ModalEvents","hidden","destroy","focus","PaymentEvents","proceed","root","gateway","querySelector","Selectors","values","value","processPayment","dataset","amount","currency","component","componentid","description","success","message","hide","Notification","addNotification","location","reload","alert","then","gateways","context","renderForPromise","html","js","replaceNodeContents","find","regions","gatewaysContainer","callback","paymentMethod","process"],"mappings":"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","sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see .\n\n/**\n * Contain the logic for the gateways modal.\n *\n * @module core_payment/gateways_modal\n * @package core_payment\n * @copyright 2019 Shamim Rezaie \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport ModalFactory from 'core/modal_factory';\nimport Templates from 'core/templates';\nimport {get_string as getString} from 'core/str';\nimport {getGatewaysSupportingCurrency} from './repository';\nimport Selectors from './selectors';\nimport ModalEvents from 'core/modal_events';\nimport PaymentEvents from 'core_payment/events';\nimport {add as addToast, addToastRegion} from 'core/toast';\nimport Notification from 'core/notification';\nimport ModalGateways from './modal_gateways';\n\n/**\n * Register event listeners for the module.\n *\n * @param {string} nodeSelector The root to listen to.\n */\nexport const registerEventListenersBySelector = (nodeSelector) => {\n document.querySelectorAll(nodeSelector).forEach((element) => {\n registerEventListeners(element);\n });\n};\n\n/**\n * Register event listeners for the module.\n *\n * @param {HTMLElement} rootNode The root to listen to.\n */\nexport const registerEventListeners = (rootNode) => {\n rootNode.addEventListener('click', (e) => {\n e.preventDefault();\n show(rootNode, {focusOnClose: e.target});\n });\n};\n\n/**\n * Shows the gateway selector modal.\n *\n * @param {HTMLElement} rootNode\n * @param {Object} options - Additional options\n * @param {HTMLElement} options.focusOnClose The element to focus on when the modal is closed.\n */\nconst show = async(rootNode, {\n focusOnClose = null,\n} = {}) => {\n const modal = await ModalFactory.create({\n type: ModalGateways.TYPE,\n title: await getString('selectpaymenttype', 'core_payment'),\n body: await Templates.render('core_payment/gateways_modal', {}),\n });\n\n addToastRegion(modal.getRoot()[0]);\n\n modal.show();\n\n modal.getRoot().on(ModalEvents.hidden, () => {\n // Destroy when hidden.\n modal.destroy();\n try {\n focusOnClose.focus();\n } catch (e) {\n // eslint-disable-line\n }\n });\n\n modal.getRoot().on(PaymentEvents.proceed, (e) => {\n const root = modal.getRoot()[0];\n const gateway = (root.querySelector(Selectors.values.gateway) || {value: ''}).value;\n\n if (gateway) {\n processPayment(\n gateway,\n rootNode.dataset.amount,\n rootNode.dataset.currency,\n rootNode.dataset.component,\n rootNode.dataset.componentid,\n rootNode.dataset.description,\n ({success, message = ''}) => {\n modal.hide();\n if (success) {\n Notification.addNotification({\n message: message,\n type: 'success',\n });\n location.reload();\n } else {\n Notification.alert('', message);\n }\n },\n );\n } else {\n // We cannot use await in the following line.\n // The reason is that we are preventing the default action of the save event being triggered,\n // therefore we cannot define the event handler function asynchronous.\n getString('nogatewayselected', 'core_payment').then(message => addToast(message));\n }\n\n e.preventDefault();\n });\n\n const currency = rootNode.dataset.currency;\n const gateways = await getGatewaysSupportingCurrency(currency);\n const context = {\n gateways\n };\n\n const {html, js} = await Templates.renderForPromise('core_payment/gateways', context);\n Templates.replaceNodeContents(modal.getRoot().find(Selectors.regions.gatewaysContainer), html, js);\n};\n\n/**\n * Process payment using the selected gateway.\n *\n * @param {string} gateway The gateway to be used for payment\n * @param {number} amount Amount of payment\n * @param {string} currency The currency in the three-character ISO-4217 format\n * @param {string} component Name of the component that the componentid belongs to\n * @param {number} componentid An internal identifier that is used by the component\n * @param {string} description Description of the payment\n * @param {processPaymentCallback} callback The callback function to call when processing is finished\n * @returns {Promise}\n */\nconst processPayment = async(gateway, amount, currency, component, componentid, description, callback) => {\n const paymentMethod = await import(`pg_${gateway}/gateways_modal`);\n\n paymentMethod.process(amount, currency, component, componentid, description, callback);\n};\n\n/**\n * The callback definition for processPayment.\n *\n * @callback processPaymentCallback\n * @param {bool} success\n * @param {string} message\n */\n"],"file":"gateways_modal.min.js"} \ No newline at end of file diff --git a/payment/amd/build/modal_gateways.min.js b/payment/amd/build/modal_gateways.min.js new file mode 100644 index 00000000000..cf50a3a847a --- /dev/null +++ b/payment/amd/build/modal_gateways.min.js @@ -0,0 +1,2 @@ +define ("core_payment/modal_gateways",["jquery","core/notification","core/custom_interaction_events","core/modal","core/modal_events","core_payment/events","core/modal_registry"],function(a,b,c,d,f,g,h){var i=!1,j={PROCEED_BUTTON:"[data-action=\"proceed\"]",CANCEL_BUTTON:"[data-action=\"cancel\"]"},k=function(a){d.call(this,a)};k.TYPE="core_payment-modal_gateways";k.prototype=Object.create(d.prototype);k.prototype.constructor=k;k.prototype.registerEventListeners=function(){d.prototype.registerEventListeners.call(this);this.getModal().on(c.events.activate,j.PROCEED_BUTTON,function(b,c){var d=a.Event(g.proceed);this.getRoot().trigger(d,this);if(!d.isDefaultPrevented()){this.hide();c.originalEvent.preventDefault()}}.bind(this));this.getModal().on(c.events.activate,j.CANCEL_BUTTON,function(b,c){var d=a.Event(f.cancel);this.getRoot().trigger(d,this);if(!d.isDefaultPrevented()){this.hide();c.originalEvent.preventDefault()}}.bind(this))};if(!i){h.register(k.TYPE,k,"core_payment/modal_gateways");i=!0}return k}); +//# sourceMappingURL=modal_gateways.min.js.map diff --git a/payment/amd/build/modal_gateways.min.js.map b/payment/amd/build/modal_gateways.min.js.map new file mode 100644 index 00000000000..ad605189e46 --- /dev/null +++ b/payment/amd/build/modal_gateways.min.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../src/modal_gateways.js"],"names":["define","$","Notification","CustomEvents","Modal","ModalEvents","PaymentEvents","ModalRegistry","registered","SELECTORS","PROCEED_BUTTON","CANCEL_BUTTON","ModalGateways","root","call","TYPE","prototype","Object","create","constructor","registerEventListeners","getModal","on","events","activate","e","data","proceedEvent","Event","proceed","getRoot","trigger","isDefaultPrevented","hide","originalEvent","preventDefault","bind","cancelEvent","cancel","register"],"mappings":"AAwBAA,OAAM,+BAAC,CACH,QADG,CAEH,mBAFG,CAGH,gCAHG,CAIH,YAJG,CAKH,mBALG,CAMH,qBANG,CAOH,qBAPG,CAAD,CASN,SACIC,CADJ,CAEIC,CAFJ,CAGIC,CAHJ,CAIIC,CAJJ,CAKIC,CALJ,CAMIC,CANJ,CAOIC,CAPJ,CAQE,IAEMC,CAAAA,CAAU,GAFhB,CAGMC,CAAS,CAAG,CACZC,cAAc,CAAE,2BADJ,CAEZC,aAAa,CAAE,0BAFH,CAHlB,CAaMC,CAAa,CAAG,SAASC,CAAT,CAAe,CAC/BT,CAAK,CAACU,IAAN,CAAW,IAAX,CAAiBD,CAAjB,CACH,CAfH,CAiBED,CAAa,CAACG,IAAd,CAAqB,6BAArB,CACAH,CAAa,CAACI,SAAd,CAA0BC,MAAM,CAACC,MAAP,CAAcd,CAAK,CAACY,SAApB,CAA1B,CACAJ,CAAa,CAACI,SAAd,CAAwBG,WAAxB,CAAsCP,CAAtC,CAOAA,CAAa,CAACI,SAAd,CAAwBI,sBAAxB,CAAiD,UAAW,CAExDhB,CAAK,CAACY,SAAN,CAAgBI,sBAAhB,CAAuCN,IAAvC,CAA4C,IAA5C,EAEA,KAAKO,QAAL,GAAgBC,EAAhB,CAAmBnB,CAAY,CAACoB,MAAb,CAAoBC,QAAvC,CAAiDf,CAAS,CAACC,cAA3D,CAA2E,SAASe,CAAT,CAAYC,CAAZ,CAAkB,CACzF,GAAIC,CAAAA,CAAY,CAAG1B,CAAC,CAAC2B,KAAF,CAAQtB,CAAa,CAACuB,OAAtB,CAAnB,CACA,KAAKC,OAAL,GAAeC,OAAf,CAAuBJ,CAAvB,CAAqC,IAArC,EAEA,GAAI,CAACA,CAAY,CAACK,kBAAb,EAAL,CAAwC,CACpC,KAAKC,IAAL,GACAP,CAAI,CAACQ,aAAL,CAAmBC,cAAnB,EACH,CACJ,CAR0E,CAQzEC,IARyE,CAQpE,IARoE,CAA3E,EAUA,KAAKf,QAAL,GAAgBC,EAAhB,CAAmBnB,CAAY,CAACoB,MAAb,CAAoBC,QAAvC,CAAiDf,CAAS,CAACE,aAA3D,CAA0E,SAASc,CAAT,CAAYC,CAAZ,CAAkB,CACxF,GAAIW,CAAAA,CAAW,CAAGpC,CAAC,CAAC2B,KAAF,CAAQvB,CAAW,CAACiC,MAApB,CAAlB,CACA,KAAKR,OAAL,GAAeC,OAAf,CAAuBM,CAAvB,CAAoC,IAApC,EAEA,GAAI,CAACA,CAAW,CAACL,kBAAZ,EAAL,CAAuC,CACnC,KAAKC,IAAL,GACAP,CAAI,CAACQ,aAAL,CAAmBC,cAAnB,EACH,CACJ,CARyE,CAQxEC,IARwE,CAQnE,IARmE,CAA1E,CASH,CAvBD,CA2BA,GAAI,CAAC5B,CAAL,CAAiB,CACbD,CAAa,CAACgC,QAAd,CAAuB3B,CAAa,CAACG,IAArC,CAA2CH,CAA3C,CAA0D,6BAA1D,EACAJ,CAAU,GACb,CAED,MAAOI,CAAAA,CACV,CA5EK,CAAN","sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see .\n\n/**\n * Contain the logic for the gateways modal: A modal with proceed and cancel buttons.\n *\n * @module core_payment/modal_gateways\n * @package core_payment\n * @copyright 2020 Shamim Rezaie \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\ndefine([\n 'jquery',\n 'core/notification',\n 'core/custom_interaction_events',\n 'core/modal',\n 'core/modal_events',\n 'core_payment/events',\n 'core/modal_registry'\n],\nfunction(\n $,\n Notification,\n CustomEvents,\n Modal,\n ModalEvents,\n PaymentEvents,\n ModalRegistry\n) {\n\n var registered = false;\n var SELECTORS = {\n PROCEED_BUTTON: '[data-action=\"proceed\"]',\n CANCEL_BUTTON: '[data-action=\"cancel\"]',\n };\n\n /**\n * Constructor for the Modal.\n *\n * @param {object} root The root jQuery element for the modal\n */\n var ModalGateways = function(root) {\n Modal.call(this, root);\n };\n\n ModalGateways.TYPE = 'core_payment-modal_gateways';\n ModalGateways.prototype = Object.create(Modal.prototype);\n ModalGateways.prototype.constructor = ModalGateways;\n\n /**\n * Set up all of the event handling for the modal.\n *\n * @method registerEventListeners\n */\n ModalGateways.prototype.registerEventListeners = function() {\n // Apply parent event listeners.\n Modal.prototype.registerEventListeners.call(this);\n\n this.getModal().on(CustomEvents.events.activate, SELECTORS.PROCEED_BUTTON, function(e, data) {\n var proceedEvent = $.Event(PaymentEvents.proceed);\n this.getRoot().trigger(proceedEvent, this);\n\n if (!proceedEvent.isDefaultPrevented()) {\n this.hide();\n data.originalEvent.preventDefault();\n }\n }.bind(this));\n\n this.getModal().on(CustomEvents.events.activate, SELECTORS.CANCEL_BUTTON, function(e, data) {\n var cancelEvent = $.Event(ModalEvents.cancel);\n this.getRoot().trigger(cancelEvent, this);\n\n if (!cancelEvent.isDefaultPrevented()) {\n this.hide();\n data.originalEvent.preventDefault();\n }\n }.bind(this));\n };\n\n // Automatically register with the modal registry the first time this module is imported so that you can create modals\n // of this type using the modal factory.\n if (!registered) {\n ModalRegistry.register(ModalGateways.TYPE, ModalGateways, 'core_payment/modal_gateways');\n registered = true;\n }\n\n return ModalGateways;\n});\n"],"file":"modal_gateways.min.js"} \ No newline at end of file diff --git a/payment/amd/src/events.js b/payment/amd/src/events.js new file mode 100644 index 00000000000..bab2f69601c --- /dev/null +++ b/payment/amd/src/events.js @@ -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 . + +/** + * Contain the events the payment modal can fire. + * + * @module core_payment/events + * @package core_payment + * @copyright 2020 Shamim Rezaie + * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later + */ + +export default { + proceed: 'core_payment-modal_gateways:proceed', +}; diff --git a/payment/amd/src/gateways_modal.js b/payment/amd/src/gateways_modal.js index 1d299157dd5..01cf70b61dd 100644 --- a/payment/amd/src/gateways_modal.js +++ b/payment/amd/src/gateways_modal.js @@ -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 index 00000000000..d7d666187ec --- /dev/null +++ b/payment/amd/src/modal_gateways.js @@ -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 . + +/** + * 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 + * @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 index 00000000000..4d75ceaa452 --- /dev/null +++ b/payment/templates/modal_gateways.mustache @@ -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 . +}} +{{! + @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}} + + + {{/footer}} +{{/ core/modal }}