From 735ef8ba928cfd19c8de3f867d37c1ff2aa63ea9 Mon Sep 17 00:00:00 2001 From: sam marshall Date: Thu, 17 Sep 2015 18:35:55 +0100 Subject: [PATCH] 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. --- .../moodle-core-lockscroll-debug.js | 11 +++++++++++ .../moodle-core-lockscroll-min.js | 2 +- .../moodle-core-lockscroll/moodle-core-lockscroll.js | 11 +++++++++++ lib/yui/src/lockscroll/js/lockscroll.js | 11 +++++++++++ 4 files changed, 34 insertions(+), 1 deletion(-) diff --git a/lib/yui/build/moodle-core-lockscroll/moodle-core-lockscroll-debug.js b/lib/yui/build/moodle-core-lockscroll/moodle-core-lockscroll-debug.js index 138ce04b914..c5b7e404c0f 100644 --- a/lib/yui/build/moodle-core-lockscroll/moodle-core-lockscroll-debug.js +++ b/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); diff --git a/lib/yui/build/moodle-core-lockscroll/moodle-core-lockscroll-min.js b/lib/yui/build/moodle-core-lockscroll/moodle-core-lockscroll-min.js index 9760a7812a5..5207360b5d0 100644 --- a/lib/yui/build/moodle-core-lockscroll/moodle-core-lockscroll-min.js +++ b/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"]}); diff --git a/lib/yui/build/moodle-core-lockscroll/moodle-core-lockscroll.js b/lib/yui/build/moodle-core-lockscroll/moodle-core-lockscroll.js index 9d59fe9ffd8..c15b74eabc0 100644 --- a/lib/yui/build/moodle-core-lockscroll/moodle-core-lockscroll.js +++ b/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); diff --git a/lib/yui/src/lockscroll/js/lockscroll.js b/lib/yui/src/lockscroll/js/lockscroll.js index 0173793a15d..c9487fbd124 100644 --- a/lib/yui/src/lockscroll/js/lockscroll.js +++ b/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);