mirrors/OverlayScrollbars
2
0
Fork 0
mirror of https://github.com/tenrok/OverlayScrollbars.git synced 2026-05-17 08:09:40 +03:00
Code Issues Packages Projects Releases Wiki Activity

improve code

Browse Source
This commit is contained in:
Rene
2021-04-25 20:24:56 +02:00
parent 6e0add8989
commit 970f69a5ab
4 changed files with 44 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts
+17 -2
View File
@@ -1,4 +1,4 @@
import { XY, TRBL, CacheValues, PartialOptions, each, push, keys, hasOwnProperty, isNumber, scrollLeft, scrollTop } from 'support';
import { XY, WH, TRBL, CacheValues, PartialOptions, each, push, keys, hasOwnProperty, isNumber, scrollLeft, scrollTop } from 'support';
import { OSOptions } from 'options';
import { getEnvironment } from 'environment';
import { StructureSetup } from 'setups/structureSetup';
@@ -42,6 +42,7 @@ export type Lifecycle = (
export interface LifecycleHubInstance {
_update(changedOptions?: PartialOptions<OSOptions> | null, force?: boolean): void;
_state(): any;
_destroy(): void;
}
@@ -56,7 +57,9 @@ export interface LifecycleHub {
_getViewportPaddingStyle(): StyleObject;
_setViewportPaddingStyle(newPaddingStlye?: StyleObject | null): void;
_getViewportOverflowScroll(): XY<boolean>;
_setViewportOverflowScroll(newViewportOverflowScroll: XY<boolean>): void;
_setViewportOverflowScroll(newViewportOverflowScroll?: XY<boolean>): void;
_getViewportOverflowAmount(): WH<number>;
_setViewportOverflowAmount(newViewportOverflowAmount?: WH<number>): void;
}
const getPropByPath = <T>(obj: any, path: string): T =>
@@ -98,6 +101,10 @@ const viewportOverflowScrollFallback: XY<boolean> = {
x: false,
y: false,
};
const viewportOverflowAmountFallback: WH<number> = {
w: 0,
h: 0,
};
const directionIsRTLCacheValuesFallback: CacheValues<boolean> = {
_value: false,
_previous: false,
@@ -113,6 +120,7 @@ export const createLifecycleHub = (options: OSOptions, structureSetup: Structure
let paddingInfo = paddingInfoFallback;
let viewportPaddingStyle = viewportPaddingStyleFallback;
let viewportOverflowScroll = viewportOverflowScrollFallback;
let viewportOverflowAmount = viewportOverflowAmountFallback;
const { _host, _viewport, _content } = structureSetup._targetObj;
const {
_nativeScrollbarStyling,
@@ -139,6 +147,10 @@ export const createLifecycleHub = (options: OSOptions, structureSetup: Structure
_setViewportOverflowScroll(newViewportOverflowScroll) {
viewportOverflowScroll = newViewportOverflowScroll || viewportOverflowScrollFallback;
},
_getViewportOverflowAmount: () => viewportOverflowAmount,
_setViewportOverflowAmount(newViewportOverflowAmount) {
viewportOverflowAmount = newViewportOverflowAmount || viewportOverflowAmountFallback;
},
};
push(lifecycles, createTrinsicLifecycle(instance));
@@ -266,6 +278,9 @@ export const createLifecycleHub = (options: OSOptions, structureSetup: Structure
return {
_update: update,
_state: () => ({
_overflowAmount: viewportOverflowAmount,
}),
_destroy() {
removeEnvironmentListener(envUpdateListener);
},
packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts
+19 -11
View File
@@ -4,7 +4,6 @@ import {
attr,
WH,
XY,
equalXY,
style,
scrollSize,
CacheValues,
@@ -58,18 +57,25 @@ const overlaidScrollbarsHideOffset = 42;
* @returns
*/
export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle => {
const { _structureSetup, _doViewportArrange, _getViewportPaddingStyle, _getPaddingInfo, _setViewportOverflowScroll } = lifecycleHub;
const { _host, _padding, _viewport, _viewportArrange } = _structureSetup._targetObj;
const {
_structureSetup,
_doViewportArrange,
_getViewportPaddingStyle,
_getPaddingInfo,
_setViewportOverflowScroll,
_setViewportOverflowAmount,
} = lifecycleHub;
const { _host, _viewport, _viewportArrange } = _structureSetup._targetObj;
const { _update: updateContentScrollSizeCache, _current: getCurrentContentScrollSizeCache } = createCache<
WH<number>,
ContentScrollSizeCacheContext
>((ctx) => fixScrollSizeRounding(ctx._viewportScrollSize, ctx._viewportOffsetSize, ctx._viewportRect), { _equal: equalWH });
const { _update: updateOverflowAmountCache, _current: getCurrentOverflowAmountCache } = createCache<XY<number>, OverflowAmountCacheContext>(
const { _update: updateOverflowAmountCache, _current: getCurrentOverflowAmountCache } = createCache<WH<number>, OverflowAmountCacheContext>(
(ctx) => ({
x: Math.max(0, ctx._contentScrollSize.w - ctx._viewportSize.w),
y: Math.max(0, ctx._contentScrollSize.h - ctx._viewportSize.h),
w: Math.max(0, ctx._contentScrollSize.w - ctx._viewportSize.w),
h: Math.max(0, ctx._contentScrollSize.h - ctx._viewportSize.h),
}),
{ _equal: equalXY, _initialValue: { x: 0, y: 0 } }
{ _equal: equalWH, _initialValue: { w: 0, h: 0 } }
);
/**
@@ -151,7 +157,7 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
*/
const setViewportOverflowState = (
showNativeOverlaidScrollbars: boolean,
overflowAmount: XY<number>,
overflowAmount: WH<number>,
overflow: OverflowOption,
viewportStyleObj: StyleObject
): ViewportOverflowState => {
@@ -173,8 +179,8 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
_behavior: behaviorIsVisibleHidden ? 'hidden' : 'scroll',
};
};
const { _visible: xVisible, _behavior: xVisibleBehavior } = setPartialStylePerAxis(true, overflowAmount!.x, overflow.x, viewportStyleObj);
const { _visible: yVisible, _behavior: yVisibleBehavior } = setPartialStylePerAxis(false, overflowAmount!.y, overflow.y, viewportStyleObj);
const { _visible: xVisible, _behavior: xVisibleBehavior } = setPartialStylePerAxis(true, overflowAmount!.w, overflow.x, viewportStyleObj);
const { _visible: yVisible, _behavior: yVisibleBehavior } = setPartialStylePerAxis(false, overflowAmount!.h, overflow.y, viewportStyleObj);
if (xVisible && !yVisible) {
viewportStyleObj.overflowX = xVisibleBehavior;
@@ -338,7 +344,7 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
const showNativeOverlaidScrollbars = showNativeOverlaidScrollbarsOption && _nativeScrollbarIsOverlaid.x && _nativeScrollbarIsOverlaid.y;
const adjustFlexboxGlue =
!_flexboxGlue && (_sizeChanged || _contentMutation || _hostMutation || showNativeOverlaidScrollbarsChanged || heightIntrinsicChanged);
let overflowAmuntCache: CacheValues<XY<number>> = getCurrentOverflowAmountCache(force);
let overflowAmuntCache: CacheValues<WH<number>> = getCurrentOverflowAmountCache(force);
let contentScrollSizeCache: CacheValues<WH<number>> = getCurrentContentScrollSizeCache(force);
let preMeasureViewportOverflowState: ViewportOverflowState | undefined;
@@ -433,10 +439,12 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
// TODO: Test without content
// TODO: Test without padding
// TODO: overflow: visible on padding / host if overflow visible on both axis
// TODO: change lifecyclehub communication to single object & assign
style(_viewport, viewportStyle);
_setViewportOverflowScroll(viewportOverflowState._overflowScroll);
_setViewportOverflowAmount(overflowAmount);
}
};
};
packages/overlayscrollbars/src/overlayscrollbars.ts
+3
View File
@@ -14,6 +14,8 @@ export interface OverlayScrollbars {
options(newOptions?: PartialOptions<OSOptions>): OSOptions;
update(force?: boolean): void;
state(): any;
}
export const OverlayScrollbars: OverlayScrollbarsStatic = (
@@ -41,6 +43,7 @@ export const OverlayScrollbars: OverlayScrollbarsStatic = (
}
return currentOptions;
},
state: () => lifecycleHub._state(),
update(force?: boolean) {
lifecycleHub._update(null, force);
},
packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts
+5 -5
View File
@@ -142,9 +142,6 @@ const checkMetrics = async () => {
},
};
//console.log('t', targetMetrics);
//console.log('c', comparisonMatrics);
should.equal(targetMetrics.offset.left, comparisonMetrics.offset.left, 'Offset left equality.');
should.equal(targetMetrics.offset.top, comparisonMetrics.offset.top, 'Offset top equality.');
@@ -154,6 +151,9 @@ const checkMetrics = async () => {
should.equal(targetMetrics.scroll.width, comparisonMetrics.scroll.width, 'Scroll width equality.');
should.equal(targetMetrics.scroll.height, comparisonMetrics.scroll.height, 'Scroll height equality.');
should.equal(osInstance.state()._overflowAmount.w, comparisonMetrics.scroll.width, 'Overflow amount width equality.');
should.equal(osInstance.state()._overflowAmount.h, comparisonMetrics.scroll.height, 'Overflow amount height equality.');
if (targetMetrics.scroll.width > 0) {
should.equal(style(targetViewport!, 'overflowX'), 'scroll', 'Overflow-X should result in scroll.');
} else {
@@ -324,8 +324,8 @@ const overflowTest = async () => {
await checkMetrics();
};
style(targetResize, { boxSizing: 'border-box' });
style(comparisonResize, { boxSizing: 'border-box' });
style(targetResize, { boxSizing: 'border-box', background: 'rgba(0, 0, 0, 0.1)' });
style(comparisonResize, { boxSizing: 'border-box', background: 'rgba(0, 0, 0, 0.1)' });
style(targetPercent, { display: 'none' });
style(comparisonPercent, { display: 'none' });
style(targetEnd, { display: 'none' });