From cb2102c9bce546d6983908b15678d3fd9533787f Mon Sep 17 00:00:00 2001 From: Maximilian <787658+mfranzke@users.noreply.github.com> Date: Sun, 30 Jan 2022 14:50:58 +0100 Subject: [PATCH 1/9] refactor: fixed scrolling behaviour and replaced plugin by native functionality we've been using a JS plugin previously most likely to enable or polyfill the smooth scrolling behaviour. --- .../src/scripts/components/modal-viewer.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/uikit-workshop/src/scripts/components/modal-viewer.js b/packages/uikit-workshop/src/scripts/components/modal-viewer.js index 3052b77a6..d73ace6b2 100644 --- a/packages/uikit-workshop/src/scripts/components/modal-viewer.js +++ b/packages/uikit-workshop/src/scripts/components/modal-viewer.js @@ -3,7 +3,6 @@ * "Modal" (aka Panel UI) for the Viewer Layer - for both annotations and code/info */ -import { scrollTo } from 'scroll-js'; import { urlHandler, Dispatcher, iframeMsgDataExtraction } from '../utils'; import { panelsViewer } from './panels-viewer'; import { store } from '../store.js'; @@ -222,19 +221,18 @@ export const modalViewer = { els[i].classList.remove('pl-is-active'); } - const patternInfoElem = document.querySelector('.pl-js-pattern-info'); - // const scroll = new Scroll(patternInfoElem); + const patternInfoPanelElem = document.querySelector( + '.pl-c-pattern-info__panel' + ); // add active class to called element and scroll to it for (let i = 0; i < els.length; ++i) { if (i + 1 === pos) { els[i].classList.add('pl-is-active'); - scrollTo(patternInfoElem, document.body, { + patternInfoPanelElem.scroll({ top: els[i].offsetTop - 14, behavior: 'smooth', - }).then(function () { - // console.log('finished scrolling'); }); } } From a3522d1135cf45d0dfb593d5fe24b254ebef2800 Mon Sep 17 00:00:00 2001 From: Maximilian <787658+mfranzke@users.noreply.github.com> Date: Sun, 30 Jan 2022 14:51:11 +0100 Subject: [PATCH 2/9] refactor: removed the plugin / dependency --- packages/uikit-workshop/package.json | 1 - yarn.lock | 5 ----- 2 files changed, 6 deletions(-) diff --git a/packages/uikit-workshop/package.json b/packages/uikit-workshop/package.json index 4eb7d389c..80020372f 100644 --- a/packages/uikit-workshop/package.json +++ b/packages/uikit-workshop/package.json @@ -90,7 +90,6 @@ "sass": "1.43.4", "sass-loader": "^10.1.1", "scriptjs": "^2.5.9", - "scroll-js": "3.4.x", "skatejs": "^5.2.4", "style-loader": "^1.0.0", "svg-sprite-loader": "^4.1.6", diff --git a/yarn.lock b/yarn.lock index aff8d123d..16c378f31 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14264,11 +14264,6 @@ scriptjs@^2.5.9: resolved "https://registry.yarnpkg.com/scriptjs/-/scriptjs-2.5.9.tgz#343915cd2ec2ed9bfdde2b9875cd28f59394b35f" integrity sha512-qGVDoreyYiP1pkQnbnFAUIS5AjenNwwQBdl7zeos9etl+hYKWahjRTfzAZZYBv5xNHx7vNKCmaLDQZ6Fr2AEXg== -scroll-js@3.4.x: - version "3.4.2" - resolved "https://registry.yarnpkg.com/scroll-js/-/scroll-js-3.4.2.tgz#76f6560a8a4ed320388458cabaefa0542b580bb9" - integrity sha512-MREqn2aZzl8g2fPT6Q4ZplshB0TU0w8nNWrp78qDE0XuQm/JO2aDdehstR0FLsNaAT+lv+bGOQmhsK5azUg4Ow== - section-iterator@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/section-iterator/-/section-iterator-2.0.0.tgz#bf444d7afeeb94ad43c39ad2fb26151627ccba2a" From 795546f71fe3dea3d2cc0d4e8b06b957ecc0ff48 Mon Sep 17 00:00:00 2001 From: Maximilian <787658+mfranzke@users.noreply.github.com> Date: Sun, 30 Jan 2022 15:31:56 +0100 Subject: [PATCH 3/9] chore: test for that method first of all --- .../src/scripts/components/modal-viewer.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/uikit-workshop/src/scripts/components/modal-viewer.js b/packages/uikit-workshop/src/scripts/components/modal-viewer.js index d73ace6b2..edb505dee 100644 --- a/packages/uikit-workshop/src/scripts/components/modal-viewer.js +++ b/packages/uikit-workshop/src/scripts/components/modal-viewer.js @@ -230,10 +230,13 @@ export const modalViewer = { if (i + 1 === pos) { els[i].classList.add('pl-is-active'); - patternInfoPanelElem.scroll({ - top: els[i].offsetTop - 14, - behavior: 'smooth', - }); + // Scroll to the related entry withtin the pattern info panel + if (patternInfoElem.scroll) { + patternInfoElem.scroll({ + top: els[i].offsetTop - 14, + behavior: 'smooth', + }); + } } } }, From 0f7f4f3e7f0be845a60a80afd0b617b456a870bd Mon Sep 17 00:00:00 2001 From: Maximilian <787658+mfranzke@users.noreply.github.com> Date: Sun, 30 Jan 2022 15:32:03 +0100 Subject: [PATCH 4/9] chore: code reformatting --- .../uikit-workshop/src/scripts/components/modal-viewer.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/uikit-workshop/src/scripts/components/modal-viewer.js b/packages/uikit-workshop/src/scripts/components/modal-viewer.js index edb505dee..60570ced8 100644 --- a/packages/uikit-workshop/src/scripts/components/modal-viewer.js +++ b/packages/uikit-workshop/src/scripts/components/modal-viewer.js @@ -221,9 +221,7 @@ export const modalViewer = { els[i].classList.remove('pl-is-active'); } - const patternInfoPanelElem = document.querySelector( - '.pl-c-pattern-info__panel' - ); + const patternInfoElem = document.querySelector('.pl-js-pattern-info'); // add active class to called element and scroll to it for (let i = 0; i < els.length; ++i) { From 600bd8de083e8c45e1be59f14aef9ce83b3507b3 Mon Sep 17 00:00:00 2001 From: Maximilian <787658+mfranzke@users.noreply.github.com> Date: Sun, 30 Jan 2022 16:13:20 +0100 Subject: [PATCH 5/9] Revert "chore: code reformatting" This reverts commit 0f7f4f3e7f0be845a60a80afd0b617b456a870bd. --- .../uikit-workshop/src/scripts/components/modal-viewer.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/uikit-workshop/src/scripts/components/modal-viewer.js b/packages/uikit-workshop/src/scripts/components/modal-viewer.js index 60570ced8..edb505dee 100644 --- a/packages/uikit-workshop/src/scripts/components/modal-viewer.js +++ b/packages/uikit-workshop/src/scripts/components/modal-viewer.js @@ -221,7 +221,9 @@ export const modalViewer = { els[i].classList.remove('pl-is-active'); } - const patternInfoElem = document.querySelector('.pl-js-pattern-info'); + const patternInfoPanelElem = document.querySelector( + '.pl-c-pattern-info__panel' + ); // add active class to called element and scroll to it for (let i = 0; i < els.length; ++i) { From dd973aadda3c5b6d6599f6ec3eaf4c71806a28c3 Mon Sep 17 00:00:00 2001 From: Maximilian <787658+mfranzke@users.noreply.github.com> Date: Sun, 30 Jan 2022 16:13:27 +0100 Subject: [PATCH 6/9] Revert "chore: test for that method first of all" This reverts commit 795546f71fe3dea3d2cc0d4e8b06b957ecc0ff48. --- .../src/scripts/components/modal-viewer.js | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/uikit-workshop/src/scripts/components/modal-viewer.js b/packages/uikit-workshop/src/scripts/components/modal-viewer.js index edb505dee..d73ace6b2 100644 --- a/packages/uikit-workshop/src/scripts/components/modal-viewer.js +++ b/packages/uikit-workshop/src/scripts/components/modal-viewer.js @@ -230,13 +230,10 @@ export const modalViewer = { if (i + 1 === pos) { els[i].classList.add('pl-is-active'); - // Scroll to the related entry withtin the pattern info panel - if (patternInfoElem.scroll) { - patternInfoElem.scroll({ - top: els[i].offsetTop - 14, - behavior: 'smooth', - }); - } + patternInfoPanelElem.scroll({ + top: els[i].offsetTop - 14, + behavior: 'smooth', + }); } } }, From e55dad6f566ac3a8e90a64e71c0dccc059f33e1e Mon Sep 17 00:00:00 2001 From: Maximilian <787658+mfranzke@users.noreply.github.com> Date: Sun, 30 Jan 2022 16:13:29 +0100 Subject: [PATCH 7/9] Revert "refactor: removed the plugin / dependency" This reverts commit a3522d1135cf45d0dfb593d5fe24b254ebef2800. --- packages/uikit-workshop/package.json | 1 + yarn.lock | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/packages/uikit-workshop/package.json b/packages/uikit-workshop/package.json index 80020372f..4eb7d389c 100644 --- a/packages/uikit-workshop/package.json +++ b/packages/uikit-workshop/package.json @@ -90,6 +90,7 @@ "sass": "1.43.4", "sass-loader": "^10.1.1", "scriptjs": "^2.5.9", + "scroll-js": "3.4.x", "skatejs": "^5.2.4", "style-loader": "^1.0.0", "svg-sprite-loader": "^4.1.6", diff --git a/yarn.lock b/yarn.lock index 16c378f31..aff8d123d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14264,6 +14264,11 @@ scriptjs@^2.5.9: resolved "https://registry.yarnpkg.com/scriptjs/-/scriptjs-2.5.9.tgz#343915cd2ec2ed9bfdde2b9875cd28f59394b35f" integrity sha512-qGVDoreyYiP1pkQnbnFAUIS5AjenNwwQBdl7zeos9etl+hYKWahjRTfzAZZYBv5xNHx7vNKCmaLDQZ6Fr2AEXg== +scroll-js@3.4.x: + version "3.4.2" + resolved "https://registry.yarnpkg.com/scroll-js/-/scroll-js-3.4.2.tgz#76f6560a8a4ed320388458cabaefa0542b580bb9" + integrity sha512-MREqn2aZzl8g2fPT6Q4ZplshB0TU0w8nNWrp78qDE0XuQm/JO2aDdehstR0FLsNaAT+lv+bGOQmhsK5azUg4Ow== + section-iterator@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/section-iterator/-/section-iterator-2.0.0.tgz#bf444d7afeeb94ad43c39ad2fb26151627ccba2a" From b85306a4b0db27a3e38f7d28fc2fa57a4b0a5f9b Mon Sep 17 00:00:00 2001 From: Maximilian <787658+mfranzke@users.noreply.github.com> Date: Sun, 30 Jan 2022 16:13:31 +0100 Subject: [PATCH 8/9] Revert "refactor: fixed scrolling behaviour and replaced plugin by native functionality" This reverts commit cb2102c9bce546d6983908b15678d3fd9533787f. --- .../src/scripts/components/modal-viewer.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/uikit-workshop/src/scripts/components/modal-viewer.js b/packages/uikit-workshop/src/scripts/components/modal-viewer.js index d73ace6b2..3052b77a6 100644 --- a/packages/uikit-workshop/src/scripts/components/modal-viewer.js +++ b/packages/uikit-workshop/src/scripts/components/modal-viewer.js @@ -3,6 +3,7 @@ * "Modal" (aka Panel UI) for the Viewer Layer - for both annotations and code/info */ +import { scrollTo } from 'scroll-js'; import { urlHandler, Dispatcher, iframeMsgDataExtraction } from '../utils'; import { panelsViewer } from './panels-viewer'; import { store } from '../store.js'; @@ -221,18 +222,19 @@ export const modalViewer = { els[i].classList.remove('pl-is-active'); } - const patternInfoPanelElem = document.querySelector( - '.pl-c-pattern-info__panel' - ); + const patternInfoElem = document.querySelector('.pl-js-pattern-info'); + // const scroll = new Scroll(patternInfoElem); // add active class to called element and scroll to it for (let i = 0; i < els.length; ++i) { if (i + 1 === pos) { els[i].classList.add('pl-is-active'); - patternInfoPanelElem.scroll({ + scrollTo(patternInfoElem, document.body, { top: els[i].offsetTop - 14, behavior: 'smooth', + }).then(function () { + // console.log('finished scrolling'); }); } } From b3e6ac89a8421755714cda940297703cc512ae54 Mon Sep 17 00:00:00 2001 From: Maximilian <787658+mfranzke@users.noreply.github.com> Date: Sun, 30 Jan 2022 16:16:20 +0100 Subject: [PATCH 9/9] fix: removed the incorrect attribute --- packages/uikit-workshop/src/scripts/components/modal-viewer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/uikit-workshop/src/scripts/components/modal-viewer.js b/packages/uikit-workshop/src/scripts/components/modal-viewer.js index 3052b77a6..ca919894b 100644 --- a/packages/uikit-workshop/src/scripts/components/modal-viewer.js +++ b/packages/uikit-workshop/src/scripts/components/modal-viewer.js @@ -230,7 +230,7 @@ export const modalViewer = { if (i + 1 === pos) { els[i].classList.add('pl-is-active'); - scrollTo(patternInfoElem, document.body, { + scrollTo(patternInfoElem, { top: els[i].offsetTop - 14, behavior: 'smooth', }).then(function () {