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

optimization and build

Browse Source
This commit is contained in:
Rene
2021-05-08 15:54:26 +02:00
parent f04eaff64d
commit 853f4d9366
14 changed files with 401 additions and 378 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/overlayscrollbars/dist/overlayscrollbars.esm.js
Vendored
+153 -129
View File
@@ -333,8 +333,29 @@ const createDOM = (html) => {
};
const firstLetterToUpper = (str) => str.charAt(0).toUpperCase() + str.slice(1);
const getDummyStyle = () => createDiv().style;
const cssPrefixes = ['-webkit-', '-moz-', '-o-', '-ms-'];
const jsPrefixes = ['WebKit', 'Moz', 'O', 'MS', 'webkit', 'moz', 'o', 'ms'];
const jsCache = {};
const cssCache = {};
const cssProperty = (name) => {
let result = cssCache[name];
if (hasOwnProperty$1(cssCache, name)) {
return result;
}
const uppercasedName = firstLetterToUpper(name);
const elmStyle = getDummyStyle();
each(cssPrefixes, (prefix) => {
const prefixWithoutDashes = prefix.replace(/-/g, '');
const resultPossibilities = [name, prefix + name, prefixWithoutDashes + uppercasedName, firstLetterToUpper(prefixWithoutDashes) + uppercasedName];
return !(result = resultPossibilities.find((resultPossibility) => elmStyle[resultPossibility] !== undefined));
});
return (cssCache[name] = result || '');
};
const jsAPI = (name) => {
let result = jsCache[name] || window[name];
@@ -797,6 +818,9 @@ const defaultOptionsWithTemplate = {
show: booleanFalseTemplate,
initialize: booleanFalseTemplate,
},
callbacks: {
onUpdated: [null, [optionsTemplateTypes.function, optionsTemplateTypes.null]],
},
};
const { _template: optionsTemplate, _options: defaultOptions } = transformOptions(defaultOptionsWithTemplate);
@@ -819,6 +843,19 @@ const getNativeScrollbarSize = (body, measureElm) => {
};
};
const getNativeScrollbarStyling = (testElm) => {
let result = false;
addClass(testElm, classNameViewportScrollbarStyling);
try {
result =
style(testElm, cssProperty('scrollbar-width')) === 'none' ||
window.getComputedStyle(testElm, '::-webkit-scrollbar').getPropertyValue('display') === 'none';
} catch (ex) {}
return result;
};
const getRtlScrollBehavior = (parentElm, childElm) => {
const strHidden = 'hidden';
style(parentElm, {
@@ -867,7 +904,7 @@ const createEnvironment = () => {
const envChildElm = envElm.firstChild;
const onChangedListener = new Set();
const nativeScrollbarSize = getNativeScrollbarSize(body, envElm);
const nativeScrollbarStyling = false;
const nativeScrollbarStyling = getNativeScrollbarStyling(envElm);
const nativeScrollbarIsOverlaid = {
x: nativeScrollbarSize.x === 0,
y: nativeScrollbarSize.y === 0,
@@ -909,7 +946,7 @@ const createEnvironment = () => {
removeAttr(envElm, 'style');
removeElements(envElm);
if (!nativeScrollbarIsOverlaid.x || !nativeScrollbarIsOverlaid.y) {
if (!nativeScrollbarStyling && (!nativeScrollbarIsOverlaid.x || !nativeScrollbarIsOverlaid.y)) {
let size = windowSize();
let dpr = getWindowDPR();
let scrollbarSize = nativeScrollbarSize;
@@ -1141,58 +1178,48 @@ const createPaddingLifecycle = (lifecycleHub) => {
const { _host, _padding, _viewport } = _structureSetup._targetObj;
const { _update: updatePaddingCache, _current: currentPaddingCache } = createCache(() => topRightBottomLeft(_host, 'padding'), {
_equal: equalTRBL,
_initialValue: topRightBottomLeft(),
});
return (updateHints, checkOption, force) => {
let { _value: padding, _changed: paddingChanged } = currentPaddingCache(force);
const { _nativeScrollbarStyling } = getEnvironment();
const { _sizeChanged, _directionIsRTL } = updateHints;
const { _nativeScrollbarStyling, _flexboxGlue } = getEnvironment();
const { _sizeChanged, _directionIsRTL, _contentMutation } = updateHints;
const { _value: directionIsRTL, _changed: directionChanged } = _directionIsRTL;
const { _value: paddingAbsolute, _changed: paddingAbsoluteChanged } = checkOption('paddingAbsolute');
const contentMutation = !_flexboxGlue && _contentMutation;
if (_sizeChanged || paddingChanged) {
if (_sizeChanged || paddingChanged || contentMutation) {
({ _value: padding, _changed: paddingChanged } = updatePaddingCache(force));
}
const paddingStyleChanged = paddingAbsoluteChanged || directionChanged || paddingChanged;
if (paddingStyleChanged) {
const { _value: _padding2 } = updatePaddingCache(force);
const paddingRelative = !paddingAbsolute || (!_padding && !_nativeScrollbarStyling);
const paddingHorizontal = _padding2.r + _padding2.l;
const paddingVertical = _padding2.t + _padding2.b;
const paddingHorizontal = padding.r + padding.l;
const paddingVertical = padding.t + padding.b;
const paddingStyle = {
marginTop: 0,
marginRight: 0,
marginRight: paddingRelative && !directionIsRTL ? -paddingHorizontal : 0,
marginBottom: paddingRelative ? -paddingVertical : 0,
marginLeft: 0,
top: paddingRelative ? -_padding2.t : 0,
right: 0,
bottom: 0,
left: 0,
maxWidth: paddingRelative ? `calc(100% + ${paddingHorizontal}px)` : '',
marginLeft: paddingRelative && directionIsRTL ? -paddingHorizontal : 0,
top: paddingRelative ? -padding.t : 0,
right: paddingRelative ? (directionIsRTL ? -padding.r : 'auto') : 0,
left: paddingRelative ? (directionIsRTL ? 'auto' : -padding.l) : 0,
width: paddingRelative ? `calc(100% + ${paddingHorizontal}px)` : '',
};
const viewportStyle = {
paddingTop: paddingRelative ? _padding2.t : 0,
paddingRight: paddingRelative ? _padding2.r : 0,
paddingBottom: paddingRelative ? _padding2.b : 0,
paddingLeft: paddingRelative ? _padding2.l : 0,
paddingTop: paddingRelative ? padding.t : 0,
paddingRight: paddingRelative ? padding.r : 0,
paddingBottom: paddingRelative ? padding.b : 0,
paddingLeft: paddingRelative ? padding.l : 0,
};
if (paddingRelative) {
const horizontalPositionKey = directionIsRTL ? 'right' : 'left';
const horizontalMarginKey = directionIsRTL ? 'marginLeft' : 'marginRight';
const horizontalPositionValue = directionIsRTL ? _padding2.r : _padding2.l;
paddingStyle[horizontalPositionKey] = -horizontalPositionValue;
paddingStyle[horizontalMarginKey] = -paddingHorizontal;
}
style(_padding || _viewport, paddingStyle);
style(_viewport, viewportStyle);
_setLifecycleCommunication({
_paddingInfo: {
_absolute: !paddingRelative,
_padding: _padding2,
_padding: padding,
},
_viewportPaddingStyle: _padding ? viewportStyle : _extends_1({}, paddingStyle, viewportStyle),
});
@@ -1204,35 +1231,65 @@ const createPaddingLifecycle = (lifecycleHub) => {
};
};
const { max, abs: abs$1, round: round$1 } = Math;
const overlaidScrollbarsHideOffset = 42;
const whCacheOptions = {
_equal: equalWH,
_initialValue: {
w: 0,
h: 0,
},
};
const sizeFraction = (elm) => {
const viewportOffsetSize = offsetSize(elm);
const viewportRect = getBoundingClientRect(elm);
return {
w: viewportRect.width - viewportOffsetSize.w,
h: viewportRect.height - viewportOffsetSize.h,
};
};
const setAxisOverflowStyle = (horizontal, overflowAmount, behavior, styleObj) => {
const overflowKey = horizontal ? 'overflowX' : 'overflowY';
const behaviorIsVisible = behavior.indexOf('visible') === 0;
const behaviorIsVisibleHidden = behavior === 'visible-hidden';
const behaviorIsScroll = behavior === 'scroll';
const hasOverflow = overflowAmount > 0;
if (behaviorIsVisible) {
styleObj[overflowKey] = 'visible';
}
if (behaviorIsScroll && hasOverflow) {
styleObj[overflowKey] = behavior;
}
return {
_visible: behaviorIsVisible,
_behavior: behaviorIsVisibleHidden ? 'hidden' : 'scroll',
};
};
const createOverflowLifecycle = (lifecycleHub) => {
const { _structureSetup, _doViewportArrange, _getLifecycleCommunication, _setLifecycleCommunication } = lifecycleHub;
const { _host, _viewport, _viewportArrange } = _structureSetup._targetObj;
const { _update: updateContentScrollSizeCache, _current: getCurrentContentScrollSizeCache } = createCache(
(ctx) => fixScrollSizeRounding(ctx._viewportScrollSize, ctx._viewportOffsetSize, ctx._viewportRect),
{
_equal: equalWH,
}
const { _update: updateViewportSizeFraction, _current: getCurrentViewportSizeFraction } = createCache(
() => sizeFraction(_viewport),
whCacheOptions
);
const { _update: updateViewportScrollSizeCache, _current: getCurrentViewportScrollSizeCache } = createCache(
() => scrollSize(_viewport),
whCacheOptions
);
const { _update: updateOverflowAmountCache, _current: getCurrentOverflowAmountCache } = createCache(
(ctx) => ({
w: Math.max(0, ctx._contentScrollSize.w - ctx._viewportSize.w),
h: Math.max(0, ctx._contentScrollSize.h - ctx._viewportSize.h),
({ _viewportScrollSize, _viewportClientSize, _viewportSizeFraction }) => ({
w: round$1(max(0, _viewportScrollSize.w - _viewportClientSize.w) - max(0, _viewportSizeFraction.w)),
h: round$1(max(0, _viewportScrollSize.h - _viewportClientSize.h) - max(0, _viewportSizeFraction.h)),
}),
{
_equal: equalWH,
_initialValue: {
w: 0,
h: 0,
},
}
whCacheOptions
);
const fixScrollSizeRounding = (viewportScrollSize, viewportOffsetSize, viewportRect) => ({
w: viewportScrollSize.w - Math.round(Math.max(0, viewportRect.width - viewportOffsetSize.w)),
h: viewportScrollSize.h - Math.round(Math.max(0, viewportRect.height - viewportOffsetSize.h)),
});
const fixFlexboxGlue = (viewportOverflowState, heightIntrinsic) => {
style(_viewport, {
height: '',
@@ -1242,13 +1299,12 @@ const createOverflowLifecycle = (lifecycleHub) => {
const { _absolute: paddingAbsolute, _padding: padding } = _getLifecycleCommunication()._paddingInfo;
const { _overflowScroll, _scrollbarsHideOffset } = viewportOverflowState;
const hostBCR = getBoundingClientRect(_host);
const hostOffsetSize = offsetSize(_host);
const hostSizeFraction = sizeFraction(_host);
const hostClientSize = clientSize(_host);
const paddingVertical = paddingAbsolute || style(_viewport, 'boxSizing') === 'content-box' ? padding.b + padding.t : 0;
const clientSizeWithoutRounding = hostClientSize.h + (hostBCR.height - hostOffsetSize.h);
const fractionalcleintHeight = hostClientSize.h + (abs$1(hostSizeFraction.h) < 1 ? hostSizeFraction.h : 0);
style(_viewport, {
height: clientSizeWithoutRounding + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0) - paddingVertical,
height: fractionalcleintHeight + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0) - paddingVertical,
});
}
};
@@ -1278,28 +1334,8 @@ const createOverflowLifecycle = (lifecycleHub) => {
};
const setViewportOverflowState = (showNativeOverlaidScrollbars, overflowAmount, overflow, viewportStyleObj) => {
const setPartialStylePerAxis = (horizontal, overflowAmount, behavior, styleObj) => {
const overflowKey = horizontal ? 'overflowX' : 'overflowY';
const behaviorIsVisible = behavior.indexOf('visible') === 0;
const behaviorIsVisibleHidden = behavior === 'visible-hidden';
const behaviorIsScroll = behavior === 'scroll';
if (behaviorIsVisible) {
styleObj[overflowKey] = 'visible';
}
if (behaviorIsScroll && overflowAmount > 0) {
styleObj[overflowKey] = behavior;
}
return {
_visible: behaviorIsVisible,
_behavior: behaviorIsVisibleHidden ? 'hidden' : 'scroll',
};
};
const { _visible: xVisible, _behavior: xVisibleBehavior } = setPartialStylePerAxis(true, overflowAmount.w, overflow.x, viewportStyleObj);
const { _visible: yVisible, _behavior: yVisibleBehavior } = setPartialStylePerAxis(false, overflowAmount.h, overflow.y, 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);
if (xVisible && !yVisible) {
viewportStyleObj.overflowX = xVisibleBehavior;
@@ -1312,7 +1348,7 @@ const createOverflowLifecycle = (lifecycleHub) => {
return getViewportOverflowState(showNativeOverlaidScrollbars, viewportStyleObj);
};
const arrangeViewport = (viewportOverflowState, contentScrollSize, directionIsRTL) => {
const arrangeViewport = (viewportOverflowState, viewportScrollSize, viewportSizeFraction, directionIsRTL) => {
if (_doViewportArrange) {
const { _scrollbarsHideOffset, _scrollbarsHideOffsetArrange } = viewportOverflowState;
const { x: arrangeX, y: arrangeY } = _scrollbarsHideOffsetArrange;
@@ -1323,9 +1359,11 @@ const createOverflowLifecycle = (lifecycleHub) => {
const viewportArrangeHorizontalPaddingKey = directionIsRTL ? 'paddingRight' : 'paddingLeft';
const viewportArrangeHorizontalPaddingValue = viewportPaddingStyle[viewportArrangeHorizontalPaddingKey];
const viewportArrangeVerticalPaddingValue = viewportPaddingStyle.paddingTop;
const fractionalContentWidth = viewportScrollSize.w + (abs$1(viewportSizeFraction.w) < 1 ? viewportSizeFraction.w : 0);
const fractionalContenHeight = viewportScrollSize.h + (abs$1(viewportSizeFraction.h) < 1 ? viewportSizeFraction.h : 0);
const arrangeSize = {
w: hideOffsetY && arrangeY ? `${hideOffsetY + contentScrollSize.w - viewportArrangeHorizontalPaddingValue}px` : '',
h: hideOffsetX && arrangeX ? `${hideOffsetX + contentScrollSize.h - viewportArrangeVerticalPaddingValue}px` : '',
w: hideOffsetY && arrangeY ? `${hideOffsetY + fractionalContentWidth - viewportArrangeHorizontalPaddingValue}px` : '',
h: hideOffsetX && arrangeX ? `${hideOffsetX + fractionalContenHeight - viewportArrangeVerticalPaddingValue}px` : '',
};
if (_viewportArrange) {
@@ -1346,8 +1384,8 @@ const createOverflowLifecycle = (lifecycleHub) => {
}
} else {
style(_viewport, {
'--viewport-arrange-width': arrangeSize.w,
'--viewport-arrange-height': arrangeSize.h,
'--os-vaw': arrangeSize.w,
'--os-vah': arrangeSize.h,
});
}
}
@@ -1368,7 +1406,7 @@ const createOverflowLifecycle = (lifecycleHub) => {
const verticalMarginValue = viewportPaddingStyle.marginBottom;
const horizontalPaddingValue = viewportPaddingStyle[viewportHorizontalPaddingKey];
const verticalPaddingValue = viewportPaddingStyle.paddingBottom;
viewportStyleObj.maxWidth = `calc(100% + ${hideOffsetY + horizontalMarginValue * -1}px)`;
viewportStyleObj.width = `calc(100% + ${hideOffsetY + horizontalMarginValue * -1}px)`;
viewportStyleObj[horizontalMarginKey] = -hideOffsetY + horizontalMarginValue;
viewportStyleObj.marginBottom = -hideOffsetX + verticalMarginValue;
@@ -1399,7 +1437,7 @@ const createOverflowLifecycle = (lifecycleHub) => {
}
if (arrangeX) {
assignProps('marginTop marginBottom paddingTop paddingBottom');
assignProps('marginBottom paddingTop paddingBottom');
}
if (arrangeY) {
@@ -1435,8 +1473,9 @@ const createOverflowLifecycle = (lifecycleHub) => {
const showNativeOverlaidScrollbars = showNativeOverlaidScrollbarsOption && _nativeScrollbarIsOverlaid.x && _nativeScrollbarIsOverlaid.y;
const adjustFlexboxGlue =
!_flexboxGlue && (_sizeChanged || _contentMutation || _hostMutation || showNativeOverlaidScrollbarsChanged || heightIntrinsicChanged);
let viewportSizeFractionCache = getCurrentViewportSizeFraction(force);
let viewportScrollSizeCache = getCurrentViewportScrollSizeCache(force);
let overflowAmuntCache = getCurrentOverflowAmountCache(force);
let contentScrollSizeCache = getCurrentContentScrollSizeCache(force);
let preMeasureViewportOverflowState;
if (showNativeOverlaidScrollbarsChanged && _nativeScrollbarStyling) {
@@ -1458,48 +1497,48 @@ const createOverflowLifecycle = (lifecycleHub) => {
directionIsRTL,
preMeasureViewportOverflowState
);
const contentSize = clientSize(_viewport);
const viewportRect = getBoundingClientRect(_viewport);
const viewportOffsetSize = offsetSize(_viewport);
let viewportScrollSize = scrollSize(_viewport);
let viewportClientSize = contentSize;
const { _value: _contentScrollSize, _changed: _contentScrollSizeChanged } = (contentScrollSizeCache = updateContentScrollSizeCache(force, {
_viewportRect: viewportRect,
_viewportOffsetSize: viewportOffsetSize,
_viewportScrollSize: viewportScrollSize,
}));
const { _value: _viewportSizeFraction2, _changed: viewportSizeFractionCahnged } = (viewportSizeFractionCache = updateViewportSizeFraction(
force
));
const { _value: _viewportScrollSize2, _changed: _viewportScrollSizeChanged } = (viewportScrollSizeCache = updateViewportScrollSizeCache(force));
const viewportContentSize = clientSize(_viewport);
let arrangedViewportScrollSize = _viewportScrollSize2;
let arrangedViewportClientSize = viewportContentSize;
_redoViewportArrange();
if (
(_contentScrollSizeChanged || showNativeOverlaidScrollbarsChanged) &&
(_viewportScrollSizeChanged || viewportSizeFractionCahnged || showNativeOverlaidScrollbarsChanged) &&
undoViewportArrangeOverflowState &&
!showNativeOverlaidScrollbars &&
arrangeViewport(undoViewportArrangeOverflowState, _contentScrollSize, directionIsRTL)
arrangeViewport(undoViewportArrangeOverflowState, _viewportScrollSize2, _viewportSizeFraction2, directionIsRTL)
) {
viewportClientSize = clientSize(_viewport);
viewportScrollSize = fixScrollSizeRounding(scrollSize(_viewport), offsetSize(_viewport), getBoundingClientRect(_viewport));
arrangedViewportClientSize = clientSize(_viewport);
arrangedViewportScrollSize = scrollSize(_viewport);
}
overflowAmuntCache = updateOverflowAmountCache(force, {
_contentScrollSize: {
w: Math.max(_contentScrollSize.w, viewportScrollSize.w),
h: Math.max(_contentScrollSize.h, viewportScrollSize.h),
_viewportSizeFraction: _viewportSizeFraction2,
_viewportScrollSize: {
w: max(_viewportScrollSize2.w, arrangedViewportScrollSize.w),
h: max(_viewportScrollSize2.h, arrangedViewportScrollSize.h),
},
_viewportSize: {
w: viewportClientSize.w + Math.max(0, contentSize.w - _contentScrollSize.w),
h: viewportClientSize.h + Math.max(0, contentSize.h - _contentScrollSize.h),
_viewportClientSize: {
w: arrangedViewportClientSize.w + max(0, viewportContentSize.w - _viewportScrollSize2.w),
h: arrangedViewportClientSize.h + max(0, viewportContentSize.h - _viewportScrollSize2.h),
},
});
}
const { _value: overflow, _changed: overflowChanged } = checkOption('overflow');
const { _value: contentScrollSize, _changed: contentScrollSizeChanged } = contentScrollSizeCache;
const { _value: viewportSizeFraction, _changed: viewportSizeFractionChanged } = viewportSizeFractionCache;
const { _value: viewportScrollSize, _changed: viewportScrollSizeChanged } = viewportScrollSizeCache;
const { _value: overflowAmount, _changed: overflowAmountChanged } = overflowAmuntCache;
const { _value: overflow, _changed: overflowChanged } = checkOption('overflow');
if (
_paddingStyleChanged ||
contentScrollSizeChanged ||
viewportSizeFractionChanged ||
viewportScrollSizeChanged ||
overflowAmountChanged ||
overflowChanged ||
showNativeOverlaidScrollbarsChanged ||
@@ -1507,16 +1546,15 @@ const createOverflowLifecycle = (lifecycleHub) => {
adjustFlexboxGlue
) {
const viewportStyle = {
marginTop: 0,
marginRight: 0,
marginBottom: 0,
marginLeft: 0,
maxWidth: '',
width: '',
overflowY: '',
overflowX: '',
};
const viewportOverflowState = setViewportOverflowState(showNativeOverlaidScrollbars, overflowAmount, overflow, viewportStyle);
const viewportArranged = arrangeViewport(viewportOverflowState, contentScrollSize, directionIsRTL);
const viewportArranged = arrangeViewport(viewportOverflowState, viewportScrollSize, viewportSizeFraction, directionIsRTL);
hideNativeScrollbars(viewportOverflowState, directionIsRTL, viewportArranged, viewportStyle);
if (adjustFlexboxGlue) {
@@ -1940,13 +1978,6 @@ const createDOMObserver = (target, isContentObserver, callback, options) => {
const getPropByPath = (obj, path) =>
obj ? path.split('.').reduce((o, prop) => (o && hasOwnProperty$1(o, prop) ? o[prop] : undefined), obj) : undefined;
const emptyStylePropsToZero = (stlyeObj, baseStyle) =>
keys(stlyeObj).reduce((obj, key) => {
const value = stlyeObj[key];
obj[key] = value === '' ? 0 : value;
return obj;
}, _extends_1({}, baseStyle));
const ignorePrefix = 'os-';
const hostSelector = `.${classNameHost}`;
const viewportSelector = `.${classNameViewport}`;
@@ -1991,7 +2022,6 @@ const lifecycleCommunicationFallback = {
h: 0,
},
_viewportPaddingStyle: {
marginTop: 0,
marginRight: 0,
marginBottom: 0,
marginLeft: 0,
@@ -2012,7 +2042,6 @@ const createLifecycleHub = (options, structureSetup) => {
_removeListener: removeEnvironmentListener,
} = getEnvironment();
const doViewportArrange = !_nativeScrollbarStyling && (_nativeScrollbarIsOverlaid.x || _nativeScrollbarIsOverlaid.y);
const lifecycles = [];
const instance = {
_options: options,
_structureSetup: structureSetup,
@@ -2020,19 +2049,10 @@ const createLifecycleHub = (options, structureSetup) => {
_getLifecycleCommunication: () => lifecycleCommunication,
_setLifecycleCommunication(newLifecycleCommunication) {
if (newLifecycleCommunication && newLifecycleCommunication._viewportPaddingStyle) {
newLifecycleCommunication._viewportPaddingStyle = emptyStylePropsToZero(
newLifecycleCommunication._viewportPaddingStyle,
lifecycleCommunicationFallback._viewportPaddingStyle
);
}
lifecycleCommunication = assignDeep({}, lifecycleCommunication, newLifecycleCommunication);
},
};
push(lifecycles, createTrinsicLifecycle(instance));
push(lifecycles, createPaddingLifecycle(instance));
push(lifecycles, createOverflowLifecycle(instance));
const lifecycles = [createTrinsicLifecycle(instance), createPaddingLifecycle(instance), createOverflowLifecycle(instance)];
const updateLifecycles = (updateHints, changedOptions, force) => {
let {
@@ -2088,6 +2108,10 @@ const createLifecycleHub = (options, structureSetup) => {
if (isNumber(scrollOffsetY)) {
scrollTop(_viewport, scrollOffsetY);
}
if (options.callbacks.onUpdated) {
options.callbacks.onUpdated();
}
};
const onSizeChanged = (directionIsRTL) => {
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
+186 -156
View File
@@ -374,8 +374,33 @@
var firstLetterToUpper = function firstLetterToUpper(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
};
var getDummyStyle = function getDummyStyle() {
return createDiv().style;
};
var cssPrefixes = ['-webkit-', '-moz-', '-o-', '-ms-'];
var jsPrefixes = ['WebKit', 'Moz', 'O', 'MS', 'webkit', 'moz', 'o', 'ms'];
var jsCache = {};
var cssCache = {};
var cssProperty = function cssProperty(name) {
var result = cssCache[name];
if (hasOwnProperty$1(cssCache, name)) {
return result;
}
var uppercasedName = firstLetterToUpper(name);
var elmStyle = getDummyStyle();
each(cssPrefixes, function (prefix) {
var prefixWithoutDashes = prefix.replace(/-/g, '');
var resultPossibilities = [name, prefix + name, prefixWithoutDashes + uppercasedName, firstLetterToUpper(prefixWithoutDashes) + uppercasedName];
return !(result = resultPossibilities.find(function (resultPossibility) {
return elmStyle[resultPossibility] !== undefined;
}));
});
return (cssCache[name] = result || '');
};
var jsAPI = function jsAPI(name) {
var result = jsCache[name] || window[name];
@@ -887,6 +912,9 @@
show: booleanFalseTemplate,
initialize: booleanFalseTemplate,
},
callbacks: {
onUpdated: [null, [optionsTemplateTypes.function, optionsTemplateTypes.null]],
},
};
var _transformOptions = transformOptions(defaultOptionsWithTemplate),
@@ -913,6 +941,19 @@
};
};
var getNativeScrollbarStyling = function getNativeScrollbarStyling(testElm) {
var result = false;
addClass(testElm, classNameViewportScrollbarStyling);
try {
result =
style(testElm, cssProperty('scrollbar-width')) === 'none' ||
window.getComputedStyle(testElm, '::-webkit-scrollbar').getPropertyValue('display') === 'none';
} catch (ex) {}
return result;
};
var getRtlScrollBehavior = function getRtlScrollBehavior(parentElm, childElm) {
var strHidden = 'hidden';
style(parentElm, {
@@ -964,7 +1005,7 @@
var envChildElm = envElm.firstChild;
var onChangedListener = new Set();
var nativeScrollbarSize = getNativeScrollbarSize(body, envElm);
var nativeScrollbarStyling = false;
var nativeScrollbarStyling = getNativeScrollbarStyling(envElm);
var nativeScrollbarIsOverlaid = {
x: nativeScrollbarSize.x === 0,
y: nativeScrollbarSize.y === 0,
@@ -1003,7 +1044,7 @@
removeAttr(envElm, 'style');
removeElements(envElm);
if (!nativeScrollbarIsOverlaid.x || !nativeScrollbarIsOverlaid.y) {
if (!nativeScrollbarStyling && (!nativeScrollbarIsOverlaid.x || !nativeScrollbarIsOverlaid.y)) {
var size = windowSize();
var dpr = getWindowDPR();
var scrollbarSize = nativeScrollbarSize;
@@ -1258,6 +1299,7 @@
},
{
_equal: equalTRBL,
_initialValue: topRightBottomLeft(),
}
),
updatePaddingCache = _createCache._update,
@@ -1269,10 +1311,12 @@
paddingChanged = _currentPaddingCache._changed;
var _getEnvironment = getEnvironment(),
_nativeScrollbarStyling = _getEnvironment._nativeScrollbarStyling;
_nativeScrollbarStyling = _getEnvironment._nativeScrollbarStyling,
_flexboxGlue = _getEnvironment._flexboxGlue;
var _sizeChanged = updateHints._sizeChanged,
_directionIsRTL = updateHints._directionIsRTL;
_directionIsRTL = updateHints._directionIsRTL,
_contentMutation = updateHints._contentMutation;
var directionIsRTL = _directionIsRTL._value,
directionChanged = _directionIsRTL._changed;
@@ -1280,7 +1324,9 @@
paddingAbsolute = _checkOption._value,
paddingAbsoluteChanged = _checkOption._changed;
if (_sizeChanged || paddingChanged) {
var contentMutation = !_flexboxGlue && _contentMutation;
if (_sizeChanged || paddingChanged || contentMutation) {
var _updatePaddingCache = updatePaddingCache(force);
padding = _updatePaddingCache._value;
@@ -1290,45 +1336,31 @@
var paddingStyleChanged = paddingAbsoluteChanged || directionChanged || paddingChanged;
if (paddingStyleChanged) {
var _updatePaddingCache2 = updatePaddingCache(force),
_padding2 = _updatePaddingCache2._value;
var paddingRelative = !paddingAbsolute || (!_padding && !_nativeScrollbarStyling);
var paddingHorizontal = _padding2.r + _padding2.l;
var paddingVertical = _padding2.t + _padding2.b;
var paddingHorizontal = padding.r + padding.l;
var paddingVertical = padding.t + padding.b;
var paddingStyle = {
marginTop: 0,
marginRight: 0,
marginRight: paddingRelative && !directionIsRTL ? -paddingHorizontal : 0,
marginBottom: paddingRelative ? -paddingVertical : 0,
marginLeft: 0,
top: paddingRelative ? -_padding2.t : 0,
right: 0,
bottom: 0,
left: 0,
maxWidth: paddingRelative ? 'calc(100% + ' + paddingHorizontal + 'px)' : '',
marginLeft: paddingRelative && directionIsRTL ? -paddingHorizontal : 0,
top: paddingRelative ? -padding.t : 0,
right: paddingRelative ? (directionIsRTL ? -padding.r : 'auto') : 0,
left: paddingRelative ? (directionIsRTL ? 'auto' : -padding.l) : 0,
width: paddingRelative ? 'calc(100% + ' + paddingHorizontal + 'px)' : '',
};
var viewportStyle = {
paddingTop: paddingRelative ? _padding2.t : 0,
paddingRight: paddingRelative ? _padding2.r : 0,
paddingBottom: paddingRelative ? _padding2.b : 0,
paddingLeft: paddingRelative ? _padding2.l : 0,
paddingTop: paddingRelative ? padding.t : 0,
paddingRight: paddingRelative ? padding.r : 0,
paddingBottom: paddingRelative ? padding.b : 0,
paddingLeft: paddingRelative ? padding.l : 0,
};
if (paddingRelative) {
var horizontalPositionKey = directionIsRTL ? 'right' : 'left';
var horizontalMarginKey = directionIsRTL ? 'marginLeft' : 'marginRight';
var horizontalPositionValue = directionIsRTL ? _padding2.r : _padding2.l;
paddingStyle[horizontalPositionKey] = -horizontalPositionValue;
paddingStyle[horizontalMarginKey] = -paddingHorizontal;
}
style(_padding || _viewport, paddingStyle);
style(_viewport, viewportStyle);
_setLifecycleCommunication({
_paddingInfo: {
_absolute: !paddingRelative,
_padding: _padding2,
_padding: padding,
},
_viewportPaddingStyle: _padding ? viewportStyle : _extends_1({}, paddingStyle, viewportStyle),
});
@@ -1340,7 +1372,48 @@
};
};
var max = Math.max,
abs$1 = Math.abs,
round$1 = Math.round;
var overlaidScrollbarsHideOffset = 42;
var whCacheOptions = {
_equal: equalWH,
_initialValue: {
w: 0,
h: 0,
},
};
var sizeFraction = function sizeFraction(elm) {
var viewportOffsetSize = offsetSize(elm);
var viewportRect = getBoundingClientRect(elm);
return {
w: viewportRect.width - viewportOffsetSize.w,
h: viewportRect.height - viewportOffsetSize.h,
};
};
var setAxisOverflowStyle = function setAxisOverflowStyle(horizontal, overflowAmount, behavior, styleObj) {
var overflowKey = horizontal ? 'overflowX' : 'overflowY';
var behaviorIsVisible = behavior.indexOf('visible') === 0;
var behaviorIsVisibleHidden = behavior === 'visible-hidden';
var behaviorIsScroll = behavior === 'scroll';
var hasOverflow = overflowAmount > 0;
if (behaviorIsVisible) {
styleObj[overflowKey] = 'visible';
}
if (behaviorIsScroll && hasOverflow) {
styleObj[overflowKey] = behavior;
}
return {
_visible: behaviorIsVisible,
_behavior: behaviorIsVisibleHidden ? 'hidden' : 'scroll',
};
};
var createOverflowLifecycle = function createOverflowLifecycle(lifecycleHub) {
var _structureSetup = lifecycleHub._structureSetup,
_doViewportArrange = lifecycleHub._doViewportArrange,
@@ -1351,41 +1424,29 @@
_viewport = _structureSetup$_targ._viewport,
_viewportArrange = _structureSetup$_targ._viewportArrange;
var _createCache = createCache(
function (ctx) {
return fixScrollSizeRounding(ctx._viewportScrollSize, ctx._viewportOffsetSize, ctx._viewportRect);
},
{
_equal: equalWH,
}
),
updateContentScrollSizeCache = _createCache._update,
getCurrentContentScrollSizeCache = _createCache._current;
var _createCache = createCache(function () {
return sizeFraction(_viewport);
}, whCacheOptions),
updateViewportSizeFraction = _createCache._update,
getCurrentViewportSizeFraction = _createCache._current;
var _createCache2 = createCache(
function (ctx) {
return {
w: Math.max(0, ctx._contentScrollSize.w - ctx._viewportSize.w),
h: Math.max(0, ctx._contentScrollSize.h - ctx._viewportSize.h),
};
},
{
_equal: equalWH,
_initialValue: {
w: 0,
h: 0,
},
}
),
updateOverflowAmountCache = _createCache2._update,
getCurrentOverflowAmountCache = _createCache2._current;
var _createCache2 = createCache(function () {
return scrollSize(_viewport);
}, whCacheOptions),
updateViewportScrollSizeCache = _createCache2._update,
getCurrentViewportScrollSizeCache = _createCache2._current;
var fixScrollSizeRounding = function fixScrollSizeRounding(viewportScrollSize, viewportOffsetSize, viewportRect) {
return {
w: viewportScrollSize.w - Math.round(Math.max(0, viewportRect.width - viewportOffsetSize.w)),
h: viewportScrollSize.h - Math.round(Math.max(0, viewportRect.height - viewportOffsetSize.h)),
};
};
var _createCache3 = createCache(function (_ref) {
var _viewportScrollSize = _ref._viewportScrollSize,
_viewportClientSize = _ref._viewportClientSize,
_viewportSizeFraction = _ref._viewportSizeFraction;
return {
w: round$1(max(0, _viewportScrollSize.w - _viewportClientSize.w) - max(0, _viewportSizeFraction.w)),
h: round$1(max(0, _viewportScrollSize.h - _viewportClientSize.h) - max(0, _viewportSizeFraction.h)),
};
}, whCacheOptions),
updateOverflowAmountCache = _createCache3._update,
getCurrentOverflowAmountCache = _createCache3._current;
var fixFlexboxGlue = function fixFlexboxGlue(viewportOverflowState, heightIntrinsic) {
style(_viewport, {
@@ -1399,13 +1460,12 @@
var _overflowScroll = viewportOverflowState._overflowScroll,
_scrollbarsHideOffset = viewportOverflowState._scrollbarsHideOffset;
var hostBCR = getBoundingClientRect(_host);
var hostOffsetSize = offsetSize(_host);
var hostSizeFraction = sizeFraction(_host);
var hostClientSize = clientSize(_host);
var paddingVertical = paddingAbsolute || style(_viewport, 'boxSizing') === 'content-box' ? padding.b + padding.t : 0;
var clientSizeWithoutRounding = hostClientSize.h + (hostBCR.height - hostOffsetSize.h);
var fractionalcleintHeight = hostClientSize.h + (abs$1(hostSizeFraction.h) < 1 ? hostSizeFraction.h : 0);
style(_viewport, {
height: clientSizeWithoutRounding + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0) - paddingVertical,
height: fractionalcleintHeight + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0) - paddingVertical,
});
}
};
@@ -1440,33 +1500,13 @@
};
var setViewportOverflowState = function setViewportOverflowState(showNativeOverlaidScrollbars, overflowAmount, overflow, viewportStyleObj) {
var setPartialStylePerAxis = function setPartialStylePerAxis(horizontal, overflowAmount, behavior, styleObj) {
var overflowKey = horizontal ? 'overflowX' : 'overflowY';
var behaviorIsVisible = behavior.indexOf('visible') === 0;
var behaviorIsVisibleHidden = behavior === 'visible-hidden';
var behaviorIsScroll = behavior === 'scroll';
var _setAxisOverflowStyle = setAxisOverflowStyle(true, overflowAmount.w, overflow.x, viewportStyleObj),
xVisible = _setAxisOverflowStyle._visible,
xVisibleBehavior = _setAxisOverflowStyle._behavior;
if (behaviorIsVisible) {
styleObj[overflowKey] = 'visible';
}
if (behaviorIsScroll && overflowAmount > 0) {
styleObj[overflowKey] = behavior;
}
return {
_visible: behaviorIsVisible,
_behavior: behaviorIsVisibleHidden ? 'hidden' : 'scroll',
};
};
var _setPartialStylePerAx = setPartialStylePerAxis(true, overflowAmount.w, overflow.x, viewportStyleObj),
xVisible = _setPartialStylePerAx._visible,
xVisibleBehavior = _setPartialStylePerAx._behavior;
var _setPartialStylePerAx2 = setPartialStylePerAxis(false, overflowAmount.h, overflow.y, viewportStyleObj),
yVisible = _setPartialStylePerAx2._visible,
yVisibleBehavior = _setPartialStylePerAx2._behavior;
var _setAxisOverflowStyle2 = setAxisOverflowStyle(false, overflowAmount.h, overflow.y, viewportStyleObj),
yVisible = _setAxisOverflowStyle2._visible,
yVisibleBehavior = _setAxisOverflowStyle2._behavior;
if (xVisible && !yVisible) {
viewportStyleObj.overflowX = xVisibleBehavior;
@@ -1479,7 +1519,7 @@
return getViewportOverflowState(showNativeOverlaidScrollbars, viewportStyleObj);
};
var arrangeViewport = function arrangeViewport(viewportOverflowState, contentScrollSize, directionIsRTL) {
var arrangeViewport = function arrangeViewport(viewportOverflowState, viewportScrollSize, viewportSizeFraction, directionIsRTL) {
if (_doViewportArrange) {
var _scrollbarsHideOffset = viewportOverflowState._scrollbarsHideOffset,
_scrollbarsHideOffsetArrange = viewportOverflowState._scrollbarsHideOffsetArrange;
@@ -1494,9 +1534,11 @@
var viewportArrangeHorizontalPaddingKey = directionIsRTL ? 'paddingRight' : 'paddingLeft';
var viewportArrangeHorizontalPaddingValue = viewportPaddingStyle[viewportArrangeHorizontalPaddingKey];
var viewportArrangeVerticalPaddingValue = viewportPaddingStyle.paddingTop;
var fractionalContentWidth = viewportScrollSize.w + (abs$1(viewportSizeFraction.w) < 1 ? viewportSizeFraction.w : 0);
var fractionalContenHeight = viewportScrollSize.h + (abs$1(viewportSizeFraction.h) < 1 ? viewportSizeFraction.h : 0);
var arrangeSize = {
w: hideOffsetY && arrangeY ? hideOffsetY + contentScrollSize.w - viewportArrangeHorizontalPaddingValue + 'px' : '',
h: hideOffsetX && arrangeX ? hideOffsetX + contentScrollSize.h - viewportArrangeVerticalPaddingValue + 'px' : '',
w: hideOffsetY && arrangeY ? hideOffsetY + fractionalContentWidth - viewportArrangeHorizontalPaddingValue + 'px' : '',
h: hideOffsetX && arrangeX ? hideOffsetX + fractionalContenHeight - viewportArrangeVerticalPaddingValue + 'px' : '',
};
if (_viewportArrange) {
@@ -1517,8 +1559,8 @@
}
} else {
style(_viewport, {
'--viewport-arrange-width': arrangeSize.w,
'--viewport-arrange-height': arrangeSize.h,
'--os-vaw': arrangeSize.w,
'--os-vah': arrangeSize.h,
});
}
}
@@ -1543,7 +1585,7 @@
var verticalMarginValue = viewportPaddingStyle.marginBottom;
var horizontalPaddingValue = viewportPaddingStyle[viewportHorizontalPaddingKey];
var verticalPaddingValue = viewportPaddingStyle.paddingBottom;
viewportStyleObj.maxWidth = 'calc(100% + ' + (hideOffsetY + horizontalMarginValue * -1) + 'px)';
viewportStyleObj.width = 'calc(100% + ' + (hideOffsetY + horizontalMarginValue * -1) + 'px)';
viewportStyleObj[horizontalMarginKey] = -hideOffsetY + horizontalMarginValue;
viewportStyleObj.marginBottom = -hideOffsetX + verticalMarginValue;
@@ -1579,7 +1621,7 @@
}
if (arrangeX) {
assignProps('marginTop marginBottom paddingTop paddingBottom');
assignProps('marginBottom paddingTop paddingBottom');
}
if (arrangeY) {
@@ -1629,8 +1671,9 @@
var showNativeOverlaidScrollbars = showNativeOverlaidScrollbarsOption && _nativeScrollbarIsOverlaid.x && _nativeScrollbarIsOverlaid.y;
var adjustFlexboxGlue =
!_flexboxGlue && (_sizeChanged || _contentMutation || _hostMutation || showNativeOverlaidScrollbarsChanged || heightIntrinsicChanged);
var viewportSizeFractionCache = getCurrentViewportSizeFraction(force);
var viewportScrollSizeCache = getCurrentViewportScrollSizeCache(force);
var overflowAmuntCache = getCurrentOverflowAmountCache(force);
var contentScrollSizeCache = getCurrentContentScrollSizeCache(force);
var preMeasureViewportOverflowState;
if (showNativeOverlaidScrollbarsChanged && _nativeScrollbarStyling) {
@@ -1651,58 +1694,61 @@
_redoViewportArrange = _undoViewportArrange._redoViewportArrange,
undoViewportArrangeOverflowState = _undoViewportArrange._viewportOverflowState;
var contentSize = clientSize(_viewport);
var viewportRect = getBoundingClientRect(_viewport);
var viewportOffsetSize = offsetSize(_viewport);
var viewportScrollSize = scrollSize(_viewport);
var viewportClientSize = contentSize;
var _viewportSizeFraction3 = (viewportSizeFractionCache = updateViewportSizeFraction(force)),
_viewportSizeFraction2 = _viewportSizeFraction3._value,
viewportSizeFractionCahnged = _viewportSizeFraction3._changed;
var _contentScrollSizeCac = (contentScrollSizeCache = updateContentScrollSizeCache(force, {
_viewportRect: viewportRect,
_viewportOffsetSize: viewportOffsetSize,
_viewportScrollSize: viewportScrollSize,
})),
_contentScrollSize = _contentScrollSizeCac._value,
_contentScrollSizeChanged = _contentScrollSizeCac._changed;
var _viewportScrollSizeCa = (viewportScrollSizeCache = updateViewportScrollSizeCache(force)),
_viewportScrollSize2 = _viewportScrollSizeCa._value,
_viewportScrollSizeChanged = _viewportScrollSizeCa._changed;
var viewportContentSize = clientSize(_viewport);
var arrangedViewportScrollSize = _viewportScrollSize2;
var arrangedViewportClientSize = viewportContentSize;
_redoViewportArrange();
if (
(_contentScrollSizeChanged || showNativeOverlaidScrollbarsChanged) &&
(_viewportScrollSizeChanged || viewportSizeFractionCahnged || showNativeOverlaidScrollbarsChanged) &&
undoViewportArrangeOverflowState &&
!showNativeOverlaidScrollbars &&
arrangeViewport(undoViewportArrangeOverflowState, _contentScrollSize, directionIsRTL)
arrangeViewport(undoViewportArrangeOverflowState, _viewportScrollSize2, _viewportSizeFraction2, directionIsRTL)
) {
viewportClientSize = clientSize(_viewport);
viewportScrollSize = fixScrollSizeRounding(scrollSize(_viewport), offsetSize(_viewport), getBoundingClientRect(_viewport));
arrangedViewportClientSize = clientSize(_viewport);
arrangedViewportScrollSize = scrollSize(_viewport);
}
overflowAmuntCache = updateOverflowAmountCache(force, {
_contentScrollSize: {
w: Math.max(_contentScrollSize.w, viewportScrollSize.w),
h: Math.max(_contentScrollSize.h, viewportScrollSize.h),
_viewportSizeFraction: _viewportSizeFraction2,
_viewportScrollSize: {
w: max(_viewportScrollSize2.w, arrangedViewportScrollSize.w),
h: max(_viewportScrollSize2.h, arrangedViewportScrollSize.h),
},
_viewportSize: {
w: viewportClientSize.w + Math.max(0, contentSize.w - _contentScrollSize.w),
h: viewportClientSize.h + Math.max(0, contentSize.h - _contentScrollSize.h),
_viewportClientSize: {
w: arrangedViewportClientSize.w + max(0, viewportContentSize.w - _viewportScrollSize2.w),
h: arrangedViewportClientSize.h + max(0, viewportContentSize.h - _viewportScrollSize2.h),
},
});
}
var _viewportSizeFraction4 = viewportSizeFractionCache,
viewportSizeFraction = _viewportSizeFraction4._value,
viewportSizeFractionChanged = _viewportSizeFraction4._changed;
var _viewportScrollSizeCa2 = viewportScrollSizeCache,
viewportScrollSize = _viewportScrollSizeCa2._value,
viewportScrollSizeChanged = _viewportScrollSizeCa2._changed;
var _overflowAmuntCache = overflowAmuntCache,
overflowAmount = _overflowAmuntCache._value,
overflowAmountChanged = _overflowAmuntCache._changed;
var _checkOption2 = checkOption('overflow'),
overflow = _checkOption2._value,
overflowChanged = _checkOption2._changed;
var _contentScrollSizeCac2 = contentScrollSizeCache,
contentScrollSize = _contentScrollSizeCac2._value,
contentScrollSizeChanged = _contentScrollSizeCac2._changed;
var _overflowAmuntCache = overflowAmuntCache,
overflowAmount = _overflowAmuntCache._value,
overflowAmountChanged = _overflowAmuntCache._changed;
if (
_paddingStyleChanged ||
contentScrollSizeChanged ||
viewportSizeFractionChanged ||
viewportScrollSizeChanged ||
overflowAmountChanged ||
overflowChanged ||
showNativeOverlaidScrollbarsChanged ||
@@ -1710,16 +1756,15 @@
adjustFlexboxGlue
) {
var viewportStyle = {
marginTop: 0,
marginRight: 0,
marginBottom: 0,
marginLeft: 0,
maxWidth: '',
width: '',
overflowY: '',
overflowX: '',
};
var viewportOverflowState = setViewportOverflowState(showNativeOverlaidScrollbars, overflowAmount, overflow, viewportStyle);
var viewportArranged = arrangeViewport(viewportOverflowState, contentScrollSize, directionIsRTL);
var viewportArranged = arrangeViewport(viewportOverflowState, viewportScrollSize, viewportSizeFraction, directionIsRTL);
hideNativeScrollbars(viewportOverflowState, directionIsRTL, viewportArranged, viewportStyle);
if (adjustFlexboxGlue) {
@@ -2195,14 +2240,6 @@
: undefined;
};
var emptyStylePropsToZero = function emptyStylePropsToZero(stlyeObj, baseStyle) {
return keys(stlyeObj).reduce(function (obj, key) {
var value = stlyeObj[key];
obj[key] = value === '' ? 0 : value;
return obj;
}, _extends_1({}, baseStyle));
};
var ignorePrefix = 'os-';
var hostSelector = '.' + classNameHost;
var viewportSelector = '.' + classNameViewport;
@@ -2249,7 +2286,6 @@
h: 0,
},
_viewportPaddingStyle: {
marginTop: 0,
marginRight: 0,
marginBottom: 0,
marginLeft: 0,
@@ -2274,7 +2310,6 @@
removeEnvironmentListener = _getEnvironment._removeListener;
var doViewportArrange = !_nativeScrollbarStyling && (_nativeScrollbarIsOverlaid.x || _nativeScrollbarIsOverlaid.y);
var lifecycles = [];
var instance = {
_options: options,
_structureSetup: structureSetup,
@@ -2283,19 +2318,10 @@
return lifecycleCommunication;
},
_setLifecycleCommunication: function _setLifecycleCommunication(newLifecycleCommunication) {
if (newLifecycleCommunication && newLifecycleCommunication._viewportPaddingStyle) {
newLifecycleCommunication._viewportPaddingStyle = emptyStylePropsToZero(
newLifecycleCommunication._viewportPaddingStyle,
lifecycleCommunicationFallback._viewportPaddingStyle
);
}
lifecycleCommunication = assignDeep({}, lifecycleCommunication, newLifecycleCommunication);
},
};
push(lifecycles, createTrinsicLifecycle(instance));
push(lifecycles, createPaddingLifecycle(instance));
push(lifecycles, createOverflowLifecycle(instance));
var lifecycles = [createTrinsicLifecycle(instance), createPaddingLifecycle(instance), createOverflowLifecycle(instance)];
var updateLifecycles = function updateLifecycles(updateHints, changedOptions, force) {
var _ref = updateHints || {},
@@ -2357,6 +2383,10 @@
if (isNumber(scrollOffsetY)) {
scrollTop(_viewport, scrollOffsetY);
}
if (options.callbacks.onUpdated) {
options.callbacks.onUpdated();
}
};
var onSizeChanged = function onSizeChanged(directionIsRTL) {
packages/overlayscrollbars/dist/overlayscrollbars.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/overlayscrollbars/dist/overlayscrollbars.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts
+1 -25
View File
@@ -5,8 +5,6 @@ import {
CacheValues,
PartialOptions,
each,
push,
keys,
hasOwnProperty,
isNumber,
scrollLeft,
@@ -84,16 +82,6 @@ export interface LifecycleHub {
const getPropByPath = <T>(obj: any, path: string): T =>
obj ? path.split('.').reduce((o, prop) => (o && hasOwnProperty(o, prop) ? o[prop] : undefined), obj) : undefined;
const emptyStylePropsToZero = (stlyeObj: StyleObject, baseStyle?: StyleObject) =>
keys(stlyeObj).reduce(
(obj, key) => {
const value = stlyeObj[key];
obj[key] = value === '' ? 0 : value;
return obj;
},
{ ...baseStyle }
);
// TODO: observer textarea attrs if textarea
// TODO: tabindex, open etc.
// TODO: test _ignoreContentChange & _ignoreNestedTargetChange for content dom observer
@@ -139,7 +127,6 @@ const lifecycleCommunicationFallback: LifecycleCommunication = {
h: 0,
},
_viewportPaddingStyle: {
marginTop: 0,
marginRight: 0,
marginBottom: 0,
marginLeft: 0,
@@ -161,27 +148,16 @@ export const createLifecycleHub = (options: OSOptions, structureSetup: Structure
_removeListener: removeEnvironmentListener,
} = getEnvironment();
const doViewportArrange = !_nativeScrollbarStyling && (_nativeScrollbarIsOverlaid.x || _nativeScrollbarIsOverlaid.y);
const lifecycles: Lifecycle[] = [];
const instance: LifecycleHub = {
_options: options,
_structureSetup: structureSetup,
_doViewportArrange: doViewportArrange,
_getLifecycleCommunication: () => lifecycleCommunication,
_setLifecycleCommunication(newLifecycleCommunication) {
if (newLifecycleCommunication && newLifecycleCommunication._viewportPaddingStyle) {
newLifecycleCommunication._viewportPaddingStyle = emptyStylePropsToZero(
newLifecycleCommunication._viewportPaddingStyle,
lifecycleCommunicationFallback._viewportPaddingStyle
);
}
lifecycleCommunication = assignDeep({}, lifecycleCommunication, newLifecycleCommunication);
},
};
push(lifecycles, createTrinsicLifecycle(instance));
push(lifecycles, createPaddingLifecycle(instance));
push(lifecycles, createOverflowLifecycle(instance));
const lifecycles: Lifecycle[] = [createTrinsicLifecycle(instance), createPaddingLifecycle(instance), createOverflowLifecycle(instance)];
const updateLifecycles = (updateHints?: Partial<LifecycleUpdateHints> | null, changedOptions?: Partial<OSOptions> | null, force?: boolean) => {
let {
packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts
+28 -29
View File
@@ -58,6 +58,25 @@ const sizeFraction = (elm: HTMLElement): WH<number> => {
h: viewportRect.height - viewportOffsetSize.h,
};
};
const setAxisOverflowStyle = (horizontal: boolean, overflowAmount: number, behavior: OverflowBehavior, styleObj: StyleObject) => {
const overflowKey: keyof StyleObject = horizontal ? 'overflowX' : 'overflowY';
const behaviorIsVisible = behavior.indexOf('visible') === 0;
const behaviorIsVisibleHidden = behavior === 'visible-hidden';
const behaviorIsScroll = behavior === 'scroll';
const hasOverflow = overflowAmount > 0;
if (behaviorIsVisible) {
styleObj[overflowKey] = 'visible';
}
if (behaviorIsScroll && hasOverflow) {
styleObj[overflowKey] = behavior;
}
return {
_visible: behaviorIsVisible,
_behavior: behaviorIsVisibleHidden ? 'hidden' : 'scroll',
};
};
/**
* Lifecycle with the responsibility to set the correct overflow and scrollbar hiding styles of the viewport element.
@@ -96,15 +115,14 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
if (heightIntrinsic) {
const { _absolute: paddingAbsolute, _padding: padding } = _getLifecycleCommunication()._paddingInfo;
const { _overflowScroll, _scrollbarsHideOffset } = viewportOverflowState;
const hostBCR = getBoundingClientRect(_host);
const hostOffsetSize = offsetSize(_host);
const hostSizeFraction = sizeFraction(_host);
const hostClientSize = clientSize(_host);
// padding subtraction is only needed if padding is absolute or if viewport is content-box
const paddingVertical = paddingAbsolute || style(_viewport, 'boxSizing') === 'content-box' ? padding.b + padding.t : 0;
const clientSizeWithoutRounding = hostClientSize.h + (hostBCR.height - hostOffsetSize.h);
const fractionalcleintHeight = hostClientSize.h + (abs(hostSizeFraction.h) < 1 ? hostSizeFraction.h : 0);
style(_viewport, {
height: clientSizeWithoutRounding + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0) - paddingVertical,
height: fractionalcleintHeight + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0) - paddingVertical,
});
}
};
@@ -154,26 +172,8 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
overflow: OverflowOption,
viewportStyleObj: StyleObject
): ViewportOverflowState => {
const setPartialStylePerAxis = (horizontal: boolean, overflowAmount: number, behavior: OverflowBehavior, styleObj: StyleObject) => {
const overflowKey: keyof StyleObject = horizontal ? 'overflowX' : 'overflowY';
const behaviorIsVisible = behavior.indexOf('visible') === 0;
const behaviorIsVisibleHidden = behavior === 'visible-hidden';
const behaviorIsScroll = behavior === 'scroll';
if (behaviorIsVisible) {
styleObj[overflowKey] = 'visible';
}
if (behaviorIsScroll && overflowAmount > 0) {
styleObj[overflowKey] = behavior;
}
return {
_visible: behaviorIsVisible,
_behavior: behaviorIsVisibleHidden ? 'hidden' : 'scroll',
};
};
const { _visible: xVisible, _behavior: xVisibleBehavior } = setPartialStylePerAxis(true, overflowAmount!.w, overflow.x, viewportStyleObj);
const { _visible: yVisible, _behavior: yVisibleBehavior } = setPartialStylePerAxis(false, overflowAmount!.h, overflow.y, 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);
if (xVisible && !yVisible) {
viewportStyleObj.overflowX = xVisibleBehavior;
@@ -231,9 +231,9 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
}
}
} else {
style<'--viewport-arrange-width' | '--viewport-arrange-height'>(_viewport, {
'--viewport-arrange-width': arrangeSize.w,
'--viewport-arrange-height': arrangeSize.h,
style<'--os-vaw' | '--os-vah'>(_viewport, {
'--os-vaw': arrangeSize.w,
'--os-vah': arrangeSize.h,
});
}
}
@@ -308,7 +308,7 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
}
if (arrangeX) {
assignProps('marginTop marginBottom paddingTop paddingBottom');
assignProps('marginBottom paddingTop paddingBottom');
}
if (arrangeY) {
@@ -416,7 +416,6 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
adjustFlexboxGlue
) {
const viewportStyle: StyleObject = {
marginTop: 0,
marginRight: 0,
marginBottom: 0,
marginLeft: 0,
packages/overlayscrollbars/src/lifecycles/paddingLifecycle.ts
+6 -17
View File
@@ -13,6 +13,7 @@ export const createPaddingLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =>
const { _host, _padding, _viewport } = _structureSetup._targetObj;
const { _update: updatePaddingCache, _current: currentPaddingCache } = createCache(() => topRightBottomLeft(_host, 'padding'), {
_equal: equalTRBL,
_initialValue: topRightBottomLeft(),
});
return (updateHints, checkOption, force) => {
@@ -30,21 +31,18 @@ export const createPaddingLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =>
const paddingStyleChanged = paddingAbsoluteChanged || directionChanged || paddingChanged;
if (paddingStyleChanged) {
const { _value: padding } = updatePaddingCache(force);
// if there is no padding element and no scrollbar styling padding absolute isn't supported
// if there is no padding element and no scrollbar styling, paddingAbsolute isn't supported
const paddingRelative = !paddingAbsolute || (!_padding && !_nativeScrollbarStyling);
const paddingHorizontal = padding!.r + padding!.l;
const paddingVertical = padding!.t + padding!.b;
const paddingStyle: StyleObject = {
marginTop: 0,
marginRight: 0,
marginRight: paddingRelative && !directionIsRTL ? -paddingHorizontal : 0,
marginBottom: paddingRelative ? -paddingVertical : 0,
marginLeft: 0,
marginLeft: paddingRelative && directionIsRTL ? -paddingHorizontal : 0,
top: paddingRelative ? -padding!.t : 0,
right: 0,
bottom: 0,
left: 0,
right: paddingRelative ? (directionIsRTL ? -padding!.r : 'auto') : 0,
left: paddingRelative ? (directionIsRTL ? 'auto' : -padding!.l) : 0,
width: paddingRelative ? `calc(100% + ${paddingHorizontal}px)` : '',
};
const viewportStyle: StyleObject = {
@@ -54,15 +52,6 @@ export const createPaddingLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =>
paddingLeft: paddingRelative ? padding!.l : 0,
};
if (paddingRelative) {
const horizontalPositionKey: keyof StyleObject = directionIsRTL ? 'right' : 'left';
const horizontalMarginKey: keyof StyleObject = directionIsRTL ? 'marginLeft' : 'marginRight';
const horizontalPositionValue = directionIsRTL ? padding!.r : padding!.l;
paddingStyle[horizontalPositionKey] = -horizontalPositionValue;
paddingStyle[horizontalMarginKey] = -paddingHorizontal;
}
// if there is no padding element apply the style to the viewport element instead
style(_padding || _viewport, paddingStyle);
style(_viewport, viewportStyle);
packages/overlayscrollbars/src/styles/overlayscrollbars.scss
+6 -6
View File
@@ -2,14 +2,14 @@
@import './trinsicobserver.scss';
.os-environment {
--os-css-custom-prop: -1;
--os-custom-prop: -1;
position: fixed;
opacity: 0;
visibility: hidden;
overflow: scroll;
height: 200px;
width: 200px;
z-index: var(--os-css-custom-prop);
z-index: var(--os-custom-prop);
div {
width: 200%;
@@ -93,8 +93,8 @@
}
.os-viewport {
--viewport-arrange-width: 0;
--viewport-arrange-height: 0;
--os-vaw: 0;
--os-vah: 0;
&.os-viewport-arrange::before {
content: '';
@@ -103,8 +103,8 @@
z-index: -1;
min-width: 1px;
min-height: 1px;
width: var(--viewport-arrange-width);
height: var(--viewport-arrange-height);
width: var(--os-vaw);
height: var(--os-vah);
}
}
packages/overlayscrollbars/src/support/dom/style.ts
+5 -4
View File
@@ -96,11 +96,12 @@ export const show = (elm: HTMLElement | false | null | undefined): void => {
};
/**
* Returns a top
* @param elm
* @param property
* Returns the top right bottom left values of the passed css property.
* @param elm The element of which the values shall be returned.
* @param propertyPrefix The css property prefix. (e.g. "border")
* @param propertySuffix The css property suffix. (e.g. "width")
*/
export const topRightBottomLeft = (elm: HTMLElement | false | null | undefined, propertyPrefix?: string, propertySuffix?: string): TRBL => {
export const topRightBottomLeft = (elm?: HTMLElement | false | null | undefined, propertyPrefix?: string, propertySuffix?: string): TRBL => {
const finalPrefix = propertyPrefix ? `${propertyPrefix}-` : '';
const finalSuffix = propertySuffix ? `-${propertySuffix}` : '';
const top = `${finalPrefix}top${finalSuffix}`;
packages/overlayscrollbars/types/options.d.ts
Vendored
+3
View File
@@ -40,6 +40,9 @@ export interface OSOptions {
show: boolean;
initialize: boolean;
};
callbacks: {
onUpdated: (() => any) | null;
};
}
export interface OverflowChangedArgs {
x: boolean;
packages/overlayscrollbars/types/support/compatibility/vendors.d.ts
Vendored
+4 -4
View File
@@ -7,17 +7,17 @@ export declare const cssCache: {
[key: string]: string;
};
/**
* Gets the name of the given CSS property with vendor prefix if it isn't supported without, or undefined if unsupported.
* Gets the name of the given CSS property with vendor prefix if it isn't supported without it, or and empty string if unsupported.
* @param name The name of the CSS property which shall be get.
*/
export declare const cssProperty: (name: string) => string | undefined;
export declare const cssProperty: (name: string) => string;
/**
* Get the name of the given CSS property value(s), with vendor prefix if it isn't supported wuthout, or undefined if no value is supported.
* Get the name of the given CSS property value(s), with vendor prefix if it isn't supported without it, or an empty string if no value is supported.
* @param property The CSS property to which the CSS property value(s) belong.
* @param values The value(s) separated by spaces which shall be get.
* @param suffix A suffix which is added to each value in case the value is a function or something else more advanced.
*/
export declare const cssPropertyValue: (property: string, values: string, suffix?: string | undefined) => string | undefined;
export declare const cssPropertyValue: (property: string, values: string, suffix?: string | undefined) => string;
/**
* Get the requested JS function, object or constructor with vendor prefix if it isn't supported without or undefined if unsupported.
* @param name The name of the JS function, object or constructor.
packages/overlayscrollbars/types/support/dom/style.d.ts
Vendored
+5 -4
View File
@@ -26,8 +26,9 @@ export declare const hide: (elm: HTMLElement | false | null | undefined) => void
*/
export declare const show: (elm: HTMLElement | false | null | undefined) => void;
/**
* Returns a top
* @param elm
* @param property
* Returns the top right bottom left values of the passed css property.
* @param elm The element of which the values shall be returned.
* @param propertyPrefix The css property prefix. (e.g. "border")
* @param propertySuffix The css property suffix. (e.g. "width")
*/
export declare const topRightBottomLeft: (elm: HTMLElement | false | null | undefined, propertyPrefix?: string | undefined, propertySuffix?: string | undefined) => TRBL;
export declare const topRightBottomLeft: (elm?: HTMLElement | false | null | undefined, propertyPrefix?: string | undefined, propertySuffix?: string | undefined) => TRBL;