mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-04-22 17:02:03 +02:00
Code Issues Projects Releases Wiki Activity

MDL-78274 modal: Enable modals to be vertically centered

Browse Source
This commit is contained in:
Mathew May 2023-06-14 11:49:02 +08:00
parent 1b1a15a308
commit 0fb1152345
6 changed files with 31 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/amd/build/modal.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
lib/amd/build/modal.min.js.map
View File

File diff suppressed because one or more lines are too long

2
lib/amd/build/modal_factory.min.js vendored
View File

@ -5,6 +5,6 @@ define("core/modal_factory",["exports","jquery","core/modal_events","core/modal_
* @module core/modal_factory
* @copyright 2016 Ryan Wyllie <ryan@moodle.com>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.types=_exports.default=_exports.create=void 0,_jquery=_interopRequireDefault(_jquery),_modal_events=_interopRequireDefault(_modal_events),ModalRegistry=_interopRequireWildcard(ModalRegistry),_modal=_interopRequireDefault(_modal),_modal_save_cancel=_interopRequireDefault(_modal_save_cancel),_modal_delete_cancel=_interopRequireDefault(_modal_delete_cancel),_modal_cancel=_interopRequireDefault(_modal_cancel),_alert=_interopRequireDefault(_alert),Templates=_interopRequireWildcard(Templates),Notification=_interopRequireWildcard(Notification),CustomEvents=_interopRequireWildcard(CustomEvents),_pending=_interopRequireDefault(_pending);const types={DEFAULT:"DEFAULT",SAVE_CANCEL:_modal_save_cancel.default.TYPE,DELETE_CANCEL:_modal_delete_cancel.default.TYPE,CANCEL:_modal_cancel.default.TYPE,ALERT:_alert.default.TYPE};_exports.types=types,ModalRegistry.register(types.DEFAULT,_modal.default,_modal.default.TEMPLATE);const createFromType=(registryConf,templateContext)=>{const templateName=registryConf.template;return Templates.render(templateName,templateContext).then((html=>((registryConf,modalElement)=>(modalElement=(0,_jquery.default)(modalElement),new(0,registryConf.module)(modalElement)))(registryConf,(0,_jquery.default)(html))))},create=(modalConfig,triggerElement)=>{const type=modalConfig.type||types.DEFAULT,isLarge=!!modalConfig.large,isScrollable=!modalConfig.hasOwnProperty("scrollable")||modalConfig.scrollable,registryConf=ModalRegistry.get(type);registryConf||Notification.exception({message:"Unable to find modal of type: "+type});const templateContext=modalConfig.templateContext||{},modalPromise=createFromType(registryConf,templateContext).then((modal=>(void 0!==modalConfig.title&&modal.setTitle(modalConfig.title),void 0!==modalConfig.body&&modal.setBody(modalConfig.body),void 0!==modalConfig.footer&&modal.setFooter(modalConfig.footer),modalConfig.buttons&&Object.entries(modalConfig.buttons).forEach((function(_ref){let[key,value]=_ref;modal.setButtonText(key,value)})),isLarge&&modal.setLarge(),void 0!==modalConfig.removeOnClose&&modal.setRemoveOnClose(modalConfig.removeOnClose),modal.setScrollable(isScrollable),modal)));return void 0!==triggerElement&&((modalPromise,triggerElement,modalConfig)=>{let actualTriggerElement=null;const hasPreShowCallback="function"==typeof modalConfig.preShowCallback,triggeredCallback=(e,data)=>{const pendingPromise=new _pending.default("core/modal_factory:setUpTrigger:triggeredCallback");actualTriggerElement=(0,_jquery.default)(e.currentTarget),modalPromise.then((function(modal){return hasPreShowCallback&&modalConfig.preShowCallback(actualTriggerElement,modal),modal.show(),modal})).then(pendingPromise.resolve),data.originalEvent.preventDefault()};if(Array.isArray(triggerElement)){const 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){return modal.getRoot().on(_modal_events.default.hidden,(function(){null!==actualTriggerElement&&actualTriggerElement.focus()})),modal}))})(modalPromise,triggerElement,modalConfig),modalPromise};_exports.create=create;var _default={create:create,types:types};return _exports.default=_default,_exports.default}));
*/Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.types=_exports.default=_exports.create=void 0,_jquery=_interopRequireDefault(_jquery),_modal_events=_interopRequireDefault(_modal_events),ModalRegistry=_interopRequireWildcard(ModalRegistry),_modal=_interopRequireDefault(_modal),_modal_save_cancel=_interopRequireDefault(_modal_save_cancel),_modal_delete_cancel=_interopRequireDefault(_modal_delete_cancel),_modal_cancel=_interopRequireDefault(_modal_cancel),_alert=_interopRequireDefault(_alert),Templates=_interopRequireWildcard(Templates),Notification=_interopRequireWildcard(Notification),CustomEvents=_interopRequireWildcard(CustomEvents),_pending=_interopRequireDefault(_pending);const types={DEFAULT:"DEFAULT",SAVE_CANCEL:_modal_save_cancel.default.TYPE,DELETE_CANCEL:_modal_delete_cancel.default.TYPE,CANCEL:_modal_cancel.default.TYPE,ALERT:_alert.default.TYPE};_exports.types=types,ModalRegistry.register(types.DEFAULT,_modal.default,_modal.default.TEMPLATE);const createFromType=(registryConf,templateContext)=>{const templateName=registryConf.template;return Templates.render(templateName,templateContext).then((html=>((registryConf,modalElement)=>(modalElement=(0,_jquery.default)(modalElement),new(0,registryConf.module)(modalElement)))(registryConf,(0,_jquery.default)(html))))},create=(modalConfig,triggerElement)=>{const type=modalConfig.type||types.DEFAULT,isLarge=!!modalConfig.large,isVerticallyCentered=!!modalConfig.verticallyCentered,isScrollable=!modalConfig.hasOwnProperty("scrollable")||modalConfig.scrollable,registryConf=ModalRegistry.get(type);registryConf||Notification.exception({message:"Unable to find modal of type: "+type});const templateContext=modalConfig.templateContext||{},modalPromise=createFromType(registryConf,templateContext).then((modal=>(void 0!==modalConfig.title&&modal.setTitle(modalConfig.title),void 0!==modalConfig.body&&modal.setBody(modalConfig.body),void 0!==modalConfig.footer&&modal.setFooter(modalConfig.footer),modalConfig.buttons&&Object.entries(modalConfig.buttons).forEach((function(_ref){let[key,value]=_ref;modal.setButtonText(key,value)})),isLarge&&modal.setLarge(),isVerticallyCentered&&modal.setVerticallyCentered(),void 0!==modalConfig.removeOnClose&&modal.setRemoveOnClose(modalConfig.removeOnClose),modal.setScrollable(isScrollable),modal)));return void 0!==triggerElement&&((modalPromise,triggerElement,modalConfig)=>{let actualTriggerElement=null;const hasPreShowCallback="function"==typeof modalConfig.preShowCallback,triggeredCallback=(e,data)=>{const pendingPromise=new _pending.default("core/modal_factory:setUpTrigger:triggeredCallback");actualTriggerElement=(0,_jquery.default)(e.currentTarget),modalPromise.then((function(modal){return hasPreShowCallback&&modalConfig.preShowCallback(actualTriggerElement,modal),modal.show(),modal})).then(pendingPromise.resolve),data.originalEvent.preventDefault()};if(Array.isArray(triggerElement)){const 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){return modal.getRoot().on(_modal_events.default.hidden,(function(){null!==actualTriggerElement&&actualTriggerElement.focus()})),modal}))})(modalPromise,triggerElement,modalConfig),modalPromise};_exports.create=create;var _default={create:create,types:types};return _exports.default=_default,_exports.default}));
//# sourceMappingURL=modal_factory.min.js.map

2
lib/amd/build/modal_factory.min.js.map
View File

File diff suppressed because one or more lines are too long

22
lib/amd/src/modal.js
View File

@ -561,6 +561,18 @@ export default class Modal {
this.getModal().addClass('modal-lg');
}
/**
* Mark the modal as a centered modal.
*
* @method setVerticallyCentered
*/
setVerticallyCentered() {
if (this.isVerticallyCentered()) {
return;
}
this.getModal().addClass('modal-dialog-centered');
}
/**
* Check if the modal is a large modal.
*
@ -571,6 +583,16 @@ export default class Modal {
return this.getModal().hasClass('modal-lg');
}
/**
* Check if the modal is vertically centered.
*
* @method isVerticallyCentered
* @return {bool}
*/
isVerticallyCentered() {
return this.getModal().hasClass('modal-dialog-centered');
}
/**
* Mark the modal as a small modal.
*

5
lib/amd/src/modal_factory.js
View File

@ -165,6 +165,7 @@ const createFromType = (registryConf, templateContext) => {
export const create = (modalConfig, triggerElement) => {
const type = modalConfig.type || types.DEFAULT;
const isLarge = modalConfig.large ? true : false;
const isVerticallyCentered = modalConfig.verticallyCentered ? true : false;
// If 'scrollable' is not configured, set the modal to be scrollable by default.
const isScrollable = modalConfig.hasOwnProperty('scrollable') ? modalConfig.scrollable : true;
@ -199,6 +200,10 @@ export const create = (modalConfig, triggerElement) => {
modal.setLarge();
}
if (isVerticallyCentered) {
modal.setVerticallyCentered();
}
if (typeof modalConfig.removeOnClose !== 'undefined') {
// If configured remove the modal when hiding it.
modal.setRemoveOnClose(modalConfig.removeOnClose);