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

build

Browse Source
This commit is contained in:
Rene
2022-07-27 23:30:39 +02:00
parent 54083dc661
commit 24340971a9
8 changed files with 723 additions and 719 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/overlayscrollbars/dist/overlayscrollbars.css
Vendored
+6 -6
View File
@@ -164,10 +164,10 @@ body > .os-scrollbar {
top: 0; top: 0;
right: 0; } right: 0; }
.os-scrollbar-horizontal-rtl { .os-scrollbar-rtl.os-scrollbar-horizontal {
right: 0; } right: 0; }
.os-scrollbar-vertical-rtl { .os-scrollbar-rtl.os-scrollbar-vertical {
right: auto; right: auto;
left: 0; } left: 0; }
@@ -213,8 +213,8 @@ THEMES:
bottom: 10px; bottom: 10px;
width: 10px; } width: 10px; }
.os-theme-dark.os-scrollbar-horizontal-rtl, .os-theme-dark.os-scrollbar-rtl.os-scrollbar-horizontal,
.os-theme-light.os-scrollbar-horizontal-rtl { .os-theme-light.os-scrollbar-rtl.os-scrollbar-horizontal {
left: 10px; left: 10px;
right: 0; } right: 0; }
@@ -293,8 +293,8 @@ THEMES:
left: -6px; left: -6px;
right: -2px; } right: -2px; }
.os-theme-dark.os-scrollbar-vertical-rtl .os-scrollbar-handle:before, .os-theme-dark.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle:before,
.os-theme-light.os-scrollbar-vertical-rtl .os-scrollbar-handle:before { .os-theme-light.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle:before {
right: -6px; right: -6px;
left: -2px; } left: -2px; }
packages/overlayscrollbars/dist/overlayscrollbars.esm.js
Vendored
+208 -206
View File
@@ -502,6 +502,8 @@ const setCSSVal = (t, n, o) => {
} catch (s) {} } catch (s) {}
}; };
const directionIsRTL = t => "rtl" === style(t, "direction");
const topRightBottomLeft = (t, n, o) => { const topRightBottomLeft = (t, n, o) => {
const s = n ? `${n}-` : ""; const s = n ? `${n}-` : "";
const e = o ? `-${o}` : ""; const e = o ? `-${o}` : "";
@@ -690,17 +692,17 @@ const O = "overflowVisible";
const A = "scrollbarHidden"; const A = "scrollbarHidden";
const z = "updating"; const T = "updating";
const T = "os-padding"; const I = "os-padding";
const I = "os-viewport"; const z = "os-viewport";
const E = `${I}-arrange`; const E = `${z}-arrange`;
const L = "os-content"; const L = "os-content";
const H = `${I}-scrollbar-hidden`; const H = `${z}-scrollbar-hidden`;
const P = `os-overflow-visible`; const P = `os-overflow-visible`;
@@ -720,30 +722,32 @@ const j = "os-trinsic-observer";
const Y = "os-scrollbar"; const Y = "os-scrollbar";
const q = `${Y}-horizontal`; const q = `${Y}-rtl`;
const F = `${Y}-vertical`; const F = `${Y}-horizontal`;
const G = `${Y}-track`; const G = `${Y}-vertical`;
const N = `${Y}-handle`; const N = `${Y}-track`;
const U = `${Y}-visible`; const U = `${Y}-handle`;
const W = `${Y}-cornerless`; const W = `${Y}-visible`;
const X = `${Y}-transitionless`; const X = `${Y}-cornerless`;
const J = `${Y}-interaction`; const J = `${Y}-transitionless`;
const K = `${Y}-unusable`; const K = `${Y}-interaction`;
const Z = `${Y}-auto-hidden`; const Z = `${Y}-unusable`;
const Q = `${G}-interactive`; const Q = `${Y}-auto-hidden`;
const tt = `${N}-interactive`; const tt = `${N}-interactive`;
const nt = `${U}-interactive`;
const opsStringify = t => JSON.stringify(t, ((t, n) => { const opsStringify = t => JSON.stringify(t, ((t, n) => {
if (isFunction(n)) { if (isFunction(n)) {
throw new Error; throw new Error;
@@ -751,7 +755,7 @@ const opsStringify = t => JSON.stringify(t, ((t, n) => {
return n; return n;
})); }));
const nt = { const ot = {
paddingAbsolute: false, paddingAbsolute: false,
showNativeOverlaidScrollbars: false, showNativeOverlaidScrollbars: false,
updating: { updating: {
@@ -800,19 +804,19 @@ const getOptionsDiff = (t, n) => {
return o; return o;
}; };
const ot = {}; const st = {};
const getPlugins = () => assignDeep({}, ot); const getPlugins = () => assignDeep({}, st);
const addPlugin = t => { const addPlugin = t => {
each(isArray(t) ? t : [ t ], (t => { each(isArray(t) ? t : [ t ], (t => {
each(keys(t), (n => { each(keys(t), (n => {
ot[n] = t[n]; st[n] = t[n];
})); }));
})); }));
}; };
const st = { const et = {
boolean: "__TPL_boolean_TYPE__", boolean: "__TPL_boolean_TYPE__",
number: "__TPL_number_TYPE__", number: "__TPL_number_TYPE__",
string: "__TPL_string_TYPE__", string: "__TPL_string_TYPE__",
@@ -822,52 +826,52 @@ const st = {
null: "__TPL_null_TYPE__" null: "__TPL_null_TYPE__"
}; };
const et = st.number; const ct = et.number;
const ct = st.boolean; const rt = et.boolean;
const rt = [ st.array, st.null ]; const it = [ et.array, et.null ];
const it = "hidden scroll visible visible-hidden"; const lt = "hidden scroll visible visible-hidden";
const lt = "visible hidden auto"; const at = "visible hidden auto";
const at = "never scroll leavemove"; const ut = "never scroll leavemove";
({ ({
paddingAbsolute: ct, paddingAbsolute: rt,
showNativeOverlaidScrollbars: ct, showNativeOverlaidScrollbars: rt,
updating: { updating: {
elementEvents: rt, elementEvents: it,
attributes: rt, attributes: it,
debounce: [ st.number, st.array, st.null ], debounce: [ et.number, et.array, et.null ],
ignoreMutation: [ st.function, st.null ] ignoreMutation: [ et.function, et.null ]
}, },
overflow: { overflow: {
x: it, x: lt,
y: it y: lt
}, },
scrollbars: { scrollbars: {
theme: [ st.string, st.null ], theme: [ et.string, et.null ],
visibility: lt, visibility: at,
autoHide: at, autoHide: ut,
autoHideDelay: et, autoHideDelay: ct,
dragScroll: ct, dragScroll: rt,
clickScroll: ct, clickScroll: rt,
pointers: [ st.array, st.null ] pointers: [ et.array, et.null ]
} }
}); });
const ut = "__osOptionsValidationPlugin"; const ft = "__osOptionsValidationPlugin";
const ft = 3333333; const dt = 3333333;
const dt = "scroll"; const _t = "scroll";
const _t = "__osSizeObserverPlugin"; const ht = "__osSizeObserverPlugin";
const ht = { const gt = {
[_t]: { [ht]: {
O: (t, n, o) => { O: (t, n, o) => {
const s = createDOM(`<div class="${B}" dir="ltr"><div class="${B}"><div class="${V}"></div></div><div class="${B}"><div class="${V}" style="width: 200%; height: 200%"></div></div></div>`); const s = createDOM(`<div class="${B}" dir="ltr"><div class="${B}"><div class="${V}"></div></div><div class="${B}"><div class="${V}" style="width: 200%; height: 200%"></div></div></div>`);
appendChildren(t, s); appendChildren(t, s);
@@ -881,10 +885,10 @@ const ht = {
let u = false; let u = false;
let _; let _;
const reset = () => { const reset = () => {
scrollLeft(r, ft); scrollLeft(r, dt);
scrollTop(r, ft); scrollTop(r, dt);
scrollLeft(c, ft); scrollLeft(c, dt);
scrollTop(c, ft); scrollTop(c, dt);
}; };
const onResized = t => { const onResized = t => {
_ = 0; _ = 0;
@@ -907,10 +911,10 @@ const ht = {
} }
reset(); reset();
}; };
const h = push([], [ on(r, dt, onScroll), on(c, dt, onScroll) ]); const h = push([], [ on(r, _t, onScroll), on(c, _t, onScroll) ]);
style(i, { style(i, {
width: ft, width: dt,
height: ft height: dt
}); });
d(reset); d(reset);
return [ o ? onScroll.bind(0, false) : reset, h ]; return [ o ? onScroll.bind(0, false) : reset, h ];
@@ -918,9 +922,9 @@ const ht = {
} }
}; };
let gt = 0; let vt = 0;
const {round: vt, abs: wt} = Math; const {round: wt, abs: pt} = Math;
const getWindowDPR = () => { const getWindowDPR = () => {
const t = window.screen.deviceXDPI || 0; const t = window.screen.deviceXDPI || 0;
@@ -929,22 +933,22 @@ const getWindowDPR = () => {
}; };
const diffBiggerThanOne = (t, n) => { const diffBiggerThanOne = (t, n) => {
const o = wt(t); const o = pt(t);
const s = wt(n); const s = pt(n);
return !(o === s || o + 1 === s || o - 1 === s); return !(o === s || o + 1 === s || o - 1 === s);
}; };
const pt = "__osScrollbarsHidingPlugin"; const bt = "__osScrollbarsHidingPlugin";
const bt = { const yt = {
[pt]: { [bt]: {
A: t => { A: t => {
const {T: n, I: o, L: s} = t; const {T: n, I: o, L: s} = t;
const e = !s && !n && (o.x || o.y); const e = !s && !n && (o.x || o.y);
const c = e ? document.createElement("style") : false; const c = e ? document.createElement("style") : false;
if (c) { if (c) {
attr(c, "id", `${E}-${gt}`); attr(c, "id", `${E}-${vt}`);
gt++; vt++;
} }
return c; return c;
}, },
@@ -1034,12 +1038,12 @@ const bt = {
return; return;
} }
const i = { const i = {
w: wt(r.w), w: pt(r.w),
h: wt(r.h) h: pt(r.h)
}; };
const l = { const l = {
w: wt(vt(c.w / (t.w / 100))), w: pt(wt(c.w / (t.w / 100))),
h: wt(vt(c.h / (t.h / 100))) h: pt(wt(c.h / (t.h / 100)))
}; };
const a = getWindowDPR(); const a = getWindowDPR();
const u = i.w > 2 && i.h > 2; const u = i.w > 2 && i.h > 2;
@@ -1060,7 +1064,7 @@ const bt = {
} }
}; };
let yt; let mt;
const getNativeScrollbarSize = (t, n, o, s) => { const getNativeScrollbarSize = (t, n, o, s) => {
appendChildren(t, n); appendChildren(t, n);
@@ -1143,7 +1147,7 @@ const createEnvironment = () => {
body: null body: null
} }
}; };
const d = assignDeep({}, nt); const d = assignDeep({}, ot);
const _ = { const _ = {
k: l, k: l,
I: u, I: u,
@@ -1168,7 +1172,7 @@ const createEnvironment = () => {
if (!a && (!u.x || !u.y)) { if (!a && (!u.x || !u.y)) {
let t; let t;
window.addEventListener("resize", (() => { window.addEventListener("resize", (() => {
const n = getPlugins()[pt]; const n = getPlugins()[bt];
t = t || n && n.R(); t = t || n && n.R();
t && t(_, r, c.bind(0, "_")); t && t(_, r, c.bind(0, "_"));
})); }));
@@ -1177,10 +1181,10 @@ const createEnvironment = () => {
}; };
const getEnvironment = () => { const getEnvironment = () => {
if (!yt) { if (!mt) {
yt = createEnvironment(); mt = createEnvironment();
} }
return yt; return mt;
}; };
const resolveInitialization = (t, n) => isFunction(t) ? t.apply(0, n) : t; const resolveInitialization = (t, n) => isFunction(t) ? t.apply(0, n) : t;
@@ -1209,7 +1213,7 @@ const cancelInitialization = (t, n) => {
return !!d || !!_; return !!d || !!_;
}; };
const mt = createDiv.bind(0, ""); const St = createDiv.bind(0, "");
const unwrap = t => { const unwrap = t => {
appendChildren(parent(t), contents(t)); appendChildren(parent(t), contents(t));
@@ -1224,7 +1228,7 @@ const addDataAttrHost = (t, n) => {
const createStructureSetupElements = t => { const createStructureSetupElements = t => {
const n = getEnvironment(); const n = getEnvironment();
const {Y: o, T: s} = n; const {Y: o, T: s} = n;
const e = getPlugins()[pt]; const e = getPlugins()[bt];
const c = e && e.A; const c = e && e.A;
const {host: r, viewport: i, padding: l, content: a} = o(); const {host: r, viewport: i, padding: l, content: a} = o();
const u = isHTMLElement(t); const u = isHTMLElement(t);
@@ -1237,14 +1241,14 @@ const createStructureSetupElements = t => {
const y = p.defaultView; const y = p.defaultView;
const m = staticInitializationElement.bind(0, [ v ]); const m = staticInitializationElement.bind(0, [ v ]);
const S = dynamicInitializationElement.bind(0, [ v ]); const S = dynamicInitializationElement.bind(0, [ v ]);
const O = m(mt, i, h); const O = m(St, i, h);
const A = O === v; const A = O === v;
const z = { const T = {
J: v, J: v,
K: w ? m(mt, r, d) : v, K: w ? m(St, r, d) : v,
Z: O, Z: O,
tt: !A && S(mt, l, _), tt: !A && S(St, l, _),
nt: !A && S(mt, a, g), nt: !A && S(St, a, g),
ot: !A && !s && c && c(n), ot: !A && !s && c && c(n),
st: b ? p.documentElement : O, st: b ? p.documentElement : O,
et: b ? p : O, et: b ? p : O,
@@ -1257,20 +1261,20 @@ const createStructureSetupElements = t => {
ut: (t, n) => A ? hasAttrClass(O, x, n) : hasClass(O, t), ut: (t, n) => A ? hasAttrClass(O, x, n) : hasClass(O, t),
ft: (t, n, o) => A ? attrClass(O, x, n, o) : (o ? addClass : removeClass)(O, t) ft: (t, n, o) => A ? attrClass(O, x, n, o) : (o ? addClass : removeClass)(O, t)
}; };
const E = keys(z).reduce(((t, n) => { const E = keys(T).reduce(((t, n) => {
const o = z[n]; const o = T[n];
return push(t, o && !parent(o) ? o : false); return push(t, o && !parent(o) ? o : false);
}), []); }), []);
const elementIsGenerated = t => t ? indexOf(E, t) > -1 : null; const elementIsGenerated = t => t ? indexOf(E, t) > -1 : null;
const {J: P, K: D, tt: M, Z: R, nt: k, ot: B} = z; const {J: P, K: D, tt: M, Z: R, nt: k, ot: B} = T;
const V = []; const V = [];
const j = w && elementIsGenerated(D); const j = w && elementIsGenerated(D);
const Y = w ? P : contents([ k, R, M, D, P ].find((t => false === elementIsGenerated(t)))); const Y = w ? P : contents([ k, R, M, D, P ].find((t => false === elementIsGenerated(t))));
const q = k || R; const q = k || R;
const appendElements = () => { const appendElements = () => {
const t = addDataAttrHost(D, A ? "viewport" : "host"); const t = addDataAttrHost(D, A ? "viewport" : "host");
const n = addClass(M, T); const n = addClass(M, I);
const o = addClass(R, !A && I); const o = addClass(R, !A && z);
const e = addClass(k, L); const e = addClass(k, L);
const c = b ? addClass(parent(v), H) : noop; const c = b ? addClass(parent(v), H) : noop;
if (j) { if (j) {
@@ -1310,7 +1314,7 @@ const createStructureSetupElements = t => {
push(V, removeElements.bind(0, B)); push(V, removeElements.bind(0, B));
} }
}; };
return [ z, appendElements, runEachAndClear.bind(0, V) ]; return [ T, appendElements, runEachAndClear.bind(0, V) ];
}; };
const createTrinsicUpdateSegment = (t, n) => { const createTrinsicUpdateSegment = (t, n) => {
@@ -1384,17 +1388,17 @@ const createPaddingUpdateSegment = (t, n) => {
}; };
}; };
const {max: St} = Math; const {max: xt} = Math;
const xt = St.bind(0, 0); const $t = xt.bind(0, 0);
const $t = "visible"; const Ct = "visible";
const Ct = "hidden"; const Ot = "hidden";
const Ot = 42; const At = 42;
const At = { const Tt = {
u: equalWH, u: equalWH,
o: { o: {
w: 0, w: 0,
@@ -1402,19 +1406,19 @@ const At = {
} }
}; };
const zt = { const It = {
u: equalXY, u: equalXY,
o: { o: {
x: Ct, x: Ot,
y: Ct y: Ot
} }
}; };
const getOverflowAmount = (t, n) => { const getOverflowAmount = (t, n) => {
const o = window.devicePixelRatio % 1 !== 0 ? 1 : 0; const o = window.devicePixelRatio % 1 !== 0 ? 1 : 0;
const s = { const s = {
w: xt(t.w - n.w), w: $t(t.w - n.w),
h: xt(t.h - n.h) h: $t(t.h - n.h)
}; };
return { return {
w: s.w > o ? s.w : 0, w: s.w > o ? s.w : 0,
@@ -1424,19 +1428,19 @@ const getOverflowAmount = (t, n) => {
const conditionalClass = (t, n, o) => o ? addClass(t, n) : removeClass(t, n); const conditionalClass = (t, n, o) => o ? addClass(t, n) : removeClass(t, n);
const overflowIsVisible = t => 0 === t.indexOf($t); const overflowIsVisible = t => 0 === t.indexOf(Ct);
const createOverflowUpdateSegment = (t, n) => { const createOverflowUpdateSegment = (t, n) => {
const [o, s] = n; const [o, s] = n;
const {K: e, tt: c, Z: r, ot: i, X: l, ft: a} = t; const {K: e, tt: c, Z: r, ot: i, X: l, ft: a} = t;
const {k: u, V: f, T: d, I: _} = getEnvironment(); const {k: u, V: f, T: d, I: _} = getEnvironment();
const h = getPlugins()[pt]; const h = getPlugins()[bt];
const g = !l && !d && (_.x || _.y); const g = !l && !d && (_.x || _.y);
const [v, w] = createCache(At, fractionalSize.bind(0, r)); const [v, w] = createCache(Tt, fractionalSize.bind(0, r));
const [p, b] = createCache(At, scrollSize.bind(0, r)); const [p, b] = createCache(Tt, scrollSize.bind(0, r));
const [y, m] = createCache(At); const [y, m] = createCache(Tt);
const [S, z] = createCache(At); const [S, T] = createCache(Tt);
const [T] = createCache(zt); const [I] = createCache(It);
const fixFlexboxGlue = (t, n) => { const fixFlexboxGlue = (t, n) => {
style(r, { style(r, {
height: "" height: ""
@@ -1455,7 +1459,7 @@ const createOverflowUpdateSegment = (t, n) => {
} }
}; };
const getViewportOverflowState = (t, n) => { const getViewportOverflowState = (t, n) => {
const o = !d && !t ? Ot : 0; const o = !d && !t ? At : 0;
const getStatePerAxis = (t, s, e) => { const getStatePerAxis = (t, s, e) => {
const c = style(r, t); const c = style(r, t);
const i = n ? n[t] : c; const i = n ? n[t] : c;
@@ -1489,7 +1493,7 @@ const createOverflowUpdateSegment = (t, n) => {
const setViewportOverflowState = (t, n, o, s) => { const setViewportOverflowState = (t, n, o, s) => {
const setAxisOverflowStyle = (t, n) => { const setAxisOverflowStyle = (t, n) => {
const o = overflowIsVisible(t); const o = overflowIsVisible(t);
const s = n && o && t.replace(`${$t}-`, "") || ""; const s = n && o && t.replace(`${Ct}-`, "") || "";
return [ n && !o ? t : "", overflowIsVisible(s) ? "hidden" : s ]; return [ n && !o ? t : "", overflowIsVisible(s) ? "hidden" : s ];
}; };
const [e, c] = setAxisOverflowStyle(o.x, n.x); const [e, c] = setAxisOverflowStyle(o.x, n.x);
@@ -1517,7 +1521,7 @@ const createOverflowUpdateSegment = (t, n) => {
e.paddingBottom = w + (i ? a : 0); e.paddingBottom = w + (i ? a : 0);
} }
}; };
const [I, E] = h ? h.H(g, f, r, i, o, getViewportOverflowState, hideNativeScrollbars) : [ () => g, () => [ noop ] ]; const [z, E] = h ? h.H(g, f, r, i, o, getViewportOverflowState, hideNativeScrollbars) : [ () => g, () => [ noop ] ];
return (t, n, i) => { return (t, n, i) => {
const {ht: u, $t: h, gt: g, yt: L, _t: D, wt: M} = t; const {ht: u, $t: h, gt: g, yt: L, _t: D, wt: M} = t;
const {dt: R, vt: k} = o(); const {dt: R, vt: k} = o();
@@ -1531,7 +1535,7 @@ const createOverflowUpdateSegment = (t, n) => {
let W = w(i); let W = w(i);
let X = b(i); let X = b(i);
let J = m(i); let J = m(i);
let K = z(i); let K = T(i);
let Z; let Z;
if (V && d) { if (V && d) {
a(H, A, !q); a(H, A, !q);
@@ -1551,17 +1555,17 @@ const createOverflowUpdateSegment = (t, n) => {
let u = e; let u = e;
let f = l; let f = l;
t(); t();
if ((c || s || V) && n && !q && I(n, e, o, k)) { if ((c || s || V) && n && !q && z(n, e, o, k)) {
f = clientSize(r); f = clientSize(r);
u = scrollSize(r); u = scrollSize(r);
} }
const d = { const d = {
w: xt(St(e.w, u.w) + o.w), w: $t(xt(e.w, u.w) + o.w),
h: xt(St(e.h, u.h) + o.h) h: $t(xt(e.h, u.h) + o.h)
}; };
const _ = { const _ = {
w: xt(f.w + xt(l.w - e.w) + o.w), w: $t(f.w + $t(l.w - e.w) + o.w),
h: xt(f.h + xt(l.h - e.h) + o.h) h: $t(f.h + $t(l.h - e.h) + o.h)
}; };
K = S(_); K = S(_);
J = y(getOverflowAmount(d, _), i); J = y(getOverflowAmount(d, _), i);
@@ -1585,7 +1589,7 @@ const createOverflowUpdateSegment = (t, n) => {
overflowX: "" overflowX: ""
}; };
const n = setViewportOverflowState(q, it, j, t); const n = setViewportOverflowState(q, it, j, t);
const o = I(n, st, ct, k); const o = z(n, st, ct, k);
if (!l) { if (!l) {
hideNativeScrollbars(n, k, o, t); hideNativeScrollbars(n, k, o, t);
} }
@@ -1602,7 +1606,7 @@ const createOverflowUpdateSegment = (t, n) => {
attrClass(e, x, O, lt); attrClass(e, x, O, lt);
conditionalClass(c, P, lt); conditionalClass(c, P, lt);
!l && conditionalClass(r, P, U); !l && conditionalClass(r, P, U);
const [at, ut] = T(getViewportOverflowState(q).xt); const [at, ut] = I(getViewportOverflowState(q).xt);
s({ s({
xt: at, xt: at,
Ct: { Ct: {
@@ -1616,9 +1620,9 @@ const createOverflowUpdateSegment = (t, n) => {
At: it At: it
}); });
return { return {
zt: ut, Tt: ut,
Tt: tt, It: tt,
It: ot zt: ot
}; };
}; };
}; };
@@ -1646,41 +1650,39 @@ const createStructureSetupUpdate = (t, n) => {
yt: false, yt: false,
wt: false, wt: false,
_t: false, _t: false,
Tt: false,
It: false, It: false,
zt: false, zt: false,
Tt: false,
$t: false, $t: false,
gt: false gt: false
}, n), {}, e); }, n), {}, e);
const a = i || !r; const a = i || !r;
const u = a && scrollLeft(o); const u = a && scrollLeft(o);
const f = a && scrollTop(o); const f = a && scrollTop(o);
s("", z, true); s("", T, true);
let d = c; let d = c;
each(l, (n => { each(l, (n => {
d = prepareUpdateHints(d, n(d, t, !!e) || {}, e); d = prepareUpdateHints(d, n(d, t, !!e) || {}, e);
})); }));
scrollLeft(o, u); scrollLeft(o, u);
scrollTop(o, f); scrollTop(o, f);
s("", z); s("", T);
return d; return d;
}; };
}; };
const Tt = 3333333; const zt = 3333333;
const getElmDirectionIsRTL = t => "rtl" === style(t, "direction");
const domRectHasDimensions = t => t && (t.height || t.width); const domRectHasDimensions = t => t && (t.height || t.width);
const createSizeObserver = (t, n, o) => { const createSizeObserver = (t, n, o) => {
const {Et: s = false, Lt: e = false} = o || {}; const {Et: s = false, Lt: e = false} = o || {};
const c = getPlugins()[_t]; const c = getPlugins()[ht];
const {B: r} = getEnvironment(); const {B: r} = getEnvironment();
const i = createDOM(`<div class="${D}"><div class="${R}"></div></div>`); const i = createDOM(`<div class="${D}"><div class="${R}"></div></div>`);
const l = i[0]; const l = i[0];
const a = l.firstChild; const a = l.firstChild;
const f = getElmDirectionIsRTL.bind(0, l); const f = directionIsRTL.bind(0, t);
const [d] = createCache({ const [d] = createCache({
o: void 0, o: void 0,
_: true, _: true,
@@ -1705,9 +1707,9 @@ const createSizeObserver = (t, n, o) => {
i = true === t; i = true === t;
} }
if (s && a) { if (s && a) {
const n = e ? t[0] : getElmDirectionIsRTL(l); const n = e ? t[0] : directionIsRTL(l);
scrollLeft(l, n ? r.n ? -Tt : r.i ? 0 : Tt : Tt); scrollLeft(l, n ? r.n ? -zt : r.i ? 0 : zt : zt);
scrollTop(l, Tt); scrollTop(l, zt);
} }
if (!c) { if (!c) {
n({ n({
@@ -1719,7 +1721,6 @@ const createSizeObserver = (t, n, o) => {
}; };
const _ = []; const _ = [];
let h = e ? onSizeChangedCallbackProxy : false; let h = e ? onSizeChangedCallbackProxy : false;
let g;
return [ () => { return [ () => {
runEachAndClear(_); runEachAndClear(_);
removeElements(l); removeElements(l);
@@ -1736,10 +1737,9 @@ const createSizeObserver = (t, n, o) => {
push(_, n); push(_, n);
} }
if (s) { if (s) {
g = createCache({ const [t] = createCache({
o: !f() o: !f()
}, f); }, f);
const [t] = g;
push(_, on(l, "scroll", (n => { push(_, on(l, "scroll", (n => {
const o = t(); const o = t();
const [s, e] = o; const [s, e] = o;
@@ -1953,15 +1953,15 @@ const createDOMObserver = (t, n, o, s) => {
} ]; } ];
}; };
const It = `[${x}]`; const Et = `[${x}]`;
const Et = `.${I}`; const Lt = `.${z}`;
const Lt = [ "tabindex" ]; const Ht = [ "tabindex" ];
const Ht = [ "wrap", "cols", "rows" ]; const Pt = [ "wrap", "cols", "rows" ];
const Pt = [ "id", "class", "style", "open" ]; const Dt = [ "id", "class", "style", "open" ];
const createStructureSetupObservers = (t, n, o) => { const createStructureSetupObservers = (t, n, o) => {
let s; let s;
@@ -1983,13 +1983,13 @@ const createStructureSetupObservers = (t, n, o) => {
const s = n && scrollTop(l); const s = n && scrollTop(l);
h(P, O); h(P, O);
h(E, ""); h(E, "");
h("", z, true); h("", T, true);
const e = scrollSize(a); const e = scrollSize(a);
const c = scrollSize(l); const c = scrollSize(l);
const r = fractionalSize(l); const r = fractionalSize(l);
h(P, O, t); h(P, O, t);
h(E, "", n); h(E, "", n);
h("", z); h("", T);
scrollLeft(l, o); scrollLeft(l, o);
scrollTop(l, s); scrollTop(l, s);
return { return {
@@ -1997,7 +1997,7 @@ const createStructureSetupObservers = (t, n, o) => {
h: c.h + e.h + r.h h: c.h + e.h + r.h
}; };
})); }));
const w = f ? Ht : Pt.concat(Ht); const w = f ? Pt : Dt.concat(Pt);
const p = debounce(o, { const p = debounce(o, {
g: () => s, g: () => s,
v: () => e, v: () => e,
@@ -2011,8 +2011,8 @@ const createStructureSetupObservers = (t, n, o) => {
} }
}); });
const updateViewportAttrsFromHost = t => { const updateViewportAttrsFromHost = t => {
each(t || Lt, (t => { each(t || Ht, (t => {
if (indexOf(Lt, t) > -1) { if (indexOf(Ht, t) > -1) {
const n = attr(i, t); const n = attr(i, t);
if (isString(n)) { if (isString(n)) {
attr(l, t, n); attr(l, t, n);
@@ -2076,8 +2076,8 @@ const createStructureSetupObservers = (t, n, o) => {
Et: true Et: true
}) : [ noop, noop ]; }) : [ noop, noop ];
const [$, C] = createDOMObserver(i, false, onHostMutation, { const [$, C] = createDOMObserver(i, false, onHostMutation, {
Dt: Pt, Dt: Dt,
Pt: Pt.concat(Lt) Pt: Dt.concat(Ht)
}); });
const A = d && u && new u(onSizeChanged.bind(0, { const A = d && u && new u(onSizeChanged.bind(0, {
ht: true ht: true
@@ -2124,10 +2124,10 @@ const createStructureSetupObservers = (t, n, o) => {
Dt: w.concat(o || []), Dt: w.concat(o || []),
Pt: w.concat(o || []), Pt: w.concat(o || []),
Mt: i, Mt: i,
Rt: It, Rt: Et,
Bt: (t, n) => { Bt: (t, n) => {
const {target: o, attributeName: s} = t; const {target: o, attributeName: s} = t;
const e = !n && s ? liesBetween(o, It, Et) : false; const e = !n && s ? liesBetween(o, Et, Lt) : false;
return e || !!closest(o, `.${Y}`) || !!ignoreMutationFromOptions(t); return e || !!closest(o, `.${Y}`) || !!ignoreMutationFromOptions(t);
} }
}); });
@@ -2150,12 +2150,12 @@ const createStructureSetupObservers = (t, n, o) => {
} ]; } ];
}; };
const Dt = { const Mt = {
x: 0, x: 0,
y: 0 y: 0
}; };
const Mt = { const Rt = {
tt: { tt: {
t: 0, t: 0,
r: 0, r: 0,
@@ -2172,8 +2172,8 @@ const Mt = {
paddingBottom: 0, paddingBottom: 0,
paddingLeft: 0 paddingLeft: 0
}, },
Ct: Dt, Ct: Mt,
Ot: Dt, Ot: Mt,
xt: { xt: {
x: "hidden", x: "hidden",
y: "hidden" y: "hidden"
@@ -2188,7 +2188,7 @@ const Mt = {
const createStructureSetup = (t, n) => { const createStructureSetup = (t, n) => {
const o = createOptionCheck(n, {}); const o = createOptionCheck(n, {});
const s = createState(Mt); const s = createState(Rt);
const [e, c, r] = createEventListenerHub(); const [e, c, r] = createEventListenerHub();
const [i] = s; const [i] = s;
const [l, a, u] = createStructureSetupElements(t); const [l, a, u] = createStructureSetupElements(t);
@@ -2222,7 +2222,7 @@ const createStructureSetup = (t, n) => {
} ]; } ];
}; };
const {round: Rt, abs: kt} = Math; const {round: kt} = Math;
const getPageOffset = t => ({ const getPageOffset = t => ({
x: t.pageX, x: t.pageX,
@@ -2233,8 +2233,8 @@ const getScale = t => {
const {width: n, height: o} = getBoundingClientRect(t); const {width: n, height: o} = getBoundingClientRect(t);
const {w: s, h: e} = offsetSize(t); const {w: s, h: e} = offsetSize(t);
return { return {
x: Rt(n) / s || 1, x: kt(n) / s || 1,
y: Rt(o) / e || 1 y: kt(o) / e || 1
}; };
}; };
@@ -2264,9 +2264,9 @@ const createDragScrollingEvents = (t, n, o, s, e, c) => {
const v = offsetSize(l)[d] - offsetSize(i)[d]; const v = offsetSize(l)[d] - offsetSize(i)[d];
const w = g / v; const w = g / v;
const p = w * h[f]; const p = w * h[f];
const b = "rtl" === style(a, "direction"); const b = directionIsRTL(a);
const y = b && c ? r.n || r.i ? 1 : -1 : 1; const y = b && c ? r.n || r.i ? 1 : -1 : 1;
s[u] = kt(t) + p * y; s[u] = t + p * y;
}; };
return on(i, "pointerdown", (o => { return on(i, "pointerdown", (o => {
if (continuePointerDown(o, t, "dragScroll")) { if (continuePointerDown(o, t, "dragScroll")) {
@@ -2289,9 +2289,9 @@ const createDragScrollingEvents = (t, n, o, s, e, c) => {
const createScrollbarsSetupEvents = (t, n) => (o, s, e, c, r) => { const createScrollbarsSetupEvents = (t, n) => (o, s, e, c, r) => {
const {Gt: i} = o; const {Gt: i} = o;
return runEachAndClear.bind(0, [ on(i, "pointerenter", (() => { return runEachAndClear.bind(0, [ on(i, "pointerenter", (() => {
s(J, true); s(K, true);
})), on(i, "pointerleave pointercancel", (() => { })), on(i, "pointerleave pointercancel", (() => {
s(J); s(K);
})), createRootClickStopPropagationEvents(i, e), createDragScrollingEvents(t, e, o, c, n, r) ]); })), createRootClickStopPropagationEvents(i, e), createDragScrollingEvents(t, e, o, c, n, r) ]);
}; };
@@ -2356,7 +2356,7 @@ const createScrollbarsSetupElements = (t, n, o) => {
const s = o ? "X" : "Y"; const s = o ? "X" : "Y";
scrollbarsHandleStyle(t, (t => { scrollbarsHandleStyle(t, (t => {
const {qt: e, Ft: c, Gt: r} = t; const {qt: e, Ft: c, Gt: r} = t;
const i = getScrollbarHandleOffsetRatio(e, c, u, n, "rtl" === style(r, "direction"), o); const i = getScrollbarHandleOffsetRatio(e, c, u, n, directionIsRTL(r), o);
const l = i === i; const l = i === i;
return [ e, { return [ e, {
transform: l ? `translate${s}(${(100 * i).toFixed(3)}%)` : "" transform: l ? `translate${s}(${(100 * i).toFixed(3)}%)` : ""
@@ -2382,12 +2382,12 @@ const createScrollbarsSetupElements = (t, n, o) => {
scrollbarStructureRefreshHandleOffset(v, t); scrollbarStructureRefreshHandleOffset(v, t);
}; };
const generateScrollbarDOM = t => { const generateScrollbarDOM = t => {
const n = t ? q : F; const n = t ? F : G;
const s = t ? g : v; const s = t ? g : v;
const e = isEmptyArray(s) ? X : ""; const e = isEmptyArray(s) ? J : "";
const r = createDiv(`${Y} ${n} ${e}`); const r = createDiv(`${Y} ${n} ${e}`);
const i = createDiv(G); const i = createDiv(N);
const l = createDiv(N); const l = createDiv(U);
const a = { const a = {
Gt: r, Gt: r,
Ft: i, Ft: i,
@@ -2405,7 +2405,7 @@ const createScrollbarsSetupElements = (t, n, o) => {
appendChildren(d, g[0].Gt); appendChildren(d, g[0].Gt);
appendChildren(d, v[0].Gt); appendChildren(d, v[0].Gt);
_((() => { _((() => {
scrollbarsAddRemoveClass(X); scrollbarsAddRemoveClass(J);
}), 300); }), 300);
}; };
w(); w();
@@ -2452,13 +2452,13 @@ const createScrollbarsSetup = (t, n, o) => {
const [w, p] = createSelfCancelTimeout(100); const [w, p] = createSelfCancelTimeout(100);
const [b, y] = createSelfCancelTimeout((() => l)); const [b, y] = createSelfCancelTimeout((() => l));
const [m, S, x] = createScrollbarsSetupElements(t, o.Yt, createScrollbarsSetupEvents(n, o)); const [m, S, x] = createScrollbarsSetupElements(t, o.Yt, createScrollbarsSetupEvents(n, o));
const {K: $, Z: C, st: O, et: A, X: z, W: T} = o.Yt; const {K: $, Z: C, st: O, et: A, X: T, W: I} = o.Yt;
const {Xt: I, Qt: E, Wt: L, Nt: H, Ut: P} = m; const {Xt: z, Qt: E, Wt: L, Nt: H, Ut: P} = m;
const {Zt: D} = I; const {Zt: D} = z;
const {Zt: M} = E; const {Zt: M} = E;
const styleScrollbarPosition = t => { const styleScrollbarPosition = t => {
const {Gt: n} = t; const {Gt: n} = t;
const o = z && !T && parent(n) === C && n; const o = T && !I && parent(n) === C && n;
return [ o, { return [ o, {
transform: o ? `translate(${scrollLeft(O)}px, ${scrollTop(O)}px)` : "" transform: o ? `translate(${scrollLeft(O)}px, ${scrollTop(O)}px)` : ""
} ]; } ];
@@ -2466,9 +2466,9 @@ const createScrollbarsSetup = (t, n, o) => {
const manageScrollbarsAutoHide = (t, n) => { const manageScrollbarsAutoHide = (t, n) => {
y(); y();
if (t) { if (t) {
L(Z); L(Q);
} else { } else {
const hide = () => L(Z, true); const hide = () => L(Q, true);
if (l > 0 && !n) { if (l > 0 && !n) {
b(hide); b(hide);
} else { } else {
@@ -2501,59 +2501,60 @@ const createScrollbarsSetup = (t, n, o) => {
c && !r && manageScrollbarsAutoHide(false); c && !r && manageScrollbarsAutoHide(false);
})); }));
})); }));
z && D(styleScrollbarPosition); T && D(styleScrollbarPosition);
z && M(styleScrollbarPosition); T && M(styleScrollbarPosition);
})) ]; })) ];
const k = u.bind(0); const k = u.bind(0);
k.Yt = m; k.Yt = m;
k.jt = S; k.jt = S;
return [ (t, r, a) => { return [ (t, r, a) => {
const {Tt: u, It: f, zt: d, wt: _} = a; const {It: u, zt: f, Tt: d, wt: _} = a;
const h = createOptionCheck(n, t, r); const h = createOptionCheck(n, t, r);
const g = o(); const g = o();
const {Ot: v, xt: w} = g; const {Ot: v, xt: w, vt: p} = g;
const [p, b] = h("scrollbars.theme"); const [b, y] = h("scrollbars.theme");
const [y, m] = h("scrollbars.visibility"); const [m, S] = h("scrollbars.visibility");
const [S, x] = h("scrollbars.autoHide"); const [x, $] = h("scrollbars.autoHide");
const [$] = h("scrollbars.autoHideDelay"); const [C] = h("scrollbars.autoHideDelay");
const [C, O] = h("scrollbars.dragScroll"); const [O, A] = h("scrollbars.dragScroll");
const [A, z] = h("scrollbars.clickScroll"); const [T, I] = h("scrollbars.clickScroll");
const T = u || f || _; const z = u || f || _;
const I = d || m; const E = d || S;
const setScrollbarVisibility = (t, n) => { const setScrollbarVisibility = (t, n) => {
const o = "visible" === y || "auto" === y && "scroll" === t; const o = "visible" === m || "auto" === m && "scroll" === t;
L(U, o, n); L(W, o, n);
return o; return o;
}; };
l = $; l = C;
if (b) { if (y) {
L(i); L(i);
L(p, true); L(b, true);
i = p; i = b;
} }
if (x) { if ($) {
s = "move" === S; s = "move" === x;
e = "leave" === S; e = "leave" === x;
c = "never" !== S; c = "never" !== x;
manageScrollbarsAutoHide(!c, true); manageScrollbarsAutoHide(!c, true);
} }
if (O) { if (A) {
L(tt, C); L(nt, O);
}
if (z) {
L(Q, A);
} }
if (I) { if (I) {
L(tt, T);
}
if (E) {
const t = setScrollbarVisibility(w.x, true); const t = setScrollbarVisibility(w.x, true);
const n = setScrollbarVisibility(w.y, false); const n = setScrollbarVisibility(w.y, false);
const o = t && n; const o = t && n;
L(W, !o); L(X, !o);
} }
if (T) { if (z) {
H(g); H(g);
P(g); P(g);
L(K, !v.x, true); L(Z, !v.x, true);
L(K, !v.y, false); L(Z, !v.y, false);
L(q, p);
} }
}, k, runEachAndClear.bind(0, R) ]; }, k, runEachAndClear.bind(0, R) ];
}; };
@@ -2584,7 +2585,7 @@ const OverlayScrollbars = (t, n, o) => {
if (a) { if (a) {
return a; return a;
} }
const u = r[ut]; const u = r[ft];
const validateOptions = t => { const validateOptions = t => {
const n = t || {}; const n = t || {};
const o = u && u.O; const o = u && u.O;
@@ -2623,7 +2624,7 @@ const OverlayScrollbars = (t, n, o) => {
t && n && _(t, n); t && n && _(t, n);
}, },
state() { state() {
const {Ct: t, Ot: n, xt: o, At: e, tt: c, bt: r} = v(); const {Ct: t, Ot: n, xt: o, At: e, tt: c, bt: r, vt: i} = v();
return assignDeep({}, { return assignDeep({}, {
overflowEdge: t, overflowEdge: t,
overflowAmount: n, overflowAmount: n,
@@ -2631,6 +2632,7 @@ const OverlayScrollbars = (t, n, o) => {
hasOverflow: e, hasOverflow: e,
padding: c, padding: c,
paddingAbsolute: r, paddingAbsolute: r,
directionRTL: i,
destroyed: s destroyed: s
}); });
}, },
@@ -2668,7 +2670,7 @@ const OverlayScrollbars = (t, n, o) => {
addInstance(l, S); addInstance(l, S);
h("initialized", [ S ]); h("initialized", [ S ]);
v.Vt(((t, n, o) => { v.Vt(((t, n, o) => {
const {ht: s, wt: e, _t: c, Tt: r, It: i, zt: l, gt: a, $t: u} = t; const {ht: s, wt: e, _t: c, It: r, zt: i, Tt: l, gt: a, $t: u} = t;
h("updated", [ S, { h("updated", [ S, {
updateHints: { updateHints: {
sizeChanged: s, sizeChanged: s,
@@ -2707,5 +2709,5 @@ OverlayScrollbars.env = () => {
}); });
}; };
export { OverlayScrollbars, bt as scrollbarsHidingPlugin, ht as sizeObserverPlugin }; export { OverlayScrollbars, yt as scrollbarsHidingPlugin, gt as sizeObserverPlugin };
//# sourceMappingURL=overlayscrollbars.esm.js.map //# sourceMappingURL=overlayscrollbars.esm.js.map
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
+504 -503
View File
File diff suppressed because it is too large Load Diff
packages/overlayscrollbars/dist/overlayscrollbars.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/overlayscrollbars/dist/overlayscrollbars.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/overlayscrollbars/types/overlayscrollbars.d.ts
Vendored
+1
View File
@@ -221,6 +221,7 @@ interface State {
overflowAmount: XY<number>; overflowAmount: XY<number>;
overflowStyle: XY<OverflowStyle>; overflowStyle: XY<OverflowStyle>;
hasOverflow: XY<boolean>; hasOverflow: XY<boolean>;
directionRTL: boolean;
destroyed: boolean; destroyed: boolean;
} }
interface Elements { interface Elements {