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 | Bin 0 -> 250 bytes payment/amd/build/events.min.js.map | Bin 0 -> 1187 bytes payment/amd/build/gateways_modal.min.js | Bin 3507 -> 3556 bytes payment/amd/build/gateways_modal.min.js.map | Bin 9025 -> 9132 bytes payment/amd/build/modal_gateways.min.js | Bin 0 -> 1067 bytes payment/amd/build/modal_gateways.min.js.map | Bin 0 -> 5540 bytes 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, 177 insertions(+), 2 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 0000000000000000000000000000000000000000..6ca6dec092dc6c411ce25d51ecb5adf52f019a97 GIT binary patch literal 250 zcmY+9!HU8_5Jc~O#W;J35EIV{{(-WKuqRnUJJZTYGClP4WDUW8H|~n)r6`KxQDyPy zJgQ6^Vr&8o9eOFTpET-xukjLyC;O8hlQ-hXXRsJ`im0NnGotIy!x@bf_K)<%6p&@e zAlFTUaZ5I}sPnOhHeoeiT^BXnyO3I0_vEZvy#!-mGKjW%+q3M*Lff1`@E3+yJxcmo mGfHBwp2UehE6WcRDY3yVgy8(?d$(EtKPo!si*qbG2(ufeom%7o literal 0 HcmV?d00001 diff --git a/payment/amd/build/events.min.js.map b/payment/amd/build/events.min.js.map new file mode 100644 index 0000000000000000000000000000000000000000..4d0874ff078ad532ef02aa8dad7d31d35d8af65f GIT binary patch literal 1187 zcmaJ>VNcsI5dABseA&iAg5X=35TR?KQlVAaidE}`+~ksYbL`A^+I5KkzOxesAJ`&Q zO>E!0_s;L`G1#FtT*+W?76wMOIztl-z6Mbg8=b|tLupO)-2~slK(e~qY_!S{bGKHr zrs1-rnBe0i**&tdX;6b^&G@Ixgnp}H(_49kieD7ZkN|AuJ` zs(@Ria#}ft%GzcS$F={ClrH0qjQ#KVjEmNYU{qoEOyd9!s)dY6(3o>$HQ%^U}iL;Z`$ z9JuuCE7g#mir`4$o(ln6gw|luiqL1GlED3Bc{5urA-P+_eUhfh-Ew_Sr){NZ*Im5F z;&mf9DW%$KChdX9dx+anI=rEneN@WU8;?BT?%%{0#D-9gjy4jGz`2?Ab?>^x6KL3> zCX+k2k%gQc3$BqOp$ogDjg~C#o=j0~J`6e&*C% Iy1Dc82My1XIRF3v literal 0 HcmV?d00001 diff --git a/payment/amd/build/gateways_modal.min.js b/payment/amd/build/gateways_modal.min.js index 60b32130f11b56c9b8e35068305a712e473bec90..a2d21ee55adf183f8b3257bbf500b28f6ef18cde 100644 GIT binary patch delta 822 zcmZ`%&ubGw6lRlZn;(Le9*R{+YKc2AOjB*4WF2}C>qV&6f@m7cWOp{Z$?VK#cQ$DZ zdlW=LEprij@Y0(n=}r6}{1-e3{smHxPFhoXsF(M>_wnAFH{W}Qb3fXy^c|N1~FzYPvY1-Wku-$4pWEHf|b$x}Hf5uJ$uR z`-SWcZ5Oi#mqL?(6r{&xq56@%Z*-M8v3fN;X1e%vJ}?}0CYY-i6ARbaNfu>-TG3ajB!u+PN}*!ifY3YavUI6*h##>?=lfn zDE?(&jQJW*7^`uMAX&vtx>*>RLhi@mm78jTyYEiiHF2mOO>RAoOdB%f5J_Sx5eY=X@vJ5&$tyZTawZS`d8fzeh6Q_S$ybgq=`Vy2dJ>*cOK zBmH*iR<#z7#gce9KE_(C_H*kcInG+HCF86fPLL-9X7zERjQqS2s)hVYR&QHv=k1y3 tKUboT@~;YFB#_T(r6SbpLd6j3OX0J&jpD4fz2ftXsH;!KvN|e$`wR6?6|4XN delta 777 zcmZ`%&ubGw6lT+?ZGM0U55@G5Y7H|o3~5m)S%*?$>!ny|s|dBqba#^MW_BjoncW(~ zq6k7Sie)bT0fIL#r6;|4_25NM9{m@*DL84Y_Mn$}^L_8*@!t2|x5{DV<*S3Ym4mM{ z2S1+GLa+;6kA%R3Zp(%iblWzxp&Qr`KsTjvH8MwzbV73_x8QWmyhM;%Oke@jxOH(1*a1cAV9rZ=S20B+ZJpewNI$UR^`=I7a~HtjQ|V>z&ljt9eN z+$(^YN43|nz74Z%ES{cLG-c?IS2i^=YnKS~^xW2F4|piVKGjq)jcFtkp-&NB630w< zgVU6ZdQ#ZV|HTD93JsiGKQC}6@R@BdXxVcZ24;V9%?ZrsNj`TxEgbKb;$F;BTkPi8 zLpuRtX7N6yJF4anDvt&W?4_7W S7o}7~}H?GpGtn}o=m)xX+~=R4Mr8% zYr4CW4`h3PR4D?q8D#*gj8*_xPsAjTQ1s}`VOM?y080vjT;<77jBka7=sC7Z4y$lA zd=d5sDVzKyOtm$?tBic+u{@b7#x0Ri6?RHqENesIe>f5?!!B|Zt>Z5@=5UC_*1Lhy zuh9xUgad3-H7mg3cai3d<8QQ&Td+PKL`r0XtI-5W^LF%&*gPks5^3bD_>F(ons+%v1kiADPP7VhZ zNRR8PV-R*IKXP0YAzOBG-8>{c{Axtp7c!3*pt&~PahIdEyxILvV>llykfvz%7c}D5 zcMur4j`H**o{4~5W=YYIqbw~hF#1!;Th zQQFy=+1aIlR4Q1YfNKLu%`O!vyQ;KcWs)%qKiH)S$WxGiZ^2vwGT>H9TbWAEtkmk) zKi)Q0SBX>>4CB6%z}b;`VM39tZ`(ZjphL2Id}=k`pd&Q-uwy4nc`4- zU{8u@lE$5&oRuZAC)p5&`>>#gZ@V~}1$p}>NC$G#R@+Mr(e{`Fx0D-jIU_Mu@b56n zwQ_^E+-egQv&xtWnApd>aq)lx(@ZA4$EzHDA3Y6$Lq7`5z~1}qBTThIoQ}(&KDx8> zNpd>Rc3Ov9#<&C#F*8t>d;vW*HbHh*!m-Owm$M+1x?O+S2aKpbG+F z+zq}?QUJmsr`mN&#mYg!@ejb)HiY}09;Fh)TJWU$kCA3K@Yjh_7nr|@iTb||)DJ;P z+?}rbMC0L+Vti)TSM=ueT*T4xV{gE=MlFgShc~O$hee}X!{MIQwN%;TeiO~xXeAZR J8(OjY<|ix{e-{7% literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..ad605189e46e59bd55831d83e62676e0e73a9e9f GIT binary patch literal 5540 zcmd5=|5Mw_5&u`Np3GoUMJCYn2VUQscNW5SFt)KxQxYrdW=(u%!WVKSAC%#Hs$DdlZ-ANO_6X}H)-mJV# zJ$T#HzDrx5tyb(shH0UeL9AL<>lOY-It!M8?`5RTYB_nD>BzlTahBrsoD`M6)#$|A zMqsGknQN+6L7F97a3@TvL@n?#bBC@oA5UkXC)2Uxx+gc?%lUjf!hj=3jyv4Fv!-5w zn>1;i;m7wvLNULZxcJ#5I@8&9Lne%G@08ChiGmpM>KHI`Khp``N+^tV2!JYv=P$&-DOZ&Um3Y@hUu=PM7I3 z8gMQFMUII4K-52o3c6&syd!P!rX!d12)Zs0vtp-5+zVp++O_@)*C)&^iPPY62DCV{ z9CRJ)oMMDIhsg<%K2I7PSH!#_9rCTwM4o!4>7m=RK1lhE8B>SVWMm&w;AQ@Sl>(g+ z2u`d^G894lcEawKwbj`RtF93+v$-=OJMYBjid6#yJ8DW%;F~y-_HbpVX*zzt1;hyEcviV72 zJ^>)*5XaM4dS-ort8d8>LmGV`;LgTjU$HbT;7E>|k-nfbX66XK@udVN*Cd@oYflec zJTJbxBtG5p%Z9ekR1+Gam!t8`M1!)bhz65A*o_hM zs7J$ilX;wgH-kxg-n>OLrY}c>H;|Fn>`$!0$=HmB(LLm7e5|68b2Q@rDjFsL-%K#11`{X@s8k4U^9;%};l+!NPDG>^!E#G#XfTf#DiPUQiA*I?N{iD=Z*(bobcuVR znB=!%;EQ44t2kA{156r8*J>edjUo~`B^0v)g*esF%;k=~Ry9SHFNeTWicxnZUY&XcGpo6uwQoINJg|t2lS3P9HL|I~We; zSFk~x4(20wHWR1gsgPnKr}KexIh0c|xtvbMGuIYk1|Pv0tl2HZwMWu{<&^m+6#5OVq1$e0<^(W#5%J?3W$Fz^6uf` z!Cu8VCmwQu;-7YY0~%;~{rWlHle-FqR{M`$xz%Q#S@dc zqzL=<8rzK8f%Yd1;BW8lYp#;*9@3Ft333PSubPDBjL-eTO@Met7ZsukRloSYxYIQV($~R9dC?7f4wfd zkL%Xw(uX9~Xr7)6ndGg>JOYSW(`*sa!P}(lm#PiIKB07Hmhx91l@l)#KQuR8kAk{0 zToc&qMBH6a;s_NgY7Q%19QslP5{^`opLmV3)gxDxK_q4DQ(hepgT_Y>*v@b#S-jkS z;nkf{4TU!KiqN`O-*RslOVt zwcKpNE!77Ubb}aIu<5f)kW~=>)k1a^W%6!;8PXJYyKLFp`?ikT^{s64x~X0E?v|)F zn%&%6)-KPKC1{s5?4gvSwVEgXlY(roo*BE9kxckvSl-jfd}B?bvOI~K`f(~fk`nsvM!gZfxv@8^ NOT~_Ym_E2Z{u7t+vSk1O literal 0 HcmV?d00001 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 }} -- 2.17.1