mirror of
https://github.com/tenrok/OverlayScrollbars.git
synced 2026-06-01 09:04:06 +03:00
build
This commit is contained in:
Rene
+178
-94
@@ -213,6 +213,11 @@ const find = (selector, elm) => {
|
||||
return rootElm ? push(arr, rootElm.querySelectorAll(selector)) : arr;
|
||||
};
|
||||
|
||||
const findFirst = (selector, elm) => {
|
||||
const rootElm = elm ? (isElement(elm) ? elm : null) : document;
|
||||
return rootElm ? rootElm.querySelector(selector) : null;
|
||||
};
|
||||
|
||||
const is = (elm, selector) => {
|
||||
if (isElement(elm)) {
|
||||
const fn = elmPrototype.matches || elmPrototype.msMatchesSelector;
|
||||
@@ -226,6 +231,36 @@ const contents = (elm) => (elm ? from(elm.childNodes) : []);
|
||||
|
||||
const parent = (elm) => (elm ? elm.parentElement : null);
|
||||
|
||||
const closest = (elm, selector) => {
|
||||
if (isElement(elm)) {
|
||||
const closestFn = elmPrototype.closest;
|
||||
|
||||
if (closestFn) {
|
||||
return closestFn.call(elm, selector);
|
||||
}
|
||||
|
||||
do {
|
||||
if (is(elm, selector)) {
|
||||
return elm;
|
||||
}
|
||||
|
||||
elm = parent(elm);
|
||||
} while (elm);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
const liesBetween = (elm, highBoundarySelector, deepBoundarySelector) => {
|
||||
const closestHighBoundaryElm = elm && closest(elm, highBoundarySelector);
|
||||
const closestDeepBoundaryElm = elm && findFirst(deepBoundarySelector, closestHighBoundaryElm);
|
||||
return closestHighBoundaryElm && closestDeepBoundaryElm
|
||||
? closestHighBoundaryElm === elm ||
|
||||
closestDeepBoundaryElm === elm ||
|
||||
closest(closest(elm, deepBoundarySelector), highBoundarySelector) !== closestHighBoundaryElm
|
||||
: false;
|
||||
};
|
||||
|
||||
const before = (parentElm, preferredAnchor, insertedElms) => {
|
||||
if (insertedElms) {
|
||||
let anchor = preferredAnchor;
|
||||
@@ -345,6 +380,22 @@ const addClass = (elm, className) => {
|
||||
const removeClass = (elm, className) => {
|
||||
classListAction(elm, className, (classList, clazz) => classList.remove(clazz));
|
||||
};
|
||||
const diffClass = (classNameA, classNameB) => {
|
||||
const classNameASplit = classNameA && classNameA.split(' ');
|
||||
const classNameBSplit = classNameB && classNameB.split(' ');
|
||||
const tempObj = {};
|
||||
each(classNameASplit, (className) => {
|
||||
tempObj[className] = 1;
|
||||
});
|
||||
each(classNameBSplit, (className) => {
|
||||
if (tempObj[className]) {
|
||||
delete tempObj[className];
|
||||
} else {
|
||||
tempObj[className] = 1;
|
||||
}
|
||||
});
|
||||
return keys(tempObj);
|
||||
};
|
||||
|
||||
const zeroObj = {
|
||||
w: 0,
|
||||
@@ -451,7 +502,6 @@ const equal = (a, b, props, propMutation) => {
|
||||
return false;
|
||||
};
|
||||
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 equalBCRWH = (a, b, round) => equal(a, b, ['width', 'height'], round && ((value) => Math.round(value)));
|
||||
|
||||
@@ -714,7 +764,7 @@ const stringArrayNullAllowedValues = [optionsTemplateTypes.string, optionsTempla
|
||||
const booleanTrueTemplate = [true, optionsTemplateTypes.boolean];
|
||||
const booleanFalseTemplate = [false, optionsTemplateTypes.boolean];
|
||||
const resizeAllowedValues = 'none both horizontal vertical';
|
||||
const overflowAllowedValues = 'visible-hidden visible-scroll scroll hidden';
|
||||
const overflowAllowedValues = 'hidden scroll visible visible-hidden';
|
||||
const scrollbarsVisibilityAllowedValues = 'visible hidden auto';
|
||||
const scrollbarsAutoHideAllowedValues = 'never scroll leavemove';
|
||||
const defaultOptionsWithTemplate = {
|
||||
@@ -1074,14 +1124,20 @@ const createTrinsicLifecycle = (lifecycleHub) => {
|
||||
|
||||
if (heightIntrinsicChanged) {
|
||||
style(_content, {
|
||||
height: heightIntrinsic ? 'auto' : '100%',
|
||||
height: heightIntrinsic ? '' : '100%',
|
||||
display: heightIntrinsic ? '' : 'inline',
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
_sizeChanged: heightIntrinsicChanged,
|
||||
_contentMutation: heightIntrinsicChanged,
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
const createPaddingLifecycle = (lifecycleHub) => {
|
||||
const { _setPaddingInfo, _setViewportPaddingStyle, _structureSetup } = lifecycleHub;
|
||||
const { _structureSetup, _setLifecycleCommunication } = lifecycleHub;
|
||||
const { _host, _padding, _viewport } = _structureSetup._targetObj;
|
||||
const { _update: updatePaddingCache, _current: currentPaddingCache } = createCache(() => topRightBottomLeft(_host, 'padding'), {
|
||||
_equal: equalTRBL,
|
||||
@@ -1133,12 +1189,13 @@ const createPaddingLifecycle = (lifecycleHub) => {
|
||||
style(_padding || _viewport, paddingStyle);
|
||||
style(_viewport, viewportStyle);
|
||||
|
||||
_setPaddingInfo({
|
||||
_absolute: !paddingRelative,
|
||||
_padding: _padding2,
|
||||
_setLifecycleCommunication({
|
||||
_paddingInfo: {
|
||||
_absolute: !paddingRelative,
|
||||
_padding: _padding2,
|
||||
},
|
||||
_viewportPaddingStyle: _padding ? viewportStyle : _extends_1({}, paddingStyle, viewportStyle),
|
||||
});
|
||||
|
||||
_setViewportPaddingStyle(_padding ? viewportStyle : _extends_1({}, paddingStyle, viewportStyle));
|
||||
}
|
||||
|
||||
return {
|
||||
@@ -1149,8 +1206,8 @@ const createPaddingLifecycle = (lifecycleHub) => {
|
||||
|
||||
const overlaidScrollbarsHideOffset = 42;
|
||||
const createOverflowLifecycle = (lifecycleHub) => {
|
||||
const { _structureSetup, _doViewportArrange, _getViewportPaddingStyle, _getPaddingInfo, _setViewportOverflowScroll } = lifecycleHub;
|
||||
const { _host, _padding, _viewport, _viewportArrange } = _structureSetup._targetObj;
|
||||
const { _structureSetup, _doViewportArrange, _getLifecycleCommunication, _setLifecycleCommunication } = lifecycleHub;
|
||||
const { _host, _viewport, _viewportArrange } = _structureSetup._targetObj;
|
||||
const { _update: updateContentScrollSizeCache, _current: getCurrentContentScrollSizeCache } = createCache(
|
||||
(ctx) => fixScrollSizeRounding(ctx._viewportScrollSize, ctx._viewportOffsetSize, ctx._viewportRect),
|
||||
{
|
||||
@@ -1159,14 +1216,14 @@ const createOverflowLifecycle = (lifecycleHub) => {
|
||||
);
|
||||
const { _update: updateOverflowAmountCache, _current: getCurrentOverflowAmountCache } = createCache(
|
||||
(ctx) => ({
|
||||
x: Math.max(0, ctx._contentScrollSize.w - ctx._viewportSize.w),
|
||||
y: Math.max(0, ctx._contentScrollSize.h - ctx._viewportSize.h),
|
||||
w: Math.max(0, ctx._contentScrollSize.w - ctx._viewportSize.w),
|
||||
h: Math.max(0, ctx._contentScrollSize.h - ctx._viewportSize.h),
|
||||
}),
|
||||
{
|
||||
_equal: equalXY,
|
||||
_equal: equalWH,
|
||||
_initialValue: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
w: 0,
|
||||
h: 0,
|
||||
},
|
||||
}
|
||||
);
|
||||
@@ -1182,16 +1239,16 @@ const createOverflowLifecycle = (lifecycleHub) => {
|
||||
});
|
||||
|
||||
if (heightIntrinsic) {
|
||||
const { _absolute: paddingAbsolute, _padding: padding } = _getPaddingInfo();
|
||||
const { _absolute: paddingAbsolute, _padding: padding } = _getLifecycleCommunication()._paddingInfo;
|
||||
|
||||
const { _overflowScroll, _scrollbarsHideOffset } = viewportOverflowState;
|
||||
const hostBCR = getBoundingClientRect(_host);
|
||||
const hostOffsetSize = offsetSize(_host);
|
||||
const hostClientSize = clientSize(_host);
|
||||
const paddingAbsoluteVertical = paddingAbsolute ? padding.b + padding.t : 0;
|
||||
const paddingVertical = paddingAbsolute || style(_viewport, 'boxSizing') === 'content-box' ? padding.b + padding.t : 0;
|
||||
const clientSizeWithoutRounding = hostClientSize.h + (hostBCR.height - hostOffsetSize.h);
|
||||
style(_viewport, {
|
||||
height: clientSizeWithoutRounding + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0) - paddingAbsoluteVertical,
|
||||
height: clientSizeWithoutRounding + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0) - paddingVertical,
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -1223,23 +1280,26 @@ const createOverflowLifecycle = (lifecycleHub) => {
|
||||
const setViewportOverflowState = (showNativeOverlaidScrollbars, overflowAmount, overflow, viewportStyleObj) => {
|
||||
const setPartialStylePerAxis = (horizontal, overflowAmount, behavior, styleObj) => {
|
||||
const overflowKey = horizontal ? 'overflowX' : 'overflowY';
|
||||
const behaviorIsVisible = behavior.indexOf('visible') === 0;
|
||||
const behaviorIsVisibleHidden = behavior === 'visible-hidden';
|
||||
const behaviorIsScroll = behavior === 'scroll';
|
||||
const behaviorIsVisibleScroll = behavior === 'visible-scroll';
|
||||
const hideOverflow = behaviorIsScroll || behavior === 'hidden';
|
||||
const applyStyle = overflowAmount > 0 && hideOverflow;
|
||||
|
||||
if (applyStyle) {
|
||||
if (behaviorIsVisible) {
|
||||
styleObj[overflowKey] = 'visible';
|
||||
}
|
||||
|
||||
if (behaviorIsScroll && overflowAmount > 0) {
|
||||
styleObj[overflowKey] = behavior;
|
||||
}
|
||||
|
||||
return {
|
||||
_visible: !applyStyle,
|
||||
_behavior: behaviorIsVisibleScroll ? 'scroll' : 'hidden',
|
||||
_visible: behaviorIsVisible,
|
||||
_behavior: behaviorIsVisibleHidden ? 'hidden' : 'scroll',
|
||||
};
|
||||
};
|
||||
|
||||
const { _visible: xVisible, _behavior: xVisibleBehavior } = setPartialStylePerAxis(true, overflowAmount.x, overflow.x, viewportStyleObj);
|
||||
const { _visible: yVisible, _behavior: yVisibleBehavior } = setPartialStylePerAxis(false, overflowAmount.y, overflow.y, viewportStyleObj);
|
||||
const { _visible: xVisible, _behavior: xVisibleBehavior } = setPartialStylePerAxis(true, overflowAmount.w, overflow.x, viewportStyleObj);
|
||||
const { _visible: yVisible, _behavior: yVisibleBehavior } = setPartialStylePerAxis(false, overflowAmount.h, overflow.y, viewportStyleObj);
|
||||
|
||||
if (xVisible && !yVisible) {
|
||||
viewportStyleObj.overflowX = xVisibleBehavior;
|
||||
@@ -1258,7 +1318,7 @@ const createOverflowLifecycle = (lifecycleHub) => {
|
||||
const { x: arrangeX, y: arrangeY } = _scrollbarsHideOffsetArrange;
|
||||
const { x: hideOffsetX, y: hideOffsetY } = _scrollbarsHideOffset;
|
||||
|
||||
const viewportPaddingStyle = _getViewportPaddingStyle();
|
||||
const { _viewportPaddingStyle: viewportPaddingStyle } = _getLifecycleCommunication();
|
||||
|
||||
const viewportArrangeHorizontalPaddingKey = directionIsRTL ? 'paddingRight' : 'paddingLeft';
|
||||
const viewportArrangeHorizontalPaddingValue = viewportPaddingStyle[viewportArrangeHorizontalPaddingKey];
|
||||
@@ -1296,20 +1356,18 @@ const createOverflowLifecycle = (lifecycleHub) => {
|
||||
};
|
||||
|
||||
const hideNativeScrollbars = (viewportOverflowState, directionIsRTL, viewportArrange, viewportStyleObj) => {
|
||||
const { _nativeScrollbarStyling } = getEnvironment();
|
||||
const { _overflowScroll, _scrollbarsHideOffset, _scrollbarsHideOffsetArrange } = viewportOverflowState;
|
||||
const { _scrollbarsHideOffset, _scrollbarsHideOffsetArrange } = viewportOverflowState;
|
||||
const { x: arrangeX, y: arrangeY } = _scrollbarsHideOffsetArrange;
|
||||
const { x: hideOffsetX, y: hideOffsetY } = _scrollbarsHideOffset;
|
||||
const { x: scrollX, y: scrollY } = _overflowScroll;
|
||||
|
||||
const paddingStyle = _getViewportPaddingStyle();
|
||||
const { _viewportPaddingStyle: viewportPaddingStyle } = _getLifecycleCommunication();
|
||||
|
||||
const horizontalMarginKey = directionIsRTL ? 'marginLeft' : 'marginRight';
|
||||
const viewportHorizontalPaddingKey = directionIsRTL ? 'paddingLeft' : 'paddingRight';
|
||||
const horizontalMarginValue = paddingStyle[horizontalMarginKey];
|
||||
const verticalMarginValue = paddingStyle.marginBottom;
|
||||
const horizontalPaddingValue = paddingStyle[viewportHorizontalPaddingKey];
|
||||
const verticalPaddingValue = paddingStyle.paddingBottom;
|
||||
const horizontalMarginValue = viewportPaddingStyle[horizontalMarginKey];
|
||||
const verticalMarginValue = viewportPaddingStyle.marginBottom;
|
||||
const horizontalPaddingValue = viewportPaddingStyle[viewportHorizontalPaddingKey];
|
||||
const verticalPaddingValue = viewportPaddingStyle.paddingBottom;
|
||||
viewportStyleObj.maxWidth = `calc(100% + ${hideOffsetY + horizontalMarginValue * -1}px)`;
|
||||
viewportStyleObj[horizontalMarginKey] = -hideOffsetY + horizontalMarginValue;
|
||||
viewportStyleObj.marginBottom = -hideOffsetX + verticalMarginValue;
|
||||
@@ -1318,19 +1376,13 @@ const createOverflowLifecycle = (lifecycleHub) => {
|
||||
viewportStyleObj[viewportHorizontalPaddingKey] = horizontalPaddingValue + (arrangeY ? hideOffsetY : 0);
|
||||
viewportStyleObj.paddingBottom = verticalPaddingValue + (arrangeX ? hideOffsetX : 0);
|
||||
}
|
||||
|
||||
if (!_nativeScrollbarStyling) {
|
||||
style(_padding || _host, {
|
||||
overflow: scrollX || scrollY ? 'hidden' : '',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const undoViewportArrange = (showNativeOverlaidScrollbars, viewportOverflowState) => {
|
||||
const undoViewportArrange = (showNativeOverlaidScrollbars, directionIsRTL, viewportOverflowState) => {
|
||||
if (_doViewportArrange) {
|
||||
const finalViewportOverflowState = viewportOverflowState || getViewportOverflowState(showNativeOverlaidScrollbars);
|
||||
|
||||
const paddingStyle = _getViewportPaddingStyle();
|
||||
const { _viewportPaddingStyle: viewportPaddingStyle } = _getLifecycleCommunication();
|
||||
|
||||
const { _flexboxGlue } = getEnvironment();
|
||||
const { _scrollbarsHideOffsetArrange } = finalViewportOverflowState;
|
||||
@@ -1339,7 +1391,7 @@ const createOverflowLifecycle = (lifecycleHub) => {
|
||||
|
||||
const assignProps = (props) =>
|
||||
each(props.split(' '), (prop) => {
|
||||
finalPaddingStyle[prop] = paddingStyle[prop];
|
||||
finalPaddingStyle[prop] = viewportPaddingStyle[prop];
|
||||
});
|
||||
|
||||
if (!_flexboxGlue) {
|
||||
@@ -1359,6 +1411,7 @@ const createOverflowLifecycle = (lifecycleHub) => {
|
||||
style(_viewport, finalPaddingStyle);
|
||||
return {
|
||||
_redoViewportArrange: () => {
|
||||
hideNativeScrollbars(finalViewportOverflowState, directionIsRTL, _doViewportArrange, prevStyle);
|
||||
style(_viewport, prevStyle);
|
||||
addClass(_viewport, classNameViewportArrange);
|
||||
},
|
||||
@@ -1402,6 +1455,7 @@ const createOverflowLifecycle = (lifecycleHub) => {
|
||||
if (_sizeChanged || _paddingStyleChanged || _contentMutation || showNativeOverlaidScrollbarsChanged || directionChanged) {
|
||||
const { _redoViewportArrange, _viewportOverflowState: undoViewportArrangeOverflowState } = undoViewportArrange(
|
||||
showNativeOverlaidScrollbars,
|
||||
directionIsRTL,
|
||||
preMeasureViewportOverflowState
|
||||
);
|
||||
const contentSize = clientSize(_viewport);
|
||||
@@ -1471,7 +1525,10 @@ const createOverflowLifecycle = (lifecycleHub) => {
|
||||
|
||||
style(_viewport, viewportStyle);
|
||||
|
||||
_setViewportOverflowScroll(viewportOverflowState._overflowScroll);
|
||||
_setLifecycleCommunication({
|
||||
_viewportOverflowScroll: viewportOverflowState._overflowScroll,
|
||||
_viewportOverflowAmount: overflowAmount,
|
||||
});
|
||||
}
|
||||
};
|
||||
};
|
||||
@@ -1593,16 +1650,12 @@ const createSizeObserver = (target, onSizeChangedCallback, options) => {
|
||||
const { _value, _changed } = directionIsRTLCacheValues;
|
||||
|
||||
if (_changed) {
|
||||
removeClass(listenerElement, 'ltr rtl');
|
||||
|
||||
if (_value) {
|
||||
style(listenerElement, {
|
||||
left: 'auto',
|
||||
right: 0,
|
||||
});
|
||||
addClass(listenerElement, 'rtl');
|
||||
} else {
|
||||
style(listenerElement, {
|
||||
left: 0,
|
||||
right: 'auto',
|
||||
});
|
||||
addClass(listenerElement, 'ltr');
|
||||
}
|
||||
|
||||
onSizeChangedCallbackProxy(directionIsRTLCacheValues);
|
||||
@@ -1884,7 +1937,8 @@ const createDOMObserver = (target, isContentObserver, callback, options) => {
|
||||
};
|
||||
};
|
||||
|
||||
const getPropByPath = (obj, path) => obj && path.split('.').reduce((o, prop) => (o && hasOwnProperty$1(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) : undefined;
|
||||
|
||||
const emptyStylePropsToZero = (stlyeObj, baseStyle) =>
|
||||
keys(stlyeObj).reduce((obj, key) => {
|
||||
@@ -1893,30 +1947,21 @@ const emptyStylePropsToZero = (stlyeObj, baseStyle) =>
|
||||
return obj;
|
||||
}, _extends_1({}, baseStyle));
|
||||
|
||||
const ignorePrefix = 'os-';
|
||||
const hostSelector = `.${classNameHost}`;
|
||||
const viewportSelector = `.${classNameViewport}`;
|
||||
const contentSelector = `.${classNameContent}`;
|
||||
const attrs = ['id', 'class', 'style', 'open'];
|
||||
const paddingInfoFallback = {
|
||||
_absolute: false,
|
||||
_padding: {
|
||||
t: 0,
|
||||
r: 0,
|
||||
b: 0,
|
||||
l: 0,
|
||||
},
|
||||
};
|
||||
const viewportPaddingStyleFallback = {
|
||||
marginTop: 0,
|
||||
marginRight: 0,
|
||||
marginBottom: 0,
|
||||
marginLeft: 0,
|
||||
paddingTop: 0,
|
||||
paddingRight: 0,
|
||||
paddingBottom: 0,
|
||||
paddingLeft: 0,
|
||||
};
|
||||
const viewportOverflowScrollFallback = {
|
||||
x: false,
|
||||
y: false,
|
||||
|
||||
const ignoreTargetChange = (target, attrName, oldValue, newValue) => {
|
||||
if (attrName === 'class' && oldValue && newValue) {
|
||||
const diff = diffClass(oldValue, newValue);
|
||||
return !!diff.find((addedOrRemovedClass) => addedOrRemovedClass.indexOf(ignorePrefix) !== 0);
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
const directionIsRTLCacheValuesFallback = {
|
||||
_value: false,
|
||||
_previous: false,
|
||||
@@ -1927,10 +1972,37 @@ const heightIntrinsicCacheValuesFallback = {
|
||||
_previous: false,
|
||||
_changed: false,
|
||||
};
|
||||
const lifecycleCommunicationFallback = {
|
||||
_paddingInfo: {
|
||||
_absolute: false,
|
||||
_padding: {
|
||||
t: 0,
|
||||
r: 0,
|
||||
b: 0,
|
||||
l: 0,
|
||||
},
|
||||
},
|
||||
_viewportOverflowScroll: {
|
||||
x: false,
|
||||
y: false,
|
||||
},
|
||||
_viewportOverflowAmount: {
|
||||
w: 0,
|
||||
h: 0,
|
||||
},
|
||||
_viewportPaddingStyle: {
|
||||
marginTop: 0,
|
||||
marginRight: 0,
|
||||
marginBottom: 0,
|
||||
marginLeft: 0,
|
||||
paddingTop: 0,
|
||||
paddingRight: 0,
|
||||
paddingBottom: 0,
|
||||
paddingLeft: 0,
|
||||
},
|
||||
};
|
||||
const createLifecycleHub = (options, structureSetup) => {
|
||||
let paddingInfo = paddingInfoFallback;
|
||||
let viewportPaddingStyle = viewportPaddingStyleFallback;
|
||||
let viewportOverflowScroll = viewportOverflowScrollFallback;
|
||||
let lifecycleCommunication = lifecycleCommunicationFallback;
|
||||
const { _host, _viewport, _content } = structureSetup._targetObj;
|
||||
const {
|
||||
_nativeScrollbarStyling,
|
||||
@@ -1945,22 +2017,17 @@ const createLifecycleHub = (options, structureSetup) => {
|
||||
_options: options,
|
||||
_structureSetup: structureSetup,
|
||||
_doViewportArrange: doViewportArrange,
|
||||
_getPaddingInfo: () => paddingInfo,
|
||||
_getLifecycleCommunication: () => lifecycleCommunication,
|
||||
|
||||
_setPaddingInfo(newPaddingInfo) {
|
||||
paddingInfo = newPaddingInfo || paddingInfoFallback;
|
||||
},
|
||||
_setLifecycleCommunication(newLifecycleCommunication) {
|
||||
if (newLifecycleCommunication && newLifecycleCommunication._viewportPaddingStyle) {
|
||||
newLifecycleCommunication._viewportPaddingStyle = emptyStylePropsToZero(
|
||||
newLifecycleCommunication._viewportPaddingStyle,
|
||||
lifecycleCommunicationFallback._viewportPaddingStyle
|
||||
);
|
||||
}
|
||||
|
||||
_getViewportPaddingStyle: () => viewportPaddingStyle,
|
||||
|
||||
_setViewportPaddingStyle(newPaddingStlye) {
|
||||
viewportPaddingStyle = newPaddingStlye ? emptyStylePropsToZero(newPaddingStlye, viewportPaddingStyleFallback) : viewportPaddingStyleFallback;
|
||||
},
|
||||
|
||||
_getViewportOverflowScroll: () => viewportOverflowScroll,
|
||||
|
||||
_setViewportOverflowScroll(newViewportOverflowScroll) {
|
||||
viewportOverflowScroll = newViewportOverflowScroll || viewportOverflowScrollFallback;
|
||||
lifecycleCommunication = assignDeep({}, lifecycleCommunication, newLifecycleCommunication);
|
||||
},
|
||||
};
|
||||
push(lifecycles, createTrinsicLifecycle(instance));
|
||||
@@ -2061,11 +2128,22 @@ const createLifecycleHub = (options, structureSetup) => {
|
||||
const hostMutationObserver = createDOMObserver(_host, false, onHostMutation, {
|
||||
_styleChangingAttributes: attrs,
|
||||
_attributes: attrs,
|
||||
_ignoreTargetChange: ignoreTargetChange,
|
||||
});
|
||||
const contentMutationObserver = createDOMObserver(_content || _viewport, true, onContentMutation, {
|
||||
_styleChangingAttributes: attrs,
|
||||
_attributes: attrs,
|
||||
_eventContentChange: options.updating.elementEvents,
|
||||
_nestedTargetSelector: hostSelector,
|
||||
_ignoreContentChange: (mutation, isNestedTarget) => {
|
||||
const { target, attributeName } = mutation;
|
||||
return isNestedTarget
|
||||
? false
|
||||
: attributeName
|
||||
? liesBetween(target, hostSelector, viewportSelector) || liesBetween(target, hostSelector, contentSelector)
|
||||
: false;
|
||||
},
|
||||
_ignoreNestedTargetChange: ignoreTargetChange,
|
||||
});
|
||||
|
||||
const update = (changedOptions, force) => {
|
||||
@@ -2074,8 +2152,12 @@ const createLifecycleHub = (options, structureSetup) => {
|
||||
|
||||
const envUpdateListener = update.bind(null, null, true);
|
||||
addEnvironmentListener(envUpdateListener);
|
||||
console.log(getEnvironment());
|
||||
return {
|
||||
_update: update,
|
||||
_state: () => ({
|
||||
_overflowAmount: lifecycleCommunication._viewportOverflowAmount,
|
||||
}),
|
||||
|
||||
_destroy() {
|
||||
removeEnvironmentListener(envUpdateListener);
|
||||
@@ -2103,6 +2185,8 @@ const OverlayScrollbars = (target, options, extensions) => {
|
||||
return currentOptions;
|
||||
},
|
||||
|
||||
state: () => lifecycleHub._state(),
|
||||
|
||||
update(force) {
|
||||
lifecycleHub._update(null, force);
|
||||
},
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+201
-120
@@ -244,6 +244,11 @@
|
||||
return rootElm ? push(arr, rootElm.querySelectorAll(selector)) : arr;
|
||||
};
|
||||
|
||||
var findFirst = function findFirst(selector, elm) {
|
||||
var rootElm = elm ? (isElement(elm) ? elm : null) : document;
|
||||
return rootElm ? rootElm.querySelector(selector) : null;
|
||||
};
|
||||
|
||||
var is = function is(elm, selector) {
|
||||
if (isElement(elm)) {
|
||||
var fn = elmPrototype.matches || elmPrototype.msMatchesSelector;
|
||||
@@ -261,6 +266,36 @@
|
||||
return elm ? elm.parentElement : null;
|
||||
};
|
||||
|
||||
var closest = function closest(elm, selector) {
|
||||
if (isElement(elm)) {
|
||||
var closestFn = elmPrototype.closest;
|
||||
|
||||
if (closestFn) {
|
||||
return closestFn.call(elm, selector);
|
||||
}
|
||||
|
||||
do {
|
||||
if (is(elm, selector)) {
|
||||
return elm;
|
||||
}
|
||||
|
||||
elm = parent(elm);
|
||||
} while (elm);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
var liesBetween = function liesBetween(elm, highBoundarySelector, deepBoundarySelector) {
|
||||
var closestHighBoundaryElm = elm && closest(elm, highBoundarySelector);
|
||||
var closestDeepBoundaryElm = elm && findFirst(deepBoundarySelector, closestHighBoundaryElm);
|
||||
return closestHighBoundaryElm && closestDeepBoundaryElm
|
||||
? closestHighBoundaryElm === elm ||
|
||||
closestDeepBoundaryElm === elm ||
|
||||
closest(closest(elm, deepBoundarySelector), highBoundarySelector) !== closestHighBoundaryElm
|
||||
: false;
|
||||
};
|
||||
|
||||
var before = function before(parentElm, preferredAnchor, insertedElms) {
|
||||
if (insertedElms) {
|
||||
var anchor = preferredAnchor;
|
||||
@@ -390,6 +425,22 @@
|
||||
return classList.remove(clazz);
|
||||
});
|
||||
};
|
||||
var diffClass = function diffClass(classNameA, classNameB) {
|
||||
var classNameASplit = classNameA && classNameA.split(' ');
|
||||
var classNameBSplit = classNameB && classNameB.split(' ');
|
||||
var tempObj = {};
|
||||
each(classNameASplit, function (className) {
|
||||
tempObj[className] = 1;
|
||||
});
|
||||
each(classNameBSplit, function (className) {
|
||||
if (tempObj[className]) {
|
||||
delete tempObj[className];
|
||||
} else {
|
||||
tempObj[className] = 1;
|
||||
}
|
||||
});
|
||||
return keys(tempObj);
|
||||
};
|
||||
|
||||
var zeroObj = {
|
||||
w: 0,
|
||||
@@ -513,9 +564,6 @@
|
||||
var equalWH = function equalWH(a, b) {
|
||||
return equal(a, b, ['w', 'h']);
|
||||
};
|
||||
var equalXY = function equalXY(a, b) {
|
||||
return equal(a, b, ['x', 'y']);
|
||||
};
|
||||
var equalTRBL = function equalTRBL(a, b) {
|
||||
return equal(a, b, ['t', 'r', 'b', 'l']);
|
||||
};
|
||||
@@ -806,7 +854,7 @@
|
||||
var booleanTrueTemplate = [true, optionsTemplateTypes.boolean];
|
||||
var booleanFalseTemplate = [false, optionsTemplateTypes.boolean];
|
||||
var resizeAllowedValues = 'none both horizontal vertical';
|
||||
var overflowAllowedValues = 'visible-hidden visible-scroll scroll hidden';
|
||||
var overflowAllowedValues = 'hidden scroll visible visible-hidden';
|
||||
var scrollbarsVisibilityAllowedValues = 'visible hidden auto';
|
||||
var scrollbarsAutoHideAllowedValues = 'never scroll leavemove';
|
||||
var defaultOptionsWithTemplate = {
|
||||
@@ -1184,16 +1232,21 @@
|
||||
|
||||
if (heightIntrinsicChanged) {
|
||||
style(_content, {
|
||||
height: heightIntrinsic ? 'auto' : '100%',
|
||||
height: heightIntrinsic ? '' : '100%',
|
||||
display: heightIntrinsic ? '' : 'inline',
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
_sizeChanged: heightIntrinsicChanged,
|
||||
_contentMutation: heightIntrinsicChanged,
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
var createPaddingLifecycle = function createPaddingLifecycle(lifecycleHub) {
|
||||
var _setPaddingInfo = lifecycleHub._setPaddingInfo,
|
||||
_setViewportPaddingStyle = lifecycleHub._setViewportPaddingStyle,
|
||||
_structureSetup = lifecycleHub._structureSetup;
|
||||
var _structureSetup = lifecycleHub._structureSetup,
|
||||
_setLifecycleCommunication = lifecycleHub._setLifecycleCommunication;
|
||||
var _structureSetup$_targ = _structureSetup._targetObj,
|
||||
_host = _structureSetup$_targ._host,
|
||||
_padding = _structureSetup$_targ._padding,
|
||||
@@ -1272,12 +1325,13 @@
|
||||
style(_padding || _viewport, paddingStyle);
|
||||
style(_viewport, viewportStyle);
|
||||
|
||||
_setPaddingInfo({
|
||||
_absolute: !paddingRelative,
|
||||
_padding: _padding2,
|
||||
_setLifecycleCommunication({
|
||||
_paddingInfo: {
|
||||
_absolute: !paddingRelative,
|
||||
_padding: _padding2,
|
||||
},
|
||||
_viewportPaddingStyle: _padding ? viewportStyle : _extends_1({}, paddingStyle, viewportStyle),
|
||||
});
|
||||
|
||||
_setViewportPaddingStyle(_padding ? viewportStyle : _extends_1({}, paddingStyle, viewportStyle));
|
||||
}
|
||||
|
||||
return {
|
||||
@@ -1290,12 +1344,10 @@
|
||||
var createOverflowLifecycle = function createOverflowLifecycle(lifecycleHub) {
|
||||
var _structureSetup = lifecycleHub._structureSetup,
|
||||
_doViewportArrange = lifecycleHub._doViewportArrange,
|
||||
_getViewportPaddingStyle = lifecycleHub._getViewportPaddingStyle,
|
||||
_getPaddingInfo = lifecycleHub._getPaddingInfo,
|
||||
_setViewportOverflowScroll = lifecycleHub._setViewportOverflowScroll;
|
||||
_getLifecycleCommunication = lifecycleHub._getLifecycleCommunication,
|
||||
_setLifecycleCommunication = lifecycleHub._setLifecycleCommunication;
|
||||
var _structureSetup$_targ = _structureSetup._targetObj,
|
||||
_host = _structureSetup$_targ._host,
|
||||
_padding = _structureSetup$_targ._padding,
|
||||
_viewport = _structureSetup$_targ._viewport,
|
||||
_viewportArrange = _structureSetup$_targ._viewportArrange;
|
||||
|
||||
@@ -1313,15 +1365,15 @@
|
||||
var _createCache2 = createCache(
|
||||
function (ctx) {
|
||||
return {
|
||||
x: Math.max(0, ctx._contentScrollSize.w - ctx._viewportSize.w),
|
||||
y: Math.max(0, ctx._contentScrollSize.h - ctx._viewportSize.h),
|
||||
w: Math.max(0, ctx._contentScrollSize.w - ctx._viewportSize.w),
|
||||
h: Math.max(0, ctx._contentScrollSize.h - ctx._viewportSize.h),
|
||||
};
|
||||
},
|
||||
{
|
||||
_equal: equalXY,
|
||||
_equal: equalWH,
|
||||
_initialValue: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
w: 0,
|
||||
h: 0,
|
||||
},
|
||||
}
|
||||
),
|
||||
@@ -1341,19 +1393,19 @@
|
||||
});
|
||||
|
||||
if (heightIntrinsic) {
|
||||
var _getPaddingInfo2 = _getPaddingInfo(),
|
||||
paddingAbsolute = _getPaddingInfo2._absolute,
|
||||
padding = _getPaddingInfo2._padding;
|
||||
var _getLifecycleCommunic = _getLifecycleCommunication()._paddingInfo,
|
||||
paddingAbsolute = _getLifecycleCommunic._absolute,
|
||||
padding = _getLifecycleCommunic._padding;
|
||||
|
||||
var _overflowScroll = viewportOverflowState._overflowScroll,
|
||||
_scrollbarsHideOffset = viewportOverflowState._scrollbarsHideOffset;
|
||||
var hostBCR = getBoundingClientRect(_host);
|
||||
var hostOffsetSize = offsetSize(_host);
|
||||
var hostClientSize = clientSize(_host);
|
||||
var paddingAbsoluteVertical = paddingAbsolute ? padding.b + padding.t : 0;
|
||||
var paddingVertical = paddingAbsolute || style(_viewport, 'boxSizing') === 'content-box' ? padding.b + padding.t : 0;
|
||||
var clientSizeWithoutRounding = hostClientSize.h + (hostBCR.height - hostOffsetSize.h);
|
||||
style(_viewport, {
|
||||
height: clientSizeWithoutRounding + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0) - paddingAbsoluteVertical,
|
||||
height: clientSizeWithoutRounding + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0) - paddingVertical,
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -1390,26 +1442,29 @@
|
||||
var setViewportOverflowState = function setViewportOverflowState(showNativeOverlaidScrollbars, overflowAmount, overflow, viewportStyleObj) {
|
||||
var setPartialStylePerAxis = function setPartialStylePerAxis(horizontal, overflowAmount, behavior, styleObj) {
|
||||
var overflowKey = horizontal ? 'overflowX' : 'overflowY';
|
||||
var behaviorIsVisible = behavior.indexOf('visible') === 0;
|
||||
var behaviorIsVisibleHidden = behavior === 'visible-hidden';
|
||||
var behaviorIsScroll = behavior === 'scroll';
|
||||
var behaviorIsVisibleScroll = behavior === 'visible-scroll';
|
||||
var hideOverflow = behaviorIsScroll || behavior === 'hidden';
|
||||
var applyStyle = overflowAmount > 0 && hideOverflow;
|
||||
|
||||
if (applyStyle) {
|
||||
if (behaviorIsVisible) {
|
||||
styleObj[overflowKey] = 'visible';
|
||||
}
|
||||
|
||||
if (behaviorIsScroll && overflowAmount > 0) {
|
||||
styleObj[overflowKey] = behavior;
|
||||
}
|
||||
|
||||
return {
|
||||
_visible: !applyStyle,
|
||||
_behavior: behaviorIsVisibleScroll ? 'scroll' : 'hidden',
|
||||
_visible: behaviorIsVisible,
|
||||
_behavior: behaviorIsVisibleHidden ? 'hidden' : 'scroll',
|
||||
};
|
||||
};
|
||||
|
||||
var _setPartialStylePerAx = setPartialStylePerAxis(true, overflowAmount.x, overflow.x, viewportStyleObj),
|
||||
var _setPartialStylePerAx = setPartialStylePerAxis(true, overflowAmount.w, overflow.x, viewportStyleObj),
|
||||
xVisible = _setPartialStylePerAx._visible,
|
||||
xVisibleBehavior = _setPartialStylePerAx._behavior;
|
||||
|
||||
var _setPartialStylePerAx2 = setPartialStylePerAxis(false, overflowAmount.y, overflow.y, viewportStyleObj),
|
||||
var _setPartialStylePerAx2 = setPartialStylePerAxis(false, overflowAmount.h, overflow.y, viewportStyleObj),
|
||||
yVisible = _setPartialStylePerAx2._visible,
|
||||
yVisibleBehavior = _setPartialStylePerAx2._behavior;
|
||||
|
||||
@@ -1433,7 +1488,8 @@
|
||||
var hideOffsetX = _scrollbarsHideOffset.x,
|
||||
hideOffsetY = _scrollbarsHideOffset.y;
|
||||
|
||||
var viewportPaddingStyle = _getViewportPaddingStyle();
|
||||
var _getLifecycleCommunic2 = _getLifecycleCommunication(),
|
||||
viewportPaddingStyle = _getLifecycleCommunic2._viewportPaddingStyle;
|
||||
|
||||
var viewportArrangeHorizontalPaddingKey = directionIsRTL ? 'paddingRight' : 'paddingLeft';
|
||||
var viewportArrangeHorizontalPaddingValue = viewportPaddingStyle[viewportArrangeHorizontalPaddingKey];
|
||||
@@ -1471,27 +1527,22 @@
|
||||
};
|
||||
|
||||
var hideNativeScrollbars = function hideNativeScrollbars(viewportOverflowState, directionIsRTL, viewportArrange, viewportStyleObj) {
|
||||
var _getEnvironment2 = getEnvironment(),
|
||||
_nativeScrollbarStyling = _getEnvironment2._nativeScrollbarStyling;
|
||||
|
||||
var _overflowScroll = viewportOverflowState._overflowScroll,
|
||||
_scrollbarsHideOffset = viewportOverflowState._scrollbarsHideOffset,
|
||||
var _scrollbarsHideOffset = viewportOverflowState._scrollbarsHideOffset,
|
||||
_scrollbarsHideOffsetArrange = viewportOverflowState._scrollbarsHideOffsetArrange;
|
||||
var arrangeX = _scrollbarsHideOffsetArrange.x,
|
||||
arrangeY = _scrollbarsHideOffsetArrange.y;
|
||||
var hideOffsetX = _scrollbarsHideOffset.x,
|
||||
hideOffsetY = _scrollbarsHideOffset.y;
|
||||
var scrollX = _overflowScroll.x,
|
||||
scrollY = _overflowScroll.y;
|
||||
|
||||
var paddingStyle = _getViewportPaddingStyle();
|
||||
var _getLifecycleCommunic3 = _getLifecycleCommunication(),
|
||||
viewportPaddingStyle = _getLifecycleCommunic3._viewportPaddingStyle;
|
||||
|
||||
var horizontalMarginKey = directionIsRTL ? 'marginLeft' : 'marginRight';
|
||||
var viewportHorizontalPaddingKey = directionIsRTL ? 'paddingLeft' : 'paddingRight';
|
||||
var horizontalMarginValue = paddingStyle[horizontalMarginKey];
|
||||
var verticalMarginValue = paddingStyle.marginBottom;
|
||||
var horizontalPaddingValue = paddingStyle[viewportHorizontalPaddingKey];
|
||||
var verticalPaddingValue = paddingStyle.paddingBottom;
|
||||
var horizontalMarginValue = viewportPaddingStyle[horizontalMarginKey];
|
||||
var verticalMarginValue = viewportPaddingStyle.marginBottom;
|
||||
var horizontalPaddingValue = viewportPaddingStyle[viewportHorizontalPaddingKey];
|
||||
var verticalPaddingValue = viewportPaddingStyle.paddingBottom;
|
||||
viewportStyleObj.maxWidth = 'calc(100% + ' + (hideOffsetY + horizontalMarginValue * -1) + 'px)';
|
||||
viewportStyleObj[horizontalMarginKey] = -hideOffsetY + horizontalMarginValue;
|
||||
viewportStyleObj.marginBottom = -hideOffsetX + verticalMarginValue;
|
||||
@@ -1500,22 +1551,17 @@
|
||||
viewportStyleObj[viewportHorizontalPaddingKey] = horizontalPaddingValue + (arrangeY ? hideOffsetY : 0);
|
||||
viewportStyleObj.paddingBottom = verticalPaddingValue + (arrangeX ? hideOffsetX : 0);
|
||||
}
|
||||
|
||||
if (!_nativeScrollbarStyling) {
|
||||
style(_padding || _host, {
|
||||
overflow: scrollX || scrollY ? 'hidden' : '',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
var undoViewportArrange = function undoViewportArrange(showNativeOverlaidScrollbars, viewportOverflowState) {
|
||||
var undoViewportArrange = function undoViewportArrange(showNativeOverlaidScrollbars, directionIsRTL, viewportOverflowState) {
|
||||
if (_doViewportArrange) {
|
||||
var finalViewportOverflowState = viewportOverflowState || getViewportOverflowState(showNativeOverlaidScrollbars);
|
||||
|
||||
var paddingStyle = _getViewportPaddingStyle();
|
||||
var _getLifecycleCommunic4 = _getLifecycleCommunication(),
|
||||
viewportPaddingStyle = _getLifecycleCommunic4._viewportPaddingStyle;
|
||||
|
||||
var _getEnvironment3 = getEnvironment(),
|
||||
_flexboxGlue = _getEnvironment3._flexboxGlue;
|
||||
var _getEnvironment2 = getEnvironment(),
|
||||
_flexboxGlue = _getEnvironment2._flexboxGlue;
|
||||
|
||||
var _scrollbarsHideOffsetArrange = finalViewportOverflowState._scrollbarsHideOffsetArrange;
|
||||
var arrangeX = _scrollbarsHideOffsetArrange.x,
|
||||
@@ -1524,7 +1570,7 @@
|
||||
|
||||
var assignProps = function assignProps(props) {
|
||||
return each(props.split(' '), function (prop) {
|
||||
finalPaddingStyle[prop] = paddingStyle[prop];
|
||||
finalPaddingStyle[prop] = viewportPaddingStyle[prop];
|
||||
});
|
||||
};
|
||||
|
||||
@@ -1545,6 +1591,7 @@
|
||||
style(_viewport, finalPaddingStyle);
|
||||
return {
|
||||
_redoViewportArrange: function _redoViewportArrange() {
|
||||
hideNativeScrollbars(finalViewportOverflowState, directionIsRTL, _doViewportArrange, prevStyle);
|
||||
style(_viewport, prevStyle);
|
||||
addClass(_viewport, classNameViewportArrange);
|
||||
},
|
||||
@@ -1565,10 +1612,10 @@
|
||||
_contentMutation = updateHints._contentMutation,
|
||||
_paddingStyleChanged = updateHints._paddingStyleChanged;
|
||||
|
||||
var _getEnvironment4 = getEnvironment(),
|
||||
_flexboxGlue = _getEnvironment4._flexboxGlue,
|
||||
_nativeScrollbarStyling = _getEnvironment4._nativeScrollbarStyling,
|
||||
_nativeScrollbarIsOverlaid = _getEnvironment4._nativeScrollbarIsOverlaid;
|
||||
var _getEnvironment3 = getEnvironment(),
|
||||
_flexboxGlue = _getEnvironment3._flexboxGlue,
|
||||
_nativeScrollbarStyling = _getEnvironment3._nativeScrollbarStyling,
|
||||
_nativeScrollbarIsOverlaid = _getEnvironment3._nativeScrollbarIsOverlaid;
|
||||
|
||||
var heightIntrinsic = _heightIntrinsic._value,
|
||||
heightIntrinsicChanged = _heightIntrinsic._changed;
|
||||
@@ -1600,7 +1647,7 @@
|
||||
}
|
||||
|
||||
if (_sizeChanged || _paddingStyleChanged || _contentMutation || showNativeOverlaidScrollbarsChanged || directionChanged) {
|
||||
var _undoViewportArrange = undoViewportArrange(showNativeOverlaidScrollbars, preMeasureViewportOverflowState),
|
||||
var _undoViewportArrange = undoViewportArrange(showNativeOverlaidScrollbars, directionIsRTL, preMeasureViewportOverflowState),
|
||||
_redoViewportArrange = _undoViewportArrange._redoViewportArrange,
|
||||
undoViewportArrangeOverflowState = _undoViewportArrange._viewportOverflowState;
|
||||
|
||||
@@ -1681,7 +1728,10 @@
|
||||
|
||||
style(_viewport, viewportStyle);
|
||||
|
||||
_setViewportOverflowScroll(viewportOverflowState._overflowScroll);
|
||||
_setLifecycleCommunication({
|
||||
_viewportOverflowScroll: viewportOverflowState._overflowScroll,
|
||||
_viewportOverflowAmount: overflowAmount,
|
||||
});
|
||||
}
|
||||
};
|
||||
};
|
||||
@@ -1838,16 +1888,12 @@
|
||||
_changed = directionIsRTLCacheValues._changed;
|
||||
|
||||
if (_changed) {
|
||||
removeClass(listenerElement, 'ltr rtl');
|
||||
|
||||
if (_value) {
|
||||
style(listenerElement, {
|
||||
left: 'auto',
|
||||
right: 0,
|
||||
});
|
||||
addClass(listenerElement, 'rtl');
|
||||
} else {
|
||||
style(listenerElement, {
|
||||
left: 0,
|
||||
right: 'auto',
|
||||
});
|
||||
addClass(listenerElement, 'ltr');
|
||||
}
|
||||
|
||||
onSizeChangedCallbackProxy(directionIsRTLCacheValues);
|
||||
@@ -2142,12 +2188,11 @@
|
||||
};
|
||||
|
||||
var getPropByPath = function getPropByPath(obj, path) {
|
||||
return (
|
||||
obj &&
|
||||
path.split('.').reduce(function (o, prop) {
|
||||
return o && hasOwnProperty$1(o, prop) ? o[prop] : undefined;
|
||||
}, obj)
|
||||
);
|
||||
return obj
|
||||
? path.split('.').reduce(function (o, prop) {
|
||||
return o && hasOwnProperty$1(o, prop) ? o[prop] : undefined;
|
||||
}, obj)
|
||||
: undefined;
|
||||
};
|
||||
|
||||
var emptyStylePropsToZero = function emptyStylePropsToZero(stlyeObj, baseStyle) {
|
||||
@@ -2158,30 +2203,23 @@
|
||||
}, _extends_1({}, baseStyle));
|
||||
};
|
||||
|
||||
var ignorePrefix = 'os-';
|
||||
var hostSelector = '.' + classNameHost;
|
||||
var viewportSelector = '.' + classNameViewport;
|
||||
var contentSelector = '.' + classNameContent;
|
||||
var attrs = ['id', 'class', 'style', 'open'];
|
||||
var paddingInfoFallback = {
|
||||
_absolute: false,
|
||||
_padding: {
|
||||
t: 0,
|
||||
r: 0,
|
||||
b: 0,
|
||||
l: 0,
|
||||
},
|
||||
};
|
||||
var viewportPaddingStyleFallback = {
|
||||
marginTop: 0,
|
||||
marginRight: 0,
|
||||
marginBottom: 0,
|
||||
marginLeft: 0,
|
||||
paddingTop: 0,
|
||||
paddingRight: 0,
|
||||
paddingBottom: 0,
|
||||
paddingLeft: 0,
|
||||
};
|
||||
var viewportOverflowScrollFallback = {
|
||||
x: false,
|
||||
y: false,
|
||||
|
||||
var ignoreTargetChange = function ignoreTargetChange(target, attrName, oldValue, newValue) {
|
||||
if (attrName === 'class' && oldValue && newValue) {
|
||||
var diff = diffClass(oldValue, newValue);
|
||||
return !!diff.find(function (addedOrRemovedClass) {
|
||||
return addedOrRemovedClass.indexOf(ignorePrefix) !== 0;
|
||||
});
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
var directionIsRTLCacheValuesFallback = {
|
||||
_value: false,
|
||||
_previous: false,
|
||||
@@ -2192,10 +2230,37 @@
|
||||
_previous: false,
|
||||
_changed: false,
|
||||
};
|
||||
var lifecycleCommunicationFallback = {
|
||||
_paddingInfo: {
|
||||
_absolute: false,
|
||||
_padding: {
|
||||
t: 0,
|
||||
r: 0,
|
||||
b: 0,
|
||||
l: 0,
|
||||
},
|
||||
},
|
||||
_viewportOverflowScroll: {
|
||||
x: false,
|
||||
y: false,
|
||||
},
|
||||
_viewportOverflowAmount: {
|
||||
w: 0,
|
||||
h: 0,
|
||||
},
|
||||
_viewportPaddingStyle: {
|
||||
marginTop: 0,
|
||||
marginRight: 0,
|
||||
marginBottom: 0,
|
||||
marginLeft: 0,
|
||||
paddingTop: 0,
|
||||
paddingRight: 0,
|
||||
paddingBottom: 0,
|
||||
paddingLeft: 0,
|
||||
},
|
||||
};
|
||||
var createLifecycleHub = function createLifecycleHub(options, structureSetup) {
|
||||
var paddingInfo = paddingInfoFallback;
|
||||
var viewportPaddingStyle = viewportPaddingStyleFallback;
|
||||
var viewportOverflowScroll = viewportOverflowScrollFallback;
|
||||
var lifecycleCommunication = lifecycleCommunicationFallback;
|
||||
var _structureSetup$_targ = structureSetup._targetObj,
|
||||
_host = _structureSetup$_targ._host,
|
||||
_viewport = _structureSetup$_targ._viewport,
|
||||
@@ -2214,23 +2279,18 @@
|
||||
_options: options,
|
||||
_structureSetup: structureSetup,
|
||||
_doViewportArrange: doViewportArrange,
|
||||
_getPaddingInfo: function _getPaddingInfo() {
|
||||
return paddingInfo;
|
||||
_getLifecycleCommunication: function _getLifecycleCommunication() {
|
||||
return lifecycleCommunication;
|
||||
},
|
||||
_setPaddingInfo: function _setPaddingInfo(newPaddingInfo) {
|
||||
paddingInfo = newPaddingInfo || paddingInfoFallback;
|
||||
},
|
||||
_getViewportPaddingStyle: function _getViewportPaddingStyle() {
|
||||
return viewportPaddingStyle;
|
||||
},
|
||||
_setViewportPaddingStyle: function _setViewportPaddingStyle(newPaddingStlye) {
|
||||
viewportPaddingStyle = newPaddingStlye ? emptyStylePropsToZero(newPaddingStlye, viewportPaddingStyleFallback) : viewportPaddingStyleFallback;
|
||||
},
|
||||
_getViewportOverflowScroll: function _getViewportOverflowScroll() {
|
||||
return viewportOverflowScroll;
|
||||
},
|
||||
_setViewportOverflowScroll: function _setViewportOverflowScroll(newViewportOverflowScroll) {
|
||||
viewportOverflowScroll = newViewportOverflowScroll || viewportOverflowScrollFallback;
|
||||
_setLifecycleCommunication: function _setLifecycleCommunication(newLifecycleCommunication) {
|
||||
if (newLifecycleCommunication && newLifecycleCommunication._viewportPaddingStyle) {
|
||||
newLifecycleCommunication._viewportPaddingStyle = emptyStylePropsToZero(
|
||||
newLifecycleCommunication._viewportPaddingStyle,
|
||||
lifecycleCommunicationFallback._viewportPaddingStyle
|
||||
);
|
||||
}
|
||||
|
||||
lifecycleCommunication = assignDeep({}, lifecycleCommunication, newLifecycleCommunication);
|
||||
},
|
||||
};
|
||||
push(lifecycles, createTrinsicLifecycle(instance));
|
||||
@@ -2337,11 +2397,23 @@
|
||||
var hostMutationObserver = createDOMObserver(_host, false, onHostMutation, {
|
||||
_styleChangingAttributes: attrs,
|
||||
_attributes: attrs,
|
||||
_ignoreTargetChange: ignoreTargetChange,
|
||||
});
|
||||
var contentMutationObserver = createDOMObserver(_content || _viewport, true, onContentMutation, {
|
||||
_styleChangingAttributes: attrs,
|
||||
_attributes: attrs,
|
||||
_eventContentChange: options.updating.elementEvents,
|
||||
_nestedTargetSelector: hostSelector,
|
||||
_ignoreContentChange: function _ignoreContentChange(mutation, isNestedTarget) {
|
||||
var target = mutation.target,
|
||||
attributeName = mutation.attributeName;
|
||||
return isNestedTarget
|
||||
? false
|
||||
: attributeName
|
||||
? liesBetween(target, hostSelector, viewportSelector) || liesBetween(target, hostSelector, contentSelector)
|
||||
: false;
|
||||
},
|
||||
_ignoreNestedTargetChange: ignoreTargetChange,
|
||||
});
|
||||
|
||||
var update = function update(changedOptions, force) {
|
||||
@@ -2350,8 +2422,14 @@
|
||||
|
||||
var envUpdateListener = update.bind(null, null, true);
|
||||
addEnvironmentListener(envUpdateListener);
|
||||
console.log(getEnvironment());
|
||||
return {
|
||||
_update: update,
|
||||
_state: function _state() {
|
||||
return {
|
||||
_overflowAmount: lifecycleCommunication._viewportOverflowAmount,
|
||||
};
|
||||
},
|
||||
_destroy: function _destroy() {
|
||||
removeEnvironmentListener(envUpdateListener);
|
||||
},
|
||||
@@ -2380,6 +2458,9 @@
|
||||
|
||||
return currentOptions;
|
||||
},
|
||||
state: function state() {
|
||||
return lifecycleHub._state();
|
||||
},
|
||||
update: function update(force) {
|
||||
lifecycleHub._update(null, force);
|
||||
},
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+16
-11
@@ -1,16 +1,21 @@
|
||||
import { XY, TRBL, CacheValues, PartialOptions } from 'support';
|
||||
import { XY, WH, TRBL, CacheValues, PartialOptions } from 'support';
|
||||
import { OSOptions } from 'options';
|
||||
import { StructureSetup } from 'setups/structureSetup';
|
||||
import { StyleObject } from 'typings';
|
||||
export declare type LifecycleCheckOption = <T>(path: string) => LifecycleOptionInfo<T>;
|
||||
export interface PaddingInfo {
|
||||
_absolute: boolean;
|
||||
_padding: TRBL;
|
||||
}
|
||||
export interface LifecycleOptionInfo<T> {
|
||||
readonly _value: T;
|
||||
_changed: boolean;
|
||||
}
|
||||
export interface LifecycleCommunication {
|
||||
_paddingInfo: {
|
||||
_absolute: boolean;
|
||||
_padding: TRBL;
|
||||
};
|
||||
_viewportPaddingStyle: StyleObject;
|
||||
_viewportOverflowScroll: XY<boolean>;
|
||||
_viewportOverflowAmount: WH<number>;
|
||||
}
|
||||
export interface LifecycleAdaptiveUpdateHints {
|
||||
_sizeChanged: boolean;
|
||||
_hostMutation: boolean;
|
||||
@@ -22,19 +27,19 @@ export interface LifecycleUpdateHints extends LifecycleAdaptiveUpdateHints {
|
||||
_heightIntrinsic: CacheValues<boolean>;
|
||||
}
|
||||
export declare type Lifecycle = (updateHints: LifecycleUpdateHints, checkOption: LifecycleCheckOption, force: boolean) => Partial<LifecycleAdaptiveUpdateHints> | void;
|
||||
export interface LifecycleHubState {
|
||||
_overflowAmount: WH<number>;
|
||||
}
|
||||
export interface LifecycleHubInstance {
|
||||
_update(changedOptions?: PartialOptions<OSOptions> | null, force?: boolean): void;
|
||||
_state(): LifecycleHubState;
|
||||
_destroy(): void;
|
||||
}
|
||||
export interface LifecycleHub {
|
||||
_options: OSOptions;
|
||||
_structureSetup: StructureSetup;
|
||||
_doViewportArrange: boolean;
|
||||
_getPaddingInfo(): PaddingInfo;
|
||||
_setPaddingInfo(newPadding?: PaddingInfo | null): void;
|
||||
_getViewportPaddingStyle(): StyleObject;
|
||||
_setViewportPaddingStyle(newPaddingStlye?: StyleObject | null): void;
|
||||
_getViewportOverflowScroll(): XY<boolean>;
|
||||
_setViewportOverflowScroll(newViewportOverflowScroll: XY<boolean>): void;
|
||||
_getLifecycleCommunication(): LifecycleCommunication;
|
||||
_setLifecycleCommunication(newLifecycleCommunication?: Partial<LifecycleCommunication>): void;
|
||||
}
|
||||
export declare const createLifecycleHub: (options: OSOptions, structureSetup: StructureSetup) => LifecycleHubInstance;
|
||||
|
||||
@@ -23,7 +23,8 @@ interface DOMContentObserver extends DOMObserverBase {
|
||||
}
|
||||
interface DOMTargetObserver extends DOMObserverBase {
|
||||
}
|
||||
export declare type DOMObserverEventContentChange = Array<[StringNullUndefined, ((elms: Node[]) => StringNullUndefined) | StringNullUndefined] | null | undefined> | false | null | undefined;
|
||||
declare type ContentChangeArrayItem = [StringNullUndefined, ((elms: Node[]) => StringNullUndefined) | StringNullUndefined] | null | undefined;
|
||||
export declare type DOMObserverEventContentChange = Array<ContentChangeArrayItem> | 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;
|
||||
|
||||
@@ -10,7 +10,7 @@ export interface SizeObserver {
|
||||
};
|
||||
}
|
||||
/**
|
||||
* 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.
|
||||
* Creates a size observer which observes any size, padding, border, margin and box-sizing 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.
|
||||
|
||||
+3
-3
@@ -1,5 +1,5 @@
|
||||
export declare type ResizeBehavior = 'none' | 'both' | 'horizontal' | 'vertical';
|
||||
export declare type OverflowBehavior = 'hidden' | 'scroll' | 'visible-hidden' | 'visible-scroll';
|
||||
export declare type OverflowBehavior = 'hidden' | 'scroll' | 'visible' | 'visible-hidden';
|
||||
export declare type VisibilityBehavior = 'visible' | 'hidden' | 'auto';
|
||||
export declare type AutoHideBehavior = 'never' | 'scroll' | 'leave' | 'move';
|
||||
export declare type ScrollBehavior = 'always' | 'ifneeded' | 'never';
|
||||
@@ -14,7 +14,7 @@ export interface OSOptions {
|
||||
resize: ResizeBehavior;
|
||||
paddingAbsolute: boolean;
|
||||
updating: {
|
||||
elementEvents: ReadonlyArray<[string, string]> | null;
|
||||
elementEvents: Array<[string, string]> | null;
|
||||
contentMutationDebounce: number;
|
||||
hostMutationDebounce: number;
|
||||
resizeDebounce: number;
|
||||
@@ -34,7 +34,7 @@ export interface OSOptions {
|
||||
textarea: {
|
||||
dynWidth: boolean;
|
||||
dynHeight: boolean;
|
||||
inheritedAttrs: string | ReadonlyArray<string> | null;
|
||||
inheritedAttrs: string | Array<string> | null;
|
||||
};
|
||||
nativeScrollbarsOverlaid: {
|
||||
show: boolean;
|
||||
|
||||
@@ -8,5 +8,6 @@ export interface OverlayScrollbars {
|
||||
options(): OSOptions;
|
||||
options(newOptions?: PartialOptions<OSOptions>): OSOptions;
|
||||
update(force?: boolean): void;
|
||||
state(): any;
|
||||
}
|
||||
export declare const OverlayScrollbars: OverlayScrollbarsStatic;
|
||||
|
||||
Reference in New Issue
Block a user