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

Merge branch 'v2.0.0' of https://github.com/KingSora/OverlayScrollbars into v2.0.0

Browse Source
This commit is contained in:
Rene
2021-01-19 19:59:24 +01:00
parent 7ea2dbbc43 074b12a5d5
commit d70a8aa99d
28 changed files with 240 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/overlayscrollbars/dist/overlayscrollbars.esm.js
Vendored
+59 -43
View File
@@ -1,10 +1,12 @@
const ElementNodeType = Node.ELEMENT_NODE;
const { toString, hasOwnProperty } = Object.prototype;
const type = (obj) => {
if (obj === undefined) return `${obj}`;
if (obj === null) return `${obj}`;
return Object.prototype.toString
.call(obj)
.replace(/^\[object (.+)\]$/, '$1')
.toLowerCase();
return obj === undefined || obj === null
? `${obj}`
: toString
.call(obj)
.replace(/^\[object (.+)\]$/, '$1')
.toLowerCase();
};
function isNumber(obj) {
return typeof obj === 'number';
@@ -29,17 +31,19 @@ function isObject(obj) {
}
function isArrayLike(obj) {
const length = !!obj && obj.length;
return isArray(obj) || (!isFunction(obj) && isNumber(length) && length > -1 && length % 1 == 0);
const lengthCorrectFormat = isNumber(length) && length > -1 && length % 1 == 0;
return isArray(obj) || (!isFunction(obj) && lengthCorrectFormat) ? (length > 0 && isObject(obj) ? length - 1 in obj : true) : false;
}
function isPlainObject(obj) {
if (!obj || !isObject(obj) || type(obj) !== 'object') return false;
let key;
const proto = 'prototype';
const { hasOwnProperty } = Object[proto];
const hasOwnConstructor = hasOwnProperty.call(obj, 'constructor');
const hasIsPrototypeOf = obj.constructor && obj.constructor[proto] && hasOwnProperty.call(obj.constructor[proto], 'isPrototypeOf');
const cstr = 'constructor';
const ctor = obj[cstr];
const ctorProto = ctor && ctor.prototype;
const hasOwnConstructor = hasOwnProperty.call(obj, cstr);
const hasIsPrototypeOf = ctorProto && hasOwnProperty.call(ctorProto, 'isPrototypeOf');
if (obj.constructor && !hasOwnConstructor && !hasIsPrototypeOf) {
if (ctor && !hasOwnConstructor && !hasIsPrototypeOf) {
return false;
}
@@ -49,14 +53,12 @@ function isPlainObject(obj) {
return isUndefined(key) || hasOwnProperty.call(obj, key);
}
function isHTMLElement(obj) {
const instaceOfRightHandSide = window.HTMLElement;
const doInstanceOf = isObject(instaceOfRightHandSide) || isFunction(instaceOfRightHandSide);
return !!(doInstanceOf ? obj instanceof instaceOfRightHandSide : obj && isObject(obj) && obj.nodeType === 1 && isString(obj.nodeName));
const instanceofObj = window.HTMLElement;
return obj ? (instanceofObj ? obj instanceof instanceofObj : obj.nodeType === ElementNodeType) : false;
}
function isEmptyObject(obj) {
for (const name in obj) return false;
return true;
function isElement(obj) {
const instanceofObj = window.Element;
return obj ? (instanceofObj ? obj instanceof instanceofObj : obj.nodeType === ElementNodeType) : false;
}
function getSetProp(topLeft, fallback, elm, value) {
@@ -75,7 +77,7 @@ function attr(elm, attrName, value) {
elm && elm.setAttribute(attrName, value);
}
const removeAttr = (elm, attrName) => {
elm == null ? void 0 : elm.removeAttribute(attrName);
elm && elm.removeAttribute(attrName);
};
function scrollLeft(elm, value) {
return getSetProp('scrollLeft', 0, elm, value);
@@ -96,7 +98,7 @@ const classListAction = (elm, className, action) => {
result = classes.length > 0;
while ((clazz = classes[i++])) {
result = action(elm.classList, clazz) && result;
result = !!action(elm.classList, clazz) && result;
}
}
@@ -119,6 +121,10 @@ function each(source, callback) {
return source;
}
const push = (array, items, arrayIsSingleItem) => {
!arrayIsSingleItem && !isString(items) && isArrayLike(items) ? Array.prototype.push.apply(array, items) : array.push(items);
return array;
};
const from = (arr) => {
if (Array.from) {
return Array.from(arr);
@@ -126,22 +132,24 @@ const from = (arr) => {
const result = [];
each(arr, (elm) => {
result.push(elm);
push(result, elm);
});
return result;
};
const runEach = (arr, p1) => {
const runFn = (fn) => fn && fn(p1);
if (arr instanceof Set) {
arr.forEach((fn) => fn && fn(p1));
arr.forEach(runFn);
} else {
each(arr, (fn) => fn && fn(p1));
each(arr, runFn);
}
};
const elmPrototype = Element.prototype;
const is = (elm, selector) => {
if (elm) {
if (isElement(elm)) {
const fn = elmPrototype.matches || elmPrototype.msMatchesSelector;
return fn.call(elm, selector);
}
@@ -271,8 +279,10 @@ const supportPassiveEvents = () => {
return passiveEventsSupport;
};
const splitEventNames = (eventNames) => eventNames.split(' ');
const off = (target, eventNames, listener, capture) => {
each(eventNames.split(' '), (eventName) => {
each(splitEventNames(eventNames), (eventName) => {
target.removeEventListener(eventName, listener, capture);
});
};
@@ -288,14 +298,14 @@ const on = (target, eventNames, listener, options) => {
capture,
}
: capture;
each(eventNames.split(' '), (eventName) => {
each(splitEventNames(eventNames), (eventName) => {
const finalListener = once
? (evt) => {
target.removeEventListener(eventName, finalListener, capture);
listener && listener(evt);
}
: listener;
offListeners.push(off.bind(null, target, eventName, finalListener, capture));
push(offListeners, off.bind(null, target, eventName, finalListener, capture));
target.addEventListener(eventName, finalListener, nativeOptions);
});
return runEach.bind(0, offListeners);
@@ -320,7 +330,7 @@ const equalWH = (a, b) => equal(a, b, ['w', 'h']);
const equalXY = (a, b) => equal(a, b, ['x', 'y']);
const equalTRBL = (a, b) => equal(a, b, ['t', 'r', 'b', 'l']);
const hasOwnProperty = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
const hasOwnProperty$1 = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
const keys = (obj) => (obj ? Object.keys(obj) : []);
function assignDeep(target, object1, object2, object3, object4, object5, object6) {
const sources = [object1, object2, object3, object4, object5, object6];
@@ -357,6 +367,11 @@ function assignDeep(target, object1, object2, object3, object4, object5, object6
});
return target;
}
function isEmptyObject(obj) {
for (const name in obj) return false;
return true;
}
const cssNumber = {
animationiterationcount: 1,
@@ -477,7 +492,7 @@ const cssCache = {};
const cssProperty = (name) => {
let result = cssCache[name];
if (hasOwnProperty(cssCache, name)) {
if (hasOwnProperty$1(cssCache, name)) {
return result;
}
@@ -495,7 +510,7 @@ const cssProperty = (name) => {
const jsAPI = (name) => {
let result = jsCache[name] || window[name];
if (hasOwnProperty(jsCache, name)) {
if (hasOwnProperty$1(jsCache, name)) {
return result;
}
@@ -554,7 +569,7 @@ const validateRecursive = (options, template, optionsDiff, doWriteErrors, propPa
const optionsCopy = _extends_1({}, options);
const props = keys(template).filter((prop) => hasOwnProperty(options, prop));
const props = keys(template).filter((prop) => hasOwnProperty$1(options, prop));
each(props, (prop) => {
const optionsDiffValue = isUndefined(optionsDiff[prop]) ? {} : optionsDiff[prop];
const optionsValue = options[prop];
@@ -589,12 +604,12 @@ const validateRecursive = (options, template, optionsDiff, doWriteErrors, propPa
if (isEnumString && isString(optionsValue)) {
const enumStringSplit = currTemplateType.split(' ');
isValid = !!enumStringSplit.find((possibility) => possibility === optionsValue);
errorEnumStrings.push(...enumStringSplit);
push(errorEnumStrings, enumStringSplit);
} else {
isValid = optionsTemplateTypes[optionsValueType] === currTemplateType;
}
errorPossibleTypes.push(isEnumString ? optionsTemplateTypes.string : typeString);
push(errorPossibleTypes, isEnumString ? optionsTemplateTypes.string : typeString);
return !isValid;
});
@@ -814,7 +829,7 @@ const getEnvironment = () => {
return environmentInstance;
};
const getPropByPath = (obj, path) => obj && path.split('.').reduce((o, prop) => (o && hasOwnProperty(o, prop) ? o[prop] : undefined), obj);
const getPropByPath = (obj, path) => obj && path.split('.').reduce((o, prop) => (o && hasOwnProperty$1(o, prop) ? o[prop] : undefined), obj);
const createLifecycleBase = (defaultOptionsWithTemplate, initialOptions, updateFunction) => {
const { _template: optionsTemplate, _options: defaultOptions } = transformOptions(defaultOptionsWithTemplate);
@@ -988,7 +1003,7 @@ const createSizeObserver = (target, onSizeChangedCallback, options) => {
if (ResizeObserverConstructor) {
const resizeObserverInstance = new ResizeObserverConstructor(onSizeChangedCallbackProxy);
resizeObserverInstance.observe(listenerElement);
offListeners.push(() => 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>`
@@ -1041,8 +1056,7 @@ const createSizeObserver = (target, onSizeChangedCallback, options) => {
return false;
};
offListeners.push(on(expandElement, scrollEventName, onScroll));
offListeners.push(on(shrinkElement, scrollEventName, onScroll));
push(offListeners, [on(expandElement, scrollEventName, onScroll), on(shrinkElement, scrollEventName, onScroll)]);
style(expandElementChild, {
width: scrollAmount,
height: scrollAmount,
@@ -1053,7 +1067,8 @@ const createSizeObserver = (target, onSizeChangedCallback, options) => {
if (direction) {
const updateDirectionCache = createCache(() => getDirection(sizeObserver));
offListeners.push(
push(
offListeners,
on(sizeObserver, scrollEventName, (event) => {
const directionCache = updateDirectionCache();
const { _value, _changed } = directionCache;
@@ -1083,7 +1098,7 @@ const createSizeObserver = (target, onSizeChangedCallback, options) => {
if (appearCallback) {
addClass(sizeObserver, classNameSizeObserverAppear);
offListeners.push(on(sizeObserver, animationStartEventName, appearCallback));
push(offListeners, on(sizeObserver, animationStartEventName, appearCallback));
}
prependChildren(target, sizeObserver);
@@ -1123,9 +1138,10 @@ const createTrinsicObserver = (target, onTrinsicChangedCallback) => {
}
);
intersectionObserverInstance.observe(trinsicObserver);
offListeners.push(() => intersectionObserverInstance.disconnect());
push(offListeners, () => intersectionObserverInstance.disconnect());
} else {
offListeners.push(
push(
offListeners,
createSizeObserver(trinsicObserver, () => {
const newSize = offsetSize(trinsicObserver);
const heightIntrinsicCache = updateHeightIntrinsicCache(0, newSize);
@@ -1182,7 +1198,7 @@ const OverlayScrollbars = (target, options, extensions) => {
const osTarget = normalizeTarget(target);
const lifecycles = [];
const { host } = osTarget;
lifecycles.push(createStructureLifecycle(osTarget));
push(lifecycles, createStructureLifecycle(osTarget));
const onSizeChanged = (directionCache) => {
if (directionCache) {
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
+67 -49
View File
@@ -7,13 +7,17 @@
})(this, function () {
'use strict';
var ElementNodeType = Node.ELEMENT_NODE;
var _Object$prototype = Object.prototype,
toString = _Object$prototype.toString,
hasOwnProperty = _Object$prototype.hasOwnProperty;
var type = function type(obj) {
if (obj === undefined) return '' + obj;
if (obj === null) return '' + obj;
return Object.prototype.toString
.call(obj)
.replace(/^\[object (.+)\]$/, '$1')
.toLowerCase();
return obj === undefined || obj === null
? '' + obj
: toString
.call(obj)
.replace(/^\[object (.+)\]$/, '$1')
.toLowerCase();
};
function isNumber(obj) {
return typeof obj === 'number';
@@ -38,17 +42,19 @@
}
function isArrayLike(obj) {
var length = !!obj && obj.length;
return isArray(obj) || (!isFunction(obj) && isNumber(length) && length > -1 && length % 1 == 0);
var lengthCorrectFormat = isNumber(length) && length > -1 && length % 1 == 0;
return isArray(obj) || (!isFunction(obj) && lengthCorrectFormat) ? (length > 0 && isObject(obj) ? length - 1 in obj : true) : false;
}
function isPlainObject(obj) {
if (!obj || !isObject(obj) || type(obj) !== 'object') return false;
var key;
var proto = 'prototype';
var hasOwnProperty = Object[proto].hasOwnProperty;
var hasOwnConstructor = hasOwnProperty.call(obj, 'constructor');
var hasIsPrototypeOf = obj.constructor && obj.constructor[proto] && hasOwnProperty.call(obj.constructor[proto], 'isPrototypeOf');
var cstr = 'constructor';
var ctor = obj[cstr];
var ctorProto = ctor && ctor.prototype;
var hasOwnConstructor = hasOwnProperty.call(obj, cstr);
var hasIsPrototypeOf = ctorProto && hasOwnProperty.call(ctorProto, 'isPrototypeOf');
if (obj.constructor && !hasOwnConstructor && !hasIsPrototypeOf) {
if (ctor && !hasOwnConstructor && !hasIsPrototypeOf) {
return false;
}
@@ -58,16 +64,12 @@
return isUndefined(key) || hasOwnProperty.call(obj, key);
}
function isHTMLElement(obj) {
var instaceOfRightHandSide = window.HTMLElement;
var doInstanceOf = isObject(instaceOfRightHandSide) || isFunction(instaceOfRightHandSide);
return !!(doInstanceOf ? obj instanceof instaceOfRightHandSide : obj && isObject(obj) && obj.nodeType === 1 && isString(obj.nodeName));
var instanceofObj = window.HTMLElement;
return obj ? (instanceofObj ? obj instanceof instanceofObj : obj.nodeType === ElementNodeType) : false;
}
function isEmptyObject(obj) {
for (var name in obj) {
return false;
}
return true;
function isElement(obj) {
var instanceofObj = window.Element;
return obj ? (instanceofObj ? obj instanceof instanceofObj : obj.nodeType === ElementNodeType) : false;
}
function getSetProp(topLeft, fallback, elm, value) {
@@ -86,7 +88,7 @@
elm && elm.setAttribute(attrName, value);
}
var removeAttr = function removeAttr(elm, attrName) {
elm == null ? void 0 : elm.removeAttribute(attrName);
elm && elm.removeAttribute(attrName);
};
function scrollLeft(elm, value) {
return getSetProp('scrollLeft', 0, elm, value);
@@ -107,7 +109,7 @@
result = classes.length > 0;
while ((clazz = classes[i++])) {
result = action(elm.classList, clazz) && result;
result = !!action(elm.classList, clazz) && result;
}
}
@@ -134,6 +136,10 @@
return source;
}
var push = function push(array, items, arrayIsSingleItem) {
!arrayIsSingleItem && !isString(items) && isArrayLike(items) ? Array.prototype.push.apply(array, items) : array.push(items);
return array;
};
var from = function from(arr) {
if (Array.from) {
return Array.from(arr);
@@ -141,26 +147,26 @@
var result = [];
each(arr, function (elm) {
result.push(elm);
push(result, elm);
});
return result;
};
var runEach = function runEach(arr, p1) {
var runFn = function runFn(fn) {
return fn && fn(p1);
};
if (arr instanceof Set) {
arr.forEach(function (fn) {
return fn && fn(p1);
});
arr.forEach(runFn);
} else {
each(arr, function (fn) {
return fn && fn(p1);
});
each(arr, runFn);
}
};
var elmPrototype = Element.prototype;
var is = function is(elm, selector) {
if (elm) {
if (isElement(elm)) {
var fn = elmPrototype.matches || elmPrototype.msMatchesSelector;
return fn.call(elm, selector);
}
@@ -305,8 +311,12 @@
return passiveEventsSupport;
};
var splitEventNames = function splitEventNames(eventNames) {
return eventNames.split(' ');
};
var off = function off(target, eventNames, listener, capture) {
each(eventNames.split(' '), function (eventName) {
each(splitEventNames(eventNames), function (eventName) {
target.removeEventListener(eventName, listener, capture);
});
};
@@ -322,14 +332,14 @@
capture: capture,
}
: capture;
each(eventNames.split(' '), function (eventName) {
each(splitEventNames(eventNames), function (eventName) {
var finalListener = once
? function (evt) {
target.removeEventListener(eventName, finalListener, capture);
listener && listener(evt);
}
: listener;
offListeners.push(off.bind(null, target, eventName, finalListener, capture));
push(offListeners, off.bind(null, target, eventName, finalListener, capture));
target.addEventListener(eventName, finalListener, nativeOptions);
});
return runEach.bind(0, offListeners);
@@ -364,7 +374,7 @@
return equal(a, b, ['t', 'r', 'b', 'l']);
};
var hasOwnProperty = function hasOwnProperty(obj, prop) {
var hasOwnProperty$1 = function hasOwnProperty(obj, prop) {
return Object.prototype.hasOwnProperty.call(obj, prop);
};
var keys = function keys(obj) {
@@ -405,6 +415,13 @@
});
return target;
}
function isEmptyObject(obj) {
for (var name in obj) {
return false;
}
return true;
}
var cssNumber = {
animationiterationcount: 1,
@@ -538,7 +555,7 @@
var cssProperty = function cssProperty(name) {
var result = cssCache[name];
if (hasOwnProperty(cssCache, name)) {
if (hasOwnProperty$1(cssCache, name)) {
return result;
}
@@ -558,7 +575,7 @@
var jsAPI = function jsAPI(name) {
var result = jsCache[name] || window[name];
if (hasOwnProperty(jsCache, name)) {
if (hasOwnProperty$1(jsCache, name)) {
return result;
}
@@ -618,7 +635,7 @@
var optionsCopy = _extends_1({}, options);
var props = keys(template).filter(function (prop) {
return hasOwnProperty(options, prop);
return hasOwnProperty$1(options, prop);
});
each(props, function (prop) {
var optionsDiffValue = isUndefined(optionsDiff[prop]) ? {} : optionsDiff[prop];
@@ -656,12 +673,12 @@
isValid = !!enumStringSplit.find(function (possibility) {
return possibility === optionsValue;
});
errorEnumStrings.push.apply(errorEnumStrings, enumStringSplit);
push(errorEnumStrings, enumStringSplit);
} else {
isValid = optionsTemplateTypes[optionsValueType] === currTemplateType;
}
errorPossibleTypes.push(isEnumString ? optionsTemplateTypes.string : typeString);
push(errorPossibleTypes, isEnumString ? optionsTemplateTypes.string : typeString);
return !isValid;
});
@@ -893,7 +910,7 @@
return (
obj &&
path.split('.').reduce(function (o, prop) {
return o && hasOwnProperty(o, prop) ? o[prop] : undefined;
return o && hasOwnProperty$1(o, prop) ? o[prop] : undefined;
}, obj)
);
};
@@ -1101,7 +1118,7 @@
if (ResizeObserverConstructor) {
var resizeObserverInstance = new ResizeObserverConstructor(onSizeChangedCallbackProxy);
resizeObserverInstance.observe(listenerElement);
offListeners.push(function () {
push(offListeners, function () {
return resizeObserverInstance.disconnect();
});
} else {
@@ -1166,8 +1183,7 @@
return false;
};
offListeners.push(on(expandElement, scrollEventName, onScroll));
offListeners.push(on(shrinkElement, scrollEventName, onScroll));
push(offListeners, [on(expandElement, scrollEventName, onScroll), on(shrinkElement, scrollEventName, onScroll)]);
style(expandElementChild, {
width: scrollAmount,
height: scrollAmount,
@@ -1184,7 +1200,8 @@
var updateDirectionCache = createCache(function () {
return getDirection(sizeObserver);
});
offListeners.push(
push(
offListeners,
on(sizeObserver, scrollEventName, function (event) {
var directionCache = updateDirectionCache();
var _value = directionCache._value,
@@ -1215,7 +1232,7 @@
if (appearCallback) {
addClass(sizeObserver, classNameSizeObserverAppear);
offListeners.push(on(sizeObserver, animationStartEventName, appearCallback));
push(offListeners, on(sizeObserver, animationStartEventName, appearCallback));
}
prependChildren(target, sizeObserver);
@@ -1257,11 +1274,12 @@
}
);
intersectionObserverInstance.observe(trinsicObserver);
offListeners.push(function () {
push(offListeners, function () {
return intersectionObserverInstance.disconnect();
});
} else {
offListeners.push(
push(
offListeners,
createSizeObserver(trinsicObserver, function () {
var newSize = offsetSize(trinsicObserver);
var heightIntrinsicCache = updateHeightIntrinsicCache(0, newSize);
@@ -1321,7 +1339,7 @@
var osTarget = normalizeTarget(target);
var lifecycles = [];
var host = osTarget.host;
lifecycles.push(createStructureLifecycle(osTarget));
push(lifecycles, createStructureLifecycle(osTarget));
var onSizeChanged = function onSizeChanged(directionCache) {
if (directionCache) {
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/src/observers/domObserver.ts
+4 -7
View File
@@ -1,4 +1,4 @@
import { each, indexOf, isString, MutationObserverConstructor, isEmptyArray, on, off, attr, is, find, push } from 'support';
import { each, debounce, indexOf, isString, MutationObserverConstructor, isEmptyArray, on, off, attr, is, find, push } from 'support';
type StringNullUndefined = string | null | undefined;
@@ -32,11 +32,11 @@ export const createDOMObserver = (
): DOMObserver => {
let isConnected = false;
const { _observeContent, _attributes, _ignoreContentChange, _eventContentChange } = options || {};
const eventContentChangeCallback = () => {
const eventContentChangeCallback = debounce(() => {
if (isConnected) {
callback([], false, true);
}
};
});
const refreshEventContentChange = (getElements: (selector: string) => Node[]) => {
if (_eventContentChange) {
const eventContentChanges = _eventContentChange();
@@ -104,10 +104,7 @@ export const createDOMObserver = (
refreshEventContentChange((selector) =>
totalAddedNodes.reduce<Node[]>((arr, node) => {
push(arr, find(selector, node));
if (is(node, selector)) {
push(arr, node);
}
return arr;
return is(node, selector) ? push(arr, node) : arr;
}, [])
);
}
packages/overlayscrollbars/src/support/compatibility/vendors.ts
+3 -2
View File
@@ -1,5 +1,6 @@
import { each, hasOwnProperty } from 'support/utils';
import { createDiv } from 'support/dom';
import { each } from 'support/utils/array';
import { hasOwnProperty } from 'support/utils/object';
import { createDiv } from 'support/dom/create';
const firstLetterToUpper = (str: string): string => str.charAt(0).toUpperCase() + str.slice(1);
const getDummyStyle = (): CSSStyleDeclaration => createDiv().style;
packages/overlayscrollbars/src/support/dom/attribute.ts
+1 -1
View File
@@ -36,7 +36,7 @@ export function attr(elm: HTMLElement | null, attrName: string, value?: string):
* @param attrName The attribute name.
*/
export const removeAttr = (elm: Element | null, attrName: string): void => {
elm?.removeAttribute(attrName);
elm && elm.removeAttribute(attrName);
};
/**
packages/overlayscrollbars/src/support/dom/class.ts
+1 -1
View File
@@ -10,7 +10,7 @@ const classListAction = (elm: Element | null, className: string, action: (elmCla
const classes: Array<string> = className.match(rnothtmlwhite) || [];
result = classes.length > 0;
while ((clazz = classes[i++])) {
result = (action(elm.classList, clazz) as boolean) && result;
result = !!action(elm.classList, clazz) && result;
}
}
return result;
packages/overlayscrollbars/src/support/dom/events.ts
+3 -2
View File
@@ -21,6 +21,7 @@ const supportPassiveEvents = (): boolean => {
}
return passiveEventsSupport;
};
const splitEventNames = (eventNames: string) => eventNames.split(' ');
export interface OnOptions {
_capture?: boolean;
@@ -36,7 +37,7 @@ export interface OnOptions {
* @param capture The options of the removed listener.
*/
export const off = (target: EventTarget, eventNames: string, listener: EventListener, capture?: boolean): void => {
each(eventNames.split(' '), (eventName) => {
each(splitEventNames(eventNames), (eventName) => {
target.removeEventListener(eventName, listener, capture);
});
};
@@ -61,7 +62,7 @@ export const on = (target: EventTarget, eventNames: string, listener: EventListe
}
: capture;
each(eventNames.split(' '), (eventName) => {
each(splitEventNames(eventNames), (eventName) => {
const finalListener = once
? (evt: Event) => {
target.removeEventListener(eventName, finalListener, capture);
packages/overlayscrollbars/src/support/dom/manipulation.ts
+3 -3
View File
@@ -69,7 +69,7 @@ export const prependChildren = (node: Node | null, children: NodeCollection): vo
* @param insertedNodes The Nodes which shall be inserted.
*/
export const insertBefore = (node: Node | null, insertedNodes: NodeCollection): void => {
before(parent(node as Element), node, insertedNodes);
before(parent(node), node, insertedNodes);
};
/**
@@ -78,7 +78,7 @@ export const insertBefore = (node: Node | null, insertedNodes: NodeCollection):
* @param insertedNodes The Nodes which shall be inserted.
*/
export const insertAfter = (node: Node | null, insertedNodes: NodeCollection): void => {
before(parent(node as Element), node && node.nextSibling, insertedNodes);
before(parent(node), node && node.nextSibling, insertedNodes);
};
/**
@@ -89,7 +89,7 @@ export const removeElements = (nodes: NodeCollection): void => {
if (isArrayLike(nodes)) {
each(from(nodes), (e) => removeElements(e));
} else if (nodes) {
const parentElm = parent(nodes as Element);
const parentElm = parent(nodes);
if (parentElm) {
parentElm.removeChild(nodes);
}
packages/overlayscrollbars/src/support/dom/traversal.ts
+5 -5
View File
@@ -75,17 +75,17 @@ const parent = (elm: InputElementType): OutputElementType => (elm ? elm.parentEl
const closest = (elm: InputElementType, selector: string): OutputElementType => {
if (isElement(elm)) {
// eslint-disable-next-line
// @ts-ignore
if (elmPrototype.closest) {
return elm.closest(selector);
const closestFn = elmPrototype.closest;
if (closestFn) {
return closestFn.call(elm, selector);
}
do {
if (is(elm, selector)) {
return elm as Element;
}
elm = parent(elm);
} while (elm !== null && elm.nodeType === 1);
} while (elm);
}
return null;
packages/overlayscrollbars/src/support/options/index.ts
+1 -1
View File
@@ -42,7 +42,7 @@ type OptionsTemplateTypeMap = {
__TPL_array_TYPE__: Array<any>;
__TPL_function_TYPE__: Func;
__TPL_null_TYPE__: null;
__TPL_object_TYPE__: object; // eslint-disable-line @typescript-eslint/ban-types
__TPL_object_TYPE__: Record<string, unknown>;
};
type OptionsTemplateValueNonEnum<T extends OptionsTemplateNativeTypes> =
| OptionsTemplateType<T>
packages/overlayscrollbars/src/support/options/validation.ts
+1 -1
View File
@@ -171,7 +171,7 @@ type OptionsTemplateTypesDictionary = {
readonly number: OptionsTemplateType<number>;
readonly string: OptionsTemplateType<string>;
readonly array: OptionsTemplateType<Array<any>>;
readonly object: OptionsTemplateType<object>; // eslint-disable-line @typescript-eslint/ban-types
readonly object: OptionsTemplateType<Record<string, unknown>>;
readonly function: OptionsTemplateType<Func>;
readonly null: OptionsTemplateType<null>;
};
packages/overlayscrollbars/src/support/utils/array.ts
+5 -2
View File
@@ -74,9 +74,11 @@ export const from = <T = any>(arr: ArrayLike<T>) => {
return Array.from(arr);
}
const result: Array<T> = [];
each(arr, (elm) => {
push(result, elm);
});
return result;
};
@@ -92,9 +94,10 @@ export const isEmptyArray = (array: Array<any> | null | undefined) => array && a
* @param p1 The first param.
*/
export const runEach = (arr: ArrayLike<RunEachItem> | Set<RunEachItem>, p1?: unknown): void => {
const runFn = (fn: RunEachItem) => fn && fn(p1);
if (arr instanceof Set) {
arr.forEach((fn) => fn && fn(p1));
arr.forEach(runFn);
} else {
each(arr, (fn) => fn && fn(p1));
each(arr, runFn);
}
};
packages/overlayscrollbars/src/support/utils/function.ts
+34
View File
@@ -0,0 +1,34 @@
import { isNumber } from 'support/utils/types';
import { cAF, rAF } from 'support/compatibility/apis';
/**
* Debounces the given function either with a timeout or a animation frame.
* @param functionToDebounce The function which shall be debounced.
* @param timeout The timeout for debouncing. If 0 or lower animation frame is used for debouncing, a timeout otherwise.
* @param maxWait A maximum amount of ms. before the function will be called even with debounce.
*/
export const debounce = (functionToDebounce: (...args: any) => any, timeout?: number, maxWait?: number) => {
let timeoutId: number | void;
let lastCallTime: number;
const hasTimeout = isNumber(timeout) && timeout > 0;
const hasMaxWait = isNumber(maxWait) && maxWait > 0;
const cancel = hasTimeout ? window.clearTimeout : cAF!;
const set = hasTimeout ? window.setTimeout : rAF!;
const setFn = function (args: IArguments) {
lastCallTime = hasMaxWait ? performance.now() : 0;
timeoutId && cancel(timeoutId);
// eslint-disable-next-line
// @ts-ignore
functionToDebounce.apply(this, args);
};
return function () {
// eslint-disable-next-line
// @ts-ignore
const boundSetFn = setFn.bind(this, arguments); // eslint-disable-line
const forceCall = hasMaxWait ? performance.now() - lastCallTime >= maxWait! : false;
timeoutId && cancel(timeoutId);
timeoutId = forceCall ? boundSetFn() : (set(boundSetFn, timeout!) as number);
};
};
packages/overlayscrollbars/src/support/utils/index.ts
+1
View File
@@ -1,5 +1,6 @@
export * from 'support/utils/array';
export * from 'support/utils/equal';
export * from 'support/utils/function';
export * from 'support/utils/lexicon';
export * from 'support/utils/object';
export * from 'support/utils/types';
packages/overlayscrollbars/src/support/utils/types.ts
+10 -10
View File
@@ -1,15 +1,15 @@
import { PlainObject } from 'typings';
import { hasOwnProperty } from 'support/utils/object';
const ElementNodeType = Node.ELEMENT_NODE;
const { toString, hasOwnProperty } = Object.prototype;
export const type: (obj: any) => string = (obj) => {
if (obj === undefined) return `${obj}`;
if (obj === null) return `${obj}`;
return Object.prototype.toString
.call(obj)
.replace(/^\[object (.+)\]$/, '$1')
.toLowerCase();
return obj === undefined || obj === null
? `${obj}`
: toString
.call(obj)
.replace(/^\[object (.+)\]$/, '$1')
.toLowerCase();
};
export function isNumber(obj: any): obj is number {
@@ -66,8 +66,8 @@ export function isPlainObject<T = any>(obj: any): obj is PlainObject<T> {
const cstr = 'constructor';
const ctor = obj[cstr];
const ctorProto = ctor && ctor.prototype;
const hasOwnConstructor = hasOwnProperty(obj, cstr);
const hasIsPrototypeOf = ctorProto && hasOwnProperty(ctorProto, 'isPrototypeOf');
const hasOwnConstructor = hasOwnProperty.call(obj, cstr);
const hasIsPrototypeOf = ctorProto && hasOwnProperty.call(ctorProto, 'isPrototypeOf');
if (ctor && !hasOwnConstructor && !hasIsPrototypeOf) {
return false;
@@ -79,7 +79,7 @@ export function isPlainObject<T = any>(obj: any): obj is PlainObject<T> {
}
/* eslint-enable */
return isUndefined(key) || hasOwnProperty(obj, key);
return isUndefined(key) || hasOwnProperty.call(obj, key);
}
/**
packages/overlayscrollbars/tests/puppeteer/observers/domObserver/index.browser.ts
+21 -1
View File
@@ -232,9 +232,11 @@ const addRemoveTargetContentBetweenElmsFn = async () => {
await addRemoveElementsTest(targetContentBetweenElmsSlot, targetElmContentElmObservations);
};
const addImgElmsFn = async () => {
/*
const add = async () => {
const img = new Image(1, 1);
img.src = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
const { before, after, compare } = changedThrough(targetElmContentElmObservations);
const imgHolder = createDiv('img');
appendChildren(imgHolder, img);
@@ -261,6 +263,21 @@ const addImgElmsFn = async () => {
await add();
await add();
await add();
*/
const add = async () => {
const img = new Image(1, 1);
img.src = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
//const { before, after, compare } = changedThrough(targetElmContentElmObservations);
const imgHolder = createDiv('img');
appendChildren(imgHolder, img);
appendChildren(imgElmsSlot, imgHolder);
};
add();
add();
add();
};
const iterateTargetAttrChange = async () => {
await iterateAttrChange(setTargetAttr, targetElmObservations, (observation, selected) => {
@@ -340,7 +357,10 @@ createDOMObserver(
{
_observeContent: true,
_eventContentChange: () => {
return [['img', 'load']];
return [
['img', 'load'],
['iframe', 'load'],
];
},
_ignoreContentChange: (mutation) => {
const { target, attributeName } = mutation;
packages/overlayscrollbars/tests/puppeteer/observers/domObserver/index.scss
+2
View File
@@ -77,9 +77,11 @@ body {
}
.img {
display: inline-block;
background: lime;
width: 50px;
height: 50px;
border-radius: 100%;
img {
opacity: 0;
packages/overlayscrollbars/types/observers/domObserver.d.ts
Vendored
+8 -1
View File
@@ -1,9 +1,16 @@
declare type StringNullUndefined = string | null | undefined;
export declare type DOMOvserverEventContentChangeResult = Array<[StringNullUndefined, StringNullUndefined] | null | undefined>;
export declare type DOMOvserverEventContentChange = () => DOMOvserverEventContentChangeResult;
export declare type DOMObserverIgnoreContentChange = (mutation: MutationRecord, domObserverTarget: HTMLElement, domObserverOptions: DOMObserverOptions | undefined) => boolean | null | undefined;
export interface DOMObserverOptions {
_observeContent?: boolean;
_attributes?: string[];
_ignoreContentChange?: DOMObserverIgnoreContentChange;
_eventContentChange?: DOMOvserverEventContentChange;
}
export interface DOMObserver {
_disconnect: () => void;
_update: () => void;
}
export declare const createDOMObserver: (target: HTMLElement, callback: (changedTargetAttrs: string[], styleChanged: boolean, contentChanged: boolean) => any, options?: DOMObserverOptions | undefined) => DOMObserver;
export declare const createDOMObserver: (target: HTMLElement, callback: (targetChangedAttrs: string[], targetStyleChanged: boolean, contentChanged: boolean) => any, options?: DOMObserverOptions | undefined) => DOMObserver;
export {};
packages/overlayscrollbars/types/support/dom/traversal.d.ts
Vendored
+2 -2
View File
@@ -1,6 +1,6 @@
declare type InputElementType = Element | null | undefined;
declare type InputElementType = Element | Node | null | undefined;
declare type OutputElementType = Element | null;
declare const find: (selector: string, elm?: InputElementType) => ReadonlyArray<Element>;
declare const find: (selector: string, elm?: InputElementType) => Element[];
declare const findFirst: (selector: string, elm?: InputElementType) => OutputElementType;
declare const is: (elm: InputElementType, selector: string) => boolean;
declare const children: (elm: InputElementType, selector?: string | undefined) => ReadonlyArray<Element>;
packages/overlayscrollbars/types/support/options/index.d.ts
Vendored
+1 -1
View File
@@ -27,7 +27,7 @@ declare type OptionsTemplateTypeMap = {
__TPL_array_TYPE__: Array<any>;
__TPL_function_TYPE__: Func;
__TPL_null_TYPE__: null;
__TPL_object_TYPE__: object;
__TPL_object_TYPE__: Record<string, unknown>;
};
declare type OptionsTemplateValueNonEnum<T extends OptionsTemplateNativeTypes> = OptionsTemplateType<T> | [OptionsTemplateType<T>, ...Array<OptionsTemplateTypes>];
declare type ExtractPropsKey<T, TProps extends T[keyof T]> = {
packages/overlayscrollbars/types/support/options/validation.d.ts
Vendored
+1 -1
View File
@@ -8,7 +8,7 @@ declare type OptionsTemplateTypesDictionary = {
readonly number: OptionsTemplateType<number>;
readonly string: OptionsTemplateType<string>;
readonly array: OptionsTemplateType<Array<any>>;
readonly object: OptionsTemplateType<object>;
readonly object: OptionsTemplateType<Record<string, unknown>>;
readonly function: OptionsTemplateType<Func>;
readonly null: OptionsTemplateType<null>;
};
packages/overlayscrollbars/types/support/utils/array.d.ts
Vendored
+1
View File
@@ -7,6 +7,7 @@ export declare function each<T>(arrayLikeObject: 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 | null | undefined, callback: (value: any, indexOrKey: string, source: PlainObject) => boolean | void): PlainObject | null | undefined;
export declare const indexOf: <T = any>(arr: T[], item: T, fromIndex?: number | undefined) => number;
export declare const push: <T>(array: T[], items: T | ArrayLike<T>, arrayIsSingleItem?: boolean | undefined) => T[];
export declare const from: <T = any>(arr: ArrayLike<T>) => T[];
export declare const isEmptyArray: (array: Array<any> | null | undefined) => boolean | null | undefined;
export declare const runEach: (arr: ArrayLike<RunEachItem> | Set<RunEachItem>, p1?: unknown) => void;
packages/overlayscrollbars/types/support/utils/object.d.ts
Vendored
+1
View File
@@ -5,3 +5,4 @@ export declare function assignDeep<T, U, V>(target: T, object1: U, object2: V):
export declare function assignDeep<T, U, V, W>(target: T, object1: U, object2: V, object3: W): T & U & V & W;
export declare function assignDeep<T, U, V, W, X>(target: T, object1: U, object2: V, object3: W, object4: X): T & U & V & W & X;
export declare function assignDeep<T, U, V, W, X, Y>(target: T, object1: U, object2: V, object3: W, object4: X, object5: Y): T & U & V & W & X & Y;
export declare function isEmptyObject(obj: any): boolean;
packages/overlayscrollbars/types/support/utils/types.d.ts
Vendored
+1 -1
View File
@@ -11,4 +11,4 @@ export declare function isObject(obj: any): boolean;
export declare function isArrayLike<T extends PlainObject = any>(obj: any): obj is ArrayLike<T>;
export declare function isPlainObject<T = any>(obj: any): obj is PlainObject<T>;
export declare function isHTMLElement(obj: any): obj is HTMLElement;
export declare function isEmptyObject(obj: any): boolean;
export declare function isElement(obj: any): obj is Element;