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

improve code

Browse Source
This commit is contained in:
Rene
2022-07-02 15:20:09 +02:00
parent 0e0deb8550
commit 0f89a13489
14 changed files with 178 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/overlayscrollbars/dist/overlayscrollbars.esm.js
Vendored
+45 -73
View File
@@ -778,7 +778,7 @@ const getOptionsDiff = (currOptions, newOptions) => {
let environmentInstance;
const {
abs,
round: round$1
round
} = Math;
const diffBiggerThanOne = (valOne, valTwo) => {
@@ -923,8 +923,8 @@ const createEnvironment = () => {
h: abs(deltaSize.h)
};
const deltaAbsRatio = {
w: abs(round$1(sizeNew.w / (size.w / 100.0))),
h: abs(round$1(sizeNew.h / (size.h / 100.0)))
w: abs(round(sizeNew.w / (size.w / 100.0))),
h: abs(round(sizeNew.h / (size.h / 100.0)))
};
const dprNew = getWindowDPR();
const deltaIsBigger = deltaAbsSize.w > 2 && deltaAbsSize.h > 2;
@@ -1199,8 +1199,7 @@ const createPaddingUpdate = (structureSetupElements, state) => {
};
const {
max,
round
max
} = Math;
const overlaidScrollbarsHideOffset = 42;
const whCacheOptions = {
@@ -1233,22 +1232,18 @@ const setAxisOverflowStyle = (horizontal, overflowAmount, behavior, styleObj) =>
styleObj[overflowKey] = behavior;
}
return {
_visible: behaviorIsVisible,
_behavior: behaviorIsVisibleHidden ? 'hidden' : 'scroll'
};
return [behaviorIsVisible, behaviorIsVisibleHidden ? 'hidden' : 'scroll'];
};
const getOverflowAmount = (viewportScrollSize, viewportClientSize, sizeFraction) => {
const condition = raw => window.devicePixelRatio % 2 !== 0 ? raw > 1 : raw > 0;
const tollerance = window.devicePixelRatio % 2 !== 0 ? 1 : 0;
const amount = {
w: max(0, viewportScrollSize.w - viewportClientSize.w - max(0, sizeFraction.w)),
h: max(0, viewportScrollSize.h - viewportClientSize.h - max(0, sizeFraction.h))
};
return {
w: condition(amount.w) ? amount.w : 0,
h: condition(amount.h) ? amount.h : 0
w: amount.w >= tollerance ? amount.w : 0,
h: amount.h >= tollerance ? amount.h : 0
};
};
@@ -1285,14 +1280,13 @@ const createOverflowUpdate = (structureSetupElements, state) => {
_overflowScroll,
_scrollbarsHideOffset
} = viewportOverflowState;
const hostCssHeight = parseFloat(style(_host, 'height'));
const fSize = fractionalSize(_host);
const hostClientSize = clientSize(_host);
const isContentBox = style(_viewport, 'boxSizing') === 'content-box';
const paddingVertical = _paddingAbsolute || isContentBox ? _padding.b + _padding.t : 0;
const fractionalClientHeight = hostClientSize.h + (hostCssHeight - round(hostCssHeight));
const subtractXScrollbar = !(_nativeScrollbarIsOverlaid.x && isContentBox);
style(_viewport, {
height: fractionalClientHeight + (_overflowScroll.x && subtractXScrollbar ? _scrollbarsHideOffset.x : 0) - paddingVertical
height: hostClientSize.h + fSize.h + (_overflowScroll.x && subtractXScrollbar ? _scrollbarsHideOffset.x : 0) - paddingVertical
});
}
};
@@ -1328,14 +1322,8 @@ const createOverflowUpdate = (structureSetupElements, state) => {
};
const setViewportOverflowState = (showNativeOverlaidScrollbars, overflowAmount, overflow, viewportStyleObj) => {
const {
_visible: xVisible,
_behavior: xVisibleBehavior
} = setAxisOverflowStyle(true, overflowAmount.w, overflow.x, viewportStyleObj);
const {
_visible: yVisible,
_behavior: yVisibleBehavior
} = setAxisOverflowStyle(false, overflowAmount.h, overflow.y, viewportStyleObj);
const [xVisible, xVisibleBehavior] = setAxisOverflowStyle(true, overflowAmount.w, overflow.x, viewportStyleObj);
const [yVisible, yVisibleBehavior] = setAxisOverflowStyle(false, overflowAmount.h, overflow.y, viewportStyleObj);
if (xVisible && !yVisible) {
viewportStyleObj.overflowX = xVisibleBehavior;
@@ -1497,6 +1485,7 @@ const createOverflowUpdate = (structureSetupElements, state) => {
_directionIsRTL
} = getState();
const [showNativeOverlaidScrollbarsOption, showNativeOverlaidScrollbarsChanged] = checkOption('nativeScrollbarsOverlaid.show');
const [overflow, overflowChanged] = checkOption('overflow');
const showNativeOverlaidScrollbars = showNativeOverlaidScrollbarsOption && _nativeScrollbarIsOverlaid.x && _nativeScrollbarIsOverlaid.y;
const adjustFlexboxGlue = !_flexboxGlue && (_sizeChanged || _contentMutation || _hostMutation || showNativeOverlaidScrollbarsChanged || _heightIntrinsicChanged);
let sizeFractionCache = getCurrentSizeFraction(force);
@@ -1540,10 +1529,9 @@ const createOverflowUpdate = (structureSetupElements, state) => {
}, _sizeFraction), force);
}
const [sizeFraction, sizeFractionChanged] = sizeFractionCache;
const [viewportScrollSize, viewportScrollSizeChanged] = viewportScrollSizeCache;
const [overflowAmount, overflowAmountChanged] = overflowAmuntCache;
const [overflow, overflowChanged] = checkOption('overflow');
const [viewportScrollSize, viewportScrollSizeChanged] = viewportScrollSizeCache;
const [sizeFraction, sizeFractionChanged] = sizeFractionCache;
if (_paddingStyleChanged || _directionChanged || sizeFractionChanged || viewportScrollSizeChanged || overflowAmountChanged || overflowChanged || showNativeOverlaidScrollbarsChanged || adjustFlexboxGlue) {
const viewportStyle = {
@@ -1565,8 +1553,8 @@ const createOverflowUpdate = (structureSetupElements, state) => {
style(_viewport, viewportStyle);
setState({
_viewportOverflowScroll: overflowScroll,
_viewportOverflowAmount: overflowAmount
_overflowScroll: overflowScroll,
_overflowAmount: overflowAmount
});
return {
_overflowAmountChanged: overflowAmountChanged,
@@ -1576,8 +1564,6 @@ const createOverflowUpdate = (structureSetupElements, state) => {
};
};
const applyForceToCache = (cacheValues, force) => [cacheValues[0], force || cacheValues[1], cacheValues[2]];
const prepareUpdateHints = (leading, adaptive, force) => {
const result = {};
const finalAdaptive = adaptive || {};
@@ -1585,7 +1571,7 @@ const prepareUpdateHints = (leading, adaptive, force) => {
each(objKeys, key => {
const leadingValue = leading[key];
const adaptiveValue = finalAdaptive[key];
result[key] = isBoolean(leadingValue) ? !!force || !!leadingValue || !!adaptiveValue : applyForceToCache(leadingValue, force);
result[key] = !!(force || leadingValue || adaptiveValue);
});
return result;
};
@@ -1604,20 +1590,14 @@ const createStructureSetupUpdate = (structureSetupElements, state) => {
return (checkOption, updateHints, force) => {
const initialUpdateHints = prepareUpdateHints(assignDeep({
_sizeChanged: false,
_hostMutation: false,
_contentMutation: false,
_paddingStyleChanged: false,
_directionChanged: false,
_heightIntrinsicChanged: false,
_overflowScrollChanged: false,
_overflowAmountChanged: false
}, Object.keys(updateHints).reduce((acc, key) => {
if (!isUndefined(updateHints[key])) {
acc[key] = updateHints[key];
}
return acc;
}, {})), {}, force);
_overflowAmountChanged: false,
_hostMutation: false,
_contentMutation: false
}, updateHints), {}, force);
const adjustScrollOffset = doViewportArrange || !_flexboxGlue;
const scrollOffsetX = adjustScrollOffset && scrollLeft(_viewport);
const scrollOffsetY = adjustScrollOffset && scrollTop(_viewport);
@@ -2045,22 +2025,12 @@ const createStructureSetupObservers = (structureSetupElements, state, structureS
_maxDelay: () => debounceMaxDelay,
_mergeParams(prev, curr) {
const {
_sizeChanged: prevSizeChanged,
_hostMutation: prevHostMutation,
_contentMutation: prevContentMutation
} = prev[0];
const {
_sizeChanged: currSizeChanged,
_hostMutation: currvHostMutation,
_contentMutation: currContentMutation
} = curr[0];
const merged = [{
_sizeChanged: prevSizeChanged || currSizeChanged,
_hostMutation: prevHostMutation || currvHostMutation,
_contentMutation: prevContentMutation || currContentMutation
}];
return merged;
const [prevObj] = prev;
const [currObj] = curr;
return [keys(prevObj).concat(keys(currObj)).reduce((obj, key) => {
obj[key] = prevObj[key] || currObj[key];
return obj;
}, {})];
}
});
@@ -2200,11 +2170,11 @@ const initialStructureSetupUpdateState = {
paddingBottom: 0,
paddingLeft: 0
},
_viewportOverflowAmount: {
_overflowAmount: {
w: 0,
h: 0
},
_viewportOverflowScroll: {
_overflowScroll: {
x: false,
y: false
},
@@ -2215,7 +2185,7 @@ const createStructureSetup = (target, options) => {
const checkOptionsFallback = createOptionCheck(options, {});
const state = createState(initialStructureSetupUpdateState);
const onUpdatedListeners = new Set();
const [getUpdateState] = state;
const [getState] = state;
const runOnUpdatedListeners = (updateHints, changedOptions, force) => {
runEach(onUpdatedListeners, [updateHints, changedOptions || {}, !!force]);
@@ -2226,7 +2196,7 @@ const createStructureSetup = (target, options) => {
const [updateObservers, destroyObservers] = createStructureSetupObservers(elements, state, updateHints => {
runOnUpdatedListeners(updateStructure(checkOptionsFallback, updateHints));
});
const structureSetupState = getUpdateState.bind(0);
const structureSetupState = getState.bind(0);
structureSetupState._addOnUpdatedListener = listener => {
onUpdatedListeners.add(listener);
@@ -2455,31 +2425,33 @@ const OverlayScrollbars = (target, options, eventListeners) => {
structureState._addOnUpdatedListener((updateHints, changedOptions, force) => {
const {
_sizeChanged,
_contentMutation,
_hostMutation,
_directionChanged,
_heightIntrinsicChanged,
_overflowAmountChanged,
_overflowScrollChanged
_overflowScrollChanged,
_contentMutation,
_hostMutation
} = updateHints;
const {
_viewportOverflowAmount,
_viewportOverflowScroll
_overflowAmount,
_overflowScroll
} = structureState();
if (_overflowAmountChanged || _overflowScrollChanged) {
triggerEvent('overflowChanged', assignDeep({}, createOverflowChangedArgs(_viewportOverflowAmount, _viewportOverflowScroll), {
previous: createOverflowChangedArgs(_viewportOverflowAmount, _viewportOverflowScroll)
triggerEvent('overflowChanged', assignDeep({}, createOverflowChangedArgs(_overflowAmount, _overflowScroll), {
previous: createOverflowChangedArgs(_overflowAmount, _overflowScroll)
}));
}
triggerEvent('updated', {
updateHints: {
sizeChanged: _sizeChanged,
contentMutation: _contentMutation,
hostMutation: _hostMutation,
directionChanged: _directionChanged,
heightIntrinsicChanged: _heightIntrinsicChanged
heightIntrinsicChanged: _heightIntrinsicChanged,
overflowAmountChanged: _overflowAmountChanged,
overflowScrollChanged: _overflowScrollChanged,
contentMutation: _contentMutation,
hostMutation: _hostMutation
},
changedOptions,
force
@@ -2504,7 +2476,7 @@ const OverlayScrollbars = (target, options, eventListeners) => {
on: addEvent,
off: removeEvent,
state: () => ({
_overflowAmount: structureState()._viewportOverflowAmount
_overflowAmount: structureState()._overflowAmount
}),
update(force) {
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
+54 -78
View File
@@ -865,7 +865,7 @@
var environmentInstance;
var abs = Math.abs,
round$1 = Math.round;
round = Math.round;
var diffBiggerThanOne = function diffBiggerThanOne(valOne, valTwo) {
var absValOne = abs(valOne);
@@ -1012,8 +1012,8 @@
h: abs(deltaSize.h)
};
var deltaAbsRatio = {
w: abs(round$1(sizeNew.w / (size.w / 100.0))),
h: abs(round$1(sizeNew.h / (size.h / 100.0)))
w: abs(round(sizeNew.w / (size.w / 100.0))),
h: abs(round(sizeNew.h / (size.h / 100.0)))
};
var dprNew = getWindowDPR();
var deltaIsBigger = deltaAbsSize.w > 2 && deltaAbsSize.h > 2;
@@ -1297,8 +1297,7 @@
};
};
var max = Math.max,
round = Math.round;
var max = Math.max;
var overlaidScrollbarsHideOffset = 42;
var whCacheOptions = {
_equal: equalWH,
@@ -1330,24 +1329,18 @@
styleObj[overflowKey] = behavior;
}
return {
_visible: behaviorIsVisible,
_behavior: behaviorIsVisibleHidden ? 'hidden' : 'scroll'
};
return [behaviorIsVisible, behaviorIsVisibleHidden ? 'hidden' : 'scroll'];
};
var getOverflowAmount = function getOverflowAmount(viewportScrollSize, viewportClientSize, sizeFraction) {
var condition = function condition(raw) {
return window.devicePixelRatio % 2 !== 0 ? raw > 1 : raw > 0;
};
var tollerance = window.devicePixelRatio % 2 !== 0 ? 1 : 0;
var amount = {
w: max(0, viewportScrollSize.w - viewportClientSize.w - max(0, sizeFraction.w)),
h: max(0, viewportScrollSize.h - viewportClientSize.h - max(0, sizeFraction.h))
};
return {
w: condition(amount.w) ? amount.w : 0,
h: condition(amount.h) ? amount.h : 0
w: amount.w >= tollerance ? amount.w : 0,
h: amount.h >= tollerance ? amount.h : 0
};
};
@@ -1393,14 +1386,13 @@
var _overflowScroll = viewportOverflowState._overflowScroll,
_scrollbarsHideOffset = viewportOverflowState._scrollbarsHideOffset;
var hostCssHeight = parseFloat(style(_host, 'height'));
var fSize = fractionalSize(_host);
var hostClientSize = clientSize(_host);
var isContentBox = style(_viewport, 'boxSizing') === 'content-box';
var paddingVertical = _paddingAbsolute || isContentBox ? _padding.b + _padding.t : 0;
var fractionalClientHeight = hostClientSize.h + (hostCssHeight - round(hostCssHeight));
var subtractXScrollbar = !(_nativeScrollbarIsOverlaid.x && isContentBox);
style(_viewport, {
height: fractionalClientHeight + (_overflowScroll.x && subtractXScrollbar ? _scrollbarsHideOffset.x : 0) - paddingVertical
height: hostClientSize.h + fSize.h + (_overflowScroll.x && subtractXScrollbar ? _scrollbarsHideOffset.x : 0) - paddingVertical
});
}
};
@@ -1435,12 +1427,12 @@
var setViewportOverflowState = function setViewportOverflowState(showNativeOverlaidScrollbars, overflowAmount, overflow, viewportStyleObj) {
var _setAxisOverflowStyle = setAxisOverflowStyle(true, overflowAmount.w, overflow.x, viewportStyleObj),
xVisible = _setAxisOverflowStyle._visible,
xVisibleBehavior = _setAxisOverflowStyle._behavior;
xVisible = _setAxisOverflowStyle[0],
xVisibleBehavior = _setAxisOverflowStyle[1];
var _setAxisOverflowStyle2 = setAxisOverflowStyle(false, overflowAmount.h, overflow.y, viewportStyleObj),
yVisible = _setAxisOverflowStyle2._visible,
yVisibleBehavior = _setAxisOverflowStyle2._behavior;
yVisible = _setAxisOverflowStyle2[0],
yVisibleBehavior = _setAxisOverflowStyle2[1];
if (xVisible && !yVisible) {
viewportStyleObj.overflowX = xVisibleBehavior;
@@ -1588,6 +1580,10 @@
showNativeOverlaidScrollbarsOption = _checkOption[0],
showNativeOverlaidScrollbarsChanged = _checkOption[1];
var _checkOption2 = checkOption('overflow'),
overflow = _checkOption2[0],
overflowChanged = _checkOption2[1];
var showNativeOverlaidScrollbars = showNativeOverlaidScrollbarsOption && _nativeScrollbarIsOverlaid.x && _nativeScrollbarIsOverlaid.y;
var adjustFlexboxGlue = !_flexboxGlue && (_sizeChanged || _contentMutation || _hostMutation || showNativeOverlaidScrollbarsChanged || _heightIntrinsicChanged);
var sizeFractionCache = getCurrentSizeFraction(force);
@@ -1640,19 +1636,15 @@
}, _sizeFraction), force);
}
var _sizeFractionCache2 = sizeFractionCache,
sizeFraction = _sizeFractionCache2[0],
sizeFractionChanged = _sizeFractionCache2[1];
var _viewportScrollSizeCa2 = viewportScrollSizeCache,
viewportScrollSize = _viewportScrollSizeCa2[0],
viewportScrollSizeChanged = _viewportScrollSizeCa2[1];
var _overflowAmuntCache = overflowAmuntCache,
overflowAmount = _overflowAmuntCache[0],
overflowAmountChanged = _overflowAmuntCache[1];
var _checkOption2 = checkOption('overflow'),
overflow = _checkOption2[0],
overflowChanged = _checkOption2[1];
var _viewportScrollSizeCa2 = viewportScrollSizeCache,
viewportScrollSize = _viewportScrollSizeCa2[0],
viewportScrollSizeChanged = _viewportScrollSizeCa2[1];
var _sizeFractionCache2 = sizeFractionCache,
sizeFraction = _sizeFractionCache2[0],
sizeFractionChanged = _sizeFractionCache2[1];
if (_paddingStyleChanged || _directionChanged || sizeFractionChanged || viewportScrollSizeChanged || overflowAmountChanged || overflowChanged || showNativeOverlaidScrollbarsChanged || adjustFlexboxGlue) {
var viewportStyle = {
@@ -1678,8 +1670,8 @@
style(_viewport, viewportStyle);
setState({
_viewportOverflowScroll: overflowScroll,
_viewportOverflowAmount: overflowAmount
_overflowScroll: overflowScroll,
_overflowAmount: overflowAmount
});
return {
_overflowAmountChanged: overflowAmountChanged,
@@ -1689,10 +1681,6 @@
};
};
var applyForceToCache = function applyForceToCache(cacheValues, force) {
return [cacheValues[0], force || cacheValues[1], cacheValues[2]];
};
var prepareUpdateHints = function prepareUpdateHints(leading, adaptive, force) {
var result = {};
var finalAdaptive = adaptive || {};
@@ -1700,7 +1688,7 @@
each(objKeys, function (key) {
var leadingValue = leading[key];
var adaptiveValue = finalAdaptive[key];
result[key] = isBoolean(leadingValue) ? !!force || !!leadingValue || !!adaptiveValue : applyForceToCache(leadingValue, force);
result[key] = !!(force || leadingValue || adaptiveValue);
});
return result;
};
@@ -1718,20 +1706,14 @@
return function (checkOption, updateHints, force) {
var initialUpdateHints = prepareUpdateHints(assignDeep({
_sizeChanged: false,
_hostMutation: false,
_contentMutation: false,
_paddingStyleChanged: false,
_directionChanged: false,
_heightIntrinsicChanged: false,
_overflowScrollChanged: false,
_overflowAmountChanged: false
}, Object.keys(updateHints).reduce(function (acc, key) {
if (!isUndefined(updateHints[key])) {
acc[key] = updateHints[key];
}
return acc;
}, {})), {}, force);
_overflowAmountChanged: false,
_hostMutation: false,
_contentMutation: false
}, updateHints), {}, force);
var adjustScrollOffset = doViewportArrange || !_flexboxGlue;
var scrollOffsetX = adjustScrollOffset && scrollLeft(_viewport);
var scrollOffsetY = adjustScrollOffset && scrollTop(_viewport);
@@ -2188,20 +2170,12 @@
return debounceMaxDelay;
},
_mergeParams: function _mergeParams(prev, curr) {
var _prev$ = prev[0],
prevSizeChanged = _prev$._sizeChanged,
prevHostMutation = _prev$._hostMutation,
prevContentMutation = _prev$._contentMutation;
var _curr$ = curr[0],
currSizeChanged = _curr$._sizeChanged,
currvHostMutation = _curr$._hostMutation,
currContentMutation = _curr$._contentMutation;
var merged = [{
_sizeChanged: prevSizeChanged || currSizeChanged,
_hostMutation: prevHostMutation || currvHostMutation,
_contentMutation: prevContentMutation || currContentMutation
}];
return merged;
var prevObj = prev[0];
var currObj = curr[0];
return [keys(prevObj).concat(keys(currObj)).reduce(function (obj, key) {
obj[key] = prevObj[key] || currObj[key];
return obj;
}, {})];
}
});
@@ -2353,11 +2327,11 @@
paddingBottom: 0,
paddingLeft: 0
},
_viewportOverflowAmount: {
_overflowAmount: {
w: 0,
h: 0
},
_viewportOverflowScroll: {
_overflowScroll: {
x: false,
y: false
},
@@ -2368,7 +2342,7 @@
var checkOptionsFallback = createOptionCheck(options, {});
var state = createState(initialStructureSetupUpdateState);
var onUpdatedListeners = new Set();
var getUpdateState = state[0];
var getState = state[0];
var runOnUpdatedListeners = function runOnUpdatedListeners(updateHints, changedOptions, force) {
runEach(onUpdatedListeners, [updateHints, changedOptions || {}, !!force]);
@@ -2386,7 +2360,7 @@
updateObservers = _createStructureSetup2[0],
destroyObservers = _createStructureSetup2[1];
var structureSetupState = getUpdateState.bind(0);
var structureSetupState = getState.bind(0);
structureSetupState._addOnUpdatedListener = function (listener) {
onUpdatedListeners.add(listener);
@@ -2630,30 +2604,32 @@
structureState._addOnUpdatedListener(function (updateHints, changedOptions, force) {
var _sizeChanged = updateHints._sizeChanged,
_contentMutation = updateHints._contentMutation,
_hostMutation = updateHints._hostMutation,
_directionChanged = updateHints._directionChanged,
_heightIntrinsicChanged = updateHints._heightIntrinsicChanged,
_overflowAmountChanged = updateHints._overflowAmountChanged,
_overflowScrollChanged = updateHints._overflowScrollChanged;
_overflowScrollChanged = updateHints._overflowScrollChanged,
_contentMutation = updateHints._contentMutation,
_hostMutation = updateHints._hostMutation;
var _structureState = structureState(),
_viewportOverflowAmount = _structureState._viewportOverflowAmount,
_viewportOverflowScroll = _structureState._viewportOverflowScroll;
_overflowAmount = _structureState._overflowAmount,
_overflowScroll = _structureState._overflowScroll;
if (_overflowAmountChanged || _overflowScrollChanged) {
triggerEvent('overflowChanged', assignDeep({}, createOverflowChangedArgs(_viewportOverflowAmount, _viewportOverflowScroll), {
previous: createOverflowChangedArgs(_viewportOverflowAmount, _viewportOverflowScroll)
triggerEvent('overflowChanged', assignDeep({}, createOverflowChangedArgs(_overflowAmount, _overflowScroll), {
previous: createOverflowChangedArgs(_overflowAmount, _overflowScroll)
}));
}
triggerEvent('updated', {
updateHints: {
sizeChanged: _sizeChanged,
contentMutation: _contentMutation,
hostMutation: _hostMutation,
directionChanged: _directionChanged,
heightIntrinsicChanged: _heightIntrinsicChanged
heightIntrinsicChanged: _heightIntrinsicChanged,
overflowAmountChanged: _overflowAmountChanged,
overflowScrollChanged: _overflowScrollChanged,
contentMutation: _contentMutation,
hostMutation: _hostMutation
},
changedOptions: changedOptions,
force: force
@@ -2679,7 +2655,7 @@
off: removeEvent,
state: function state() {
return {
_overflowAmount: structureState()._viewportOverflowAmount
_overflowAmount: structureState()._overflowAmount
};
},
update: function update(force) {
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/eventListeners.ts
+4 -2
View File
@@ -22,10 +22,12 @@ onHostSizeChanged : null, // gone
export interface OnUpdatedEventListenerArgs {
updateHints: {
sizeChanged: boolean;
hostMutation: boolean;
contentMutation: boolean;
directionChanged: boolean;
heightIntrinsicChanged: boolean;
overflowAmountChanged: boolean;
overflowScrollChanged: boolean;
hostMutation: boolean;
contentMutation: boolean;
};
changedOptions: PartialOptions<OSOptions>;
force: boolean;
packages/overlayscrollbars/src/overlayscrollbars.ts
+11 -13
View File
@@ -111,35 +111,33 @@ export const OverlayScrollbars: OverlayScrollbarsStatic = (
structureState._addOnUpdatedListener((updateHints, changedOptions, force) => {
const {
_sizeChanged,
_contentMutation,
_hostMutation,
_directionChanged,
_heightIntrinsicChanged,
_overflowAmountChanged,
_overflowScrollChanged,
_contentMutation,
_hostMutation,
} = updateHints;
const { _viewportOverflowAmount, _viewportOverflowScroll } = structureState();
const { _overflowAmount, _overflowScroll } = structureState();
if (_overflowAmountChanged || _overflowScrollChanged) {
triggerEvent(
'overflowChanged',
assignDeep(
{},
createOverflowChangedArgs(_viewportOverflowAmount, _viewportOverflowScroll),
{
previous: createOverflowChangedArgs(_viewportOverflowAmount!, _viewportOverflowScroll!),
}
)
assignDeep({}, createOverflowChangedArgs(_overflowAmount, _overflowScroll), {
previous: createOverflowChangedArgs(_overflowAmount!, _overflowScroll!),
})
);
}
triggerEvent('updated', {
updateHints: {
sizeChanged: _sizeChanged,
contentMutation: _contentMutation,
hostMutation: _hostMutation,
directionChanged: _directionChanged,
heightIntrinsicChanged: _heightIntrinsicChanged,
overflowAmountChanged: _overflowAmountChanged,
overflowScrollChanged: _overflowScrollChanged,
contentMutation: _contentMutation,
hostMutation: _hostMutation,
},
changedOptions,
force,
@@ -163,7 +161,7 @@ export const OverlayScrollbars: OverlayScrollbarsStatic = (
on: addEvent,
off: removeEvent,
state: () => ({
_overflowAmount: structureState()._viewportOverflowAmount,
_overflowAmount: structureState()._overflowAmount,
}),
update(force?: boolean) {
update({}, force);
packages/overlayscrollbars/src/setups/structureSetup/structureSetup.observers.ts
+17 -25
View File
@@ -9,6 +9,7 @@ import {
attr,
removeAttr,
CacheValues,
keys,
} from 'support';
import { getEnvironment } from 'environment';
import { createSizeObserver, SizeObserverCallbackParams } from 'observers/sizeObserver';
@@ -29,6 +30,12 @@ export type StructureSetupObservers = [
destroy: () => void
];
type ExcludeFromTuple<T extends readonly any[], E> = T extends [infer F, ...infer R]
? [F] extends [E]
? ExcludeFromTuple<R, E>
: [F, ...ExcludeFromTuple<R, E>]
: [];
// const hostSelector = `.${classNameHost}`;
// TODO: observer textarea attrs if textarea
@@ -55,12 +62,6 @@ const ignoreTargetChange = (
return false;
};
type ExcludeFromTuple<T extends readonly any[], E> = T extends [infer F, ...infer R]
? [F] extends [E]
? ExcludeFromTuple<R, E>
: [F, ...ExcludeFromTuple<R, E>]
: [];
export const createStructureSetupObservers = (
structureSetupElements: StructureSetupElementsObj,
state: SetupState<StructureSetupState>,
@@ -81,25 +82,16 @@ export const createStructureSetupObservers = (
_timeout: () => debounceTimeout,
_maxDelay: () => debounceMaxDelay,
_mergeParams(prev, curr) {
const {
_sizeChanged: prevSizeChanged,
_hostMutation: prevHostMutation,
_contentMutation: prevContentMutation,
} = prev[0];
const {
_sizeChanged: currSizeChanged,
_hostMutation: currvHostMutation,
_contentMutation: currContentMutation,
} = curr[0];
const merged: [Partial<StructureSetupUpdateHints>] = [
{
_sizeChanged: prevSizeChanged || currSizeChanged,
_hostMutation: prevHostMutation || currvHostMutation,
_contentMutation: prevContentMutation || currContentMutation,
},
];
return merged;
const [prevObj] = prev;
const [currObj] = curr;
return [
keys(prevObj)
.concat(keys(currObj))
.reduce((obj, key) => {
obj[key] = prevObj[key] || currObj[key];
return obj;
}, {}),
] as [Partial<StructureSetupUpdateHints>];
},
});
packages/overlayscrollbars/src/setups/structureSetup/structureSetup.ts
+6 -7
View File
@@ -14,8 +14,8 @@ export interface StructureSetupState {
_padding: TRBL;
_paddingAbsolute: boolean;
_viewportPaddingStyle: StyleObject;
_viewportOverflowScroll: XY<boolean>;
_viewportOverflowAmount: WH<number>;
_overflowScroll: XY<boolean>;
_overflowAmount: WH<number>;
_heightIntrinsic: boolean;
_directionIsRTL: boolean;
}
@@ -48,11 +48,11 @@ const initialStructureSetupUpdateState: StructureSetupState = {
paddingBottom: 0,
paddingLeft: 0,
},
_viewportOverflowAmount: {
_overflowAmount: {
w: 0,
h: 0,
},
_viewportOverflowScroll: {
_overflowScroll: {
x: false,
y: false,
},
@@ -67,8 +67,7 @@ export const createStructureSetup = (
const checkOptionsFallback = createOptionCheck(options, {});
const state = createState(initialStructureSetupUpdateState);
const onUpdatedListeners = new Set<OnUpdatedListener>();
const [getUpdateState] = state;
const [getState] = state;
const runOnUpdatedListeners = (
updateHints: StructureSetupUpdateHints,
changedOptions?: PartialOptions<OSOptions>,
@@ -87,7 +86,7 @@ export const createStructureSetup = (
}
);
const structureSetupState = getUpdateState.bind(0) as (() => StructureSetupState) &
const structureSetupState = getState.bind(0) as (() => StructureSetupState) &
StructureSetupStaticState;
structureSetupState._addOnUpdatedListener = (listener) => {
onUpdatedListeners.add(listener);
packages/overlayscrollbars/src/setups/structureSetup/structureSetup.update.ts
+8 -31
View File
@@ -1,14 +1,4 @@
import {
CacheValues,
each,
isNumber,
scrollLeft,
scrollTop,
assignDeep,
keys,
isBoolean,
isUndefined,
} from 'support';
import { each, isNumber, scrollLeft, scrollTop, assignDeep, keys } from 'support';
import { getEnvironment } from 'environment';
import {
createTrinsicUpdate,
@@ -34,21 +24,15 @@ export type StructureSetupUpdate = (
export interface StructureSetupUpdateHints {
_sizeChanged: boolean;
_hostMutation: boolean;
_contentMutation: boolean;
_paddingStyleChanged: boolean;
_directionChanged: boolean;
_heightIntrinsicChanged: boolean;
_overflowScrollChanged: boolean;
_overflowAmountChanged: boolean;
_paddingStyleChanged: boolean;
_hostMutation: boolean;
_contentMutation: boolean;
}
const applyForceToCache = <T>(cacheValues: CacheValues<T>, force?: boolean): CacheValues<T> => [
cacheValues[0],
force || cacheValues[1],
cacheValues[2],
];
const prepareUpdateHints = <T extends StructureSetupUpdateHints>(
leading: Required<T>,
adaptive?: Partial<T>,
@@ -61,9 +45,7 @@ const prepareUpdateHints = <T extends StructureSetupUpdateHints>(
each(objKeys, (key) => {
const leadingValue = leading[key];
const adaptiveValue = finalAdaptive[key];
result[key] = isBoolean(leadingValue)
? !!force || !!leadingValue || !!adaptiveValue
: applyForceToCache(leadingValue, force);
result[key] = !!(force || leadingValue || adaptiveValue);
});
return result as Required<T>;
@@ -93,20 +75,15 @@ export const createStructureSetupUpdate = (
assignDeep(
{
_sizeChanged: false,
_hostMutation: false,
_contentMutation: false,
_paddingStyleChanged: false,
_directionChanged: false,
_heightIntrinsicChanged: false,
_overflowScrollChanged: false,
_overflowAmountChanged: false,
_hostMutation: false,
_contentMutation: false,
},
Object.keys(updateHints).reduce((acc, key) => {
if (!isUndefined(updateHints[key])) {
acc[key] = updateHints[key];
}
return acc;
}, {})
updateHints
),
{},
force
packages/overlayscrollbars/src/setups/structureSetup/updateSegments/overflowUpdateSegment.ts
+24 -26
View File
@@ -7,7 +7,6 @@ import {
style,
scrollSize,
fractionalSize,
CacheValues,
equalWH,
addClass,
removeClass,
@@ -29,11 +28,11 @@ interface ViewportOverflowState {
}
type UndoViewportArrangeResult = [
() => void, // redoViewportArrange
ViewportOverflowState?
redoViewportArrange: () => void,
overflowState?: ViewportOverflowState
];
const { max, round } = Math;
const { max } = Math;
const overlaidScrollbarsHideOffset = 42;
const whCacheOptions = {
_equal: equalWH,
@@ -62,10 +61,10 @@ const setAxisOverflowStyle = (
styleObj[overflowKey] = behavior;
}
return {
_visible: behaviorIsVisible,
_behavior: behaviorIsVisibleHidden ? 'hidden' : 'scroll',
};
return [behaviorIsVisible, behaviorIsVisibleHidden ? 'hidden' : 'scroll'] as [
visible: boolean,
behavior: string
];
};
const getOverflowAmount = (
@@ -73,15 +72,15 @@ const getOverflowAmount = (
viewportClientSize: WH<number>,
sizeFraction: WH<number>
) => {
const condition = (raw: number) => (window.devicePixelRatio % 2 !== 0 ? raw > 1 : raw > 0);
const tollerance = window.devicePixelRatio % 1 !== 0 ? 1 : 0;
const amount = {
w: max(0, viewportScrollSize.w - viewportClientSize.w - max(0, sizeFraction.w)),
h: max(0, viewportScrollSize.h - viewportClientSize.h - max(0, sizeFraction.h)),
};
return {
w: condition(amount.w) ? amount.w : 0,
h: condition(amount.h) ? amount.h : 0,
w: amount.w >= tollerance ? amount.w : 0,
h: amount.h >= tollerance ? amount.h : 0,
};
};
@@ -135,19 +134,18 @@ export const createOverflowUpdate: CreateStructureUpdateSegment = (
if (heightIntrinsic) {
const { _paddingAbsolute, _padding } = getState();
const { _overflowScroll, _scrollbarsHideOffset } = viewportOverflowState;
const hostCssHeight = parseFloat(style(_host, 'height'));
const fSize = fractionalSize(_host);
const hostClientSize = clientSize(_host);
// const hostOffsetSize = offsetSize(_host);
// padding subtraction is only needed if padding is absolute or if viewport is content-box
const isContentBox = style(_viewport, 'boxSizing') === 'content-box';
const paddingVertical = _paddingAbsolute || isContentBox ? _padding.b + _padding.t : 0;
const fractionalClientHeight = hostClientSize.h + (hostCssHeight - round(hostCssHeight));
const subtractXScrollbar = !(_nativeScrollbarIsOverlaid.x && isContentBox);
style(_viewport, {
height:
fractionalClientHeight +
hostClientSize.h +
fSize.h +
(_overflowScroll.x && subtractXScrollbar ? _scrollbarsHideOffset.x : 0) -
paddingVertical,
});
@@ -208,13 +206,13 @@ export const createOverflowUpdate: CreateStructureUpdateSegment = (
overflow: XY<OverflowBehavior>,
viewportStyleObj: StyleObject
): ViewportOverflowState => {
const { _visible: xVisible, _behavior: xVisibleBehavior } = setAxisOverflowStyle(
const [xVisible, xVisibleBehavior] = setAxisOverflowStyle(
true,
overflowAmount.w,
overflow.x,
viewportStyleObj
);
const { _visible: yVisible, _behavior: yVisibleBehavior } = setAxisOverflowStyle(
const [yVisible, yVisibleBehavior] = setAxisOverflowStyle(
false,
overflowAmount.h,
overflow.y,
@@ -412,6 +410,7 @@ export const createOverflowUpdate: CreateStructureUpdateSegment = (
const { _heightIntrinsic, _directionIsRTL } = getState();
const [showNativeOverlaidScrollbarsOption, showNativeOverlaidScrollbarsChanged] =
checkOption<boolean>('nativeScrollbarsOverlaid.show');
const [overflow, overflowChanged] = checkOption<XY<OverflowBehavior>>('overflow');
const showNativeOverlaidScrollbars =
showNativeOverlaidScrollbarsOption &&
_nativeScrollbarIsOverlaid.x &&
@@ -424,9 +423,9 @@ export const createOverflowUpdate: CreateStructureUpdateSegment = (
showNativeOverlaidScrollbarsChanged ||
_heightIntrinsicChanged);
let sizeFractionCache: CacheValues<WH<number>> = getCurrentSizeFraction(force);
let viewportScrollSizeCache: CacheValues<WH<number>> = getCurrentViewportScrollSizeCache(force);
let overflowAmuntCache: CacheValues<WH<number>> = getCurrentOverflowAmountCache(force);
let sizeFractionCache = getCurrentSizeFraction(force);
let viewportScrollSizeCache = getCurrentViewportScrollSizeCache(force);
let overflowAmuntCache = getCurrentOverflowAmountCache(force);
let preMeasureViewportOverflowState: ViewportOverflowState | undefined;
if (showNativeOverlaidScrollbarsChanged && _nativeScrollbarStyling) {
@@ -495,10 +494,9 @@ export const createOverflowUpdate: CreateStructureUpdateSegment = (
);
}
const [sizeFraction, sizeFractionChanged] = sizeFractionCache;
const [viewportScrollSize, viewportScrollSizeChanged] = viewportScrollSizeCache;
const [overflowAmount, overflowAmountChanged] = overflowAmuntCache;
const [overflow, overflowChanged] = checkOption<XY<OverflowBehavior>>('overflow');
const [viewportScrollSize, viewportScrollSizeChanged] = viewportScrollSizeCache;
const [sizeFraction, sizeFractionChanged] = sizeFractionCache;
if (
_paddingStyleChanged ||
@@ -548,8 +546,8 @@ export const createOverflowUpdate: CreateStructureUpdateSegment = (
style(_viewport, viewportStyle);
setState({
_viewportOverflowScroll: overflowScroll,
_viewportOverflowAmount: overflowAmount,
_overflowScroll: overflowScroll,
_overflowAmount: overflowAmount,
});
return {
packages/overlayscrollbars/tests/playwright/lifecycles/structureLifecycle/index.browser.ts
+1 -1
View File
@@ -61,7 +61,7 @@ const getMetrics = (elm: HTMLElement): Metrics => {
const comparisonPercentBCR = getBoundingClientRect(elm!.querySelector('.percent')!);
const comparisonEndBCR = getBoundingClientRect(elm!.querySelector('.end')!);
const scrollMeasure = () => {
const condition = (raw: number) => (window.devicePixelRatio % 2 !== 0 ? raw > 1 : raw > 0);
const condition = (raw: number) => (window.devicePixelRatio % 1 !== 0 ? raw > 1 : raw > 0);
const amount = {
width: Math.max(0, comparison!.scrollWidth - comparison!.clientWidth),
height: Math.max(0, comparison!.scrollHeight - comparison!.clientHeight),
packages/overlayscrollbars/types/overlayscrollbars.d.ts
Vendored
+4 -2
View File
@@ -116,10 +116,12 @@ onHostSizeChanged : null, // gone
interface OnUpdatedEventListenerArgs {
updateHints: {
sizeChanged: boolean;
hostMutation: boolean;
contentMutation: boolean;
directionChanged: boolean;
heightIntrinsicChanged: boolean;
overflowAmountChanged: boolean;
overflowScrollChanged: boolean;
hostMutation: boolean;
contentMutation: boolean;
};
changedOptions: PartialOptions<OSOptions>;
force: boolean;