From e43ab8edb4ae8c49a758278d125489ae9b3bb833 Mon Sep 17 00:00:00 2001 From: Rene Haas Date: Fri, 8 Jul 2022 11:29:42 +0200 Subject: [PATCH] improve code --- .../src/styles/overlayscrollbars.scss | 6 ++- .../structureSetup/nesting/index.browser.ts | 54 +++++++++++++++---- .../setups/structureSetup/nesting/index.html | 3 ++ .../setups/structureSetup/nesting/index.scss | 10 +++- .../structureSetup/observers/index.browser.ts | 14 ++++- 5 files changed, 73 insertions(+), 14 deletions(-) diff --git a/packages/overlayscrollbars/src/styles/overlayscrollbars.scss b/packages/overlayscrollbars/src/styles/overlayscrollbars.scss index fa66d3b..30c2c7c 100644 --- a/packages/overlayscrollbars/src/styles/overlayscrollbars.scss +++ b/packages/overlayscrollbars/src/styles/overlayscrollbars.scss @@ -75,9 +75,13 @@ background: transparent !important; } -[data-overlayscrollbars~='host'], +[data-overlayscrollbars], .os-padding { position: relative; +} + +[data-overlayscrollbars~='host'], +.os-padding { display: flex; flex-direction: row !important; flex-wrap: nowrap !important; diff --git a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.browser.ts b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.browser.ts index c3ff2a4..0f9d5f3 100644 --- a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.browser.ts +++ b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.browser.ts @@ -15,19 +15,24 @@ const startBtn: HTMLButtonElement | null = document.querySelector('#start'); const targetRoot: HTMLElement | null = document.querySelector('#targetRoot'); const targetA: HTMLElement | null = document.querySelector('#targetA'); const targetB: HTMLElement | null = document.querySelector('#targetB'); +const targetC: HTMLElement | null = document.querySelector('#targetC'); const updatesRootSlot: HTMLElement | null = document.querySelector('#updatesRoot'); const updatesASlot: HTMLElement | null = document.querySelector('#updatesA'); const updatesBSlot: HTMLElement | null = document.querySelector('#updatesB'); +const updatesCSlot: HTMLElement | null = document.querySelector('#updatesC'); const resizeRoot: HTMLElement | null = document.querySelector('#resizeRoot'); const resizeA: HTMLElement | null = document.querySelector('#resizeA'); const resizeB: HTMLElement | null = document.querySelector('#resizeB'); +const resizeC: HTMLElement | null = document.querySelector('#resizeC'); const resizeBetweenRoot: HTMLElement | null = document.createElement('div'); const resizeBetweenA: HTMLElement | null = document.createElement('div'); const resizeBetweenB: HTMLElement | null = document.createElement('div'); +const resizeBetweenC: HTMLElement | null = document.createElement('div'); let rootUpdateCount = 0; let aUpdateCount = 0; let bUpdateCount = 0; +let cUpdateCount = 0; const rootInstance = OverlayScrollbars( { target: targetRoot!, padding: true }, {}, @@ -75,8 +80,11 @@ const bInstance = OverlayScrollbars( {}, { initialized() { - addClass(resizeBetweenB, 'resize resizeBetween'); - targetB!.append(resizeBetweenB); + requestAnimationFrame(() => { + addClass(bInstance.elements().content, 'flex'); + addClass(resizeBetweenB, 'resize resizeBetween'); + targetB!.append(resizeBetweenB); + }); }, updated() { bUpdateCount++; @@ -88,24 +96,44 @@ const bInstance = OverlayScrollbars( }, } ); +OverlayScrollbars( + { target: targetC!, viewport: targetC! }, + {}, + { + initialized() { + addClass(resizeBetweenC, 'resize resizeBetween'); + targetC!.append(resizeBetweenC); + }, + updated() { + cUpdateCount++; + requestAnimationFrame(() => { + if (updatesCSlot) { + updatesCSlot.textContent = `${cUpdateCount}`; + } + }); + }, + } +); resize(resizeRoot!); resize(resizeA!); resize(resizeB!); +resize(resizeC!); resize(resizeBetweenRoot!); resize(resizeBetweenA!); resize(resizeBetweenB!); +resize(resizeBetweenC!); const resizeBetween = async (betweenElm: HTMLElement) => { const styleObj = { width: parseInt(style(betweenElm, 'width'), 10) + 50, height: parseInt(style(betweenElm, 'height'), 10) + 50, }; - const updateCountsBefore = [rootUpdateCount, aUpdateCount, bUpdateCount]; + const updateCountsBefore = [rootUpdateCount, aUpdateCount, bUpdateCount, cUpdateCount]; style(betweenElm, styleObj); await timeout(250); - const updateCountsAfter = [rootUpdateCount, aUpdateCount, bUpdateCount]; + const updateCountsAfter = [rootUpdateCount, aUpdateCount, bUpdateCount, cUpdateCount]; should.equal( JSON.stringify(updateCountsBefore), @@ -120,11 +148,11 @@ const resizeResize = async (resizeElm: HTMLElement) => { width: parseInt(style(resizeElm, 'width'), 10) - 10, height: parseInt(style(resizeElm, 'height'), 10) - 10, }; - const updateCountsBefore = [rootUpdateCount, aUpdateCount, bUpdateCount]; + const updateCountsBefore = [rootUpdateCount, aUpdateCount, bUpdateCount, cUpdateCount]; style(resizeElm, styleObj); await timeout(250); - const updateCountsAfter = [rootUpdateCount, aUpdateCount, bUpdateCount]; + const updateCountsAfter = [rootUpdateCount, aUpdateCount, bUpdateCount, cUpdateCount]; should.equal( JSON.stringify(updateCountsBefore), @@ -162,11 +190,15 @@ const testBetweenElements = async () => { }; const testResizeElements = async () => { - await waitForOrFailTest(async () => { - await resizeResize(resizeRoot!); - await resizeResize(resizeA!); - await resizeResize(resizeB!); - }); + await waitForOrFailTest( + async () => { + await resizeResize(resizeRoot!); + await resizeResize(resizeA!); + await resizeResize(resizeB!); + await resizeResize(resizeC!); + }, + { timeout: 5000 } + ); }; const start = async () => { diff --git a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.html b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.html index 82a45f0..8697802 100644 --- a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.html +++ b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.html @@ -6,6 +6,9 @@
+
+
UpdatesC:
+
UpdatesB:
UpdatesA:
diff --git a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.scss b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.scss index 81d976f..2948311 100644 --- a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.scss +++ b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.scss @@ -22,7 +22,7 @@ body { .container { border: 1px solid red; - width: 60%; + width: 75%; height: 60%; padding: 10px; margin: 10px; @@ -64,6 +64,14 @@ body { box-sizing: border-box; } +#targetC { + height: auto; +} + .flex { display: flex; + + & > .resize { + width: 80px; + } } diff --git a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/observers/index.browser.ts b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/observers/index.browser.ts index 79db234..906a3a6 100644 --- a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/observers/index.browser.ts +++ b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/observers/index.browser.ts @@ -1,7 +1,14 @@ import './index.scss'; import 'styles/overlayscrollbars.scss'; -import should from 'should'; + +// test viewport inheritted attrs (tabindex) for multiple and single element init +// test appear & resize for multiple and single element init +// test children changing attr according to dom observer + +/* import { OverlayScrollbars } from 'overlayscrollbars'; + +import should from 'should'; import { resize } from '@/testing-browser/Resize'; import { timeout } from '@/testing-browser/timeout'; import { setTestResult, waitForOrFailTest } from '@/testing-browser/TestResult'; @@ -11,6 +18,10 @@ OverlayScrollbars.env().setDefaultOptions({ nativeScrollbarsOverlaid: { initialize: true }, }); + + + +/* const startBtn: HTMLButtonElement | null = document.querySelector('#start'); const target: HTMLElement | null = document.querySelector('#target'); const updatesSlot: HTMLElement | null = document.querySelector('#update'); @@ -45,3 +56,4 @@ const start = async () => { }; startBtn?.addEventListener('click', start); +*/