mirrors/OverlayScrollbars
2
0
Fork 0
mirror of https://github.com/tenrok/OverlayScrollbars.git synced 2026-06-12 05:02:27 +03:00
Code Issues Packages Projects Releases Wiki Activity

improve host and padding clipping

Browse Source
This commit is contained in:
Rene
2022-07-04 11:19:07 +02:00
parent d656d73dc7
commit fabc318107
9 changed files with 138 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/playwright/rollup.config.js
+1 -1
View File
@@ -2,7 +2,7 @@ const fs = require('fs');
const path = require('path');
const rollupPluginStyles = require('rollup-plugin-styles');
const rollupPluginServe = require('rollup-plugin-serve');
const rollupPluginLivereload = require('rollup-plugin-livereload');
// const rollupPluginLivereload = require('rollup-plugin-livereload');
const createRollupConfig = require('../rollup/rollup.config');
const rollupPluginHtml = require('./rollup.pluginHtml');
packages/overlayscrollbars/dist/overlayscrollbars.esm.js
Vendored
+5 -5
View File
@@ -1486,8 +1486,8 @@ const createOverflowUpdate = (structureSetupElements, state) => {
let sizeFractionCache = getCurrentSizeFraction(force);
let viewportScrollSizeCache = getCurrentViewportScrollSizeCache(force);
let overflowAmuntCache = getCurrentOverflowAmountCache(force);
let preMeasureViewportOverflowState;
let updateHintsReturn;
let preMeasureViewportOverflowState;
if (showNativeOverlaidScrollbarsChanged && _nativeScrollbarStyling) {
conditionalClass(_viewport, classNameViewportScrollbarStyling, !showNativeOverlaidScrollbars);
@@ -1506,9 +1506,9 @@ const createOverflowUpdate = (structureSetupElements, state) => {
const [redoViewportArrange, undoViewportArrangeOverflowState] = undoViewportArrange(showNativeOverlaidScrollbars, _directionIsRTL, preMeasureViewportOverflowState);
const [_sizeFraction, _sizeFractionChanged] = sizeFractionCache = updateSizeFraction(force);
const [_viewportScrollSize, _viewportScrollSizeChanged] = viewportScrollSizeCache = updateViewportScrollSizeCache(force);
const viewportContentSize = clientSize(_viewport);
const viewportclientSize = clientSize(_viewport);
let arrangedViewportScrollSize = _viewportScrollSize;
let arrangedViewportClientSize = viewportContentSize;
let arrangedViewportClientSize = viewportclientSize;
redoViewportArrange();
if ((_viewportScrollSizeChanged || _sizeFractionChanged || showNativeOverlaidScrollbarsChanged) && undoViewportArrangeOverflowState && !showNativeOverlaidScrollbars && arrangeViewport(undoViewportArrangeOverflowState, _viewportScrollSize, _sizeFraction, _directionIsRTL)) {
@@ -1520,8 +1520,8 @@ const createOverflowUpdate = (structureSetupElements, state) => {
w: max(_viewportScrollSize.w, arrangedViewportScrollSize.w),
h: max(_viewportScrollSize.h, arrangedViewportScrollSize.h)
}, {
w: arrangedViewportClientSize.w + max(0, viewportContentSize.w - _viewportScrollSize.w),
h: arrangedViewportClientSize.h + max(0, viewportContentSize.h - _viewportScrollSize.h)
w: arrangedViewportClientSize.w + max(0, viewportclientSize.w - _viewportScrollSize.w),
h: arrangedViewportClientSize.h + max(0, viewportclientSize.h - _viewportScrollSize.h)
}, _sizeFraction), force);
}
packages/overlayscrollbars/dist/overlayscrollbars.esm.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/overlayscrollbars/dist/overlayscrollbars.esm.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/overlayscrollbars/dist/overlayscrollbars.js
Vendored
+5 -5
View File
@@ -1589,8 +1589,8 @@
var sizeFractionCache = getCurrentSizeFraction(force);
var viewportScrollSizeCache = getCurrentViewportScrollSizeCache(force);
var overflowAmuntCache = getCurrentOverflowAmountCache(force);
var preMeasureViewportOverflowState;
var updateHintsReturn;
var preMeasureViewportOverflowState;
if (showNativeOverlaidScrollbarsChanged && _nativeScrollbarStyling) {
conditionalClass(_viewport, classNameViewportScrollbarStyling, !showNativeOverlaidScrollbars);
@@ -1618,9 +1618,9 @@
_viewportScrollSize = _viewportScrollSizeCa[0],
_viewportScrollSizeChanged = _viewportScrollSizeCa[1];
var viewportContentSize = clientSize(_viewport);
var viewportclientSize = clientSize(_viewport);
var arrangedViewportScrollSize = _viewportScrollSize;
var arrangedViewportClientSize = viewportContentSize;
var arrangedViewportClientSize = viewportclientSize;
redoViewportArrange();
if ((_viewportScrollSizeChanged || _sizeFractionChanged || showNativeOverlaidScrollbarsChanged) && undoViewportArrangeOverflowState && !showNativeOverlaidScrollbars && arrangeViewport(undoViewportArrangeOverflowState, _viewportScrollSize, _sizeFraction, _directionIsRTL)) {
@@ -1632,8 +1632,8 @@
w: max(_viewportScrollSize.w, arrangedViewportScrollSize.w),
h: max(_viewportScrollSize.h, arrangedViewportScrollSize.h)
}, {
w: arrangedViewportClientSize.w + max(0, viewportContentSize.w - _viewportScrollSize.w),
h: arrangedViewportClientSize.h + max(0, viewportContentSize.h - _viewportScrollSize.h)
w: arrangedViewportClientSize.w + max(0, viewportclientSize.w - _viewportScrollSize.w),
h: arrangedViewportClientSize.h + max(0, viewportclientSize.h - _viewportScrollSize.h)
}, _sizeFraction), force);
}
packages/overlayscrollbars/dist/overlayscrollbars.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/overlayscrollbars/dist/overlayscrollbars.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/overlayscrollbars/src/setups/structureSetup/updateSegments/overflowUpdateSegment.ts
+4 -3
View File
@@ -72,8 +72,7 @@ const conditionalClass = (
condition: boolean
) => (condition ? addClass(elm, classNames) : removeClass(elm, classNames));
const overflowIsVisible = (overflowBehavior: OverflowBehavior) =>
overflowBehavior.indexOf(strVisible) === 0;
const overflowIsVisible = (overflowBehavior: string) => overflowBehavior.indexOf(strVisible) === 0;
/**
* Lifecycle with the responsibility to set the correct overflow and scrollbar hiding styles of the viewport element.
@@ -199,9 +198,11 @@ export const createOverflowUpdate: CreateStructureUpdateSegment = (
): ViewportOverflowState => {
const setAxisOverflowStyle = (behavior: OverflowBehavior, hasOverflowAxis: boolean) => {
const overflowVisible = overflowIsVisible(behavior);
const overflowVisibleBehavior =
(hasOverflowAxis && overflowVisible && behavior.replace(`${strVisible}-`, '')) || '';
return [
hasOverflowAxis && !overflowVisible ? behavior : '',
(hasOverflowAxis && overflowVisible && behavior.replace(`${strVisible}-`, '')) || '',
overflowIsVisible(overflowVisibleBehavior) ? 'hidden' : overflowVisibleBehavior,
];
};
packages/overlayscrollbars/tests/playwright/lifecycles/structureLifecycle/index.browser.ts
+119 -26
View File
@@ -128,13 +128,23 @@ const metricsDimensionsEqual = (a: Metrics, b: Metrics) => {
return JSON.stringify(aDimensions) === JSON.stringify(bDimensions);
};
const isVisibleOverflow = (val: string) => val.indexOf('visible') === 0;
const expectedOverflowVisibleBehavior = (
overflowOptionAxis: string,
hasOverflowOtherAxis: boolean
) => {
const overflowVisibleBehavior = overflowOptionAxis.replace('visible', '').slice(1);
return hasOverflowOtherAxis ? overflowVisibleBehavior || 'hidden' : 'visible';
};
// @ts-ignore
const msie11 = !!window.MSInputMethodContext && !!document.documentMode;
const msedge = window.navigator.userAgent.toLowerCase().indexOf('edge') > -1;
msie11 && addClass(document.body, 'msie11');
const useContentElement = true;
const useContentElement = false;
const fixedDigits = msie11 ? 1 : 3;
const fixedDigitsOffset = 3;
@@ -242,6 +252,18 @@ const checkMetrics = async (checkComparison: CheckComparisonObj) => {
const comparisonMetrics = getMetrics(comparison!);
const targetMetrics = getMetrics(target!);
const targetViewport = target!.querySelector<HTMLElement>('.os-viewport');
const targetPadding = target!.querySelector<HTMLElement>('.os-padding');
const { x: overflowOptionX, y: overflowOptionY } = osInstance.options().overflow;
const overflowOptionXVisible = isVisibleOverflow(overflowOptionX);
const overflowOptionYVisible = isVisibleOverflow(overflowOptionY);
const hostOverflowStyle = style(target, 'overflow');
const paddingOverflowStyle = targetPadding
? style(targetPadding, 'overflow')
: hostOverflowStyle;
const viewportOverflowXStyle = style(targetViewport!, 'overflowX');
const viewportOverflowYStyle = style(targetViewport!, 'overflowY');
// ==== check scroll values:
should.equal(
targetMetrics.scroll.width,
@@ -266,48 +288,23 @@ const checkMetrics = async (checkComparison: CheckComparisonObj) => {
);
if (targetMetrics.hasOverflow.x) {
/*
should.equal(
style(targetViewport!, 'overflowX'),
'scroll',
'Overflow-X should result in scroll.'
);
*/
should.ok(
osInstance.state()._overflowAmount.w > 0,
'Overflow amount width should be > 0 with overflow.'
);
} else {
should.notEqual(
style(targetViewport!, 'overflowX'),
'scroll',
'No Overflow-X shouldnt result in scroll.'
);
should.equal(
osInstance.state()._overflowAmount.w,
0,
'Overflow amount width should be 0 without overflow.'
);
}
if (targetMetrics.hasOverflow.y) {
/*
should.equal(
style(targetViewport!, 'overflowY'),
'scroll',
'Overflow-Y should result in scroll.'
);
*/
should.ok(
osInstance.state()._overflowAmount.h > 0,
'Overflow amount height should be > 0 with overflow.'
);
} else {
should.notEqual(
style(targetViewport!, 'overflowY'),
'scroll',
'No Overflow-Y shouldnt result in scroll.'
);
should.equal(
osInstance.state()._overflowAmount.h,
0,
@@ -315,12 +312,17 @@ const checkMetrics = async (checkComparison: CheckComparisonObj) => {
);
}
// ==== check elements offset and dimensions:
// host offset
should.equal(targetMetrics.offset.left, comparisonMetrics.offset.left, 'Offset left equality.');
should.equal(targetMetrics.offset.top, comparisonMetrics.offset.top, 'Offset top equality.');
// host dimensions
should.equal(targetMetrics.size.width, comparisonMetrics.size.width, 'Size width equality.');
should.equal(targetMetrics.size.height, comparisonMetrics.size.height, 'Size height equality.');
// percent element dimensions
should.equal(
targetMetrics.percentElm.width,
comparisonMetrics.percentElm.width,
@@ -332,6 +334,7 @@ const checkMetrics = async (checkComparison: CheckComparisonObj) => {
'Percent Elements height equality.'
);
// end element dimensions
should.equal(
targetMetrics.endElm.width,
comparisonMetrics.endElm.width,
@@ -343,6 +346,96 @@ const checkMetrics = async (checkComparison: CheckComparisonObj) => {
'End Elements height equality.'
);
// ==== check viewport overflow style:
if (targetMetrics.hasOverflow.x) {
if (overflowOptionXVisible && !overflowOptionYVisible) {
const expectedStyle = expectedOverflowVisibleBehavior(
overflowOptionX,
targetMetrics.hasOverflow.y
);
should.equal(
viewportOverflowXStyle,
expectedStyle,
`Overflow-X visible behavior should result in ${expectedStyle}.`
);
} else if (overflowOptionXVisible && overflowOptionYVisible) {
should.equal(
viewportOverflowXStyle,
'visible',
`Overflow-X full visible behavior should result in visible.`
);
} else {
should.equal(
viewportOverflowXStyle,
overflowOptionX,
`Overflow-X should result in ${overflowOptionX}.`
);
}
should.notEqual(viewportOverflowXStyle, 'auto', `Overflow-X should never be auto.`);
} else {
should.notEqual(viewportOverflowXStyle, 'scroll', 'No Overflow-X shouldnt result in scroll.');
}
if (targetMetrics.hasOverflow.y) {
if (!overflowOptionXVisible && overflowOptionYVisible) {
const expectedStyle = expectedOverflowVisibleBehavior(
overflowOptionY,
targetMetrics.hasOverflow.x
);
should.equal(
viewportOverflowYStyle,
expectedStyle,
`Overflow-Y visible behavior should result in ${expectedStyle}.`
);
} else if (overflowOptionXVisible && overflowOptionYVisible) {
should.equal(
viewportOverflowYStyle,
'visible',
`Overflow-Y full visible behavior should result in visible.`
);
} else {
should.equal(
viewportOverflowYStyle,
overflowOptionY,
`Overflow-Y should result in ${overflowOptionY}.`
);
}
should.notEqual(viewportOverflowYStyle, 'auto', `Overflow-Y should never be auto.`);
} else {
should.notEqual(viewportOverflowYStyle, 'scroll', 'No Overflow-Y shouldnt result in scroll.');
}
// ==== check host & padding overflow style:
if (!targetMetrics.hasOverflow.x && !targetMetrics.hasOverflow.y) {
should.equal(hostOverflowStyle, 'hidden', 'Host Overflow should be hidden without overflow.');
}
if (
isVisibleOverflow(viewportOverflowXStyle) &&
isVisibleOverflow(viewportOverflowXStyle) &&
(targetMetrics.hasOverflow.x || targetMetrics.hasOverflow.y)
) {
should.equal(
hostOverflowStyle,
'visible',
'Host Overflow should be visible with visible overflowing content.'
);
} else {
should.equal(
hostOverflowStyle,
'hidden',
'Host Overflow should be hidden without visible overflowing content.'
);
}
should.equal(
paddingOverflowStyle,
hostOverflowStyle,
'Padding Overflow should equal Host overflow.'
);
await timeout(1);
// steady pace for ie11 / edge or it will freeze progressively