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

add scrollbars to public elements

Browse Source
This commit is contained in:
Rene Haas
2022-07-28 16:57:46 +02:00
parent 2c711ed7ef
commit 45a97dc502
11 changed files with 417 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/overlayscrollbars/dist/overlayscrollbars.css
Vendored
+6
View File
@@ -360,6 +360,12 @@ html.os-viewport-scrollbar-hidden::-webkit-scrollbar-corner,
visibility: hidden !important;
background: transparent !important; }
html.os-viewport-scrollbar-hidden,
html.os-viewport-scrollbar-hidden > body[data-overlayscrollbars] {
box-sizing: border-box;
width: 100%;
height: 100%; }
[data-overlayscrollbars],
.os-padding {
position: relative; }
packages/overlayscrollbars/dist/overlayscrollbars.esm.js
Vendored
+175 -175
View File
@@ -370,9 +370,9 @@ const a = jsAPI("IntersectionObserver");
const u = jsAPI("ResizeObserver");
const f = jsAPI("cancelAnimationFrame");
const d = jsAPI("cancelAnimationFrame");
const d = jsAPI("requestAnimationFrame");
const f = jsAPI("requestAnimationFrame");
const _ = window.setTimeout;
@@ -457,8 +457,8 @@ const debounce = (t, n) => {
if (l) {
const r = isFunction(i) ? i() : i;
const l = isNumber(r) && r >= 0;
const u = n > 0 ? _ : d;
const g = n > 0 ? h : f;
const u = n > 0 ? _ : f;
const g = n > 0 ? h : d;
const v = mergeParms(t);
const w = v || t;
const p = a.bind(0, w);
@@ -862,9 +862,9 @@ const ut = "never scroll leavemove";
}
});
const ft = "__osOptionsValidationPlugin";
const dt = "__osOptionsValidationPlugin";
const dt = 3333333;
const ft = 3333333;
const _t = "scroll";
@@ -885,10 +885,10 @@ const gt = {
let u = false;
let _;
const reset = () => {
scrollLeft(r, dt);
scrollTop(r, dt);
scrollLeft(c, dt);
scrollTop(c, dt);
scrollLeft(r, ft);
scrollTop(r, ft);
scrollLeft(c, ft);
scrollTop(c, ft);
};
const onResized = t => {
_ = 0;
@@ -903,8 +903,8 @@ const gt = {
if (t) {
stopPropagation(t);
if (u && !_) {
f(_);
_ = d(onResized);
d(_);
_ = f(onResized);
}
} else {
onResized(false === t);
@@ -913,10 +913,10 @@ const gt = {
};
const h = push([], [ on(r, _t, onScroll), on(c, _t, onScroll) ]);
style(i, {
width: dt,
height: dt
width: ft,
height: ft
});
d(reset);
f(reset);
return [ o ? onScroll.bind(0, false) : reset, h ];
}
}
@@ -957,16 +957,16 @@ const yt = {
if (t) {
const {P: t} = e();
const {D: l, M: a} = n;
const {x: u, y: f} = a;
const {x: d, y: _} = l;
const {x: u, y: d} = a;
const {x: f, y: _} = l;
const h = i ? "paddingRight" : "paddingLeft";
const g = t[h];
const v = t.paddingTop;
const w = c.w + r.w;
const p = c.h + r.h;
const b = {
w: _ && f ? `${_ + w - g}px` : "",
h: d && u ? `${d + p - v}px` : ""
w: _ && d ? `${_ + w - g}px` : "",
h: f && u ? `${f + p - v}px` : ""
};
if (s) {
const {sheet: t} = s;
@@ -994,13 +994,13 @@ const yt = {
if (t) {
const a = l || c(s);
const {P: u} = e();
const {M: f} = a;
const {x: d, y: _} = f;
const {M: d} = a;
const {x: f, y: _} = d;
const h = {};
const assignProps = t => each(t.split(" "), (t => {
h[t] = u[t];
}));
if (d) {
if (f) {
assignProps("marginBottom paddingTop paddingBottom");
}
if (_) {
@@ -1047,9 +1047,9 @@ const yt = {
};
const a = getWindowDPR();
const u = i.w > 2 && i.h > 2;
const f = !diffBiggerThanOne(l.w, l.h);
const d = a !== n && a > 0;
const _ = u && f && d;
const d = !diffBiggerThanOne(l.w, l.h);
const f = a !== n && a > 0;
const _ = u && d && f;
if (_) {
const [t, n] = s();
assignDeep(o.k, t);
@@ -1136,7 +1136,7 @@ const createEnvironment = () => {
x: 0 === l.x,
y: 0 === l.y
};
const f = {
const d = {
host: null,
padding: !a,
viewport: t => a && t === t.ownerDocument.body && t,
@@ -1147,7 +1147,7 @@ const createEnvironment = () => {
body: null
}
};
const d = assignDeep({}, ot);
const f = assignDeep({}, ot);
const _ = {
k: l,
I: u,
@@ -1156,16 +1156,16 @@ const createEnvironment = () => {
B: getRtlScrollBehavior(o, s),
V: getFlexboxGlue(o, s),
j: t => e("_", t),
Y: assignDeep.bind(0, {}, f),
Y: assignDeep.bind(0, {}, d),
q(t) {
assignDeep(f, t);
},
F: assignDeep.bind(0, {}, d),
G(t) {
assignDeep(d, t);
},
N: assignDeep({}, f),
U: assignDeep({}, d)
F: assignDeep.bind(0, {}, f),
G(t) {
assignDeep(f, t);
},
N: assignDeep({}, d),
U: assignDeep({}, f)
};
removeAttr(o, "style");
removeElements(o);
@@ -1207,10 +1207,10 @@ const cancelInitialization = (t, n) => {
const {Y: r, I: i} = getEnvironment();
const {nativeScrollbarsOverlaid: l, body: a} = r().cancel;
const u = null != o ? o : l;
const f = isUndefined(s) ? a : s;
const d = (i.x || i.y) && u;
const _ = e && (isNull(f) ? !c : f);
return !!d || !!_;
const d = isUndefined(s) ? a : s;
const f = (i.x || i.y) && u;
const _ = e && (isNull(d) ? !c : d);
return !!f || !!_;
};
const St = createDiv.bind(0, "");
@@ -1232,9 +1232,9 @@ const createStructureSetupElements = t => {
const c = e && e.A;
const {host: r, viewport: i, padding: l, content: a} = o();
const u = isHTMLElement(t);
const f = u ? {} : t;
const {host: d, padding: _, viewport: h, content: g} = f;
const v = u ? t : f.target;
const d = u ? {} : t;
const {host: f, padding: _, viewport: h, content: g} = d;
const v = u ? t : d.target;
const w = is(v, "textarea");
const p = v.ownerDocument;
const b = v === p.body;
@@ -1245,7 +1245,7 @@ const createStructureSetupElements = t => {
const A = O === v;
const T = {
J: v,
K: w ? m(St, r, d) : v,
K: w ? m(St, r, f) : v,
Z: O,
tt: !A && S(St, l, _),
nt: !A && S(St, a, g),
@@ -1259,7 +1259,7 @@ const createStructureSetupElements = t => {
lt: u,
X: A,
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)
dt: (t, n, o) => A ? attrClass(O, x, n, o) : (o ? addClass : removeClass)(O, t)
};
const E = keys(T).reduce(((t, n) => {
const o = T[n];
@@ -1322,7 +1322,7 @@ const createTrinsicUpdateSegment = (t, n) => {
const [s] = n;
return t => {
const {V: n} = getEnvironment();
const {dt: e} = s();
const {ft: e} = s();
const {_t: c} = t;
const r = (o || !n) && c;
if (r) {
@@ -1345,18 +1345,18 @@ const createPaddingUpdateSegment = (t, n) => {
o: topRightBottomLeft()
}, topRightBottomLeft.bind(0, e, "padding", ""));
return (t, n, e) => {
let [u, f] = a(e);
const {T: d, V: _} = getEnvironment();
let [u, d] = a(e);
const {T: f, V: _} = getEnvironment();
const {vt: h} = o();
const {ht: g, gt: v, wt: w} = t;
const [p, b] = n("paddingAbsolute");
const y = !_ && v;
if (g || f || y) {
[u, f] = l(e);
if (g || d || y) {
[u, d] = l(e);
}
const m = !i && (b || w || f);
const m = !i && (b || w || d);
if (m) {
const t = !p || !c && !d;
const t = !p || !c && !f;
const n = u.r + u.l;
const o = u.t + u.b;
const e = {
@@ -1432,10 +1432,10 @@ const overflowIsVisible = t => 0 === t.indexOf(Ct);
const createOverflowUpdateSegment = (t, n) => {
const [o, s] = n;
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: e, tt: c, Z: r, ot: i, X: l, dt: a} = t;
const {k: u, V: d, T: f, I: _} = getEnvironment();
const h = getPlugins()[bt];
const g = !l && !d && (_.x || _.y);
const g = !l && !f && (_.x || _.y);
const [v, w] = createCache(Tt, fractionalSize.bind(0, r));
const [p, b] = createCache(Tt, scrollSize.bind(0, r));
const [y, m] = createCache(Tt);
@@ -1451,26 +1451,26 @@ const createOverflowUpdateSegment = (t, n) => {
const l = fractionalSize(e);
const a = clientSize(e);
const u = "content-box" === style(r, "boxSizing");
const f = n || u ? s.b + s.t : 0;
const d = !(_.x && u);
const d = n || u ? s.b + s.t : 0;
const f = !(_.x && u);
style(r, {
height: a.h + l.h + (c.x && d ? i.x : 0) - f
height: a.h + l.h + (c.x && f ? i.x : 0) - d
});
}
};
const getViewportOverflowState = (t, n) => {
const o = !d && !t ? At : 0;
const o = !f && !t ? At : 0;
const getStatePerAxis = (t, s, e) => {
const c = style(r, t);
const i = n ? n[t] : c;
const l = "scroll" === i;
const a = s ? o : e;
const u = l && !d ? a : 0;
const f = s && !!o;
return [ c, l, u, f ];
const u = l && !f ? a : 0;
const d = s && !!o;
return [ c, l, u, d ];
};
const [s, e, c, i] = getStatePerAxis("overflowX", _.x, u.x);
const [l, a, f, h] = getStatePerAxis("overflowY", _.y, u.y);
const [l, a, d, h] = getStatePerAxis("overflowY", _.y, u.y);
return {
xt: {
x: s,
@@ -1482,7 +1482,7 @@ const createOverflowUpdateSegment = (t, n) => {
},
D: {
x: c,
y: f
y: d
},
M: {
x: i,
@@ -1506,29 +1506,29 @@ const createOverflowUpdateSegment = (t, n) => {
const {D: c, M: r} = t;
const {x: i, y: l} = r;
const {x: a, y: u} = c;
const {P: f} = o();
const d = n ? "marginLeft" : "marginRight";
const {P: d} = o();
const f = n ? "marginLeft" : "marginRight";
const _ = n ? "paddingLeft" : "paddingRight";
const h = f[d];
const g = f.marginBottom;
const v = f[_];
const w = f.paddingBottom;
const h = d[f];
const g = d.marginBottom;
const v = d[_];
const w = d.paddingBottom;
e.width = `calc(100% + ${u + -1 * h}px)`;
e[d] = -u + h;
e[f] = -u + h;
e.marginBottom = -a + g;
if (s) {
e[_] = v + (l ? u : 0);
e.paddingBottom = w + (i ? a : 0);
}
};
const [z, E] = h ? h.H(g, f, r, i, o, getViewportOverflowState, hideNativeScrollbars) : [ () => g, () => [ noop ] ];
const [z, E] = h ? h.H(g, d, r, i, o, getViewportOverflowState, hideNativeScrollbars) : [ () => g, () => [ noop ] ];
return (t, n, i) => {
const {ht: u, $t: h, gt: g, yt: L, _t: D, wt: M} = t;
const {dt: R, vt: k} = o();
const {ft: R, vt: k} = o();
const [B, V] = n("showNativeOverlaidScrollbars");
const [j, Y] = n("overflow");
const q = B && _.x && _.y;
const F = !l && !f && (u || g || h || V || D);
const F = !l && !d && (u || g || h || V || D);
const G = overflowIsVisible(j.x);
const N = overflowIsVisible(j.y);
const U = G || N;
@@ -1537,7 +1537,7 @@ const createOverflowUpdateSegment = (t, n) => {
let J = m(i);
let K = T(i);
let Z;
if (V && d) {
if (V && f) {
a(H, A, !q);
}
if (F) {
@@ -1553,22 +1553,22 @@ const createOverflowUpdateSegment = (t, n) => {
const [e, c] = X = p(i);
const l = clientSize(r);
let u = e;
let f = l;
let d = l;
t();
if ((c || s || V) && n && !q && z(n, e, o, k)) {
f = clientSize(r);
d = clientSize(r);
u = scrollSize(r);
}
const d = {
const f = {
w: $t(xt(e.w, u.w) + o.w),
h: $t(xt(e.h, u.h) + o.h)
};
const _ = {
w: $t(f.w + $t(l.w - e.w) + o.w),
h: $t(f.h + $t(l.h - e.h) + o.h)
w: $t(d.w + $t(l.w - e.w) + o.w),
h: $t(d.h + $t(l.h - e.h) + o.h)
};
K = S(_);
J = y(getOverflowAmount(d, _), i);
J = y(getOverflowAmount(f, _), i);
}
const [Q, tt] = K;
const [nt, ot] = J;
@@ -1640,7 +1640,7 @@ const prepareUpdateHints = (t, n, o) => {
};
const createStructureSetupUpdate = (t, n) => {
const {Z: o, ft: s} = t;
const {Z: o, dt: s} = t;
const {T: e, I: c, V: r} = getEnvironment();
const i = !e && (c.x || c.y);
const l = [ createTrinsicUpdateSegment(t, n), createPaddingUpdateSegment(t, n), createOverflowUpdateSegment(t, n) ];
@@ -1658,16 +1658,16 @@ const createStructureSetupUpdate = (t, n) => {
}, n), {}, e);
const a = i || !r;
const u = a && scrollLeft(o);
const f = a && scrollTop(o);
const d = a && scrollTop(o);
s("", T, true);
let d = c;
let f = c;
each(l, (n => {
d = prepareUpdateHints(d, n(d, t, !!e) || {}, e);
f = prepareUpdateHints(f, n(f, t, !!e) || {}, e);
}));
scrollLeft(o, u);
scrollTop(o, f);
scrollTop(o, d);
s("", T);
return d;
return f;
};
};
@@ -1682,8 +1682,8 @@ const createSizeObserver = (t, n, o) => {
const i = createDOM(`<div class="${D}"><div class="${R}"></div></div>`);
const l = i[0];
const a = l.firstChild;
const f = directionIsRTL.bind(0, t);
const [d] = createCache({
const d = directionIsRTL.bind(0, t);
const [f] = createCache({
o: void 0,
_: true,
u: (t, n) => !(!t || !domRectHasDimensions(t) && domRectHasDimensions(n))
@@ -1695,7 +1695,7 @@ const createSizeObserver = (t, n, o) => {
let i = false;
let a = true;
if (o) {
const [n, , o] = d(t.pop().contentRect);
const [n, , o] = f(t.pop().contentRect);
const s = domRectHasDimensions(n);
const e = domRectHasDimensions(o);
c = !o || !s;
@@ -1738,8 +1738,8 @@ const createSizeObserver = (t, n, o) => {
}
if (s) {
const [t] = createCache({
o: !f()
}, f);
o: !d()
}, d);
push(_, on(l, "scroll", (n => {
const o = t();
const [s, e] = o;
@@ -1869,8 +1869,8 @@ const createEventContentChange = (t, n, o) => {
const createDOMObserver = (t, n, o, s) => {
let e = false;
const {Pt: c, Dt: r, Mt: i, Rt: a, kt: u, Bt: f} = s || {};
const d = debounce((() => {
const {Pt: c, Dt: r, Mt: i, Rt: a, kt: u, Bt: d} = s || {};
const f = debounce((() => {
if (e) {
o(true);
}
@@ -1878,43 +1878,43 @@ const createDOMObserver = (t, n, o, s) => {
g: 33,
v: 99
});
const [_, h] = createEventContentChange(t, d, i);
const [_, h] = createEventContentChange(t, f, i);
const g = c || [];
const v = r || [];
const w = g.concat(v);
const observerCallback = (e, c) => {
const r = u || noop;
const i = f || noop;
const i = d || noop;
const l = [];
const d = [];
const f = [];
let _ = false;
let g = false;
let w = false;
each(e, (o => {
const {attributeName: e, target: c, type: u, oldValue: f, addedNodes: h} = o;
const {attributeName: e, target: c, type: u, oldValue: d, addedNodes: h} = o;
const p = "attributes" === u;
const b = "childList" === u;
const y = t === c;
const m = p && isString(e) ? attr(c, e) : 0;
const S = 0 !== m && f !== m;
const S = 0 !== m && d !== m;
const x = indexOf(v, e) > -1 && S;
if (n && !y) {
const n = !p;
const l = p && x;
const u = l && a && is(c, a);
const _ = u ? !r(c, e, f, m) : n || l;
const _ = u ? !r(c, e, d, m) : n || l;
const v = _ && !i(o, !!u, t, s);
push(d, h);
push(f, h);
g = g || v;
w = w || b;
}
if (!n && y && S && !r(c, e, f, m)) {
if (!n && y && S && !r(c, e, d, m)) {
push(l, e);
_ = _ || x;
}
}));
if (w && !isEmptyArray(d)) {
h((t => d.reduce(((n, o) => {
if (w && !isEmptyArray(f)) {
h((t => f.reduce(((n, o) => {
push(n, find(t, o));
return is(o, t) ? push(n, o) : n;
}), [])));
@@ -1946,7 +1946,7 @@ const createDOMObserver = (t, n, o, s) => {
}
}, () => {
if (e) {
d.m();
f.m();
const t = p.takeRecords();
return !isEmptyArray(t) && observerCallback(t, true);
}
@@ -1968,7 +1968,7 @@ const createStructureSetupObservers = (t, n, o) => {
let e;
let c;
const [, r] = n;
const {K: i, Z: l, nt: a, it: f, X: d, ut: _, ft: h} = t;
const {K: i, Z: l, nt: a, it: d, X: f, ut: _, dt: h} = t;
const {V: g} = getEnvironment();
const [v] = createCache({
u: equalWH,
@@ -1997,7 +1997,7 @@ const createStructureSetupObservers = (t, n, o) => {
h: c.h + e.h + r.h
};
}));
const w = f ? Pt : Dt.concat(Pt);
const w = d ? Pt : Dt.concat(Pt);
const p = debounce(o, {
g: () => s,
v: () => e,
@@ -2028,7 +2028,7 @@ const createStructureSetupObservers = (t, n, o) => {
_t: e
};
r({
dt: s
ft: s
});
!n && o(c);
return c;
@@ -2065,13 +2065,13 @@ const createStructureSetupObservers = (t, n, o) => {
};
if (n) {
!o && p(s);
} else if (!d) {
} else if (!f) {
updateViewportAttrsFromHost(t);
}
return s;
};
const [b, y, m] = a || !g ? createTrinsicObserver(i, onTrinsicChanged) : [ noop, noop, noop ];
const [S, x] = !d ? createSizeObserver(i, onSizeChanged, {
const [S, x] = !f ? createSizeObserver(i, onSizeChanged, {
Lt: true,
Et: true
}) : [ noop, noop ];
@@ -2079,7 +2079,7 @@ const createStructureSetupObservers = (t, n, o) => {
Dt: Dt,
Pt: Dt.concat(Ht)
});
const A = d && u && new u(onSizeChanged.bind(0, {
const A = f && u && new u(onSizeChanged.bind(0, {
ht: true
}));
A && A.observe(i);
@@ -2112,7 +2112,7 @@ const createStructureSetupObservers = (t, n, o) => {
const [n] = t("updating.ignoreMutation");
const [o, r] = t("updating.attributes");
const [i, u] = t("updating.elementEvents");
const [f, d] = t("updating.debounce");
const [d, f] = t("updating.debounce");
const _ = u || r;
const ignoreMutationFromOptions = t => isFunction(n) && n(t);
if (_) {
@@ -2132,15 +2132,15 @@ const createStructureSetupObservers = (t, n, o) => {
}
});
}
if (d) {
if (f) {
p.m();
if (isArray(f)) {
const t = f[0];
const n = f[1];
if (isArray(d)) {
const t = d[0];
const n = d[1];
s = isNumber(t) ? t : false;
e = isNumber(n) ? n : false;
} else if (isNumber(f)) {
s = f;
} else if (isNumber(d)) {
s = d;
e = false;
} else {
s = false;
@@ -2182,7 +2182,7 @@ const Rt = {
x: false,
y: false
},
dt: false,
ft: false,
vt: false
};
@@ -2192,15 +2192,15 @@ const createStructureSetup = (t, n) => {
const [e, c, r] = createEventListenerHub();
const [i] = s;
const [l, a, u] = createStructureSetupElements(t);
const f = createStructureSetupUpdate(l, s);
const d = createStructureSetupUpdate(l, s);
const triggerUpdateEvent = (t, n, o) => {
const s = keys(t).some((n => t[n]));
if (s || !isEmptyObject(n) || o) {
r("u", [ t, n, o ]);
}
};
const [d, _, h, g] = createStructureSetupObservers(l, s, (t => {
triggerUpdateEvent(f(o, t), {}, false);
const [f, _, h, g] = createStructureSetupObservers(l, s, (t => {
triggerUpdateEvent(d(o, t), {}, false);
}));
const v = i.bind(0);
v.Vt = t => {
@@ -2214,19 +2214,19 @@ const createStructureSetup = (t, n) => {
return [ (t, o) => {
const s = createOptionCheck(n, t, o);
g(s);
triggerUpdateEvent(f(s, h(), o), t, !!o);
triggerUpdateEvent(d(s, h(), o), t, !!o);
}, v, () => {
c();
d();
f();
u();
} ];
};
const {round: kt} = Math;
const getPageOffset = t => ({
x: t.pageX,
y: t.pageY
const getClientOffset = t => ({
x: t.clientX,
y: t.clientY
});
const getScale = t => {
@@ -2256,14 +2256,14 @@ const createDragScrollingEvents = (t, n, o, s, e, c) => {
const {B: r} = getEnvironment();
const {qt: i, Ft: l, Gt: a} = o;
const u = `scroll${c ? "Left" : "Top"}`;
const f = `${c ? "x" : "y"}`;
const d = `${c ? "w" : "h"}`;
const d = `${c ? "x" : "y"}`;
const f = `${c ? "w" : "h"}`;
const createOnPointerMoveHandler = (t, n, o) => _ => {
const {Ot: h} = e();
const g = (getPageOffset(_)[f] - n) * o;
const v = offsetSize(l)[d] - offsetSize(i)[d];
const g = (getClientOffset(_)[d] - n) * o;
const v = offsetSize(l)[f] - offsetSize(i)[f];
const w = g / v;
const p = w * h[f];
const p = w * h[d];
const b = directionIsRTL(a);
const y = b && c ? r.n || r.i ? 1 : -1 : 1;
s[u] = t + p * y;
@@ -2273,7 +2273,7 @@ const createDragScrollingEvents = (t, n, o, s, e, c) => {
const t = on(n, "selectstart", (t => preventDefault(t)), {
S: false
});
const e = on(i, "pointermove", createOnPointerMoveHandler(s[u] || 0, getPageOffset(o)[f], 1 / getScale(s)[f]));
const e = on(i, "pointermove", createOnPointerMoveHandler(s[u] || 0, getClientOffset(o)[d], 1 / getScale(s)[d]));
on(i, "pointerup", (n => {
t();
e();
@@ -2295,7 +2295,7 @@ const createScrollbarsSetupEvents = (t, n) => (o, s, e, c, r) => {
})), createRootClickStopPropagationEvents(i, e), createDragScrollingEvents(t, e, o, c, n, r) ]);
};
const {min: Bt, max: Vt, abs: jt} = Math;
const {min: Bt, max: Vt, abs: jt, round: Yt} = Math;
const getScrollbarHandleLengthRatio = (t, n, o, s) => {
if (s) {
@@ -2316,11 +2316,11 @@ const getScrollbarHandleOffsetRatio = (t, n, o, s, e, c) => {
const i = c ? "x" : "y";
const l = c ? "Left" : "Top";
const {Ot: a} = s;
const u = Math.floor(a[i]);
const f = jt(o[`scroll${l}`]);
const d = c && e;
const _ = r.i ? f : u - f;
const h = d ? _ : f;
const u = Yt(a[i]);
const d = jt(o[`scroll${l}`]);
const f = c && e;
const _ = r.i ? d : u - d;
const h = f ? _ : d;
const g = Bt(1, h / u);
const v = getScrollbarHandleLengthRatio(t, n, c);
return 1 / v * (1 - v) * g;
@@ -2330,8 +2330,8 @@ const createScrollbarsSetupElements = (t, n, o) => {
const {Y: s} = getEnvironment();
const {scrollbarsSlot: e} = s();
const {rt: c, J: r, K: i, Z: l, lt: a, st: u} = n;
const {scrollbarsSlot: f} = a ? {} : t;
const d = dynamicInitializationElement([ r, i, l ], (() => i), e, f);
const {scrollbarsSlot: d} = a ? {} : t;
const f = dynamicInitializationElement([ r, i, l ], (() => i), e, d);
const scrollbarStructureAddRemoveClass = (t, n, o) => {
const s = o ? addClass : removeClass;
each(t, (t => {
@@ -2348,7 +2348,7 @@ const createScrollbarsSetupElements = (t, n, o) => {
scrollbarsHandleStyle(t, (t => {
const {qt: s, Ft: e} = t;
return [ s, {
[o ? "width" : "height"]: `${(100 * getScrollbarHandleLengthRatio(s, e, o, n)).toFixed(3)}%`
[o ? "width" : "height"]: `${(100 * getScrollbarHandleLengthRatio(s, e, o, n)).toFixed(5)}%`
} ];
}));
};
@@ -2359,7 +2359,7 @@ const createScrollbarsSetupElements = (t, n, o) => {
const i = getScrollbarHandleOffsetRatio(e, c, u, n, directionIsRTL(r), o);
const l = i === i;
return [ e, {
transform: l ? `translate${s}(${(100 * i).toFixed(3)}%)` : ""
transform: l ? `translate${s}(${(100 * i).toFixed(5)}%)` : ""
} ];
}));
};
@@ -2402,8 +2402,8 @@ const createScrollbarsSetupElements = (t, n, o) => {
const w = generateScrollbarDOM.bind(0, true);
const p = generateScrollbarDOM.bind(0, false);
const appendElements = () => {
appendChildren(d, g[0].Gt);
appendChildren(d, v[0].Gt);
appendChildren(f, g[0].Gt);
appendChildren(f, v[0].Gt);
_((() => {
scrollbarsAddRemoveClass(J);
}), 300);
@@ -2429,8 +2429,8 @@ const createScrollbarsSetupElements = (t, n, o) => {
const createSelfCancelTimeout = t => {
let n;
const o = t ? _ : d;
const s = t ? h : f;
const o = t ? _ : f;
const s = t ? h : d;
return [ e => {
s(n);
n = o(e, isFunction(t) ? t() : t);
@@ -2446,7 +2446,7 @@ const createScrollbarsSetup = (t, n, o) => {
let l = 0;
const a = createState({});
const [u] = a;
const [f, d] = createSelfCancelTimeout();
const [d, f] = createSelfCancelTimeout();
const [_, h] = createSelfCancelTimeout();
const [g, v] = createSelfCancelTimeout(100);
const [w, p] = createSelfCancelTimeout(100);
@@ -2480,13 +2480,13 @@ const createScrollbarsSetup = (t, n, o) => {
r = e;
r && manageScrollbarsAutoHide(true);
};
const R = [ v, y, p, h, d, x, on($, "mouseover", onHostMouseEnter, {
const R = [ v, y, p, h, f, x, on($, "pointerover", onHostMouseEnter, {
C: true
}), on($, "mouseenter", onHostMouseEnter), on($, "mouseleave", (() => {
}), on($, "pointerenter", onHostMouseEnter), on($, "pointerleave", (() => {
r = false;
e && manageScrollbarsAutoHide(false);
})), on($, "mousemove", (() => {
s && f((() => {
})), on($, "pointermove", (() => {
s && d((() => {
v();
manageScrollbarsAutoHide(true);
w((() => {
@@ -2508,7 +2508,7 @@ const createScrollbarsSetup = (t, n, o) => {
k.Yt = m;
k.jt = S;
return [ (t, r, a) => {
const {It: u, zt: f, Tt: d, wt: _} = a;
const {It: u, zt: d, Tt: f, wt: _} = a;
const h = createOptionCheck(n, t, r);
const g = o();
const {Ot: v, xt: w, vt: p} = g;
@@ -2517,9 +2517,9 @@ const createScrollbarsSetup = (t, n, o) => {
const [x, $] = h("scrollbars.autoHide");
const [C] = h("scrollbars.autoHideDelay");
const [O, A] = h("scrollbars.dragScroll");
const [T, I] = h("scrollbars.clickScroll");
const z = u || f || _;
const E = d || S;
const [T, z] = h("scrollbars.clickScroll");
const E = u || d || _;
const D = f || S;
const setScrollbarVisibility = (t, n) => {
const o = "visible" === m || "auto" === m && "scroll" === t;
L(W, o, n);
@@ -2540,40 +2540,40 @@ const createScrollbarsSetup = (t, n, o) => {
if (A) {
L(nt, O);
}
if (I) {
if (z) {
L(tt, T);
}
if (E) {
if (D) {
const t = setScrollbarVisibility(w.x, true);
const n = setScrollbarVisibility(w.y, false);
const o = t && n;
L(X, !o);
}
if (z) {
if (E) {
H(g);
P(g);
L(Z, !v.x, true);
L(Z, !v.y, false);
L(q, p);
L(q, p && !I);
}
}, k, runEachAndClear.bind(0, R) ];
};
const Yt = new Set;
const qt = new Set;
const qt = new WeakMap;
const Ft = new WeakMap;
const addInstance = (t, n) => {
qt.set(t, n);
Yt.add(t);
Ft.set(t, n);
qt.add(t);
};
const removeInstance = t => {
Ft.delete(t);
qt.delete(t);
Yt.delete(t);
};
const getInstance = t => qt.get(t);
const getInstance = t => Ft.get(t);
const OverlayScrollbars = (t, n, o) => {
let s = false;
@@ -2585,16 +2585,16 @@ const OverlayScrollbars = (t, n, o) => {
if (a) {
return a;
}
const u = r[ft];
const u = r[dt];
const validateOptions = t => {
const n = t || {};
const o = u && u.O;
return o ? o(n, true) : n;
};
const f = assignDeep({}, e(), validateOptions(n));
const [d, _, h] = createEventListenerHub(o);
const [g, v, w] = createStructureSetup(t, f);
const [p, b, y] = createScrollbarsSetup(t, f, v);
const d = assignDeep({}, e(), validateOptions(n));
const [f, _, h] = createEventListenerHub(o);
const [g, v, w] = createStructureSetup(t, d);
const [p, b, y] = createScrollbarsSetup(t, d, v);
const update = (t, n) => {
g(t, !!n);
};
@@ -2611,15 +2611,15 @@ const OverlayScrollbars = (t, n, o) => {
const S = {
options(t) {
if (t) {
const n = getOptionsDiff(f, validateOptions(t));
const n = getOptionsDiff(d, validateOptions(t));
if (!isEmptyObject(n)) {
assignDeep(f, n);
assignDeep(d, n);
update(n);
}
}
return assignDeep({}, f);
return assignDeep({}, d);
},
on: d,
on: f,
off: (t, n) => {
t && n && _(t, n);
},
@@ -2692,7 +2692,7 @@ const OverlayScrollbars = (t, n, o) => {
OverlayScrollbars.plugin = addPlugin;
OverlayScrollbars.env = () => {
const {k: t, I: n, T: o, B: s, V: e, L: c, N: r, U: i, Y: l, q: a, F: u, G: f} = getEnvironment();
const {k: t, I: n, T: o, B: s, V: e, L: c, N: r, U: i, Y: l, q: a, F: u, G: d} = getEnvironment();
return assignDeep({}, {
scrollbarsSize: t,
scrollbarsOverlaid: n,
@@ -2705,7 +2705,7 @@ OverlayScrollbars.env = () => {
getDefaultInitialization: l,
setDefaultInitialization: a,
getDefaultOptions: u,
setDefaultOptions: f
setDefaultOptions: d
});
};
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
+146 -146
View File
@@ -24,15 +24,15 @@
var t = e ? "" : {};
if (r) {
var i = window.getComputedStyle(r, null);
t = e ? Pr(r, i, a) : a.reduce((function(a, e) {
a[e] = Pr(r, i, e);
t = e ? Ar(r, i, a) : a.reduce((function(a, e) {
a[e] = Ar(r, i, e);
return a;
}), t);
}
return t;
}
r && each(E(a), (function(e) {
return Ar(r, e, a[e]);
return Pr(r, e, a[e]);
}));
}
function getDefaultExportFromCjs(r) {
@@ -158,7 +158,7 @@
var E = function keys(r) {
return r ? Object.keys(r) : [];
};
var P = function assignDeep(r, a, e, n, t, i, v) {
var A = function assignDeep(r, a, e, n, t, i, v) {
var u = [ a, e, n, t, i, v ];
if (("object" !== typeof r || o(r)) && !s(r)) {
r = {};
@@ -186,7 +186,7 @@
}));
return r;
};
var A = function isEmptyObject(r) {
var P = function isEmptyObject(r) {
for (var a in r) {
return false;
}
@@ -496,10 +496,10 @@
var Er = function adaptCSSVal(r, a) {
return !Or[r.toLowerCase()] && f(a) ? a + "px" : a;
};
var Pr = function getCSSVal(r, a, e) {
var Ar = function getCSSVal(r, a, e) {
return null != a ? a[e] || a.getPropertyValue(e) : r.style[e];
};
var Ar = function setCSSVal(r, a, e) {
var Pr = function setCSSVal(r, a, e) {
try {
var n = r.style;
if (!v(n[a])) {
@@ -593,7 +593,7 @@
var i = kr();
var v = null != (t = i && n && n.C) ? t : i;
var o = n && n.O || false;
var u = n && n.P || false;
var u = n && n.A || false;
var f = [];
var l = i ? {
passive: v,
@@ -685,7 +685,7 @@
return [ function() {
return a;
}, function(r) {
a = P({}, a, r);
a = A({}, a, r);
} ];
};
var Kr = "os-environment";
@@ -717,8 +717,8 @@
var Oa = ma + "-track";
var xa = ma + "-handle";
var Ea = ma + "-visible";
var Pa = ma + "-cornerless";
var Aa = ma + "-transitionless";
var Aa = ma + "-cornerless";
var Pa = ma + "-transitionless";
var Ta = ma + "-interaction";
var za = ma + "-unusable";
var La = ma + "-auto-hidden";
@@ -762,7 +762,7 @@
var t = r[n];
var i = a[n];
if (g(t) && g(i)) {
P(e[n] = {}, getOptionsDiff(t, i));
A(e[n] = {}, getOptionsDiff(t, i));
} else if (x(a, n) && i !== t) {
var v = true;
if (d(t) || d(i)) {
@@ -781,7 +781,7 @@
};
var Va = {};
var ja = function getPlugins() {
return P({}, Va);
return A({}, Va);
};
var ka = function addPlugin(r) {
each(d(r) ? r : [ r ], (function(r) {
@@ -836,7 +836,7 @@
t[o] = w;
i[o] = b;
each([ i, t ], (function(r) {
if (A(r[o])) {
if (P(r[o])) {
delete r[o];
}
}));
@@ -911,7 +911,7 @@
};
var Qa = "__osOptionsValidationPlugin";
Ya = {}, Ya[Qa] = {
A: function _(r, a) {
P: function _(r, a) {
var e = Na(Ka, r, a), n = e[0], t = e[1];
return Fa({}, t, n);
}
@@ -921,7 +921,7 @@
var ee = "scroll";
var ne = "__osSizeObserverPlugin";
var te = (re = {}, re[ne] = {
A: function _(r, a, e) {
P: function _(r, a, e) {
var n = $('<div class="' + _a + '" dir="ltr"><div class="' + _a + '"><div class="' + wa + '"></div></div><div class="' + _a + '"><div class="' + wa + '" style="width: 200%; height: 200%"></div></div></div>');
Y(r, n);
pr(r, pa);
@@ -1096,7 +1096,7 @@
var d = l && c && s;
if (d) {
var g = n(), h = g[0], p = g[1];
P(e.k, h);
A(e.k, h);
if (p) {
t();
}
@@ -1186,7 +1186,7 @@
body: null
}
};
var w = P({}, Ra);
var w = A({}, Ra);
var b = {
k: d,
D: h,
@@ -1197,16 +1197,16 @@
q: function _addListener(r) {
return o("_", r);
},
U: P.bind(0, {}, p),
U: A.bind(0, {}, p),
N: function _setDefaultInitialization(r) {
P(p, r);
A(p, r);
},
Y: P.bind(0, {}, w),
Y: A.bind(0, {}, w),
W: function _setDefaultOptions(r) {
P(w, r);
A(w, r);
},
G: P({}, p),
X: P({}, w)
G: A({}, p),
X: A({}, w)
};
H(t, "style");
X(t);
@@ -1259,7 +1259,7 @@
z(r, aa, a);
return H.bind(0, r, aa);
};
var Pe = function createStructureSetupElements(r) {
var Ae = function createStructureSetupElements(r) {
var a = be();
var e = a.U, n = a.L;
var t = ja()[ce];
@@ -1272,21 +1272,21 @@
var S = k(b, "textarea");
var C = b.ownerDocument;
var x = b === C.body;
var P = C.defaultView;
var A = ye.bind(0, [ b ]);
var A = C.defaultView;
var P = ye.bind(0, [ b ]);
var T = Se.bind(0, [ b ]);
var z = A(Oe, u, h);
var z = P(Oe, u, h);
var M = z === b;
var R = {
J: b,
K: S ? A(Oe, o, d) : b,
K: S ? P(Oe, o, d) : b,
rr: z,
ar: !M && T(Oe, f, g),
er: !M && T(Oe, l, p),
nr: !M && !n && i && i(a),
tr: x ? C.documentElement : z,
ir: x ? C : z,
vr: P,
vr: A,
ur: C,
lr: S,
Z: x,
@@ -1358,7 +1358,7 @@
};
return [ R, ar, O.bind(0, J) ];
};
var Ae = function createTrinsicUpdateSegment(r, a) {
var Pe = function createTrinsicUpdateSegment(r, a) {
var e = r.er;
var n = a[0];
return function(r) {
@@ -1396,8 +1396,8 @@
f = E[0];
s = E[1];
}
var A = !u && (O || y || s);
if (A) {
var P = !u && (O || y || s);
if (P) {
var T = !C || !v && !g;
var z = f.r + f.l;
var L = f.t + f.b;
@@ -1421,11 +1421,11 @@
t({
ar: f,
mr: !T,
R: v ? H : P({}, D, H)
R: v ? H : A({}, D, H)
});
}
return {
yr: A
yr: P
};
};
};
@@ -1473,8 +1473,8 @@
var w = !f && !g && (h.x || h.y);
var b = a(Re, Ir.bind(0, o)), m = b[0], y = b[1];
var S = a(Re, Rr.bind(0, o)), C = S[0], O = S[1];
var x = a(Re), E = x[0], P = x[1];
var A = a(Re), T = A[0], D = A[1];
var x = a(Re), E = x[0], A = x[1];
var P = a(Re), T = P[0], D = P[1];
var H = a(Ie), M = H[0];
var R = function fixFlexboxGlue(r, a) {
style(o, {
@@ -1563,7 +1563,7 @@
} ], B = k[0], F = k[1];
return function(r, a, e) {
var u = r.pr, c = r.Or, s = r._r, p = r.yr, w = r.hr, b = r.br;
var S = n(), x = S.gr, A = S.wr;
var S = n(), x = S.gr, P = S.wr;
var H = a("showNativeOverlaidScrollbars"), k = H[0], q = H[1];
var U = a("overflow"), N = U[0], Y = U[1];
var W = k && h.x && h.y;
@@ -1573,7 +1573,7 @@
var $ = X || Z;
var J = y(e);
var K = O(e);
var Q = P(e);
var Q = A(e);
var rr = D(e);
var ar;
if (q && g) {
@@ -1587,14 +1587,14 @@
if ($) {
l(sa, ta, false);
}
var er = F(W, A, ar), nr = er[0], tr = er[1];
var er = F(W, P, ar), nr = er[0], tr = er[1];
var ir = J = m(e), vr = ir[0], or = ir[1];
var ur = K = C(e), fr = ur[0], lr = ur[1];
var cr = Mr(o);
var sr = fr;
var dr = cr;
nr();
if ((lr || or || q) && tr && !W && B(tr, fr, vr, A)) {
if ((lr || or || q) && tr && !W && B(tr, fr, vr, P)) {
dr = Mr(o);
sr = Rr(o);
}
@@ -1612,13 +1612,13 @@
var pr = rr, _r = pr[0], wr = pr[1];
var br = Q, mr = br[0], yr = br[1];
var Sr = K, Cr = Sr[0], Or = Sr[1];
var xr = J, Er = xr[0], Pr = xr[1];
var Ar = {
var xr = J, Er = xr[0], Ar = xr[1];
var Pr = {
x: mr.w > 0,
y: mr.h > 0
};
var Tr = X && Z && (Ar.x || Ar.y) || X && Ar.x && !Ar.y || Z && Ar.y && !Ar.x;
if (p || b || Pr || Or || wr || yr || Y || q || G) {
var Tr = X && Z && (Pr.x || Pr.y) || X && Pr.x && !Pr.y || Z && Pr.y && !Pr.x;
if (p || b || Ar || Or || wr || yr || Y || q || G) {
var zr = {
marginRight: 0,
marginBottom: 0,
@@ -1627,10 +1627,10 @@
overflowY: "",
overflowX: ""
};
var Lr = V(W, Ar, N, zr);
var Dr = B(Lr, Cr, Er, A);
var Lr = V(W, Pr, N, zr);
var Dr = B(Lr, Cr, Er, P);
if (!f) {
j(Lr, A, Dr, zr);
j(Lr, P, Dr, zr);
}
if (G) {
R(Lr, x);
@@ -1652,11 +1652,11 @@
x: _r.w,
y: _r.h
},
Pr: {
Ar: {
x: mr.w,
y: mr.h
},
Ar: Ar
Pr: Pr
});
return {
Tr: Vr,
@@ -1680,9 +1680,9 @@
var e = r.rr, n = r.dr;
var t = be(), i = t.L, v = t.D, o = t.F;
var u = !i && (v.x || v.y);
var f = [ Ae(r, a), Te(r, a), Be(r, a) ];
var f = [ Pe(r, a), Te(r, a), Be(r, a) ];
return function(r, a, t) {
var i = Fe(P({
var i = Fe(A({
pr: false,
yr: false,
br: false,
@@ -1770,7 +1770,7 @@
e.disconnect();
}));
} else if (f) {
var n = f.A(w, C, u), t = n[0], i = n[1];
var n = f.P(w, C, u), t = n[0], i = n[1];
E = t;
y(x, i);
}
@@ -1796,7 +1796,7 @@
if (E) {
pr(p, ga);
y(x, qr(p, "animationstart", E, {
P: !!or
A: !!or
}));
}
Y(r, p);
@@ -1937,12 +1937,12 @@
var O = r === i;
var x = S && l(t) ? z(i, t) : 0;
var E = 0 !== x && s !== x;
var P = m(b, t) > -1 && E;
var A = m(b, t) > -1 && E;
if (a && !O) {
var A = !S;
var T = S && P;
var P = !S;
var T = S && A;
var L = T && f && k(i, f);
var D = L ? !v(i, t, s, x) : A || T;
var D = L ? !v(i, t, s, x) : P || T;
var H = D && !o(e, !!L, r, n);
y(d, p);
h = h || H;
@@ -1950,7 +1950,7 @@
}
if (!a && O && E && !v(i, t, s, x)) {
y(u, t);
g = g || P;
g = g || A;
}
}));
if (w && !C(d)) {
@@ -2035,7 +2035,7 @@
h: i.h + t.h + v.h
};
})), x = O[0];
var A = h ? Qe : rn.concat(Qe);
var P = h ? Qe : rn.concat(Qe);
var T = Cr(n, {
p: function _timeout() {
return t;
@@ -2142,13 +2142,13 @@
var e = N();
var n = v && v[1]();
if (a) {
P(r, j.apply(0, y(a, true)));
A(r, j.apply(0, y(a, true)));
}
if (e) {
P(r, D.apply(0, y(e, true)));
A(r, D.apply(0, y(e, true)));
}
if (n) {
P(r, V.apply(0, y(n, true)));
A(r, V.apply(0, y(n, true)));
}
return r;
}, function(r) {
@@ -2166,8 +2166,8 @@
v[0]();
}
v = Ze(g || c, true, V, {
Ir: A.concat(o || []),
Rr: A.concat(o || []),
Ir: P.concat(o || []),
Rr: P.concat(o || []),
Vr: h,
jr: $e,
Br: function _ignoreContentChange(r, a) {
@@ -2216,12 +2216,12 @@
paddingLeft: 0
},
Er: en,
Pr: en,
Ar: en,
Cr: {
x: "hidden",
y: "hidden"
},
Ar: {
Pr: {
x: false,
y: false
},
@@ -2233,13 +2233,13 @@
var n = Jr(nn);
var t = Xr(), i = t[0], v = t[1], o = t[2];
var u = n[0];
var f = Pe(r), l = f[0], c = f[1], s = f[2];
var f = Ae(r), l = f[0], c = f[1], s = f[2];
var d = qe(l, n);
var g = function triggerUpdateEvent(r, a, e) {
var n = E(r).some((function(a) {
return r[a];
}));
if (n || !A(a) || e) {
if (n || !P(a) || e) {
o("u", [ r, a, e ]);
}
};
@@ -2266,10 +2266,10 @@
} ];
};
var vn = Math.round;
var un = function getPageOffset(r) {
var un = function getClientOffset(r) {
return {
x: r.pageX,
y: r.pageY
x: r.clientX,
y: r.clientY
};
};
var fn = function getScale(r) {
@@ -2288,7 +2288,7 @@
};
var cn = function createRootClickStopPropagationEvents(r, a) {
return qr(r, "mousedown", qr.bind(0, a, "click", Ur, {
P: true,
A: true,
O: true
}), {
O: true
@@ -2302,7 +2302,7 @@
var d = i ? "w" : "h";
var g = function createOnPointerMoveHandler(r, a, e) {
return function(v) {
var g = t(), h = g.Pr;
var g = t(), h = g.Ar;
var p = (un(v)[s] - a) * e;
var w = Hr(f)[d] - Hr(u)[d];
var b = p / w;
@@ -2325,7 +2325,7 @@
i();
u.releasePointerCapture(r.pointerId);
}), {
P: true
A: true
});
u.setPointerCapture(e.pointerId);
}
@@ -2341,11 +2341,11 @@
})), cn(o, t), sn(r, t, e, i, a, v) ]);
};
};
var gn = Math.min, hn = Math.max, pn = Math.abs;
var _n = function getScrollbarHandleLengthRatio(r, a, e, n) {
var gn = Math.min, hn = Math.max, pn = Math.abs, _n = Math.round;
var wn = function getScrollbarHandleLengthRatio(r, a, e, n) {
if (n) {
var t = e ? "x" : "y";
var i = n.Pr, v = n.Er;
var i = n.Ar, v = n.Er;
var o = v[t];
var u = i[t];
return hn(0, gn(1, o / (o + u)));
@@ -2355,21 +2355,21 @@
var c = Hr(a)[f];
return hn(0, gn(1, l / c));
};
var wn = function getScrollbarHandleOffsetRatio(r, a, e, n, t, i) {
var bn = function getScrollbarHandleOffsetRatio(r, a, e, n, t, i) {
var v = be(), o = v.B;
var u = i ? "x" : "y";
var f = i ? "Left" : "Top";
var l = n.Pr;
var c = Math.floor(l[u]);
var l = n.Ar;
var c = _n(l[u]);
var s = pn(e["scroll" + f]);
var d = i && t;
var g = o.i ? s : c - s;
var h = d ? g : s;
var p = gn(1, h / c);
var w = _n(r, a, i);
var w = wn(r, a, i);
return 1 / w * (1 - w) * p;
};
var bn = function createScrollbarsSetupElements(r, a, e) {
var mn = function createScrollbarsSetupElements(r, a, e) {
var n = be(), t = n.U;
var i = t(), v = i.scrollbarsSlot;
var o = a.ur, u = a.J, f = a.K, l = a.rr, s = a.cr, d = a.tr;
@@ -2393,7 +2393,7 @@
b(r, (function(r) {
var n;
var t = r.Nr, i = r.Yr;
return [ t, (n = {}, n[e ? "width" : "height"] = (100 * _n(t, i, e, a)).toFixed(3) + "%",
return [ t, (n = {}, n[e ? "width" : "height"] = (100 * wn(t, i, e, a)).toFixed(5) + "%",
n) ];
}));
};
@@ -2401,35 +2401,35 @@
var n = e ? "X" : "Y";
b(r, (function(r) {
var t = r.Nr, i = r.Yr, v = r.Wr;
var o = wn(t, i, d, a, Tr(v), e);
var o = bn(t, i, d, a, Tr(v), e);
var u = o === o;
return [ t, {
transform: u ? "translate" + n + "(" + (100 * o).toFixed(3) + "%)" : ""
transform: u ? "translate" + n + "(" + (100 * o).toFixed(5) + "%)" : ""
} ];
}));
};
var x = [];
var E = [];
var P = [];
var A = function scrollbarsAddRemoveClass(r, a, e) {
var A = [];
var P = function scrollbarsAddRemoveClass(r, a, e) {
var n = c(e);
var t = n ? e : true;
var i = n ? !e : true;
t && w(E, r, a);
i && w(P, r, a);
i && w(A, r, a);
};
var T = function refreshScrollbarsHandleLength(r) {
m(E, r, true);
m(P, r);
m(A, r);
};
var z = function refreshScrollbarsHandleOffset(r) {
S(E, r, true);
S(P, r);
S(A, r);
};
var L = function generateScrollbarDOM(r) {
var a = r ? Sa : Ca;
var n = r ? E : P;
var t = C(n) ? Aa : "";
var n = r ? E : A;
var t = C(n) ? Pa : "";
var i = Z(ma + " " + a + " " + t);
var v = Z(Oa);
var u = Z(xa);
@@ -2441,16 +2441,16 @@
Y(i, v);
Y(v, u);
y(n, f);
y(x, [ X.bind(0, i), e(f, A, o, d, r) ]);
y(x, [ X.bind(0, i), e(f, P, o, d, r) ]);
return f;
};
var D = L.bind(0, true);
var H = L.bind(0, false);
var M = function appendElements() {
Y(p, E[0].Wr);
Y(p, P[0].Wr);
Y(p, A[0].Wr);
lr((function() {
A(Aa);
P(Pa);
}), 300);
};
D();
@@ -2458,20 +2458,20 @@
return [ {
Gr: T,
Xr: z,
Zr: A,
Zr: P,
$r: {
Jr: E,
Kr: D,
Qr: b.bind(0, E)
},
ra: {
Jr: P,
Jr: A,
Kr: H,
Qr: b.bind(0, P)
Qr: b.bind(0, A)
}
}, M, O.bind(0, x) ];
};
var mn = function createSelfCancelTimeout(r) {
var yn = function createSelfCancelTimeout(r) {
var a;
var e = r ? lr : fr;
var n = r ? cr : ur;
@@ -2482,7 +2482,7 @@
return n(a);
} ];
};
var yn = function createScrollbarsSetup(r, a, e) {
var Sn = function createScrollbarsSetup(r, a, e) {
var n;
var t;
var i;
@@ -2491,14 +2491,14 @@
var u = 0;
var f = Jr({});
var l = f[0];
var c = mn(), s = c[0], d = c[1];
var g = mn(), h = g[0], p = g[1];
var w = mn(100), b = w[0], m = w[1];
var y = mn(100), S = y[0], C = y[1];
var x = mn((function() {
var c = yn(), s = c[0], d = c[1];
var g = yn(), h = g[0], p = g[1];
var w = yn(100), b = w[0], m = w[1];
var y = yn(100), S = y[0], C = y[1];
var x = yn((function() {
return u;
})), E = x[0], P = x[1];
var A = bn(r, e.Ur, dn(a, e)), T = A[0], z = A[1], L = A[2];
})), E = x[0], A = x[1];
var P = mn(r, e.Ur, dn(a, e)), T = P[0], z = P[1], L = P[2];
var D = e.Ur, H = D.K, I = D.rr, V = D.tr, j = D.ir, k = D.$, B = D.Z;
var q = T.$r, U = T.ra, N = T.Zr, Y = T.Gr, W = T.Xr;
var G = q.Qr;
@@ -2511,7 +2511,7 @@
} ];
};
var $ = function manageScrollbarsAutoHide(r, a) {
P();
A();
if (r) {
N(La);
} else {
@@ -2529,12 +2529,12 @@
v = t;
v && $(true);
};
var K = [ m, P, C, p, d, L, qr(H, "mouseover", J, {
P: true
}), qr(H, "mouseenter", J), qr(H, "mouseleave", (function() {
var K = [ m, A, C, p, d, L, qr(H, "pointerover", J, {
A: true
}), qr(H, "pointerenter", J), qr(H, "pointerleave", (function() {
v = false;
t && $(false);
})), qr(H, "mousemove", (function() {
})), qr(H, "pointermove", (function() {
n && s((function() {
m();
$(true);
@@ -2560,10 +2560,10 @@
var l = f.zr, c = f.Lr, s = f.Tr, d = f.br;
var g = $r(a, r, v);
var h = e();
var p = h.Pr, w = h.Cr, b = h.wr;
var p = h.Ar, w = h.Cr, b = h.wr;
var m = g("scrollbars.theme"), y = m[0], S = m[1];
var C = g("scrollbars.visibility"), O = C[0], x = C[1];
var E = g("scrollbars.autoHide"), P = E[0], A = E[1];
var E = g("scrollbars.autoHide"), A = E[0], P = E[1];
var T = g("scrollbars.autoHideDelay"), z = T[0];
var L = g("scrollbars.dragScroll"), D = L[0], H = L[1];
var M = g("scrollbars.clickScroll"), R = M[0], I = M[1];
@@ -2580,10 +2580,10 @@
N(y, true);
o = y;
}
if (A) {
n = "move" === P;
t = "leave" === P;
i = "never" !== P;
if (P) {
n = "move" === A;
t = "leave" === A;
i = "never" !== A;
$(!i, true);
}
if (H) {
@@ -2593,32 +2593,32 @@
N(Da, R);
}
if (j) {
var B = k(w.x, true);
var F = k(w.y, false);
var q = B && F;
N(Pa, !q);
var F = k(w.x, true);
var q = k(w.y, false);
var U = F && q;
N(Aa, !U);
}
if (V) {
Y(h);
W(h);
N(za, !p.x, true);
N(za, !p.y, false);
N(ya, b);
N(ya, b && !B);
}
}, Q, O.bind(0, K) ];
};
var Sn = new Set;
var Cn = new WeakMap;
var On = function addInstance(r, a) {
Cn.set(r, a);
Sn.add(r);
var Cn = new Set;
var On = new WeakMap;
var xn = function addInstance(r, a) {
On.set(r, a);
Cn.add(r);
};
var xn = function removeInstance(r) {
var En = function removeInstance(r) {
On.delete(r);
Cn.delete(r);
Sn.delete(r);
};
var En = function getInstance(r) {
return Cn.get(r);
var An = function getInstance(r) {
return On.get(r);
};
var Pn = function OverlayScrollbars(r, a, e) {
var n = false;
@@ -2626,26 +2626,26 @@
var o = ja();
var u = w(r);
var f = u ? r : r.target;
var l = En(f);
var l = An(f);
if (l) {
return l;
}
var c = o[Qa];
var d = function validateOptions(r) {
var a = r || {};
var e = c && c.A;
var e = c && c.P;
return e ? e(a, true) : a;
};
var g = P({}, i(), d(a));
var g = A({}, i(), d(a));
var h = Xr(e), p = h[0], b = h[1], m = h[2];
var y = tn(r, g), S = y[0], C = y[1], O = y[2];
var x = yn(r, g, C), T = x[0], z = x[1], L = x[2];
var x = Sn(r, g, C), T = x[0], z = x[1], L = x[2];
var D = function update(r, a) {
S(r, !!a);
};
var H = v(D.bind(0, {}, true));
var M = function destroy(r) {
xn(f);
En(f);
H();
L();
O();
@@ -2657,20 +2657,20 @@
options: function options(r) {
if (r) {
var a = Ia(g, d(r));
if (!A(a)) {
P(g, a);
if (!P(a)) {
A(g, a);
D(a);
}
}
return P({}, g);
return A({}, g);
},
on: p,
off: function off(r, a) {
r && a && b(r, a);
},
state: function state() {
var r = C(), a = r.Er, e = r.Pr, t = r.Cr, i = r.Ar, v = r.ar, o = r.mr, u = r.wr;
return P({}, {
var r = C(), a = r.Er, e = r.Ar, t = r.Cr, i = r.Pr, v = r.ar, o = r.mr, u = r.wr;
return A({}, {
overflowEdge: a,
overflowAmount: e,
overflowStyle: t,
@@ -2683,7 +2683,7 @@
},
elements: function elements() {
var r = C.Ur, a = r.J, e = r.K, n = r.ar, t = r.rr, i = r.er;
return P({}, {
return A({}, {
target: a,
host: e,
padding: n || t,
@@ -2712,7 +2712,7 @@
}
C.qr();
z.qr();
On(f, R);
xn(f, R);
m("initialized", [ R ]);
C.Fr((function(r, a, e) {
var n = r.pr, t = r.br, i = r.hr, v = r.zr, o = r.Lr, u = r.Tr, f = r._r, l = r.Or;
@@ -2736,7 +2736,7 @@
Pn.plugin = ka;
Pn.env = function() {
var r = be(), a = r.k, e = r.D, n = r.L, t = r.B, i = r.F, v = r.H, o = r.G, u = r.X, f = r.U, l = r.N, c = r.Y, s = r.W;
return P({}, {
return A({}, {
scrollbarsSize: a,
scrollbarsOverlaid: e,
scrollbarsHiding: n,
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/overlayscrollbars.ts
+56 -1
View File
@@ -26,6 +26,10 @@ import type {
InitialEventListeners as GeneralInitialEventListeners,
EventListener as GeneralEventListener,
} from 'support/eventListeners';
import {
ScrollbarsSetupElement,
ScrollbarStructure,
} from 'setups/scrollbarsSetup/scrollbarsSetup.elements';
export interface OverlayScrollbarsStatic {
(
@@ -65,12 +69,26 @@ export interface State {
destroyed: boolean;
}
export interface ScrollbarElements {
scrollbar: HTMLElement;
track: HTMLElement;
handle: HTMLElement;
}
export interface CloneableScrollbarElements extends ScrollbarElements {
clone(): ScrollbarElements;
}
export interface Elements {
target: HTMLElement;
host: HTMLElement;
padding: HTMLElement;
viewport: HTMLElement;
content: HTMLElement;
scrollOffsetElement: HTMLElement;
scrollEventElement: HTMLElement | Document;
scrollbarHorizontal: CloneableScrollbarElements;
scrollbarVertical: CloneableScrollbarElements;
}
export interface OnUpdatedEventListenerArgs {
@@ -231,7 +249,40 @@ export const OverlayScrollbars: OverlayScrollbarsStatic = (
);
},
elements() {
const { _target, _host, _padding, _viewport, _content } = structureState._elements;
const {
_target,
_host,
_padding,
_viewport,
_content,
_scrollOffsetElement,
_scrollEventElement,
} = structureState._elements;
const { _horizontal, _vertical } = scrollbarsState._elements;
const translateScrollbarStructure = (
scrollbarStructure: ScrollbarStructure
): ScrollbarElements => {
const { _handle, _track, _scrollbar } = scrollbarStructure;
return {
scrollbar: _scrollbar,
track: _track,
handle: _handle,
};
};
const translateScrollbarsSetupElement = (
scrollbarsSetupElement: ScrollbarsSetupElement
): CloneableScrollbarElements => {
const { _scrollbarStructures, _clone } = scrollbarsSetupElement;
const translatedStructure = translateScrollbarStructure(_scrollbarStructures[0]);
return assignDeep({}, translatedStructure, {
clone: () => {
const result = translateScrollbarStructure(_clone());
updateScrollbars({}, true, {});
return result;
},
});
};
return assignDeep(
{},
{
@@ -240,6 +291,10 @@ export const OverlayScrollbars: OverlayScrollbarsStatic = (
padding: _padding || _viewport,
viewport: _viewport,
content: _content || _viewport,
scrollOffsetElement: _scrollOffsetElement,
scrollEventElement: _scrollEventElement,
scrollbarHorizontal: translateScrollbarsSetupElement(_horizontal),
scrollbarVertical: translateScrollbarsSetupElement(_vertical),
}
);
},
packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.calculations.ts
+4 -2
View File
@@ -2,7 +2,8 @@ import { offsetSize } from 'support';
import { getEnvironment } from 'environment';
import type { StructureSetupState } from 'setups';
const { min, max, abs } = Math;
const { min, max, abs, round } = Math;
export const getScrollbarHandleLengthRatio = (
scrollbarHandle: HTMLElement,
scrollbarTrack: HTMLElement,
@@ -22,6 +23,7 @@ export const getScrollbarHandleLengthRatio = (
const trackSize = offsetSize(scrollbarTrack)[axis];
return max(0, min(1, handleSize / trackSize));
};
export const getScrollbarHandleOffsetRatio = (
scrollbarHandle: HTMLElement,
scrollbarTrack: HTMLElement,
@@ -34,7 +36,7 @@ export const getScrollbarHandleOffsetRatio = (
const axis = isHorizontal ? 'x' : 'y';
const scrollLeftTop = isHorizontal ? 'Left' : 'Top';
const { _overflowAmount } = structureSetupState;
const scrollPositionMax = Math.floor(_overflowAmount[axis]);
const scrollPositionMax = round(_overflowAmount[axis]);
const scrollPosition = abs(scrollOffsetElement[`scroll${scrollLeftTop}`]);
const handleRTL = isHorizontal && isRTL;
const rtlNormalizedScrollPosition = _rtlScrollBehavior.i
packages/overlayscrollbars/src/support/dom/dimensions.ts
+4 -3
View File
@@ -5,6 +5,7 @@ export interface WH<T = number> {
h: T;
}
const { round } = Math;
const elementHasDimensions = (elm: HTMLElement): boolean =>
!!(elm.offsetWidth || elm.offsetHeight || elm.getClientRects().length);
const zeroObj: WH = {
@@ -62,10 +63,10 @@ export const scrollSize = (elm: HTMLElement | false | null | undefined): WH =>
*/
export const fractionalSize = (elm: HTMLElement | false | null | undefined): WH => {
const cssHeight = parseFloat(style(elm, 'height')) || 0;
const cssWidth = parseFloat(style(elm, 'height')) || 0;
const cssWidth = parseFloat(style(elm, 'width')) || 0;
return {
w: cssWidth - Math.round(cssWidth),
h: cssHeight - Math.round(cssHeight),
w: cssWidth - round(cssWidth),
h: cssHeight - round(cssHeight),
};
};
packages/overlayscrollbars/src/support/dom/manipulation.ts
+22 -25
View File
@@ -15,37 +15,34 @@ const before = (
preferredAnchor: Node | false | null | undefined,
insertedElms: NodeCollection
): void => {
if (insertedElms) {
if (insertedElms && parentElm) {
let anchor: Node | false | null | undefined = preferredAnchor;
let fragment: DocumentFragment | Node | null | undefined;
// parent must be defined
if (parentElm) {
if (isArrayLike(insertedElms)) {
fragment = document.createDocumentFragment();
if (isArrayLike(insertedElms)) {
fragment = document.createDocumentFragment();
// append all insertedElms to the fragment and if one of these is the anchor, change the anchor
each(insertedElms, (insertedElm) => {
if (insertedElm === anchor) {
anchor = insertedElm.previousSibling;
}
fragment!.appendChild(insertedElm);
});
} else {
fragment = insertedElms;
}
// if the preferred anchor isn't null set it to a valid anchor
if (preferredAnchor) {
if (!anchor) {
anchor = parentElm.firstChild;
} else if (anchor !== preferredAnchor) {
anchor = anchor.nextSibling;
// append all insertedElms to the fragment and if one of these is the anchor, change the anchor
each(insertedElms, (insertedElm) => {
if (insertedElm === anchor) {
anchor = insertedElm.previousSibling;
}
}
parentElm.insertBefore(fragment, anchor || null);
fragment!.appendChild(insertedElm);
});
} else {
fragment = insertedElms;
}
// if the preferred anchor isn't null set it to a valid anchor
if (preferredAnchor) {
if (!anchor) {
anchor = parentElm.firstChild;
} else if (anchor !== preferredAnchor) {
anchor = anchor.nextSibling;
}
}
parentElm.insertBefore(fragment, anchor || null);
}
};