MDL-41188 javascript: Change full screen dialogue to position: fixed

This fixes all sorts of bother with the fullscreen dialogues. It also means that you don't lose your scroll position in the document when the full screen popup opens/closes. It prevents several bugs on mobile where the dialogue could get scrolled off the page (and handles orientation changes better). Contains one other tiny tweak to make the close button on the dialogue a bit bigger so it's easier to click (only for fullscreen).
moodle · Sep 12, 2013 · 2a808ce · 2a808ce
1 parent c1f10ff
commit 2a808ce
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 141 deletions.
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
@@ -40,10 +40,8 @@ var DIALOGUE_NAME = 'Moodle dialogue',
     DIALOGUE,
     DIALOGUE_FULLSCREEN_CLASS = DIALOGUE_PREFIX + '-fullscreen',
     DIALOGUE_HIDDEN_CLASS = DIALOGUE_PREFIX + '-hidden',
-    DIALOGUE_MODAL_CLASS = 'yui3-widget-modal',
     DIALOGUE_SELECTOR =' [role=dialog]',
-    MENUBAR_SELECTOR = '[role=menubar]',
-    NOSCROLLING_CLASS = 'no-scrolling';
+    MENUBAR_SELECTOR = '[role=menubar]';
 
 /**
  * A re-usable dialogue box with Moodle classes applied.
@@ -189,38 +187,6 @@ Y.extend(DIALOGUE, Y.Panel, {
         return 0;
     },
 
-    /**
-     * Enable or disable document scrolling (see if there are any modal or fullscreen popups).
-     *
-     * @method toggleDocumentScrolling
-     * @param Boolean scroll - If true, allow document scrolling.
-     * @return void
-     */
-    toggleDocumentScrolling : function() {
-        var windowroot = Y.one(Y.config.doc.body),
-            scroll = true,
-            search;
-
-        search = '.' + DIALOGUE_FULLSCREEN_CLASS + ', .' + DIALOGUE_MODAL_CLASS;
-        Y.all(search).each(function (node) {
-            if (!node.hasClass(DIALOGUE_HIDDEN_CLASS)) {
-                scroll = false;
-            }
-        });
-
-        if (Y.UA.ie > 0) {
-            // Remember the previous value:
-            windowroot = Y.one('html');
-        }
-        if (scroll) {
-            if (windowroot.hasClass(NOSCROLLING_CLASS)) {
-                windowroot.removeClass(NOSCROLLING_CLASS);
-            }
-        } else {
-            windowroot.addClass(NOSCROLLING_CLASS);
-        }
-    },
-
     /**
      * Event listener for the visibility changed event.
      *
@@ -257,7 +223,6 @@ Y.extend(DIALOGUE, Y.Panel, {
             if (this.get('center') && !e.prevVal && e.newVal) {
                 this.centerDialogue();
             }
-            this.toggleDocumentScrolling();
         }
     },
     /**
@@ -277,17 +242,21 @@ Y.extend(DIALOGUE, Y.Panel, {
 
             // Size and position the fullscreen dialog.
 
-            bb.addClass(DIALOGUE_PREFIX+'-fullscreen');
-            bb.setStyles({'left' : null, 'top' : null, 'width' : null, 'height' : null});
+            bb.addClass(DIALOGUE_FULLSCREEN_CLASS);
+            bb.setStyles({'left' : null,
+                          'top' : null,
+                          'width' : null,
+                          'height' : null,
+                          'right' : null,
+                          'bottom' : null});
 
             content = Y.one('#' + this.get('id') + ' .' + CSS.BODY);
             content.setStyle('overflow', 'auto');
         } else {
             if (this.get('responsive')) {
                 // We must reset any of the fullscreen changes.
-                bb.removeClass(DIALOGUE_PREFIX+'-fullscreen')
-                    .setStyles({'overflow' : 'inherit',
-                                'width' : this.get('width'),
+                bb.removeClass(DIALOGUE_FULLSCREEN_CLASS)
+                    .setStyles({'width' : this.get('width'),
                                 'height' : this.get('height')});
                 content = Y.one('#' + this.get('id') + ' .' + CSS.BODY);
                 content.setStyle('overflow', 'inherit');

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
diff --git a/lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue.js b/lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue.js
@@ -40,10 +40,8 @@ var DIALOGUE_NAME = 'Moodle dialogue',
     DIALOGUE,
     DIALOGUE_FULLSCREEN_CLASS = DIALOGUE_PREFIX + '-fullscreen',
     DIALOGUE_HIDDEN_CLASS = DIALOGUE_PREFIX + '-hidden',
-    DIALOGUE_MODAL_CLASS = 'yui3-widget-modal',
     DIALOGUE_SELECTOR =' [role=dialog]',
-    MENUBAR_SELECTOR = '[role=menubar]',
-    NOSCROLLING_CLASS = 'no-scrolling';
+    MENUBAR_SELECTOR = '[role=menubar]';
 
 /**
  * A re-usable dialogue box with Moodle classes applied.
@@ -189,38 +187,6 @@ Y.extend(DIALOGUE, Y.Panel, {
         return 0;
     },
 
-    /**
-     * Enable or disable document scrolling (see if there are any modal or fullscreen popups).
-     *
-     * @method toggleDocumentScrolling
-     * @param Boolean scroll - If true, allow document scrolling.
-     * @return void
-     */
-    toggleDocumentScrolling : function() {
-        var windowroot = Y.one(Y.config.doc.body),
-            scroll = true,
-            search;
-
-        search = '.' + DIALOGUE_FULLSCREEN_CLASS + ', .' + DIALOGUE_MODAL_CLASS;
-        Y.all(search).each(function (node) {
-            if (!node.hasClass(DIALOGUE_HIDDEN_CLASS)) {
-                scroll = false;
-            }
-        });
-
-        if (Y.UA.ie > 0) {
-            // Remember the previous value:
-            windowroot = Y.one('html');
-        }
-        if (scroll) {
-            if (windowroot.hasClass(NOSCROLLING_CLASS)) {
-                windowroot.removeClass(NOSCROLLING_CLASS);
-            }
-        } else {
-            windowroot.addClass(NOSCROLLING_CLASS);
-        }
-    },
-
     /**
      * Event listener for the visibility changed event.
      *
@@ -257,7 +223,6 @@ Y.extend(DIALOGUE, Y.Panel, {
             if (this.get('center') && !e.prevVal && e.newVal) {
                 this.centerDialogue();
             }
-            this.toggleDocumentScrolling();
         }
     },
     /**
@@ -277,17 +242,21 @@ Y.extend(DIALOGUE, Y.Panel, {
 
             // Size and position the fullscreen dialog.
 
-            bb.addClass(DIALOGUE_PREFIX+'-fullscreen');
-            bb.setStyles({'left' : null, 'top' : null, 'width' : null, 'height' : null});
+            bb.addClass(DIALOGUE_FULLSCREEN_CLASS);
+            bb.setStyles({'left' : null,
+                          'top' : null,
+                          'width' : null,
+                          'height' : null,
+                          'right' : null,
+                          'bottom' : null});
 
             content = Y.one('#' + this.get('id') + ' .' + CSS.BODY);
             content.setStyle('overflow', 'auto');
         } else {
             if (this.get('responsive')) {
                 // We must reset any of the fullscreen changes.
-                bb.removeClass(DIALOGUE_PREFIX+'-fullscreen')
-                    .setStyles({'overflow' : 'inherit',
-                                'width' : this.get('width'),
+                bb.removeClass(DIALOGUE_FULLSCREEN_CLASS)
+                    .setStyles({'width' : this.get('width'),
                                 'height' : this.get('height')});
                 content = Y.one('#' + this.get('id') + ' .' + CSS.BODY);
                 content.setStyle('overflow', 'inherit');

diff --git a/lib/yui/src/notification/js/dialogue.js b/lib/yui/src/notification/js/dialogue.js
@@ -9,10 +9,8 @@ var DIALOGUE_NAME = 'Moodle dialogue',
     DIALOGUE,
     DIALOGUE_FULLSCREEN_CLASS = DIALOGUE_PREFIX + '-fullscreen',
     DIALOGUE_HIDDEN_CLASS = DIALOGUE_PREFIX + '-hidden',
-    DIALOGUE_MODAL_CLASS = 'yui3-widget-modal',
     DIALOGUE_SELECTOR =' [role=dialog]',
-    MENUBAR_SELECTOR = '[role=menubar]',
-    NOSCROLLING_CLASS = 'no-scrolling';
+    MENUBAR_SELECTOR = '[role=menubar]';
 
 /**
  * A re-usable dialogue box with Moodle classes applied.
@@ -158,38 +156,6 @@ Y.extend(DIALOGUE, Y.Panel, {
         return 0;
     },
 
-    /**
-     * Enable or disable document scrolling (see if there are any modal or fullscreen popups).
-     *
-     * @method toggleDocumentScrolling
-     * @param Boolean scroll - If true, allow document scrolling.
-     * @return void
-     */
-    toggleDocumentScrolling : function() {
-        var windowroot = Y.one(Y.config.doc.body),
-            scroll = true,
-            search;
-
-        search = '.' + DIALOGUE_FULLSCREEN_CLASS + ', .' + DIALOGUE_MODAL_CLASS;
-        Y.all(search).each(function (node) {
-            if (!node.hasClass(DIALOGUE_HIDDEN_CLASS)) {
-                scroll = false;
-            }
-        });
-
-        if (Y.UA.ie > 0) {
-            // Remember the previous value:
-            windowroot = Y.one('html');
-        }
-        if (scroll) {
-            if (windowroot.hasClass(NOSCROLLING_CLASS)) {
-                windowroot.removeClass(NOSCROLLING_CLASS);
-            }
-        } else {
-            windowroot.addClass(NOSCROLLING_CLASS);
-        }
-    },
-
     /**
      * Event listener for the visibility changed event.
      *
@@ -226,7 +192,6 @@ Y.extend(DIALOGUE, Y.Panel, {
             if (this.get('center') && !e.prevVal && e.newVal) {
                 this.centerDialogue();
             }
-            this.toggleDocumentScrolling();
         }
     },
     /**
@@ -246,17 +211,21 @@ Y.extend(DIALOGUE, Y.Panel, {
 
             // Size and position the fullscreen dialog.
 
-            bb.addClass(DIALOGUE_PREFIX+'-fullscreen');
-            bb.setStyles({'left' : null, 'top' : null, 'width' : null, 'height' : null});
+            bb.addClass(DIALOGUE_FULLSCREEN_CLASS);
+            bb.setStyles({'left' : null,
+                          'top' : null,
+                          'width' : null,
+                          'height' : null,
+                          'right' : null,
+                          'bottom' : null});
 
             content = Y.one('#' + this.get('id') + ' .' + CSS.BODY);
             content.setStyle('overflow', 'auto');
         } else {
             if (this.get('responsive')) {
                 // We must reset any of the fullscreen changes.
-                bb.removeClass(DIALOGUE_PREFIX+'-fullscreen')
-                    .setStyles({'overflow' : 'inherit',
-                                'width' : this.get('width'),
+                bb.removeClass(DIALOGUE_FULLSCREEN_CLASS)
+                    .setStyles({'width' : this.get('width'),
                                 'height' : this.get('height')});
                 content = Y.one('#' + this.get('id') + ' .' + CSS.BODY);
                 content.setStyle('overflow', 'inherit');

diff --git a/theme/base/style/core.css b/theme/base/style/core.css
@@ -928,13 +928,19 @@ sup {vertical-align: super;}
 
 .no-scrolling { overflow: hidden; }
 
-.moodle-dialogue-fullscreen {
+.moodle-dialogue-base .moodle-dialogue-fullscreen {
     left: 0px;
     top: 0px;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
+    right: 0px;
+    bottom: -50px;
+    position: fixed;
 }
+.moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
+    width: 28px;
+    height: 16px;
+    background-size: 100%;
+}
+
 
 .moodle-dialogue-base .moodle-dialogue-wrap {
     margin-top:-3px;
@@ -1010,10 +1016,13 @@ sup {vertical-align: super;}
     font-size: 16px;
 }
 
-.moodle-dialogue-base .moodle-dialogue-fullscreen,
-.moodle-dialogue-fullscreen .moodle-dialogue-content {
-    width: 100%;
-    height: 100%;
+.moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
+    overflow: auto;
+    position: absolute;
+    top: 0px;
+    bottom: 50px;
+    left: 0px;
+    right: 0px;
     margin: 0px;
     border: 0px;
 }