From 20e7b351c715e0dae481c745c9913c78faf41dc7 Mon Sep 17 00:00:00 2001 From: Rene Date: Sun, 28 Mar 2021 23:21:25 +0200 Subject: [PATCH] improve code --- .../src/lifecycles/lifecycleHub.ts | 15 ++++--- .../src/lifecycles/overflowLifecycle.ts | 7 ++-- .../structureLifecycle/index.browser.ts | 39 ++++++++++++------- 3 files changed, 38 insertions(+), 23 deletions(-) diff --git a/packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts b/packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts index bb14471..c26f34f 100644 --- a/packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts +++ b/packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts @@ -33,7 +33,12 @@ const heightIntrinsicCacheValuesFallback: CacheValues = { export const createLifecycleHub = (options: Options, structureSetup: StructureSetup): LifecycleHubInstance => { const { _host, _viewport, _content } = structureSetup._targetObj; - const environment: Environment = getEnvironment(); + const { + _nativeScrollbarStyling, + _flexboxGlue, + _addListener: addEnvironmentListener, + _removeListener: removeEnvironmentListener, + } = getEnvironment(); const lifecycles: LifecycleUpdateFunction[] = []; const instance: LifecycleHub = { _options: options, @@ -99,7 +104,7 @@ export const createLifecycleHub = (options: Options, structureSetup: StructureSe }); }; - const sizeObserver = createSizeObserver(_host, onSizeChanged, { _appear: true, _direction: true }); + const sizeObserver = createSizeObserver(_host, onSizeChanged, { _appear: true, _direction: !_nativeScrollbarStyling }); const trinsicObserver = createTrinsicObserver(_host, onTrinsicChanged); const hostMutationObserver = createDOMObserver(_host, onHostMutation, { _styleChangingAttributes: attrs, @@ -131,14 +136,14 @@ export const createLifecycleHub = (options: Options, structureSetup: StructureSe runLifecycles(null, changedOptions, force); }; const envUpdateListener = updateAll.bind(null, null, true); - environment._addListener(envUpdateListener); + addEnvironmentListener(envUpdateListener); - console.log('flexboxglue', environment._flexboxGlue); + console.log('flexboxGlue', _flexboxGlue); return { _update: updateAll, _destroy() { - environment._removeListener(envUpdateListener); + removeEnvironmentListener(envUpdateListener); }, }; }; diff --git a/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts b/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts index be24021..ec4a370 100644 --- a/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts +++ b/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts @@ -74,7 +74,6 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): LifecycleUp const scrollY = viewportStyleObj.overflowY === 'scroll'; const horizontalMarginKey = directionIsRTL ? 'marginLeft' : 'marginRight'; const horizontalBorderKey = directionIsRTL ? 'borderLeft' : 'borderRight'; - const scrollXY = scrollY && scrollX; const overlaidHideOffset = _content && !showNativeOverlaidScrollbars ? overlaidScrollbarsHideOffset : 0; const scrollbarsHideOffset = { x: overlaidX ? overlaidHideOffset : _nativeScrollbarSize.x, @@ -95,10 +94,9 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): LifecycleUp } if (_contentArrange) { - const condition = scrollXY && !showNativeOverlaidScrollbars; style(_contentArrange, { - width: condition ? `${overlaidHideOffset + contentScrollSize.w}px` : '', - height: condition ? `${overlaidHideOffset + contentScrollSize.h}px` : '', + width: scrollY && !showNativeOverlaidScrollbars ? `${overlaidHideOffset + contentScrollSize.w}px` : '', + height: scrollX && !showNativeOverlaidScrollbars ? `${overlaidHideOffset + contentScrollSize.h}px` : '', }); } } @@ -226,6 +224,7 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): LifecycleUp // TODO: enlargen viewport if div too small for firefox scrollbar hiding behavior // TODO: Test without content // TODO: Test without padding + // TODO: hide host || padding overflow if scroll x or y style(_viewport, viewportStyle); style(_content, contentStyle); diff --git a/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts b/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts index 1aad378..9a6c620 100644 --- a/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts +++ b/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts @@ -7,6 +7,10 @@ const targetElm = document.querySelector('#target') as HTMLElement; window.os = OverlayScrollbars(targetElm); export const resize = (element: HTMLElement) => { + const strMouseTouchDownEvent = 'mousedown touchstart'; + const strMouseTouchUpEvent = 'mouseup touchend'; + const strMouseTouchMoveEvent = 'mousemove touchmove'; + const strSelectStartEvent = 'selectstart'; const dragStartSize: WH = { w: 0, h: 0 }; const dragStartPosition: XY = { x: 0, y: 0 }; const resizeBtn = createDiv('resizeBtn'); @@ -21,30 +25,37 @@ export const resize = (element: HTMLElement) => { return false; }; - const resizerResize = (event: MouseEvent) => { + const resizerResize = (event: MouseEvent | TouchEvent) => { + const isTouchEvent = (event as TouchEvent).touches !== undefined; + const mouseOffsetHolder = isTouchEvent ? (event as TouchEvent).touches[0] : (event as MouseEvent); + const sizeStyle = { - width: dragStartSize.w + event.pageX - dragStartPosition.x, - height: dragStartSize.h + event.pageY - dragStartPosition.y, + width: dragStartSize.w + mouseOffsetHolder.pageX - dragStartPosition.x, + height: dragStartSize.h + mouseOffsetHolder.pageY - dragStartPosition.y, }; style(dragResizer, sizeStyle); event.stopPropagation(); }; - const resizerResized = (event: MouseEvent) => { - off(document, 'selectstart', onSelectStart); - off(document, 'mousemove', resizerResize); - off(document, 'mouseup', resizerResized); + const resizerResized = () => { + off(document, strSelectStartEvent, onSelectStart); + off(document, strMouseTouchMoveEvent, resizerResize); + off(document, strMouseTouchUpEvent, resizerResized); dragResizer = undefined; dragResizeBtn = undefined; }; - on(resizeBtn, 'mousedown', (event: MouseEvent) => { + on(resizeBtn, strMouseTouchDownEvent, (event: MouseEvent | TouchEvent) => { const { currentTarget } = event; - if (event.buttons === 1 || event.which === 1) { - dragStartPosition.x = event.pageX; - dragStartPosition.y = event.pageY; + const correctButton = (event as MouseEvent).buttons === 1 || event.which === 1; + const isTouchEvent = (event as TouchEvent).touches !== undefined; + const mouseOffsetHolder = isTouchEvent ? (event as TouchEvent).touches[0] : (event as MouseEvent); + + if (correctButton || isTouchEvent) { + dragStartPosition.x = mouseOffsetHolder.pageX; + dragStartPosition.y = mouseOffsetHolder.pageY; dragResizeBtn = currentTarget as HTMLElement; dragResizer = parent(currentTarget as HTMLElement) as HTMLElement; @@ -53,9 +64,9 @@ export const resize = (element: HTMLElement) => { dragStartSize.w = cSize.w; dragStartSize.h = cSize.h; - on(document, 'selectstart', onSelectStart); - on(document, 'mousemove', resizerResize); - on(document, 'mouseup', resizerResized); + on(document, strSelectStartEvent, onSelectStart); + on(document, strMouseTouchMoveEvent, resizerResize); + on(document, strMouseTouchUpEvent, resizerResized); event.preventDefault(); event.stopPropagation();