From cd03a6fe8874572a4646748178a47b9aa0dcfea3 Mon Sep 17 00:00:00 2001 From: cescobedo Date: Mon, 28 Jan 2019 10:33:25 +0100 Subject: [PATCH] MDL-61575 message_notification: replace lp/dialogue with core/modal --- .../notification_processor_settings.min.js | Bin 1299 -> 3197 bytes ...ences_notifications_list_controller.min.js | Bin 2082 -> 2310 bytes .../build/preferences_processor_form.min.js | Bin 1087 -> 891 bytes .../src/notification_processor_settings.js | 294 +++++++++++++++--- ...eferences_notifications_list_controller.js | 42 ++- message/amd/src/preferences_processor_form.js | 15 +- .../templates/preferences_processor.mustache | 4 - 7 files changed, 293 insertions(+), 62 deletions(-) diff --git a/message/amd/build/notification_processor_settings.min.js b/message/amd/build/notification_processor_settings.min.js index 0bcc23609db8f476fceeca7fc7929d26bcf22ee1..ff35374437ce18b8eab8a14921c057c5c89f40f1 100644 GIT binary patch literal 3197 zcmbVPZBOGk5dJHWFO7xqEnkcB0oWp~v-JDm`U++>o5CUMVkcu}|i{brn3H(jy1 zPo(zDJf4|nUWg&dO7Ne&mw#)}A0GE2rQr|xBHz33%INO1R3=NZNSaKQ-C0yuMipUJ z8qhMLn-E^1G*u^1s95ICk5EIJq1hfT(K0Pi$9v{UU0Nf)WJMb#`3f}XKUtQc>Ex!LkD3WCaIf>of-(D>q z9&YdFUSnsYRRmR~^l2#zc=k|YalN=-ptbP+_U{gkTu^1;Z8RjH0nMFi^@bLAd>sr< zux%nDndiP)Wfhl<(_cZBgR;)^=4V}j{uYl8B8Aa>H_jR4Kp`4Qk*AlnG58E?H3f66 z6sEyv0<#+XFJcs@7P|5L6E!DxY0s^LpxGZyw8k;E?zd5tn1I2q zz@Y3aux;zlNX=D3ltmlv2~3xVDb7U21!@&1NH;`=35=!46vGvE0Z3(H{i>(Z1Y%&> z6z71N3)U;Uh?ax882oXy@cL54A00uxMCrm~u8BCSTCR)2hfS2qI!~h*g0_}v8`5MeB=g%9!P0A@IIRYH$y%fcRs>l z>G!9^V1MW-R(OeEouey3@Yn4`@O!uT;Pj}ubXYxK5w7d97y(PReTdfo5vVXLDE(0y ztct@6e6m8104OV8k9}9SoU_(Q1YIGXYi#$IN(zY2%@kWoZ$omYT7}DI>ON`I< zm{qOR+n7zg(twPnMr~J+#xS7v%&oF`)R}0MA@7<_F6eHg*t`!TJ|u$XTl;Q2w`q5e zn!fDYLpNCU21h!TN0OzrhWNoqQ#-AI7#9Vy2^Vs$?Y$Tg5#_3a%HZ_tXFEI368|_7 zD_LFTvZ{O!w~XGp$5@kt<1@=-DmH11#@0fMMPF-nA;9uVf^7k2rDAHhb7vZcRHSVo z4#UvnQm55?YvqBD%Y?qa#k+pQE}NJ>CC}{X%kz|FB38Jr^-Nu|Eqb;TWM*)v*_C1p z55-`-y`0RB4sAJsH#>oo8E!A^JQ5lT^$G_A#bfuj@4ald+api2x-vdYZ@iTPcj*mw z!i`MrlKmU#hl1ejZ=<(xn&EqeLefcroc3G3j2zwr0d+1Q|!7CdNcPIt=jq5>06-vO$+D=n9g$E9Ob#f|U+;)cid>^+2_O%WOBCmCCyZE8--d4D|&K~t6C zB2Cy4CT&!~c~4Z3RP8voOz^VATeTzGZ#$;AF0o+nE}%}f|16d0$T(Tf66ATHK|dl|H0|Kh r@AuQmt^Y!XruT3^jeaK!$sAPn6>ctyitDJhk5ydmrBWzBl8g+vUfXJ!0}8f^9FbSi4~}E`q3Uo)f$4 zbKwR)Vx&npu?P^GwD6$Eq75fEke~X>+xLN{xpFP$DZP&!EB%U9G)F$ixAYx6B(6M( zSEp~JYVYw~6@Tcf27w$ylQ1QB5|>&_juRJ37xf2)J?S${DwrFaO7DzOIy;%`=310T zzyzRy=!dXx)B0JZFvMB8kW4EQC)bUcMHw2Y8;4e^<$R%5D_0w}LcLxr9pP+~h7t6@ z7l&Z8Zd)KsTq+#!(R^i&2b^|5oOU28T8JSFQzk@&Op6JY>8fl36e}?g{y;wS zY?veYz!z{W{%OW%mEZjeZSa&oHFeV839gjIChdqIEP5VTuG+s61tDv(=?BS?y5nmy IOt|V0KN`fF1^@s6 delta 251 zcmZn@S|l)GxqPfnT4`Q#NoIbYMxsuVPO?slPO46tW_4L&kwUs{^<+mz(T$(%7#TAr z8#3hr$@xqkK=K7s0Au=OOJ)rqJBc|6%vNDF)U4IXn0$}f6v#JZ5o6cXNwrPX0I}PF z>UOeZ14&iZE+Dyq6{=?PAJ$r+>MAy6AUTh%kx^%|9lJb`9mg)qq?0_knq9^tT`wTW z-`O=d*gq&f*fk`?)6X4ba$ah=LYhX3rgf@baYlZ*hNe!kUVc$#dS+f?j%!(JUWr~o ZQ7VXbNli;E%_-5CJb|N#C8Ji;8UQkCPG$fA diff --git a/message/amd/build/preferences_processor_form.min.js b/message/amd/build/preferences_processor_form.min.js index 6964dfbb93256d5dbe75435d21fe255f5ba178ed..8ce9f05d0cab1fd808272cb62edc8127d1c94b4d 100644 GIT binary patch delta 87 zcmdnb@tbXefq1M=T4`Q#NoIbYMxsuVPO@foSz?hw%EYY2EI@YhWI;v)#-z!fjJjO4 p)1pw7==*@A-8A{1SF8v%rRX;Y4;9Yf(i1k->D#$g8a*iF}*^Ar_Mb>573+R z2)#g;It`^mmp8ok!S}wV@3ZISN^uAguOKxP>aFvH(Ez#Nx7ebmh8Lb2+mCQa$3sCCi@j(+t=2=o%eEAYD0c1>aahCIjOE_gR^Uf-ktt zt+qG * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later */ -define(['jquery', 'core/ajax', 'core/notification', 'core/fragment', 'core/templates', 'core/str', 'tool_lp/dialogue'], - function($, Ajax, Notification, Fragment, Templates, Str, Dialogue) { +define([ + 'jquery', + 'core/ajax', + 'core/str', + 'core/notification', + 'core/custom_interaction_events', + 'core/modal', + 'core/modal_registry', + 'core/fragment', + ], + function( + $, + Ajax, + Str, + Notification, + CustomEvents, + Modal, + ModalRegistry, + Fragment + ) { + var registered = false; var SELECTORS = { + SAVE_BUTTON: '[data-action="save"]', + CANCEL_BUTTON: '[data-action="cancel"]', PROCESSOR: '[data-processor-name]', PREFERENCE_ROW: '[data-region="preference-row"]', }; /** - * Constructor for the notification processor settings. + * Constructor for the Modal. * - * @param {object} element jQuery object root element of the processor + * @param {object} root The root jQuery element for the modal. */ - var NotificationProcessorSettings = function(element) { - this.root = $(element); - this.name = this.root.attr('data-name'); - this.userId = this.root.attr('data-user-id'); - this.contextId = this.root.attr('data-context-id'); + var NotificationProcessorSettings = function(root) { + Modal.call(this, root); + this.name = null; + this.userId = null; + this.contextId = null; + this.element = null; + this.saveButton = this.getFooter().find(SELECTORS.SAVE_BUTTON); + this.cancelButton = this.getFooter().find(SELECTORS.CANCEL_BUTTON); + }; + + NotificationProcessorSettings.TYPE = 'core_message-notification_processor_settings'; + NotificationProcessorSettings.prototype = Object.create(Modal.prototype); + NotificationProcessorSettings.prototype.constructor = NotificationProcessorSettings; + + /** + * Set the userid to the given value. + * + * @method setUserId + * @param {int} id The notification userid + */ + NotificationProcessorSettings.prototype.setUserId = function(id) { + this.userId = id; + }; + + /** + * Retrieve the current userid, if any. + * + * @method getUserId + * @return {int|null} The notification userid + */ + NotificationProcessorSettings.prototype.getUserId = function() { + return this.userId; + }; + + /** + * Set the object to the given value. + * + * @method setElement + * @param {object} element The notification node element. + */ + NotificationProcessorSettings.prototype.setElement = function(element) { + this.element = element; + }; + + /** + * Retrieve the current element, if any. + * + * @method getElement + * @return {object|null} The notification node element. + */ + NotificationProcessorSettings.prototype.getElement = function() { + return this.element; + }; + + /** + * Set the name to the given value. + * + * @method setName + * @param {string} name The notification name. + */ + NotificationProcessorSettings.prototype.setName = function(name) { + this.name = name; + }; + + /** + * Retrieve the current name, if any. + * + * @method getName + * @return {string|null} The notification name. + */ + NotificationProcessorSettings.prototype.getName = function() { + return this.name; + }; + /** + * Set the context id to the given value. + * + * @method setContextId + * @param {Number} id The notification context id + */ + NotificationProcessorSettings.prototype.setContextId = function(id) { + this.contextId = id; + }; + + /** + * Retrieve the current context id, if any. + * + * @method getContextId + * @return {Number|null} The notification context id + */ + NotificationProcessorSettings.prototype.getContextId = function() { + return this.contextId; + }; + + /** + * Get the form element from the modal. + * + * @method getForm + * @return {object} + */ + NotificationProcessorSettings.prototype.getForm = function() { + return this.getBody().find('form'); + }; + + /** + * Disable the buttons in the footer. + * + * @method disableButtons + */ + NotificationProcessorSettings.prototype.disableButtons = function() { + this.saveButton.prop('disabled', true); + this.cancelButton.prop('disabled', true); + }; + + /** + * Enable the buttons in the footer. + * + * @method enableButtons + */ + NotificationProcessorSettings.prototype.enableButtons = function() { + this.saveButton.prop('disabled', false); + this.cancelButton.prop('disabled', false); + }; + + /** + * Load the title for the modal to the appropriate value + * depending on message outputs. + * + * @method loadTitleContent + * @return {object} A promise resolved with the new title text. + */ + NotificationProcessorSettings.prototype.loadTitleContent = function() { + this.titlePromise = Str.get_string('processorsettings', 'message'); + this.setTitle(this.titlePromise); + + return this.titlePromise; + }; + + /** + * Load the body for the modal to the appropriate value + * depending on message outputs. + * + * @method loadBodyContent + * @return {object} A promise resolved with the fragment html and js from + */ + NotificationProcessorSettings.prototype.loadBodyContent = function() { + this.disableButtons(); + + var args = { + userid: this.getUserId(), + type: this.getName(), + }; + + this.bodyPromise = Fragment.loadFragment('message', 'processor_settings', this.getContextId(), args); + this.setBody(this.bodyPromise); + + this.bodyPromise.then(function() { + this.enableButtons(); + return; + }.bind(this)) + .fail(Notification.exception); + + return this.bodyPromise; }; /** - * Show the notification processor settings dialogue. + * Load both the title and body content. + * + * @method loadAllContent + * @return {object} promise + */ + NotificationProcessorSettings.prototype.loadAllContent = function() { + return $.when(this.loadTitleContent(), this.loadBodyContent()); + }; + + /** + * Load the modal content before showing it. This + * is to allow us to re-use the same modal for creating and + * editing different message outputs within the page. * * @method show */ NotificationProcessorSettings.prototype.show = function() { - Fragment.loadFragment('message', 'processor_settings', this.contextId, { - userid: this.userId, - type: this.name, - }) - .done(function(html, js) { - Str.get_string('processorsettings', 'message').done(function(string) { - var dialogue = new Dialogue( - string, - html, - function() { - Templates.runTemplateJS(js); - }, - function() { - // Removed dialogue from the DOM after close. - dialogue.close(); - } - ); - - $(document).on('mpp:formsubmitted', function() { - dialogue.close(); - this.updateConfiguredStatus(); - }.bind(this)); - - $(document).on('mpp:formcancelled', function() { - dialogue.close(); - }); - }.bind(this)); - }.bind(this)); + this.loadAllContent(); + Modal.prototype.show.call(this); + }; + + /** + * Clear the notification from the modal when it's closed so + * that it is loaded fresh next time it's displayed. + * + * @method hide + */ + NotificationProcessorSettings.prototype.hide = function() { + Modal.prototype.hide.call(this); + this.setContextId(null); + this.setName(null); + this.setUserId(null); }; /** @@ -86,7 +263,7 @@ define(['jquery', 'core/ajax', 'core/notification', 'core/fragment', 'core/templ * @return {Promise|boolean} */ NotificationProcessorSettings.prototype.updateConfiguredStatus = function() { - var processorHeader = this.root.closest(SELECTORS.PROCESSOR); + var processorHeader = $(this.getElement()).closest(SELECTORS.PROCESSOR); if (!processorHeader.hasClass('unconfigured')) { return false; @@ -114,5 +291,44 @@ define(['jquery', 'core/ajax', 'core/notification', 'core/fragment', 'core/templ }); }; + /** + * Set up all of the event handling for the modal. + * + * @method registerEventListeners + */ + NotificationProcessorSettings.prototype.registerEventListeners = function() { + // Apply parent event listeners. + Modal.prototype.registerEventListeners.call(this); + + // When the user clicks the save button we trigger the form submission. + this.getModal().on(CustomEvents.events.activate, SELECTORS.SAVE_BUTTON, function(e, data) { + this.getForm().submit(); + data.originalEvent.preventDefault(); + }.bind(this)); + + this.getModal().on('mpp:formsubmitted', function(e) { + this.hide(); + this.updateConfiguredStatus(); + e.stopPropagation(); + }.bind(this)); + + this.getModal().on(CustomEvents.events.activate, SELECTORS.CANCEL_BUTTON, function(e, data) { + this.hide(); + data.originalEvent.preventDefault(); + e.stopPropagation(); + }.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( + NotificationProcessorSettings.TYPE, + NotificationProcessorSettings, + 'core/modal_save_cancel'); + registered = true; + } + return NotificationProcessorSettings; }); diff --git a/message/amd/src/preferences_notifications_list_controller.js b/message/amd/src/preferences_notifications_list_controller.js index 14ab2e676ab..8b7311377ad 100644 --- a/message/amd/src/preferences_notifications_list_controller.js +++ b/message/amd/src/preferences_notifications_list_controller.js @@ -23,9 +23,23 @@ * @copyright 2016 Ryan Wyllie * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later */ -define(['jquery', 'core/ajax', 'core/notification', 'core/custom_interaction_events', 'core_message/notification_preference', - 'core_message/notification_processor_settings'], - function($, Ajax, Notification, CustomEvents, NotificationPreference, NotificationProcessorSettings) { +define(['jquery', + 'core/ajax', + 'core/notification', + 'core/custom_interaction_events', + 'core_message/notification_preference', + 'core_message/notification_processor_settings', + 'core/modal_factory', + ], + function( + $, + Ajax, + Notification, + CustomEvents, + NotificationPreference, + NotificationProcessorSettings, + ModalFactory + ) { var SELECTORS = { DISABLE_NOTIFICATIONS: '[data-region="disable-notification-container"] [data-disable-notifications]', @@ -143,11 +157,25 @@ define(['jquery', 'core/ajax', 'core/notification', 'core/custom_interaction_eve } }.bind(this)); - this.root.on(CustomEvents.events.activate, SELECTORS.PROCESSOR_SETTING, function(e, data) { + var eventFormPromise = ModalFactory.create({ + type: NotificationProcessorSettings.TYPE, + }); + + this.root.on(CustomEvents.events.activate, SELECTORS.PROCESSOR_SETTING, function(e) { var element = $(e.target).closest(SELECTORS.PROCESSOR_SETTING); - var processorSettings = new NotificationProcessorSettings(element); - processorSettings.show(); - data.originalEvent.preventDefault(); + + e.preventDefault(); + eventFormPromise.then(function(modal) { + // Configure modal with element settings. + modal.setUserId($(element).attr('data-user-id')); + modal.setName($(element).attr('data-name')); + modal.setContextId($(element).attr('data-context-id')); + modal.setElement(element); + modal.show(); + + e.stopImmediatePropagation(); + return; + }).fail(Notification.exception); }); CustomEvents.define(disabledNotificationsElement, [ diff --git a/message/amd/src/preferences_processor_form.js b/message/amd/src/preferences_processor_form.js index 53b3766c14e..e458d8b25e3 100644 --- a/message/amd/src/preferences_processor_form.js +++ b/message/amd/src/preferences_processor_form.js @@ -22,8 +22,8 @@ * @copyright 2016 Ryan Wyllie * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later */ -define(['jquery', 'core/ajax', 'core/notification', 'core/custom_interaction_events'], - function($, Ajax, Notification, CustomEvents) { +define(['jquery', 'core/ajax', 'core/notification'], + function($, Ajax, Notification) { /** * Constructor for the ProcessorForm. * @@ -37,18 +37,9 @@ define(['jquery', 'core/ajax', 'core/notification', 'core/custom_interaction_eve this.root.find('form').on('submit', function(e) { e.preventDefault(); this.save().done(function() { - $(document).trigger('mpp:formsubmitted'); + $(element).trigger('mpp:formsubmitted'); }); }.bind(this)); - - var cancelButton = this.root.find('[data-cancel-button]'); - CustomEvents.define(cancelButton, [ - CustomEvents.events.activate - ]); - - cancelButton.on(CustomEvents.events.activate, function() { - $(document).trigger('mpp:formcancelled'); - }); }; /** diff --git a/message/templates/preferences_processor.mustache b/message/templates/preferences_processor.mustache index 42be7174703..dd77931954c 100644 --- a/message/templates/preferences_processor.mustache +++ b/message/templates/preferences_processor.mustache @@ -51,10 +51,6 @@
{{{formhtml}}} -
- - -
{{#js}} -- 2.17.1