diff --git a/lib/amd/build/modal.min.js b/lib/amd/build/modal.min.js index 096b8376f8d..f3a2db2e133 100644 --- a/lib/amd/build/modal.min.js +++ b/lib/amd/build/modal.min.js @@ -1 +1 @@ -define(["jquery","core/templates","core/notification","core/key_codes","core/custom_interaction_events","core/modal_backdrop","core/event","core/modal_events"],function(a,b,c,d,e,f,g,h){var i,j={CONTAINER:'[data-region="modal-container"]',MODAL:'[data-region="modal"]',HEADER:'[data-region="header"]',TITLE:'[data-region="title"]',BODY:'[data-region="body"]',FOOTER:'[data-region="footer"]',HIDE:'[data-action="hide"]',DIALOG:"[role=dialog]",MENU_BAR:"[role=menubar]",HAS_Z_INDEX:".moodle-has-zindex",CAN_RECEIVE_FOCUS:'input:not([type="hidden"]), a[href], button, textarea, select, [tabindex]'},k={LOADING:"core/loading",BACKDROP:"core/modal_backdrop"},l=0,m=function(b){this.root=a(b),this.modal=this.root.find(j.MODAL),this.header=this.modal.find(j.HEADER),this.title=this.header.find(j.TITLE),this.body=this.modal.find(j.BODY),this.footer=this.modal.find(j.FOOTER),this.hiddenSiblings=[],this.isAttached=!1,this.bodyJS=null,this.footerJS=null,this.modalCount=l++,this.root.is(j.CONTAINER)||c.exception({message:"Element is not a modal container"}),this.modal.length||c.exception({message:"Container does not contain a modal"}),this.header.length||c.exception({message:"Modal is missing a header region"}),this.title.length||c.exception({message:"Modal header is missing a title region"}),this.body.length||c.exception({message:"Modal is missing a body region"}),this.footer.length||c.exception({message:"Modal is missing a footer region"}),this.registerEventListeners()};return m.prototype.attachToDOM=function(){this.isAttached||(a("body").append(this.root),this.bodyJS&&(b.runTemplateJS(this.bodyJS),this.bodyJS=null),this.footerJS&&(b.runTemplateJS(this.footerJS),this.footerJS=null),this.isAttached=!0)},m.prototype.countOtherVisibleModals=function(){var b=0;return a("body").find(j.CONTAINER).each(function(c,d){d=a(d),!this.root.is(d)&&d.hasClass("show")&&b++}.bind(this)),b},m.prototype.getBackdrop=function(){return i||(i=b.render(k.BACKDROP,{}).then(function(b){var c=a(b);return new f(c)}).fail(c.exception)),i},m.prototype.getRoot=function(){return this.root},m.prototype.getModal=function(){return this.modal},m.prototype.getTitle=function(){return this.title},m.prototype.getBody=function(){return this.body},m.prototype.getFooter=function(){return this.footer},m.prototype.getModalCount=function(){return this.modalCount},m.prototype.setTitle=function(a){var b=this.getTitle();this.asyncSet(a,b.html.bind(b))},m.prototype.setBody=function(d){var e=this.getBody();if("string"==typeof d)e.html(d),g.notifyFilterContentUpdated(e),this.getRoot().trigger(h.bodyRendered,this);else{var f="amd-modal-js-pending-id-"+this.getModalCount();M.util.js_pending(f);var i=null;if(e.css("overflow","hidden"),"pending"==d.state()){var j=e.innerHeight();j<100&&(j=100),e.animate({height:j+"px"},150),e.html(""),i=b.render(k.LOADING,{}).then(function(b){var c=a(b).hide();return e.html(c),c.fadeIn(150),a.when(c.promise(),d)}).then(function(a){return a.fadeOut(100).promise()}).then(function(){return d})}else i=d;i.then(function(a,c){var d=null;if(this.isVisible()){e.css("opacity",0);var f=e.innerHeight();e.html(a),e.css("height","");var i=e.innerHeight();e.css("height",f+"px"),d=e.animate({height:i+"px",opacity:1},{duration:150,queue:!1}).promise()}else e.html(a);return c&&(this.isAttached?b.runTemplateJS(c):this.bodyJS=c),g.notifyFilterContentUpdated(e),this.getRoot().trigger(h.bodyRendered,this),d}.bind(this)).fail(c.exception).always(function(){e.css("height",""),e.css("overflow",""),e.css("opacity",""),M.util.js_complete(f)}).fail(c.exception)}},m.prototype.setFooter=function(a){this.showFooter();var c=this.getFooter();"string"==typeof a?c.html(a):b.render(k.LOADING,{}).done(function(d){c.html(d),a.done(function(a,d){c.html(a),d&&(this.isAttached?b.runTemplateJS(d):this.footerJS=d)}.bind(this))}.bind(this))},m.prototype.hasFooterContent=function(){return!!this.getFooter().children().length},m.prototype.hideFooter=function(){this.getFooter().addClass("hidden")},m.prototype.showFooter=function(){this.getFooter().removeClass("hidden")},m.prototype.setLarge=function(){this.isLarge()||this.getModal().addClass("modal-lg")},m.prototype.isLarge=function(){return this.getModal().hasClass("modal-lg")},m.prototype.setSmall=function(){this.isSmall()||this.getModal().removeClass("modal-lg")},m.prototype.isSmall=function(){return!this.getModal().hasClass("modal-lg")},m.prototype.calculateZIndex=function(){var b=a(j.DIALOG+", "+j.MENU_BAR+", "+j.HAS_Z_INDEX),c=parseInt(this.root.css("z-index"));return b.each(function(b,d){d=a(d);var e=d.css("z-index")?parseInt(d.css("z-index")):0;e>c&&(c=e)}),c},m.prototype.isVisible=function(){return this.root.hasClass("show")},m.prototype.hasFocus=function(){var b=a(document.activeElement);return this.root.is(b)||this.root.has(b).length},m.prototype.hasTransitions=function(){return this.getRoot().hasClass("fade")},m.prototype.show=function(){this.isVisible()||(this.hasFooterContent()?this.showFooter():this.hideFooter(),this.isAttached||this.attachToDOM(),this.getBackdrop().done(function(b){var c=this.calculateZIndex(),d=c+2,e=d-1;this.root.css("z-index",d),b.setZIndex(e),b.show(),this.root.removeClass("hide").addClass("show"),this.accessibilityShow(),this.getModal().focus(),a("body").addClass("modal-open"),this.root.trigger(h.shown,this)}.bind(this)))},m.prototype.hide=function(){this.getBackdrop().done(function(b){this.countOtherVisibleModals()||(b.hide(),a("body").removeClass("modal-open"));var c=parseInt(this.root.css("z-index"));this.root.css("z-index",""),b.setZIndex(c-3),this.accessibilityHide(),this.hasTransitions()?this.getRoot().one("transitionend webkitTransitionEnd oTransitionEnd",function(){this.getRoot().removeClass("show").addClass("hide")}.bind(this)):this.getRoot().removeClass("show").addClass("hide"),this.root.trigger(h.hidden,this)}.bind(this))},m.prototype.destroy=function(){this.root.remove(),this.root.trigger(h.destroyed,this)},m.prototype.accessibilityShow=function(){a("body").children().each(function(b,c){if(!this.root.is(c)){c=a(c);var d=c.attr("aria-hidden");"true"!==d&&(c.data("previous-aria-hidden",d),this.hiddenSiblings.push(c),c.attr("aria-hidden","true"))}}.bind(this)),this.root.attr("aria-hidden","false")},m.prototype.accessibilityHide=function(){this.root.attr("aria-hidden","true"),a.each(this.hiddenSiblings,function(b,c){c=a(c);var d=c.data("previous-aria-hidden");"undefined"==typeof d?c.removeAttr("aria-hidden"):c.attr("aria-hidden",d)}),this.hiddenSiblings=[]},m.prototype.handleTabLock=function(b){if(this.hasFocus()){var c=a(document.activeElement),d=this.modal.find(j.CAN_RECEIVE_FOCUS),e=d.first(),f=d.last();c.is(e)&&b.shiftKey?(f.focus(),b.preventDefault()):c.is(f)&&!b.shiftKey&&(e.focus(),b.preventDefault())}},m.prototype.registerEventListeners=function(){this.getRoot().on("keydown",function(a){this.isVisible()&&(a.keyCode==d.tab?this.handleTabLock(a):a.keyCode==d.escape&&this.hide())}.bind(this)),this.getRoot().click(function(b){a(b.target).closest(j.MODAL).length||a(b.target).closest(j.CONTAINER).length&&this.hide()}.bind(this)),e.define(this.getModal(),[e.events.activate]),this.getModal().on(e.events.activate,j.HIDE,function(a,b){this.hide(),b.originalEvent.preventDefault()}.bind(this))},m.prototype.asyncSet=function(b,d){var e=b;return"object"==typeof b&&b.hasOwnProperty("then")||(e=a.Deferred(),e.resolve(b)),e.then(function(a){d(a)}).fail(c.exception),e},m}); \ No newline at end of file +define(["jquery","core/templates","core/notification","core/key_codes","core/custom_interaction_events","core/modal_backdrop","core/event","core/modal_events"],function(a,b,c,d,e,f,g,h){var i,j={CONTAINER:'[data-region="modal-container"]',MODAL:'[data-region="modal"]',HEADER:'[data-region="header"]',TITLE:'[data-region="title"]',BODY:'[data-region="body"]',FOOTER:'[data-region="footer"]',HIDE:'[data-action="hide"]',DIALOG:"[role=dialog]",FORM:"form",MENU_BAR:"[role=menubar]",HAS_Z_INDEX:".moodle-has-zindex",CAN_RECEIVE_FOCUS:'input:not([type="hidden"]), a[href], button, textarea, select, [tabindex]'},k={LOADING:"core/loading",BACKDROP:"core/modal_backdrop"},l=0,m=function(b){this.root=a(b),this.modal=this.root.find(j.MODAL),this.header=this.modal.find(j.HEADER),this.title=this.header.find(j.TITLE),this.body=this.modal.find(j.BODY),this.footer=this.modal.find(j.FOOTER),this.hiddenSiblings=[],this.isAttached=!1,this.bodyJS=null,this.footerJS=null,this.modalCount=l++,this.root.is(j.CONTAINER)||c.exception({message:"Element is not a modal container"}),this.modal.length||c.exception({message:"Container does not contain a modal"}),this.header.length||c.exception({message:"Modal is missing a header region"}),this.title.length||c.exception({message:"Modal header is missing a title region"}),this.body.length||c.exception({message:"Modal is missing a body region"}),this.footer.length||c.exception({message:"Modal is missing a footer region"}),this.registerEventListeners()};return m.prototype.attachToDOM=function(){this.isAttached||(a("body").append(this.root),this.bodyJS&&(b.runTemplateJS(this.bodyJS),this.bodyJS=null),this.footerJS&&(b.runTemplateJS(this.footerJS),this.footerJS=null),this.isAttached=!0)},m.prototype.countOtherVisibleModals=function(){var b=0;return a("body").find(j.CONTAINER).each(function(c,d){d=a(d),!this.root.is(d)&&d.hasClass("show")&&b++}.bind(this)),b},m.prototype.getBackdrop=function(){return i||(i=b.render(k.BACKDROP,{}).then(function(b){var c=a(b);return new f(c)}).fail(c.exception)),i},m.prototype.getRoot=function(){return this.root},m.prototype.getModal=function(){return this.modal},m.prototype.getTitle=function(){return this.title},m.prototype.getBody=function(){return this.body},m.prototype.getFooter=function(){return this.footer},m.prototype.getModalCount=function(){return this.modalCount},m.prototype.setTitle=function(a){var b=this.getTitle();this.asyncSet(a,b.html.bind(b))},m.prototype.setBody=function(d){var e=this.getBody();if("string"==typeof d)e.html(d),g.notifyFilterContentUpdated(e),this.getRoot().trigger(h.bodyRendered,this);else{var f="amd-modal-js-pending-id-"+this.getModalCount();M.util.js_pending(f);var i=null;if(e.css("overflow","hidden"),"pending"==d.state()){var j=e.innerHeight();j<100&&(j=100),e.animate({height:j+"px"},150),e.html(""),i=b.render(k.LOADING,{}).then(function(b){var c=a(b).hide();return e.html(c),c.fadeIn(150),a.when(c.promise(),d)}).then(function(a){return a.fadeOut(100).promise()}).then(function(){return d})}else i=d;i.then(function(a,c){var d=null;if(this.isVisible()){e.css("opacity",0);var f=e.innerHeight();e.html(a),e.css("height","");var i=e.innerHeight();e.css("height",f+"px"),d=e.animate({height:i+"px",opacity:1},{duration:150,queue:!1}).promise()}else e.html(a);return c&&(this.isAttached?b.runTemplateJS(c):this.bodyJS=c),g.notifyFilterContentUpdated(e),this.getRoot().trigger(h.bodyRendered,this),d}.bind(this)).fail(c.exception).always(function(){e.css("height",""),e.css("overflow",""),e.css("opacity",""),M.util.js_complete(f)}).fail(c.exception)}},m.prototype.setFooter=function(a){this.showFooter();var c=this.getFooter();"string"==typeof a?c.html(a):b.render(k.LOADING,{}).done(function(d){c.html(d),a.done(function(a,d){c.html(a),d&&(this.isAttached?b.runTemplateJS(d):this.footerJS=d)}.bind(this))}.bind(this))},m.prototype.hasFooterContent=function(){return!!this.getFooter().children().length},m.prototype.hideFooter=function(){this.getFooter().addClass("hidden")},m.prototype.showFooter=function(){this.getFooter().removeClass("hidden")},m.prototype.setLarge=function(){this.isLarge()||this.getModal().addClass("modal-lg")},m.prototype.isLarge=function(){return this.getModal().hasClass("modal-lg")},m.prototype.setSmall=function(){this.isSmall()||this.getModal().removeClass("modal-lg")},m.prototype.isSmall=function(){return!this.getModal().hasClass("modal-lg")},m.prototype.calculateZIndex=function(){var b=a(j.DIALOG+", "+j.MENU_BAR+", "+j.HAS_Z_INDEX),c=parseInt(this.root.css("z-index"));return b.each(function(b,d){d=a(d);var e=d.css("z-index")?parseInt(d.css("z-index")):0;e>c&&(c=e)}),c},m.prototype.isVisible=function(){return this.root.hasClass("show")},m.prototype.hasFocus=function(){var b=a(document.activeElement);return this.root.is(b)||this.root.has(b).length},m.prototype.hasTransitions=function(){return this.getRoot().hasClass("fade")},m.prototype.show=function(){this.isVisible()||(this.hasFooterContent()?this.showFooter():this.hideFooter(),this.isAttached||this.attachToDOM(),this.getBackdrop().done(function(b){var c=this.calculateZIndex(),d=c+2,e=d-1;this.root.css("z-index",d),b.setZIndex(e),b.show(),this.root.removeClass("hide").addClass("show"),this.accessibilityShow(),this.getModal().focus(),a("body").addClass("modal-open"),this.root.trigger(h.shown,this)}.bind(this)))},m.prototype.hideIfNotForm=function(){var a=this.modal.find(j.FORM);0==a.length&&this.hide()},m.prototype.hide=function(){this.getBackdrop().done(function(b){this.countOtherVisibleModals()||(b.hide(),a("body").removeClass("modal-open"));var c=parseInt(this.root.css("z-index"));this.root.css("z-index",""),b.setZIndex(c-3),this.accessibilityHide(),this.hasTransitions()?this.getRoot().one("transitionend webkitTransitionEnd oTransitionEnd",function(){this.getRoot().removeClass("show").addClass("hide")}.bind(this)):this.getRoot().removeClass("show").addClass("hide"),this.root.trigger(h.hidden,this)}.bind(this))},m.prototype.destroy=function(){this.root.remove(),this.root.trigger(h.destroyed,this)},m.prototype.accessibilityShow=function(){a("body").children().each(function(b,c){if(!this.root.is(c)){c=a(c);var d=c.attr("aria-hidden");"true"!==d&&(c.data("previous-aria-hidden",d),this.hiddenSiblings.push(c),c.attr("aria-hidden","true"))}}.bind(this)),this.root.attr("aria-hidden","false")},m.prototype.accessibilityHide=function(){this.root.attr("aria-hidden","true"),a.each(this.hiddenSiblings,function(b,c){c=a(c);var d=c.data("previous-aria-hidden");"undefined"==typeof d?c.removeAttr("aria-hidden"):c.attr("aria-hidden",d)}),this.hiddenSiblings=[]},m.prototype.handleTabLock=function(b){if(this.hasFocus()){var c=a(document.activeElement),d=this.modal.find(j.CAN_RECEIVE_FOCUS),e=d.first(),f=d.last();c.is(e)&&b.shiftKey?(f.focus(),b.preventDefault()):c.is(f)&&!b.shiftKey&&(e.focus(),b.preventDefault())}},m.prototype.registerEventListeners=function(){this.getRoot().on("keydown",function(a){this.isVisible()&&(a.keyCode==d.tab?this.handleTabLock(a):a.keyCode==d.escape&&this.hide())}.bind(this)),this.getRoot().click(function(b){a(b.target).closest(j.MODAL).length||a(b.target).closest(j.CONTAINER).length&&this.hideIfNotForm()}.bind(this)),e.define(this.getModal(),[e.events.activate]),this.getModal().on(e.events.activate,j.HIDE,function(a,b){this.hide(),b.originalEvent.preventDefault()}.bind(this))},m.prototype.asyncSet=function(b,d){var e=b;return"object"==typeof b&&b.hasOwnProperty("then")||(e=a.Deferred(),e.resolve(b)),e.then(function(a){d(a)}).fail(c.exception),e},m}); \ No newline at end of file diff --git a/lib/amd/src/modal.js b/lib/amd/src/modal.js index 799b3dc75d8..4e61d10ac26 100644 --- a/lib/amd/src/modal.js +++ b/lib/amd/src/modal.js @@ -35,6 +35,7 @@ define(['jquery', 'core/templates', 'core/notification', 'core/key_codes', FOOTER: '[data-region="footer"]', HIDE: '[data-action="hide"]', DIALOG: '[role=dialog]', + FORM: 'form', MENU_BAR: '[role=menubar]', HAS_Z_INDEX: '.moodle-has-zindex', CAN_RECEIVE_FOCUS: 'input:not([type="hidden"]), a[href], button, textarea, select, [tabindex]', @@ -571,6 +572,18 @@ define(['jquery', 'core/templates', 'core/notification', 'core/key_codes', }.bind(this)); }; + /** + * Hide this modal if it does not contain a form. + * + * @method hideIfNotForm + */ + Modal.prototype.hideIfNotForm = function() { + var formElement = this.modal.find(SELECTORS.FORM); + if (formElement.length == 0) { + this.hide(); + } + }; + /** * Hide this modal. * @@ -727,7 +740,7 @@ define(['jquery', 'core/templates', 'core/notification', 'core/key_codes', // So, we check if we can still find the container element or not. If not, then the DOM tree is changed. // It's best not to hide the modal in that case. if ($(e.target).closest(SELECTORS.CONTAINER).length) { - this.hide(); + this.hideIfNotForm(); } } }.bind(this)); diff --git a/lib/tests/behat/action_modal.feature b/lib/tests/behat/action_modal.feature index 81dc26cd570..837b7a64651 100644 --- a/lib/tests/behat/action_modal.feature +++ b/lib/tests/behat/action_modal.feature @@ -2,7 +2,7 @@ Feature: Close modals by clicking outside them In order to easily close the currently open pop-up As a user - Clicking outside the modal should close it. + Clicking outside the modal should close it if it doesn't contain a form. @javascript Scenario: The popup closes when clicked on dead space - YUI @@ -20,20 +20,19 @@ Feature: Close modals by clicking outside them And I click on "a new question" "link" # Cannot use the normal ‘I click on’ here, because the pop-up gets in the way. And I click on ".moodle-dialogue-lightbox" "css_element" skipping visibility check - Then I should not see "Choose a question type to add" + # The modal does not close because it contains a form. + Then I should see "Choose a question type to add" @javascript Scenario: The popup closes when clicked on dead space - Modal - Given the following "courses" exist: - | fullname | shortname | - | Course 1 | C1 | - And I log in as "admin" - And I am on "Course 1" course homepage - And I turn editing mode on - And I click on "Add topics" "link" + Given I log in as "admin" + And I am on site homepage + And I click on "Calendar" "link" + And I click on "New event" "button" When I click on "[data-region='modal-container']" "css_element" - Then ".modal-backdrop" "css_element" should not be visible - And ".modal-content" "css_element" should not be visible + # The modal does not close becaue it contains a form. + Then ".modal-backdrop" "css_element" should be visible + And ".modal-content" "css_element" should be visible @javascript Scenario: The popup help closes when clicked diff --git a/lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue-debug.js b/lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue-debug.js index 7eec15782d1..ca595e48619 100644 --- a/lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue-debug.js +++ b/lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue-debug.js @@ -45,7 +45,8 @@ var DIALOGUE_NAME = 'Moodle dialogue', MENUBAR_SELECTOR = '[role=menubar]', DOT = '.', HAS_ZINDEX = 'moodle-has-zindex', - CAN_RECEIVE_FOCUS_SELECTOR = 'input:not([type="hidden"]), a[href], button, textarea, select, [tabindex]'; + CAN_RECEIVE_FOCUS_SELECTOR = 'input:not([type="hidden"]), a[href], button, textarea, select, [tabindex]', + FORM_SELECTOR = 'form'; /** * A re-usable dialogue box with Moodle classes applied. @@ -103,6 +104,20 @@ Y.extend(DIALOGUE, Y.Panel, { */ _hiddenSiblings: null, + /** + * Hide the modal only if it doesn't contain a form. + * + * @method hideIfNotForm + */ + hideIfNotForm: function() { + var bb = this.get('boundingBox'), + formElement = bb.one(FORM_SELECTOR); + + if (formElement === null) { + this.hide(); + } + }, + /** * Initialise the dialogue. * @@ -162,7 +177,7 @@ Y.extend(DIALOGUE, Y.Panel, { var maskNode = this.get('maskNode'); if (this._currentMaskNodeId !== maskNode.get('_yuid')) { this._currentMaskNodeId = maskNode.get('_yuid'); - maskNode.on('click', this.hide, this); + maskNode.on('click', this.hideIfNotForm, this); } if (bb.getStyle('position') !== 'fixed') { diff --git a/lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue-min.js b/lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue-min.js index 4e29bd4a406..4f4a4431f94 100644 --- a/lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue-min.js +++ b/lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue-min.js @@ -1,2 +1,2 @@ -YUI.add("moodle-core-notification-dialogue",function(e,t){var n,r,i,s,o,u,a;n="moodle-dialogue",r="notificationBase",i="yesLabel",s="noLabel",o="title",u="question",a={BASE:"moodle-dialogue-base",WRAP:"moodle-dialogue-wrap",HEADER:"moodle-dialogue-hd",BODY:"moodle-dialogue-bd",CONTENT:"moodle-dialogue-content",FOOTER:"moodle-dialogue-ft",HIDDEN:"hidden",LIGHTBOX:"moodle-dialogue-lightbox"},M.core=M.core||{};var f="Moodle dialogue",l,c=n+"-fullscreen",h=n+"-hidden",p=" [role=dialog]",d="[role=menubar]",v=".",m="moodle-has-zindex",g='input:not([type="hidden"]), a[href], button, textarea, select, [tabindex]';l=function(t){var n="moodle-dialogue-"+e.stamp(this);t.notificationBase=e.Node.create('