From 8d7b8104ff35d786ac3969c5d736751a1202ffa3 Mon Sep 17 00:00:00 2001 From: ferferga Date: Thu, 14 May 2020 11:58:13 +0200 Subject: [PATCH 1/7] Overflow with scrollbar size --- src/assets/css/site.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/assets/css/site.css b/src/assets/css/site.css index e59b639f4..4ef017f7b 100644 --- a/src/assets/css/site.css +++ b/src/assets/css/site.css @@ -3,6 +3,7 @@ html { margin: 0; padding: 0; height: 100%; + overflow-y: scroll; } .material-icons { From 3250100fad772e87107f941800f4b3dfbb730371 Mon Sep 17 00:00:00 2001 From: ferferga Date: Thu, 14 May 2020 14:11:11 +0200 Subject: [PATCH 2/7] Apply style once an skin is loaded --- src/assets/css/site.css | 1 - src/components/skinManager.js | 2 ++ 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/assets/css/site.css b/src/assets/css/site.css index 963630d85..627145abc 100644 --- a/src/assets/css/site.css +++ b/src/assets/css/site.css @@ -3,7 +3,6 @@ html { margin: 0; padding: 0; height: 100%; - overflow-y: scroll; } .clipForScreenReader { diff --git a/src/components/skinManager.js b/src/components/skinManager.js index 871b6d999..0b954cac5 100644 --- a/src/components/skinManager.js +++ b/src/components/skinManager.js @@ -137,6 +137,7 @@ define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdr function onViewBeforeShow(e) { if (e.detail && e.detail.type === 'video-osd') { + document.getElementsByTagName('body')[0].style = null; return; } @@ -155,6 +156,7 @@ define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdr } } } + document.getElementsByTagName('body')[0].style = 'overflow-y: scroll'; } document.addEventListener('viewshow', onViewBeforeShow); From 6250f5bca857eeefdd1cdb784c70a19aee20f89d Mon Sep 17 00:00:00 2001 From: ferferga Date: Thu, 14 May 2020 14:18:29 +0200 Subject: [PATCH 3/7] Hide scrollbar while the videoosd component is loading --- src/components/htmlvideoplayer/plugin.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/htmlvideoplayer/plugin.js b/src/components/htmlvideoplayer/plugin.js index a1e51b44f..8a7175200 100644 --- a/src/components/htmlvideoplayer/plugin.js +++ b/src/components/htmlvideoplayer/plugin.js @@ -109,6 +109,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa function hidePrePlaybackPage() { let animatedPage = document.querySelector('.page:not(.hide)'); animatedPage.classList.add('hide'); + document.getElementsByTagName('body')[0].style = null; } function zoomIn(elem) { From 26267e382732d1d73ff429aad4bc7c5a6225bbe6 Mon Sep 17 00:00:00 2001 From: ferferga Date: Thu, 14 May 2020 14:18:50 +0200 Subject: [PATCH 4/7] Add comments for future reference --- src/components/htmlvideoplayer/plugin.js | 1 + src/components/skinManager.js | 3 +++ 2 files changed, 4 insertions(+) diff --git a/src/components/htmlvideoplayer/plugin.js b/src/components/htmlvideoplayer/plugin.js index 8a7175200..987117d17 100644 --- a/src/components/htmlvideoplayer/plugin.js +++ b/src/components/htmlvideoplayer/plugin.js @@ -109,6 +109,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa function hidePrePlaybackPage() { let animatedPage = document.querySelector('.page:not(.hide)'); animatedPage.classList.add('hide'); + // At this point, we must hide the scrollbar placeholder, so it's not being displayed while the item is being loaded document.getElementsByTagName('body')[0].style = null; } diff --git a/src/components/skinManager.js b/src/components/skinManager.js index 0b954cac5..fe64df1f2 100644 --- a/src/components/skinManager.js +++ b/src/components/skinManager.js @@ -137,6 +137,7 @@ define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdr function onViewBeforeShow(e) { if (e.detail && e.detail.type === 'video-osd') { + // This removes the space that the scrollbar takes while playing a video document.getElementsByTagName('body')[0].style = null; return; } @@ -156,6 +157,8 @@ define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdr } } } + // This keeps the scrollbar always present in all pages, so we avoid clipping while switching between pages + // that need the scrollbar and pages that don't. document.getElementsByTagName('body')[0].style = 'overflow-y: scroll'; } From 029c7382dbfdb8af03a04dd95671b505b1f4de36 Mon Sep 17 00:00:00 2001 From: ferferga Date: Sun, 17 May 2020 00:11:37 +0200 Subject: [PATCH 5/7] Use classes instead --- src/assets/css/site.css | 4 ++++ src/components/htmlvideoplayer/plugin.js | 2 +- src/components/skinManager.js | 4 ++-- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/assets/css/site.css b/src/assets/css/site.css index 627145abc..da58848cd 100644 --- a/src/assets/css/site.css +++ b/src/assets/css/site.css @@ -120,3 +120,7 @@ div[data-role=page] { .headroom--unpinned { transform: translateY(-100%); } + +.force-scroll { + overflow-y: scroll; +} diff --git a/src/components/htmlvideoplayer/plugin.js b/src/components/htmlvideoplayer/plugin.js index 987117d17..e8521d035 100644 --- a/src/components/htmlvideoplayer/plugin.js +++ b/src/components/htmlvideoplayer/plugin.js @@ -110,7 +110,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa let animatedPage = document.querySelector('.page:not(.hide)'); animatedPage.classList.add('hide'); // At this point, we must hide the scrollbar placeholder, so it's not being displayed while the item is being loaded - document.getElementsByTagName('body')[0].style = null; + document.body.classList.remove('force-scroll'); } function zoomIn(elem) { diff --git a/src/components/skinManager.js b/src/components/skinManager.js index fe64df1f2..5e5bac573 100644 --- a/src/components/skinManager.js +++ b/src/components/skinManager.js @@ -138,7 +138,7 @@ define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdr function onViewBeforeShow(e) { if (e.detail && e.detail.type === 'video-osd') { // This removes the space that the scrollbar takes while playing a video - document.getElementsByTagName('body')[0].style = null; + document.body.classList.remove('force-scroll'); return; } @@ -159,7 +159,7 @@ define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdr } // This keeps the scrollbar always present in all pages, so we avoid clipping while switching between pages // that need the scrollbar and pages that don't. - document.getElementsByTagName('body')[0].style = 'overflow-y: scroll'; + document.body.classList.add('force-scroll'); } document.addEventListener('viewshow', onViewBeforeShow); From 7aa34f1be22bb87e5b8519cf6ea208087c5069d6 Mon Sep 17 00:00:00 2001 From: ferferga Date: Sun, 17 May 2020 00:33:02 +0200 Subject: [PATCH 6/7] Switch scrollbars on slideshow.js --- src/assets/css/site.css | 4 ++++ src/components/slideshow/slideshow.js | 6 ++++++ 2 files changed, 10 insertions(+) diff --git a/src/assets/css/site.css b/src/assets/css/site.css index da58848cd..d489f77f0 100644 --- a/src/assets/css/site.css +++ b/src/assets/css/site.css @@ -124,3 +124,7 @@ div[data-role=page] { .force-scroll { overflow-y: scroll; } + +.hide-scroll { + overflow-y: hidden; +} diff --git a/src/components/slideshow/slideshow.js b/src/components/slideshow/slideshow.js index 4716135ce..ca394ef2a 100644 --- a/src/components/slideshow/slideshow.js +++ b/src/components/slideshow/slideshow.js @@ -603,6 +603,9 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f */ self.show = function () { createElements(options); + // Hides page scrollbar + document.body.classList.remove('force-scroll'); + document.body.classList.add('hide-scroll'); }; /** @@ -611,6 +614,9 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f self.hide = function () { if (dialog) { dialogHelper.close(dialog); + // Shows page scrollbar + document.body.classList.remove('hide-scroll'); + document.body.classList.add('force-scroll'); } }; }; From a5b8444e7e982183f94dac274eb5f7fe967cb2fc Mon Sep 17 00:00:00 2001 From: ferferga Date: Mon, 18 May 2020 19:54:58 +0200 Subject: [PATCH 7/7] Move scrollbar switching to onDialogClosed --- src/components/slideshow/slideshow.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/slideshow/slideshow.js b/src/components/slideshow/slideshow.js index ca394ef2a..6ff88a00c 100644 --- a/src/components/slideshow/slideshow.js +++ b/src/components/slideshow/slideshow.js @@ -438,6 +438,9 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f inputManager.off(window, onInputCommand); document.removeEventListener((window.PointerEvent ? 'pointermove' : 'mousemove'), onPointerMove); + // Shows page scrollbar + document.body.classList.remove('hide-scroll'); + document.body.classList.add('force-scroll'); } /** @@ -614,9 +617,6 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f self.hide = function () { if (dialog) { dialogHelper.close(dialog); - // Shows page scrollbar - document.body.classList.remove('hide-scroll'); - document.body.classList.add('force-scroll'); } }; };