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).

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
+        // Determine the correct zindex by looking at all existing dialogs and menubars in the page.
-        // ie8 fails and there is know issue for it.
+        var highestzindex = 0;
-        Y.one('#dateselector-calendar-panel').setStyle('zIndex', null);
+        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);

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
+        // Determine the correct zindex by looking at all existing dialogs and menubars in the page.
-        // ie8 fails and there is know issue for it.
+        var highestzindex = 0;
-        Y.one('#dateselector-calendar-panel').setStyle('zIndex', null);
+        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);

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
+        // Determine the correct zindex by looking at all existing dialogs and menubars in the page.
-        // ie8 fails and there is know issue for it.
+        var highestzindex = 0;
-        Y.one('#dateselector-calendar-panel').setStyle('zIndex', null);
+        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);

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

theme/bootstrapbase/less/moodle/modal.less

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

theme/bootstrapbase/less/moodle/variables.less

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

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;