MDL-51451 Moodle dialogues: Lock scroll causes background jump
authorsam marshall <s.marshall@open.ac.uk>
Thu, 17 Sep 2015 17:35:55 +0000 (18:35 +0100)
committersam marshall <s.marshall@open.ac.uk>
Wed, 7 Oct 2015 09:24:25 +0000 (10:24 +0100)
When you add a module or otherwise cause a Moodle dialogue to appear, this
enables the 'lock scroll' feature (the scrollbar disappears).

On some browsers this causes the width of the viewport to change, which can
cause centered/right-aligned theme elements to move distractingly.

This change temporarily sets body max-width while lock scroll is active.

lib/yui/build/moodle-core-lockscroll/moodle-core-lockscroll-debug.js
lib/yui/build/moodle-core-lockscroll/moodle-core-lockscroll-min.js
lib/yui/build/moodle-core-lockscroll/moodle-core-lockscroll.js
lib/yui/src/lockscroll/js/lockscroll.js

index 138ce04..c5b7e40 100644 (file)
Binary files a/lib/yui/build/moodle-core-lockscroll/moodle-core-lockscroll-debug.js and b/lib/yui/build/moodle-core-lockscroll/moodle-core-lockscroll-debug.js differ
index 9760a78..5207360 100644 (file)
Binary files a/lib/yui/build/moodle-core-lockscroll/moodle-core-lockscroll-min.js and b/lib/yui/build/moodle-core-lockscroll/moodle-core-lockscroll-min.js differ
index 9d59fe9..c15b74e 100644 (file)
Binary files a/lib/yui/build/moodle-core-lockscroll/moodle-core-lockscroll.js and b/lib/yui/build/moodle-core-lockscroll/moodle-core-lockscroll.js differ
index 0173793..c9487fb 100644 (file)
@@ -69,6 +69,9 @@ Y.namespace('M.core').LockScroll = Y.Base.create('lockScroll', Y.Plugin.Base, []
         this._enabled = true;
         var body = Y.one(Y.config.doc.body);
 
+        // Get width of body before turning on lockscroll.
+        var widthBefore = body.getComputedStyle('width');
+
         // We use a CSS class on the body to handle the actual locking.
         body.addClass('lockscroll');
 
@@ -81,6 +84,13 @@ Y.namespace('M.core').LockScroll = Y.Base.create('lockScroll', Y.Plugin.Base, []
         Y.log("Setting the activeScrollLocks count from " + currentCount + " to " + newCount,
                 'debug', 'moodle-core-lockscroll');
 
+        // When initially enabled, set the body max-width to its current width. This
+        // avoids centered elements jumping because the width changes when scrollbars
+        // disappear.
+        if (currentCount === 0) {
+            body.setStyle('maxWidth', widthBefore);
+        }
+
         return this;
     },
 
@@ -107,6 +117,7 @@ Y.namespace('M.core').LockScroll = Y.Base.create('lockScroll', Y.Plugin.Base, []
 
             if (currentCount === 1) {
                 body.removeClass('lockscroll');
+                body.setStyle('maxWidth', null);
             }
 
             body.setAttribute('data-activeScrollLocks', currentCount - 1);