From cd9c01a588c33221770e3d22e1f2b8c13d446eb8 Mon Sep 17 00:00:00 2001 From: Rene Date: Sun, 17 Jul 2022 22:00:15 +0200 Subject: [PATCH] improve code --- .../scrollbarsHidingPlugin.ts | 4 ++- .../structureSetup.observers.ts | 10 ++++-- .../src/support/dom/class.ts | 33 ++++++++----------- .../src/support/dom/traversal.ts | 6 ++-- .../src/support/utils/array.ts | 16 ++++----- 5 files changed, 35 insertions(+), 34 deletions(-) diff --git a/packages/overlayscrollbars/src/plugins/scrollbarsHidingPlugin/scrollbarsHidingPlugin.ts b/packages/overlayscrollbars/src/plugins/scrollbarsHidingPlugin/scrollbarsHidingPlugin.ts index 9863b27..0a6326e 100644 --- a/packages/overlayscrollbars/src/plugins/scrollbarsHidingPlugin/scrollbarsHidingPlugin.ts +++ b/packages/overlayscrollbars/src/plugins/scrollbarsHidingPlugin/scrollbarsHidingPlugin.ts @@ -252,7 +252,9 @@ export const scrollbarsHidingPlugin: Plugin = { h: sizeNew.h - size.h, }; - if (deltaSize.w === 0 && deltaSize.h === 0) return; + if (deltaSize.w === 0 && deltaSize.h === 0) { + return; + } const deltaAbsSize = { w: abs(deltaSize.w), diff --git a/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.observers.ts b/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.observers.ts index 43200ce..4a6ad6b 100644 --- a/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.observers.ts +++ b/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.observers.ts @@ -17,6 +17,7 @@ import { fractionalSize, isFunction, ResizeObserverConstructor, + closest, } from 'support'; import { getEnvironment } from 'environment'; import { @@ -24,6 +25,7 @@ import { dataValueHostOverflowVisible, classNameViewport, classNameOverflowVisible, + classNameScrollbar, } from 'classnames'; import { createSizeObserver, SizeObserverCallbackParams } from 'observers/sizeObserver'; import { createTrinsicObserver } from 'observers/trinsicObserver'; @@ -231,9 +233,13 @@ export const createStructureSetupObservers = ( const { target, attributeName } = mutation; const ignore = !isNestedTarget && attributeName - ? liesBetween(target as Element, hostSelector, viewportSelector) + ? liesBetween(target, hostSelector, viewportSelector) : false; - return ignore || !!ignoreMutationFromOptions(mutation); + return ( + ignore || + !!closest(target, `.${classNameScrollbar}`) || // ignore explicitely all scrollbar elements + !!ignoreMutationFromOptions(mutation) + ); }, } ); diff --git a/packages/overlayscrollbars/src/support/dom/class.ts b/packages/overlayscrollbars/src/support/dom/class.ts index 214e2d9..54bbf6a 100644 --- a/packages/overlayscrollbars/src/support/dom/class.ts +++ b/packages/overlayscrollbars/src/support/dom/class.ts @@ -2,21 +2,25 @@ import { isString } from 'support/utils/types'; import { each } from 'support/utils/array'; import { keys } from 'support/utils/object'; +type ClassContainingElement = Node | Element | false | null | undefined; +type ClassName = string | false | null | undefined; + const rnothtmlwhite = /[^\x20\t\r\n\f]+/g; const classListAction = ( - elm: Element | false | null | undefined, - className: string | false | null | undefined, + elm: ClassContainingElement, + className: ClassName, action: (elmClassList: DOMTokenList, clazz: string) => boolean | void ): boolean => { + const classList = elm && (elm as Element).classList; let clazz: string; let i = 0; let result = false; - if (elm && className && isString(className)) { + if (classList && className && isString(className)) { const classes: Array = className.match(rnothtmlwhite) || []; result = classes.length > 0; while ((clazz = classes[i++])) { - result = !!action(elm.classList, clazz) && result; + result = !!action(classList, clazz) && result; } } return result; @@ -27,20 +31,15 @@ const classListAction = ( * @param elm The element. * @param className The class name(s). */ -export const hasClass = ( - elm: Element | false | null | undefined, - className: string | false | null | undefined -): boolean => classListAction(elm, className, (classList, clazz) => classList.contains(clazz)); +export const hasClass = (elm: ClassContainingElement, className: ClassName): boolean => + classListAction(elm, className, (classList, clazz) => classList.contains(clazz)); /** * Removes the given class name(s) from the given element. * @param elm The element. * @param className The class name(s) which shall be removed. (separated by spaces) */ -export const removeClass = ( - elm: Element | false | null | undefined, - className: string | false | null | undefined -): void => { +export const removeClass = (elm: ClassContainingElement, className: ClassName): void => { classListAction(elm, className, (classList, clazz) => classList.remove(clazz)); }; @@ -50,10 +49,7 @@ export const removeClass = ( * @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 | false | null | undefined -): (() => void) => { +export const addClass = (elm: ClassContainingElement, className: ClassName): (() => void) => { classListAction(elm, className, (classList, clazz) => classList.add(clazz)); return removeClass.bind(0, elm, className); }; @@ -63,10 +59,7 @@ export const addClass = ( * @param classNameA ClassName A. * @param classNameB ClassName B. */ -export const diffClass = ( - classNameA: string | null | undefined, - classNameB: string | null | undefined -) => { +export const diffClass = (classNameA: ClassName, classNameB: ClassName) => { const classNameASplit = classNameA && classNameA.split(' '); const classNameBSplit = classNameB && classNameB.split(' '); const tempObj = {}; diff --git a/packages/overlayscrollbars/src/support/dom/traversal.ts b/packages/overlayscrollbars/src/support/dom/traversal.ts index 8d358eb..cc1db86 100644 --- a/packages/overlayscrollbars/src/support/dom/traversal.ts +++ b/packages/overlayscrollbars/src/support/dom/traversal.ts @@ -1,8 +1,8 @@ import { isElement } from 'support/utils/types'; import { push, from } from 'support/utils/array'; -type InputElementType = Element | Node | false | null | undefined; -type OutputElementType = Element | null; +type InputElementType = Node | Element | Node | false | null | undefined; +type OutputElementType = Node | Element | null; const elmPrototype = Element.prototype; @@ -74,7 +74,7 @@ const contents = (elm: InputElementType): ReadonlyArray => */ const parent = (elm: InputElementType): OutputElementType => (elm ? elm.parentElement : null); -const closest = (elm: InputElementType, selector: string): OutputElementType => { +export const closest = (elm: InputElementType, selector: string): OutputElementType => { if (isElement(elm)) { const closestFn = elmPrototype.closest; if (closestFn) { diff --git a/packages/overlayscrollbars/src/support/utils/array.ts b/packages/overlayscrollbars/src/support/utils/array.ts index 53e3be7..2832f24 100644 --- a/packages/overlayscrollbars/src/support/utils/array.ts +++ b/packages/overlayscrollbars/src/support/utils/array.ts @@ -15,29 +15,29 @@ export function each( callback: (value: T, indexOrKey: number, source: Array) => boolean | unknown ): Array | ReadonlyArray; export function each( - array: Array | ReadonlyArray | null | undefined, + array: Array | ReadonlyArray | false | null | undefined, callback: (value: T, indexOrKey: number, source: Array) => boolean | unknown -): Array | ReadonlyArray | null | undefined; +): Array | ReadonlyArray | false | null | undefined; export function each( arrayLikeObject: ArrayLike, callback: (value: T, indexOrKey: number, source: ArrayLike) => boolean | unknown ): ArrayLike; export function each( - arrayLikeObject: ArrayLike | null | undefined, + arrayLikeObject: ArrayLike | false | null | undefined, callback: (value: T, indexOrKey: number, source: ArrayLike) => boolean | unknown -): ArrayLike | null | undefined; +): ArrayLike | false | null | undefined; export function each( obj: PlainObject, callback: (value: any, indexOrKey: string, source: PlainObject) => boolean | unknown ): PlainObject; export function each( - obj: PlainObject | null | undefined, + obj: PlainObject | false | null | undefined, callback: (value: any, indexOrKey: string, source: PlainObject) => boolean | unknown -): PlainObject | null | undefined; +): PlainObject | false | null | undefined; export function each( - source: Array | ArrayLike | ReadonlyArray | PlainObject | null | undefined, + source: Array | ArrayLike | ReadonlyArray | PlainObject | false | null | undefined, callback: (value: T, indexOrKey: any, source: any) => boolean | unknown -): Array | ArrayLike | ReadonlyArray | PlainObject | null | undefined { +): Array | ArrayLike | ReadonlyArray | PlainObject | false | null | undefined { if (isArrayLike(source)) { for (let i = 0; i < source.length; i++) { if (callback(source[i], i, source) === false) {