From 063974130716533b5ba8e6bba5d751ff748497f1 Mon Sep 17 00:00:00 2001 From: Damyon Wiese Date: Wed, 16 Aug 2017 15:26:48 +0800 Subject: [PATCH 1/2] MDL-59628 datepicker: Revert invalid zindex change Revert "MDL-59382 theme: bring the date picker forward" This reverts commit 63dd75229b3bfa43dec2e8f8fc6b03587972c1bb. --- theme/bootstrapbase/less/moodle/calendar.less | 3 --- theme/bootstrapbase/less/moodle/modal.less | 2 +- theme/bootstrapbase/style/moodle.css | 3 --- 3 files changed, 1 insertion(+), 7 deletions(-) diff --git a/theme/bootstrapbase/less/moodle/calendar.less b/theme/bootstrapbase/less/moodle/calendar.less index 59fdeb91b79..b9de4789584 100644 --- a/theme/bootstrapbase/less/moodle/calendar.less +++ b/theme/bootstrapbase/less/moodle/calendar.less @@ -22,9 +22,6 @@ // Calendar restyling. .path-calendar { - #dateselector-calendar-panel { - z-index: @zindexModalContainer+4; - } .calendartable { width: 100%; th, diff --git a/theme/bootstrapbase/less/moodle/modal.less b/theme/bootstrapbase/less/moodle/modal.less index 32f89c1f95f..7eac3fe7dad 100644 --- a/theme/bootstrapbase/less/moodle/modal.less +++ b/theme/bootstrapbase/less/moodle/modal.less @@ -10,7 +10,7 @@ body { right: 0; bottom: 0; left: 0; - z-index: @zindexModalContainer; + z-index: 4050; outline: 0; overflow-x: hidden; overflow-y: auto; diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css index 0772ef9f0c2..46d4f9d63e9 100644 --- a/theme/bootstrapbase/style/moodle.css +++ b/theme/bootstrapbase/style/moodle.css @@ -5551,9 +5551,6 @@ img.iconsmall { .calendar_event_user { background-color: #dce7ec; } -.path-calendar #dateselector-calendar-panel { - z-index: 4054; -} .path-calendar .calendartable { width: 100%; } From 26c4d2bf79e285f822acb2797291ea2c90aea5f7 Mon Sep 17 00:00:00 2001 From: Damyon Wiese Date: Wed, 16 Aug 2017 15:38:41 +0800 Subject: [PATCH 2/2] MDL-59628 forms: Get a valid zindex for datepicker We have a way to determine a valid zindex when adding things to a page. Find all the moodle-has-zindex things and choose a value bigger all of them. This needs doing in javascript whenever a thing is opened. It's not possible to fix generically in CSS (remember the historic z-index wars). --- .../moodle-form-dateselector-debug.js | 30 ++++++++++++++++--- .../moodle-form-dateselector-min.js | 4 +-- .../moodle-form-dateselector.js | 30 ++++++++++++++++--- .../yui/src/dateselector/js/dateselector.js | 30 ++++++++++++++++--- theme/bootstrapbase/less/moodle.less | 3 -- theme/bootstrapbase/less/moodle/modal.less | 1 - .../bootstrapbase/less/moodle/variables.less | 7 ----- theme/bootstrapbase/style/moodle.css | 2 -- 8 files changed, 80 insertions(+), 27 deletions(-) delete mode 100644 theme/bootstrapbase/less/moodle/variables.less diff --git a/lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector-debug.js b/lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector-debug.js index 217fc4a5c7a..3c92da386c9 100644 --- a/lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector-debug.js +++ b/lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector-debug.js @@ -2,6 +2,11 @@ YUI.add('moodle-form-dateselector', function (Y, NAME) { /* global CALENDAR, MOODLECALENDAR */ +var DIALOGUE_SELECTOR = ' [role=dialog]', + MENUBAR_SELECTOR = '[role=menubar]', + DOT = '.', + HAS_ZINDEX = 'moodle-has-zindex'; + /** * Add some custom methods to the node class to make our lives a little * easier within this module. @@ -73,10 +78,19 @@ M.form.dateselector = { constrain: true // constrain panel to viewport. }); this.panel.render(document.body); - // zIndex is added by panel.render() and is set to 0. - // Remove zIndex from panel, as this should be set by CSS. This can be done by removeAttr but - // ie8 fails and there is know issue for it. - Y.one('#dateselector-calendar-panel').setStyle('zIndex', null); + + // Determine the correct zindex by looking at all existing dialogs and menubars in the page. + var highestzindex = 0; + Y.all(DIALOGUE_SELECTOR + ', ' + MENUBAR_SELECTOR + ', ' + DOT + HAS_ZINDEX).each(function(node) { + var zindex = this.findZIndex(node); + if (zindex > highestzindex) { + highestzindex = zindex; + } + }, this); + // Only set the zindex if we found a wrapper. + var zindexvalue = (highestzindex + 1).toString(); + Y.one('#dateselector-calendar-panel').setStyle('zIndex', zindexvalue); + this.panel.on('heightChange', this.fix_position, this); Y.one('#dateselector-calendar-panel').on('click', function(e) { @@ -100,6 +114,14 @@ M.form.dateselector = { config.sat] }); }, + findZIndex: function(node) { + // In most cases the zindex is set on the parent of the dialog. + var zindex = node.getStyle('zIndex') || node.ancestor().getStyle('zIndex'); + if (zindex) { + return parseInt(zindex, 10); + } + return 0; + }, cancel_any_timeout: function() { if (this.hidetimeout) { clearTimeout(this.hidetimeout); diff --git a/lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector-min.js b/lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector-min.js index ca09d67e070..238b10eeed3 100644 --- a/lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector-min.js +++ b/lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector-min.js @@ -1,2 +1,2 @@ -YUI.add("moodle-form-dateselector",function(e,t){e.mix(e.Node.prototype,{firstOptionValue:function(){return this.get("nodeName").toLowerCase()!=="select"?!1:this.one("option").get("value")},lastOptionValue:function(){return this.get("nodeName").toLowerCase()!=="select"?!1:this.all("option").item(this.optionSize()-1).get("value")},optionSize:function(){return this.get("nodeName").toLowerCase()!=="select"?!1:parseInt(this.all("option").size(),10)},selectedOptionValue:function(){return this.get("nodeName").toLowerCase()!=="select"?!1:this.all("option").item(this.get("selectedIndex")).get("value")}}),M.form=M.form||{},M.form.dateselector={panel:null,calendar:null,currentowner:null,hidetimeout:null,repositiontimeout:null,init_date_selectors:function(t){this.panel===null&&this.initPanel(t),e.all(".fdate_time_selector").each(function(){t.node=this,new r(t)}),e.all(".fdate_selector").each(function(){t.node=this,new r(t)})},initPanel:function(t){this.panel=new e.Overlay({visible:!1,bodyContent:e.Node.create('
'),id:"dateselector-calendar-panel",constrain:!0}),this.panel.render(document.body),e.one("#dateselector-calendar-panel").setStyle("zIndex",null),this.panel.on("heightChange",this.fix_position,this),e.one("#dateselector-calendar-panel").on("click",function(e){e.halt()}),e.one(document.body).on("click",this.document_click,this),this.calendar=new n({contentBox:"#dateselector-calendar-content",width:"300px",showPrevMonth:!0,showNextMonth:!0,firstdayofweek:parseInt(t.firstdayofweek,10),WEEKDAYS_MEDIUM:[t.sun,t.mon,t.tue,t.wed,t.thu,t.fri,t.sat]})},cancel_any_timeout:function(){this.hidetimeout&&(clearTimeout(this.hidetimeout),this.hidetimeout=null),this.repositiontimeout&&(clearTimeout(this.repositiontimeout),this.repositiontimeout=null)},delayed_reposition:function(){this.repositiontimeout&&(clearTimeout(this.repositiontimeout),this.repositiontimeout=null),this.repositiontimeout=setTimeout(this.fix_position,500)},fix_position:function(){if(this.currentowner){var t=[e.WidgetPositionAlign.BL,e.WidgetPositionAlign.TL];window.right_to_left()&&(t=[e.WidgetPositionAlign.BR,e.WidgetPositionAlign.TR]),this.panel.set("align",{node:this.currentowner.get("node").one("select"),points:t})}},document_click:function(e){this.currentowner&&(this.currentowner.get("node").ancestor("div").contains(e.target)?setTimeout(function(){M.form.dateselector.cancel_any_timeout()},100):this.currentowner.release_calendar(e))}};var n=function(){n.superclass.constructor.apply(this,arguments)};e.extend(n,e.Calendar,{initializer:function(e){this.set("strings.very_short_weekdays",e.WEEKDAYS_MEDIUM),this.set("strings.first_weekday",e.firstdayofweek)}},{NAME:"Calendar",ATTRS:{}}),M.form_moodlecalendar=M.form_moodlecalendar||{},M.form_moodlecalendar.initializer=function(e){return new n(e)};var r=function(){r.superclass.constructor.apply(this,arguments)};r.prototype={panel:null,yearselect:null,monthselect:null,dayselect:null,calendarimage:null,enablecheckbox:null,closepopup:!0,initializer:function(){var e=this.get("node").all("select");e.each(function(e){e.get("name").match(/\[year\]/)?this.yearselect=e:e.get("name").match(/\[month\]/)?this.monthselect=e:e.get("name").match(/\[day\]/)&&(this.dayselect=e),e.after("change",this.handle_select_change,this)},this);var t=this.get("node").all("input, a");t.each(function(e){e.get("name").match(/\[calendar\]/)?(e.on("click",this.focus_event,this),this.calendarimage=e):(e.on("click",this.toggle_calendar_image,this),this.enablecheckbox=e),this.calendarimage&&this.enablecheckbox&&this.toggle_calendar_image()},this)},focus_event:function(e){M.form.dateselector.cancel_any_timeout(),M.form.dateselector.currentowner===this?this.release_calendar():(this.enablecheckbox===null||this.enablecheckbox.get("checked"))&&this.claim_calendar(),e.preventDefault()},handle_select_change:function(){this.closepopup=!1,this.set_date_from_selects(),this.closepopup=!0},claim_calendar:function(){M.form.dateselector.cancel_any_timeout();if(M.form.dateselector.currentowner===this)return;M.form.dateselector.currentowner&&M.form.dateselector.currentowner.release_calendar(),M.form.dateselector.currentowner!==this&&(this.connect_handlers(),this.set_date_from_selects()),M.form.dateselector.currentowner=this,M.form.dateselector.calendar.set("mindate",new Date(this.yearselect.firstOptionValue(),0,1)),M.form.dateselector.calendar.set("maxdate",new Date(this.yearselect.lastOptionValue(),11,31)),M.form.dateselector.panel.show(),M.form.dateselector.calendar.show(),M.form.dateselector.fix_position(),setTimeout(function(){M.form.dateselector.cancel_any_timeout()},100),M.form.dateselector.calendar.focus(),e.one(document.body).on("keyup",function(e){if(M.form.dateselector.currentowner===this&&!M.form.dateselector.calendar.get("focused")||e.keyCode===27&&M.form.dateselector.calendar.get("focused"))this.calendarimage.focus(),this.release_calendar()},this)},set_date_from_selects:function(){var e=parseInt(this.yearselect.get("value"),10),t=parseInt(this.monthselect.get("value"),10)-1,n=parseInt(this.dayselect.get("value"),10),r=new Date(e,t,n);M.form.dateselector.calendar.deselectDates(),M.form.dateselector.calendar.selectDates([r]),M.form.dateselector.calendar.set("date",r),M.form.dateselector.calendar.render(),r.getDate()!==n&&(this.dayselect.set("value",r.getDate()),this.monthselect.set("value",r.getMonth()+1))},set_selects_from_date:function(t){var n=t.newSelection[0],r=e.DataType.Date.format(n,{format:"%Y"}),i=r-this.yearselect.firstOptionValue();this.yearselect.set("selectedIndex",i),this.monthselect.set("selectedIndex",e.DataType.Date.format(n,{format:"%m"})-this.monthselect.firstOptionValue()),this.dayselect.set("selectedIndex",e.DataType.Date.format(n,{format:"%d"})-this.dayselect.firstOptionValue()),M.form.dateselector.currentowner&&this.closepopup&&this.release_calendar()},connect_handlers:function(){M.form.dateselector.calendar.on("selectionChange",this.set_selects_from_date,this,!0)}, -release_calendar:function(e){var t=M.form.dateselector.currentowner===this;M.form.dateselector.panel.hide(),M.form.dateselector.calendar.detach("selectionChange",this.set_selects_from_date),M.form.dateselector.calendar.hide(),M.form.dateselector.currentowner=null,t&&(e===null||typeof e=="undefined"||e.type!=="click")&&this.calendarimage.focus()},toggle_calendar_image:function(){this.enablecheckbox.get("checked")?(this.calendarimage.set("disabled",!1),this.calendarimage.setStyle("cursor",null)):(this.calendarimage.set("disabled","disabled"),this.calendarimage.setStyle("cursor","default"),this.release_calendar())}},e.extend(r,e.Base,r.prototype,{NAME:"Date Selector",ATTRS:{firstdayofweek:{validator:e.Lang.isString},node:{setter:function(t){return e.one(t)}}}})},"@VERSION@",{requires:["base","node","overlay","calendar"]}); +YUI.add("moodle-form-dateselector",function(e,t){var n=" [role=dialog]",r="[role=menubar]",i=".",s="moodle-has-zindex";e.mix(e.Node.prototype,{firstOptionValue:function(){return this.get("nodeName").toLowerCase()!=="select"?!1:this.one("option").get("value")},lastOptionValue:function(){return this.get("nodeName").toLowerCase()!=="select"?!1:this.all("option").item(this.optionSize()-1).get("value")},optionSize:function(){return this.get("nodeName").toLowerCase()!=="select"?!1:parseInt(this.all("option").size(),10)},selectedOptionValue:function(){return this.get("nodeName").toLowerCase()!=="select"?!1:this.all("option").item(this.get("selectedIndex")).get("value")}}),M.form=M.form||{},M.form.dateselector={panel:null,calendar:null,currentowner:null,hidetimeout:null,repositiontimeout:null,init_date_selectors:function(t){this.panel===null&&this.initPanel(t),e.all(".fdate_time_selector").each(function(){t.node=this,new u(t)}),e.all(".fdate_selector").each(function(){t.node=this,new u(t)})},initPanel:function(t){this.panel=new e.Overlay({visible:!1,bodyContent:e.Node.create('
'),id:"dateselector-calendar-panel",constrain:!0}),this.panel.render(document.body);var u=0;e.all(n+", "+r+", "+i+s).each(function(e){var t=this.findZIndex(e);t>u&&(u=t)},this);var a=(u+1).toString();e.one("#dateselector-calendar-panel").setStyle("zIndex",a),this.panel.on("heightChange",this.fix_position,this),e.one("#dateselector-calendar-panel").on("click",function(e){e.halt()}),e.one(document.body).on("click",this.document_click,this),this.calendar=new o({contentBox:"#dateselector-calendar-content",width:"300px",showPrevMonth:!0,showNextMonth:!0,firstdayofweek:parseInt(t.firstdayofweek,10),WEEKDAYS_MEDIUM:[t.sun,t.mon,t.tue,t.wed,t.thu,t.fri,t.sat]})},findZIndex:function(e){var t=e.getStyle("zIndex")||e.ancestor().getStyle("zIndex");return t?parseInt(t,10):0},cancel_any_timeout:function(){this.hidetimeout&&(clearTimeout(this.hidetimeout),this.hidetimeout=null),this.repositiontimeout&&(clearTimeout(this.repositiontimeout),this.repositiontimeout=null)},delayed_reposition:function(){this.repositiontimeout&&(clearTimeout(this.repositiontimeout),this.repositiontimeout=null),this.repositiontimeout=setTimeout(this.fix_position,500)},fix_position:function(){if(this.currentowner){var t=[e.WidgetPositionAlign.BL,e.WidgetPositionAlign.TL];window.right_to_left()&&(t=[e.WidgetPositionAlign.BR,e.WidgetPositionAlign.TR]),this.panel.set("align",{node:this.currentowner.get("node").one("select"),points:t})}},document_click:function(e){this.currentowner&&(this.currentowner.get("node").ancestor("div").contains(e.target)?setTimeout(function(){M.form.dateselector.cancel_any_timeout()},100):this.currentowner.release_calendar(e))}};var o=function(){o.superclass.constructor.apply(this,arguments)};e.extend(o,e.Calendar,{initializer:function(e){this.set("strings.very_short_weekdays",e.WEEKDAYS_MEDIUM),this.set("strings.first_weekday",e.firstdayofweek)}},{NAME:"Calendar",ATTRS:{}}),M.form_moodlecalendar=M.form_moodlecalendar||{},M.form_moodlecalendar.initializer=function(e){return new o(e)};var u=function(){u.superclass.constructor.apply(this,arguments)};u.prototype={panel:null,yearselect:null,monthselect:null,dayselect:null,calendarimage:null,enablecheckbox:null,closepopup:!0,initializer:function(){var e=this.get("node").all("select");e.each(function(e){e.get("name").match(/\[year\]/)?this.yearselect=e:e.get("name").match(/\[month\]/)?this.monthselect=e:e.get("name").match(/\[day\]/)&&(this.dayselect=e),e.after("change",this.handle_select_change,this)},this);var t=this.get("node").all("input, a");t.each(function(e){e.get("name").match(/\[calendar\]/)?(e.on("click",this.focus_event,this),this.calendarimage=e):(e.on("click",this.toggle_calendar_image,this),this.enablecheckbox=e),this.calendarimage&&this.enablecheckbox&&this.toggle_calendar_image()},this)},focus_event:function(e){M.form.dateselector.cancel_any_timeout(),M.form.dateselector.currentowner===this?this.release_calendar():(this.enablecheckbox===null||this.enablecheckbox.get("checked"))&&this.claim_calendar(),e.preventDefault()},handle_select_change:function(){this.closepopup=!1,this.set_date_from_selects(),this.closepopup=!0},claim_calendar:function(){M.form.dateselector.cancel_any_timeout();if(M.form.dateselector.currentowner===this)return;M.form.dateselector.currentowner&&M.form.dateselector.currentowner.release_calendar(),M.form.dateselector.currentowner!==this&&(this.connect_handlers(),this.set_date_from_selects()),M.form.dateselector.currentowner=this,M.form.dateselector.calendar.set("mindate",new Date(this.yearselect.firstOptionValue(),0,1)),M.form.dateselector.calendar.set("maxdate",new Date(this.yearselect.lastOptionValue(),11,31)),M.form.dateselector.panel.show(),M.form.dateselector.calendar.show(),M.form.dateselector.fix_position(),setTimeout(function(){M.form.dateselector.cancel_any_timeout()},100),M.form.dateselector.calendar.focus(),e.one(document.body).on("keyup",function(e){if(M.form.dateselector.currentowner===this&&!M.form.dateselector.calendar.get("focused")||e.keyCode===27&&M.form.dateselector.calendar.get("focused"))this.calendarimage.focus(),this.release_calendar()},this)},set_date_from_selects:function(){var e=parseInt(this.yearselect.get("value"),10),t=parseInt(this.monthselect.get("value"),10)-1,n=parseInt(this.dayselect.get("value"),10),r=new Date(e,t,n);M.form.dateselector.calendar.deselectDates(),M.form.dateselector.calendar.selectDates([r]),M.form.dateselector.calendar.set("date",r),M.form.dateselector.calendar.render(),r.getDate()!==n&&(this.dayselect.set("value",r.getDate()),this.monthselect.set("value",r.getMonth()+1))},set_selects_from_date:function(t){var n=t.newSelection[0],r=e.DataType.Date.format(n,{format:"%Y"}),i=r-this.yearselect.firstOptionValue();this.yearselect.set("selectedIndex",i),this.monthselect.set("selectedIndex",e.DataType.Date.format(n,{format:"%m"})-this.monthselect.firstOptionValue()),this.dayselect +.set("selectedIndex",e.DataType.Date.format(n,{format:"%d"})-this.dayselect.firstOptionValue()),M.form.dateselector.currentowner&&this.closepopup&&this.release_calendar()},connect_handlers:function(){M.form.dateselector.calendar.on("selectionChange",this.set_selects_from_date,this,!0)},release_calendar:function(e){var t=M.form.dateselector.currentowner===this;M.form.dateselector.panel.hide(),M.form.dateselector.calendar.detach("selectionChange",this.set_selects_from_date),M.form.dateselector.calendar.hide(),M.form.dateselector.currentowner=null,t&&(e===null||typeof e=="undefined"||e.type!=="click")&&this.calendarimage.focus()},toggle_calendar_image:function(){this.enablecheckbox.get("checked")?(this.calendarimage.set("disabled",!1),this.calendarimage.setStyle("cursor",null)):(this.calendarimage.set("disabled","disabled"),this.calendarimage.setStyle("cursor","default"),this.release_calendar())}},e.extend(u,e.Base,u.prototype,{NAME:"Date Selector",ATTRS:{firstdayofweek:{validator:e.Lang.isString},node:{setter:function(t){return e.one(t)}}}})},"@VERSION@",{requires:["base","node","overlay","calendar"]}); diff --git a/lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector.js b/lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector.js index 217fc4a5c7a..3c92da386c9 100644 --- a/lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector.js +++ b/lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector.js @@ -2,6 +2,11 @@ YUI.add('moodle-form-dateselector', function (Y, NAME) { /* global CALENDAR, MOODLECALENDAR */ +var DIALOGUE_SELECTOR = ' [role=dialog]', + MENUBAR_SELECTOR = '[role=menubar]', + DOT = '.', + HAS_ZINDEX = 'moodle-has-zindex'; + /** * Add some custom methods to the node class to make our lives a little * easier within this module. @@ -73,10 +78,19 @@ M.form.dateselector = { constrain: true // constrain panel to viewport. }); this.panel.render(document.body); - // zIndex is added by panel.render() and is set to 0. - // Remove zIndex from panel, as this should be set by CSS. This can be done by removeAttr but - // ie8 fails and there is know issue for it. - Y.one('#dateselector-calendar-panel').setStyle('zIndex', null); + + // Determine the correct zindex by looking at all existing dialogs and menubars in the page. + var highestzindex = 0; + Y.all(DIALOGUE_SELECTOR + ', ' + MENUBAR_SELECTOR + ', ' + DOT + HAS_ZINDEX).each(function(node) { + var zindex = this.findZIndex(node); + if (zindex > highestzindex) { + highestzindex = zindex; + } + }, this); + // Only set the zindex if we found a wrapper. + var zindexvalue = (highestzindex + 1).toString(); + Y.one('#dateselector-calendar-panel').setStyle('zIndex', zindexvalue); + this.panel.on('heightChange', this.fix_position, this); Y.one('#dateselector-calendar-panel').on('click', function(e) { @@ -100,6 +114,14 @@ M.form.dateselector = { config.sat] }); }, + findZIndex: function(node) { + // In most cases the zindex is set on the parent of the dialog. + var zindex = node.getStyle('zIndex') || node.ancestor().getStyle('zIndex'); + if (zindex) { + return parseInt(zindex, 10); + } + return 0; + }, cancel_any_timeout: function() { if (this.hidetimeout) { clearTimeout(this.hidetimeout); diff --git a/lib/form/yui/src/dateselector/js/dateselector.js b/lib/form/yui/src/dateselector/js/dateselector.js index bf845318e79..12b7eeebfe4 100644 --- a/lib/form/yui/src/dateselector/js/dateselector.js +++ b/lib/form/yui/src/dateselector/js/dateselector.js @@ -1,5 +1,10 @@ /* global CALENDAR, MOODLECALENDAR */ +var DIALOGUE_SELECTOR = ' [role=dialog]', + MENUBAR_SELECTOR = '[role=menubar]', + DOT = '.', + HAS_ZINDEX = 'moodle-has-zindex'; + /** * Add some custom methods to the node class to make our lives a little * easier within this module. @@ -71,10 +76,19 @@ M.form.dateselector = { constrain: true // constrain panel to viewport. }); this.panel.render(document.body); - // zIndex is added by panel.render() and is set to 0. - // Remove zIndex from panel, as this should be set by CSS. This can be done by removeAttr but - // ie8 fails and there is know issue for it. - Y.one('#dateselector-calendar-panel').setStyle('zIndex', null); + + // Determine the correct zindex by looking at all existing dialogs and menubars in the page. + var highestzindex = 0; + Y.all(DIALOGUE_SELECTOR + ', ' + MENUBAR_SELECTOR + ', ' + DOT + HAS_ZINDEX).each(function(node) { + var zindex = this.findZIndex(node); + if (zindex > highestzindex) { + highestzindex = zindex; + } + }, this); + // Only set the zindex if we found a wrapper. + var zindexvalue = (highestzindex + 1).toString(); + Y.one('#dateselector-calendar-panel').setStyle('zIndex', zindexvalue); + this.panel.on('heightChange', this.fix_position, this); Y.one('#dateselector-calendar-panel').on('click', function(e) { @@ -98,6 +112,14 @@ M.form.dateselector = { config.sat] }); }, + findZIndex: function(node) { + // In most cases the zindex is set on the parent of the dialog. + var zindex = node.getStyle('zIndex') || node.ancestor().getStyle('zIndex'); + if (zindex) { + return parseInt(zindex, 10); + } + return 0; + }, cancel_any_timeout: function() { if (this.hidetimeout) { clearTimeout(this.hidetimeout); diff --git a/theme/bootstrapbase/less/moodle.less b/theme/bootstrapbase/less/moodle.less index 0bc21d00cee..0a980d04ac3 100644 --- a/theme/bootstrapbase/less/moodle.less +++ b/theme/bootstrapbase/less/moodle.less @@ -3,9 +3,6 @@ @import "fontawesome/font-awesome"; @import "fontawesome/moodle-path"; -// Import the Moodle variables. -@import "moodle/variables.less"; - // Old Moodle stuff from base theme. // Massive, needs broken up. @import "moodle/core"; diff --git a/theme/bootstrapbase/less/moodle/modal.less b/theme/bootstrapbase/less/moodle/modal.less index 7eac3fe7dad..f1e1153153e 100644 --- a/theme/bootstrapbase/less/moodle/modal.less +++ b/theme/bootstrapbase/less/moodle/modal.less @@ -105,7 +105,6 @@ body { } .modal-backdrop { - z-index: @zindexModalContainerBackdrop; background-color: #aaa; opacity: 0.4; } diff --git a/theme/bootstrapbase/less/moodle/variables.less b/theme/bootstrapbase/less/moodle/variables.less deleted file mode 100644 index b86ad2fcc48..00000000000 --- a/theme/bootstrapbase/less/moodle/variables.less +++ /dev/null @@ -1,7 +0,0 @@ -// Global variables for use within Moodle's less style sheets. -// These should be unique and not override the variables defined -// in Bootstrap. - -@zindexModalContainer: 4050; -@zindexModalContainerBackdrop: 4049; - diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css index 46d4f9d63e9..917a205eef2 100644 --- a/theme/bootstrapbase/style/moodle.css +++ b/theme/bootstrapbase/style/moodle.css @@ -17048,7 +17048,6 @@ body.modal-open { border-radius: 0 0 10px 10px; } .modal-backdrop { - z-index: 4049; background-color: #aaa; opacity: 0.4; } @@ -19303,7 +19302,6 @@ div[data-flexitour="backdrop"] { background-color: #000; opacity: 0.8; filter: alpha(opacity=80); - z-index: 4049; background-color: #aaa; opacity: 0.4; z-index: 4030;