mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-01-19 06:18:28 +01:00
Code Issues Projects Releases Wiki Activity

MDL-59628 forms: Get a valid zindex for datepicker

Browse Source 
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).
This commit is contained in:
Damyon Wiese 2017-08-16 15:38:41 +08:00
parent 0639741307
commit 26c4d2bf79
8 changed files with 80 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector-debug.js vendored
View File

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

4
lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector-min.js vendored
View File

File diff suppressed because one or more lines are too long

30
lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector.js vendored
View File

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

30
lib/form/yui/src/dateselector/js/dateselector.js vendored
View File

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

3
theme/bootstrapbase/less/moodle.less
View File

@ -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";

1
theme/bootstrapbase/less/moodle/modal.less
View File

@ -105,7 +105,6 @@ body {
}
.modal-backdrop {
z-index: @zindexModalContainerBackdrop;
background-color: #aaa;
opacity: 0.4;
}

7
theme/bootstrapbase/less/moodle/variables.less
View File

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

2
theme/bootstrapbase/style/moodle.css
View File

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