diff --git a/packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts b/packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts index 87b5382..bc6f423 100644 --- a/packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts +++ b/packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts @@ -2,6 +2,7 @@ import { XY, TRBL, CacheValues, each, push, keys, OptionsValidated, hasOwnProper import { Options } from 'options'; import { getEnvironment } from 'environment'; import { StructureSetup } from 'setups/structureSetup'; +import { createTrinsicLifecycle } from 'lifecycles/trinsicLifecycle'; import { createPaddingLifecycle } from 'lifecycles/paddingLifecycle'; import { createOverflowLifecycle } from 'lifecycles/overflowLifecycle'; import { createSizeObserver } from 'observers/sizeObserver'; @@ -136,7 +137,7 @@ export const createLifecycleHub = (options: Options, structureSetup: StructureSe }, }; - // push(lifecycles, createStructureLifecycle(instance)); + push(lifecycles, createTrinsicLifecycle(instance)); push(lifecycles, createPaddingLifecycle(instance)); push(lifecycles, createOverflowLifecycle(instance)); @@ -228,8 +229,8 @@ export const createLifecycleHub = (options: Options, structureSetup: StructureSe }); }; + const trinsicObserver = _content ? createTrinsicObserver(_host, onTrinsicChanged) : null; const sizeObserver = createSizeObserver(_host, onSizeChanged, { _appear: true, _direction: !_nativeScrollbarStyling }); - const trinsicObserver = createTrinsicObserver(_host, onTrinsicChanged); const hostMutationObserver = createDOMObserver(_host, onHostMutation, { _styleChangingAttributes: attrs, _attributes: attrs, diff --git a/packages/overlayscrollbars/src/lifecycles/structureLifecycle.ts b/packages/overlayscrollbars/src/lifecycles/structureLifecycle.ts deleted file mode 100644 index 31ca241..0000000 --- a/packages/overlayscrollbars/src/lifecycles/structureLifecycle.ts +++ /dev/null @@ -1,142 +0,0 @@ -import { - CacheValues, - cssProperty, - runEach, - createCache, - topRightBottomLeft, - TRBL, - WH, - XY, - equalTRBL, - equalXY, - style, - scrollSize, - offsetSize, -} from 'support'; -import { createLifecycleUpdateFunction } from 'lifecycles/lifecycleUpdateFunction'; -import { LifecycleHub } from 'lifecycles/lifecycleHub'; -import { getEnvironment, Environment } from 'environment'; - -const cssMarginEnd = cssProperty('margin-inline-end'); -const cssBorderEnd = cssProperty('border-inline-end'); - -export const createStructureLifecycle = (lifecycleHub: LifecycleHub): Lifecycle => { - const { _host, _padding, _viewport, _content } = lifecycleHub._structureSetup._targetObj; - const destructFns: (() => any)[] = []; - const env: Environment = getEnvironment(); - const scrollbarsOverlaid = env._nativeScrollbarIsOverlaid; - const supportsScrollbarStyling = env._nativeScrollbarStyling; - const supportFlexboxGlue = env._flexboxGlue; - // direction change is only needed to update scrollbar hiding, therefore its not needed if css can do it, scrollbars are invisible or overlaid on y axis - const directionObserverObsolete = (cssMarginEnd && cssBorderEnd) || supportsScrollbarStyling || scrollbarsOverlaid.y; - - const { _update: updatePaddingCache } = createCache(() => topRightBottomLeft(_host, 'padding'), { _equal: equalTRBL }); - const { _update: updateOverflowAmountCache } = createCache, { _contentScrollSize: WH; _viewportSize: WH }>( - (ctx) => ({ - x: Math.max(0, Math.round((ctx!._contentScrollSize.w - ctx!._viewportSize.w) * 100) / 100), - y: Math.max(0, Math.round((ctx!._contentScrollSize.h - ctx!._viewportSize.h) * 100) / 100), - }), - { _equal: equalXY } - ); - - const _update = createLifecycleUpdateFunction(lifecycleHub, (force, checkOption) => { - const { _value: paddingAbsolute, _changed: paddingAbsoluteChanged } = checkOption('paddingAbsolute'); - const { _value: padding, _changed: paddingChanged } = updatePaddingCache(force); - - if (paddingAbsoluteChanged || paddingChanged) { - const paddingStyle: TRBL = { - t: 0, - r: 0, - b: 0, - l: 0, - }; - - if (!paddingAbsolute) { - paddingStyle.t = -padding!.t; - paddingStyle.r = -(padding!.r + padding!.l); - paddingStyle.b = -(padding!.b + padding!.t); - paddingStyle.l = -padding!.l; - } - - style(_padding, { - top: paddingStyle.t, - left: paddingStyle.l, - marginRight: paddingStyle.r, - marginBottom: paddingStyle.b, - maxWidth: `calc(100% + ${paddingStyle.r * -1}px)`, - }); - } - - const viewportOffsetSize = offsetSize(_padding); - const contentClientSize = offsetSize(_content); - const contentScrollSize = scrollSize(_content); - const overflowAmuntCache = updateOverflowAmountCache(force, { - _contentScrollSize: contentScrollSize, - _viewportSize: { - w: viewportOffsetSize.w + Math.max(0, contentClientSize.w - contentScrollSize.w), - h: viewportOffsetSize.h + Math.max(0, contentClientSize.h - contentScrollSize.h), - }, - }); - const { _value: overflowAmount, _changed: overflowAmountChanged } = overflowAmuntCache; - - console.log('overflowAmount', overflowAmount); - console.log('overflowAmountChanged', overflowAmountChanged); - - /* - var setOverflowVariables = function (horizontal) { - var scrollbarVars = getScrollbarVars(horizontal); - var scrollbarVarsInverted = getScrollbarVars(!horizontal); - var xyI = scrollbarVarsInverted._x_y; - var xy = scrollbarVars._x_y; - var wh = scrollbarVars._w_h; - var widthHeight = scrollbarVars._width_height; - var scrollMax = _strScroll + scrollbarVars._Left_Top + 'Max'; - var fractionalOverflowAmount = viewportRect[widthHeight] ? MATH.abs(viewportRect[widthHeight] - _viewportSize[wh]) : 0; - var checkFractionalOverflowAmount = previousOverflowAmount && previousOverflowAmount[xy] > 0 && _viewportElementNative[scrollMax] === 0; - overflowBehaviorIsVS[xy] = overflowBehavior[xy] === 'v-s'; - overflowBehaviorIsVH[xy] = overflowBehavior[xy] === 'v-h'; - overflowBehaviorIsS[xy] = overflowBehavior[xy] === 's'; - overflowAmount[xy] = MATH.max(0, MATH.round((contentScrollSize[wh] - _viewportSize[wh]) * 100) / 100); - overflowAmount[xy] *= - hideOverflowForceTextarea || (checkFractionalOverflowAmount && fractionalOverflowAmount > 0 && fractionalOverflowAmount < 1) ? 0 : 1; - hasOverflow[xy] = overflowAmount[xy] > 0; - - //hideOverflow: - //x || y : true === overflow is hidden by "overflow: scroll" OR "overflow: hidden" - //xs || ys : true === overflow is hidden by "overflow: scroll" - hideOverflow[xy] = - overflowBehaviorIsVS[xy] || overflowBehaviorIsVH[xy] - ? hasOverflow[xyI] && !overflowBehaviorIsVS[xyI] && !overflowBehaviorIsVH[xyI] - : hasOverflow[xy]; - hideOverflow[xy + 's'] = hideOverflow[xy] ? overflowBehaviorIsS[xy] || overflowBehaviorIsVS[xy] : false; - - canScroll[xy] = hasOverflow[xy] && hideOverflow[xy + 's']; - }; -*/ - /* - if (!supportsScrollbarStyling) { - paddingStyle.r -= env._nativeScrollbarSize.y; - paddingStyle.b -= env._nativeScrollbarSize.x; - } - */ - }); - - const onSizeChanged = () => { - _update(); - }; - const onTrinsicChanged = (heightIntrinsic: CacheValues) => { - const { _changed, _value } = heightIntrinsic; - if (_changed) { - style(_content, { height: _value ? 'auto' : '100%' }); - } - }; - - return { - _update, - _onSizeChanged: onSizeChanged, - _onTrinsicChanged: onTrinsicChanged, - _destruct() { - runEach(destructFns); - }, - }; -}; diff --git a/packages/overlayscrollbars/src/lifecycles/trinsicLifecycle.ts b/packages/overlayscrollbars/src/lifecycles/trinsicLifecycle.ts new file mode 100644 index 0000000..f8be7b8 --- /dev/null +++ b/packages/overlayscrollbars/src/lifecycles/trinsicLifecycle.ts @@ -0,0 +1,18 @@ +import { style } from 'support'; +import { LifecycleHub, Lifecycle } from 'lifecycles/lifecycleHub'; + +export const createTrinsicLifecycle = (lifecycleHub: LifecycleHub): Lifecycle => { + const { _structureSetup } = lifecycleHub; + const { _content } = _structureSetup._targetObj; + + return (updateHints) => { + const { _heightIntrinsic } = updateHints; + const { _value: heightIntrinsic, _changed: heightIntrinsicChanged } = _heightIntrinsic; + + if (heightIntrinsicChanged) { + style(_content, { + height: heightIntrinsic ? 'auto' : '100%', + }); + } + }; +}; diff --git a/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts b/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts index 6d670e2..761d423 100644 --- a/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts +++ b/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts @@ -4,7 +4,7 @@ import { createDiv, appendChildren, parent, style, on, off, addClass, WH, XY, cl import { OverlayScrollbars } from 'overlayscrollbars/OverlayScrollbars'; const targetElm = document.querySelector('#target') as HTMLElement; -window.os = OverlayScrollbars({ target: targetElm, padding: null, content: null }); +window.os = OverlayScrollbars({ target: targetElm, padding: null }); export const resize = (element: HTMLElement) => { const strMouseTouchDownEvent = 'mousedown touchstart';