mirrors/OverlayScrollbars
2
0
Fork 0
mirror of https://github.com/tenrok/OverlayScrollbars.git synced 2026-06-23 21:50:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

improve code

Browse Source
This commit is contained in:
Rene
2021-04-03 20:21:47 +02:00
parent e3e0614a7b
commit 06b88e5f25
7 changed files with 41 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts
+17 -21
View File
@@ -43,16 +43,11 @@ interface OverflowOption {
y: OverflowBehavior; y: OverflowBehavior;
} }
interface ViewportArrangeCustomCssProps {
'--viewport-arrange-width': string;
'--viewport-arrange-height': string;
}
const overlaidScrollbarsHideOffset = 42; const overlaidScrollbarsHideOffset = 42;
export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle => { export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle => {
const { _structureSetup, _doViewportArrange, _getViewportPaddingStyle, _getPaddingInfo } = lifecycleHub; const { _structureSetup, _doViewportArrange, _getViewportPaddingStyle, _getPaddingInfo } = lifecycleHub;
const { _host, _padding, _viewport, _viewportArrange } = _structureSetup._targetObj; const { _host, _padding, _viewport, _content, _viewportArrange } = _structureSetup._targetObj;
const { _update: updateContentScrollSizeCache, _current: getCurrentContentScrollSizeCache } = createCache< const { _update: updateContentScrollSizeCache, _current: getCurrentContentScrollSizeCache } = createCache<
WH<number>, WH<number>,
ContentScrollSizeCacheContext ContentScrollSizeCacheContext
@@ -78,7 +73,7 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
const fixFlexboxGlue = (viewportOverflowState: ViewportOverflowState, heightIntrinsic: boolean) => { const fixFlexboxGlue = (viewportOverflowState: ViewportOverflowState, heightIntrinsic: boolean) => {
style(_viewport, { style(_viewport, {
maxHeight: '', height: '',
}); });
if (heightIntrinsic) { if (heightIntrinsic) {
@@ -91,7 +86,7 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
const clientSizeWithoutRounding = hostClientSize.h + (hostBCR.height - hostOffsetSize.h); const clientSizeWithoutRounding = hostClientSize.h + (hostBCR.height - hostOffsetSize.h);
style(_viewport, { style(_viewport, {
maxHeight: clientSizeWithoutRounding + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0) - paddingAbsoluteVertical, height: clientSizeWithoutRounding + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0) - paddingAbsoluteVertical,
}); });
} }
}; };
@@ -193,7 +188,7 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
} }
} }
} else { } else {
style<ViewportArrangeCustomCssProps>(_viewport, { style<'--viewport-arrange-width' | '--viewport-arrange-height'>(_viewport, {
'--viewport-arrange-width': arrangeSize.w, '--viewport-arrange-width': arrangeSize.w,
'--viewport-arrange-height': arrangeSize.h, '--viewport-arrange-height': arrangeSize.h,
}); });
@@ -232,18 +227,19 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
} }
}; };
const undoOverlaidScrollbarsHiding = () => { const undoOverlaidScrollbarsHiding = (adjustFlexboxGlue?: boolean) => {
const paddingStyle = _getViewportPaddingStyle(); let paddingStyle = _getViewportPaddingStyle();
const viewportStyle = {
marginTop: '', if (adjustFlexboxGlue) {
marginRight: '', paddingStyle = {
marginBottom: '', ...paddingStyle,
marginLeft: '', height: '',
...paddingStyle, };
}; }
const prevStyle = style(_viewport, keys(viewportStyle));
const prevStyle = style(_viewport, keys(paddingStyle));
removeClass(_viewport, classNameViewportArrange); removeClass(_viewport, classNameViewportArrange);
style(_viewport, viewportStyle); style(_viewport, paddingStyle);
return () => { return () => {
style(_viewport, prevStyle); style(_viewport, prevStyle);
@@ -281,7 +277,7 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
} }
if (_sizeChanged || _paddingStyleChanged || _contentMutation || directionChanged) { if (_sizeChanged || _paddingStyleChanged || _contentMutation || directionChanged) {
const redoOverlaidScrollbarsHiding = viewportArrange ? undoOverlaidScrollbarsHiding() : noop; const redoOverlaidScrollbarsHiding = viewportArrange ? undoOverlaidScrollbarsHiding(adjustFlexboxGlue) : noop;
const contentSize = clientSize(_viewport); const contentSize = clientSize(_viewport);
const viewportRect = getBoundingClientRect(_viewport); const viewportRect = getBoundingClientRect(_viewport);
const viewportOffsetSize = offsetSize(_viewport); const viewportOffsetSize = offsetSize(_viewport);
packages/overlayscrollbars/src/lifecycles/structureLifecycle.ts
+3 -3
View File
@@ -61,9 +61,9 @@ export const createStructureLifecycle = (lifecycleHub: LifecycleHub): Lifecycle
style(_padding, { style(_padding, {
top: paddingStyle.t, top: paddingStyle.t,
left: paddingStyle.l, left: paddingStyle.l,
'margin-right': paddingStyle.r, marginRight: paddingStyle.r,
'margin-bottom': paddingStyle.b, marginBottom: paddingStyle.b,
'max-width': `calc(100% + ${paddingStyle.r * -1}px)`, maxWidth: `calc(100% + ${paddingStyle.r * -1}px)`,
}); });
} }
packages/overlayscrollbars/src/overlayscrollbars.scss
+13 -14
View File
@@ -90,15 +90,15 @@
.os-padding { .os-padding {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: row; flex-direction: row !important;
flex-wrap: nowrap; flex-wrap: nowrap !important;
} }
.os-padding, .os-padding,
.os-viewport { .os-viewport {
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
flex: auto; flex: auto !important;
height: auto; height: auto;
width: 100%; width: 100%;
padding: 0; padding: 0;
@@ -106,21 +106,20 @@
border: none; border: none;
overflow: visible; overflow: visible;
max-width: 100%; max-width: 100%;
z-index: 0;
} }
.os-viewport { .os-viewport {
--viewport-arrange-width: 0; --viewport-arrange-width: 0;
--viewport-arrange-height: 0; --viewport-arrange-height: 0;
}
.os-viewport-arrange::before { &.os-viewport-arrange::before {
content: ''; content: '';
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
z-index: -1; z-index: -1;
min-width: 1px; min-width: 1px;
min-height: 1px; min-height: 1px;
width: var(--viewport-arrange-width); width: var(--viewport-arrange-width);
height: var(--viewport-arrange-height); height: var(--viewport-arrange-height);
}
} }
packages/overlayscrollbars/src/typings.ts
+2 -2
View File
@@ -1,7 +1,7 @@
export type PlainObject<T = any> = { [name: string]: T }; export type PlainObject<T = any> = { [name: string]: T };
export type StyleObject<CustomCssProps = {}> = { export type StyleObject<CustomCssProps = ''> = {
[K in keyof (CSSStyleDeclaration & CustomCssProps)]?: string | number; [Key in (keyof CSSStyleDeclaration | (CustomCssProps extends string ? CustomCssProps : ''))]?: string | number;
} }
export type InternalVersionOf<T> = { export type InternalVersionOf<T> = {
packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts
+1 -1
View File
@@ -4,7 +4,7 @@ import { createDiv, appendChildren, parent, style, on, off, addClass, WH, XY, cl
import { OverlayScrollbars } from 'overlayscrollbars/OverlayScrollbars'; import { OverlayScrollbars } from 'overlayscrollbars/OverlayScrollbars';
const targetElm = document.querySelector('#target') as HTMLElement; const targetElm = document.querySelector('#target') as HTMLElement;
window.os = OverlayScrollbars({ target: targetElm, padding: null }); window.os = OverlayScrollbars({ target: targetElm, padding: null, content: null });
export const resize = (element: HTMLElement) => { export const resize = (element: HTMLElement) => {
const strMouseTouchDownEvent = 'mousedown touchstart'; const strMouseTouchDownEvent = 'mousedown touchstart';
packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.scss
+1 -1
View File
@@ -35,7 +35,7 @@ body {
min-width: 200px; min-width: 200px;
max-height: 300px; max-height: 300px;
max-width: 320px; max-width: 320px;
//padding: 5px 50px 15px 20px; padding: 5px 50px 15px 20px;
} }
#resize { #resize {
packages/overlayscrollbars/tests/jsdom/support/dom/style.test.ts
+4 -2
View File
@@ -36,8 +36,10 @@ describe('dom style', () => {
style(document.body, { width: '123px' }); style(document.body, { width: '123px' });
expect(document.body.style.width).toBe('123px'); expect(document.body.style.width).toBe('123px');
interface O {}
expect(document.body.style.getPropertyValue('--custom')).toBe(''); expect(document.body.style.getPropertyValue('--custom')).toBe('');
style(document.body, { '--custom': '123px' }); style<'--custom'>(document.body, { '--custom': '123px' });
expect(document.body.style.getPropertyValue('--custom')).toBe('123px'); expect(document.body.style.getPropertyValue('--custom')).toBe('123px');
}); });
@@ -60,7 +62,7 @@ describe('dom style', () => {
expect(document.body.style.zIndex).toBe(''); expect(document.body.style.zIndex).toBe('');
expect(document.body.style.lineHeight).toBe(''); expect(document.body.style.lineHeight).toBe('');
expect(document.body.style.getPropertyValue('--custom')).toBe(''); expect(document.body.style.getPropertyValue('--custom')).toBe('');
style(document.body, { width: '123px', height: 321, opacity: '0.5', zIndex: 1, '--custom': '123px' }); style<'--custom'>(document.body, { width: '123px', height: 321, opacity: '0.5', zIndex: 1, '--custom': '123px' });
expect(document.body.style.width).toBe('123px'); expect(document.body.style.width).toBe('123px');
expect(document.body.style.height).toBe('321px'); expect(document.body.style.height).toBe('321px');
expect(document.body.style.opacity).toBe('0.5'); expect(document.body.style.opacity).toBe('0.5');