MDL-61138 javascript: add preshow callback to modal factory

lib/amd/build/modal_factory.min.js

@@ -1 +1 @@
-define(["jquery","core/modal_events","core/modal_registry","core/modal","core/modal_save_cancel","core/modal_confirm","core/modal_cancel","core/templates","core/notification","core/custom_interaction_events"],function(a,b,c,d,e,f,g,h,i,j){var k={DEFAULT:"core/modal",SAVE_CANCEL:"core/modal_save_cancel",CONFIRM:"core/modal_save_cancel",CANCEL:"core/modal_cancel"},l={DEFAULT:"DEFAULT",SAVE_CANCEL:"SAVE_CANCEL",CONFIRM:"CONFIRM",CANCEL:"CANCEL"};c.register(l.DEFAULT,d,k.DEFAULT),c.register(l.SAVE_CANCEL,e,k.SAVE_CANCEL),c.register(l.CONFIRM,f,k.CONFIRM),c.register(l.CANCEL,g,k.CANCEL);var m=function(a,c){if("undefined"!=typeof c){var d=null;if(Array.isArray(c)){var e=c[1];c=c[0],j.define(c,[j.events.activate]),c.on(j.events.activate,e,function(b,c){d=b.currentTarget,a.then(function(a){return a.show(),a}),c.originalEvent.preventDefault()})}else j.define(c,[j.events.activate]),c.on(j.events.activate,function(b,c){d=b.currentTarget,a.then(function(a){return a.show(),a}),c.originalEvent.preventDefault()});a.then(function(a){return a.getRoot().on(b.hidden,function(){null!==d&&d.focus()}),a})}},n=function(b,c){c=a(c);var d=b.module,e=new d(c);return e},o=function(b,c,d){var e=b.template,f=h.render(e,c).then(function(c){var d=a(c);return n(b,d)}).fail(i.exception);return m(f,d),f},p=function(a,b){var d=a.type||l.DEFAULT,e=!!a.large,f=null,g={};return f=c.get(d),f||i.exception({message:"Unable to find modal of type: "+d}),"undefined"!=typeof a.templateContext&&(g=a.templateContext),o(f,g,b).then(function(b){return"undefined"!=typeof a.title&&b.setTitle(a.title),"undefined"!=typeof a.body&&b.setBody(a.body),"undefined"!=typeof a.footer&&b.setFooter(a.footer),e&&b.setLarge(),b})};return{create:p,types:l}});
+define(["jquery","core/modal_events","core/modal_registry","core/modal","core/modal_save_cancel","core/modal_confirm","core/modal_cancel","core/templates","core/notification","core/custom_interaction_events"],function(a,b,c,d,e,f,g,h,i,j){var k={DEFAULT:"core/modal",SAVE_CANCEL:"core/modal_save_cancel",CONFIRM:"core/modal_save_cancel",CANCEL:"core/modal_cancel"},l={DEFAULT:"DEFAULT",SAVE_CANCEL:"SAVE_CANCEL",CONFIRM:"CONFIRM",CANCEL:"CANCEL"};c.register(l.DEFAULT,d,k.DEFAULT),c.register(l.SAVE_CANCEL,e,k.SAVE_CANCEL),c.register(l.CONFIRM,f,k.CONFIRM),c.register(l.CANCEL,g,k.CANCEL);var m=function(c,d,e){var f=null,g="function"==typeof e.preShowCallback,h=function(b,d){f=a(b.currentTarget),c.then(function(a){return g&&e.preShowCallback(f,a),a.show(),a}),d.originalEvent.preventDefault()};if(Array.isArray(d)){var i=d[1];d=d[0],j.define(d,[j.events.activate]),d.on(j.events.activate,i,h)}else j.define(d,[j.events.activate]),d.on(j.events.activate,h);c.then(function(a){return a.getRoot().on(b.hidden,function(){null!==f&&f.focus()}),a})},n=function(b,c){c=a(c);var d=b.module,e=new d(c);return e},o=function(b,c){var d=b.template,e=h.render(d,c).then(function(c){var d=a(c);return n(b,d)}).fail(i.exception);return e},p=function(a,b){var d=a.type||l.DEFAULT,e=!!a.large,f=null,g={};f=c.get(d),f||i.exception({message:"Unable to find modal of type: "+d}),"undefined"!=typeof a.templateContext&&(g=a.templateContext);var h=o(f,g).then(function(b){return"undefined"!=typeof a.title&&b.setTitle(a.title),"undefined"!=typeof a.body&&b.setBody(a.body),"undefined"!=typeof a.footer&&b.setFooter(a.footer),e&&b.setLarge(),b});return"undefined"!=typeof b&&m(h,b,a),h};return{create:p,types:l}});

lib/amd/src/modal_factory.js

@@ -60,49 +60,55 @@ define(['jquery', 'core/modal_events', 'core/modal_registry', 'core/modal',
      * @method setUpTrigger
      * @param {Promise} modalPromise The modal instance
      * @param {object} triggerElement The jQuery element to open the modal
+     * @param {object} modalConfig The modal configuration given to the factory
      */
-    var setUpTrigger = function(modalPromise, triggerElement) {
+    var setUpTrigger = function(modalPromise, triggerElement, modalConfig) {
-        if (typeof triggerElement != 'undefined') {
+        // The element that actually shows the modal.
-            // The element that actually shows the modal.
+        var actualTriggerElement = null;
-            var actualTriggerElement = null;
+        // Check if the client has provided a callback function to be called
-            if (Array.isArray(triggerElement)) {
+        // before the modal is displayed.
-                var selector = triggerElement[1];
+        var hasPreShowCallback = (typeof modalConfig.preShowCallback == 'function');
-                triggerElement = triggerElement[0];
+        // Function to handle the trigger element being activated.
-
+        var triggeredCallback = function(e, data) {
-                CustomEvents.define(triggerElement, [CustomEvents.events.activate]);
+            actualTriggerElement = $(e.currentTarget);
-                triggerElement.on(CustomEvents.events.activate, selector, function(e, data) {
-                    actualTriggerElement = e.currentTarget;
-                    modalPromise.then(function(modal) {
-                        modal.show();
-
-                        return modal;
-                    });
-                    data.originalEvent.preventDefault();
-                });
-            } else {
-                CustomEvents.define(triggerElement, [CustomEvents.events.activate]);
-                triggerElement.on(CustomEvents.events.activate, function(e, data) {
-                    actualTriggerElement = e.currentTarget;
-                    modalPromise.then(function(modal) {
-                        modal.show();
-
-                        return modal;
-                    });
-                    data.originalEvent.preventDefault();
-                });
-            }
-
             modalPromise.then(function(modal) {
-                modal.getRoot().on(ModalEvents.hidden, function() {
+                if (hasPreShowCallback) {
-                    // Focus on the trigger element that actually launched the modal.
+                    // If the client provided a pre-show callback then execute
-                    if (actualTriggerElement !== null) {
+                    // it now before showing the modal.
-                        actualTriggerElement.focus();
+                    modalConfig.preShowCallback(actualTriggerElement, modal);
-                    }
+                }
-                });
+
+                modal.show();
 
                 return modal;
             });
+            data.originalEvent.preventDefault();
+        };
+
+        // The trigger element can either be a single element or it can be an
+        // element + selector pair to create a delegated event handler to trigger
+        // the modal.
+        if (Array.isArray(triggerElement)) {
+            var selector = triggerElement[1];
+            triggerElement = triggerElement[0];
+
+            CustomEvents.define(triggerElement, [CustomEvents.events.activate]);
+            triggerElement.on(CustomEvents.events.activate, selector, triggeredCallback);
+        } else {
+            CustomEvents.define(triggerElement, [CustomEvents.events.activate]);
+            triggerElement.on(CustomEvents.events.activate, triggeredCallback);
         }
+
+        modalPromise.then(function(modal) {
+            modal.getRoot().on(ModalEvents.hidden, function() {
+                // Focus on the trigger element that actually launched the modal.
+                if (actualTriggerElement !== null) {
+                    actualTriggerElement.focus();
+                }
+            });
+
+            return modal;
+        });
     };
 
     /**
@@ -112,7 +118,6 @@ define(['jquery', 'core/modal_events', 'core/modal_registry', 'core/modal',
      * @method createFromElement
      * @param {object} registryConf A config from the ModalRegistry
      * @param {object} modalElement The modal HTML jQuery object
-     * @param {object} triggerElement The trigger HTML jQuery object
      * @return {object} Modal instance
      */
     var createFromElement = function(registryConf, modalElement) {
@@ -125,15 +130,14 @@ define(['jquery', 'core/modal_events', 'core/modal_registry', 'core/modal',
 
     /**
      * Create the correct modal instance for the given type, including loading
-     * the correct template and setting up the trigger relationship with the
+     * the correct template.
-     * trigger element.
      *
      * @method createFromType
      * @param {object} registryConf A config from the ModalRegistry
-     * @param {object} triggerElement The trigger HTML jQuery object
+     * @param {object} templateContext The context to render the template with
      * @return {promise} Resolved with a Modal instance
      */
-    var createFromType = function(registryConf, templateContext, triggerElement) {
+    var createFromType = function(registryConf, templateContext) {
         var templateName = registryConf.template;
 
         var modalPromise = Templates.render(templateName, templateContext)
@@ -143,8 +147,6 @@ define(['jquery', 'core/modal_events', 'core/modal_registry', 'core/modal',
             })
             .fail(Notification.exception);
 
-        setUpTrigger(modalPromise, triggerElement);
-
         return modalPromise;
     };
 
@@ -172,7 +174,7 @@ define(['jquery', 'core/modal_events', 'core/modal_registry', 'core/modal',
             templateContext = modalConfig.templateContext;
         }
 
-        return createFromType(registryConf, templateContext, triggerElement)
+        var modalPromise = createFromType(registryConf, templateContext)
             .then(function(modal) {
                 if (typeof modalConfig.title != 'undefined') {
                     modal.setTitle(modalConfig.title);
@@ -192,6 +194,12 @@ define(['jquery', 'core/modal_events', 'core/modal_registry', 'core/modal',
 
                 return modal;
             });
+
+        if (typeof triggerElement != 'undefined') {
+            setUpTrigger(modalPromise, triggerElement, modalConfig);
+        }
+
+        return modalPromise;
     };
 
     return {