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

build

Browse Source
This commit is contained in:
Rene
2021-04-18 18:15:04 +02:00
parent c827cf8e7e
commit 06ffd92758
15 changed files with 225 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+2 -2
View File
@@ -59,8 +59,8 @@
"rollup-plugin-terser": "^6.1.0", "rollup-plugin-terser": "^6.1.0",
"rollup-plugin-typescript2": "^0.27.1", "rollup-plugin-typescript2": "^0.27.1",
"should": "^13.2.3", "should": "^13.2.3",
"tslib": "^2.1.0", "tslib": "^2.2.0",
"typescript": "^4.1.5", "typescript": "^4.2.4",
"utf-8-validate": "^5.0.2" "utf-8-validate": "^5.0.2"
}, },
"scripts": { "scripts": {
packages/overlayscrollbars/dist/overlayscrollbars.esm.js
Vendored
+75 -95
View File
@@ -432,6 +432,7 @@ const on = (target, eventNames, listener, options) => {
}; };
const stopPropagation = (evt) => evt.stopPropagation(); const stopPropagation = (evt) => evt.stopPropagation();
const preventDefault = (evt) => evt.preventDefault(); const preventDefault = (evt) => evt.preventDefault();
const stopAndPrevent = (evt) => stopPropagation(evt) || preventDefault(evt);
const equal = (a, b, props, propMutation) => { const equal = (a, b, props, propMutation) => {
if (a && b) { if (a && b) {
@@ -1478,18 +1479,8 @@ const createOverflowLifecycle = (lifecycleHub) => {
const animationStartEventName = 'animationstart'; const animationStartEventName = 'animationstart';
const scrollEventName = 'scroll'; const scrollEventName = 'scroll';
const scrollAmount = 3333333; const scrollAmount = 3333333;
const directionIsRTLMap = {
direction: ['rtl'],
};
const directionIsRTL = (elm) => { const directionIsRTL = (elm) => style(elm, 'direction') === 'rtl';
let isRTL = false;
const styles = style(elm, ['direction']);
each(styles, (value, key) => {
isRTL = isRTL || indexOf(directionIsRTLMap[key], value) > -1;
});
return isRTL;
};
const domRectHasDimensions = (rect) => rect && (rect.height || rect.width); const domRectHasDimensions = (rect) => rect && (rect.height || rect.width);
@@ -1569,21 +1560,18 @@ const createSizeObserver = (target, onSizeChangedCallback, options) => {
currSize = offsetSize(listenerElement); currSize = offsetSize(listenerElement);
isDirty = !scrollEvent || !equalWH(currSize, cacheSize); isDirty = !scrollEvent || !equalWH(currSize, cacheSize);
if (scrollEvent && isDirty && !rAFId) { if (scrollEvent) {
cAF(rAFId); stopAndPrevent(scrollEvent);
rAFId = rAF(onResized);
} else if (!scrollEvent) { if (isDirty && !rAFId) {
cAF(rAFId);
rAFId = rAF(onResized);
}
} else {
onResized(); onResized();
} }
reset(); reset();
if (scrollEvent) {
preventDefault(scrollEvent);
stopPropagation(scrollEvent);
}
return false;
}; };
push(offListeners, [on(expandElement, scrollEventName, onScroll), on(shrinkElement, scrollEventName, onScroll)]); push(offListeners, [on(expandElement, scrollEventName, onScroll), on(shrinkElement, scrollEventName, onScroll)]);
@@ -1592,7 +1580,7 @@ const createSizeObserver = (target, onSizeChangedCallback, options) => {
height: scrollAmount, height: scrollAmount,
}); });
reset(); reset();
appearCallback = observeAppearChange ? () => onScroll() : reset; appearCallback = observeAppearChange ? onScroll.bind(0, false) : reset;
} }
if (observeDirectionChange) { if (observeDirectionChange) {
@@ -1620,9 +1608,7 @@ const createSizeObserver = (target, onSizeChangedCallback, options) => {
onSizeChangedCallbackProxy(directionIsRTLCacheValues); onSizeChangedCallbackProxy(directionIsRTLCacheValues);
} }
preventDefault(event); stopAndPrevent(event);
stopPropagation(event);
return false;
}) })
); );
} }
@@ -1659,7 +1645,7 @@ const createSizeObserver = (target, onSizeChangedCallback, options) => {
}; };
const createTrinsicObserver = (target, onTrinsicChangedCallback) => { const createTrinsicObserver = (target, onTrinsicChangedCallback) => {
const trinsicObserver = createDOM(`<div class="${classNameTrinsicObserver}"></div>`)[0]; const trinsicObserver = createDiv(classNameTrinsicObserver);
const offListeners = []; const offListeners = [];
const { _update: updateHeightIntrinsicCache, _current: getCurrentHeightIntrinsicCache } = createCache( const { _update: updateHeightIntrinsicCache, _current: getCurrentHeightIntrinsicCache } = createCache(
(ioEntryOrSize) => ioEntryOrSize.h === 0 || ioEntryOrSize.isIntersecting || ioEntryOrSize.intersectionRatio > 0, (ioEntryOrSize) => ioEntryOrSize.h === 0 || ioEntryOrSize.isIntersecting || ioEntryOrSize.intersectionRatio > 0,
@@ -1718,59 +1704,54 @@ const createTrinsicObserver = (target, onTrinsicChangedCallback) => {
}; };
}; };
const createEventContentChange = (target, eventContentChange, map, callback) => { const createEventContentChange = (target, eventContentChange, callback) => {
let map;
let eventContentChangeRef; let eventContentChangeRef;
const addEvent = (elm, eventName) => { const _destroy = () => {
const entry = map.get(elm); if (map) {
const newEntry = isUndefined(entry); map.forEach((eventName, elm) => off(elm, eventName, callback));
map.clear();
const registerEvent = () => {
map.set(elm, eventName);
on(elm, eventName, callback);
};
if (!newEntry && eventName !== entry) {
off(elm, entry, callback);
registerEvent();
} else if (newEntry) {
registerEvent();
} }
}; };
const _destroy = () => {
map.forEach((eventName, elm) => {
off(elm, eventName, callback);
});
map.clear();
};
const _updateElements = (getElements) => { const _updateElements = (getElements) => {
if (eventContentChangeRef) { if (map && eventContentChangeRef) {
const eventElmList = eventContentChangeRef.reduce((arr, item) => { const eventElmList = eventContentChangeRef.reduce((arr, item) => {
if (item) { if (item) {
const selector = item[0]; const selector = item[0];
const eventName = item[1]; const eventNames = item[1];
const elements = eventName && selector && (getElements ? getElements(selector) : find(selector, target)); const elements = eventNames && selector && (getElements ? getElements(selector) : find(selector, target));
const parsedEventNames = isFunction(eventNames) ? eventNames(elements) : eventNames;
if (elements) { if (elements && elements.length && parsedEventNames && isString(parsedEventNames)) {
push(arr, [elements, isFunction(eventName) ? eventName(elements) : eventName], true); push(arr, [elements, parsedEventNames.trim()], true);
} }
} }
return arr; return arr;
}, []); }, []);
each(eventElmList, (item) => { each(eventElmList, (item) =>
const elements = item[0]; each(item[0], (elm) => {
const eventName = item[1]; const eventNames = item[1];
each(elements, (elm) => { const registredEventNames = map.get(elm);
addEvent(elm, eventName); const newEntry = isUndefined(registredEventNames);
}); const changingExistingEntry = !newEntry && eventNames !== registredEventNames;
}); const finalEventNames = changingExistingEntry ? `${registredEventNames} ${eventNames}` : eventNames;
if (changingExistingEntry) {
off(elm, registredEventNames, callback);
}
map.set(elm, finalEventNames);
on(elm, finalEventNames, callback);
})
);
} }
}; };
const _update = (newEventContentChange) => { const _updateEventContentChange = (newEventContentChange) => {
map = map || new Map();
eventContentChangeRef = newEventContentChange; eventContentChangeRef = newEventContentChange;
_destroy(); _destroy();
@@ -1779,38 +1760,37 @@ const createEventContentChange = (target, eventContentChange, map, callback) =>
}; };
if (eventContentChange) { if (eventContentChange) {
_update(eventContentChange); _updateEventContentChange(eventContentChange);
} }
return { return {
_destroy, _destroy,
_updateElements, _updateElements,
_update, _updateEventContentChange,
}; };
}; };
const createDOMObserver = (target, callback, options) => { const createDOMObserver = (target, isContentObserver, callback, options) => {
let isConnected = false; let isConnected = false;
const { const {
_observeContent,
_attributes, _attributes,
_styleChangingAttributes, _styleChangingAttributes,
_eventContentChange, _eventContentChange,
_nestedTargetSelector, _nestedTargetSelector,
_ignoreTargetAttrChange: _ignoreTargetChange, _ignoreTargetChange,
_ignoreNestedTargetChange,
_ignoreContentChange, _ignoreContentChange,
} = options || {}; } = options || {};
const { const {
_updateElements: updateEventContentChangeElements,
_destroy: destroyEventContentChange, _destroy: destroyEventContentChange,
_update: updateEventContentChange, _updateElements: updateEventContentChangeElements,
_updateEventContentChange: updateEventContentChange,
} = createEventContentChange( } = createEventContentChange(
target, target,
_observeContent && _eventContentChange, isContentObserver && _eventContentChange,
new Map(),
debounce(() => { debounce(() => {
if (isConnected) { if (isConnected) {
callback([], false, true); callback(true);
} }
}, 84) }, 84)
); );
@@ -1819,7 +1799,7 @@ const createDOMObserver = (target, callback, options) => {
const observedAttributes = finalAttributes.concat(finalStyleChangingAttributes); const observedAttributes = finalAttributes.concat(finalStyleChangingAttributes);
const observerCallback = (mutations) => { const observerCallback = (mutations) => {
const ignoreTargetChange = _ignoreTargetChange || noop; const ignoreTargetChange = (isContentObserver ? _ignoreNestedTargetChange : _ignoreTargetChange) || noop;
const ignoreContentChange = _ignoreContentChange || noop; const ignoreContentChange = _ignoreContentChange || noop;
const targetChangedAttrs = []; const targetChangedAttrs = [];
const totalAddedNodes = []; const totalAddedNodes = [];
@@ -1833,20 +1813,11 @@ const createDOMObserver = (target, callback, options) => {
const targetIsMutationTarget = target === mutationTarget; const targetIsMutationTarget = target === mutationTarget;
const attributeValue = isAttributesType && isString(attributeName) ? attr(mutationTarget, attributeName) : 0; const attributeValue = isAttributesType && isString(attributeName) ? attr(mutationTarget, attributeName) : 0;
const attributeChanged = attributeValue !== 0 && oldValue !== attributeValue; const attributeChanged = attributeValue !== 0 && oldValue !== attributeValue;
const targetAttrChanged =
attributeChanged &&
targetIsMutationTarget &&
!_observeContent &&
!ignoreTargetChange(mutationTarget, attributeName, oldValue, attributeValue);
const styleChangingAttrChanged = indexOf(finalStyleChangingAttributes, attributeName) > -1 && attributeChanged; const styleChangingAttrChanged = indexOf(finalStyleChangingAttributes, attributeName) > -1 && attributeChanged;
if (targetAttrChanged) { if (isContentObserver && !targetIsMutationTarget) {
push(targetChangedAttrs, attributeName);
}
if (_observeContent) {
const notOnlyAttrChanged = !isAttributesType; const notOnlyAttrChanged = !isAttributesType;
const contentAttrChanged = isAttributesType && styleChangingAttrChanged && !targetIsMutationTarget; const contentAttrChanged = isAttributesType && styleChangingAttrChanged;
const isNestedTarget = contentAttrChanged && _nestedTargetSelector && is(mutationTarget, _nestedTargetSelector); const isNestedTarget = contentAttrChanged && _nestedTargetSelector && is(mutationTarget, _nestedTargetSelector);
const baseAssertion = isNestedTarget const baseAssertion = isNestedTarget
? !ignoreTargetChange(mutationTarget, attributeName, oldValue, attributeValue) ? !ignoreTargetChange(mutationTarget, attributeName, oldValue, attributeValue)
@@ -1857,7 +1828,15 @@ const createDOMObserver = (target, callback, options) => {
childListChanged = childListChanged || isChildListType; childListChanged = childListChanged || isChildListType;
} }
targetStyleChanged = targetStyleChanged || (targetAttrChanged && styleChangingAttrChanged); if (
!isContentObserver &&
targetIsMutationTarget &&
attributeChanged &&
!ignoreTargetChange(mutationTarget, attributeName, oldValue, attributeValue)
) {
push(targetChangedAttrs, attributeName);
targetStyleChanged = targetStyleChanged || styleChangingAttrChanged;
}
}); });
if (childListChanged && !isEmptyArray(totalAddedNodes)) { if (childListChanged && !isEmptyArray(totalAddedNodes)) {
@@ -1869,8 +1848,10 @@ const createDOMObserver = (target, callback, options) => {
); );
} }
if (!isEmptyArray(targetChangedAttrs) || targetStyleChanged || contentChanged) { if (isContentObserver) {
callback(targetChangedAttrs, targetStyleChanged, contentChanged); contentChanged && callback(contentChanged);
} else if (!isEmptyArray(targetChangedAttrs) || targetStyleChanged) {
callback(targetChangedAttrs, targetStyleChanged);
} }
}; };
@@ -1879,13 +1860,13 @@ const createDOMObserver = (target, callback, options) => {
attributes: true, attributes: true,
attributeOldValue: true, attributeOldValue: true,
attributeFilter: observedAttributes, attributeFilter: observedAttributes,
subtree: _observeContent, subtree: isContentObserver,
childList: _observeContent, childList: isContentObserver,
characterData: _observeContent, characterData: isContentObserver,
}); });
isConnected = true; isConnected = true;
return { return {
_disconnect: () => { _destroy: () => {
if (isConnected) { if (isConnected) {
destroyEventContentChange(); destroyEventContentChange();
mutationObserver.disconnect(); mutationObserver.disconnect();
@@ -1893,7 +1874,7 @@ const createDOMObserver = (target, callback, options) => {
} }
}, },
_updateEventContentChange: (newEventContentChange) => { _updateEventContentChange: (newEventContentChange) => {
updateEventContentChange(isConnected && _observeContent && newEventContentChange); updateEventContentChange(isConnected && isContentObserver && newEventContentChange);
}, },
_update: () => { _update: () => {
if (isConnected) { if (isConnected) {
@@ -2077,12 +2058,11 @@ const createLifecycleHub = (options, structureSetup) => {
_appear: true, _appear: true,
_direction: !_nativeScrollbarStyling, _direction: !_nativeScrollbarStyling,
}); });
const hostMutationObserver = createDOMObserver(_host, onHostMutation, { const hostMutationObserver = createDOMObserver(_host, false, onHostMutation, {
_styleChangingAttributes: attrs, _styleChangingAttributes: attrs,
_attributes: attrs, _attributes: attrs,
}); });
const contentMutationObserver = createDOMObserver(_content || _viewport, onContentMutation, { const contentMutationObserver = createDOMObserver(_content || _viewport, true, onContentMutation, {
_observeContent: true,
_styleChangingAttributes: attrs, _styleChangingAttributes: attrs,
_attributes: attrs, _attributes: attrs,
_eventContentChange: options.updating.elementEvents, _eventContentChange: options.updating.elementEvents,
packages/overlayscrollbars/dist/overlayscrollbars.esm.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/overlayscrollbars/dist/overlayscrollbars.esm.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/overlayscrollbars/dist/overlayscrollbars.js
Vendored
+76 -94
View File
@@ -490,6 +490,9 @@
var preventDefault = function preventDefault(evt) { var preventDefault = function preventDefault(evt) {
return evt.preventDefault(); return evt.preventDefault();
}; };
var stopAndPrevent = function stopAndPrevent(evt) {
return stopPropagation(evt) || preventDefault(evt);
};
var equal = function equal(a, b, props, propMutation) { var equal = function equal(a, b, props, propMutation) {
if (a && b) { if (a && b) {
@@ -1686,17 +1689,9 @@
var animationStartEventName = 'animationstart'; var animationStartEventName = 'animationstart';
var scrollEventName = 'scroll'; var scrollEventName = 'scroll';
var scrollAmount = 3333333; var scrollAmount = 3333333;
var directionIsRTLMap = {
direction: ['rtl'],
};
var directionIsRTL = function directionIsRTL(elm) { var directionIsRTL = function directionIsRTL(elm) {
var isRTL = false; return style(elm, 'direction') === 'rtl';
var styles = style(elm, ['direction']);
each(styles, function (value, key) {
isRTL = isRTL || indexOf(directionIsRTLMap[key], value) > -1;
});
return isRTL;
}; };
var domRectHasDimensions = function domRectHasDimensions(rect) { var domRectHasDimensions = function domRectHasDimensions(rect) {
@@ -1806,21 +1801,18 @@
currSize = offsetSize(listenerElement); currSize = offsetSize(listenerElement);
isDirty = !scrollEvent || !equalWH(currSize, cacheSize); isDirty = !scrollEvent || !equalWH(currSize, cacheSize);
if (scrollEvent && isDirty && !rAFId) { if (scrollEvent) {
cAF(rAFId); stopAndPrevent(scrollEvent);
rAFId = rAF(onResized);
} else if (!scrollEvent) { if (isDirty && !rAFId) {
cAF(rAFId);
rAFId = rAF(onResized);
}
} else {
onResized(); onResized();
} }
reset(); reset();
if (scrollEvent) {
preventDefault(scrollEvent);
stopPropagation(scrollEvent);
}
return false;
}; };
push(offListeners, [on(expandElement, scrollEventName, onScroll), on(shrinkElement, scrollEventName, onScroll)]); push(offListeners, [on(expandElement, scrollEventName, onScroll), on(shrinkElement, scrollEventName, onScroll)]);
@@ -1829,11 +1821,7 @@
height: scrollAmount, height: scrollAmount,
}); });
reset(); reset();
appearCallback = observeAppearChange appearCallback = observeAppearChange ? onScroll.bind(0, false) : reset;
? function () {
return onScroll();
}
: reset;
} }
if (observeDirectionChange) { if (observeDirectionChange) {
@@ -1865,9 +1853,7 @@
onSizeChangedCallbackProxy(directionIsRTLCacheValues); onSizeChangedCallbackProxy(directionIsRTLCacheValues);
} }
preventDefault(event); stopAndPrevent(event);
stopPropagation(event);
return false;
}) })
); );
} }
@@ -1903,7 +1889,7 @@
}; };
var createTrinsicObserver = function createTrinsicObserver(target, onTrinsicChangedCallback) { var createTrinsicObserver = function createTrinsicObserver(target, onTrinsicChangedCallback) {
var trinsicObserver = createDOM('<div class="' + classNameTrinsicObserver + '"></div>')[0]; var trinsicObserver = createDiv(classNameTrinsicObserver);
var offListeners = []; var offListeners = [];
var _createCache = createCache( var _createCache = createCache(
@@ -1968,59 +1954,56 @@
}; };
}; };
var createEventContentChange = function createEventContentChange(target, eventContentChange, map, callback) { var createEventContentChange = function createEventContentChange(target, eventContentChange, callback) {
var map;
var eventContentChangeRef; var eventContentChangeRef;
var addEvent = function addEvent(elm, eventName) { var _destroy = function _destroy() {
var entry = map.get(elm); if (map) {
var newEntry = isUndefined(entry); map.forEach(function (eventName, elm) {
return off(elm, eventName, callback);
var registerEvent = function registerEvent() { });
map.set(elm, eventName); map.clear();
on(elm, eventName, callback);
};
if (!newEntry && eventName !== entry) {
off(elm, entry, callback);
registerEvent();
} else if (newEntry) {
registerEvent();
} }
}; };
var _destroy = function _destroy() {
map.forEach(function (eventName, elm) {
off(elm, eventName, callback);
});
map.clear();
};
var _updateElements = function _updateElements(getElements) { var _updateElements = function _updateElements(getElements) {
if (eventContentChangeRef) { if (map && eventContentChangeRef) {
var eventElmList = eventContentChangeRef.reduce(function (arr, item) { var eventElmList = eventContentChangeRef.reduce(function (arr, item) {
if (item) { if (item) {
var selector = item[0]; var selector = item[0];
var eventName = item[1]; var eventNames = item[1];
var elements = eventName && selector && (getElements ? getElements(selector) : find(selector, target)); var elements = eventNames && selector && (getElements ? getElements(selector) : find(selector, target));
var parsedEventNames = isFunction(eventNames) ? eventNames(elements) : eventNames;
if (elements) { if (elements && elements.length && parsedEventNames && isString(parsedEventNames)) {
push(arr, [elements, isFunction(eventName) ? eventName(elements) : eventName], true); push(arr, [elements, parsedEventNames.trim()], true);
} }
} }
return arr; return arr;
}, []); }, []);
each(eventElmList, function (item) { each(eventElmList, function (item) {
var elements = item[0]; return each(item[0], function (elm) {
var eventName = item[1]; var eventNames = item[1];
each(elements, function (elm) { var registredEventNames = map.get(elm);
addEvent(elm, eventName); var newEntry = isUndefined(registredEventNames);
var changingExistingEntry = !newEntry && eventNames !== registredEventNames;
var finalEventNames = changingExistingEntry ? registredEventNames + ' ' + eventNames : eventNames;
if (changingExistingEntry) {
off(elm, registredEventNames, callback);
}
map.set(elm, finalEventNames);
on(elm, finalEventNames, callback);
}); });
}); });
} }
}; };
var _update = function _update(newEventContentChange) { var _updateEventContentChange = function _updateEventContentChange(newEventContentChange) {
map = map || new Map();
eventContentChangeRef = newEventContentChange; eventContentChangeRef = newEventContentChange;
_destroy(); _destroy();
@@ -2029,48 +2012,47 @@
}; };
if (eventContentChange) { if (eventContentChange) {
_update(eventContentChange); _updateEventContentChange(eventContentChange);
} }
return { return {
_destroy: _destroy, _destroy: _destroy,
_updateElements: _updateElements, _updateElements: _updateElements,
_update: _update, _updateEventContentChange: _updateEventContentChange,
}; };
}; };
var createDOMObserver = function createDOMObserver(target, callback, options) { var createDOMObserver = function createDOMObserver(target, isContentObserver, callback, options) {
var isConnected = false; var isConnected = false;
var _ref = options || {}, var _ref = options || {},
_observeContent = _ref._observeContent,
_attributes = _ref._attributes, _attributes = _ref._attributes,
_styleChangingAttributes = _ref._styleChangingAttributes, _styleChangingAttributes = _ref._styleChangingAttributes,
_eventContentChange = _ref._eventContentChange, _eventContentChange = _ref._eventContentChange,
_nestedTargetSelector = _ref._nestedTargetSelector, _nestedTargetSelector = _ref._nestedTargetSelector,
_ignoreTargetChange = _ref._ignoreTargetAttrChange, _ignoreTargetChange = _ref._ignoreTargetChange,
_ignoreNestedTargetChange = _ref._ignoreNestedTargetChange,
_ignoreContentChange = _ref._ignoreContentChange; _ignoreContentChange = _ref._ignoreContentChange;
var _createEventContentCh = createEventContentChange( var _createEventContentCh = createEventContentChange(
target, target,
_observeContent && _eventContentChange, isContentObserver && _eventContentChange,
new Map(),
debounce(function () { debounce(function () {
if (isConnected) { if (isConnected) {
callback([], false, true); callback(true);
} }
}, 84) }, 84)
), ),
updateEventContentChangeElements = _createEventContentCh._updateElements,
destroyEventContentChange = _createEventContentCh._destroy, destroyEventContentChange = _createEventContentCh._destroy,
updateEventContentChange = _createEventContentCh._update; updateEventContentChangeElements = _createEventContentCh._updateElements,
updateEventContentChange = _createEventContentCh._updateEventContentChange;
var finalAttributes = _attributes || []; var finalAttributes = _attributes || [];
var finalStyleChangingAttributes = _styleChangingAttributes || []; var finalStyleChangingAttributes = _styleChangingAttributes || [];
var observedAttributes = finalAttributes.concat(finalStyleChangingAttributes); var observedAttributes = finalAttributes.concat(finalStyleChangingAttributes);
var observerCallback = function observerCallback(mutations) { var observerCallback = function observerCallback(mutations) {
var ignoreTargetChange = _ignoreTargetChange || noop; var ignoreTargetChange = (isContentObserver ? _ignoreNestedTargetChange : _ignoreTargetChange) || noop;
var ignoreContentChange = _ignoreContentChange || noop; var ignoreContentChange = _ignoreContentChange || noop;
var targetChangedAttrs = []; var targetChangedAttrs = [];
var totalAddedNodes = []; var totalAddedNodes = [];
@@ -2088,20 +2070,11 @@
var targetIsMutationTarget = target === mutationTarget; var targetIsMutationTarget = target === mutationTarget;
var attributeValue = isAttributesType && isString(attributeName) ? attr(mutationTarget, attributeName) : 0; var attributeValue = isAttributesType && isString(attributeName) ? attr(mutationTarget, attributeName) : 0;
var attributeChanged = attributeValue !== 0 && oldValue !== attributeValue; var attributeChanged = attributeValue !== 0 && oldValue !== attributeValue;
var targetAttrChanged =
attributeChanged &&
targetIsMutationTarget &&
!_observeContent &&
!ignoreTargetChange(mutationTarget, attributeName, oldValue, attributeValue);
var styleChangingAttrChanged = indexOf(finalStyleChangingAttributes, attributeName) > -1 && attributeChanged; var styleChangingAttrChanged = indexOf(finalStyleChangingAttributes, attributeName) > -1 && attributeChanged;
if (targetAttrChanged) { if (isContentObserver && !targetIsMutationTarget) {
push(targetChangedAttrs, attributeName);
}
if (_observeContent) {
var notOnlyAttrChanged = !isAttributesType; var notOnlyAttrChanged = !isAttributesType;
var contentAttrChanged = isAttributesType && styleChangingAttrChanged && !targetIsMutationTarget; var contentAttrChanged = isAttributesType && styleChangingAttrChanged;
var isNestedTarget = contentAttrChanged && _nestedTargetSelector && is(mutationTarget, _nestedTargetSelector); var isNestedTarget = contentAttrChanged && _nestedTargetSelector && is(mutationTarget, _nestedTargetSelector);
var baseAssertion = isNestedTarget var baseAssertion = isNestedTarget
? !ignoreTargetChange(mutationTarget, attributeName, oldValue, attributeValue) ? !ignoreTargetChange(mutationTarget, attributeName, oldValue, attributeValue)
@@ -2112,7 +2085,15 @@
childListChanged = childListChanged || isChildListType; childListChanged = childListChanged || isChildListType;
} }
targetStyleChanged = targetStyleChanged || (targetAttrChanged && styleChangingAttrChanged); if (
!isContentObserver &&
targetIsMutationTarget &&
attributeChanged &&
!ignoreTargetChange(mutationTarget, attributeName, oldValue, attributeValue)
) {
push(targetChangedAttrs, attributeName);
targetStyleChanged = targetStyleChanged || styleChangingAttrChanged;
}
}); });
if (childListChanged && !isEmptyArray(totalAddedNodes)) { if (childListChanged && !isEmptyArray(totalAddedNodes)) {
@@ -2124,8 +2105,10 @@
}); });
} }
if (!isEmptyArray(targetChangedAttrs) || targetStyleChanged || contentChanged) { if (isContentObserver) {
callback(targetChangedAttrs, targetStyleChanged, contentChanged); contentChanged && callback(contentChanged);
} else if (!isEmptyArray(targetChangedAttrs) || targetStyleChanged) {
callback(targetChangedAttrs, targetStyleChanged);
} }
}; };
@@ -2134,13 +2117,13 @@
attributes: true, attributes: true,
attributeOldValue: true, attributeOldValue: true,
attributeFilter: observedAttributes, attributeFilter: observedAttributes,
subtree: _observeContent, subtree: isContentObserver,
childList: _observeContent, childList: isContentObserver,
characterData: _observeContent, characterData: isContentObserver,
}); });
isConnected = true; isConnected = true;
return { return {
_disconnect: function _disconnect() { _destroy: function _destroy() {
if (isConnected) { if (isConnected) {
destroyEventContentChange(); destroyEventContentChange();
mutationObserver.disconnect(); mutationObserver.disconnect();
@@ -2148,7 +2131,7 @@
} }
}, },
_updateEventContentChange: function _updateEventContentChange(newEventContentChange) { _updateEventContentChange: function _updateEventContentChange(newEventContentChange) {
updateEventContentChange(isConnected && _observeContent && newEventContentChange); updateEventContentChange(isConnected && isContentObserver && newEventContentChange);
}, },
_update: function _update() { _update: function _update() {
if (isConnected) { if (isConnected) {
@@ -2351,12 +2334,11 @@
_appear: true, _appear: true,
_direction: !_nativeScrollbarStyling, _direction: !_nativeScrollbarStyling,
}); });
var hostMutationObserver = createDOMObserver(_host, onHostMutation, { var hostMutationObserver = createDOMObserver(_host, false, onHostMutation, {
_styleChangingAttributes: attrs, _styleChangingAttributes: attrs,
_attributes: attrs, _attributes: attrs,
}); });
var contentMutationObserver = createDOMObserver(_content || _viewport, onContentMutation, { var contentMutationObserver = createDOMObserver(_content || _viewport, true, onContentMutation, {
_observeContent: true,
_styleChangingAttributes: attrs, _styleChangingAttributes: attrs,
_attributes: attrs, _attributes: attrs,
_eventContentChange: options.updating.elementEvents, _eventContentChange: options.updating.elementEvents,
packages/overlayscrollbars/dist/overlayscrollbars.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/overlayscrollbars/dist/overlayscrollbars.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/overlayscrollbars/types/observers/domObserver.d.ts
Vendored
+31 -10
View File
@@ -1,20 +1,41 @@
declare type StringNullUndefined = string | null | undefined; declare type StringNullUndefined = string | null | undefined;
export declare type DOMObserverEventContentChange = Array<[StringNullUndefined, ((elms: Node[]) => string) | StringNullUndefined] | null | undefined> | false | null | undefined; declare type DOMContentObserverCallback = (contentChanged: boolean) => any;
export declare type DOMObserverIgnoreContentChange = (mutation: MutationRecord, isNestedTarget: boolean, domObserverTarget: HTMLElement, domObserverOptions: DOMObserverOptions | undefined) => boolean; declare type DOMTargetObserverCallback = (targetChangedAttrs: string[], targetStyleChanged: boolean) => any;
export declare type DOMObserverIgnoreTargetAttrChange = (target: Node, attributeName: string, oldAttributeValue: string | null, newAttributeValue: string | null) => boolean; interface DOMObserverOptionsBase {
export interface DOMObserverOptions {
_observeContent?: boolean;
_attributes?: string[]; _attributes?: string[];
_styleChangingAttributes?: string[]; _styleChangingAttributes?: string[];
}
interface DOMContentObserverOptions extends DOMObserverOptionsBase {
_eventContentChange?: DOMObserverEventContentChange; _eventContentChange?: DOMObserverEventContentChange;
_nestedTargetSelector?: string; _nestedTargetSelector?: string;
_ignoreTargetAttrChange?: DOMObserverIgnoreTargetAttrChange;
_ignoreContentChange?: DOMObserverIgnoreContentChange; _ignoreContentChange?: DOMObserverIgnoreContentChange;
_ignoreNestedTargetChange?: DOMObserverIgnoreTargetChange;
} }
export interface DOMObserver { interface DOMTargetObserverOptions extends DOMObserverOptionsBase {
_disconnect: () => void; _ignoreTargetChange?: DOMObserverIgnoreTargetChange;
_updateEventContentChange: (newEventContentChange?: DOMObserverEventContentChange) => void; }
interface DOMObserverBase {
_destroy: () => void;
_update: () => void; _update: () => void;
} }
export declare const createDOMObserver: (target: HTMLElement, callback: (targetChangedAttrs: string[], targetStyleChanged: boolean, contentChanged: boolean) => any, options?: DOMObserverOptions | undefined) => DOMObserver; interface DOMContentObserver extends DOMObserverBase {
_updateEventContentChange: (newEventContentChange?: DOMObserverEventContentChange) => void;
}
interface DOMTargetObserver extends DOMObserverBase {
}
export declare type DOMObserverEventContentChange = Array<[StringNullUndefined, ((elms: Node[]) => StringNullUndefined) | StringNullUndefined] | null | undefined> | false | null | undefined;
export declare type DOMObserverIgnoreContentChange = (mutation: MutationRecord, isNestedTarget: boolean, domObserverTarget: HTMLElement, domObserverOptions: DOMContentObserverOptions | undefined) => boolean;
export declare type DOMObserverIgnoreTargetChange = (target: Node, attributeName: string, oldAttributeValue: string | null, newAttributeValue: string | null) => boolean;
export declare type DOMObserverCallback<ContentObserver extends boolean> = ContentObserver extends true ? DOMContentObserverCallback : DOMTargetObserverCallback;
export declare type DOMObserverOptions<ContentObserver extends boolean> = ContentObserver extends true ? DOMContentObserverOptions : DOMTargetObserverOptions;
export declare type DOMObserver<ContentObserver extends boolean> = ContentObserver extends true ? DOMContentObserver : DOMTargetObserver;
/**
* Creates a DOM observer which observes DOM changes to either the target element or its children.
* @param target The element which shall be observed.
* @param isContentObserver Whether this observer is just observing the target or just the targets children. (not only direct children but also nested ones)
* @param callback The callback which gets called if a change was detected.
* @param options The options for DOM change detection.
* @returns A object which represents the instance of the DOM observer.
*/
export declare const createDOMObserver: <ContentObserver extends boolean>(target: HTMLElement, isContentObserver: ContentObserver, callback: DOMObserverCallback<ContentObserver>, options?: DOMObserverOptions<ContentObserver> | undefined) => DOMObserver<ContentObserver>;
export {}; export {};
packages/overlayscrollbars/types/observers/sizeObserver.d.ts
Vendored
+7
View File
@@ -9,4 +9,11 @@ export interface SizeObserver {
_directionIsRTL: CacheValues<boolean>; _directionIsRTL: CacheValues<boolean>;
}; };
} }
/**
* Creates a size observer which observes any size, padding, margin and border changes of the target element. Depending on the options also direction and appear can be observed.
* @param target The target element which shall be observed.
* @param onSizeChangedCallback The callback which gets called after a size change was detected.
* @param options The options for size detection, whether to observe also direction and appear.
* @returns A object which represents the instance of the size observer.
*/
export declare const createSizeObserver: (target: HTMLElement, onSizeChangedCallback: (directionIsRTLCache?: CacheValues<boolean> | undefined) => any, options?: SizeObserverOptions | undefined) => SizeObserver; export declare const createSizeObserver: (target: HTMLElement, onSizeChangedCallback: (directionIsRTLCache?: CacheValues<boolean> | undefined) => any, options?: SizeObserverOptions | undefined) => SizeObserver;
packages/overlayscrollbars/types/observers/trinsicObserver.d.ts
Vendored
+6
View File
@@ -5,4 +5,10 @@ export interface TrinsicObserver {
_heightIntrinsic: CacheValues<boolean>; _heightIntrinsic: CacheValues<boolean>;
}; };
} }
/**
* Creates a trinsic observer which observes changes to intrinsic or extrinsic sizing for the height of the target element.
* @param target The element which shall be observed.
* @param onTrinsicChangedCallback The callback which gets called after a change was detected.
* @returns A object which represents the instance of the trinsic observer.
*/
export declare const createTrinsicObserver: (target: HTMLElement, onTrinsicChangedCallback: (heightIntrinsic: CacheValues<boolean>) => any) => TrinsicObserver; export declare const createTrinsicObserver: (target: HTMLElement, onTrinsicChangedCallback: (heightIntrinsic: CacheValues<boolean>) => any) => TrinsicObserver;
packages/overlayscrollbars/types/options.d.ts
Vendored
+1 -1
View File
@@ -63,4 +63,4 @@ export interface SizeChangedArgs {
export interface UpdatedArgs { export interface UpdatedArgs {
forced: boolean; forced: boolean;
} }
export declare const optionsTemplate: import("./support/options").OptionsTemplate<OSOptions>, defaultOptions: OSOptions; export declare const optionsTemplate: import("support/options").OptionsTemplate<OSOptions>, defaultOptions: OSOptions;
packages/overlayscrollbars/types/support/compatibility/apis.d.ts
Vendored
+4 -1
View File
@@ -6,6 +6,9 @@ export declare const IntersectionObserverConstructor: {
new (callback: IntersectionObserverCallback, options?: IntersectionObserverInit | undefined): IntersectionObserver; new (callback: IntersectionObserverCallback, options?: IntersectionObserverInit | undefined): IntersectionObserver;
prototype: IntersectionObserver; prototype: IntersectionObserver;
} | undefined; } | undefined;
export declare const ResizeObserverConstructor: any | undefined; export declare const ResizeObserverConstructor: {
new (callback: ResizeObserverCallback): ResizeObserver;
prototype: ResizeObserver;
} | undefined;
export declare const cAF: typeof cancelAnimationFrame | undefined; export declare const cAF: typeof cancelAnimationFrame | undefined;
export declare const rAF: typeof requestAnimationFrame | undefined; export declare const rAF: typeof requestAnimationFrame | undefined;
packages/overlayscrollbars/types/support/dom/events.d.ts
Vendored
+5
View File
@@ -29,3 +29,8 @@ export declare const stopPropagation: (evt: Event) => void;
* @param evt The event of which the preventDefault method shall be called. * @param evt The event of which the preventDefault method shall be called.
*/ */
export declare const preventDefault: (evt: Event) => void; export declare const preventDefault: (evt: Event) => void;
/**
* Shorthand for the stopPropagation and preventDefault event Method.
* @param evt The event of which the stopPropagation and preventDefault methods shall be called.
*/
export declare const stopAndPrevent: (evt: Event) => void;
packages/overlayscrollbars/types/support/utils/array.d.ts
Vendored
+6 -6
View File
@@ -7,12 +7,12 @@ declare type RunEachItem = ((...args: any) => any | any[]) | null | undefined;
* If the function returns true its treated like a "continue" statement. * If the function returns true its treated like a "continue" statement.
* If the function returns false its treated like a "break" statement. * If the function returns false its treated like a "break" statement.
*/ */
export declare function each<T>(array: Array<T> | ReadonlyArray<T>, callback: (value: T, indexOrKey: number, source: Array<T>) => boolean | void): Array<T> | ReadonlyArray<T>; export declare function each<T>(array: Array<T> | ReadonlyArray<T>, callback: (value: T, indexOrKey: number, source: Array<T>) => boolean | unknown): Array<T> | ReadonlyArray<T>;
export declare function each<T>(array: Array<T> | ReadonlyArray<T> | null | undefined, callback: (value: T, indexOrKey: number, source: Array<T>) => boolean | void): Array<T> | ReadonlyArray<T> | null | undefined; export declare function each<T>(array: Array<T> | ReadonlyArray<T> | null | undefined, callback: (value: T, indexOrKey: number, source: Array<T>) => boolean | unknown): Array<T> | ReadonlyArray<T> | null | undefined;
export declare function each<T>(arrayLikeObject: ArrayLike<T>, callback: (value: T, indexOrKey: number, source: ArrayLike<T>) => boolean | void): ArrayLike<T>; export declare function each<T>(arrayLikeObject: ArrayLike<T>, callback: (value: T, indexOrKey: number, source: ArrayLike<T>) => boolean | unknown): ArrayLike<T>;
export declare function each<T>(arrayLikeObject: ArrayLike<T> | null | undefined, callback: (value: T, indexOrKey: number, source: ArrayLike<T>) => boolean | void): ArrayLike<T> | null | undefined; export declare function each<T>(arrayLikeObject: ArrayLike<T> | null | undefined, callback: (value: T, indexOrKey: number, source: ArrayLike<T>) => boolean | unknown): ArrayLike<T> | null | undefined;
export declare function each(obj: PlainObject, callback: (value: any, indexOrKey: string, source: PlainObject) => boolean | void): PlainObject; export declare function each(obj: PlainObject, callback: (value: any, indexOrKey: string, source: PlainObject) => boolean | unknown): PlainObject;
export declare function each(obj: PlainObject | null | undefined, callback: (value: any, indexOrKey: string, source: PlainObject) => boolean | void): PlainObject | null | undefined; export declare function each(obj: PlainObject | null | undefined, callback: (value: any, indexOrKey: string, source: PlainObject) => boolean | unknown): PlainObject | null | undefined;
/** /**
* Returns the index of the given inside the given array or -1 if the given item isn't part of the given array. * Returns the index of the given inside the given array or -1 if the given item isn't part of the given array.
* @param arr The array. * @param arr The array.
yarn.lock
+8 -8
View File
@@ -8662,10 +8662,10 @@ tslib@^1.8.1, tslib@^1.9.0:
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q== integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==
tslib@^2.1.0: tslib@^2.2.0:
version "2.1.0" version "2.2.0"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.2.0.tgz#fb2c475977e35e241311ede2693cee1ec6698f5c"
integrity sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A== integrity sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==
tsutils@^3.17.1: tsutils@^3.17.1:
version "3.17.1" version "3.17.1"
@@ -8740,10 +8740,10 @@ typescript@^3.9.3:
resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa" resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa"
integrity sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw== integrity sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==
typescript@^4.1.5: typescript@^4.2.4:
version "4.1.5" version "4.2.4"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.5.tgz#123a3b214aaff3be32926f0d8f1f6e704eb89a72" resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.2.4.tgz#8610b59747de028fda898a8aef0e103f156d0961"
integrity sha512-6OSu9PTIzmn9TCDiovULTnET6BgXtDYL4Gg4szY+cGsc3JP1dQL8qvE8kShTRx1NIw4Q9IBHlwODjkjWEtMUyA== integrity sha512-V+evlYHZnQkaz8TRBuxTA92yZBPotr5H+WhQ7bD3hZUndx5tGOa1fuCgeSjxAzM1RiN5IzvadIXTVefuuwZCRg==
unicode-canonical-property-names-ecmascript@^1.0.4: unicode-canonical-property-names-ecmascript@^1.0.4:
version "1.0.4" version "1.0.4"