mirrors/OverlayScrollbars
2
0
Fork 0
mirror of https://github.com/tenrok/OverlayScrollbars.git synced 2026-06-19 07:10:35 +03:00
Code Issues Packages Projects Releases Wiki Activity

improve code and eslint

Browse Source
This commit is contained in:
Rene
2022-06-16 14:17:34 +02:00
parent 1fbc761483
commit a799c470ed
16 changed files with 137 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/overlayscrollbars/dist/overlayscrollbars.esm.js
Vendored
+8 -17
View File
@@ -2164,19 +2164,14 @@ const createOverflowLifecycle = lifecycleHub => {
const prevStyle = style(_viewport, keys(finalPaddingStyle));
removeClass(_viewport, classNameViewportArrange);
style(_viewport, finalPaddingStyle);
return {
_redoViewportArrange: () => {
hideNativeScrollbars(finalViewportOverflowState, directionIsRTL, _doViewportArrange, prevStyle);
style(_viewport, prevStyle);
addClass(_viewport, classNameViewportArrange);
},
_viewportOverflowState: finalViewportOverflowState
};
return [() => {
hideNativeScrollbars(finalViewportOverflowState, directionIsRTL, _doViewportArrange, prevStyle);
style(_viewport, prevStyle);
addClass(_viewport, classNameViewportArrange);
}, finalViewportOverflowState];
}
return {
_redoViewportArrange: noop
};
return [noop];
};
return (updateHints, checkOption, force) => {
@@ -2217,17 +2212,13 @@ const createOverflowLifecycle = lifecycleHub => {
}
if (_sizeChanged || _paddingStyleChanged || _contentMutation || showNativeOverlaidScrollbarsChanged || directionChanged) {
const {
_redoViewportArrange,
_viewportOverflowState: undoViewportArrangeOverflowState
} = undoViewportArrange(showNativeOverlaidScrollbars, directionIsRTL, preMeasureViewportOverflowState);
const [redoViewportArrange, undoViewportArrangeOverflowState] = undoViewportArrange(showNativeOverlaidScrollbars, directionIsRTL, preMeasureViewportOverflowState);
const [_viewportSizeFraction, viewportSizeFractionCahnged] = viewportSizeFractionCache = updateViewportSizeFraction(force);
const [_viewportScrollSize, _viewportScrollSizeChanged] = viewportScrollSizeCache = updateViewportScrollSizeCache(force);
const viewportContentSize = clientSize(_viewport);
let arrangedViewportScrollSize = _viewportScrollSize;
let arrangedViewportClientSize = viewportContentSize;
_redoViewportArrange();
redoViewportArrange();
if ((_viewportScrollSizeChanged || viewportSizeFractionCahnged || showNativeOverlaidScrollbarsChanged) && undoViewportArrangeOverflowState && !showNativeOverlaidScrollbars && arrangeViewport(undoViewportArrangeOverflowState, _viewportScrollSize, _viewportSizeFraction, directionIsRTL)) {
arrangedViewportClientSize = clientSize(_viewport);
packages/overlayscrollbars/dist/overlayscrollbars.esm.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/overlayscrollbars/dist/overlayscrollbars.esm.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/overlayscrollbars/dist/overlayscrollbars.js
Vendored
+9 -15
View File
@@ -2233,19 +2233,14 @@
var prevStyle = style(_viewport, keys(finalPaddingStyle));
removeClass(_viewport, classNameViewportArrange);
style(_viewport, finalPaddingStyle);
return {
_redoViewportArrange: function _redoViewportArrange() {
hideNativeScrollbars(finalViewportOverflowState, directionIsRTL, _doViewportArrange, prevStyle);
style(_viewport, prevStyle);
addClass(_viewport, classNameViewportArrange);
},
_viewportOverflowState: finalViewportOverflowState
};
return [function () {
hideNativeScrollbars(finalViewportOverflowState, directionIsRTL, _doViewportArrange, prevStyle);
style(_viewport, prevStyle);
addClass(_viewport, classNameViewportArrange);
}, finalViewportOverflowState];
}
return {
_redoViewportArrange: noop
};
return [noop];
};
return function (updateHints, checkOption, force) {
@@ -2292,8 +2287,8 @@
if (_sizeChanged || _paddingStyleChanged || _contentMutation || showNativeOverlaidScrollbarsChanged || directionChanged) {
var _undoViewportArrange = undoViewportArrange(showNativeOverlaidScrollbars, directionIsRTL, preMeasureViewportOverflowState),
_redoViewportArrange = _undoViewportArrange._redoViewportArrange,
undoViewportArrangeOverflowState = _undoViewportArrange._viewportOverflowState;
redoViewportArrange = _undoViewportArrange[0],
undoViewportArrangeOverflowState = _undoViewportArrange[1];
var _viewportSizeFraction2 = viewportSizeFractionCache = updateViewportSizeFraction(force),
_viewportSizeFraction = _viewportSizeFraction2[0],
@@ -2306,8 +2301,7 @@
var viewportContentSize = clientSize(_viewport);
var arrangedViewportScrollSize = _viewportScrollSize;
var arrangedViewportClientSize = viewportContentSize;
_redoViewportArrange();
redoViewportArrange();
if ((_viewportScrollSizeChanged || viewportSizeFractionCahnged || showNativeOverlaidScrollbarsChanged) && undoViewportArrangeOverflowState && !showNativeOverlaidScrollbars && arrangeViewport(undoViewportArrangeOverflowState, _viewportScrollSize, _viewportSizeFraction, directionIsRTL)) {
arrangedViewportClientSize = clientSize(_viewport);
packages/overlayscrollbars/dist/overlayscrollbars.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/overlayscrollbars/dist/overlayscrollbars.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts
+12 -13
View File
@@ -183,19 +183,18 @@ export const createLifecycleHub = (
_hostMutation: adaptiveHostMutation,
_contentMutation: adaptiveContentMutation,
_paddingStyleChanged: adaptivePaddingStyleChanged,
} =
lifecycle(
{
_directionIsRTL: finalDirectionIsRTL,
_heightIntrinsic: finalHeightIntrinsic,
_sizeChanged,
_hostMutation,
_contentMutation,
_paddingStyleChanged,
},
checkOption,
!!force
) || {};
} = lifecycle(
{
_directionIsRTL: finalDirectionIsRTL,
_heightIntrinsic: finalHeightIntrinsic,
_sizeChanged,
_hostMutation,
_contentMutation,
_paddingStyleChanged,
},
checkOption,
!!force
) || {};
_sizeChanged = adaptiveSizeChanged || _sizeChanged;
_hostMutation = adaptiveHostMutation || _hostMutation;
packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts
+24 -40
View File
@@ -28,16 +28,16 @@ interface ViewportOverflowState {
_overflowScroll: XY<boolean>;
}
interface UndoViewportArrangeResult {
_redoViewportArrange: () => void;
_viewportOverflowState?: ViewportOverflowState;
}
interface OverflowOption {
x: OverflowBehavior;
y: OverflowBehavior;
}
type UndoViewportArrangeResult = [
() => void, // redoViewportArrange
ViewportOverflowState?
];
const { max, abs, round } = Math;
const overlaidScrollbarsHideOffset = 42;
const whCacheOptions = {
@@ -123,9 +123,8 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
WH<number>
>(whCacheOptions, scrollSize.bind(0, _viewport));
const [updateOverflowAmountCache, getCurrentOverflowAmountCache] = createCache<WH<number>>(
whCacheOptions
);
const [updateOverflowAmountCache, getCurrentOverflowAmountCache] =
createCache<WH<number>>(whCacheOptions);
/**
* Applies a fixed height to the viewport so it can't overflow or underflow the host element.
@@ -142,10 +141,8 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
if (heightIntrinsic) {
const { _nativeScrollbarIsOverlaid } = getEnvironment();
const {
_absolute: paddingAbsolute,
_padding: padding,
} = _getLifecycleCommunication()._paddingInfo;
const { _absolute: paddingAbsolute, _padding: padding } =
_getLifecycleCommunication()._paddingInfo;
const { _overflowScroll, _scrollbarsHideOffset } = viewportOverflowState;
const hostSizeFraction = sizeFraction(_host);
const hostClientSize = clientSize(_host);
@@ -175,11 +172,8 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
showNativeOverlaidScrollbars: boolean,
viewportStyleObj?: StyleObject
): ViewportOverflowState => {
const {
_nativeScrollbarSize,
_nativeScrollbarIsOverlaid,
_nativeScrollbarStyling,
} = getEnvironment();
const { _nativeScrollbarSize, _nativeScrollbarIsOverlaid, _nativeScrollbarStyling } =
getEnvironment();
const { x: overlaidX, y: overlaidY } = _nativeScrollbarIsOverlaid;
const determineOverflow = !viewportStyleObj;
const arrangeHideOffset =
@@ -400,8 +394,8 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
removeClass(_viewport, classNameViewportArrange);
style(_viewport, finalPaddingStyle);
return {
_redoViewportArrange: () => {
return [
() => {
hideNativeScrollbars(
finalViewportOverflowState,
directionIsRTL,
@@ -411,12 +405,10 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
style(_viewport, prevStyle);
addClass(_viewport, classNameViewportArrange);
},
_viewportOverflowState: finalViewportOverflowState,
};
finalViewportOverflowState,
];
}
return {
_redoViewportArrange: noop,
};
return [noop];
};
return (updateHints, checkOption, force) => {
@@ -431,9 +423,8 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
const { _flexboxGlue, _nativeScrollbarStyling, _nativeScrollbarIsOverlaid } = getEnvironment();
const [heightIntrinsic, heightIntrinsicChanged] = _heightIntrinsic;
const [directionIsRTL, directionChanged] = _directionIsRTL;
const [showNativeOverlaidScrollbarsOption, showNativeOverlaidScrollbarsChanged] = checkOption<
boolean
>('nativeScrollbarsOverlaid.show');
const [showNativeOverlaidScrollbarsOption, showNativeOverlaidScrollbarsChanged] =
checkOption<boolean>('nativeScrollbarsOverlaid.show');
const showNativeOverlaidScrollbars =
showNativeOverlaidScrollbarsOption &&
_nativeScrollbarIsOverlaid.x &&
@@ -471,27 +462,20 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
showNativeOverlaidScrollbarsChanged ||
directionChanged
) {
const {
_redoViewportArrange,
_viewportOverflowState: undoViewportArrangeOverflowState,
} = undoViewportArrange(
const [redoViewportArrange, undoViewportArrangeOverflowState] = undoViewportArrange(
showNativeOverlaidScrollbars,
directionIsRTL,
preMeasureViewportOverflowState
);
const [
viewportSizeFraction,
viewportSizeFractionCahnged,
] = (viewportSizeFractionCache = updateViewportSizeFraction(force));
const [
viewportScrollSize,
viewportScrollSizeChanged,
] = (viewportScrollSizeCache = updateViewportScrollSizeCache(force));
const [viewportSizeFraction, viewportSizeFractionCahnged] = (viewportSizeFractionCache =
updateViewportSizeFraction(force));
const [viewportScrollSize, viewportScrollSizeChanged] = (viewportScrollSizeCache =
updateViewportScrollSizeCache(force));
const viewportContentSize = clientSize(_viewport);
let arrangedViewportScrollSize = viewportScrollSize;
let arrangedViewportClientSize = viewportContentSize;
_redoViewportArrange();
redoViewportArrange();
// if re measure is required (only required if content arrange strategy is used)
if (
packages/overlayscrollbars/src/support/cache/cache.ts
Vendored
+1 -1
View File
@@ -10,7 +10,7 @@ export interface CacheOptions<Value> {
export type CacheValues<T> = [
T, // value
boolean, // changed
T? // previous
T | undefined // previous
];
export type EqualCachePropFunction<Value> = (currentVal: Value, newVal: Value) => boolean;
packages/overlayscrollbars/tests/playwright/observers/domObserver/index.browser.ts
+59 -57
View File
@@ -42,9 +42,8 @@ const contentElmAttrChange: HTMLElement | null = document.querySelector('#target
const contentBetweenElmAttrChange: HTMLElement | null = document.querySelector(
'#content-host .padding-nest-item'
);
const contentHostElmAttrChange: HTMLElement | null = document.querySelector(
'#content-nest-item-host'
);
const contentHostElmAttrChange: HTMLElement | null =
document.querySelector('#content-nest-item-host');
const targetElmsSlot = document.querySelector('#target .host-nest-item');
const targetContentElmsSlot = document.querySelector('#target .content .content-nest');
@@ -52,9 +51,8 @@ const targetContentBetweenElmsSlot = document.querySelector('#content-host');
const imgElmsSlot = document.querySelector('#target .content-nest');
const transitionElmsSlot = document.querySelector('#content-host .content');
const addRemoveTargetElms: HTMLButtonElement | null = document.querySelector(
'#addRemoveTargetElms'
);
const addRemoveTargetElms: HTMLButtonElement | null =
document.querySelector('#addRemoveTargetElms');
const addRemoveTargetContentElms: HTMLButtonElement | null = document.querySelector(
'#addRemoveTargetContentElms'
);
@@ -67,22 +65,18 @@ const addRemoveTransitionElms: HTMLButtonElement | null = document.querySelector
);
const ignoreTargetChange: HTMLButtonElement | null = document.querySelector('#ignoreTargetChange');
const setTargetAttr: HTMLSelectElement | null = document.querySelector('#setTargetAttr');
const setFilteredTargetAttr: HTMLSelectElement | null = document.querySelector(
'#setFilteredTargetAttr'
);
const setFilteredTargetAttr: HTMLSelectElement | null =
document.querySelector('#setFilteredTargetAttr');
const setContentAttr: HTMLSelectElement | null = document.querySelector('#setContentAttr');
const setFilteredContentAttr: HTMLSelectElement | null = document.querySelector(
'#setFilteredContentAttr'
);
const setContentBetweenAttr: HTMLSelectElement | null = document.querySelector(
'#setContentBetweenAttr'
);
const setFilteredContentAttr: HTMLSelectElement | null =
document.querySelector('#setFilteredContentAttr');
const setContentBetweenAttr: HTMLSelectElement | null =
document.querySelector('#setContentBetweenAttr');
const setFilteredContentBetweenAttr: HTMLSelectElement | null = document.querySelector(
'#setFilteredContentBetweenAttr'
);
const setContentHostElmAttr: HTMLSelectElement | null = document.querySelector(
'#setContentHostElmAttr'
);
const setContentHostElmAttr: HTMLSelectElement | null =
document.querySelector('#setContentHostElmAttr');
const setFilteredContentHostElmAttr: HTMLSelectElement | null = document.querySelector(
'#setFilteredContentHostElmAttr'
);
@@ -415,7 +409,7 @@ const addRemoveTargetContentElmsFn = async () => {
const addRemoveTargetContentBetweenElmsFn = async () => {
await addRemoveElementsTest(targetContentBetweenElmsSlot, domContentObserverObservations);
};
const addRemoveImgElmsFn = async () => {
const addRemoveImgElmsFn = async (changeless = false) => {
const add = async () => {
const img = new Image(1, 1);
img.src = 'www.something.com/something/sometest';
@@ -434,21 +428,23 @@ const addRemoveImgElmsFn = async () => {
await waitForOrFailTest(() => {
after();
compare(2);
compare(changeless ? 0 : 2);
const previousContentChanged = getLast(domContentObserverObservations, 1);
should.deepEqual(
previousContentChanged,
{ contentChange: true, troughEvent: false },
'Adding an content image must result in a content change.'
);
if (!changeless) {
const previousContentChanged = getLast(domContentObserverObservations, 1);
should.deepEqual(
previousContentChanged,
{ contentChange: true, troughEvent: false },
'Adding an content image must result in a content change.'
);
const lastContentChanged = getLast(domContentObserverObservations);
should.deepEqual(
lastContentChanged,
{ contentChange: true, troughEvent: true },
'The images load event must result in a content change.'
);
const lastContentChanged = getLast(domContentObserverObservations);
should.deepEqual(
lastContentChanged,
{ contentChange: true, troughEvent: true },
'The images load event must result in a content change.'
);
}
});
};
@@ -481,21 +477,23 @@ const addRemoveImgElmsFn = async () => {
await waitForOrFailTest(() => {
after();
compare(2);
compare(changeless ? 0 : 2);
const previousContentChanged = getLast(domContentObserverObservations, 1);
should.deepEqual(
previousContentChanged,
{ contentChange: true, troughEvent: false },
'Adding mutliple content images must result in a single content change. (debounced)'
);
if (!changeless) {
const previousContentChanged = getLast(domContentObserverObservations, 1);
should.deepEqual(
previousContentChanged,
{ contentChange: true, troughEvent: false },
'Adding mutliple content images must result in a single content change. (debounced)'
);
const lastContentChanged = getLast(domContentObserverObservations);
should.deepEqual(
lastContentChanged,
{ contentChange: true, troughEvent: true },
'Multiple images load events must result in a single cintent change. (debounced)'
);
const lastContentChanged = getLast(domContentObserverObservations);
should.deepEqual(
lastContentChanged,
{ contentChange: true, troughEvent: true },
'Multiple images load events must result in a single cintent change. (debounced)'
);
}
});
};
@@ -529,17 +527,19 @@ const addRemoveImgElmsFn = async () => {
contentDomObserver = createContentDomOserver(contentChange);
};
await addChanged([
['img', 'something'],
['img', 'something2'],
['img', ''],
['img', undefined],
['', ''],
[undefined, undefined],
null,
undefined,
]);
await addChanged([]);
if (!changeless) {
await addChanged([
['img', 'something'],
['img', 'something2'],
['img', ''],
['img', undefined],
['', ''],
[undefined, undefined],
null,
undefined,
]);
await addChanged([]);
}
removeElements(document.querySelectorAll('.img'));
@@ -696,7 +696,7 @@ const triggerBetweenSummaryChange = async () => {
addRemoveTargetElms?.addEventListener('click', addRemoveTargetElmsFn);
addRemoveTargetContentElms?.addEventListener('click', addRemoveTargetContentElmsFn);
addRemoveTargetContentBetweenElms?.addEventListener('click', addRemoveTargetContentBetweenElmsFn);
addRemoveImgElms?.addEventListener('click', addRemoveImgElmsFn);
addRemoveImgElms?.addEventListener('click', () => addRemoveImgElmsFn());
addRemoveTransitionElms?.addEventListener('click', addRemoveTransitionElmsFn);
ignoreTargetChange?.addEventListener('click', ignoreTargetChangeFn);
setTargetAttr?.addEventListener('change', attrChangeListener(targetElm));
@@ -744,6 +744,8 @@ const start = async () => {
contentDomObserver._destroy();
contentDomObserver._update();
await addRemoveImgElmsFn(true); // won't trigger changes after destroy
setTestResult(true);
};
packages/overlayscrollbars/types/domobserver.d.ts
Vendored
-2
View File
@@ -1,2 +0,0 @@
declare const start: () => Promise<void>;
export { start };
packages/overlayscrollbars/types/sizeobserver.d.ts
Vendored
-2
View File
@@ -1,2 +0,0 @@
declare const start: () => Promise<void>;
export { start };
packages/overlayscrollbars/types/structurelifecycle.d.ts
Vendored
-1
View File
@@ -1 +0,0 @@
export {};
packages/overlayscrollbars/types/trinsicobserver.d.ts
Vendored
-2
View File
@@ -1,2 +0,0 @@
declare const start: () => Promise<void>;
export { start };