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

add observers destroy and optimizations

Browse Source
This commit is contained in:
Rene
2021-05-15 00:45:11 +02:00
parent c529d1452c
commit a5da190e76
8 changed files with 89 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts
+9 -10
View File
@@ -10,6 +10,12 @@ import { StyleObject } from 'typings';
export type LifecycleCheckOption = <T>(path: string) => LifecycleOptionInfo<T>;
export type Lifecycle = (
updateHints: LifecycleUpdateHints,
checkOption: LifecycleCheckOption,
force: boolean
) => Partial<LifecycleAdaptiveUpdateHints> | void;
export interface LifecycleOptionInfo<T> {
readonly _value: T;
_changed: boolean;
@@ -37,12 +43,6 @@ export interface LifecycleUpdateHints extends LifecycleAdaptiveUpdateHints {
_heightIntrinsic: CacheValues<boolean>;
}
export type Lifecycle = (
updateHints: LifecycleUpdateHints,
checkOption: LifecycleCheckOption,
force: boolean
) => Partial<LifecycleAdaptiveUpdateHints> | void;
export interface LifecycleHubState {
_overflowAmount: WH<number>;
}
@@ -185,11 +185,9 @@ export const createLifecycleHub = (options: OSOptions, structureSetup: Structure
options.callbacks.onUpdated();
}
};
const { _sizeObserver, _trinsicObserver, _updateObserverOptions } = lifecycleHubOservers(instance, updateLifecycles);
const { _sizeObserver, _trinsicObserver, _updateObserverOptions, _destroy: destroyObservers } = lifecycleHubOservers(instance, updateLifecycles);
const update = (changedOptions?: Partial<OSOptions> | null, force?: boolean) => {
updateLifecycles(null, changedOptions, force);
};
const update = (changedOptions?: Partial<OSOptions> | null, force?: boolean) => updateLifecycles(null, changedOptions, force);
const envUpdateListener = update.bind(null, null, true);
addEnvironmentListener(envUpdateListener);
@@ -201,6 +199,7 @@ export const createLifecycleHub = (options: OSOptions, structureSetup: Structure
_overflowAmount: lifecycleCommunication._viewportOverflowAmount,
}),
_destroy() {
destroyObservers();
removeEnvironmentListener(envUpdateListener);
},
};
packages/overlayscrollbars/src/lifecycles/lifecycleHubObservers.ts
+32 -7
View File
@@ -1,4 +1,4 @@
import { CacheValues, diffClass, debounce, isArray, isNumber } from 'support';
import { CacheValues, diffClass, debounce, isArray, isNumber, each, indexOf, isString, attr, removeAttr } from 'support';
import { getEnvironment } from 'environment';
import { createSizeObserver, SizeObserverCallbackParams } from 'observers/sizeObserver';
import { createTrinsicObserver } from 'observers/trinsicObserver';
@@ -8,7 +8,6 @@ import { LifecycleHub, LifecycleCheckOption, LifecycleUpdateHints } from 'lifecy
//const hostSelector = `.${classNameHost}`;
// TODO: observer textarea attrs if textarea
// TODO: tabindex, etc. attributes for viewport
// TODO: test _ignoreContentChange & _ignoreNestedTargetChange for content dom observer
// TODO: test _ignoreTargetChange for target dom observer
@@ -30,6 +29,7 @@ const ignoreTargetChange = (target: Node, attrName: string, oldValue: string | n
export const lifecycleHubOservers = (instance: LifecycleHub, updateLifecycles: (updateHints?: Partial<LifecycleUpdateHints> | null) => unknown) => {
let debounceTimeout: number | false | undefined;
let debounceMaxDelay: number | false | undefined;
let contentMutationObserver: DOMObserver | undefined;
const { _structureSetup } = instance;
const { _targetObj, _targetCtx } = _structureSetup;
const { _host, _viewport, _content } = _targetObj;
@@ -54,6 +54,18 @@ export const lifecycleHubOservers = (instance: LifecycleHub, updateLifecycles: (
},
});
const updateViewportAttrsFromHost = (attributes?: string[]) => {
each(attributes || viewportAttrsFromTarget, (attribute) => {
if (indexOf(viewportAttrsFromTarget, attribute) > -1) {
const hostAttr = attr(_host, attribute);
if (isString(hostAttr)) {
attr(_viewport, attribute, hostAttr);
} else {
removeAttr(_viewport, attribute);
}
}
});
};
const onTrinsicChanged = (heightIntrinsic: CacheValues<boolean>) => {
updateLifecycles({
_heightIntrinsic: heightIntrinsic,
@@ -73,18 +85,23 @@ export const lifecycleHubOservers = (instance: LifecycleHub, updateLifecycles: (
_contentMutation: true,
});
};
const onHostMutation = updateLifecyclesWithDebouncedAdaptiveUpdateHints.bind(0, {
_hostMutation: true,
}) as () => any;
const onHostMutation = (targetChangedAttrs: string[], targetStyleChanged: boolean) => {
if (targetStyleChanged) {
updateLifecyclesWithDebouncedAdaptiveUpdateHints({
_hostMutation: true,
});
} else {
updateViewportAttrsFromHost(targetChangedAttrs);
}
};
const trinsicObserver = (_content || !_flexboxGlue) && createTrinsicObserver(_host, onTrinsicChanged);
const sizeObserver = createSizeObserver(_host, onSizeChanged, { _appear: true, _direction: !_nativeScrollbarStyling });
const hostMutationObserver = createDOMObserver(_host, false, onHostMutation, {
_styleChangingAttributes: baseStyleChangingAttrs,
_attributes: baseStyleChangingAttrs,
_attributes: baseStyleChangingAttrs.concat(viewportAttrsFromTarget),
_ignoreTargetChange: ignoreTargetChange,
});
let contentMutationObserver: DOMObserver | undefined;
const updateOptions = (checkOption: LifecycleCheckOption) => {
const { _value: elementEvents, _changed: elementEventsChanged } = checkOption<Array<[string, string]> | null>('updating.elementEvents');
@@ -133,9 +150,17 @@ export const lifecycleHubOservers = (instance: LifecycleHub, updateLifecycles: (
}
};
updateViewportAttrsFromHost();
return {
_trinsicObserver: trinsicObserver,
_sizeObserver: sizeObserver,
_updateObserverOptions: updateOptions,
_destroy() {
contentMutationObserver && contentMutationObserver._destroy();
trinsicObserver && trinsicObserver._destroy();
sizeObserver._destroy();
hostMutationObserver._destroy();
},
};
};
packages/overlayscrollbars/src/observers/domObserver.ts
+3 -1
View File
@@ -77,7 +77,9 @@ const createEventContentChange = (target: Element, eventContentChange: DOMObserv
let map: Map<Node, string> | undefined;
const _destroy = () => {
if (map) {
map.forEach((eventName: string, elm: Node) => off(elm, eventName, callback));
map.forEach((eventName: string, elm: Node) => {
off(elm, eventName, callback);
});
map.clear();
}
};
packages/overlayscrollbars/src/observers/sizeObserver.ts
+3 -1
View File
@@ -146,7 +146,9 @@ export const createSizeObserver = (
if (ResizeObserverConstructor) {
const resizeObserverInstance = new ResizeObserverConstructor(onSizeChangedCallbackProxy);
resizeObserverInstance.observe(listenerElement);
push(offListeners, () => resizeObserverInstance.disconnect());
push(offListeners, () => {
resizeObserverInstance.disconnect();
});
} else {
const observerElementChildren = createDOM(
`<div class="${classNameSizeObserverListenerItem}" dir="ltr"><div class="${classNameSizeObserverListenerItem}"><div class="${classNameSizeObserverListenerItemFinal}"></div></div><div class="${classNameSizeObserverListenerItem}"><div class="${classNameSizeObserverListenerItemFinal}" style="width: 200%; height: 200%"></div></div></div>`
packages/overlayscrollbars/src/observers/trinsicObserver.ts
+3 -1
View File
@@ -64,7 +64,9 @@ export const createTrinsicObserver = (
{ root: target }
);
intersectionObserverInstance.observe(trinsicObserver);
push(offListeners, () => intersectionObserverInstance.disconnect());
push(offListeners, () => {
intersectionObserverInstance.disconnect();
});
} else {
const onSizeChanged = () => {
const newSize = offsetSize(trinsicObserver);
packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts
+2 -2
View File
@@ -285,8 +285,8 @@ const checkMetrics = async (checkComparison: CheckComparisonObj) => {
await timeout(1);
// steady pace for ie11 or it will freeze progressively
if (msie11) {
// steady pace for ie11 / edge or it will freeze progressively
if (msie11 || msedge) {
await timeout(25);
}
});
packages/overlayscrollbars/tests/browser/observers/domObserver/index.browser.ts
+10 -10
View File
@@ -632,17 +632,17 @@ const start = async () => {
await addRemoveImgElmsFn();
targetDomObserver._update();
targetDomObserver._destroy();
targetDomObserver._destroy();
targetDomObserver._update();
contentDomObserver._update();
contentDomObserver._destroy();
contentDomObserver._destroy();
contentDomObserver._update();
setTestResult(true);
targetDomObserver._update();
targetDomObserver._destroy();
targetDomObserver._destroy();
targetDomObserver._update();
contentDomObserver._update();
contentDomObserver._destroy();
contentDomObserver._destroy();
contentDomObserver._update();
};
startBtn?.addEventListener('click', start);