MDL-51451 Moodle dialogues: Lock scroll causes background jump

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

@@ -71,6 +71,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');
 
@@ -83,6 +86,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;
     },
 
@@ -109,6 +119,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);

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

@@ -1 +1 @@
-YUI.add("moodle-core-lockscroll",function(e,t){e.namespace("M.core").LockScroll=e.Base.create("lockScroll",e.Plugin.Base,[],{_enabled:!1,destructor:function(){this.disableScrollLock()},enableScrollLock:function(t){if(this.isActive())return;var n=this.get("host").get("boundingBox").get("region").height,r=e.config.win.innerHeight||e.config.doc.documentElement.clientHeight||0;if(!t&&n>r-10)return;this._enabled=!0;var i=e.one(e.config.doc.body);i.addClass("lockscroll");var s=parseInt(i.getAttribute("data-activeScrollLocks"),10)||0,o=s+1;return i.setAttribute("data-activeScrollLocks",o),this},disableScrollLock:function(){if(this.isActive()){this._enabled=!1;var t=e.one(e.config.doc.body),n=parseInt(t.getAttribute("data-activeScrollLocks"),10)||1,r=n-1;n===1&&t.removeClass("lockscroll"),t.setAttribute("data-activeScrollLocks",n-1)}return this},isActive:function(){return this._enabled}},{NS:"lockScroll",ATTRS:{}})},"@VERSION@",{requires:["plugin","base-build"]});
+YUI.add("moodle-core-lockscroll",function(e,t){e.namespace("M.core").LockScroll=e.Base.create("lockScroll",e.Plugin.Base,[],{_enabled:!1,destructor:function(){this.disableScrollLock()},enableScrollLock:function(t){if(this.isActive())return;var n=this.get("host").get("boundingBox").get("region").height,r=e.config.win.innerHeight||e.config.doc.documentElement.clientHeight||0;if(!t&&n>r-10)return;this._enabled=!0;var i=e.one(e.config.doc.body),s=i.getComputedStyle("width");i.addClass("lockscroll");var o=parseInt(i.getAttribute("data-activeScrollLocks"),10)||0,u=o+1;return i.setAttribute("data-activeScrollLocks",u),o===0&&i.setStyle("maxWidth",s),this},disableScrollLock:function(){if(this.isActive()){this._enabled=!1;var t=e.one(e.config.doc.body),n=parseInt(t.getAttribute("data-activeScrollLocks"),10)||1,r=n-1;n===1&&(t.removeClass("lockscroll"),t.setStyle("maxWidth",null)),t.setAttribute("data-activeScrollLocks",n-1)}return this},isActive:function(){return this._enabled}},{NS:"lockScroll",ATTRS:{}})},"@VERSION@",{requires:["plugin","base-build"]});

lib/yui/build/moodle-core-lockscroll/moodle-core-lockscroll.js

@@ -68,6 +68,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');
 
@@ -78,6 +81,13 @@ Y.namespace('M.core').LockScroll = Y.Base.create('lockScroll', Y.Plugin.Base, []
             newCount = currentCount + 1;
         body.setAttribute('data-activeScrollLocks', newCount);
 
+        // 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;
     },
 
@@ -103,6 +113,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);

lib/yui/src/lockscroll/js/lockscroll.js

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