MDL-61138 javascript: add preshow callback to modal factory

This commit is contained in:
Ryan Wyllie 2018-03-21 15:06:32 +08:00
parent 90d8c85ec3
commit 2803c8683b
2 changed files with 54 additions and 46 deletions

View File

@ -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}});

View File

@ -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) {
if (typeof triggerElement != 'undefined') {
// The element that actually shows the modal.
var actualTriggerElement = null;
if (Array.isArray(triggerElement)) {
var selector = triggerElement[1];
triggerElement = triggerElement[0];
CustomEvents.define(triggerElement, [CustomEvents.events.activate]);
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();
});
}
var setUpTrigger = function(modalPromise, triggerElement, modalConfig) {
// The element that actually shows the modal.
var actualTriggerElement = null;
// Check if the client has provided a callback function to be called
// before the modal is displayed.
var hasPreShowCallback = (typeof modalConfig.preShowCallback == 'function');
// Function to handle the trigger element being activated.
var triggeredCallback = function(e, data) {
actualTriggerElement = $(e.currentTarget);
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();
}
});
if (hasPreShowCallback) {
// If the client provided a pre-show callback then execute
// it now before showing the modal.
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
* trigger element.
* the correct template.
*
* @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 {