This commit is contained in:
Rene
2021-05-15 00:47:09 +02:00
parent a5da190e76
commit 3e743ac1b9
8 changed files with 120 additions and 31 deletions
+59 -14
View File
@@ -1221,7 +1221,9 @@ const createSizeObserver = (target, onSizeChangedCallback, options) => {
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>`
@@ -1367,7 +1369,9 @@ const createTrinsicObserver = (target, onTrinsicChangedCallback) => {
}
);
intersectionObserverInstance.observe(trinsicObserver);
push(offListeners, () => intersectionObserverInstance.disconnect());
push(offListeners, () => {
intersectionObserverInstance.disconnect();
});
} else {
const onSizeChanged = () => {
const newSize = offsetSize(trinsicObserver);
@@ -1402,7 +1406,9 @@ const createEventContentChange = (target, eventContentChange, callback) => {
const _destroy = () => {
if (map) {
map.forEach((eventName, elm) => off(elm, eventName, callback));
map.forEach((eventName, elm) => {
off(elm, eventName, callback);
});
map.clear();
}
};
@@ -1569,6 +1575,7 @@ const createDOMObserver = (target, isContentObserver, callback, options) => {
};
const ignorePrefix = 'os-';
const viewportAttrsFromTarget = ['tabindex'];
const baseStyleChangingAttrsTextarea = ['wrap', 'cols', 'rows'];
const baseStyleChangingAttrs = ['id', 'class', 'style', 'open'];
@@ -1584,6 +1591,7 @@ const ignoreTargetChange = (target, attrName, oldValue, newValue) => {
const lifecycleHubOservers = (instance, updateLifecycles) => {
let debounceTimeout;
let debounceMaxDelay;
let contentMutationObserver;
const { _structureSetup } = instance;
const { _targetObj, _targetCtx } = _structureSetup;
const { _host, _viewport, _content } = _targetObj;
@@ -1608,6 +1616,20 @@ const lifecycleHubOservers = (instance, updateLifecycles) => {
},
});
const updateViewportAttrsFromHost = (attributes) => {
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) => {
updateLifecycles({
_heightIntrinsic: heightIntrinsic,
@@ -1629,9 +1651,16 @@ const lifecycleHubOservers = (instance, updateLifecycles) => {
});
};
const onHostMutation = updateLifecyclesWithDebouncedAdaptiveUpdateHints.bind(0, {
_hostMutation: true,
});
const onHostMutation = (targetChangedAttrs, targetStyleChanged) => {
if (targetStyleChanged) {
updateLifecyclesWithDebouncedAdaptiveUpdateHints({
_hostMutation: true,
});
} else {
updateViewportAttrsFromHost(targetChangedAttrs);
}
};
const trinsicObserver = (_content || !_flexboxGlue) && createTrinsicObserver(_host, onTrinsicChanged);
const sizeObserver = createSizeObserver(_host, onSizeChanged, {
_appear: true,
@@ -1639,10 +1668,9 @@ const lifecycleHubOservers = (instance, updateLifecycles) => {
});
const hostMutationObserver = createDOMObserver(_host, false, onHostMutation, {
_styleChangingAttributes: baseStyleChangingAttrs,
_attributes: baseStyleChangingAttrs,
_attributes: baseStyleChangingAttrs.concat(viewportAttrsFromTarget),
_ignoreTargetChange: ignoreTargetChange,
});
let contentMutationObserver;
const updateOptions = (checkOption) => {
const { _value: elementEvents, _changed: elementEventsChanged } = checkOption('updating.elementEvents');
@@ -1683,10 +1711,20 @@ const lifecycleHubOservers = (instance, updateLifecycles) => {
}
};
updateViewportAttrsFromHost();
return {
_trinsicObserver: trinsicObserver,
_sizeObserver: sizeObserver,
_updateObserverOptions: updateOptions,
_destroy() {
contentMutationObserver && contentMutationObserver._destroy();
trinsicObserver && trinsicObserver._destroy();
sizeObserver._destroy();
hostMutationObserver._destroy();
},
};
};
@@ -1788,6 +1826,8 @@ const sizeFraction = (elm) => {
};
};
const fractionalPixelRatioTollerance = () => (window.devicePixelRatio % 1 === 0 ? 0 : 1);
const setAxisOverflowStyle = (horizontal, overflowAmount, behavior, styleObj) => {
const overflowKey = horizontal ? 'overflowX' : 'overflowY';
const behaviorIsVisible = behavior.indexOf('visible') === 0;
@@ -1822,8 +1862,14 @@ const createOverflowLifecycle = (lifecycleHub) => {
);
const { _update: updateOverflowAmountCache, _current: getCurrentOverflowAmountCache } = createCache(
({ _viewportScrollSize, _viewportClientSize, _viewportSizeFraction }) => ({
w: round$1(max(0, _viewportScrollSize.w - _viewportClientSize.w) - max(0, _viewportSizeFraction.w)),
h: round$1(max(0, _viewportScrollSize.h - _viewportClientSize.h) - max(0, _viewportSizeFraction.h)),
w: max(
0,
round$1(max(0, _viewportScrollSize.w - _viewportClientSize.w) - (fractionalPixelRatioTollerance() || max(0, _viewportSizeFraction.w)))
),
h: max(
0,
round$1(max(0, _viewportScrollSize.h - _viewportClientSize.h) - (fractionalPixelRatioTollerance() || max(0, _viewportSizeFraction.h)))
),
}),
whCacheOptions
);
@@ -2233,11 +2279,9 @@ const createLifecycleHub = (options, structureSetup) => {
}
};
const { _sizeObserver, _trinsicObserver, _updateObserverOptions } = lifecycleHubOservers(instance, updateLifecycles);
const { _sizeObserver, _trinsicObserver, _updateObserverOptions, _destroy: destroyObservers } = lifecycleHubOservers(instance, updateLifecycles);
const update = (changedOptions, force) => {
updateLifecycles(null, changedOptions, force);
};
const update = (changedOptions, force) => updateLifecycles(null, changedOptions, force);
const envUpdateListener = update.bind(null, null, true);
addEnvironmentListener(envUpdateListener);
@@ -2249,6 +2293,7 @@ const createLifecycleHub = (options, structureSetup) => {
}),
_destroy() {
destroyObservers();
removeEnvironmentListener(envUpdateListener);
},
};
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+55 -12
View File
@@ -1355,7 +1355,7 @@
var resizeObserverInstance = new ResizeObserverConstructor(onSizeChangedCallbackProxy);
resizeObserverInstance.observe(listenerElement);
push(offListeners, function () {
return resizeObserverInstance.disconnect();
resizeObserverInstance.disconnect();
});
} else {
var observerElementChildren = createDOM(
@@ -1519,7 +1519,7 @@
);
intersectionObserverInstance.observe(trinsicObserver);
push(offListeners, function () {
return intersectionObserverInstance.disconnect();
intersectionObserverInstance.disconnect();
});
} else {
var onSizeChanged = function onSizeChanged() {
@@ -1555,7 +1555,7 @@
var _destroy = function _destroy() {
if (map) {
map.forEach(function (eventName, elm) {
return off(elm, eventName, callback);
off(elm, eventName, callback);
});
map.clear();
}
@@ -1731,6 +1731,7 @@
};
var ignorePrefix = 'os-';
var viewportAttrsFromTarget = ['tabindex'];
var baseStyleChangingAttrsTextarea = ['wrap', 'cols', 'rows'];
var baseStyleChangingAttrs = ['id', 'class', 'style', 'open'];
@@ -1748,6 +1749,7 @@
var lifecycleHubOservers = function lifecycleHubOservers(instance, updateLifecycles) {
var debounceTimeout;
var debounceMaxDelay;
var contentMutationObserver;
var _structureSetup = instance._structureSetup;
var _targetObj = _structureSetup._targetObj,
_targetCtx = _structureSetup._targetCtx;
@@ -1788,6 +1790,20 @@
},
});
var updateViewportAttrsFromHost = function updateViewportAttrsFromHost(attributes) {
each(attributes || viewportAttrsFromTarget, function (attribute) {
if (indexOf(viewportAttrsFromTarget, attribute) > -1) {
var hostAttr = attr(_host, attribute);
if (isString(hostAttr)) {
attr(_viewport, attribute, hostAttr);
} else {
removeAttr(_viewport, attribute);
}
}
});
};
var onTrinsicChanged = function onTrinsicChanged(heightIntrinsic) {
updateLifecycles({
_heightIntrinsic: heightIntrinsic,
@@ -1812,9 +1828,16 @@
});
};
var onHostMutation = updateLifecyclesWithDebouncedAdaptiveUpdateHints.bind(0, {
_hostMutation: true,
});
var onHostMutation = function onHostMutation(targetChangedAttrs, targetStyleChanged) {
if (targetStyleChanged) {
updateLifecyclesWithDebouncedAdaptiveUpdateHints({
_hostMutation: true,
});
} else {
updateViewportAttrsFromHost(targetChangedAttrs);
}
};
var trinsicObserver = (_content || !_flexboxGlue) && createTrinsicObserver(_host, onTrinsicChanged);
var sizeObserver = createSizeObserver(_host, onSizeChanged, {
_appear: true,
@@ -1822,10 +1845,9 @@
});
var hostMutationObserver = createDOMObserver(_host, false, onHostMutation, {
_styleChangingAttributes: baseStyleChangingAttrs,
_attributes: baseStyleChangingAttrs,
_attributes: baseStyleChangingAttrs.concat(viewportAttrsFromTarget),
_ignoreTargetChange: ignoreTargetChange,
});
var contentMutationObserver;
var updateOptions = function updateOptions(checkOption) {
var _checkOption = checkOption('updating.elementEvents'),
@@ -1875,10 +1897,19 @@
}
};
updateViewportAttrsFromHost();
return {
_trinsicObserver: trinsicObserver,
_sizeObserver: sizeObserver,
_updateObserverOptions: updateOptions,
_destroy: function _destroy() {
contentMutationObserver && contentMutationObserver._destroy();
trinsicObserver && trinsicObserver._destroy();
sizeObserver._destroy();
hostMutationObserver._destroy();
},
};
};
@@ -2007,6 +2038,10 @@
};
};
var fractionalPixelRatioTollerance = function fractionalPixelRatioTollerance() {
return window.devicePixelRatio % 1 === 0 ? 0 : 1;
};
var setAxisOverflowStyle = function setAxisOverflowStyle(horizontal, overflowAmount, behavior, styleObj) {
var overflowKey = horizontal ? 'overflowX' : 'overflowY';
var behaviorIsVisible = behavior.indexOf('visible') === 0;
@@ -2051,8 +2086,14 @@
_viewportClientSize = _ref._viewportClientSize,
_viewportSizeFraction = _ref._viewportSizeFraction;
return {
w: round$1(max(0, _viewportScrollSize.w - _viewportClientSize.w) - max(0, _viewportSizeFraction.w)),
h: round$1(max(0, _viewportScrollSize.h - _viewportClientSize.h) - max(0, _viewportSizeFraction.h)),
w: max(
0,
round$1(max(0, _viewportScrollSize.w - _viewportClientSize.w) - (fractionalPixelRatioTollerance() || max(0, _viewportSizeFraction.w)))
),
h: max(
0,
round$1(max(0, _viewportScrollSize.h - _viewportClientSize.h) - (fractionalPixelRatioTollerance() || max(0, _viewportSizeFraction.h)))
),
};
}, whCacheOptions),
updateOverflowAmountCache = _createCache3._update,
@@ -2531,10 +2572,11 @@
var _lifecycleHubOservers = lifecycleHubOservers(instance, updateLifecycles),
_sizeObserver = _lifecycleHubOservers._sizeObserver,
_trinsicObserver = _lifecycleHubOservers._trinsicObserver,
_updateObserverOptions = _lifecycleHubOservers._updateObserverOptions;
_updateObserverOptions = _lifecycleHubOservers._updateObserverOptions,
destroyObservers = _lifecycleHubOservers._destroy;
var update = function update(changedOptions, force) {
updateLifecycles(null, changedOptions, force);
return updateLifecycles(null, changedOptions, force);
};
var envUpdateListener = update.bind(null, null, true);
@@ -2548,6 +2590,7 @@
};
},
_destroy: function _destroy() {
destroyObservers();
removeEnvironmentListener(envUpdateListener);
},
};
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -3,6 +3,7 @@ import { OSOptions } from 'options';
import { StructureSetup } from 'setups/structureSetup';
import { StyleObject } from 'typings';
export declare type LifecycleCheckOption = <T>(path: string) => LifecycleOptionInfo<T>;
export declare type Lifecycle = (updateHints: LifecycleUpdateHints, checkOption: LifecycleCheckOption, force: boolean) => Partial<LifecycleAdaptiveUpdateHints> | void;
export interface LifecycleOptionInfo<T> {
readonly _value: T;
_changed: boolean;
@@ -26,7 +27,6 @@ export interface LifecycleUpdateHints extends LifecycleAdaptiveUpdateHints {
_directionIsRTL: CacheValues<boolean>;
_heightIntrinsic: CacheValues<boolean>;
}
export declare type Lifecycle = (updateHints: LifecycleUpdateHints, checkOption: LifecycleCheckOption, force: boolean) => Partial<LifecycleAdaptiveUpdateHints> | void;
export interface LifecycleHubState {
_overflowAmount: WH<number>;
}
@@ -3,4 +3,5 @@ export declare const lifecycleHubOservers: (instance: LifecycleHub, updateLifecy
_trinsicObserver: false | import("observers/trinsicObserver").TrinsicObserver;
_sizeObserver: import("observers/sizeObserver").SizeObserver;
_updateObserverOptions: (checkOption: LifecycleCheckOption) => void;
_destroy(): void;
};