From ea6794eca8787b4f55364b3ccd1596bd6635a1ab Mon Sep 17 00:00:00 2001 From: Rene Haas Date: Wed, 31 Mar 2021 13:06:08 +0200 Subject: [PATCH] add flexboxglue content box fix --- .../src/lifecycles/lifecycleHub.ts | 50 ++++++++++++++----- .../src/lifecycles/overflowLifecycle.ts | 17 ++----- 2 files changed, 41 insertions(+), 26 deletions(-) diff --git a/packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts b/packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts index 889e5dd..40e8d37 100644 --- a/packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts +++ b/packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts @@ -1,8 +1,7 @@ -import { TRBL, CacheValues, each, push, OptionsValidated, hasOwnProperty } from 'support'; +import { XY, TRBL, CacheValues, each, push, OptionsValidated, hasOwnProperty, isNumber, scrollLeft, scrollTop } from 'support'; import { Options } from 'options'; import { getEnvironment } from 'environment'; import { StructureSetup } from 'setups/structureSetup'; -import { createStructureLifecycle } from 'lifecycles/structureLifecycle'; import { createPaddingLifecycle } from 'lifecycles/paddingLifecycle'; import { createOverflowLifecycle } from 'lifecycles/overflowLifecycle'; import { createSizeObserver } from 'observers/sizeObserver'; @@ -47,6 +46,8 @@ export interface LifecycleHub { _setPadding(newPadding?: TRBL | null): void; _getPaddingStyle(): StyleObject; _setPaddingStyle(newPaddingStlye?: StyleObject | null): void; + _getViewportOverflowScroll(): XY; + _setViewportOverflowScroll(newViewportOverflowScroll: XY): void; } const getPropByPath = (obj: any, path: string): T => @@ -60,6 +61,10 @@ const viewportPaddingStyleFallback: StyleObject = { marginBottom: 0, marginLeft: 0, }; +const viewportOverflowScrollFallback: XY = { + x: false, + y: false, +}; const directionIsRTLCacheValuesFallback: CacheValues = { _value: false, _previous: false, @@ -74,7 +79,8 @@ const heightIntrinsicCacheValuesFallback: CacheValues = { export const createLifecycleHub = (options: Options, structureSetup: StructureSetup): LifecycleHubInstance => { let padding = paddingFallback; let viewportPaddingStyle = viewportPaddingStyleFallback; - const { _host, _viewport, _content } = structureSetup._targetObj; + let viewportOverflowScroll = viewportOverflowScrollFallback; + const { _host, _viewport, _content, _contentArrange } = structureSetup._targetObj; const { _nativeScrollbarStyling, _flexboxGlue, @@ -90,16 +96,24 @@ export const createLifecycleHub = (options: Options, structureSetup: StructureSe padding = newPadding || paddingFallback; }, _getPaddingStyle: () => viewportPaddingStyle, - _setPaddingStyle(newPaddingStlye: StyleObject) { + _setPaddingStyle(newPaddingStlye) { viewportPaddingStyle = newPaddingStlye || viewportPaddingStyleFallback; }, + _getViewportOverflowScroll: () => viewportOverflowScroll, + _setViewportOverflowScroll(newViewportOverflowScroll) { + viewportOverflowScroll = newViewportOverflowScroll || viewportOverflowScrollFallback; + }, }; // push(lifecycles, createStructureLifecycle(instance)); push(lifecycles, createPaddingLifecycle(instance)); push(lifecycles, createOverflowLifecycle(instance)); - const runLifecycles = (updateHints?: Partial | null, changedOptions?: OptionsValidated | null, force?: boolean) => { + const updateLifecycles = ( + updateHints?: Partial | null, + changedOptions?: OptionsValidated | null, + force?: boolean + ) => { let { _directionIsRTL, _heightIntrinsic, @@ -116,6 +130,9 @@ export const createLifecycleHub = (options: Options, structureSetup: StructureSe _value: getPropByPath(options, path), _changed: force || getPropByPath(changedOptions, path) !== undefined, }); + const adjustScrollOffset = _contentArrange || !_flexboxGlue; + const scrollOffsetX = adjustScrollOffset && scrollLeft(_viewport); + const scrollOffsetY = adjustScrollOffset && scrollTop(_viewport); each(lifecycles, (lifecycle) => { const { @@ -142,24 +159,31 @@ export const createLifecycleHub = (options: Options, structureSetup: StructureSe _contentMutation = adaptiveContentMutation || _contentMutation; _paddingStyleChanged = adaptivePaddingStyleChanged || _paddingStyleChanged; }); + + if (isNumber(scrollOffsetX)) { + scrollLeft(_viewport, scrollOffsetX); + } + if (isNumber(scrollOffsetY)) { + scrollTop(_viewport, scrollOffsetY); + } }; const onSizeChanged = (directionIsRTL?: CacheValues) => { const sizeChanged = !directionIsRTL; - runLifecycles({ + updateLifecycles({ _directionIsRTL: directionIsRTL, _sizeChanged: sizeChanged, }); }; const onTrinsicChanged = (heightIntrinsic: CacheValues) => { - runLifecycles({ + updateLifecycles({ _heightIntrinsic: heightIntrinsic, }); }; const onHostMutation = () => { // TODO: rAF only here because IE requestAnimationFrame(() => { - runLifecycles({ + updateLifecycles({ _hostMutation: true, }); }); @@ -167,7 +191,7 @@ export const createLifecycleHub = (options: Options, structureSetup: StructureSe const onContentMutation = () => { // TODO: rAF only here because IE requestAnimationFrame(() => { - runLifecycles({ + updateLifecycles({ _contentMutation: true, }); }); @@ -201,16 +225,16 @@ export const createLifecycleHub = (options: Options, structureSetup: StructureSe */ }); - const updateAll = (changedOptions?: OptionsValidated | null, force?: boolean) => { - runLifecycles(null, changedOptions, force); + const update = (changedOptions?: OptionsValidated | null, force?: boolean) => { + updateLifecycles(null, changedOptions, force); }; - const envUpdateListener = updateAll.bind(null, null, true); + const envUpdateListener = update.bind(null, null, true); addEnvironmentListener(envUpdateListener); console.log('flexboxGlue', _flexboxGlue); return { - _update: updateAll, + _update: update, _destroy() { removeEnvironmentListener(envUpdateListener); }, diff --git a/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts b/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts index 3efbc79..ec25bd3 100644 --- a/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts +++ b/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts @@ -7,14 +7,11 @@ import { scrollSize, CacheValues, equalWH, - scrollLeft, - scrollTop, addClass, removeClass, clientSize, offsetSize, getBoundingClientRect, - topRightBottomLeft, } from 'support'; import { LifecycleHub, Lifecycle } from 'lifecycles/lifecycleHub'; import { getEnvironment } from 'environment'; @@ -74,9 +71,6 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle = }); const fixFlexboxGlue = (viewportOverflowState: ViewportOverflowState, heightIntrinsic: boolean) => { - const offsetLeft = scrollLeft(_viewport); - const offsetTop = scrollTop(_viewport); - style(_viewport, { maxHeight: '', }); @@ -84,17 +78,14 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle = if (heightIntrinsic) { const { _overflowScroll, _scrollbarsHideOffset } = viewportOverflowState; const hostBCR = getBoundingClientRect(_host); - - // TODO: change to offset size - client size calculation. - const border = topRightBottomLeft(_host, 'border', 'width'); + const hostOffsetSize = offsetSize(_host); + const hostClientSize = clientSize(_host); + const clientSizeWithoutRounding = hostClientSize.h + (hostBCR.height - hostOffsetSize.h); style(_viewport, { - maxHeight: hostBCR.height - (border.t + border.b) + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0), + maxHeight: clientSizeWithoutRounding + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0), }); } - - scrollLeft(_viewport, offsetLeft); - scrollTop(_viewport, offsetTop); }; const getViewportOverflowState = (showNativeOverlaidScrollbars: boolean, viewportStyleObj?: StyleObject): ViewportOverflowState => {