From 235cf73c1d27a4ecbe69720066b3e40091672086 Mon Sep 17 00:00:00 2001 From: Rene Date: Wed, 21 Apr 2021 22:48:15 +0200 Subject: [PATCH] add box-sizing change detection to size observer --- .../src/lifecycles/trinsicLifecycle.ts | 5 + .../src/observers/sizeObserver.ts | 8 +- .../src/styles/overlayscrollbars.scss | 11 +- .../src/styles/sizeobserver.scss | 48 +++- .../structureLifecycle/index.browser.ts | 49 +++- .../lifecycles/structureLifecycle/index.html | 11 +- .../lifecycles/structureLifecycle/index.scss | 210 ++++++++++++------ .../observers/sizeObserver/index.browser.ts | 44 +++- .../browser/observers/sizeObserver/index.scss | 1 + packages/testing-browser/src/Select.ts | 15 +- 10 files changed, 299 insertions(+), 103 deletions(-) diff --git a/packages/overlayscrollbars/src/lifecycles/trinsicLifecycle.ts b/packages/overlayscrollbars/src/lifecycles/trinsicLifecycle.ts index cb37138..2059491 100644 --- a/packages/overlayscrollbars/src/lifecycles/trinsicLifecycle.ts +++ b/packages/overlayscrollbars/src/lifecycles/trinsicLifecycle.ts @@ -19,5 +19,10 @@ export const createTrinsicLifecycle = (lifecycleHub: LifecycleHub): Lifecycle => height: heightIntrinsic ? 'auto' : '100%', }); } + + return { + _sizeChanged: heightIntrinsicChanged, + _contentMutation: heightIntrinsicChanged, + }; }; }; diff --git a/packages/overlayscrollbars/src/observers/sizeObserver.ts b/packages/overlayscrollbars/src/observers/sizeObserver.ts index 851c9e5..529d28f 100644 --- a/packages/overlayscrollbars/src/observers/sizeObserver.ts +++ b/packages/overlayscrollbars/src/observers/sizeObserver.ts @@ -21,6 +21,7 @@ import { ResizeObserverConstructor, isArray, isBoolean, + removeClass, } from 'support'; import { getEnvironment } from 'environment'; import { @@ -64,7 +65,7 @@ const directionIsRTL = (elm: HTMLElement): boolean => style(elm, 'direction') == const domRectHasDimensions = (rect?: DOMRectReadOnly) => rect && (rect.height || rect.width); /** - * Creates a size observer which observes any size, padding, margin and border changes of the target element. Depending on the options also direction and appear can be observed. + * Creates a size observer which observes any size, padding, border, margin and box-sizing changes of the target element. Depending on the options also direction and appear can be observed. * @param target The target element which shall be observed. * @param onSizeChangedCallback The callback which gets called after a size change was detected. * @param options The options for size detection, whether to observe also direction and appear. @@ -193,10 +194,11 @@ export const createSizeObserver = ( const directionIsRTLCacheValues = updateDirectionIsRTLCache(); const { _value, _changed } = directionIsRTLCacheValues; if (_changed) { + removeClass(listenerElement, 'ltr rtl'); if (_value) { - style(listenerElement, { left: 'auto', right: 0 }); + addClass(listenerElement, 'rtl'); } else { - style(listenerElement, { left: 0, right: 'auto' }); + addClass(listenerElement, 'ltr'); } onSizeChangedCallbackProxy(directionIsRTLCacheValues); } diff --git a/packages/overlayscrollbars/src/styles/overlayscrollbars.scss b/packages/overlayscrollbars/src/styles/overlayscrollbars.scss index f4dee70..ded922b 100644 --- a/packages/overlayscrollbars/src/styles/overlayscrollbars.scss +++ b/packages/overlayscrollbars/src/styles/overlayscrollbars.scss @@ -2,14 +2,14 @@ @import './trinsicobserver.scss'; .os-environment { - --css-custom-prop: -1; + --os-css-custom-prop: -1; position: fixed; opacity: 0; visibility: hidden; overflow: scroll; height: 200px; width: 200px; - z-index: var(--css-custom-prop); + z-index: var(--os-css-custom-prop); div { width: 200%; @@ -96,7 +96,7 @@ .os-padding, .os-viewport { - box-sizing: border-box; + box-sizing: inherit; position: relative; flex: auto !important; height: auto; @@ -106,6 +106,7 @@ border: none; overflow: visible; max-width: 100%; + z-index: 0; } .os-viewport { @@ -123,3 +124,7 @@ height: var(--viewport-arrange-height); } } + +.os-content { + box-sizing: inherit; +} diff --git a/packages/overlayscrollbars/src/styles/sizeobserver.scss b/packages/overlayscrollbars/src/styles/sizeobserver.scss index a9924fc..ddb6173 100644 --- a/packages/overlayscrollbars/src/styles/sizeobserver.scss +++ b/packages/overlayscrollbars/src/styles/sizeobserver.scss @@ -1,11 +1,9 @@ $scrollbar-cushion: 100px; +$inflate-margin: 200px; .os-size-observer, .os-size-observer-listener { direction: inherit; - padding: inherit; - border: inherit; - margin: 0; pointer-events: none; overflow: hidden; visibility: hidden; @@ -23,10 +21,34 @@ $scrollbar-cushion: 100px; } .os-size-observer { - height: 100%; - width: 100%; + height: 3%; + width: 3%; z-index: -1; contain: strict; + display: flex; + flex-direction: column; + flex-wrap: nowrap; + padding: inherit; + border: inherit; + box-sizing: inherit; + margin: 0; + + &::before, + &::after { + content: ''; + flex: none; + box-sizing: inherit; + } + &::before { + padding: 1px; + width: 1px; + height: 1px; + } + &::after { + content: ''; + padding: inherit; + border: inherit; + } } .os-size-observer-appear { @@ -35,9 +57,19 @@ $scrollbar-cushion: 100px; } .os-size-observer-listener { - display: block; - height: 500%; - width: 500%; + box-sizing: border-box; + position: relative; + flex: auto; + margin: -#{$inflate-margin}; + + &.ltr { + margin-right: -#{$inflate-margin * 2}; + margin-left: 0; + } + &.rtl { + margin-left: -#{$inflate-margin * 2}; + margin-right: 0; + } // lets assume no scrollbar is 100px wide & > .os-size-observer-listener-item { diff --git a/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts b/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts index 9b9b409..5645f05 100644 --- a/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts +++ b/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts @@ -2,17 +2,24 @@ import 'styles/overlayscrollbars.scss'; import './index.scss'; import { resize } from '@/testing-browser/Resize'; +import { generateClassChangeSelectCallback, iterateSelect } from '@/testing-browser/Select'; import { OverlayScrollbars } from 'overlayscrollbars'; -import { style } from 'support'; +import { from, style } from 'support'; const targetElm = document.querySelector('#target') as HTMLElement; -const osInstance = (window.os = OverlayScrollbars({ target: targetElm, content: false })); +const osInstance = (window.os = OverlayScrollbars({ target: targetElm, content: true })); const target: HTMLElement | null = document.querySelector('#target'); const comparison: HTMLElement | null = document.querySelector('#comparison'); const targetRes: HTMLElement | null = document.querySelector('#target .resize'); const comparisonRes: HTMLElement | null = document.querySelector('#comparison .resize'); +const resizeElms = document.querySelectorAll('.resize'); +const percentElms = document.querySelectorAll('.percent'); +const endElms = document.querySelectorAll('.end'); +const envElms = document.querySelectorAll('.env'); +const containerElms = document.querySelectorAll('#target, #comparison'); + resize(target!).addResizeListener((width, height) => style(comparison, { width, height })); //resize(comparison!).addResizeListener((width, height) => style(target, { width, height })); resize(targetRes!).addResizeListener((width, height) => style(comparisonRes, { width, height })); @@ -23,3 +30,41 @@ target!.querySelector('.os-viewport')?.addEventListener('scroll', (e) => { comparison!.scrollLeft = viewport.scrollLeft; comparison!.scrollTop = viewport.scrollTop; }); + +const envWidthSelect = document.querySelector('#envWidth'); +const envHeightSelect = document.querySelector('#envHeight'); +const selectCallbackEnv = generateClassChangeSelectCallback(from(envElms)); +const containerWidthSelect = document.querySelector('#width'); +const containerHeightSelect = document.querySelector('#height'); +const containerFloatSelect = document.querySelector('#float'); +const containerPaddingSelect = document.querySelector('#padding'); +const containerBorderSelect = document.querySelector('#border'); +const containerMarginSelect = document.querySelector('#margin'); +const containerBoxSizingSelect = document.querySelector('#boxSizing'); +const containerDirectionSelect = document.querySelector('#direction'); +const containerMinMaxSelect = document.querySelector('#minMax'); +const selectCallbackContainer = generateClassChangeSelectCallback(from(containerElms)); + +envWidthSelect?.addEventListener('change', selectCallbackEnv); +envHeightSelect?.addEventListener('change', selectCallbackEnv); +containerWidthSelect?.addEventListener('change', selectCallbackContainer); +containerHeightSelect?.addEventListener('change', selectCallbackContainer); +containerFloatSelect?.addEventListener('change', selectCallbackContainer); +containerPaddingSelect?.addEventListener('change', selectCallbackContainer); +containerBorderSelect?.addEventListener('change', selectCallbackContainer); +containerMarginSelect?.addEventListener('change', selectCallbackContainer); +containerBoxSizingSelect?.addEventListener('change', selectCallbackContainer); +containerDirectionSelect?.addEventListener('change', selectCallbackContainer); +containerMinMaxSelect?.addEventListener('change', selectCallbackContainer); + +selectCallbackEnv(envWidthSelect); +selectCallbackEnv(envHeightSelect); +selectCallbackContainer(containerWidthSelect); +selectCallbackContainer(containerHeightSelect); +selectCallbackContainer(containerFloatSelect); +selectCallbackContainer(containerPaddingSelect); +selectCallbackContainer(containerBorderSelect); +selectCallbackContainer(containerMarginSelect); +selectCallbackContainer(containerBoxSizingSelect); +selectCallbackContainer(containerDirectionSelect); +selectCallbackContainer(containerMinMaxSelect); diff --git a/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.html b/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.html index fab709f..c31e43a 100644 --- a/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.html +++ b/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.html @@ -1,6 +1,6 @@
- - @@ -35,9 +35,9 @@ - -