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

improve code for fractional sizes

Browse Source
This commit is contained in:
Rene Haas
2022-07-02 11:36:28 +02:00
parent 14a49a52ff
commit bea88a9d9b
17 changed files with 800 additions and 705 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintrc.js
+1
View File
@@ -94,6 +94,7 @@ module.exports = {
'no-void': 'off',
'no-empty-function': 'off',
'no-new-func': 'off',
'import/order': 'off',
},
},
{
config/playwright/rollup.config.js
+2
View File
@@ -60,11 +60,13 @@ module.exports = (testDir, onListening = null) => {
port,
onListening,
}),
/*
rollupPluginLivereload({
watch: dist,
port: port - 1,
verbose: false,
}),
*/
]
: []),
],
packages/overlayscrollbars/dist/overlayscrollbars.esm.js
Vendored
+289 -244
View File
@@ -360,12 +360,13 @@ const classListAction = (elm, className, action) => {
return result;
};
const addClass = (elm, className) => {
classListAction(elm, className, (classList, clazz) => classList.add(clazz));
};
const removeClass = (elm, className) => {
classListAction(elm, className, (classList, clazz) => classList.remove(clazz));
};
const addClass = (elm, className) => {
classListAction(elm, className, (classList, clazz) => classList.add(clazz));
return removeClass.bind(0, elm, className);
};
const diffClass = (classNameA, classNameB) => {
const classNameASplit = classNameA && classNameA.split(' ');
const classNameBSplit = classNameB && classNameB.split(' ');
@@ -383,77 +384,6 @@ const diffClass = (classNameA, classNameB) => {
return keys(tempObj);
};
const zeroObj$1 = {
w: 0,
h: 0
};
const windowSize = () => ({
w: window.innerWidth,
h: window.innerHeight
});
const offsetSize = elm => elm ? {
w: elm.offsetWidth,
h: elm.offsetHeight
} : zeroObj$1;
const clientSize = elm => elm ? {
w: elm.clientWidth,
h: elm.clientHeight
} : zeroObj$1;
const scrollSize = elm => elm ? {
w: elm.scrollWidth,
h: elm.scrollHeight
} : zeroObj$1;
const getBoundingClientRect = elm => elm.getBoundingClientRect();
let passiveEventsSupport;
const supportPassiveEvents = () => {
if (isUndefined(passiveEventsSupport)) {
passiveEventsSupport = false;
try {
window.addEventListener('test', null, Object.defineProperty({}, 'passive', {
get: function () {
passiveEventsSupport = true;
}
}));
} catch (e) {}
}
return passiveEventsSupport;
};
const splitEventNames = eventNames => eventNames.split(' ');
const off = (target, eventNames, listener, capture) => {
each(splitEventNames(eventNames), eventName => {
target.removeEventListener(eventName, listener, capture);
});
};
const on = (target, eventNames, listener, options) => {
const doSupportPassiveEvents = supportPassiveEvents();
const passive = doSupportPassiveEvents && options && options._passive || false;
const capture = options && options._capture || false;
const once = options && options._once || false;
const offListeners = [];
const nativeOptions = doSupportPassiveEvents ? {
passive,
capture
} : capture;
each(splitEventNames(eventNames), eventName => {
const finalListener = once ? evt => {
target.removeEventListener(eventName, finalListener, capture);
listener && listener(evt);
} : listener;
push(offListeners, off.bind(null, target, eventName, finalListener, capture));
target.addEventListener(eventName, finalListener, nativeOptions);
});
return runEach.bind(0, offListeners);
};
const stopPropagation = evt => evt.stopPropagation();
const preventDefault = evt => evt.preventDefault();
const stopAndPrevent = evt => stopPropagation(evt) || preventDefault(evt);
const equal = (a, b, props, propMutation) => {
if (a && b) {
let result = true;
@@ -603,6 +533,85 @@ const topRightBottomLeft = (elm, propertyPrefix, propertySuffix) => {
};
};
const zeroObj$1 = {
w: 0,
h: 0
};
const windowSize = () => ({
w: window.innerWidth,
h: window.innerHeight
});
const offsetSize = elm => elm ? {
w: elm.offsetWidth,
h: elm.offsetHeight
} : zeroObj$1;
const clientSize = elm => elm ? {
w: elm.clientWidth,
h: elm.clientHeight
} : zeroObj$1;
const scrollSize = elm => elm ? {
w: elm.scrollWidth,
h: elm.scrollHeight
} : zeroObj$1;
const fractionalSize = elm => {
const cssHeight = parseFloat(style(elm, 'height')) || 0;
const cssWidth = parseFloat(style(elm, 'height')) || 0;
return {
w: cssWidth - Math.round(cssWidth),
h: cssHeight - Math.round(cssHeight)
};
};
const getBoundingClientRect = elm => elm.getBoundingClientRect();
let passiveEventsSupport;
const supportPassiveEvents = () => {
if (isUndefined(passiveEventsSupport)) {
passiveEventsSupport = false;
try {
window.addEventListener('test', null, Object.defineProperty({}, 'passive', {
get: function () {
passiveEventsSupport = true;
}
}));
} catch (e) {}
}
return passiveEventsSupport;
};
const splitEventNames = eventNames => eventNames.split(' ');
const off = (target, eventNames, listener, capture) => {
each(splitEventNames(eventNames), eventName => {
target.removeEventListener(eventName, listener, capture);
});
};
const on = (target, eventNames, listener, options) => {
const doSupportPassiveEvents = supportPassiveEvents();
const passive = doSupportPassiveEvents && options && options._passive || false;
const capture = options && options._capture || false;
const once = options && options._once || false;
const offListeners = [];
const nativeOptions = doSupportPassiveEvents ? {
passive,
capture
} : capture;
each(splitEventNames(eventNames), eventName => {
const finalListener = once ? evt => {
target.removeEventListener(eventName, finalListener, capture);
listener && listener(evt);
} : listener;
push(offListeners, off.bind(null, target, eventName, finalListener, capture));
target.addEventListener(eventName, finalListener, nativeOptions);
});
return runEach.bind(0, offListeners);
};
const stopPropagation = evt => evt.stopPropagation();
const preventDefault = evt => evt.preventDefault();
const stopAndPrevent = evt => stopPropagation(evt) || preventDefault(evt);
const zeroObj = {
x: 0,
y: 0
@@ -675,35 +684,6 @@ const createState = initialState => {
}];
};
function getDefaultExportFromCjs (x) {
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
}
var _extends$1 = {exports: {}};
(function (module) {
function _extends() {
module.exports = _extends = Object.assign ? Object.assign.bind() : function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
}, module.exports.__esModule = true, module.exports["default"] = module.exports;
return _extends.apply(this, arguments);
}
module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
})(_extends$1);
const _extends = getDefaultExportFromCjs(_extends$1.exports);
const classNameEnvironment = 'os-environment';
const classNameEnvironmentFlexboxGlue = `${classNameEnvironment}-flexbox-glue`;
const classNameEnvironmentFlexboxGlueMax = `${classNameEnvironmentFlexboxGlue}-max`;
@@ -797,34 +777,36 @@ const getOptionsDiff = (currOptions, newOptions) => {
let environmentInstance;
const {
abs: abs$1,
abs,
round: round$1
} = Math;
const diffBiggerThanOne = (valOne, valTwo) => {
const absValOne = abs$1(valOne);
const absValTwo = abs$1(valTwo);
const absValOne = abs(valOne);
const absValTwo = abs(valTwo);
return !(absValOne === absValTwo || absValOne + 1 === absValTwo || absValOne - 1 === absValTwo);
};
const getNativeScrollbarSize = (body, measureElm) => {
const getNativeScrollbarSize = (body, measureElm, measureElmChild) => {
appendChildren(body, measureElm);
const cSize = clientSize(measureElm);
const oSize = offsetSize(measureElm);
const fSize = fractionalSize(measureElmChild);
return {
x: oSize.h - cSize.h,
y: oSize.w - cSize.w
x: oSize.h - cSize.h + fSize.h,
y: oSize.w - cSize.w + fSize.w
};
};
const getNativeScrollbarStyling = testElm => {
let result = false;
addClass(testElm, classNameViewportScrollbarStyling);
const revertClass = addClass(testElm, classNameViewportScrollbarStyling);
try {
result = style(testElm, cssProperty('scrollbar-width')) === 'none' || window.getComputedStyle(testElm, '::-webkit-scrollbar').getPropertyValue('display') === 'none';
} catch (ex) {}
revertClass();
return result;
};
@@ -847,14 +829,16 @@ const getRtlScrollBehavior = (parentElm, childElm) => {
};
const getFlexboxGlue = (parentElm, childElm) => {
addClass(parentElm, classNameEnvironmentFlexboxGlue);
const revertFbxGlue = addClass(parentElm, classNameEnvironmentFlexboxGlue);
const minOffsetsizeParent = getBoundingClientRect(parentElm);
const minOffsetsize = getBoundingClientRect(childElm);
const supportsMin = equalBCRWH(minOffsetsize, minOffsetsizeParent, true);
addClass(parentElm, classNameEnvironmentFlexboxGlueMax);
const revertFbxGlueMax = addClass(parentElm, classNameEnvironmentFlexboxGlueMax);
const maxOffsetsizeParent = getBoundingClientRect(parentElm);
const maxOffsetsize = getBoundingClientRect(childElm);
const supportsMax = equalBCRWH(maxOffsetsize, maxOffsetsizeParent, true);
revertFbxGlue();
revertFbxGlueMax();
return supportsMin && supportsMax;
};
@@ -867,8 +851,8 @@ const getWindowDPR = () => {
const getDefaultInitializationStrategy = nativeScrollbarStyling => ({
_host: null,
_viewport: null,
_padding: null,
_content: null,
_padding: !nativeScrollbarStyling,
_content: false,
_scrollbarsSlot: null
});
@@ -880,15 +864,18 @@ const createEnvironment = () => {
const envElm = envDOM[0];
const envChildElm = envElm.firstChild;
const onChangedListener = new Set();
const nativeScrollbarSize = getNativeScrollbarSize(body, envElm);
const [updateNativeScrollbarSizeCache, getNativeScrollbarSizeCache] = createCache({
_initialValue: getNativeScrollbarSize(body, envElm, envChildElm),
_equal: equalXY
});
const [nativeScrollbarSize] = getNativeScrollbarSizeCache();
const nativeScrollbarStyling = getNativeScrollbarStyling(envElm);
const nativeScrollbarIsOverlaid = {
x: nativeScrollbarSize.x === 0,
y: nativeScrollbarSize.y === 0
};
const defaultInitializationStrategy = getDefaultInitializationStrategy();
let initializationStrategy = defaultInitializationStrategy;
let defaultDefaultOptions = defaultOptions;
const initializationStrategy = getDefaultInitializationStrategy(nativeScrollbarStyling);
const defaultDefaultOptions = assignDeep({}, defaultOptions);
const env = {
_nativeScrollbarSize: nativeScrollbarSize,
_nativeScrollbarIsOverlaid: nativeScrollbarIsOverlaid,
@@ -902,20 +889,20 @@ const createEnvironment = () => {
return () => onChangedListener.delete(listener);
},
_getInitializationStrategy: () => _extends({}, initializationStrategy),
_getInitializationStrategy: assignDeep.bind(0, {}, initializationStrategy),
_setInitializationStrategy(newInitializationStrategy) {
initializationStrategy = assignDeep({}, initializationStrategy, newInitializationStrategy);
assignDeep(initializationStrategy, newInitializationStrategy);
},
_getDefaultOptions: () => _extends({}, defaultDefaultOptions),
_getDefaultOptions: assignDeep.bind(0, {}, defaultDefaultOptions),
_setDefaultOptions(newDefaultOptions) {
defaultDefaultOptions = assignDeep({}, defaultDefaultOptions, newDefaultOptions);
assignDeep(defaultDefaultOptions, newDefaultOptions);
},
_defaultInitializationStrategy: defaultInitializationStrategy,
_defaultDefaultOptions: defaultDefaultOptions
_defaultInitializationStrategy: assignDeep({}, initializationStrategy),
_defaultDefaultOptions: assignDeep({}, defaultDefaultOptions)
};
removeAttr(envElm, 'style');
removeElements(envElm);
@@ -923,7 +910,6 @@ const createEnvironment = () => {
if (!nativeScrollbarStyling && (!nativeScrollbarIsOverlaid.x || !nativeScrollbarIsOverlaid.y)) {
let size = windowSize();
let dpr = getWindowDPR();
let scrollbarSize = nativeScrollbarSize;
window.addEventListener('resize', () => {
if (onChangedListener.size) {
const sizeNew = windowSize();
@@ -933,12 +919,12 @@ const createEnvironment = () => {
};
if (deltaSize.w === 0 && deltaSize.h === 0) return;
const deltaAbsSize = {
w: abs$1(deltaSize.w),
h: abs$1(deltaSize.h)
w: abs(deltaSize.w),
h: abs(deltaSize.h)
};
const deltaAbsRatio = {
w: abs$1(round$1(sizeNew.w / (size.w / 100.0))),
h: abs$1(round$1(sizeNew.h / (size.h / 100.0)))
w: abs(round$1(sizeNew.w / (size.w / 100.0))),
h: abs(round$1(sizeNew.h / (size.h / 100.0)))
};
const dprNew = getWindowDPR();
const deltaIsBigger = deltaAbsSize.w > 2 && deltaAbsSize.h > 2;
@@ -947,16 +933,13 @@ const createEnvironment = () => {
const isZoom = deltaIsBigger && difference && dprChanged;
if (isZoom) {
const newScrollbarSize = getNativeScrollbarSize(body, envElm);
environmentInstance._nativeScrollbarSize.x = newScrollbarSize.x;
environmentInstance._nativeScrollbarSize.y = newScrollbarSize.y;
const [scrollbarSize, scrollbarSizeChanged] = updateNativeScrollbarSizeCache(getNativeScrollbarSize(body, envElm, envChildElm));
assignDeep(environmentInstance._nativeScrollbarSize, scrollbarSize);
removeElements(envElm);
if (scrollbarSize.x !== newScrollbarSize.x || scrollbarSize.y !== newScrollbarSize.y) {
if (scrollbarSizeChanged) {
runEach(onChangedListener);
}
scrollbarSize = newScrollbarSize;
}
size = sizeNew;
@@ -1005,14 +988,9 @@ const staticCreationFromStrategy = (target, initializationValue, strategy, eleme
return result || createDiv(elementClass);
};
const dynamicCreationFromStrategy = (target, initializationValue, strategy, elementClass, defaultValue) => {
const dynamicCreationFromStrategy = (target, initializationValue, strategy, elementClass) => {
const takeInitializationValue = isBoolean(initializationValue) || initializationValue;
const result = takeInitializationValue ? initializationValue : isFunction(strategy) ? strategy(target) : strategy;
if (result === null) {
return defaultValue ? createDiv(elementClass) : false;
}
return result === true ? createDiv(elementClass) : result;
};
@@ -1041,8 +1019,8 @@ const createStructureSetupElements = target => {
_target: targetElement,
_host: isTextarea ? staticCreationFromStrategy(targetElement, targetStructureInitialization.host, hostInitializationStrategy, classNameHost) : targetElement,
_viewport: staticCreationFromStrategy(targetElement, targetStructureInitialization.viewport, viewportInitializationStrategy, classNameViewport),
_padding: dynamicCreationFromStrategy(targetElement, targetStructureInitialization.padding, paddingInitializationStrategy, classNamePadding, !_nativeScrollbarStyling),
_content: dynamicCreationFromStrategy(targetElement, targetStructureInitialization.content, contentInitializationStrategy, classNameContent, false),
_padding: dynamicCreationFromStrategy(targetElement, targetStructureInitialization.padding, paddingInitializationStrategy, classNamePadding),
_content: dynamicCreationFromStrategy(targetElement, targetStructureInitialization.content, contentInitializationStrategy, classNameContent),
_viewportArrange: createUniqueViewportArrangeElement(),
_windowElm: wnd,
_documentElm: ownerDocument,
@@ -1125,32 +1103,35 @@ const createStructureSetupElements = target => {
return [evaluatedTargetObj, runEach.bind(0, destroyFns)];
};
const createTrinsicUpdate = structureSetupElements => {
const createTrinsicUpdate = (structureSetupElements, state) => {
const {
_content
} = structureSetupElements;
const [getState] = state;
return updateHints => {
const {
_heightIntrinsic
} = getState();
const {
_heightIntrinsicChanged
} = updateHints;
const [heightIntrinsic, heightIntrinsicChanged] = _heightIntrinsic;
if (heightIntrinsicChanged) {
if (_heightIntrinsicChanged) {
style(_content, {
height: heightIntrinsic ? '' : '100%',
display: heightIntrinsic ? '' : 'inline'
height: _heightIntrinsic ? '' : '100%',
display: _heightIntrinsic ? '' : 'inline'
});
}
return {
_sizeChanged: heightIntrinsicChanged,
_contentMutation: heightIntrinsicChanged
_sizeChanged: _heightIntrinsicChanged,
_contentMutation: _heightIntrinsicChanged
};
};
};
const createPaddingUpdate = (structureSetupElements, state) => {
const [, setState] = state;
const [getState, setState] = state;
const {
_host,
_padding,
@@ -1166,12 +1147,14 @@ const createPaddingUpdate = (structureSetupElements, state) => {
_nativeScrollbarStyling,
_flexboxGlue
} = getEnvironment();
const {
_directionIsRTL
} = getState();
const {
_sizeChanged,
_directionIsRTL,
_contentMutation
_contentMutation,
_directionChanged
} = updateHints;
const [directionIsRTL, directionChanged] = _directionIsRTL;
const [paddingAbsolute, paddingAbsoluteChanged] = checkOption('paddingAbsolute');
const contentMutation = !_flexboxGlue && _contentMutation;
@@ -1179,19 +1162,19 @@ const createPaddingUpdate = (structureSetupElements, state) => {
[padding, paddingChanged] = updatePaddingCache(force);
}
const paddingStyleChanged = paddingAbsoluteChanged || directionChanged || paddingChanged;
const paddingStyleChanged = paddingAbsoluteChanged || _directionChanged || paddingChanged;
if (paddingStyleChanged) {
const paddingRelative = !paddingAbsolute || !_padding && !_nativeScrollbarStyling;
const paddingHorizontal = padding.r + padding.l;
const paddingVertical = padding.t + padding.b;
const paddingStyle = {
marginRight: paddingRelative && !directionIsRTL ? -paddingHorizontal : 0,
marginRight: paddingRelative && !_directionIsRTL ? -paddingHorizontal : 0,
marginBottom: paddingRelative ? -paddingVertical : 0,
marginLeft: paddingRelative && directionIsRTL ? -paddingHorizontal : 0,
marginLeft: paddingRelative && _directionIsRTL ? -paddingHorizontal : 0,
top: paddingRelative ? -padding.t : 0,
right: paddingRelative ? directionIsRTL ? -padding.r : 'auto' : 0,
left: paddingRelative ? directionIsRTL ? 'auto' : -padding.l : 0,
right: paddingRelative ? _directionIsRTL ? -padding.r : 'auto' : 0,
left: paddingRelative ? _directionIsRTL ? 'auto' : -padding.l : 0,
width: paddingRelative ? `calc(100% + ${paddingHorizontal}px)` : ''
};
const viewportStyle = {
@@ -1217,7 +1200,6 @@ const createPaddingUpdate = (structureSetupElements, state) => {
const {
max,
abs,
round
} = Math;
const overlaidScrollbarsHideOffset = 42;
@@ -1236,17 +1218,6 @@ const xyCacheOptions = {
}
};
const sizeFraction = elm => {
const viewportOffsetSize = offsetSize(elm);
const viewportRect = getBoundingClientRect(elm);
return {
w: viewportRect.width - viewportOffsetSize.w,
h: viewportRect.height - viewportOffsetSize.h
};
};
const fractionalPixelRatioTollerance = () => window.devicePixelRatio % 1 === 0 ? 0 : 1;
const setAxisOverflowStyle = (horizontal, overflowAmount, behavior, styleObj) => {
const overflowKey = horizontal ? 'overflowX' : 'overflowY';
const behaviorIsVisible = behavior.indexOf('visible') === 0;
@@ -1268,10 +1239,18 @@ const setAxisOverflowStyle = (horizontal, overflowAmount, behavior, styleObj) =>
};
};
const getOverflowAmount = (viewportScrollSize, viewportClientSize, viewportSizeFraction) => ({
w: max(0, round(max(0, viewportScrollSize.w - viewportClientSize.w) - (fractionalPixelRatioTollerance() || max(0, viewportSizeFraction.w)))),
h: max(0, round(max(0, viewportScrollSize.h - viewportClientSize.h) - (fractionalPixelRatioTollerance() || max(0, viewportSizeFraction.h))))
});
const getOverflowAmount = (viewportScrollSize, viewportClientSize, sizeFraction) => {
const condition = raw => window.devicePixelRatio % 2 !== 0 ? raw > 1 : raw > 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
};
};
const createOverflowUpdate = (structureSetupElements, state) => {
const [getState, setState] = state;
@@ -1287,7 +1266,7 @@ const createOverflowUpdate = (structureSetupElements, state) => {
_nativeScrollbarIsOverlaid
} = getEnvironment();
const doViewportArrange = !_nativeScrollbarStyling && (_nativeScrollbarIsOverlaid.x || _nativeScrollbarIsOverlaid.y);
const [updateViewportSizeFraction, getCurrentViewportSizeFraction] = createCache(whCacheOptions, sizeFraction.bind(0, _viewport));
const [updateSizeFraction, getCurrentSizeFraction] = createCache(whCacheOptions, fractionalSize.bind(0, _host));
const [updateViewportScrollSizeCache, getCurrentViewportScrollSizeCache] = createCache(whCacheOptions, scrollSize.bind(0, _viewport));
const [updateOverflowAmountCache, getCurrentOverflowAmountCache] = createCache(whCacheOptions);
const [updateOverflowScrollCache] = createCache(xyCacheOptions);
@@ -1306,11 +1285,11 @@ const createOverflowUpdate = (structureSetupElements, state) => {
_overflowScroll,
_scrollbarsHideOffset
} = viewportOverflowState;
const hostSizeFraction = sizeFraction(_host);
const hostCssHeight = parseFloat(style(_host, 'height'));
const hostClientSize = clientSize(_host);
const isContentBox = style(_viewport, 'boxSizing') === 'content-box';
const paddingVertical = _paddingAbsolute || isContentBox ? _padding.b + _padding.t : 0;
const fractionalClientHeight = hostClientSize.h + (abs(hostSizeFraction.h) < 1 ? hostSizeFraction.h : 0);
const fractionalClientHeight = hostClientSize.h + (hostCssHeight - round(hostCssHeight));
const subtractXScrollbar = !(_nativeScrollbarIsOverlaid.x && isContentBox);
style(_viewport, {
height: fractionalClientHeight + (_overflowScroll.x && subtractXScrollbar ? _scrollbarsHideOffset.x : 0) - paddingVertical
@@ -1369,7 +1348,7 @@ const createOverflowUpdate = (structureSetupElements, state) => {
return getViewportOverflowState(showNativeOverlaidScrollbars, viewportStyleObj);
};
const arrangeViewport = (viewportOverflowState, viewportScrollSize, viewportSizeFraction, directionIsRTL) => {
const arrangeViewport = (viewportOverflowState, viewportScrollSize, sizeFraction, directionIsRTL) => {
if (doViewportArrange) {
const {
_viewportPaddingStyle
@@ -1389,8 +1368,8 @@ const createOverflowUpdate = (structureSetupElements, state) => {
const viewportArrangeHorizontalPaddingKey = directionIsRTL ? 'paddingRight' : 'paddingLeft';
const viewportArrangeHorizontalPaddingValue = _viewportPaddingStyle[viewportArrangeHorizontalPaddingKey];
const viewportArrangeVerticalPaddingValue = _viewportPaddingStyle.paddingTop;
const fractionalContentWidth = viewportScrollSize.w + (abs(viewportSizeFraction.w) < 1 ? viewportSizeFraction.w : 0);
const fractionalContenHeight = viewportScrollSize.h + (abs(viewportSizeFraction.h) < 1 ? viewportSizeFraction.h : 0);
const fractionalContentWidth = viewportScrollSize.w + sizeFraction.w;
const fractionalContenHeight = viewportScrollSize.h + sizeFraction.h;
const arrangeSize = {
w: hideOffsetY && arrangeY ? `${hideOffsetY + fractionalContentWidth - viewportArrangeHorizontalPaddingValue}px` : '',
h: hideOffsetX && arrangeX ? `${hideOffsetX + fractionalContenHeight - viewportArrangeVerticalPaddingValue}px` : ''
@@ -1478,10 +1457,6 @@ const createOverflowUpdate = (structureSetupElements, state) => {
finalPaddingStyle[prop] = viewportPaddingStyle[prop];
});
if (!_flexboxGlue) {
finalPaddingStyle.height = '';
}
if (arrangeX) {
assignProps('marginBottom paddingTop paddingBottom');
}
@@ -1492,6 +1467,11 @@ const createOverflowUpdate = (structureSetupElements, state) => {
const prevStyle = style(_viewport, keys(finalPaddingStyle));
removeClass(_viewport, classNameViewportArrange);
if (!_flexboxGlue) {
finalPaddingStyle.height = '';
}
style(_viewport, finalPaddingStyle);
return [() => {
hideNativeScrollbars(finalViewportOverflowState, directionIsRTL, doViewportArrange, prevStyle);
@@ -1505,19 +1485,21 @@ const createOverflowUpdate = (structureSetupElements, state) => {
return (updateHints, checkOption, force) => {
const {
_directionIsRTL,
_heightIntrinsic,
_sizeChanged,
_hostMutation,
_contentMutation,
_paddingStyleChanged
_paddingStyleChanged,
_heightIntrinsicChanged,
_directionChanged
} = updateHints;
const [heightIntrinsic, heightIntrinsicChanged] = _heightIntrinsic;
const [directionIsRTL, directionChanged] = _directionIsRTL;
const {
_heightIntrinsic,
_directionIsRTL
} = getState();
const [showNativeOverlaidScrollbarsOption, showNativeOverlaidScrollbarsChanged] = checkOption('nativeScrollbarsOverlaid.show');
const showNativeOverlaidScrollbars = showNativeOverlaidScrollbarsOption && _nativeScrollbarIsOverlaid.x && _nativeScrollbarIsOverlaid.y;
const adjustFlexboxGlue = !_flexboxGlue && (_sizeChanged || _contentMutation || _hostMutation || showNativeOverlaidScrollbarsChanged || heightIntrinsicChanged);
let viewportSizeFractionCache = getCurrentViewportSizeFraction(force);
const adjustFlexboxGlue = !_flexboxGlue && (_sizeChanged || _contentMutation || _hostMutation || showNativeOverlaidScrollbarsChanged || _heightIntrinsicChanged);
let sizeFractionCache = getCurrentSizeFraction(force);
let viewportScrollSizeCache = getCurrentViewportScrollSizeCache(force);
let overflowAmuntCache = getCurrentOverflowAmountCache(force);
let preMeasureViewportOverflowState;
@@ -1532,19 +1514,19 @@ const createOverflowUpdate = (structureSetupElements, state) => {
if (adjustFlexboxGlue) {
preMeasureViewportOverflowState = getViewportOverflowState(showNativeOverlaidScrollbars);
fixFlexboxGlue(preMeasureViewportOverflowState, !!heightIntrinsic);
fixFlexboxGlue(preMeasureViewportOverflowState, _heightIntrinsic);
}
if (_sizeChanged || _paddingStyleChanged || _contentMutation || showNativeOverlaidScrollbarsChanged || directionChanged) {
const [redoViewportArrange, undoViewportArrangeOverflowState] = undoViewportArrange(showNativeOverlaidScrollbars, directionIsRTL, preMeasureViewportOverflowState);
const [_viewportSizeFraction, viewportSizeFractionCahnged] = viewportSizeFractionCache = updateViewportSizeFraction(force);
if (_sizeChanged || _paddingStyleChanged || _contentMutation || _directionChanged || showNativeOverlaidScrollbarsChanged) {
const [redoViewportArrange, undoViewportArrangeOverflowState] = undoViewportArrange(showNativeOverlaidScrollbars, _directionIsRTL, preMeasureViewportOverflowState);
const [_sizeFraction, _sizeFractionChanged] = sizeFractionCache = updateSizeFraction(force);
const [_viewportScrollSize, _viewportScrollSizeChanged] = viewportScrollSizeCache = updateViewportScrollSizeCache(force);
const viewportContentSize = clientSize(_viewport);
let arrangedViewportScrollSize = _viewportScrollSize;
let arrangedViewportClientSize = viewportContentSize;
redoViewportArrange();
if ((_viewportScrollSizeChanged || viewportSizeFractionCahnged || showNativeOverlaidScrollbarsChanged) && undoViewportArrangeOverflowState && !showNativeOverlaidScrollbars && arrangeViewport(undoViewportArrangeOverflowState, _viewportScrollSize, _viewportSizeFraction, directionIsRTL)) {
if ((_viewportScrollSizeChanged || _sizeFractionChanged || showNativeOverlaidScrollbarsChanged) && undoViewportArrangeOverflowState && !showNativeOverlaidScrollbars && arrangeViewport(undoViewportArrangeOverflowState, _viewportScrollSize, _sizeFraction, _directionIsRTL)) {
arrangedViewportClientSize = clientSize(_viewport);
arrangedViewportScrollSize = scrollSize(_viewport);
}
@@ -1555,15 +1537,15 @@ const createOverflowUpdate = (structureSetupElements, state) => {
}, {
w: arrangedViewportClientSize.w + max(0, viewportContentSize.w - _viewportScrollSize.w),
h: arrangedViewportClientSize.h + max(0, viewportContentSize.h - _viewportScrollSize.h)
}, _viewportSizeFraction), force);
}, _sizeFraction), force);
}
const [viewportSizeFraction, viewportSizeFractionChanged] = viewportSizeFractionCache;
const [sizeFraction, sizeFractionChanged] = sizeFractionCache;
const [viewportScrollSize, viewportScrollSizeChanged] = viewportScrollSizeCache;
const [overflowAmount, overflowAmountChanged] = overflowAmuntCache;
const [overflow, overflowChanged] = checkOption('overflow');
if (_paddingStyleChanged || viewportSizeFractionChanged || viewportScrollSizeChanged || overflowAmountChanged || overflowChanged || showNativeOverlaidScrollbarsChanged || directionChanged || adjustFlexboxGlue) {
if (_paddingStyleChanged || _directionChanged || sizeFractionChanged || viewportScrollSizeChanged || overflowAmountChanged || overflowChanged || showNativeOverlaidScrollbarsChanged || adjustFlexboxGlue) {
const viewportStyle = {
marginRight: 0,
marginBottom: 0,
@@ -1573,24 +1555,27 @@ const createOverflowUpdate = (structureSetupElements, state) => {
overflowX: ''
};
const viewportOverflowState = setViewportOverflowState(showNativeOverlaidScrollbars, overflowAmount, overflow, viewportStyle);
const viewportArranged = arrangeViewport(viewportOverflowState, viewportScrollSize, viewportSizeFraction, directionIsRTL);
hideNativeScrollbars(viewportOverflowState, directionIsRTL, viewportArranged, viewportStyle);
const viewportArranged = arrangeViewport(viewportOverflowState, viewportScrollSize, sizeFraction, _directionIsRTL);
const [overflowScroll, overflowScrollChanged] = updateOverflowScrollCache(viewportOverflowState._overflowScroll);
hideNativeScrollbars(viewportOverflowState, _directionIsRTL, viewportArranged, viewportStyle);
if (adjustFlexboxGlue) {
fixFlexboxGlue(viewportOverflowState, !!heightIntrinsic);
fixFlexboxGlue(viewportOverflowState, _heightIntrinsic);
}
style(_viewport, viewportStyle);
setState({
_viewportOverflowScrollCache: updateOverflowScrollCache(viewportOverflowState._overflowScroll),
_viewportOverflowAmountCache: overflowAmuntCache
_viewportOverflowScroll: overflowScroll,
_viewportOverflowAmount: overflowAmount
});
return {
_overflowAmountChanged: overflowAmountChanged,
_overflowScrollChanged: overflowScrollChanged
};
}
};
};
const booleanCacheValuesFallback = [false, false, false];
const applyForceToCache = (cacheValues, force) => [cacheValues[0], force || cacheValues[1], cacheValues[2]];
const prepareUpdateHints = (leading, adaptive, force) => {
@@ -1600,7 +1585,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 || booleanCacheValuesFallback, force);
result[key] = isBoolean(leadingValue) ? !!force || !!leadingValue || !!adaptiveValue : applyForceToCache(leadingValue, force);
});
return result;
};
@@ -1615,16 +1600,24 @@ const createStructureSetupUpdate = (structureSetupElements, state) => {
_flexboxGlue
} = getEnvironment();
const doViewportArrange = !_nativeScrollbarStyling && (_nativeScrollbarIsOverlaid.x || _nativeScrollbarIsOverlaid.y);
const updateSegments = [createTrinsicUpdate(structureSetupElements), createPaddingUpdate(structureSetupElements, state), createOverflowUpdate(structureSetupElements, state)];
const updateSegments = [createTrinsicUpdate(structureSetupElements, state), createPaddingUpdate(structureSetupElements, state), createOverflowUpdate(structureSetupElements, state)];
return (checkOption, updateHints, force) => {
const initialUpdateHints = prepareUpdateHints(assignDeep({
_sizeChanged: false,
_hostMutation: false,
_contentMutation: false,
_paddingStyleChanged: false,
_directionIsRTL: booleanCacheValuesFallback,
_heightIntrinsic: booleanCacheValuesFallback
}, updateHints), {}, force);
_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);
const adjustScrollOffset = doViewportArrange || !_flexboxGlue;
const scrollOffsetX = adjustScrollOffset && scrollLeft(_viewport);
const scrollOffsetY = adjustScrollOffset && scrollTop(_viewport);
@@ -2031,10 +2024,11 @@ const ignoreTargetChange = (target, attrName, oldValue, newValue) => {
return false;
};
const createStructureSetupObservers = (structureSetupElements, structureSetupUpdate) => {
const createStructureSetupObservers = (structureSetupElements, state, structureSetupUpdate) => {
let debounceTimeout;
let debounceMaxDelay;
let contentMutationObserver;
const [, setState] = state;
const {
_host,
_viewport,
@@ -2085,10 +2079,14 @@ const createStructureSetupObservers = (structureSetupElements, structureSetupUpd
});
};
const onTrinsicChanged = heightIntrinsic => {
structureSetupUpdate({
const onTrinsicChanged = heightIntrinsicCache => {
const [heightIntrinsic, heightIntrinsicChanged] = heightIntrinsicCache;
setState({
_heightIntrinsic: heightIntrinsic
});
structureSetupUpdate({
_heightIntrinsicChanged: heightIntrinsicChanged
});
};
const onSizeChanged = ({
@@ -2097,9 +2095,19 @@ const createStructureSetupObservers = (structureSetupElements, structureSetupUpd
_appear
}) => {
const updateFn = !_sizeChanged || _appear ? structureSetupUpdate : structureSetupUpdateWithDebouncedAdaptiveUpdateHints;
let directionChanged = false;
if (_directionIsRTLCache) {
const [directionIsRTL, directionIsRTLChanged] = _directionIsRTLCache;
directionChanged = directionIsRTLChanged;
setState({
_directionIsRTL: directionIsRTL
});
}
updateFn({
_sizeChanged,
_directionIsRTL: _directionIsRTLCache
_directionChanged: directionChanged
});
};
@@ -2183,14 +2191,6 @@ const initialStructureSetupUpdateState = {
l: 0
},
_paddingAbsolute: false,
_viewportOverflowScrollCache: [{
x: false,
y: false
}, false],
_viewportOverflowAmountCache: [{
w: 0,
h: 0
}, false],
_viewportPaddingStyle: {
marginRight: 0,
marginBottom: 0,
@@ -2199,7 +2199,17 @@ const initialStructureSetupUpdateState = {
paddingRight: 0,
paddingBottom: 0,
paddingLeft: 0
}
},
_viewportOverflowAmount: {
w: 0,
h: 0
},
_viewportOverflowScroll: {
x: false,
y: false
},
_heightIntrinsic: false,
_directionIsRTL: false
};
const createStructureSetup = (target, options) => {
const checkOptionsFallback = createOptionCheck(options, {});
@@ -2213,12 +2223,9 @@ const createStructureSetup = (target, options) => {
const [elements, destroyElements] = createStructureSetupElements(target);
const updateStructure = createStructureSetupUpdate(elements, state);
const [updateObservers, destroyObservers] = createStructureSetupObservers(elements, updateHints => {
const [updateObservers, destroyObservers] = createStructureSetupObservers(elements, state, updateHints => {
runOnUpdatedListeners(updateStructure(checkOptionsFallback, updateHints));
});
const removeEnvListener = getEnvironment()._addListener(updateStructure.bind(0, checkOptionsFallback, {}, true));
const structureSetupState = getUpdateState.bind(0);
structureSetupState._addOnUpdatedListener = listener => {
@@ -2232,7 +2239,6 @@ const createStructureSetup = (target, options) => {
runOnUpdatedListeners(updateStructure(checkOption, {}, force));
}, structureSetupState, () => {
onUpdatedListeners.clear();
removeEnvListener();
destroyObservers();
destroyElements();
}];
@@ -2305,6 +2311,35 @@ const addPlugin = addedPlugin => each(isArray(addedPlugin) ? addedPlugin : [adde
pluginRegistry[plugin[0]] = plugin[1];
});
function getDefaultExportFromCjs (x) {
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
}
var _extends = {exports: {}};
(function (module) {
function _extends() {
module.exports = _extends = Object.assign ? Object.assign.bind() : function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
}, module.exports.__esModule = true, module.exports["default"] = module.exports;
return _extends.apply(this, arguments);
}
module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
})(_extends);
getDefaultExportFromCjs(_extends.exports);
const templateTypePrefixSuffix = ['__TPL_', '_TYPE__'];
const optionsTemplateTypes = ['boolean', 'number', 'string', 'array', 'object', 'function', 'null'].reduce((result, item) => {
result[item] = templateTypePrefixSuffix[0] + item + templateTypePrefixSuffix[1];
@@ -2383,7 +2418,8 @@ const createOverflowChangedArgs = (overflowAmount, overflowScroll) => ({
const OverlayScrollbars = (target, options, eventListeners) => {
const {
_getDefaultOptions,
_nativeScrollbarIsOverlaid
_nativeScrollbarIsOverlaid,
_addListener: addEnvListener
} = getEnvironment();
const plugins = getPlugins();
const instanceTarget = isHTMLElement(target) ? target : target.target;
@@ -2418,31 +2454,39 @@ const OverlayScrollbars = (target, options, eventListeners) => {
structureState._addOnUpdatedListener((updateHints, changedOptions, force) => {
const {
_viewportOverflowAmountCache: overflowAmountCache,
_viewportOverflowScrollCache: overflowScrollCache
_sizeChanged,
_contentMutation,
_hostMutation,
_directionChanged,
_heightIntrinsicChanged,
_overflowAmountChanged,
_overflowScrollChanged
} = updateHints;
const {
_viewportOverflowAmount,
_viewportOverflowScroll
} = structureState();
const [overflowAmount, overflowAmountChanged, prevOverflowAmount] = overflowAmountCache;
const [overflowScroll, overflowScrollChanged, prevOverflowScroll] = overflowScrollCache;
if (overflowAmountChanged || overflowScrollChanged) {
triggerEvent('overflowChanged', assignDeep({}, createOverflowChangedArgs(overflowAmount, overflowScroll), {
previous: createOverflowChangedArgs(prevOverflowAmount, prevOverflowScroll)
if (_overflowAmountChanged || _overflowScrollChanged) {
triggerEvent('overflowChanged', assignDeep({}, createOverflowChangedArgs(_viewportOverflowAmount, _viewportOverflowScroll), {
previous: createOverflowChangedArgs(_viewportOverflowAmount, _viewportOverflowScroll)
}));
}
triggerEvent('updated', {
updateHints: {
sizeChanged: updateHints._sizeChanged,
contentMutation: updateHints._contentMutation,
hostMutation: updateHints._hostMutation,
directionChanged: updateHints._directionIsRTL[1],
heightIntrinsicChanged: updateHints._heightIntrinsic[1]
sizeChanged: _sizeChanged,
contentMutation: _contentMutation,
hostMutation: _hostMutation,
directionChanged: _directionChanged,
heightIntrinsicChanged: _heightIntrinsicChanged
},
changedOptions,
force
});
});
const removeEnvListener = addEnvListener(update.bind(0, {}, true));
const instance = {
options(newOptions) {
if (newOptions) {
@@ -2460,7 +2504,7 @@ const OverlayScrollbars = (target, options, eventListeners) => {
on: addEvent,
off: removeEvent,
state: () => ({
_overflowAmount: structureState()._viewportOverflowAmountCache[0]
_overflowAmount: structureState()._viewportOverflowAmount
}),
update(force) {
@@ -2469,6 +2513,7 @@ const OverlayScrollbars = (target, options, eventListeners) => {
destroy: () => {
removeInstance(instanceTarget);
removeEnvListener();
removeEvent();
destroyScrollbars();
destroyStructure();
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
+331 -285
View File
File diff suppressed because it is too large Load Diff
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/environment.ts
+19 -9
View File
@@ -3,6 +3,7 @@ import {
addClass,
style,
appendChildren,
fractionalSize,
clientSize,
absoluteCoordinates,
offsetSize,
@@ -105,27 +106,33 @@ const diffBiggerThanOne = (valOne: number, valTwo: number): boolean => {
return !(absValOne === absValTwo || absValOne + 1 === absValTwo || absValOne - 1 === absValTwo);
};
const getNativeScrollbarSize = (body: HTMLElement, measureElm: HTMLElement): XY => {
const getNativeScrollbarSize = (
body: HTMLElement,
measureElm: HTMLElement,
measureElmChild: HTMLElement
): XY => {
appendChildren(body, measureElm);
const cSize = clientSize(measureElm);
const oSize = offsetSize(measureElm);
const fSize = fractionalSize(measureElmChild);
return {
x: oSize.h - cSize.h,
y: oSize.w - cSize.w,
x: oSize.h - cSize.h + fSize.h,
y: oSize.w - cSize.w + fSize.w,
};
};
const getNativeScrollbarStyling = (testElm: HTMLElement): boolean => {
let result = false;
addClass(testElm, classNameViewportScrollbarStyling);
const revertClass = addClass(testElm, classNameViewportScrollbarStyling);
try {
result =
style(testElm, cssProperty('scrollbar-width')) === 'none' ||
window.getComputedStyle(testElm, '::-webkit-scrollbar').getPropertyValue('display') ===
'none';
} catch (ex) {}
revertClass();
return result;
};
@@ -160,16 +167,19 @@ const getRtlScrollBehavior = (
};
const getFlexboxGlue = (parentElm: HTMLElement, childElm: HTMLElement): boolean => {
addClass(parentElm, classNameEnvironmentFlexboxGlue);
const revertFbxGlue = addClass(parentElm, classNameEnvironmentFlexboxGlue);
const minOffsetsizeParent = getBoundingClientRect(parentElm);
const minOffsetsize = getBoundingClientRect(childElm);
const supportsMin = equalBCRWH(minOffsetsize, minOffsetsizeParent, true);
addClass(parentElm, classNameEnvironmentFlexboxGlueMax);
const revertFbxGlueMax = addClass(parentElm, classNameEnvironmentFlexboxGlueMax);
const maxOffsetsizeParent = getBoundingClientRect(parentElm);
const maxOffsetsize = getBoundingClientRect(childElm);
const supportsMax = equalBCRWH(maxOffsetsize, maxOffsetsizeParent, true);
revertFbxGlue();
revertFbxGlueMax();
return supportsMin && supportsMax;
};
@@ -200,7 +210,7 @@ const createEnvironment = (): Environment => {
const envChildElm = envElm.firstChild as HTMLElement;
const onChangedListener: Set<OnEnvironmentChanged> = new Set();
const [updateNativeScrollbarSizeCache, getNativeScrollbarSizeCache] = createCache({
_initialValue: getNativeScrollbarSize(body, envElm),
_initialValue: getNativeScrollbarSize(body, envElm, envChildElm),
_equal: equalXY,
});
const [nativeScrollbarSize] = getNativeScrollbarSizeCache();
@@ -276,7 +286,7 @@ const createEnvironment = (): Environment => {
if (isZoom) {
const [scrollbarSize, scrollbarSizeChanged] = updateNativeScrollbarSizeCache(
getNativeScrollbarSize(body, envElm)
getNativeScrollbarSize(body, envElm, envChildElm)
);
assignDeep(environmentInstance._nativeScrollbarSize, scrollbarSize); // keep the object same!
packages/overlayscrollbars/src/setups/structureSetup/updateSegments/overflowUpdateSegment.ts
+15 -28
View File
@@ -6,6 +6,7 @@ import {
XY,
style,
scrollSize,
fractionalSize,
CacheValues,
equalWH,
addClass,
@@ -42,16 +43,6 @@ const xyCacheOptions = {
_equal: equalXY,
_initialValue: { x: false, y: false },
};
const getSizeFraction = (elm: HTMLElement): WH<number> => {
const cssHeight = parseFloat(style(elm, 'height'));
const cssWidth = parseFloat(style(elm, 'height'));
return {
w: cssWidth - round(cssWidth),
h: cssHeight - round(cssHeight),
};
};
const fractionalPixelRatioTollerance = () => (window.devicePixelRatio % 1 === 0 ? 0 : 1);
const setAxisOverflowStyle = (
horizontal: boolean,
overflowAmount: number,
@@ -80,23 +71,19 @@ const setAxisOverflowStyle = (
const getOverflowAmount = (
viewportScrollSize: WH<number>,
viewportClientSize: WH<number>,
viewportSizeFraction: WH<number>
) => ({
w: max(
0,
round(
max(0, viewportScrollSize.w - viewportClientSize.w) -
(fractionalPixelRatioTollerance() || max(0, viewportSizeFraction.w))
)
),
h: max(
0,
round(
max(0, viewportScrollSize.h - viewportClientSize.h) -
(fractionalPixelRatioTollerance() || max(0, viewportSizeFraction.h))
)
),
});
sizeFraction: WH<number>
) => {
const condition = (raw: number) => (window.devicePixelRatio % 2 !== 0 ? raw > 1 : raw > 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,
};
};
/**
* Lifecycle with the responsibility to set the correct overflow and scrollbar hiding styles of the viewport element.
@@ -120,7 +107,7 @@ export const createOverflowUpdate: CreateStructureUpdateSegment = (
const [updateSizeFraction, getCurrentSizeFraction] = createCache<WH<number>>(
whCacheOptions,
getSizeFraction.bind(0, _host)
fractionalSize.bind(0, _host)
);
const [updateViewportScrollSizeCache, getCurrentViewportScrollSizeCache] = createCache<
packages/overlayscrollbars/src/support/dom/class.ts
+14 -9
View File
@@ -30,15 +30,6 @@ const classListAction = (
export const hasClass = (elm: Element | false | null | undefined, className: string): boolean =>
classListAction(elm, className, (classList, clazz) => classList.contains(clazz));
/**
* Adds the given class name(s) to the given element.
* @param elm The element.
* @param className The class name(s) which shall be added. (separated by spaces)
*/
export const addClass = (elm: Element | false | null | undefined, className: string): void => {
classListAction(elm, className, (classList, clazz) => classList.add(clazz));
};
/**
* Removes the given class name(s) from the given element.
* @param elm The element.
@@ -48,6 +39,20 @@ export const removeClass = (elm: Element | false | null | undefined, className:
classListAction(elm, className, (classList, clazz) => classList.remove(clazz));
};
/**
* Adds the given class name(s) to the given element.
* @param elm The element.
* @param className The class name(s) which shall be added. (separated by spaces)
* @returns A function which removes the added class name(s).
*/
export const addClass = (
elm: Element | false | null | undefined,
className: string
): (() => void) => {
classListAction(elm, className, (classList, clazz) => classList.add(clazz));
return removeClass.bind(0, elm, className);
};
/**
* Takes two className strings, compares them and returns the difference as array.
* @param classNameA ClassName A.
packages/overlayscrollbars/src/support/dom/dimensions.ts
+15
View File
@@ -1,3 +1,5 @@
import { style } from 'support/dom/style';
export interface WH<T = number> {
w: T;
h: T;
@@ -54,6 +56,19 @@ export const scrollSize = (elm: HTMLElement | null | undefined): WH =>
}
: zeroObj;
/**
* 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: HTMLElement | null | undefined): WH => {
const cssHeight = parseFloat(style(elm, 'height')) || 0;
const cssWidth = parseFloat(style(elm, 'height')) || 0;
return {
w: cssWidth - Math.round(cssWidth),
h: cssHeight - Math.round(cssHeight),
};
};
/**
* Returns the BoundingClientRect of the passed element.
* @param elm The element of which the BoundingClientRect shall be returned.
packages/overlayscrollbars/tests/jest/support/dom/class.test.ts
+9 -2
View File
@@ -27,14 +27,21 @@ describe('dom class names', () => {
});
test('single', () => {
addClass(testElm, 'test-class');
const remove = addClass(testElm, 'test-class');
expect(hasClassName('test-class')).toBe(true);
remove();
expect(hasClassName('test-class')).toBe(false);
});
test('multiple', () => {
addClass(testElm, 'test-class test-class2');
const remove = addClass(testElm, 'test-class test-class2');
expect(hasClassName('test-class')).toBe(true);
expect(hasClassName('test-class2')).toBe(true);
remove();
expect(hasClassName('test-class')).toBe(false);
expect(hasClassName('test-class2')).toBe(false);
});
test('null', () => {
packages/overlayscrollbars/tests/jest/support/dom/dimensions.test.ts
+25 -1
View File
@@ -1,6 +1,14 @@
import { isNumber, isPlainObject } from 'support/utils/types';
import { createDiv } from 'support/dom/create';
import { windowSize, offsetSize, clientSize, scrollSize, getBoundingClientRect, hasDimensions } from 'support/dom/dimensions';
import {
windowSize,
offsetSize,
clientSize,
scrollSize,
fractionalSize,
getBoundingClientRect,
hasDimensions,
} from 'support/dom/dimensions';
describe('dom dimensions', () => {
describe('offsetSize', () => {
@@ -51,6 +59,22 @@ describe('dom dimensions', () => {
});
});
describe('fractionalSize', () => {
test('DOM element', () => {
const result = fractionalSize(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);
expect(isPlainObject(result)).toBe(true);
expect(isNumber(result.w)).toBe(true);
expect(isNumber(result.h)).toBe(true);
});
});
test('windowSize', () => {
const result = windowSize();
expect(isPlainObject(result)).toBe(true);
packages/overlayscrollbars/tests/playwright/lifecycles/structureLifecycle/index.browser.ts
+74 -122
View File
@@ -21,12 +21,12 @@ import { timeout } from '@/testing-browser/timeout';
interface Metrics {
offset: {
left: string | number;
top: string | number;
left: number;
top: number;
};
size: {
width: string | number;
height: string | number;
width: number;
height: number;
};
scroll: {
width: number;
@@ -37,12 +37,12 @@ interface Metrics {
y: boolean;
};
percentElm: {
width: string | number;
height: string | number;
width: number;
height: number;
};
endElm: {
width: string | number;
height: string | number;
width: number;
height: number;
};
}
@@ -60,48 +60,55 @@ const getMetrics = (elm: HTMLElement): Metrics => {
const comparisonBCR = getBoundingClientRect(elm!);
const comparisonPercentBCR = getBoundingClientRect(elm!.querySelector('.percent')!);
const comparisonEndBCR = getBoundingClientRect(elm!.querySelector('.end')!);
const targetViewport = target!.querySelector<HTMLElement>('.os-viewport');
const scrollMeasure = () => {
const condition = (raw: number) => (window.devicePixelRatio % 2 !== 0 ? raw > 1 : raw > 0);
const amount = {
width: Math.max(0, comparison!.scrollWidth - comparison!.clientWidth),
height: Math.max(0, comparison!.scrollHeight - comparison!.clientHeight),
};
return {
width: condition(amount.width) ? amount.width : 0,
height: condition(amount.height) ? amount.height : 0,
};
};
const scrollMeasure = (elm: HTMLElement) => ({
width: Math.max(0, elm!.scrollWidth - elm!.clientWidth),
height: Math.max(0, elm!.scrollHeight - elm!.clientHeight),
});
const hasOverflow = (elm: HTMLElement) => {
const measure = scrollMeasure(elm);
return elmIsTarget
const results = {
offset: {
left: parseFloat(
(comparisonBCR.left - comparisonEnvBCR.left).toFixed(
Math.min(fixedDigitsOffset, fixedDigits)
)
),
top: parseFloat(
(comparisonBCR.top - comparisonEnvBCR.top).toFixed(Math.min(fixedDigitsOffset, fixedDigits))
),
},
size: {
width: parseFloat(comparisonBCR.width.toFixed(fixedDigits)),
height: parseFloat(comparisonBCR.height.toFixed(fixedDigits)),
},
scroll: elmIsTarget
? {
width: Math.round(osInstance.state()._overflowAmount.w),
height: Math.round(osInstance.state()._overflowAmount.h),
}
: scrollMeasure(),
hasOverflow: elmIsTarget
? {
x: osInstance.state()._overflowAmount.w > 0,
y: osInstance.state()._overflowAmount.h > 0,
}
: {
x: measure.width > 0,
y: measure.height > 0,
};
};
const results = {
offset: {
left: (comparisonBCR.left - comparisonEnvBCR.left).toFixed(
Math.min(fixedDigitsOffset, fixedDigits)
),
top: (comparisonBCR.top - comparisonEnvBCR.top).toFixed(
Math.min(fixedDigitsOffset, fixedDigits)
),
},
size: {
width: comparisonBCR.width.toFixed(fixedDigits),
height: comparisonBCR.height.toFixed(fixedDigits),
},
scroll: elmIsTarget ? scrollMeasure(targetViewport!) : scrollMeasure(comparison!),
hasOverflow: elmIsTarget ? hasOverflow(targetViewport!) : hasOverflow(comparison!),
x: scrollMeasure().width > 0,
y: scrollMeasure().height > 0,
},
percentElm: {
width: comparisonPercentBCR.width.toFixed(fixedDigits),
height: comparisonPercentBCR.height.toFixed(fixedDigits),
width: parseFloat(comparisonPercentBCR.width.toFixed(fixedDigits)),
height: parseFloat(comparisonPercentBCR.height.toFixed(fixedDigits)),
},
endElm: {
width: comparisonEndBCR.width.toFixed(fixedDigits),
height: comparisonEndBCR.height.toFixed(fixedDigits),
width: parseFloat(comparisonEndBCR.width.toFixed(fixedDigits)),
height: parseFloat(comparisonEndBCR.height.toFixed(fixedDigits)),
},
};
@@ -121,14 +128,6 @@ const metricsDimensionsEqual = (a: Metrics, b: Metrics) => {
return JSON.stringify(aDimensions) === JSON.stringify(bDimensions);
};
const plusMinusArr = (original: number, plusMinus: number) => {
const arr = Array.from(Array(plusMinus).keys())
.map((_, index) => original + (index + 1))
.concat(Array.from(Array(plusMinus).keys()).map((_, index) => original - (index + 1)));
arr.push(original);
return arr;
};
// @ts-ignore
const msie11 = !!window.MSInputMethodContext && !!document.documentMode;
const msedge = window.navigator.userAgent.toLowerCase().indexOf('edge') > -1;
@@ -138,7 +137,6 @@ msie11 && addClass(document.body, 'msie11');
const useContentElement = false;
const fixedDigits = msie11 ? 1 : 3;
const fixedDigitsOffset = 3;
const fractionalPixelRatioTollerance = 2; // nss=true && any overlaid ? 2 : 1;
const startBtn: HTMLButtonElement | null = document.querySelector('#start');
const target: HTMLElement | null = document.querySelector('#target');
@@ -245,79 +243,27 @@ const checkMetrics = async (checkComparison: CheckComparisonObj) => {
const targetMetrics = getMetrics(target!);
const targetViewport = target!.querySelector<HTMLElement>('.os-viewport');
should.equal(targetMetrics.offset.left, comparisonMetrics.offset.left, 'Offset left equality.');
should.equal(targetMetrics.offset.top, comparisonMetrics.offset.top, 'Offset top equality.');
should.equal(
targetMetrics.scroll.width,
comparisonMetrics.scroll.width,
`Scroll width equality. (${osInstance.state()._overflowAmount.w})`
);
should.equal(
targetMetrics.scroll.height,
comparisonMetrics.scroll.height,
`Scroll height equality. (${osInstance.state()._overflowAmount.h})`
);
should.equal(targetMetrics.size.width, comparisonMetrics.size.width, 'Size width equality.');
should.equal(targetMetrics.size.height, comparisonMetrics.size.height, 'Size height equality.');
console.log(comparisonMetrics, osInstance.state()._overflowAmount.h);
if (isFractionalPixelRatio()) {
should.ok(
plusMinusArr(targetMetrics.scroll.width, fractionalPixelRatioTollerance).indexOf(
comparisonMetrics.scroll.width
) > -1,
`Scroll width equality. (+-${fractionalPixelRatioTollerance}) | Target: ${targetMetrics.scroll.width} | Comparison: ${comparisonMetrics.scroll.width}`
);
should.ok(
plusMinusArr(targetMetrics.scroll.height, fractionalPixelRatioTollerance).indexOf(
comparisonMetrics.scroll.height
) > -1,
`Scroll height equality. (+-${fractionalPixelRatioTollerance}) | Target: ${targetMetrics.scroll.height} | Comparison: ${comparisonMetrics.scroll.height}`
);
should.ok(
plusMinusArr(osInstance.state()._overflowAmount.w, fractionalPixelRatioTollerance).indexOf(
comparisonMetrics.scroll.width
) > -1,
`Overflow amount width equality. (+-${fractionalPixelRatioTollerance}) | Amount: ${
osInstance.state()._overflowAmount.w
} | Comparison: ${comparisonMetrics.scroll.width}`
);
should.ok(
plusMinusArr(osInstance.state()._overflowAmount.h, fractionalPixelRatioTollerance).indexOf(
comparisonMetrics.scroll.height
) > -1,
`Overflow amount height equality. (+-${fractionalPixelRatioTollerance}) | Amount: ${
osInstance.state()._overflowAmount.h
} | Comparison: ${comparisonMetrics.scroll.height}`
);
} else {
/*
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.'
);
should.equal(
targetMetrics.hasOverflow.x,
comparisonMetrics.hasOverflow.x,
'Has overflow x equality.'
);
should.equal(
targetMetrics.hasOverflow.y,
comparisonMetrics.hasOverflow.y,
'Has overflow y equality.'
);
}
should.equal(
targetMetrics.hasOverflow.x,
comparisonMetrics.hasOverflow.x,
'Has overflow x equality.'
);
should.equal(
targetMetrics.hasOverflow.y,
comparisonMetrics.hasOverflow.y,
'Has overflow y equality.'
);
if (targetMetrics.hasOverflow.x) {
should.equal(
@@ -365,6 +311,12 @@ const checkMetrics = async (checkComparison: CheckComparisonObj) => {
);
}
should.equal(targetMetrics.offset.left, comparisonMetrics.offset.left, 'Offset left equality.');
should.equal(targetMetrics.offset.top, comparisonMetrics.offset.top, 'Offset top equality.');
should.equal(targetMetrics.size.width, comparisonMetrics.size.width, 'Size width equality.');
should.equal(targetMetrics.size.height, comparisonMetrics.size.height, 'Size height equality.');
should.equal(
targetMetrics.percentElm.width,
comparisonMetrics.percentElm.width,
packages/overlayscrollbars/tests/playwright/lifecycles/structureLifecycle/index.test.ts
+1 -1
View File
@@ -14,7 +14,7 @@ test.describe('StructureLifecycle', () => {
}
};
test.describe(`structureLifecycles ${withText} native scrollbar styling`, () => {
test.describe(`${withText} native scrollbar styling`, () => {
test.describe.configure({ mode: 'parallel' });
test('default', async ({ page }) => {
playwright.config.base.js
+1
View File
@@ -6,6 +6,7 @@ module.exports = {
actionTimeout: 300,
navigationTimeout: 1000,
retries: 0,
workers: 4,
projects: [
{
name: 'Chromium',