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

update build

Browse Source
This commit is contained in:
Rene
2021-02-14 21:41:55 +01:00
parent f5efd56f70
commit 2f6468a6b3
20 changed files with 406 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+2 -2
View File
@@ -57,8 +57,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.0.0", "tslib": "^2.1.0",
"typescript": "^3.9.7", "typescript": "^4.1.5",
"utf-8-validate": "^5.0.2" "utf-8-validate": "^5.0.2"
}, },
"scripts": { "scripts": {
packages/overlayscrollbars/dist/overlayscrollbars.esm.js
Vendored
+160 -58
View File
@@ -20,6 +20,9 @@ function isNumber(obj) {
function isString(obj) { function isString(obj) {
return typeof obj === 'string'; return typeof obj === 'string';
} }
function isBoolean(obj) {
return typeof obj === 'boolean';
}
function isFunction(obj) { function isFunction(obj) {
return typeof obj === 'function'; return typeof obj === 'function';
} }
@@ -190,6 +193,9 @@ const classListAction = (elm, className, action) => {
const addClass = (elm, className) => { const addClass = (elm, className) => {
classListAction(elm, className, (classList, clazz) => classList.add(clazz)); classListAction(elm, className, (classList, clazz) => classList.add(clazz));
}; };
const removeClass = (elm, className) => {
classListAction(elm, className, (classList, clazz) => classList.remove(clazz));
};
const elmPrototype = Element.prototype; const elmPrototype = Element.prototype;
@@ -239,7 +245,7 @@ const before = (parentElm, preferredAnchor, insertedElms) => {
} }
} }
parentElm.insertBefore(fragment, anchor); parentElm.insertBefore(fragment, anchor || null);
} }
} }
}; };
@@ -250,6 +256,9 @@ const appendChildren = (node, children) => {
const prependChildren = (node, children) => { const prependChildren = (node, children) => {
before(node, node && node.firstChild, children); before(node, node && node.firstChild, children);
}; };
const insertAfter = (node, insertedNodes) => {
before(parent(node), node && node.nextSibling, insertedNodes);
};
const removeElements = (nodes) => { const removeElements = (nodes) => {
if (isArrayLike(nodes)) { if (isArrayLike(nodes)) {
each(from(nodes), (e) => removeElements(e)); each(from(nodes), (e) => removeElements(e));
@@ -917,14 +926,14 @@ const defaultOptionsWithTemplate = {
const cssMarginEnd = cssProperty('margin-inline-end'); const cssMarginEnd = cssProperty('margin-inline-end');
const cssBorderEnd = cssProperty('border-inline-end'); const cssBorderEnd = cssProperty('border-inline-end');
const createStructureLifecycle = (target, initialOptions) => { const createStructureLifecycle = (target, initialOptions) => {
const { host, padding: paddingElm, viewport, content } = target; const { _host, _padding, _viewport, _content } = target;
const destructFns = []; const destructFns = [];
const env = getEnvironment(); const env = getEnvironment();
const scrollbarsOverlaid = env._nativeScrollbarIsOverlaid; const scrollbarsOverlaid = env._nativeScrollbarIsOverlaid;
const supportsScrollbarStyling = env._nativeScrollbarStyling; const supportsScrollbarStyling = env._nativeScrollbarStyling;
const supportFlexboxGlue = env._flexboxGlue; const supportFlexboxGlue = env._flexboxGlue;
const directionObserverObsolete = (cssMarginEnd && cssBorderEnd) || supportsScrollbarStyling || scrollbarsOverlaid.y; const directionObserverObsolete = (cssMarginEnd && cssBorderEnd) || supportsScrollbarStyling || scrollbarsOverlaid.y;
const updatePaddingCache = createCache(() => topRightBottomLeft(host, 'padding'), { const updatePaddingCache = createCache(() => topRightBottomLeft(_host, 'padding'), {
_equal: equalTRBL, _equal: equalTRBL,
}); });
const updateOverflowAmountCache = createCache( const updateOverflowAmountCache = createCache(
@@ -955,7 +964,7 @@ const createStructureLifecycle = (target, initialOptions) => {
paddingStyle.l = -padding.l; paddingStyle.l = -padding.l;
} }
style(paddingElm, { style(_padding, {
top: paddingStyle.t, top: paddingStyle.t,
left: paddingStyle.l, left: paddingStyle.l,
'margin-right': paddingStyle.r, 'margin-right': paddingStyle.r,
@@ -964,9 +973,9 @@ const createStructureLifecycle = (target, initialOptions) => {
}); });
} }
const viewportOffsetSize = offsetSize(paddingElm); const viewportOffsetSize = offsetSize(_padding);
const contentClientSize = offsetSize(content); const contentClientSize = offsetSize(_content);
const contentScrollSize = scrollSize(content); const contentScrollSize = scrollSize(_content);
const overflowAmuntCache = updateOverflowAmountCache(force, { const overflowAmuntCache = updateOverflowAmountCache(force, {
_contentScrollSize: contentScrollSize, _contentScrollSize: contentScrollSize,
_viewportSize: { _viewportSize: {
@@ -987,7 +996,7 @@ const createStructureLifecycle = (target, initialOptions) => {
const { _changed, _value } = heightIntrinsicCache; const { _changed, _value } = heightIntrinsicCache;
if (_changed) { if (_changed) {
style(content, { style(_content, {
height: _value ? 'auto' : '100%', height: _value ? 'auto' : '100%',
}); });
} }
@@ -1008,10 +1017,20 @@ const createStructureLifecycle = (target, initialOptions) => {
const animationStartEventName = 'animationstart'; const animationStartEventName = 'animationstart';
const scrollEventName = 'scroll'; const scrollEventName = 'scroll';
const scrollAmount = 3333333; const scrollAmount = 3333333;
const directionIsRTLMap = {
direction: ['rtl'],
};
const getDirection = (elm) => style(elm, 'direction'); const directionIsRTL = (elm) => {
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 > 0 || rect.width > 0); const domRectHasDimensions = (rect) => rect && (rect.height || rect.width);
const createSizeObserver = (target, onSizeChangedCallback, options) => { const createSizeObserver = (target, onSizeChangedCallback, options) => {
const { _direction: observeDirectionChange = false, _appear: observeAppearChange = false } = options || {}; const { _direction: observeDirectionChange = false, _appear: observeAppearChange = false } = options || {};
@@ -1027,26 +1046,24 @@ const createSizeObserver = (target, onSizeChangedCallback, options) => {
}); });
const onSizeChangedCallbackProxy = (sizeChangedContext) => { const onSizeChangedCallbackProxy = (sizeChangedContext) => {
const directionCacheValue = sizeChangedContext && sizeChangedContext._value; const hasDirectionCache = sizeChangedContext && isBoolean(sizeChangedContext._value);
let skip = false; let skip = false;
let doDirectionScroll = true;
if (isArray(sizeChangedContext) && sizeChangedContext.length > 0) { if (isArray(sizeChangedContext) && sizeChangedContext.length > 0) {
const { _previous, _value, _changed } = updateResizeObserverContentRectCache(0, sizeChangedContext.pop().contentRect); const { _previous, _value, _changed } = updateResizeObserverContentRectCache(0, sizeChangedContext.pop().contentRect);
skip = !_previous || !domRectHasDimensions(_value); skip = !_previous || !domRectHasDimensions(_value);
doDirectionScroll = !skip && _changed; } else if (hasDirectionCache) {
} else if (directionCacheValue) { sizeChangedContext._changed;
doDirectionScroll = sizeChangedContext._changed;
} }
if (observeDirectionChange && doDirectionScroll) { if (observeDirectionChange) {
const rtl = (directionCacheValue || getDirection(sizeObserver)) === 'rtl'; const rtl = hasDirectionCache ? sizeChangedContext._value : directionIsRTL(sizeObserver);
scrollLeft(sizeObserver, rtl ? (rtlScrollBehavior.n ? -scrollAmount : rtlScrollBehavior.i ? 0 : scrollAmount) : scrollAmount); scrollLeft(sizeObserver, rtl ? (rtlScrollBehavior.n ? -scrollAmount : rtlScrollBehavior.i ? 0 : scrollAmount) : scrollAmount);
scrollTop(sizeObserver, scrollAmount); scrollTop(sizeObserver, scrollAmount);
} }
if (!skip) { if (!skip) {
onSizeChangedCallback(directionCacheValue ? sizeChangedContext : undefined); onSizeChangedCallback(hasDirectionCache ? sizeChangedContext : undefined);
} }
}; };
@@ -1119,15 +1136,15 @@ const createSizeObserver = (target, onSizeChangedCallback, options) => {
} }
if (observeDirectionChange) { if (observeDirectionChange) {
const updateDirectionCache = createCache(() => getDirection(sizeObserver)); const updateDirectionIsRTLCache = createCache(() => directionIsRTL(sizeObserver));
push( push(
offListeners, offListeners,
on(sizeObserver, scrollEventName, (event) => { on(sizeObserver, scrollEventName, (event) => {
const directionCache = updateDirectionCache(); const directionIsRTLCache = updateDirectionIsRTLCache();
const { _value, _changed } = directionCache; const { _value, _changed } = directionIsRTLCache;
if (_changed) { if (_changed) {
if (_value === 'rtl') { if (_value) {
style(listenerElement, { style(listenerElement, {
left: 'auto', left: 'auto',
right: 0, right: 0,
@@ -1139,7 +1156,7 @@ const createSizeObserver = (target, onSizeChangedCallback, options) => {
}); });
} }
onSizeChangedCallbackProxy(directionCache); onSizeChangedCallbackProxy(directionIsRTLCache);
} }
preventDefault(event); preventDefault(event);
@@ -1403,45 +1420,130 @@ const createDOMObserver = (target, callback, options) => {
}; };
}; };
const normalizeTarget = (target) => { const unwrap = (elm) => {
if (isHTMLElement(target)) { appendChildren(parent(elm), contents(elm));
const isTextarea = is(target, 'textarea'); removeElements(elm);
};
const _host = isTextarea ? createDiv() : target; const createStructureSetup = (target) => {
const targetIsElm = isHTMLElement(target);
const osTargetObj = targetIsElm
? {}
: {
_host: target.host,
_target: target.target,
_padding: target.padding,
_viewport: target.viewport,
_content: target.content,
};
const _padding = createDiv(classNamePadding); if (targetIsElm) {
const padding = createDiv(classNamePadding);
const _viewport = createDiv(classNameViewport); const viewport = createDiv(classNameViewport);
const content = createDiv(classNameContent);
const _content = createDiv(classNameContent); appendChildren(padding, viewport);
appendChildren(viewport, content);
appendChildren(_padding, _viewport); osTargetObj._target = target;
appendChildren(_viewport, _content); osTargetObj._padding = padding;
appendChildren(_content, contents(target)); osTargetObj._viewport = viewport;
appendChildren(target, _padding); osTargetObj._content = content;
addClass(_host, classNameHost);
return {
target,
host: _host,
padding: _padding,
viewport: _viewport,
content: _content,
};
} }
const { host, padding, viewport, content } = target; let { _target, _padding, _viewport, _content } = osTargetObj;
addClass(host, classNameHost); let destroyFns = [];
addClass(padding, classNamePadding); const isTextarea = is(_target, 'textarea');
addClass(viewport, classNameViewport); const isBody = !isTextarea && is(_target, 'body');
addClass(content, classNameContent);
return target; const _host = isTextarea ? osTargetObj._host || createDiv() : _target;
const getTargetContents = (contentSlot) => (isTextarea ? _target : contents(contentSlot));
const ownerDocument = _target.ownerDocument;
const bodyElm = ownerDocument.body;
const wnd = ownerDocument.defaultView;
const isTextareaHostGenerated = isTextarea && _host !== osTargetObj._host;
if (isTextareaHostGenerated) {
insertAfter(_target, _host);
push(destroyFns, () => {
insertAfter(_host, _target);
removeElements(_host);
});
}
if (targetIsElm) {
appendChildren(_content, getTargetContents(_target));
appendChildren(_host, _padding);
push(destroyFns, () => {
appendChildren(_host, contents(_content));
removeElements(_padding);
removeClass(_host, classNameHost);
});
} else {
const contentContainingElm = _content || _viewport || _padding || _host;
const createPadding = isUndefined(_padding);
const createViewport = isUndefined(_viewport);
const createContent = isUndefined(_content);
const targetContents = getTargetContents(contentContainingElm);
_padding = osTargetObj._padding = createPadding ? createDiv() : _padding;
_viewport = osTargetObj._viewport = createViewport ? createDiv() : _viewport;
_content = osTargetObj._content = createContent ? createDiv() : _content;
appendChildren(_host, _padding);
appendChildren(_padding || _host, _viewport);
appendChildren(_viewport, _content);
const contentSlot = _content || _viewport;
appendChildren(contentSlot, targetContents);
push(destroyFns, () => {
if (createContent) {
unwrap(_content);
}
if (createViewport) {
unwrap(_viewport);
}
if (createPadding) {
unwrap(_padding);
}
removeClass(_host, classNameHost);
removeClass(_padding, classNamePadding);
removeClass(_viewport, classNameViewport);
removeClass(_content, classNameContent);
});
}
addClass(_host, classNameHost);
addClass(_padding, classNamePadding);
addClass(_viewport, classNameViewport);
addClass(_content, classNameContent);
const ctx = {
_windowElm: wnd,
_documentElm: ownerDocument,
_htmlElm: parent(bodyElm),
_bodyElm: bodyElm,
_isTextarea: isTextarea,
_isBody: isBody,
};
const obj = _extends_1({}, osTargetObj, {
_host,
});
return {
_targetObj: obj,
_targetCtx: ctx,
_destroy: () => {
runEach(destroyFns);
},
};
}; };
const OverlayScrollbars = (target, options, extensions) => { const OverlayScrollbars = (target, options, extensions) => {
const osTarget = normalizeTarget(target); const structureSetup = createStructureSetup(target);
const lifecycles = []; const lifecycles = [];
const { host, content } = osTarget; const { _host, _viewport, _content } = structureSetup._targetObj;
push(lifecycles, createStructureLifecycle(osTarget)); push(lifecycles, createStructureLifecycle(structureSetup._targetObj));
const onSizeChanged = (directionCache) => { const onSizeChanged = (directionCache) => {
if (directionCache) { if (directionCache) {
@@ -1461,16 +1563,16 @@ const OverlayScrollbars = (target, options, extensions) => {
}); });
}; };
createSizeObserver(host, onSizeChanged, { createSizeObserver(_host, onSizeChanged, {
_appear: true, _appear: true,
_direction: true, _direction: true,
}); });
createTrinsicObserver(host, onTrinsicChanged); createTrinsicObserver(_host, onTrinsicChanged);
createDOMObserver(host, () => { createDOMObserver(_host, () => {
return null; return null;
}); });
createDOMObserver( createDOMObserver(
content, _content || _viewport,
() => { () => {
return null; return null;
}, },
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
+174 -68
View File
@@ -31,6 +31,9 @@
function isString(obj) { function isString(obj) {
return typeof obj === 'string'; return typeof obj === 'string';
} }
function isBoolean(obj) {
return typeof obj === 'boolean';
}
function isFunction(obj) { function isFunction(obj) {
return typeof obj === 'function'; return typeof obj === 'function';
} }
@@ -217,6 +220,11 @@
return classList.add(clazz); return classList.add(clazz);
}); });
}; };
var removeClass = function removeClass(elm, className) {
classListAction(elm, className, function (classList, clazz) {
return classList.remove(clazz);
});
};
var elmPrototype = Element.prototype; var elmPrototype = Element.prototype;
@@ -270,7 +278,7 @@
} }
} }
parentElm.insertBefore(fragment, anchor); parentElm.insertBefore(fragment, anchor || null);
} }
} }
}; };
@@ -281,6 +289,9 @@
var prependChildren = function prependChildren(node, children) { var prependChildren = function prependChildren(node, children) {
before(node, node && node.firstChild, children); before(node, node && node.firstChild, children);
}; };
var insertAfter = function insertAfter(node, insertedNodes) {
before(parent(node), node && node.nextSibling, insertedNodes);
};
var removeElements = function removeElements(nodes) { var removeElements = function removeElements(nodes) {
if (isArrayLike(nodes)) { if (isArrayLike(nodes)) {
each(from(nodes), function (e) { each(from(nodes), function (e) {
@@ -1012,10 +1023,10 @@
var cssMarginEnd = cssProperty('margin-inline-end'); var cssMarginEnd = cssProperty('margin-inline-end');
var cssBorderEnd = cssProperty('border-inline-end'); var cssBorderEnd = cssProperty('border-inline-end');
var createStructureLifecycle = function createStructureLifecycle(target, initialOptions) { var createStructureLifecycle = function createStructureLifecycle(target, initialOptions) {
var host = target.host, var _host = target._host,
paddingElm = target.padding, _padding = target._padding,
viewport = target.viewport, _viewport = target._viewport,
content = target.content; _content = target._content;
var destructFns = []; var destructFns = [];
var env = getEnvironment(); var env = getEnvironment();
var scrollbarsOverlaid = env._nativeScrollbarIsOverlaid; var scrollbarsOverlaid = env._nativeScrollbarIsOverlaid;
@@ -1024,7 +1035,7 @@
var directionObserverObsolete = (cssMarginEnd && cssBorderEnd) || supportsScrollbarStyling || scrollbarsOverlaid.y; var directionObserverObsolete = (cssMarginEnd && cssBorderEnd) || supportsScrollbarStyling || scrollbarsOverlaid.y;
var updatePaddingCache = createCache( var updatePaddingCache = createCache(
function () { function () {
return topRightBottomLeft(host, 'padding'); return topRightBottomLeft(_host, 'padding');
}, },
{ {
_equal: equalTRBL, _equal: equalTRBL,
@@ -1066,7 +1077,7 @@
paddingStyle.l = -padding.l; paddingStyle.l = -padding.l;
} }
style(paddingElm, { style(_padding, {
top: paddingStyle.t, top: paddingStyle.t,
left: paddingStyle.l, left: paddingStyle.l,
'margin-right': paddingStyle.r, 'margin-right': paddingStyle.r,
@@ -1075,9 +1086,9 @@
}); });
} }
var viewportOffsetSize = offsetSize(paddingElm); var viewportOffsetSize = offsetSize(_padding);
var contentClientSize = offsetSize(content); var contentClientSize = offsetSize(_content);
var contentScrollSize = scrollSize(content); var contentScrollSize = scrollSize(_content);
var overflowAmuntCache = updateOverflowAmountCache(force, { var overflowAmuntCache = updateOverflowAmountCache(force, {
_contentScrollSize: contentScrollSize, _contentScrollSize: contentScrollSize,
_viewportSize: { _viewportSize: {
@@ -1102,7 +1113,7 @@
_value = heightIntrinsicCache._value; _value = heightIntrinsicCache._value;
if (_changed) { if (_changed) {
style(content, { style(_content, {
height: _value ? 'auto' : '100%', height: _value ? 'auto' : '100%',
}); });
} }
@@ -1122,13 +1133,21 @@
var animationStartEventName = 'animationstart'; var animationStartEventName = 'animationstart';
var scrollEventName = 'scroll'; var scrollEventName = 'scroll';
var scrollAmount = 3333333; var scrollAmount = 3333333;
var directionIsRTLMap = {
direction: ['rtl'],
};
var getDirection = function getDirection(elm) { var directionIsRTL = function directionIsRTL(elm) {
return style(elm, 'direction'); var isRTL = false;
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) {
return rect && (rect.height > 0 || rect.width > 0); return rect && (rect.height || rect.width);
}; };
var createSizeObserver = function createSizeObserver(target, onSizeChangedCallback, options) { var createSizeObserver = function createSizeObserver(target, onSizeChangedCallback, options) {
@@ -1151,9 +1170,8 @@
}); });
var onSizeChangedCallbackProxy = function onSizeChangedCallbackProxy(sizeChangedContext) { var onSizeChangedCallbackProxy = function onSizeChangedCallbackProxy(sizeChangedContext) {
var directionCacheValue = sizeChangedContext && sizeChangedContext._value; var hasDirectionCache = sizeChangedContext && isBoolean(sizeChangedContext._value);
var skip = false; var skip = false;
var doDirectionScroll = true;
if (isArray(sizeChangedContext) && sizeChangedContext.length > 0) { if (isArray(sizeChangedContext) && sizeChangedContext.length > 0) {
var _updateResizeObserver = updateResizeObserverContentRectCache(0, sizeChangedContext.pop().contentRect), var _updateResizeObserver = updateResizeObserverContentRectCache(0, sizeChangedContext.pop().contentRect),
@@ -1162,19 +1180,18 @@
_changed = _updateResizeObserver._changed; _changed = _updateResizeObserver._changed;
skip = !_previous || !domRectHasDimensions(_value); skip = !_previous || !domRectHasDimensions(_value);
doDirectionScroll = !skip && _changed; } else if (hasDirectionCache) {
} else if (directionCacheValue) { sizeChangedContext._changed;
doDirectionScroll = sizeChangedContext._changed;
} }
if (observeDirectionChange && doDirectionScroll) { if (observeDirectionChange) {
var rtl = (directionCacheValue || getDirection(sizeObserver)) === 'rtl'; var rtl = hasDirectionCache ? sizeChangedContext._value : directionIsRTL(sizeObserver);
scrollLeft(sizeObserver, rtl ? (rtlScrollBehavior.n ? -scrollAmount : rtlScrollBehavior.i ? 0 : scrollAmount) : scrollAmount); scrollLeft(sizeObserver, rtl ? (rtlScrollBehavior.n ? -scrollAmount : rtlScrollBehavior.i ? 0 : scrollAmount) : scrollAmount);
scrollTop(sizeObserver, scrollAmount); scrollTop(sizeObserver, scrollAmount);
} }
if (!skip) { if (!skip) {
onSizeChangedCallback(directionCacheValue ? sizeChangedContext : undefined); onSizeChangedCallback(hasDirectionCache ? sizeChangedContext : undefined);
} }
}; };
@@ -1263,18 +1280,18 @@
} }
if (observeDirectionChange) { if (observeDirectionChange) {
var updateDirectionCache = createCache(function () { var updateDirectionIsRTLCache = createCache(function () {
return getDirection(sizeObserver); return directionIsRTL(sizeObserver);
}); });
push( push(
offListeners, offListeners,
on(sizeObserver, scrollEventName, function (event) { on(sizeObserver, scrollEventName, function (event) {
var directionCache = updateDirectionCache(); var directionIsRTLCache = updateDirectionIsRTLCache();
var _value = directionCache._value, var _value = directionIsRTLCache._value,
_changed = directionCache._changed; _changed = directionIsRTLCache._changed;
if (_changed) { if (_changed) {
if (_value === 'rtl') { if (_value) {
style(listenerElement, { style(listenerElement, {
left: 'auto', left: 'auto',
right: 0, right: 0,
@@ -1286,7 +1303,7 @@
}); });
} }
onSizeChangedCallbackProxy(directionCache); onSizeChangedCallbackProxy(directionIsRTLCache);
} }
preventDefault(event); preventDefault(event);
@@ -1559,49 +1576,138 @@
}; };
}; };
var normalizeTarget = function normalizeTarget(target) { var unwrap = function unwrap(elm) {
if (isHTMLElement(target)) { appendChildren(parent(elm), contents(elm));
var isTextarea = is(target, 'textarea'); removeElements(elm);
};
var _host = isTextarea ? createDiv() : target; var createStructureSetup = function createStructureSetup(target) {
var targetIsElm = isHTMLElement(target);
var osTargetObj = targetIsElm
? {}
: {
_host: target.host,
_target: target.target,
_padding: target.padding,
_viewport: target.viewport,
_content: target.content,
};
var _padding = createDiv(classNamePadding); if (targetIsElm) {
var padding = createDiv(classNamePadding);
var _viewport = createDiv(classNameViewport); var viewport = createDiv(classNameViewport);
var content = createDiv(classNameContent);
var _content = createDiv(classNameContent); appendChildren(padding, viewport);
appendChildren(viewport, content);
appendChildren(_padding, _viewport); osTargetObj._target = target;
appendChildren(_viewport, _content); osTargetObj._padding = padding;
appendChildren(_content, contents(target)); osTargetObj._viewport = viewport;
appendChildren(target, _padding); osTargetObj._content = content;
addClass(_host, classNameHost);
return {
target: target,
host: _host,
padding: _padding,
viewport: _viewport,
content: _content,
};
} }
var host = target.host, var _target = osTargetObj._target,
padding = target.padding, _padding = osTargetObj._padding,
viewport = target.viewport, _viewport = osTargetObj._viewport,
content = target.content; _content = osTargetObj._content;
addClass(host, classNameHost); var destroyFns = [];
addClass(padding, classNamePadding); var isTextarea = is(_target, 'textarea');
addClass(viewport, classNameViewport); var isBody = !isTextarea && is(_target, 'body');
addClass(content, classNameContent);
return target; var _host = isTextarea ? osTargetObj._host || createDiv() : _target;
var getTargetContents = function getTargetContents(contentSlot) {
return isTextarea ? _target : contents(contentSlot);
};
var ownerDocument = _target.ownerDocument;
var bodyElm = ownerDocument.body;
var wnd = ownerDocument.defaultView;
var isTextareaHostGenerated = isTextarea && _host !== osTargetObj._host;
if (isTextareaHostGenerated) {
insertAfter(_target, _host);
push(destroyFns, function () {
insertAfter(_host, _target);
removeElements(_host);
});
}
if (targetIsElm) {
appendChildren(_content, getTargetContents(_target));
appendChildren(_host, _padding);
push(destroyFns, function () {
appendChildren(_host, contents(_content));
removeElements(_padding);
removeClass(_host, classNameHost);
});
} else {
var contentContainingElm = _content || _viewport || _padding || _host;
var createPadding = isUndefined(_padding);
var createViewport = isUndefined(_viewport);
var createContent = isUndefined(_content);
var targetContents = getTargetContents(contentContainingElm);
_padding = osTargetObj._padding = createPadding ? createDiv() : _padding;
_viewport = osTargetObj._viewport = createViewport ? createDiv() : _viewport;
_content = osTargetObj._content = createContent ? createDiv() : _content;
appendChildren(_host, _padding);
appendChildren(_padding || _host, _viewport);
appendChildren(_viewport, _content);
var contentSlot = _content || _viewport;
appendChildren(contentSlot, targetContents);
push(destroyFns, function () {
if (createContent) {
unwrap(_content);
}
if (createViewport) {
unwrap(_viewport);
}
if (createPadding) {
unwrap(_padding);
}
removeClass(_host, classNameHost);
removeClass(_padding, classNamePadding);
removeClass(_viewport, classNameViewport);
removeClass(_content, classNameContent);
});
}
addClass(_host, classNameHost);
addClass(_padding, classNamePadding);
addClass(_viewport, classNameViewport);
addClass(_content, classNameContent);
var ctx = {
_windowElm: wnd,
_documentElm: ownerDocument,
_htmlElm: parent(bodyElm),
_bodyElm: bodyElm,
_isTextarea: isTextarea,
_isBody: isBody,
};
var obj = _extends_1({}, osTargetObj, {
_host: _host,
});
return {
_targetObj: obj,
_targetCtx: ctx,
_destroy: function _destroy() {
runEach(destroyFns);
},
};
}; };
var OverlayScrollbars = function OverlayScrollbars(target, options, extensions) { var OverlayScrollbars = function OverlayScrollbars(target, options, extensions) {
var osTarget = normalizeTarget(target); var structureSetup = createStructureSetup(target);
var lifecycles = []; var lifecycles = [];
var host = osTarget.host, var _structureSetup$_targ = structureSetup._targetObj,
content = osTarget.content; _host = _structureSetup$_targ._host,
push(lifecycles, createStructureLifecycle(osTarget)); _viewport = _structureSetup$_targ._viewport,
_content = _structureSetup$_targ._content;
push(lifecycles, createStructureLifecycle(structureSetup._targetObj));
var onSizeChanged = function onSizeChanged(directionCache) { var onSizeChanged = function onSizeChanged(directionCache) {
if (directionCache) { if (directionCache) {
@@ -1621,16 +1727,16 @@
}); });
}; };
createSizeObserver(host, onSizeChanged, { createSizeObserver(_host, onSizeChanged, {
_appear: true, _appear: true,
_direction: true, _direction: true,
}); });
createTrinsicObserver(host, onTrinsicChanged); createTrinsicObserver(_host, onTrinsicChanged);
createDOMObserver(host, function () { createDOMObserver(_host, function () {
return null; return null;
}); });
createDOMObserver( createDOMObserver(
content, _content || _viewport,
function () { function () {
return null; return null;
}, },
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/typings.ts
+4 -4
View File
@@ -1,5 +1,9 @@
export type PlainObject<T = any> = { [name: string]: T }; export type PlainObject<T = any> = { [name: string]: T };
export type InternalVersionOf<T> = {
[K in keyof T as `_${Uncapitalize<string & K>}`]: T[K];
};
export type OSTargetElement = HTMLElement | HTMLTextAreaElement; export type OSTargetElement = HTMLElement | HTMLTextAreaElement;
export interface OSTargetObject { export interface OSTargetObject {
@@ -10,10 +14,6 @@ export interface OSTargetObject {
content?: HTMLElement | null; content?: HTMLElement | null;
} }
export type InternalVersionOf<T> = {
[K in keyof T as `_${Uncapitalize<string & K>}`]: T[K];
};
export type OSTarget = OSTargetElement | OSTargetObject; export type OSTarget = OSTargetElement | OSTargetObject;
/* /*
packages/overlayscrollbars/types/lifecycles/lifecycleBase.d.ts
Vendored
+2 -2
View File
@@ -1,5 +1,5 @@
import { Cache, OptionsWithOptionsTemplate } from 'support'; import { Cache, OptionsWithOptionsTemplate } from 'support';
import { CSSDirection, PlainObject } from 'typings'; import { PlainObject } from 'typings';
export interface LifecycleBase<O extends PlainObject> { export interface LifecycleBase<O extends PlainObject> {
_options(newOptions?: O): O; _options(newOptions?: O): O;
_update(force?: boolean): void; _update(force?: boolean): void;
@@ -7,7 +7,7 @@ export interface LifecycleBase<O extends PlainObject> {
export interface Lifecycle<T extends PlainObject> extends LifecycleBase<T> { export interface Lifecycle<T extends PlainObject> extends LifecycleBase<T> {
_destruct(): void; _destruct(): void;
_onSizeChanged?(): void; _onSizeChanged?(): void;
_onDirectionChanged?(directionCache: Cache<CSSDirection>): void; _onDirectionChanged?(directionCache: Cache<boolean>): void;
_onTrinsicChanged?(widthIntrinsic: boolean, heightIntrinsicCache: Cache<boolean>): void; _onTrinsicChanged?(widthIntrinsic: boolean, heightIntrinsicCache: Cache<boolean>): void;
} }
export interface LifecycleOptionInfo<T> { export interface LifecycleOptionInfo<T> {
packages/overlayscrollbars/types/lifecycles/structureLifecycle.d.ts
Vendored
+2 -2
View File
@@ -1,4 +1,4 @@
import { OSTargetObject } from 'typings'; import { PreparedOSTargetObject } from 'setups/structureSetup';
import { Lifecycle } from 'lifecycles/lifecycleBase'; import { Lifecycle } from 'lifecycles/lifecycleBase';
export declare type OverflowBehavior = 'hidden' | 'scroll' | 'visible-hidden' | 'visible-scroll'; export declare type OverflowBehavior = 'hidden' | 'scroll' | 'visible-hidden' | 'visible-scroll';
export interface StructureLifecycleOptions { export interface StructureLifecycleOptions {
@@ -8,4 +8,4 @@ export interface StructureLifecycleOptions {
y?: OverflowBehavior; y?: OverflowBehavior;
}; };
} }
export declare const createStructureLifecycle: (target: OSTargetObject, initialOptions?: StructureLifecycleOptions | undefined) => Lifecycle<StructureLifecycleOptions>; export declare const createStructureLifecycle: (target: PreparedOSTargetObject, initialOptions?: StructureLifecycleOptions | undefined) => Lifecycle<StructureLifecycleOptions>;
packages/overlayscrollbars/types/observers/sizeObserver.d.ts
Vendored
+1 -2
View File
@@ -1,7 +1,6 @@
import { Cache } from 'support'; import { Cache } from 'support';
import { CSSDirection } from 'typings';
export declare type SizeObserverOptions = { export declare type SizeObserverOptions = {
_direction?: boolean; _direction?: boolean;
_appear?: boolean; _appear?: boolean;
}; };
export declare const createSizeObserver: (target: HTMLElement, onSizeChangedCallback: (directionCache?: Cache<CSSDirection> | undefined) => any, options?: SizeObserverOptions | undefined) => (() => void); export declare const createSizeObserver: (target: HTMLElement, onSizeChangedCallback: (directionIsRTLCache?: Cache<boolean> | undefined) => any, options?: SizeObserverOptions | undefined) => (() => void);
packages/overlayscrollbars/types/overlayscrollbars/OverlayScrollbars.d.ts
Vendored
+2 -2
View File
@@ -1,3 +1,3 @@
import { OSTarget } from 'typings'; import { OSTarget, OSTargetObject } from 'typings';
declare const OverlayScrollbars: (target: OSTarget, options?: any, extensions?: any) => void; declare const OverlayScrollbars: (target: OSTarget | OSTargetObject, options?: any, extensions?: any) => void;
export { OverlayScrollbars }; export { OverlayScrollbars };
packages/overlayscrollbars/types/setups/structureSetup.d.ts
Vendored
+18
View File
@@ -0,0 +1,18 @@
import { OSTarget, OSTargetObject, InternalVersionOf } from 'typings';
export interface OSTargetContext {
_isTextarea: boolean;
_isBody: boolean;
_htmlElm: HTMLHtmlElement;
_bodyElm: HTMLBodyElement;
_windowElm: Window;
_documentElm: HTMLDocument;
}
export interface PreparedOSTargetObject extends Required<InternalVersionOf<OSTargetObject>> {
_host: HTMLElement;
}
export interface StructureSetup {
_targetObj: PreparedOSTargetObject;
_targetCtx: OSTargetContext;
_destroy: () => void;
}
export declare const createStructureSetup: (target: OSTarget | OSTargetObject) => StructureSetup;
packages/overlayscrollbars/types/support/dom/class.d.ts
Vendored
+3 -3
View File
@@ -1,4 +1,4 @@
export declare const hasClass: (elm: Element | null, className: string) => boolean; export declare const hasClass: (elm: Element | null | undefined, className: string) => boolean;
export declare const addClass: (elm: Element | null, className: string) => void; export declare const addClass: (elm: Element | null | undefined, className: string) => void;
export declare const removeClass: (elm: Element | null, className: string) => void; export declare const removeClass: (elm: Element | null | undefined, className: string) => void;
export declare const diffClass: (classNameA: string | null | undefined, classNameB: string | null | undefined) => string[]; export declare const diffClass: (classNameA: string | null | undefined, classNameB: string | null | undefined) => string[];
packages/overlayscrollbars/types/support/dom/dimensions.d.ts
Vendored
+4 -4
View File
@@ -3,8 +3,8 @@ export interface WH<T = number> {
h: T; h: T;
} }
export declare const windowSize: () => WH; export declare const windowSize: () => WH;
export declare const offsetSize: (elm: HTMLElement | null) => WH; export declare const offsetSize: (elm: HTMLElement | null | undefined) => WH;
export declare const clientSize: (elm: HTMLElement | null) => WH; export declare const clientSize: (elm: HTMLElement | null | undefined) => WH;
export declare const scrollSize: (elm: HTMLElement | null) => WH; export declare const scrollSize: (elm: HTMLElement | null | undefined) => WH;
export declare const getBoundingClientRect: (elm: HTMLElement) => DOMRect; export declare const getBoundingClientRect: (elm: HTMLElement) => DOMRect;
export declare const hasDimensions: (elm: HTMLElement | null) => boolean; export declare const hasDimensions: (elm: HTMLElement | null | undefined) => boolean;
packages/overlayscrollbars/types/support/dom/manipulation.d.ts
Vendored
+5 -5
View File
@@ -1,7 +1,7 @@
declare type NodeCollection = ArrayLike<Node> | Node | undefined | null; declare type NodeCollection = ArrayLike<Node> | Node | null | undefined;
export declare const appendChildren: (node: Node | null, children: NodeCollection) => void; export declare const appendChildren: (node: Node | null | undefined, children: NodeCollection) => void;
export declare const prependChildren: (node: Node | null, children: NodeCollection) => void; export declare const prependChildren: (node: Node | null | undefined, children: NodeCollection) => void;
export declare const insertBefore: (node: Node | null, insertedNodes: NodeCollection) => void; export declare const insertBefore: (node: Node | null | undefined, insertedNodes: NodeCollection) => void;
export declare const insertAfter: (node: Node | null, insertedNodes: NodeCollection) => void; export declare const insertAfter: (node: Node | null | undefined, insertedNodes: NodeCollection) => void;
export declare const removeElements: (nodes: NodeCollection) => void; export declare const removeElements: (nodes: NodeCollection) => void;
export {}; export {};
packages/overlayscrollbars/types/support/dom/offset.d.ts
Vendored
+2 -2
View File
@@ -2,5 +2,5 @@ export interface XY<T = number> {
x: T; x: T;
y: T; y: T;
} }
export declare const absoluteCoordinates: (elm: HTMLElement | null) => XY; export declare const absoluteCoordinates: (elm: HTMLElement | null | undefined) => XY;
export declare const offsetCoordinates: (elm: HTMLElement | null) => XY; export declare const offsetCoordinates: (elm: HTMLElement | null | undefined) => XY;
packages/overlayscrollbars/types/support/dom/style.d.ts
Vendored
+5 -5
View File
@@ -7,12 +7,12 @@ export interface TRBL {
declare type CssStyles = { declare type CssStyles = {
[key: string]: string | number; [key: string]: string | number;
}; };
export declare function style(elm: HTMLElement | null, styles: CssStyles): void; export declare function style(elm: HTMLElement | null | undefined, styles: CssStyles): void;
export declare function style(elm: HTMLElement | null, styles: string): string; export declare function style(elm: HTMLElement | null | undefined, styles: string): string;
export declare function style(elm: HTMLElement | null, styles: Array<string> | string): { export declare function style(elm: HTMLElement | null | undefined, styles: Array<string> | string): {
[key: string]: string; [key: string]: string;
}; };
export declare const hide: (elm: HTMLElement | null) => void; export declare const hide: (elm: HTMLElement | null) => void;
export declare const show: (elm: HTMLElement | null) => void; export declare const show: (elm: HTMLElement | null | undefined) => void;
export declare const topRightBottomLeft: (elm: HTMLElement | null, property?: string | undefined) => TRBL; export declare const topRightBottomLeft: (elm: HTMLElement | null | undefined, property?: string | undefined) => TRBL;
export {}; export {};
packages/overlayscrollbars/types/typings.d.ts
Vendored
+7 -5
View File
@@ -1,13 +1,15 @@
export declare type PlainObject<T = any> = { export declare type PlainObject<T = any> = {
[name: string]: T; [name: string]: T;
}; };
export declare type InternalVersionOf<T> = {
[K in keyof T as `_${Uncapitalize<string & K>}`]: T[K];
};
export declare type OSTargetElement = HTMLElement | HTMLTextAreaElement; export declare type OSTargetElement = HTMLElement | HTMLTextAreaElement;
export interface OSTargetObject { export interface OSTargetObject {
target: OSTargetElement; target: OSTargetElement;
host: HTMLElement; host?: HTMLElement;
padding: HTMLElement; padding?: HTMLElement | null;
viewport: HTMLElement; viewport?: HTMLElement;
content: HTMLElement; content?: HTMLElement | null;
} }
export declare type OSTarget = OSTargetElement | OSTargetObject; export declare type OSTarget = OSTargetElement | OSTargetObject;
export declare type CSSDirection = 'ltr' | 'rtl';
yarn.lock
+11 -1
View File
@@ -8662,6 +8662,11 @@ 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:
version "2.1.0"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a"
integrity sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==
tsutils@^3.17.1: tsutils@^3.17.1:
version "3.17.1" version "3.17.1"
resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759" resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"
@@ -8730,11 +8735,16 @@ typedarray-to-buffer@^3.1.5:
dependencies: dependencies:
is-typedarray "^1.0.0" is-typedarray "^1.0.0"
typescript@^3.9.3, typescript@^3.9.7: typescript@^3.9.3:
version "3.9.7" version "3.9.7"
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:
version "4.1.5"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.5.tgz#123a3b214aaff3be32926f0d8f1f6e704eb89a72"
integrity sha512-6OSu9PTIzmn9TCDiovULTnET6BgXtDYL4Gg4szY+cGsc3JP1dQL8qvE8kShTRx1NIw4Q9IBHlwODjkjWEtMUyA==
unicode-canonical-property-names-ecmascript@^1.0.4: unicode-canonical-property-names-ecmascript@^1.0.4:
version "1.0.4" version "1.0.4"
resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818" resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"