From 86fc032d1381b7a72f0c0cbceb583900c8015ca1 Mon Sep 17 00:00:00 2001 From: Rene Haas Date: Mon, 6 May 2024 10:26:32 +0200 Subject: [PATCH] improvements --- packages/overlayscrollbars/src/classnames.ts | 2 + packages/overlayscrollbars/src/environment.ts | 12 ++-- .../src/observers/trinsicObserver.ts | 4 +- .../sizeObserverPlugin/sizeObserverPlugin.ts | 6 +- .../setups/observersSetup/observersSetup.ts | 19 ++--- .../scrollbarsSetup.elements.ts | 6 +- .../scrollbarsSetup/scrollbarsSetup.events.ts | 10 +-- .../overlayscrollbars/src/setups/setups.ts | 12 ++-- .../setups/structureSetup/structureSetup.ts | 20 ++---- .../updateSegments/overflowUpdateSegment.ts | 69 +++++++++++++++---- .../src/styles/structure.scss | 8 +++ .../src/support/dom/dimensions.ts | 10 +-- .../src/support/dom/scroll.ts | 4 +- .../jest-jsdom/support/dom/dimensions.test.ts | 38 +++++----- .../jest-jsdom/support/dom/scroll.test.ts | 10 +-- .../observers/sizeObserver/index.browser.ts | 6 +- .../trinsicObserver/index.browser.ts | 6 +- .../structureSetup/update/index.browser.ts | 4 +- 18 files changed, 148 insertions(+), 98 deletions(-) diff --git a/packages/overlayscrollbars/src/classnames.ts b/packages/overlayscrollbars/src/classnames.ts index 3f0e4162..e45d662a 100644 --- a/packages/overlayscrollbars/src/classnames.ts +++ b/packages/overlayscrollbars/src/classnames.ts @@ -22,6 +22,8 @@ export const dataAttributeHost = dataAttributePrefix; export const dataAttributeViewport = `${dataAttributePrefix}-viewport`; export const dataValueViewportOverflowXPrefix = strOverflowX; export const dataValueViewportOverflowYPrefix = strOverflowY; +export const dataValueViewportOverflowVisible = 'overflowVisible'; +export const dataValueViewportOverflowHidden = 'overflowHidden'; export const dataValueViewportArrange = 'arrange'; export const dataValueViewportMeasuring = 'measuring'; export const dataValueViewportScrollbarHidden = 'scrollbarHidden'; diff --git a/packages/overlayscrollbars/src/environment.ts b/packages/overlayscrollbars/src/environment.ts index 914df50e..5fcdfa29 100644 --- a/packages/overlayscrollbars/src/environment.ts +++ b/packages/overlayscrollbars/src/environment.ts @@ -2,10 +2,10 @@ import { createDOM, addClass, appendChildren, - fractionalSize, - clientSize, + getFractionalSize, + getClientSize, absoluteCoordinates, - offsetSize, + getOffsetSize, removeAttrs, removeElements, assignDeep, @@ -63,9 +63,9 @@ const createEnvironment = (): Env => { appendChildren(document.body, measureElm); appendChildren(document.body, measureElm); - const cSize = clientSize(measureElm); - const oSize = offsetSize(measureElm); - const fSize = fractionalSize(measureElmChild); + const cSize = getClientSize(measureElm); + const oSize = getOffsetSize(measureElm); + const fSize = getFractionalSize(measureElmChild); clear && removeElements(measureElm); diff --git a/packages/overlayscrollbars/src/observers/trinsicObserver.ts b/packages/overlayscrollbars/src/observers/trinsicObserver.ts index 6a4a775d..57b2fc27 100644 --- a/packages/overlayscrollbars/src/observers/trinsicObserver.ts +++ b/packages/overlayscrollbars/src/observers/trinsicObserver.ts @@ -1,6 +1,6 @@ import { createDiv, - offsetSize, + getOffsetSize, runEachAndClear, createCache, push, @@ -71,7 +71,7 @@ export const createTrinsicObserver = ( }); } else { const onSizeChanged = () => { - const newSize = offsetSize(trinsicObserver); + const newSize = getOffsetSize(trinsicObserver); triggerOnTrinsicChangedCallback(newSize); }; push(destroyFns, createSizeObserver(trinsicObserver, onSizeChanged)()); diff --git a/packages/overlayscrollbars/src/plugins/sizeObserverPlugin/sizeObserverPlugin.ts b/packages/overlayscrollbars/src/plugins/sizeObserverPlugin/sizeObserverPlugin.ts index 561598e3..1c203c73 100644 --- a/packages/overlayscrollbars/src/plugins/sizeObserverPlugin/sizeObserverPlugin.ts +++ b/packages/overlayscrollbars/src/plugins/sizeObserverPlugin/sizeObserverPlugin.ts @@ -1,7 +1,7 @@ import { createDOM, appendChildren, - offsetSize, + getOffsetSize, addEventListener, addClass, equalWH, @@ -42,7 +42,7 @@ export const SizeObserverPlugin = /* @__PURE__ */ (() => ({ const expandElement = observerElementChildrenRoot.firstChild as HTMLElement; const expandElementChild = expandElement?.firstChild as HTMLElement; - let cacheSize = offsetSize(observerElementChildrenRoot); + let cacheSize = getOffsetSize(observerElementChildrenRoot); let currSize = cacheSize; let isDirty = false; let rAFId: number; @@ -59,7 +59,7 @@ export const SizeObserverPlugin = /* @__PURE__ */ (() => ({ } }; const onScroll = (scrollEvent?: Event | false) => { - currSize = offsetSize(observerElementChildrenRoot); + currSize = getOffsetSize(observerElementChildrenRoot); isDirty = !scrollEvent || !equalWH(currSize, cacheSize); if (scrollEvent) { diff --git a/packages/overlayscrollbars/src/setups/observersSetup/observersSetup.ts b/packages/overlayscrollbars/src/setups/observersSetup/observersSetup.ts index b145d6f1..db64dc9a 100644 --- a/packages/overlayscrollbars/src/setups/observersSetup/observersSetup.ts +++ b/packages/overlayscrollbars/src/setups/observersSetup/observersSetup.ts @@ -7,7 +7,7 @@ import { getDirectionIsRTL, each, equalWH, - fractionalSize, + getFractionalSize, isArray, isFunction, isNumber, @@ -15,8 +15,8 @@ import { keys, liesBetween, removeAttrs, - scrollSize, - getElmentScroll, + getScrollSize, + getElementScroll, scrollElementTo, inArray, domRectAppeared, @@ -94,6 +94,7 @@ export const createObserversSetup = ( _target, _host, _viewport, + _scrollOffsetElement, _content, _isTextarea, _viewportIsTarget, @@ -127,19 +128,19 @@ export const createObserversSetup = ( )._undoViewportArrange; const isArranged = !_viewportIsTarget && _viewportHasClass(dataValueViewportArrange); - const scrollOffset = isArranged && getElmentScroll(_viewport); + const scrollOffset = isArranged && getElementScroll(_scrollOffsetElement); const revertMeasuring = _viewportAddRemoveClass(dataValueViewportMeasuring, true); const redoViewportArrange = isArranged && _undoViewportArrange && _undoViewportArrange()[0]; - const contentScroll = scrollSize(_content); - const viewportScroll = scrollSize(_viewport); - const fractional = fractionalSize(_viewport); + const contentScroll = getScrollSize(_content); + const viewportScroll = getScrollSize(_viewport); + const fractional = getFractionalSize(_viewport); - revertMeasuring(); redoViewportArrange && redoViewportArrange(); - scrollElementTo(_viewport, scrollOffset); + scrollElementTo(_scrollOffsetElement, scrollOffset); + revertMeasuring(); return { w: viewportScroll.w + contentScroll.w + fractional.w, diff --git a/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.elements.ts b/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.elements.ts index e55fa622..794f70b5 100644 --- a/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.elements.ts +++ b/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.elements.ts @@ -13,7 +13,7 @@ import { runEachAndClear, scrollT, bind, - getElmentScroll, + getElementScroll, inArray, strWidth, strHeight, @@ -322,7 +322,7 @@ export const createScrollbarsSetupElements = ( ); }); } else { - const scroll = getElmentScroll(_scrollOffsetElement); + const scroll = getElementScroll(_scrollOffsetElement); scrollbarStyle(scrollbarStructures, (structure) => { const { _handle, _scrollbar } = structure; return [ @@ -400,7 +400,7 @@ export const createScrollbarsSetupElements = ( } }); } else { - const scroll = getElmentScroll(_scrollOffsetElement); + const scroll = getElementScroll(_scrollOffsetElement); const styleScrollbarPosition = (structure: ScrollbarStructure) => { const { _scrollbar } = structure; const elm = doRefreshScrollbarOffset(_scrollbar) && _scrollbar; diff --git a/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.events.ts b/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.events.ts index 84f5073e..7ad25fd9 100644 --- a/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.events.ts +++ b/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.events.ts @@ -1,6 +1,6 @@ import { getBoundingClientRect, - offsetSize, + getOffsetSize, addEventListener, preventDefault, runEachAndClear, @@ -12,7 +12,7 @@ import { mathRound, strWidth, strHeight, - getElmentScroll, + getElementScroll, scrollElementTo, getFocusedElement, setT, @@ -91,7 +91,7 @@ export const createScrollbarsSetupEvents = ( const createRelativeHandleMove = (mouseDownScroll: number, invertedScale: number) => (deltaMovement: number) => { const { _overflowAmount } = structureSetupState; - const handleTrackDiff = offsetSize(_track)[whKey] - offsetSize(_handle)[whKey]; + const handleTrackDiff = getOffsetSize(_track)[whKey] - getOffsetSize(_handle)[whKey]; const scrollDeltaPercent = (invertedScale * deltaMovement) / handleTrackDiff; const scrollDelta = scrollDeltaPercent * _overflowAmount[xyKey]; @@ -123,9 +123,9 @@ export const createScrollbarsSetupEvents = ( (handleRect || getHandleRect())[leftTopKey] - (trackRect || getTrackRect())[leftTopKey]; const axisScale = mathRound(getBoundingClientRect(_scrollOffsetElement)[widthHeightKey]) / - offsetSize(_scrollOffsetElement)[whKey] || 1; + getOffsetSize(_scrollOffsetElement)[whKey] || 1; const moveHandleRelative = createRelativeHandleMove( - getElmentScroll(_scrollOffsetElement)[xyKey] || 0, + getElementScroll(_scrollOffsetElement)[xyKey] || 0, 1 / axisScale ); const pointerDownOffset = pointerDownEvent[clientXYKey]; diff --git a/packages/overlayscrollbars/src/setups/setups.ts b/packages/overlayscrollbars/src/setups/setups.ts index fa59c55c..297bcc5e 100644 --- a/packages/overlayscrollbars/src/setups/setups.ts +++ b/packages/overlayscrollbars/src/setups/setups.ts @@ -1,13 +1,14 @@ import { assignDeep, bind, - getElmentScroll, + getElementScroll, isEmptyObject, keys, runEachAndClear, scrollElementTo, } from '~/support'; import { createOptionCheck } from '~/options'; +import { dataValueViewportMeasuring } from '~/classnames'; import type { OptionsCheckFn, Options, PartialOptions, ReadonlyOptions } from '~/options'; import type { DeepReadonly } from '~/typings'; import type { InitializationTarget } from '~/initialization'; @@ -170,11 +171,14 @@ export const createSetups = ( return [ () => { - const { _originalScrollOffsetElement, _viewport } = structureSetupElements; - const initialScroll = getElmentScroll(_originalScrollOffsetElement); + const { _originalScrollOffsetElement, _scrollOffsetElement, _viewportAddRemoveClass } = + structureSetupElements; + const removeMeasuring = _viewportAddRemoveClass(dataValueViewportMeasuring, true); + const initialScroll = getElementScroll(_originalScrollOffsetElement); const destroyFns = [observersSetupCreate(), structureSetupCreate(), scrollbarsSetupCreate()]; - scrollElementTo(_viewport, initialScroll); + scrollElementTo(_scrollOffsetElement, initialScroll); + removeMeasuring(); return bind(runEachAndClear, destroyFns); }, diff --git a/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.ts b/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.ts index a5777f98..f0714fac 100644 --- a/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.ts +++ b/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.ts @@ -1,10 +1,8 @@ import { getEnvironment } from '~/environment'; import { - addAttrClass, assignDeep, each, - getElmentScroll, - noop, + getElementScroll, scrollElementTo, strHidden, strMarginBottom, @@ -17,7 +15,7 @@ import { type TRBL, type XY, } from '~/support'; -import { dataAttributeHost, dataValueViewportMeasuring } from '~/classnames'; +import { dataValueViewportMeasuring } from '~/classnames'; import type { StructureSetupElementsObj } from './structureSetup.elements'; import type { ObserversSetupState, @@ -104,7 +102,7 @@ export const createStructureSetup = (target: InitializationTarget): StructureSet y: false, }, }; - const { _target, _viewport, _viewportIsTarget } = elements; + const { _target, _scrollOffsetElement, _viewportIsTarget, _viewportAddRemoveClass } = elements; const { _nativeScrollbarsHiding, _nativeScrollbarsOverlaid } = getEnvironment(); const doViewportArrange = !_nativeScrollbarsHiding && (_nativeScrollbarsOverlaid.x || _nativeScrollbarsOverlaid.y); @@ -120,20 +118,16 @@ export const createStructureSetup = (target: InitializationTarget): StructureSet (updateInfo) => { const updateHints: StructureSetupUpdateHints = {}; const adjustScrollOffset = doViewportArrange; - const scrollOffset = adjustScrollOffset && getElmentScroll(_viewport); - - const removeAttrClass = _viewportIsTarget - ? addAttrClass(_viewport, dataAttributeHost, dataValueViewportMeasuring) - : noop; + const scrollOffset = adjustScrollOffset && getElementScroll(_scrollOffsetElement); + const removeMeasuring = _viewportAddRemoveClass(dataValueViewportMeasuring, true); each(updateSegments, (updateSegment) => { assignDeep(updateHints, updateSegment(updateInfo, updateHints) || {}); }); - removeAttrClass(); - - scrollElementTo(_viewport, scrollOffset); + scrollElementTo(_scrollOffsetElement, scrollOffset); !_viewportIsTarget && scrollElementTo(_target, 0); + removeMeasuring(); return updateHints; }, diff --git a/packages/overlayscrollbars/src/setups/structureSetup/updateSegments/overflowUpdateSegment.ts b/packages/overlayscrollbars/src/setups/structureSetup/updateSegments/overflowUpdateSegment.ts index 809480d1..7decb147 100644 --- a/packages/overlayscrollbars/src/setups/structureSetup/updateSegments/overflowUpdateSegment.ts +++ b/packages/overlayscrollbars/src/setups/structureSetup/updateSegments/overflowUpdateSegment.ts @@ -1,15 +1,15 @@ import { createCache, - scrollSize, - fractionalSize, + getScrollSize, + getFractionalSize, equalWH, - clientSize, + getClientSize, equalXY, assignDeep, bind, wnd, mathMax, - windowSize, + getWindowSize, addRemoveAttrClass, capitalizeFirstLetter, setStyles, @@ -18,6 +18,8 @@ import { each, keys, strScroll, + scrollElementTo, + getElementScroll, } from '~/support'; import { getEnvironment } from '~/environment'; import { @@ -25,9 +27,10 @@ import { dataValueNoClipping, dataValueViewportScrollbarHidden, dataAttributePadding, - dataValueViewportMeasuring, dataValueViewportOverflowXPrefix, dataValueViewportOverflowYPrefix, + dataValueViewportOverflowVisible, + dataValueViewportOverflowHidden, } from '~/classnames'; import { getStaticPluginModuleInstance, scrollbarsHidingPluginName } from '~/plugins'; import type { WH, XY } from '~/support'; @@ -56,6 +59,7 @@ export const createOverflowUpdateSegment: CreateStructureUpdateSegment = ( _padding, _viewport, _viewportIsTarget, + _scrollOffsetElement, _isBody, _viewportAddRemoveClass, _windowElm, @@ -68,7 +72,10 @@ export const createOverflowUpdateSegment: CreateStructureUpdateSegment = ( _equal: equalWH, _initialValue: { w: 0, h: 0 }, }; - const getOverflowAmount = (viewportScrollSize: WH, viewportClientSize: WH) => { + const getOverflowAmount = ( + viewportScrollSize: WH, + viewportClientSize: WH + ): WH => { const tollerance = wnd.devicePixelRatio % 1 !== 0 ? 1 : 0; const amount = { w: max0(viewportScrollSize.w - viewportClientSize.w), @@ -80,14 +87,50 @@ export const createOverflowUpdateSegment: CreateStructureUpdateSegment = ( h: amount.h > tollerance ? amount.h : 0, }; }; + const getOverflowCoordinates = (overflowAmount: WH) => { + const removeVisible = _viewportAddRemoveClass(dataValueViewportOverflowVisible, true); + + scrollElementTo(_scrollOffsetElement, { + x: 0, + y: 0, + }); + removeVisible(); + + const removeHidden = _viewportAddRemoveClass(dataValueViewportOverflowHidden, true); + const start = getElementScroll(_scrollOffsetElement); + + scrollElementTo(_scrollOffsetElement, { + x: overflowAmount.w, + y: overflowAmount.h, + }); + + const tmp = getElementScroll(_scrollOffsetElement); + scrollElementTo(_scrollOffsetElement, { + x: tmp.x === start.x && -overflowAmount.w, + y: tmp.y === start.y && -overflowAmount.h, + }); + + const end = getElementScroll(_scrollOffsetElement); + removeHidden(); + + console.log({ + start, + end, + }); + + return { + start, + end, + }; + }; const [updateSizeFraction, getCurrentSizeFraction] = createCache>( whCacheOptions, - bind(fractionalSize, _viewport) + bind(getFractionalSize, _viewport) ); const [updateViewportScrollSizeCache, getCurrentViewportScrollSizeCache] = createCache< WH - >(whCacheOptions, bind(scrollSize, _viewport)); + >(whCacheOptions, bind(getScrollSize, _viewport)); const [updateOverflowAmountCache, getCurrentOverflowAmountCache] = createCache>(whCacheOptions); const [updateOverflowEdge, getCurrentOverflowEdgeCache] = createCache>(whCacheOptions); @@ -169,22 +212,18 @@ export const createOverflowUpdateSegment: CreateStructureUpdateSegment = ( } if (viewportChanged) { - _viewportAddRemoveClass(dataValueViewportMeasuring, true); - const [redoViewportArrange] = _undoViewportArrange ? _undoViewportArrange() : []; const [sizeFraction] = (sizeFractionCache = updateSizeFraction(_force)); const [viewportScrollSize] = (viewportScrollSizeCache = updateViewportScrollSizeCache(_force)); - const viewportClientSize = clientSize(_viewport); + const viewportClientSize = getClientSize(_viewport); const arrangedViewportScrollSize = viewportScrollSize; const arrangedViewportClientSize = viewportClientSize; - _viewportAddRemoveClass(dataValueViewportMeasuring); - redoViewportArrange && redoViewportArrange(); - const windowInnerSize = windowSize(_windowElm()); + const windowInnerSize = getWindowSize(_windowElm()); const overflowAmountScrollSize = { w: max0(mathMax(viewportScrollSize.w, arrangedViewportScrollSize.w) + sizeFraction.w), h: max0(mathMax(viewportScrollSize.h, arrangedViewportScrollSize.h) + sizeFraction.h), @@ -210,6 +249,8 @@ export const createOverflowUpdateSegment: CreateStructureUpdateSegment = ( getOverflowAmount(overflowAmountScrollSize, overflowAmountClientSize), _force ); + + getOverflowCoordinates(overflowAmuntCache[0]); } const [overflowEdge, overflowEdgeChanged] = overflowEdgeCache; diff --git a/packages/overlayscrollbars/src/styles/structure.scss b/packages/overlayscrollbars/src/styles/structure.scss index 35f52ce4..f45df89b 100644 --- a/packages/overlayscrollbars/src/styles/structure.scss +++ b/packages/overlayscrollbars/src/styles/structure.scss @@ -55,6 +55,7 @@ html[data-overlayscrollbars-body] > body { align-items: stretch !important; flex-direction: row !important; flex-wrap: nowrap !important; + scroll-behavior: auto !important; } [data-overlayscrollbars-padding], @@ -102,6 +103,7 @@ html[data-overlayscrollbars-body] > body { [data-overlayscrollbars-viewport~='measuring'] { overflow: hidden; + scroll-behavior: auto !important; } [data-overlayscrollbars~='noClipping'], [data-overlayscrollbars-padding~='noClipping'] { @@ -130,6 +132,12 @@ html[data-overlayscrollbars-body] > body { [data-overlayscrollbars-viewport~='overflowYScroll'] { overflow-y: scroll; } +[data-overlayscrollbars-viewport~='overflowVisible'] { + overflow: visible !important; +} +[data-overlayscrollbars-viewport~='overflowHidden'] { + overflow: hidden !important; +} [data-overlayscrollbars-viewport~='scrollbarPressed'] { scroll-behavior: auto !important; diff --git a/packages/overlayscrollbars/src/support/dom/dimensions.ts b/packages/overlayscrollbars/src/support/dom/dimensions.ts index 9edc6a13..bbc9298b 100644 --- a/packages/overlayscrollbars/src/support/dom/dimensions.ts +++ b/packages/overlayscrollbars/src/support/dom/dimensions.ts @@ -30,14 +30,14 @@ const getElmWidthHeightProperty = ( /** * Returns the window inner- width and height. */ -export const windowSize = (customWnd?: Window): Readonly => +export const getWindowSize = (customWnd?: Window): Readonly => getElmWidthHeightProperty('inner', customWnd || wnd); /** * Returns the scroll- width and height of the passed element. If the element is null the width and height values are 0. * @param elm The element of which the scroll- width and height shall be returned. */ -export const offsetSize = bind(getElmWidthHeightProperty, 'offset') satisfies ( +export const getOffsetSize = bind(getElmWidthHeightProperty, 'offset') satisfies ( elm: HTMLElementTarget ) => Readonly; @@ -45,7 +45,7 @@ export const offsetSize = bind(getElmWidthHeightProperty, 'offset') * Returns the client- width and height of the passed element. If the element is null the width and height values are 0. * @param elm The element of which the client- width and height shall be returned. */ -export const clientSize = bind(getElmWidthHeightProperty, 'client') satisfies ( +export const getClientSize = bind(getElmWidthHeightProperty, 'client') satisfies ( elm: HTMLElementTarget ) => Readonly; @@ -53,7 +53,7 @@ export const clientSize = bind(getElmWidthHeightProperty, 'client') * Returns the client- width and height of the passed element. If the element is null the width and height values are 0. * @param elm The element of which the client- width and height shall be returned. */ -export const scrollSize = bind(getElmWidthHeightProperty, 'scroll') satisfies ( +export const getScrollSize = bind(getElmWidthHeightProperty, 'scroll') satisfies ( elm: HTMLElementTarget ) => Readonly; @@ -61,7 +61,7 @@ export const scrollSize = bind(getElmWidthHeightProperty, 'scroll') * Returns the fractional- width and height of the passed element. If the element is null the width and height values are 0. * @param elm The element of which the fractional- width and height shall be returned. */ -export const fractionalSize = (elm: HTMLElementTarget): Readonly => { +export const getFractionalSize = (elm: HTMLElementTarget): Readonly => { const cssWidth = parseFloat(getStyles(elm, strWidth)) || 0; const cssHeight = parseFloat(getStyles(elm, strHeight)) || 0; return { diff --git a/packages/overlayscrollbars/src/support/dom/scroll.ts b/packages/overlayscrollbars/src/support/dom/scroll.ts index ec10654b..ba8c5b11 100644 --- a/packages/overlayscrollbars/src/support/dom/scroll.ts +++ b/packages/overlayscrollbars/src/support/dom/scroll.ts @@ -66,7 +66,7 @@ export const getRawScrollRatio = ( */ export const scrollElementTo = ( elm: HTMLElement, - position: Partial | number | false | null | undefined + position: Partial> | number | false | null | undefined ): void => { const { x, y } = isNumber(position) ? { x: position, y: position } : position || {}; isNumber(x) && (elm.scrollLeft = x); @@ -78,7 +78,7 @@ export const scrollElementTo = ( * @param elm The element to be scrolled. * @param position The scroll position. */ -export const getElmentScroll = (elm: HTMLElement): Readonly => ({ +export const getElementScroll = (elm: HTMLElement): Readonly => ({ x: elm.scrollLeft, y: elm.scrollTop, }); diff --git a/packages/overlayscrollbars/test/jest-jsdom/support/dom/dimensions.test.ts b/packages/overlayscrollbars/test/jest-jsdom/support/dom/dimensions.test.ts index 361a930a..369e53af 100644 --- a/packages/overlayscrollbars/test/jest-jsdom/support/dom/dimensions.test.ts +++ b/packages/overlayscrollbars/test/jest-jsdom/support/dom/dimensions.test.ts @@ -1,11 +1,11 @@ import { isNumber, isPlainObject } from '~/support/utils/types'; import { createDiv } from '~/support/dom/create'; import { - windowSize, - offsetSize, - clientSize, - scrollSize, - fractionalSize, + getWindowSize, + getOffsetSize, + getClientSize, + getScrollSize, + getFractionalSize, getBoundingClientRect, hasDimensions, domRectHasDimensions, @@ -13,72 +13,72 @@ import { } from '~/support/dom/dimensions'; describe('dom dimensions', () => { - describe('offsetSize', () => { + describe('getOffsetSize', () => { test('DOM element', () => { - const result = offsetSize(document.body); + const result = getOffsetSize(document.body); expect(isPlainObject(result)).toBe(true); expect(isNumber(result.w)).toBe(true); expect(isNumber(result.h)).toBe(true); }); test('null', () => { - const result = offsetSize(null); + const result = getOffsetSize(null); expect(isPlainObject(result)).toBe(true); expect(isNumber(result.w)).toBe(true); expect(isNumber(result.h)).toBe(true); }); }); - describe('clientSize', () => { + describe('getClientSize', () => { test('DOM element', () => { - const result = clientSize(document.body); + const result = getClientSize(document.body); expect(isPlainObject(result)).toBe(true); expect(isNumber(result.w)).toBe(true); expect(isNumber(result.h)).toBe(true); }); test('null', () => { - const result = clientSize(null); + const result = getClientSize(null); expect(isPlainObject(result)).toBe(true); expect(isNumber(result.w)).toBe(true); expect(isNumber(result.h)).toBe(true); }); }); - describe('scrollSize', () => { + describe('getScrollSize', () => { test('DOM element', () => { - const result = scrollSize(document.body); + const result = getScrollSize(document.body); expect(isPlainObject(result)).toBe(true); expect(isNumber(result.w)).toBe(true); expect(isNumber(result.h)).toBe(true); }); test('null', () => { - const result = scrollSize(null); + const result = getScrollSize(null); expect(isPlainObject(result)).toBe(true); expect(isNumber(result.w)).toBe(true); expect(isNumber(result.h)).toBe(true); }); }); - describe('fractionalSize', () => { + describe('getFractionalSize', () => { test('DOM element', () => { - const result = fractionalSize(document.body); + const result = getFractionalSize(document.body); expect(isPlainObject(result)).toBe(true); expect(isNumber(result.w)).toBe(true); expect(isNumber(result.h)).toBe(true); }); test('null', () => { - const result = fractionalSize(null); + const result = getFractionalSize(null); expect(isPlainObject(result)).toBe(true); expect(isNumber(result.w)).toBe(true); expect(isNumber(result.h)).toBe(true); }); }); - test('windowSize', () => { - const result = windowSize(); + test('getWindowSize', () => { + const result = getWindowSize(); expect(isPlainObject(result)).toBe(true); expect(isNumber(result.w)).toBe(true); expect(isNumber(result.h)).toBe(true); diff --git a/packages/overlayscrollbars/test/jest-jsdom/support/dom/scroll.test.ts b/packages/overlayscrollbars/test/jest-jsdom/support/dom/scroll.test.ts index 13abff71..8d37efdd 100644 --- a/packages/overlayscrollbars/test/jest-jsdom/support/dom/scroll.test.ts +++ b/packages/overlayscrollbars/test/jest-jsdom/support/dom/scroll.test.ts @@ -2,7 +2,7 @@ import { convertScrollPosition, getRawScrollBounds, scrollElementTo, - getElmentScroll, + getElementScroll, getRawScrollRatio, } from '~/support/dom/scroll'; @@ -156,7 +156,7 @@ describe('dom scroll', () => { }); }); - describe('getElmentScroll', () => { + describe('getElementScroll', () => { beforeEach(() => { document.body.scrollLeft = 0; document.body.scrollTop = 0; @@ -167,7 +167,7 @@ describe('dom scroll', () => { x: 222, }); - expect(getElmentScroll(document.body)).toEqual({ x: 222, y: 0 }); + expect(getElementScroll(document.body)).toEqual({ x: 222, y: 0 }); }); test('y', () => { @@ -175,7 +175,7 @@ describe('dom scroll', () => { y: 333, }); - expect(getElmentScroll(document.body)).toEqual({ x: 0, y: 333 }); + expect(getElementScroll(document.body)).toEqual({ x: 0, y: 333 }); }); test('xy', () => { @@ -184,7 +184,7 @@ describe('dom scroll', () => { y: 333, }); - expect(getElmentScroll(document.body)).toEqual({ x: 222, y: 333 }); + expect(getElementScroll(document.body)).toEqual({ x: 222, y: 333 }); }); }); }); diff --git a/packages/overlayscrollbars/test/playwright/observers/sizeObserver/index.browser.ts b/packages/overlayscrollbars/test/playwright/observers/sizeObserver/index.browser.ts index 02de86f9..71212c11 100644 --- a/packages/overlayscrollbars/test/playwright/observers/sizeObserver/index.browser.ts +++ b/packages/overlayscrollbars/test/playwright/observers/sizeObserver/index.browser.ts @@ -10,7 +10,7 @@ import { setTestResult, waitForOrFailTest, } from '@~local/browser-testing'; -import { getStyles, hasDimensions, offsetSize } from '~/support'; +import { getStyles, hasDimensions, getOffsetSize } from '~/support'; import { SizeObserverPlugin } from '~/plugins'; import { createSizeObserver } from '~/observers'; import { OverlayScrollbars } from '~/overlayscrollbars'; @@ -96,7 +96,7 @@ const iterate = async (select: HTMLSelectElement | null, afterEach?: () => any) const currSizeIterations = sizeIterations; const currDirectionIterations = directionIterations; const currAppearIterations = appearIterations; - const currOffsetSize = offsetSize(targetElm as HTMLElement); + const currOffsetSize = getOffsetSize(targetElm as HTMLElement); const currContentSize = contentBox(targetElm as HTMLElement); const currDir = getStyles(targetElm as HTMLElement, 'direction'); const currBoxSizing = getStyles(targetElm as HTMLElement, 'boxSizing'); @@ -123,7 +123,7 @@ const iterate = async (select: HTMLSelectElement | null, afterEach?: () => any) currBoxSizing, currHasDimensions, }) { - const newOffsetSize = offsetSize(targetElm as HTMLElement); + const newOffsetSize = getOffsetSize(targetElm as HTMLElement); const newContentSize = contentBox(targetElm as HTMLElement); const newDir = getStyles(targetElm as HTMLElement, 'direction'); const newBoxSizing = getStyles(targetElm as HTMLElement, 'boxSizing'); diff --git a/packages/overlayscrollbars/test/playwright/observers/trinsicObserver/index.browser.ts b/packages/overlayscrollbars/test/playwright/observers/trinsicObserver/index.browser.ts index 163b874e..5cd11c65 100644 --- a/packages/overlayscrollbars/test/playwright/observers/trinsicObserver/index.browser.ts +++ b/packages/overlayscrollbars/test/playwright/observers/trinsicObserver/index.browser.ts @@ -10,7 +10,7 @@ import { setTestResult, waitForOrFailTest, } from '@~local/browser-testing'; -import { offsetSize } from '~/support'; +import { getOffsetSize } from '~/support'; import { createTrinsicObserver } from '~/observers'; import { OverlayScrollbars } from '~/overlayscrollbars'; import { SizeObserverPlugin } from '~/plugins'; @@ -68,14 +68,14 @@ const iterate = async (select: HTMLSelectElement | null, afterEach?: () => any) await iterateSelect(select, { beforeEach() { const currHeightIterations = heightIterations; - const currHeightIntrinsic = offsetSize(checkElm as HTMLElement).h === 0; + const currHeightIntrinsic = getOffsetSize(checkElm as HTMLElement).h === 0; return { currHeightIterations, currHeightIntrinsic, }; }, async check({ currHeightIterations, currHeightIntrinsic }) { - const newHeightIntrinsic = offsetSize(checkElm as HTMLElement).h === 0; + const newHeightIntrinsic = getOffsetSize(checkElm as HTMLElement).h === 0; const trinsicHeightChanged = newHeightIntrinsic !== currHeightIntrinsic; await waitForOrFailTest(() => { diff --git a/packages/overlayscrollbars/test/playwright/setups/structureSetup/update/index.browser.ts b/packages/overlayscrollbars/test/playwright/setups/structureSetup/update/index.browser.ts index 438ed7cb..ce01722a 100644 --- a/packages/overlayscrollbars/test/playwright/setups/structureSetup/update/index.browser.ts +++ b/packages/overlayscrollbars/test/playwright/setups/structureSetup/update/index.browser.ts @@ -14,7 +14,7 @@ import { } from '@~local/browser-testing'; import { assignDeep, - clientSize, + getClientSize, from, getBoundingClientRect, parent, @@ -656,7 +656,7 @@ const overflowTest = async (osOptions?: DeepPartial) => { const contentBox = (elm: HTMLElement | null): WH => { if (elm) { const computedStyle = window.getComputedStyle(elm); - const size = clientSize(elm); + const size = getClientSize(elm); return { w: size.w - (parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight)),