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

finalize SizeObserver and begin TrinsicObserver

Browse Source
This commit is contained in:
Rene
2020-11-22 01:32:58 +01:00
parent 946fa55a1b
commit 5497f610de
22 changed files with 710 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/overlayscrollbars/dist/overlayscrollbars.esm.js
Vendored
+276 -135
View File
@@ -31,6 +31,9 @@ const removeAttr = (elm, attrName) => {
function scrollLeft(elm, value) {
return getSetProp('scrollLeft', 0, elm, value);
}
function scrollTop(elm, value) {
return getSetProp('scrollTop', 0, elm, value);
}
const rnothtmlwhite = /[^\x20\t\r\n\f]+/g;
@@ -78,6 +81,13 @@ const from = (arr) => {
});
return result;
};
const runEach = (arr) => {
if (arr instanceof Set) {
arr.forEach((fn) => fn && fn());
} else {
each(arr, (fn) => fn && fn());
}
};
const contents = (elm) => (elm ? from(elm.childNodes) : []);
const parent = (elm) => (elm ? elm.parentElement : null);
@@ -117,6 +127,9 @@ const before = (parentElm, preferredAnchor, insertedElms) => {
const appendChildren = (node, children) => {
before(node, null, children);
};
const prependChildren = (node, children) => {
before(node, node && node.firstChild, children);
};
const removeElements = (nodes) => {
if (isArrayLike(nodes)) {
each(from(nodes), (e) => removeElements(e));
@@ -160,6 +173,60 @@ const clientSize = (elm) =>
: zeroObj;
const getBoundingClientRect = (elm) => elm.getBoundingClientRect();
let passiveEventsSupport;
const supportPassiveEvents = () => {
if (passiveEventsSupport === undefined) {
passiveEventsSupport = false;
try {
window.addEventListener(
'test',
null,
Object.defineProperty({}, 'passive', {
get: function () {
passiveEventsSupport = true;
},
})
);
} catch (e) {}
}
return passiveEventsSupport;
};
const off = (target, eventNames, listener, capture) => {
each(eventNames.split(' '), (eventName) => {
target.removeEventListener(eventName, listener, capture);
});
};
const on = (target, eventNames, listener, options) => {
const doSupportPassiveEvents = supportPassiveEvents();
const passive = (doSupportPassiveEvents && options && options._passive) || false;
const capture = (options && options._capture) || false;
const once = (options && options._once) || false;
const offListeners = [];
const nativeOptions = doSupportPassiveEvents
? {
passive,
capture,
}
: capture;
each(eventNames.split(' '), (eventName) => {
const finalListener = once
? (evt) => {
target.removeEventListener(eventName, finalListener, capture);
listener && listener(evt);
}
: listener;
offListeners.push(off.bind(null, target, eventName, finalListener, capture));
target.addEventListener(eventName, finalListener, nativeOptions);
});
return runEach.bind(0, offListeners);
};
const stopPropagation = (evt) => evt.stopPropagation();
const preventDefault = (evt) => evt.preventDefault();
const hasOwnProperty = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
const keys = (obj) => (obj ? Object.keys(obj) : []);
@@ -228,44 +295,6 @@ const absoluteCoordinates = (elm) => {
: zeroObj$1;
};
function _classPrivateFieldGet(receiver, privateMap) {
var descriptor = privateMap.get(receiver);
if (!descriptor) {
throw new TypeError('attempted to get private field on non-instance');
}
if (descriptor.get) {
return descriptor.get.call(receiver);
}
return descriptor.value;
}
var classPrivateFieldGet = _classPrivateFieldGet;
function _classPrivateFieldSet(receiver, privateMap, value) {
var descriptor = privateMap.get(receiver);
if (!descriptor) {
throw new TypeError('attempted to set private field on non-instance');
}
if (descriptor.set) {
descriptor.set.call(receiver, value);
} else {
if (!descriptor.writable) {
throw new TypeError('attempted to set read only private field');
}
descriptor.value = value;
}
return value;
}
var classPrivateFieldSet = _classPrivateFieldSet;
const firstLetterToUpper = (str) => str.charAt(0).toUpperCase() + str.slice(1);
const jsPrefixes = ['WebKit', 'Moz', 'O', 'MS', 'webkit', 'moz', 'o', 'ms'];
const jsCache = {};
@@ -334,10 +363,11 @@ const optionsTemplateTypes = ['boolean', 'number', 'string', 'array', 'object',
return result;
}, {});
let environmentInstance;
const { abs, round } = Math;
const envornmentElmId = 'os-envornment';
const environmentElmId = 'os-environment';
const nativeScrollbarSize = (body, measureElm) => {
const getNativeScrollbarSize = (body, measureElm) => {
appendChildren(body, measureElm);
const cSize = clientSize(measureElm);
const oSize = offsetSize(measureElm);
@@ -347,7 +377,7 @@ const nativeScrollbarSize = (body, measureElm) => {
};
};
const nativeScrollbarStyling = (testElm) => {
const getNativeScrollbarStyling = (testElm) => {
let result = false;
addClass(testElm, 'os-viewport-native-scrollbars-invisible');
@@ -359,7 +389,7 @@ const nativeScrollbarStyling = (testElm) => {
return result;
};
const rtlScrollBehavior = (parentElm, childElm) => {
const getRtlScrollBehavior = (parentElm, childElm) => {
const strHidden = 'hidden';
style(parentElm, {
overflowX: strHidden,
@@ -377,25 +407,7 @@ const rtlScrollBehavior = (parentElm, childElm) => {
};
};
const passiveEvents = () => {
let supportsPassive = false;
try {
window.addEventListener(
'test',
null,
Object.defineProperty({}, 'passive', {
get: function () {
supportsPassive = true;
},
})
);
} catch (e) {}
return supportsPassive;
};
const windowDPR = () => {
const getWindowDPR = () => {
const dDPI = window.screen.deviceXDPI || 0;
const sDPI = window.screen.logicalXDPI || 1;
return window.devicePixelRatio || dDPI / sDPI;
@@ -407,96 +419,225 @@ const diffBiggerThanOne = (valOne, valTwo) => {
return !(absValOne === absValTwo || absValOne + 1 === absValTwo || absValOne - 1 === absValTwo);
};
var _onChangedListener = new WeakMap();
const createEnvironment = () => {
const { body } = document;
const envDOM = createDOM(`<div id="${environmentElmId}"><div></div></div>`);
const envElm = envDOM[0];
const envChildElm = envElm.firstChild;
const onChangedListener = new Set();
const nativeScrollBarSize = getNativeScrollbarSize(body, envElm);
const nativeScrollbarIsOverlaid = {
x: nativeScrollBarSize.x === 0,
y: nativeScrollBarSize.y === 0,
};
const env = {
_autoUpdateLoop: false,
_nativeScrollbarSize: nativeScrollBarSize,
_nativeScrollbarIsOverlaid: nativeScrollbarIsOverlaid,
_nativeScrollbarStyling: getNativeScrollbarStyling(envElm),
_rtlScrollBehavior: getRtlScrollBehavior(envElm, envChildElm),
class Environment {
constructor() {
_onChangedListener.set(this, {
writable: true,
value: void 0,
});
_addListener(listener) {
onChangedListener.add(listener);
},
classPrivateFieldSet(this, _onChangedListener, new Set());
_removeListener(listener) {
onChangedListener.delete(listener);
},
};
removeAttr(envElm, 'style');
removeElements(envElm);
const _self = this;
if (!nativeScrollbarIsOverlaid.x || !nativeScrollbarIsOverlaid.y) {
let size = windowSize();
let dpr = getWindowDPR();
let scrollbarSize = nativeScrollBarSize;
window.addEventListener('resize', () => {
if (onChangedListener.size) {
const sizeNew = windowSize();
const deltaSize = {
w: sizeNew.w - size.w,
h: sizeNew.h - size.h,
};
if (deltaSize.w === 0 && deltaSize.h === 0) return;
const deltaAbsSize = {
w: abs(deltaSize.w),
h: abs(deltaSize.h),
};
const deltaAbsRatio = {
w: abs(round(sizeNew.w / (size.w / 100.0))),
h: abs(round(sizeNew.h / (size.h / 100.0))),
};
const dprNew = getWindowDPR();
const deltaIsBigger = deltaAbsSize.w > 2 && deltaAbsSize.h > 2;
const difference = !diffBiggerThanOne(deltaAbsRatio.w, deltaAbsRatio.h);
const dprChanged = dprNew !== dpr && dpr > 0;
const isZoom = deltaIsBigger && difference && dprChanged;
const { body } = document;
const envDOM = createDOM(`<div id="${envornmentElmId}"><div></div></div>`);
const envElm = envDOM[0];
const envChildElm = envElm.firstChild;
const nScrollBarSize = nativeScrollbarSize(body, envElm);
const nativeScrollbarIsOverlaid = {
x: nScrollBarSize.x === 0,
y: nScrollBarSize.y === 0,
};
_self._autoUpdateLoop = false;
_self._nativeScrollbarSize = nScrollBarSize;
_self._nativeScrollbarIsOverlaid = nativeScrollbarIsOverlaid;
_self._nativeScrollbarStyling = nativeScrollbarStyling(envElm);
_self._rtlScrollBehavior = rtlScrollBehavior(envElm, envChildElm);
_self._supportPassiveEvents = passiveEvents();
_self._supportResizeObserver = !!jsAPI('ResizeObserver');
removeAttr(envElm, 'style');
removeElements(envElm);
if (isZoom) {
const newScrollbarSize = (environmentInstance._nativeScrollbarSize = getNativeScrollbarSize(body, envElm));
removeElements(envElm);
if (!nativeScrollbarIsOverlaid.x || !nativeScrollbarIsOverlaid.y) {
let size = windowSize();
let dpr = windowDPR();
const onChangedListener = classPrivateFieldGet(this, _onChangedListener);
window.addEventListener('resize', () => {
if (onChangedListener.size) {
const sizeNew = windowSize();
const deltaSize = {
w: sizeNew.w - size.w,
h: sizeNew.h - size.h,
};
if (deltaSize.w === 0 && deltaSize.h === 0) return;
const deltaAbsSize = {
w: abs(deltaSize.w),
h: abs(deltaSize.h),
};
const deltaAbsRatio = {
w: abs(round(sizeNew.w / (size.w / 100.0))),
h: abs(round(sizeNew.h / (size.h / 100.0))),
};
const dprNew = windowDPR();
const deltaIsBigger = deltaAbsSize.w > 2 && deltaAbsSize.h > 2;
const difference = !diffBiggerThanOne(deltaAbsRatio.w, deltaAbsRatio.h);
const dprChanged = dprNew !== dpr && dpr > 0;
const isZoom = deltaIsBigger && difference && dprChanged;
const oldScrollbarSize = _self._nativeScrollbarSize;
let newScrollbarSize;
if (isZoom) {
newScrollbarSize = _self._nativeScrollbarSize = nativeScrollbarSize(body, envElm);
removeElements(envElm);
if (oldScrollbarSize.x !== newScrollbarSize.x || oldScrollbarSize.y !== newScrollbarSize.y) {
onChangedListener.forEach((listener) => listener && listener(_self));
}
if (scrollbarSize.x !== newScrollbarSize.x || scrollbarSize.y !== newScrollbarSize.y) {
runEach(onChangedListener);
}
size = sizeNew;
dpr = dprNew;
scrollbarSize = newScrollbarSize;
}
});
size = sizeNew;
dpr = dprNew;
}
});
}
return env;
};
const getEnvironment = () => {
if (!environmentInstance) {
environmentInstance = createEnvironment();
}
return environmentInstance;
};
const animationStartEventName = 'animationstart';
const scrollEventName = 'scroll';
const scrollAmount = 3333333;
const ResizeObserverConstructor = jsAPI('ResizeObserver');
const classNameSizeObserver = 'os-size-observer';
const classNameSizeObserverListener = `${classNameSizeObserver}-listener`;
const classNameSizeObserverListenerItem = `${classNameSizeObserverListener}-item`;
const classNameSizeObserverListenerItemFinal = `${classNameSizeObserverListenerItem}-final`;
const cAF = cancelAnimationFrame;
const rAF = requestAnimationFrame;
const getDirection = (elm) => style(elm, 'direction');
const createSizeObserver = (target, onSizeChangedCallback, direction) => {
const rtlScrollBehavior = getEnvironment()._rtlScrollBehavior;
const baseElements = createDOM(`<div class="${classNameSizeObserver}"><div class="${classNameSizeObserverListener}"></div></div>`);
const sizeObserver = baseElements[0];
const listenerElement = sizeObserver.firstChild;
const onSizeChangedCallbackProxy = (dir) => {
if (direction) {
const rtl = getDirection(sizeObserver) === 'rtl';
scrollLeft(sizeObserver, rtl ? (rtlScrollBehavior.n ? -scrollAmount : rtlScrollBehavior.i ? 0 : scrollAmount) : scrollAmount);
scrollTop(sizeObserver, scrollAmount);
}
onSizeChangedCallback(dir === true);
};
const offListeners = [];
let appearCallback = onSizeChangedCallbackProxy;
if (ResizeObserverConstructor) {
const resizeObserverInstance = new ResizeObserverConstructor(onSizeChangedCallbackProxy);
resizeObserverInstance.observe(listenerElement);
} else {
const observerElementChildren = createDOM(
`<div class="${classNameSizeObserverListenerItem}" dir="ltr"><div class="${classNameSizeObserverListenerItem}"><div class="${classNameSizeObserverListenerItemFinal}"></div></div><div class="${classNameSizeObserverListenerItem}"><div class="${classNameSizeObserverListenerItemFinal}" style="width: 200%; height: 200%"></div></div></div>`
);
appendChildren(listenerElement, observerElementChildren);
const observerElementChildrenRoot = observerElementChildren[0];
const shrinkElement = observerElementChildrenRoot.lastChild;
const expandElement = observerElementChildrenRoot.firstChild;
const expandElementChild = expandElement == null ? void 0 : expandElement.firstChild;
let cacheSize = offsetSize(listenerElement);
let currSize = cacheSize;
let isDirty = false;
let rAFId;
const reset = () => {
scrollLeft(expandElement, scrollAmount);
scrollTop(expandElement, scrollAmount);
scrollLeft(shrinkElement, scrollAmount);
scrollTop(shrinkElement, scrollAmount);
};
const onResized = function onResized() {
rAFId = 0;
if (!isDirty) return;
cacheSize = currSize;
onSizeChangedCallbackProxy();
};
const onScroll = (scrollEvent) => {
currSize = offsetSize(listenerElement);
isDirty = !scrollEvent || currSize.w !== cacheSize.w || currSize.h !== cacheSize.h;
if (scrollEvent && isDirty && !rAFId) {
cAF(rAFId);
rAFId = rAF(onResized);
} else if (!scrollEvent) onResized();
reset();
if (scrollEvent) {
preventDefault(scrollEvent);
stopPropagation(scrollEvent);
}
return false;
};
offListeners.push(on(expandElement, scrollEventName, onScroll));
offListeners.push(on(shrinkElement, scrollEventName, onScroll));
style(expandElementChild, {
width: scrollAmount,
height: scrollAmount,
});
reset();
appearCallback = onScroll;
}
addListener(listener) {
classPrivateFieldGet(this, _onChangedListener).add(listener);
if (direction) {
let dirCache;
offListeners.push(
on(sizeObserver, scrollEventName, (event) => {
const dir = getDirection(sizeObserver);
const changed = dir !== dirCache;
if (changed) {
if (dir === 'rtl') {
style(listenerElement, {
left: 'auto',
right: 0,
});
} else {
style(listenerElement, {
left: 0,
right: 'auto',
});
}
dirCache = dir;
onSizeChangedCallbackProxy(true);
}
preventDefault(event);
stopPropagation(event);
return false;
})
);
}
removeListener(listener) {
classPrivateFieldGet(this, _onChangedListener).delete(listener);
}
}
offListeners.push(on(sizeObserver, animationStartEventName, appearCallback));
prependChildren(target, sizeObserver);
return () => {
runEach(offListeners);
removeElements(sizeObserver);
};
};
var index = () => {
return [
new Environment(),
getEnvironment(),
createSizeObserver(document.body, () => {}),
createDOM(
'\
<div class="os-host">\
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
+296 -143
View File
@@ -40,6 +40,9 @@
function scrollLeft(elm, value) {
return getSetProp('scrollLeft', 0, elm, value);
}
function scrollTop(elm, value) {
return getSetProp('scrollTop', 0, elm, value);
}
var rnothtmlwhite = /[^\x20\t\r\n\f]+/g;
@@ -91,6 +94,17 @@
});
return result;
};
var runEach = function runEach(arr) {
if (arr instanceof Set) {
arr.forEach(function (fn) {
return fn && fn();
});
} else {
each(arr, function (fn) {
return fn && fn();
});
}
};
var contents = function contents(elm) {
return elm ? from(elm.childNodes) : [];
@@ -134,6 +148,9 @@
var appendChildren = function appendChildren(node, children) {
before(node, null, children);
};
var prependChildren = function prependChildren(node, children) {
before(node, node && node.firstChild, children);
};
var removeElements = function removeElements(nodes) {
if (isArrayLike(nodes)) {
each(from(nodes), function (e) {
@@ -189,6 +206,64 @@
return elm.getBoundingClientRect();
};
var passiveEventsSupport;
var supportPassiveEvents = function supportPassiveEvents() {
if (passiveEventsSupport === undefined) {
passiveEventsSupport = false;
try {
window.addEventListener(
'test',
null,
Object.defineProperty({}, 'passive', {
get: function get() {
passiveEventsSupport = true;
},
})
);
} catch (e) {}
}
return passiveEventsSupport;
};
var off = function off(target, eventNames, listener, capture) {
each(eventNames.split(' '), function (eventName) {
target.removeEventListener(eventName, listener, capture);
});
};
var on = function on(target, eventNames, listener, options) {
var doSupportPassiveEvents = supportPassiveEvents();
var passive = (doSupportPassiveEvents && options && options._passive) || false;
var capture = (options && options._capture) || false;
var once = (options && options._once) || false;
var offListeners = [];
var nativeOptions = doSupportPassiveEvents
? {
passive: passive,
capture: capture,
}
: capture;
each(eventNames.split(' '), function (eventName) {
var finalListener = once
? function (evt) {
target.removeEventListener(eventName, finalListener, capture);
listener && listener(evt);
}
: listener;
offListeners.push(off.bind(null, target, eventName, finalListener, capture));
target.addEventListener(eventName, finalListener, nativeOptions);
});
return runEach.bind(0, offListeners);
};
var stopPropagation = function stopPropagation(evt) {
return evt.stopPropagation();
};
var preventDefault = function preventDefault(evt) {
return evt.preventDefault();
};
var hasOwnProperty = function hasOwnProperty(obj, prop) {
return Object.prototype.hasOwnProperty.call(obj, prop);
};
@@ -267,44 +342,6 @@
: zeroObj$1;
};
function _classPrivateFieldGet(receiver, privateMap) {
var descriptor = privateMap.get(receiver);
if (!descriptor) {
throw new TypeError('attempted to get private field on non-instance');
}
if (descriptor.get) {
return descriptor.get.call(receiver);
}
return descriptor.value;
}
var classPrivateFieldGet = _classPrivateFieldGet;
function _classPrivateFieldSet(receiver, privateMap, value) {
var descriptor = privateMap.get(receiver);
if (!descriptor) {
throw new TypeError('attempted to set private field on non-instance');
}
if (descriptor.set) {
descriptor.set.call(receiver, value);
} else {
if (!descriptor.writable) {
throw new TypeError('attempted to set read only private field');
}
descriptor.value = value;
}
return value;
}
var classPrivateFieldSet = _classPrivateFieldSet;
var firstLetterToUpper = function firstLetterToUpper(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
};
@@ -375,11 +412,12 @@
return result;
}, {});
var environmentInstance;
var abs = Math.abs,
round = Math.round;
var envornmentElmId = 'os-envornment';
var environmentElmId = 'os-environment';
var nativeScrollbarSize = function nativeScrollbarSize(body, measureElm) {
var getNativeScrollbarSize = function getNativeScrollbarSize(body, measureElm) {
appendChildren(body, measureElm);
var cSize = clientSize(measureElm);
var oSize = offsetSize(measureElm);
@@ -389,7 +427,7 @@
};
};
var nativeScrollbarStyling = function nativeScrollbarStyling(testElm) {
var getNativeScrollbarStyling = function getNativeScrollbarStyling(testElm) {
var result = false;
addClass(testElm, 'os-viewport-native-scrollbars-invisible');
@@ -402,7 +440,7 @@
return result;
};
var rtlScrollBehavior = function rtlScrollBehavior(parentElm, childElm) {
var getRtlScrollBehavior = function getRtlScrollBehavior(parentElm, childElm) {
var strHidden = 'hidden';
style(parentElm, {
overflowX: strHidden,
@@ -420,25 +458,7 @@
};
};
var passiveEvents = function passiveEvents() {
var supportsPassive = false;
try {
window.addEventListener(
'test',
null,
Object.defineProperty({}, 'passive', {
get: function get() {
supportsPassive = true;
},
})
);
} catch (e) {}
return supportsPassive;
};
var windowDPR = function windowDPR() {
var getWindowDPR = function getWindowDPR() {
var dDPI = window.screen.deviceXDPI || 0;
var sDPI = window.screen.logicalXDPI || 1;
return window.devicePixelRatio || dDPI / sDPI;
@@ -450,103 +470,236 @@
return !(absValOne === absValTwo || absValOne + 1 === absValTwo || absValOne - 1 === absValTwo);
};
var _onChangedListener = new WeakMap();
var createEnvironment = function createEnvironment() {
var _document = document,
body = _document.body;
var envDOM = createDOM('<div id="' + environmentElmId + '"><div></div></div>');
var envElm = envDOM[0];
var envChildElm = envElm.firstChild;
var onChangedListener = new Set();
var nativeScrollBarSize = getNativeScrollbarSize(body, envElm);
var nativeScrollbarIsOverlaid = {
x: nativeScrollBarSize.x === 0,
y: nativeScrollBarSize.y === 0,
};
var env = {
_autoUpdateLoop: false,
_nativeScrollbarSize: nativeScrollBarSize,
_nativeScrollbarIsOverlaid: nativeScrollbarIsOverlaid,
_nativeScrollbarStyling: getNativeScrollbarStyling(envElm),
_rtlScrollBehavior: getRtlScrollBehavior(envElm, envChildElm),
_addListener: function _addListener(listener) {
onChangedListener.add(listener);
},
_removeListener: function _removeListener(listener) {
onChangedListener.delete(listener);
},
};
removeAttr(envElm, 'style');
removeElements(envElm);
var Environment = /*#__PURE__*/ (function () {
function Environment() {
_onChangedListener.set(this, {
writable: true,
value: void 0,
});
if (!nativeScrollbarIsOverlaid.x || !nativeScrollbarIsOverlaid.y) {
var size = windowSize();
var dpr = getWindowDPR();
var scrollbarSize = nativeScrollBarSize;
window.addEventListener('resize', function () {
if (onChangedListener.size) {
var sizeNew = windowSize();
var deltaSize = {
w: sizeNew.w - size.w,
h: sizeNew.h - size.h,
};
if (deltaSize.w === 0 && deltaSize.h === 0) return;
var deltaAbsSize = {
w: abs(deltaSize.w),
h: abs(deltaSize.h),
};
var deltaAbsRatio = {
w: abs(round(sizeNew.w / (size.w / 100.0))),
h: abs(round(sizeNew.h / (size.h / 100.0))),
};
var dprNew = getWindowDPR();
var deltaIsBigger = deltaAbsSize.w > 2 && deltaAbsSize.h > 2;
var difference = !diffBiggerThanOne(deltaAbsRatio.w, deltaAbsRatio.h);
var dprChanged = dprNew !== dpr && dpr > 0;
var isZoom = deltaIsBigger && difference && dprChanged;
classPrivateFieldSet(this, _onChangedListener, new Set());
if (isZoom) {
var newScrollbarSize = (environmentInstance._nativeScrollbarSize = getNativeScrollbarSize(body, envElm));
removeElements(envElm);
var _self = this;
var _document = document,
body = _document.body;
var envDOM = createDOM('<div id="' + envornmentElmId + '"><div></div></div>');
var envElm = envDOM[0];
var envChildElm = envElm.firstChild;
var nScrollBarSize = nativeScrollbarSize(body, envElm);
var nativeScrollbarIsOverlaid = {
x: nScrollBarSize.x === 0,
y: nScrollBarSize.y === 0,
};
_self._autoUpdateLoop = false;
_self._nativeScrollbarSize = nScrollBarSize;
_self._nativeScrollbarIsOverlaid = nativeScrollbarIsOverlaid;
_self._nativeScrollbarStyling = nativeScrollbarStyling(envElm);
_self._rtlScrollBehavior = rtlScrollBehavior(envElm, envChildElm);
_self._supportPassiveEvents = passiveEvents();
_self._supportResizeObserver = !!jsAPI('ResizeObserver');
removeAttr(envElm, 'style');
removeElements(envElm);
if (!nativeScrollbarIsOverlaid.x || !nativeScrollbarIsOverlaid.y) {
var size = windowSize();
var dpr = windowDPR();
var onChangedListener = classPrivateFieldGet(this, _onChangedListener);
window.addEventListener('resize', function () {
if (onChangedListener.size) {
var sizeNew = windowSize();
var deltaSize = {
w: sizeNew.w - size.w,
h: sizeNew.h - size.h,
};
if (deltaSize.w === 0 && deltaSize.h === 0) return;
var deltaAbsSize = {
w: abs(deltaSize.w),
h: abs(deltaSize.h),
};
var deltaAbsRatio = {
w: abs(round(sizeNew.w / (size.w / 100.0))),
h: abs(round(sizeNew.h / (size.h / 100.0))),
};
var dprNew = windowDPR();
var deltaIsBigger = deltaAbsSize.w > 2 && deltaAbsSize.h > 2;
var difference = !diffBiggerThanOne(deltaAbsRatio.w, deltaAbsRatio.h);
var dprChanged = dprNew !== dpr && dpr > 0;
var isZoom = deltaIsBigger && difference && dprChanged;
var oldScrollbarSize = _self._nativeScrollbarSize;
var newScrollbarSize;
if (isZoom) {
newScrollbarSize = _self._nativeScrollbarSize = nativeScrollbarSize(body, envElm);
removeElements(envElm);
if (oldScrollbarSize.x !== newScrollbarSize.x || oldScrollbarSize.y !== newScrollbarSize.y) {
onChangedListener.forEach(function (listener) {
return listener && listener(_self);
});
}
if (scrollbarSize.x !== newScrollbarSize.x || scrollbarSize.y !== newScrollbarSize.y) {
runEach(onChangedListener);
}
size = sizeNew;
dpr = dprNew;
scrollbarSize = newScrollbarSize;
}
});
}
size = sizeNew;
dpr = dprNew;
}
});
}
var _proto = Environment.prototype;
return env;
};
_proto.addListener = function addListener(listener) {
classPrivateFieldGet(this, _onChangedListener).add(listener);
var getEnvironment = function getEnvironment() {
if (!environmentInstance) {
environmentInstance = createEnvironment();
}
return environmentInstance;
};
var animationStartEventName = 'animationstart';
var scrollEventName = 'scroll';
var scrollAmount = 3333333;
var ResizeObserverConstructor = jsAPI('ResizeObserver');
var classNameSizeObserver = 'os-size-observer';
var classNameSizeObserverListener = classNameSizeObserver + '-listener';
var classNameSizeObserverListenerItem = classNameSizeObserverListener + '-item';
var classNameSizeObserverListenerItemFinal = classNameSizeObserverListenerItem + '-final';
var cAF = cancelAnimationFrame;
var rAF = requestAnimationFrame;
var getDirection = function getDirection(elm) {
return style(elm, 'direction');
};
var createSizeObserver = function createSizeObserver(target, onSizeChangedCallback, direction) {
var rtlScrollBehavior = getEnvironment()._rtlScrollBehavior;
var baseElements = createDOM('<div class="' + classNameSizeObserver + '"><div class="' + classNameSizeObserverListener + '"></div></div>');
var sizeObserver = baseElements[0];
var listenerElement = sizeObserver.firstChild;
var onSizeChangedCallbackProxy = function onSizeChangedCallbackProxy(dir) {
if (direction) {
var rtl = getDirection(sizeObserver) === 'rtl';
scrollLeft(sizeObserver, rtl ? (rtlScrollBehavior.n ? -scrollAmount : rtlScrollBehavior.i ? 0 : scrollAmount) : scrollAmount);
scrollTop(sizeObserver, scrollAmount);
}
onSizeChangedCallback(dir === true);
};
_proto.removeListener = function removeListener(listener) {
classPrivateFieldGet(this, _onChangedListener).delete(listener);
};
var offListeners = [];
var appearCallback = onSizeChangedCallbackProxy;
return Environment;
})();
if (ResizeObserverConstructor) {
var resizeObserverInstance = new ResizeObserverConstructor(onSizeChangedCallbackProxy);
resizeObserverInstance.observe(listenerElement);
} else {
var observerElementChildren = createDOM(
'<div class="' +
classNameSizeObserverListenerItem +
'" dir="ltr"><div class="' +
classNameSizeObserverListenerItem +
'"><div class="' +
classNameSizeObserverListenerItemFinal +
'"></div></div><div class="' +
classNameSizeObserverListenerItem +
'"><div class="' +
classNameSizeObserverListenerItemFinal +
'" style="width: 200%; height: 200%"></div></div></div>'
);
appendChildren(listenerElement, observerElementChildren);
var observerElementChildrenRoot = observerElementChildren[0];
var shrinkElement = observerElementChildrenRoot.lastChild;
var expandElement = observerElementChildrenRoot.firstChild;
var expandElementChild = expandElement == null ? void 0 : expandElement.firstChild;
var cacheSize = offsetSize(listenerElement);
var currSize = cacheSize;
var isDirty = false;
var rAFId;
var reset = function reset() {
scrollLeft(expandElement, scrollAmount);
scrollTop(expandElement, scrollAmount);
scrollLeft(shrinkElement, scrollAmount);
scrollTop(shrinkElement, scrollAmount);
};
var onResized = function onResized() {
rAFId = 0;
if (!isDirty) return;
cacheSize = currSize;
onSizeChangedCallbackProxy();
};
var onScroll = function onScroll(scrollEvent) {
currSize = offsetSize(listenerElement);
isDirty = !scrollEvent || currSize.w !== cacheSize.w || currSize.h !== cacheSize.h;
if (scrollEvent && isDirty && !rAFId) {
cAF(rAFId);
rAFId = rAF(onResized);
} else if (!scrollEvent) onResized();
reset();
if (scrollEvent) {
preventDefault(scrollEvent);
stopPropagation(scrollEvent);
}
return false;
};
offListeners.push(on(expandElement, scrollEventName, onScroll));
offListeners.push(on(shrinkElement, scrollEventName, onScroll));
style(expandElementChild, {
width: scrollAmount,
height: scrollAmount,
});
reset();
appearCallback = onScroll;
}
if (direction) {
var dirCache;
offListeners.push(
on(sizeObserver, scrollEventName, function (event) {
var dir = getDirection(sizeObserver);
var changed = dir !== dirCache;
if (changed) {
if (dir === 'rtl') {
style(listenerElement, {
left: 'auto',
right: 0,
});
} else {
style(listenerElement, {
left: 0,
right: 'auto',
});
}
dirCache = dir;
onSizeChangedCallbackProxy(true);
}
preventDefault(event);
stopPropagation(event);
return false;
})
);
}
offListeners.push(on(sizeObserver, animationStartEventName, appearCallback));
prependChildren(target, sizeObserver);
return function () {
runEach(offListeners);
removeElements(sizeObserver);
};
};
var index = function () {
return [
new Environment(),
getEnvironment(),
createSizeObserver(document.body, function () {}),
createDOM(
'\
<div class="os-host">\
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/index.ts
+4 -2
View File
@@ -1,5 +1,6 @@
import { createDOM } from 'support/dom';
import { Environment } from 'environment';
import { getEnvironment } from 'environment';
import { createSizeObserver } from 'overlayscrollbars/observers/SizeObserver';
const abc = {
a: 1,
@@ -9,7 +10,8 @@ const abc = {
export default () => {
return [
new Environment(),
getEnvironment(),
createSizeObserver(document.body, () => {}),
createDOM(
'\
<div class="os-host">\
packages/overlayscrollbars/src/overlayscrollbars/observers/SizeObserver.ts
+18 -3
View File
@@ -12,6 +12,7 @@ import {
on,
preventDefault,
stopPropagation,
addClass,
} from 'support';
import { getEnvironment } from 'environment';
@@ -20,6 +21,7 @@ const scrollEventName = 'scroll';
const scrollAmount = 3333333;
const ResizeObserverConstructor = jsAPI('ResizeObserver');
const classNameSizeObserver = 'os-size-observer';
const classNameSizeObserverAppear = `${classNameSizeObserver}-appear`;
const classNameSizeObserverListener = `${classNameSizeObserver}-listener`;
const classNameSizeObserverListenerItem = `${classNameSizeObserverListener}-item`;
const classNameSizeObserverListenerItemFinal = `${classNameSizeObserverListenerItem}-final`;
@@ -30,7 +32,13 @@ const getDirection = (elm: HTMLElement) => style(elm, 'direction');
// TODO:
// 1. MAYBE add comparison function to offsetSize etc.
export const createSizeObserver = (target: HTMLElement, onSizeChangedCallback: (direction?: boolean) => any, direction?: boolean) => {
export type SizeObserverOptions = { _direction?: boolean; _appear?: boolean };
export const createSizeObserver = (
target: HTMLElement,
onSizeChangedCallback: (direction?: boolean) => any,
options?: SizeObserverOptions
): (() => void) => {
const { _direction: direction = false, _appear: appear = false } = options || {};
const rtlScrollBehavior = getEnvironment()._rtlScrollBehavior;
const baseElements = createDOM(`<div class="${classNameSizeObserver}"><div class="${classNameSizeObserverListener}"></div></div>`);
const sizeObserver = baseElements[0] as HTMLElement;
@@ -49,6 +57,7 @@ export const createSizeObserver = (target: HTMLElement, onSizeChangedCallback: (
if (ResizeObserverConstructor) {
const resizeObserverInstance = new ResizeObserverConstructor(onSizeChangedCallbackProxy);
resizeObserverInstance.observe(listenerElement);
offListeners.push(() => resizeObserverInstance.disconnect());
} else {
const observerElementChildren = createDOM(
`<div class="${classNameSizeObserverListenerItem}" dir="ltr"><div class="${classNameSizeObserverListenerItem}"><div class="${classNameSizeObserverListenerItemFinal}"></div></div><div class="${classNameSizeObserverListenerItem}"><div class="${classNameSizeObserverListenerItemFinal}" style="width: 200%; height: 200%"></div></div></div>`
@@ -84,7 +93,9 @@ export const createSizeObserver = (target: HTMLElement, onSizeChangedCallback: (
if (scrollEvent && isDirty && !rAFId) {
cAF(rAFId);
rAFId = rAF(onResized);
} else if (!scrollEvent) onResized();
} else if (!scrollEvent) {
onResized();
}
reset();
if (scrollEvent) {
@@ -129,7 +140,11 @@ export const createSizeObserver = (target: HTMLElement, onSizeChangedCallback: (
);
}
offListeners.push(on(sizeObserver, animationStartEventName, appearCallback));
if (appear) {
addClass(sizeObserver, classNameSizeObserverAppear);
offListeners.push(on(sizeObserver, animationStartEventName, appearCallback));
}
prependChildren(target, sizeObserver);
return () => {
packages/overlayscrollbars/src/overlayscrollbars/observers/TrinsicObserver.ts
+53
View File
@@ -0,0 +1,53 @@
import { createDOM, offsetSize, jsAPI, runEach, prependChildren, removeElements } from 'support';
import { createSizeObserver } from 'overlayscrollbars/observers/SizeObserver';
const classNameTrinsicObserver = 'os-trinsic-observer';
const IntersectionObserverConstructor = jsAPI('IntersectionObserver');
export const createTrinsicObserver = (
target: HTMLElement,
onTrinsicChangedCallback: (widthIntrinsic: boolean, heightIntrinsic: boolean) => any
): (() => void) => {
const trinsicObserver = createDOM(`<div class="${classNameTrinsicObserver}"></div>`)[0] as HTMLElement;
const offListeners: (() => void)[] = [];
let heightIntrinsic = false;
if (IntersectionObserverConstructor) {
const intersectionObserverInstance: IntersectionObserver = new IntersectionObserverConstructor(
(entries: IntersectionObserverEntry[]) => {
if (entries && entries.length > 0) {
const last = entries.pop();
if (last) {
const newHeightIntrinsic = last.isIntersecting || last.intersectionRatio > 0;
if (newHeightIntrinsic !== heightIntrinsic) {
onTrinsicChangedCallback(false, newHeightIntrinsic);
heightIntrinsic = newHeightIntrinsic;
}
}
}
},
{ root: target }
);
intersectionObserverInstance.observe(trinsicObserver);
offListeners.push(() => intersectionObserverInstance.disconnect());
} else {
offListeners.push(
createSizeObserver(trinsicObserver, () => {
const newSize = offsetSize(trinsicObserver);
const newHeightIntrinsic = newSize.h === 0;
if (newHeightIntrinsic !== heightIntrinsic) {
onTrinsicChangedCallback(false, newSize.h === 0);
heightIntrinsic = newHeightIntrinsic;
}
})
);
}
prependChildren(target, trinsicObserver);
return () => {
runEach(offListeners);
removeElements(trinsicObserver);
};
};
packages/overlayscrollbars/src/sizeobserver.scss
+3
View File
@@ -25,6 +25,9 @@ $scrollbar-cushion: 100px;
height: 100%;
width: 100%;
z-index: -1;
}
.os-size-observer-appear {
animation-duration: 0.001s;
animation-name: os-size-observer-appear-animation;
}
packages/overlayscrollbars/src/trinsicobserver.scss
+26
View File
@@ -0,0 +1,26 @@
.os-trinsic-observer {
flex: none;
box-sizing: border-box;
position: relative;
max-width: 1px;
max-height: 1px;
padding: 0;
margin: 0;
border: none;
overflow: hidden;
z-index: -1;
height: 0;
top: calc(-100% + 1px);
&:not(:empty) {
height: calc(100% + 1px);
top: auto;
& > .os-size-observer {
width: 1000%;
height: 1000%;
min-height: 1px;
min-width: 1px;
}
}
}
packages/overlayscrollbars/tests/puppeteer/SizeObserver/index.browser.ts
+1 -1
View File
@@ -170,7 +170,7 @@ createSizeObserver(
}
});
},
true
{ _direction: true, _appear: true }
);
export { start };
packages/overlayscrollbars/types/environment/environment.d.ts
Vendored
+5 -9
View File
@@ -1,7 +1,6 @@
import { XY } from 'support';
declare type OnEnvironmentChanged = (env: Environment) => void;
export declare class Environment {
#private;
export declare type OnEnvironmentChanged = (env: Environment) => void;
export interface Environment {
_autoUpdateLoop: boolean;
_nativeScrollbarSize: XY;
_nativeScrollbarIsOverlaid: XY<boolean>;
@@ -10,10 +9,7 @@ export declare class Environment {
n: boolean;
i: boolean;
};
_supportPassiveEvents: boolean;
_supportResizeObserver: boolean;
constructor();
addListener(listener: OnEnvironmentChanged): void;
removeListener(listener: OnEnvironmentChanged): void;
_addListener(listener: OnEnvironmentChanged): void;
_removeListener(listener: OnEnvironmentChanged): void;
}
export {};
export declare const getEnvironment: () => Environment;
packages/overlayscrollbars/types/index.d.ts
Vendored
+1 -2
View File
@@ -1,3 +1,2 @@
import { Environment } from 'environment';
declare const _default: () => (Environment | readonly Node[])[];
declare const _default: () => (import("./environment").Environment | (() => void) | readonly Node[])[];
export default _default;
packages/overlayscrollbars/types/overlayscrollbars/observers/SizeObserver.d.ts
Vendored
+1
View File
@@ -0,0 +1 @@
export declare const createSizeObserver: (target: HTMLElement, onSizeChangedCallback: (direction?: boolean | undefined) => any, direction?: boolean | undefined) => () => void;
packages/overlayscrollbars/types/overlayscrollbars/observers/TrinsicObserver.d.ts
Vendored
+1
View File
@@ -0,0 +1 @@
export declare const hi: () => null;
packages/overlayscrollbars/types/overlayscrollbars/observers/createSizeObserver.d.ts
Vendored
-1
View File
@@ -1 +0,0 @@
export declare const createSizeObserver: (onSizeChangedCallback: () => void) => HTMLElement;
packages/overlayscrollbars/types/support/dom/dimensions.d.ts
Vendored
+4 -1
View File
@@ -1,4 +1,7 @@
import { WH } from 'support/dom';
export interface WH<T = number> {
w: T;
h: T;
}
export declare const windowSize: () => WH;
export declare const offsetSize: (elm: HTMLElement | null) => WH;
export declare const clientSize: (elm: HTMLElement | null) => WH;
packages/overlayscrollbars/types/support/dom/events.d.ts
Vendored
+9 -1
View File
@@ -1 +1,9 @@
export declare const on: (target: EventTarget, type: string, listener: EventListenerOrEventListenerObject | null, options: AddEventListenerOptions) => void;
export interface OnOptions {
_capture?: boolean;
_passive?: boolean;
_once?: boolean;
}
export declare const off: (target: EventTarget, eventNames: string, listener: EventListener, capture?: boolean | undefined) => void;
export declare const on: (target: EventTarget, eventNames: string, listener: EventListener, options?: OnOptions | undefined) => (() => void);
export declare const stopPropagation: (evt: Event) => void;
export declare const preventDefault: (evt: Event) => void;
packages/overlayscrollbars/types/support/dom/index.d.ts
Vendored
+1 -8
View File
@@ -2,15 +2,8 @@ export * from 'support/dom/attribute';
export * from 'support/dom/class';
export * from 'support/dom/create';
export * from 'support/dom/dimensions';
export * from 'support/dom/events';
export * from 'support/dom/style';
export * from 'support/dom/manipulation';
export * from 'support/dom/offset';
export * from 'support/dom/traversal';
export interface XY<T = number> {
x: T;
y: T;
}
export interface WH<T = number> {
w: T;
h: T;
}
packages/overlayscrollbars/types/support/dom/offset.d.ts
Vendored
+4 -1
View File
@@ -1,3 +1,6 @@
import { XY } from 'support/dom';
export interface XY<T = number> {
x: T;
y: T;
}
export declare const absoluteCoordinates: (elm: HTMLElement | null) => XY;
export declare const offsetCoordinates: (elm: HTMLElement | null) => XY;
packages/overlayscrollbars/types/support/utils/array.d.ts
Vendored
+3
View File
@@ -1,4 +1,5 @@
import { PlainObject } from 'typings';
declare type RunEachItem = ((...args: any) => any | any[]) | null | undefined;
export declare function each<T>(array: Array<T> | ReadonlyArray<T>, callback: (value: T, indexOrKey: number, source: Array<T>) => boolean | void): Array<T> | ReadonlyArray<T>;
export declare function each<T>(array: Array<T> | ReadonlyArray<T> | null, callback: (value: T, indexOrKey: number, source: Array<T>) => boolean | void): Array<T> | ReadonlyArray<T> | null;
export declare function each<T>(arrayLikeObject: ArrayLike<T>, callback: (value: T, indexOrKey: number, source: ArrayLike<T>) => boolean | void): ArrayLike<T>;
@@ -7,3 +8,5 @@ export declare function each(obj: PlainObject, callback: (value: any, indexOrKey
export declare function each(obj: PlainObject | null, callback: (value: any, indexOrKey: string, source: PlainObject) => boolean | void): PlainObject | null;
export declare const indexOf: <T = any>(arr: T[], item: T, fromIndex?: number | undefined) => number;
export declare const from: <T = any>(arr: ArrayLike<T>) => T[];
export declare const runEach: (arr: ArrayLike<RunEachItem> | Set<RunEachItem>) => void;
export {};