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

improve tests and code

Browse Source
This commit is contained in:
Rene
2022-07-11 14:48:50 +02:00
parent 1d9a2cf817
commit 60dd573cfc
13 changed files with 1050 additions and 886 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/overlayscrollbars/dist/overlayscrollbars.esm.js
Vendored
+507 -510
View File
File diff suppressed because it is too large Load Diff
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
+193 -192
View File
@@ -339,11 +339,11 @@
};
var M = [ "-webkit-", "-moz-", "-o-", "-ms-" ];
var P = [ "WebKit", "Moz", "O", "MS", "webkit", "moz", "o", "ms" ];
var F = {};
var R = {};
var N = function cssProperty(r) {
var a = R[r];
if (s(R, r)) {
var N = {};
var F = function cssProperty(r) {
var a = N[r];
if (s(N, r)) {
return a;
}
var e = I(r);
@@ -355,25 +355,25 @@
return void 0 !== t[r];
})));
}));
return R[r] = a || "";
return N[r] = a || "";
};
var j = function jsAPI(r) {
var a = F[r] || window[r];
if (s(F, r)) {
var a = R[r] || window[r];
if (s(R, r)) {
return a;
}
each(P, (function(e) {
a = a || window[e + I(r)];
return !a;
}));
F[r] = a;
R[r] = a;
return a;
};
var B = j("MutationObserver");
var V = j("IntersectionObserver");
var V = j("MutationObserver");
var B = j("IntersectionObserver");
var k = j("ResizeObserver");
var H = j("cancelAnimationFrame");
var U = j("requestAnimationFrame");
var U = j("cancelAnimationFrame");
var H = j("requestAnimationFrame");
var q = /[^\x20\t\r\n\f]+/g;
var W = function classListAction(r, a, e) {
var t;
@@ -434,7 +434,7 @@
};
var rr = function clearTimeouts(r) {
r && window.clearTimeout(r);
r && H(r);
r && U(r);
};
var ar = function noop() {};
var er = function debounce(r, a) {
@@ -465,7 +465,7 @@
if (v) {
var s = isFunction(f) ? f() : f;
var p = isNumber(s) && s >= 0;
var h = a > 0 ? c : U;
var h = a > 0 ? c : H;
var w = d(r);
var y = w || r;
var m = l.bind(0, y);
@@ -693,15 +693,15 @@
var Tr = Ir + "-flexbox-glue";
var Mr = Tr + "-max";
var Pr = "data-overlayscrollbars";
var Fr = Pr + "-overflow-x";
var Rr = Pr + "-overflow-y";
var Nr = "overflowVisible";
var Rr = Pr + "-overflow-x";
var Nr = Pr + "-overflow-y";
var Fr = "overflowVisible";
var jr = "viewportStyled";
var Br = "os-padding";
var Vr = "os-viewport";
var kr = Vr + "-arrange";
var Hr = "os-content";
var Ur = Vr + "-scrollbar-styled";
var Vr = "os-padding";
var Br = "os-viewport";
var kr = Br + "-arrange";
var Ur = "os-content";
var Hr = Br + "-scrollbar-styled";
var qr = "os-overflow-visible";
var Wr = "os-size-observer";
var Gr = Wr + "-appear";
@@ -791,9 +791,9 @@
};
var ca = function getNativeScrollbarStyling(r) {
var a = false;
var e = Y(r, Ur);
var e = Y(r, Hr);
try {
a = "none" === style(r, N("scrollbar-width")) || "none" === window.getComputedStyle(r, "::-webkit-scrollbar").getPropertyValue("display");
a = "none" === style(r, F("scrollbar-width")) || "none" === window.getComputedStyle(r, "::-webkit-scrollbar").getPropertyValue("display");
} catch (t) {}
e();
return a;
@@ -833,13 +833,7 @@
var a = window.screen.logicalXDPI || 1;
return window.devicePixelRatio || r / a;
};
var pa = function getDefaultInitializationStrategy(r) {
return {
A: !r,
D: false
};
};
var ha = function createEnvironment() {
var pa = function createEnvironment() {
var r = document, a = r.body;
var e = L('<div class="' + Ir + '"><div></div></div>');
var t = e[0];
@@ -855,7 +849,10 @@
x: 0 === l.x,
y: 0 === l.y
};
var h = pa(d);
var h = {
A: !d,
D: false
};
var w = assignDeep({}, na);
var y = {
L: l,
@@ -863,20 +860,20 @@
T: d,
M: "-1" === style(t, "zIndex"),
P: la(t, n),
F: da(t, n),
R: function _addListener(r) {
R: da(t, n),
N: function _addListener(r) {
return v("_", r);
},
N: assignDeep.bind(0, {}, h),
F: assignDeep.bind(0, {}, h),
j: function _setInitializationStrategy(r) {
assignDeep(h, r);
},
B: assignDeep.bind(0, {}, w),
V: function _setDefaultOptions(r) {
V: assignDeep.bind(0, {}, w),
B: function _setDefaultOptions(r) {
assignDeep(w, r);
},
k: assignDeep({}, h),
H: assignDeep({}, w)
U: assignDeep({}, w)
};
g(t, "style");
E(t);
@@ -919,20 +916,24 @@
}
return y;
};
var wa = function getEnvironment() {
var ha = function getEnvironment() {
if (!va) {
va = ha();
va = pa();
}
return va;
};
var wa = function resolveInitialization(r, a) {
return isFunction(r) ? r.apply(0, a) : r;
};
var ya = function staticInitializationElement(r, a, e, t) {
var n = t || (isFunction(e) ? e.apply(0, r) : e);
return (isFunction(n) ? n.apply(0, r) : n) || a.apply(0, r);
return wa(t || wa(e, r), r) || a.apply(0, r);
};
var ma = function dynamicInitializationElement(r, a, e, t) {
var n = isBoolean(t) || !!t;
var i = n ? t : isFunction(e) ? e.apply(0, r) : e;
return true === i || isNull(i) || isUndefined(i) || isFunction(i) ? a.apply(0, r) : i;
var n = wa(t, r);
if (isNull(n) || isUndefined(n)) {
n = wa(e, r);
}
return true === n || isNull(n) || isUndefined(n) ? a.apply(0, r) : n;
};
var ba = 0;
var _a = z.bind(0, "");
@@ -941,7 +942,7 @@
E(r);
};
var Ca = function createUniqueViewportArrangeElement() {
var r = wa(), a = r.T, e = r.I, t = r.M;
var r = ha(), a = r.T, e = r.I, t = r.M;
var n = !t && !a && (e.x || e.y);
var i = n ? document.createElement("style") : false;
if (i) {
@@ -951,12 +952,12 @@
return i;
};
var Oa = function addDataAttrHost(r, a) {
attr(r, Pr, a || "");
attr(r, Pr, a);
return g.bind(0, r, Pr);
};
var Aa = function createStructureSetupElements(r) {
var a = wa(), e = a.N, t = a.T;
var n = e(), o = n.U, u = n.q, s = n.A, p = n.D;
var a = ha(), e = a.F, t = a.T;
var n = e(), o = n.H, u = n.q, s = n.A, p = n.D;
var h = isHTMLElement(r);
var w = r;
var _ = h ? r : w.target;
@@ -965,19 +966,19 @@
var A = _.ownerDocument;
var z = A.body;
var L = A.defaultView;
var I = !!k && t;
var I = !!k && !S && t;
var T = ya.bind(0, [ _ ]);
var M = ma.bind(0, [ _ ]);
var P = T(_a, u, w.viewport);
var F = P === _;
var R = I && F;
var N = F && !R ? T(_a) : P;
var j = {
var P = [ T(_a, u, w.viewport), T(_a, u), T(_a) ].filter((function(r) {
return !I ? r !== _ : true;
}))[0];
var R = P === _;
var N = {
W: _,
U: S ? T(_a, o, w.host) : _,
q: N,
A: M(_a, s, w.padding),
D: M(_a, p, w.content),
H: S ? T(_a, o, w.host) : _,
q: P,
A: !R && M(_a, s, w.padding),
D: !R && M(_a, p, w.content),
G: !R && Ca(),
X: L,
Y: A,
@@ -988,72 +989,72 @@
rr: h,
ar: R,
er: function _viewportHasClass(r, a) {
return R ? d(N, Pr, a) : G(N, r);
return R ? d(P, Pr, a) : G(P, r);
},
tr: function _viewportAddRemoveClass(r, a, e) {
return R ? l(N, Pr, a, e) : (e ? Y : X)(N, r);
return R ? l(P, Pr, a, e) : (e ? Y : X)(P, r);
}
};
var B = c(j).reduce((function(r, a) {
var e = j[a];
var F = c(N).reduce((function(r, a) {
var e = N[a];
return v(r, e && !b(e) ? e : false);
}), []);
var V = function elementIsGenerated(r) {
return r ? i(B, r) > -1 : null;
var j = function elementIsGenerated(r) {
return r ? i(F, r) > -1 : null;
};
var H = j.W, U = j.U, q = j.A, W = j.q, $ = j.D, J = j.G;
var K = [];
var Z = S && V(U);
var Q = S ? H : m([ $, W, q, U, H ].find((function(r) {
return false === V(r);
var V = N.W, B = N.H, U = N.A, H = N.q, q = N.D, W = N.G;
var $ = [];
var J = S && j(B);
var K = S ? V : m([ q, H, U, B, V ].find((function(r) {
return false === j(r);
})));
var rr = $ || W;
var ar = Oa(U, R ? "viewport" : "host");
var er = Y(q, Br);
var tr = Y(W, !R && Vr);
var nr = Y($, Hr);
if (Z) {
D(H, U);
v(K, (function() {
D(U, H);
E(U);
var Z = q || H;
var Q = Oa(B, R ? "viewport" : "host");
var rr = Y(U, Vr);
var ar = Y(H, !R && Br);
var er = Y(q, Ur);
if (J) {
D(V, B);
v($, (function() {
D(B, V);
E(B);
}));
}
O(rr, Q);
O(U, q);
O(q || U, !R && W);
O(W, $);
v(K, (function() {
ar();
g(W, Fr);
g(W, Rr);
if (V($)) {
Sa($);
}
if (V(W)) {
Sa(W);
}
if (V(q)) {
O(Z, K);
O(B, U);
O(U || B, !R && H);
O(H, q);
v($, (function() {
Q();
g(H, Rr);
g(H, Nr);
if (j(q)) {
Sa(q);
}
if (j(H)) {
Sa(H);
}
if (j(U)) {
Sa(U);
}
rr();
ar();
er();
tr();
nr();
}));
if (t && !R) {
v(K, X.bind(0, W, Ur));
v($, X.bind(0, H, Hr));
}
if (J) {
x(W, J);
v(K, E.bind(0, J));
if (W) {
x(H, W);
v($, E.bind(0, W));
}
return [ j, f.bind(0, K) ];
return [ N, f.bind(0, $) ];
};
var xa = function createTrinsicUpdate(r, a) {
var e = r.D;
var t = a[0];
return function(r) {
var a = wa(), n = a.F;
var a = ha(), n = a.R;
var i = t(), v = i.nr;
var o = r.ir;
var u = (e || !n) && o;
@@ -1070,14 +1071,14 @@
};
var Da = function createPaddingUpdate(r, a) {
var e = a[0], t = a[1];
var n = r.U, i = r.A, v = r.q, o = r.ar;
var n = r.H, i = r.A, v = r.q, o = r.ar;
var u = createCache({
o: Z,
v: ur()
}, ur.bind(0, n, "padding", "")), f = u[0], s = u[1];
return function(r, a, n) {
var u = s(n), c = u[0], l = u[1];
var d = wa(), g = d.T, p = d.F;
var d = ha(), g = d.T, p = d.R;
var h = e(), w = h.sr;
var y = r.vr, m = r.ur, b = r.cr;
var _ = a("paddingAbsolute"), S = _[0], C = _[1];
@@ -1149,16 +1150,16 @@
h: n.h > t ? n.h : 0
};
};
var Fa = function conditionalClass(r, a, e) {
var Ra = function conditionalClass(r, a, e) {
return e ? Y(r, a) : X(r, a);
};
var Ra = function overflowIsVisible(r) {
var Na = function overflowIsVisible(r) {
return 0 === r.indexOf(za);
};
var Na = function createOverflowUpdate(r, a) {
var Fa = function createOverflowUpdate(r, a) {
var e = a[0], t = a[1];
var n = r.U, i = r.A, v = r.q, o = r.G, u = r.ar, f = r.tr;
var s = wa(), d = s.L, g = s.F, p = s.T, h = s.I;
var n = r.H, i = r.A, v = r.q, o = r.G, u = r.ar, f = r.tr;
var s = ha(), d = s.L, g = s.R, p = s.T, h = s.I;
var w = !u && !p && (h.x || h.y);
var y = createCache(Ta, gr.bind(0, v)), m = y[0], b = y[1];
var _ = createCache(Ta, dr.bind(0, v)), S = _[0], C = _[1];
@@ -1215,9 +1216,9 @@
};
var I = function setViewportOverflowState(r, a, e, t) {
var n = function setAxisOverflowStyle(r, a) {
var e = Ra(r);
var e = Na(r);
var t = a && e && r.replace(za + "-", "") || "";
return [ a && !e ? r : "", Ra(t) ? "hidden" : t ];
return [ a && !e ? r : "", Na(t) ? "hidden" : t ];
};
var i = n(e.x, a.x), v = i[0], o = i[1];
var u = n(e.y, a.y), f = u[0], s = u[1];
@@ -1315,37 +1316,37 @@
};
return function(r, a, o) {
var s = r.vr, c = r.mr, d = r.ur, w = r.gr, y = r.ir, _ = r.cr;
var O = e(), D = O.nr, F = O.sr;
var R = a("nativeScrollbarsOverlaid.show"), N = R[0], j = R[1];
var B = a("overflow"), V = B[0], k = B[1];
var H = N && h.x && h.y;
var U = !u && !g && (s || d || c || j || y);
var q = Ra(V.x);
var W = Ra(V.y);
var O = e(), D = O.nr, R = O.sr;
var N = a("nativeScrollbarsOverlaid.show"), F = N[0], j = N[1];
var V = a("overflow"), B = V[0], k = V[1];
var U = F && h.x && h.y;
var H = !u && !g && (s || d || c || j || y);
var q = Na(B.x);
var W = Na(B.y);
var G = q || W;
var X = b(o);
var Y = C(o);
var $ = x(o);
var J;
if (j && p) {
f(Ur, jr, !H);
f(Hr, jr, !U);
}
if (U) {
J = L(H);
if (H) {
J = L(U);
z(J, D);
}
if (s || w || d || _ || j) {
if (G) {
f(qr, Nr, false);
f(qr, Fr, false);
}
var K = P(H, F, J), Z = K[0], Q = K[1];
var K = P(U, R, J), Z = K[0], Q = K[1];
var rr = X = m(o), ar = rr[0], er = rr[1];
var tr = Y = S(o), nr = tr[0], ir = tr[1];
var vr = lr(v);
var or = nr;
var ur = vr;
Z();
if ((ir || er || j) && Q && !H && T(Q, nr, ar, F)) {
if ((ir || er || j) && Q && !U && T(Q, nr, ar, R)) {
ur = lr(v);
or = dr(v);
}
@@ -1365,7 +1366,7 @@
y: sr.h > 0
};
var _r = q && W && (br.x || br.y) || q && br.x && !br.y || W && br.y && !br.x;
if (w || _ || mr || hr || cr || k || j || U) {
if (w || _ || mr || hr || cr || k || j || H) {
var Sr = {
marginRight: 0,
marginBottom: 0,
@@ -1374,25 +1375,25 @@
overflowY: "",
overflowX: ""
};
var Cr = I(H, br, V, Sr);
var Or = T(Cr, pr, yr, F);
var Cr = I(U, br, B, Sr);
var Or = T(Cr, pr, yr, R);
if (!u) {
M(Cr, F, Or, Sr);
M(Cr, R, Or, Sr);
}
if (U) {
if (H) {
z(Cr, D);
}
if (u) {
attr(n, Fr, Sr.overflowX);
attr(n, Rr, Sr.overflowY);
attr(n, Rr, Sr.overflowX);
attr(n, Nr, Sr.overflowY);
} else {
style(v, Sr);
}
}
l(n, Pr, Nr, _r);
Fa(i, qr, _r);
!u && Fa(v, qr, G);
var Ar = E(L(H).wr), xr = Ar[0], Dr = Ar[1];
l(n, Pr, Fr, _r);
Ra(i, qr, _r);
!u && Ra(v, qr, G);
var Ar = E(L(U).wr), xr = Ar[0], Dr = Ar[1];
t({
wr: xr,
br: {
@@ -1418,11 +1419,11 @@
}));
return t;
};
var Ba = function createStructureSetupUpdate(r, a) {
var Va = function createStructureSetupUpdate(r, a) {
var e = r.q;
var t = wa(), n = t.T, i = t.I, v = t.F;
var t = ha(), n = t.T, i = t.I, v = t.R;
var o = !n && (i.x || i.y);
var u = [ xa(r, a), Da(r, a), Na(r, a) ];
var u = [ xa(r, a), Da(r, a), Fa(r, a) ];
return function(r, a, t) {
var n = ja(assignDeep({
vr: false,
@@ -1450,10 +1451,10 @@
return c;
};
};
var Va = "animationstart";
var Ba = "animationstart";
var ka = "scroll";
var Ha = 3333333;
var Ua = function getElmDirectionIsRTL(r) {
var Ua = 3333333;
var Ha = function getElmDirectionIsRTL(r) {
return "rtl" === style(r, "direction");
};
var qa = function domRectHasDimensions(r) {
@@ -1461,11 +1462,11 @@
};
var Wa = function createSizeObserver(r, a, e) {
var t = e || {}, n = t.Or, i = void 0 === n ? false : n, o = t.Ar, u = void 0 === o ? false : o;
var s = wa(), c = s.P;
var s = ha(), c = s.P;
var l = L('<div class="' + Wr + '"><div class="' + Xr + '"></div></div>');
var d = l[0];
var g = d.firstChild;
var p = Ua.bind(0, d);
var p = Ha.bind(0, d);
var h = createCache({
v: void 0,
u: true,
@@ -1492,9 +1493,9 @@
v = true === r;
}
if (i && o) {
var p = t ? r[0] : Ua(d);
scrollLeft(d, p ? c.n ? -Ha : c.i ? 0 : Ha : Ha);
scrollTop(d, Ha);
var p = t ? r[0] : Ha(d);
scrollLeft(d, p ? c.n ? -Ua : c.i ? 0 : Ua : Ua);
scrollTop(d, Ua);
}
if (!n) {
a({
@@ -1524,15 +1525,15 @@
var T = cr(x);
var M = T;
var P = false;
var F;
var R = function reset() {
scrollLeft(z, Ha);
scrollTop(z, Ha);
scrollLeft(D, Ha);
scrollTop(D, Ha);
var R;
var N = function reset() {
scrollLeft(z, Ua);
scrollTop(z, Ua);
scrollLeft(D, Ua);
scrollTop(D, Ua);
};
var N = function onResized(r) {
F = 0;
var F = function onResized(r) {
R = 0;
if (P) {
T = M;
y(true === r);
@@ -1543,30 +1544,30 @@
P = !r || !J(M, T);
if (r) {
Cr(r);
if (P && !F) {
H(F);
F = U(N);
if (P && !R) {
U(R);
R = H(F);
}
} else {
N(false === r);
F(false === r);
}
R();
N();
};
v(m, [ br(z, ka, j), br(D, ka, j) ]);
style(I, {
width: Ha,
height: Ha
width: Ua,
height: Ua
});
R();
b = u ? j.bind(0, false) : R;
N();
b = u ? j.bind(0, false) : N;
}
if (i) {
_ = createCache({
v: !p()
}, p);
var B = _, V = B[0];
var V = _, B = V[0];
v(m, br(d, ka, (function(r) {
var a = V();
var a = B();
var e = a[0], t = a[1];
if (t) {
X(g, "ltr rtl");
@@ -1582,7 +1583,7 @@
}
if (b) {
Y(d, Gr);
v(m, br(d, Va, b, {
v(m, br(d, Ba, b, {
O: !!k
}));
}
@@ -1610,8 +1611,8 @@
}
}
};
if (V) {
var u = new V((function(r) {
if (B) {
var u = new B((function(r) {
if (r && r.length > 0) {
o(r.pop());
}
@@ -1744,7 +1745,7 @@
e(s, p);
}
};
var O = new B(C);
var O = new V(C);
O.observe(r, {
attributes: true,
attributeOldValue: true,
@@ -1767,7 +1768,7 @@
} ];
};
var Ja = "[" + Pr + "]";
var Ka = "." + Vr;
var Ka = "." + Br;
var Za = [ "tabindex" ];
var Qa = [ "wrap", "cols", "rows" ];
var re = [ "id", "class", "style", "open" ];
@@ -1776,8 +1777,8 @@
var n;
var v;
var o = a[1];
var u = r.U, f = r.q, s = r.D, l = r.K, d = r.ar, p = r.er, h = r.tr;
var w = wa(), y = w.T, m = w.F;
var u = r.H, f = r.q, s = r.D, l = r.K, d = r.ar, p = r.er, h = r.tr;
var w = ha(), y = w.T, m = w.R;
var b = createCache({
o: J,
v: {
@@ -1785,12 +1786,12 @@
h: 0
}
}, (function() {
var r = p(qr, Nr);
r && h(qr, Nr);
var r = p(qr, Fr);
r && h(qr, Fr);
var a = dr(s);
var e = dr(f);
var t = gr(f);
r && h(qr, Nr, true);
r && h(qr, Fr, true);
return {
w: e.w + a.w + t.w,
h: e.h + a.h + t.h
@@ -1972,7 +1973,7 @@
f(n, [ r, a || {}, !!e ]);
};
var o = Aa(r), u = o[0], s = o[1];
var c = Ba(u, t);
var c = Va(u, t);
var l = ae(u, t, (function(r) {
v(c(e, r));
})), d = l[0], g = l[1];
@@ -1980,7 +1981,7 @@
p.Pr = function(r) {
n.add(r);
};
p.Fr = u;
p.Rr = u;
return [ function(r, e) {
var t = zr(a, r, e);
d(t);
@@ -1998,27 +1999,27 @@
O(a, e);
O(e, t);
return {
Rr: a,
Nr: e,
Nr: a,
Fr: e,
jr: t
};
};
var ie = function createScrollbarsSetupElements(r, a) {
var e = wa(), t = e.N;
var n = t(), i = n.Br;
var v = a.W, o = a.U, u = a.q, f = a.rr;
var e = ha(), t = e.F;
var n = t(), i = n.Vr;
var v = a.W, o = a.H, u = a.q, f = a.rr;
var s = !f && r.scrollbarsSlot;
var c = ma([ v, o, u ], (function() {
return o;
}), i, s);
var l = ne(Qr);
var d = ne(ra);
var g = l.Rr;
var p = d.Rr;
var g = l.Nr;
var p = d.Nr;
O(c, g);
O(c, p);
return [ {
Vr: l,
Br: l,
kr: d
}, E.bind(0, [ g, p ]) ];
};
@@ -2027,7 +2028,7 @@
var n = t[0];
var i = ie(r, e), v = i[0], o = i[1];
var u = n.bind(0);
u.Fr = v;
u.Rr = v;
return [ function(r, e) {
var t = zr(a, r, e);
console.log(t);
@@ -2059,7 +2060,7 @@
return le.get(r);
};
var he = function OverlayScrollbars(r, a, e) {
var t = wa(), n = t.B, i = t.I, v = t.R;
var t = ha(), n = t.V, i = t.I, v = t.N;
var o = ue();
var u = isHTMLElement(r) ? r : r.target;
var f = pe(u);
@@ -2069,7 +2070,7 @@
var s = o[se];
var l = function validateOptions(r) {
var a = r || {};
var e = s && s.Hr;
var e = s && s.Ur;
return e ? e(a, true) : a;
};
var d = assignDeep({}, n(), l(a));
@@ -2078,7 +2079,7 @@
w("initializationWithdrawn");
}
var y = te(r, d), m = y[0], b = y[1], _ = y[2];
var S = ve(r, d, b.Fr), C = S[0], O = S[2];
var S = ve(r, d, b.Rr), C = S[0], O = S[2];
var A = function update(r, a) {
m(r, a);
C(r, a);
@@ -2124,7 +2125,7 @@
});
},
elements: function elements() {
var r = b.Fr, a = r.W, e = r.U, t = r.A, n = r.q, i = r.D;
var r = b.Rr, a = r.W, e = r.H, t = r.A, n = r.q, i = r.D;
return assignDeep({}, {
target: a,
host: e,
@@ -2158,7 +2159,7 @@
};
he.plugin = fe;
he.env = function() {
var r = wa(), a = r.L, e = r.I, t = r.T, n = r.P, i = r.F, v = r.M, o = r.k, u = r.H, f = r.N, s = r.j, c = r.B, l = r.V;
var r = ha(), a = r.L, e = r.I, t = r.T, n = r.P, i = r.R, v = r.M, o = r.k, u = r.U, f = r.F, s = r.j, c = r.V, l = r.B;
return assignDeep({}, {
scrollbarSize: a,
scrollbarIsOverlaid: e,
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/environment.ts
+4 -8
View File
@@ -147,13 +147,6 @@ const getWindowDPR = (): number => {
return window.devicePixelRatio || dDPI / sDPI;
};
const getDefaultInitializationStrategy = (
nativeScrollbarStyling: boolean
): InitializationStrategy => ({
_padding: !nativeScrollbarStyling,
_content: false,
});
const createEnvironment = (): InternalEnvironment => {
const { body } = document;
const envDOM = createDOM(`<div class="${classNameEnvironment}"><div></div></div>`);
@@ -170,7 +163,10 @@ const createEnvironment = (): InternalEnvironment => {
x: nativeScrollbarSize.x === 0,
y: nativeScrollbarSize.y === 0,
};
const initializationStrategy = getDefaultInitializationStrategy(nativeScrollbarStyling);
const initializationStrategy = {
_padding: !nativeScrollbarStyling,
_content: false,
};
const defaultDefaultOptions = assignDeep({}, defaultOptions);
const env: InternalEnvironment = {
packages/overlayscrollbars/src/initialization.ts
+21 -20
View File
@@ -1,4 +1,4 @@
import { isFunction, isBoolean, isNull, isUndefined } from 'support';
import { isFunction, isNull, isUndefined } from 'support';
import type {
StructureInitialization,
StructureInitializationStrategy,
@@ -47,23 +47,20 @@ export type DefaultInitializtationElementStrategy<
? (...args: P) => HTMLElement
: never;
const resolveInitialization = <T>(value: any, args: any): T =>
isFunction(value) ? value.apply(0, args) : value;
const staticInitializationElement = <T extends StaticInitializationElement<any>>(
args: Parameters<Extract<T, (...args: any[]) => any>>,
defaultStaticInitializationElement: DefaultInitializtationElementStrategy<T>,
staticInitializationElementStrategy?: InitializtationElementStrategy<T>,
staticInitializationElementValue?: T | false
): HTMLElement => {
const result =
): HTMLElement =>
resolveInitialization<StaticInitialization>(
staticInitializationElementValue ||
(isFunction(staticInitializationElementStrategy)
? staticInitializationElementStrategy.apply(0, args)
: staticInitializationElementStrategy);
return (
(isFunction(result) ? result.apply(0, args) : result) ||
defaultStaticInitializationElement.apply(0, args)
);
};
resolveInitialization<StaticInitialization>(staticInitializationElementStrategy, args),
args
) || defaultStaticInitializationElement.apply(0, args);
const dynamicInitializationElement = <T extends DynamicInitializationElement<any>>(
args: Parameters<Extract<T, (...args: any[]) => any>>,
@@ -71,15 +68,19 @@ const dynamicInitializationElement = <T extends DynamicInitializationElement<any
dynamicInitializationElementStrategy?: InitializtationElementStrategy<T>,
dynamicInitializationElementValue?: T | false
): HTMLElement | false => {
const takeInitializationValue =
isBoolean(dynamicInitializationElementValue) || !!dynamicInitializationElementValue;
const result = takeInitializationValue
? (dynamicInitializationElementValue as boolean | HTMLElement)
: isFunction(dynamicInitializationElementStrategy)
? dynamicInitializationElementStrategy.apply(0, args)
: dynamicInitializationElementStrategy;
let result = resolveInitialization<DynamicInitialization>(
dynamicInitializationElementValue,
args
);
return result === true || isNull(result) || isUndefined(result) || isFunction(result)
if (isNull(result) || isUndefined(result)) {
result = resolveInitialization<DynamicInitialization>(
dynamicInitializationElementStrategy,
args
);
}
return result === true || isNull(result) || isUndefined(result)
? defaultDynamicInitializationElement.apply(0, args)
: result;
};
packages/overlayscrollbars/src/setups/structureSetup/structureSetup.elements.ts
+29 -24
View File
@@ -92,8 +92,8 @@ const createUniqueViewportArrangeElement = (): HTMLStyleElement | false => {
return result;
};
const addDataAttrHost = (elm: HTMLElement, value?: string | false | null | undefined) => {
attr(elm, dataAttributeHost, value || '');
const addDataAttrHost = (elm: HTMLElement, value: string) => {
attr(elm, dataAttributeHost, value);
return removeAttr.bind(0, elm, dataAttributeHost);
};
@@ -117,7 +117,7 @@ export const createStructureSetupElements = (
const ownerDocument = targetElement!.ownerDocument;
const bodyElm = ownerDocument.body as HTMLBodyElement;
const wnd = ownerDocument.defaultView as Window;
const singleElmSupport = !!ResizeObserverConstructor && _nativeScrollbarStyling;
const singleElmSupport = !!ResizeObserverConstructor && !isTextarea && _nativeScrollbarStyling;
const staticInitializationElement =
generalStaticInitializationElement<StructureStaticInitializationElement>.bind(0, [
targetElement,
@@ -126,17 +126,18 @@ export const createStructureSetupElements = (
generalDynamicInitializationElement<StructureDynamicInitializationElement>.bind(0, [
targetElement,
]);
const potentialViewportElement = staticInitializationElement(
createNewDiv,
viewportInitializationStrategy,
targetStructureInitialization.viewport
);
const potentiallySingleElm = potentialViewportElement === targetElement;
const viewportIsTarget = singleElmSupport && potentiallySingleElm;
const viewportElement =
potentiallySingleElm && !viewportIsTarget
? staticInitializationElement(createNewDiv)
: potentialViewportElement;
const viewportElement = [
staticInitializationElement(
createNewDiv,
viewportInitializationStrategy,
targetStructureInitialization.viewport
),
staticInitializationElement(createNewDiv, viewportInitializationStrategy),
staticInitializationElement(createNewDiv),
].filter((potentialViewport) =>
!singleElmSupport ? potentialViewport !== targetElement : true
)[0];
const viewportIsTarget = viewportElement === targetElement;
const evaluatedTargetObj: StructureSetupElementsObj = {
_target: targetElement,
_host: isTextarea
@@ -147,16 +148,20 @@ export const createStructureSetupElements = (
)
: (targetElement as HTMLElement),
_viewport: viewportElement,
_padding: dynamicInitializationElement(
createNewDiv,
paddingInitializationStrategy,
targetStructureInitialization.padding
),
_content: dynamicInitializationElement(
createNewDiv,
contentInitializationStrategy,
targetStructureInitialization.content
),
_padding:
!viewportIsTarget &&
dynamicInitializationElement(
createNewDiv,
paddingInitializationStrategy,
targetStructureInitialization.padding
),
_content:
!viewportIsTarget &&
dynamicInitializationElement(
createNewDiv,
contentInitializationStrategy,
targetStructureInitialization.content
),
_viewportArrange: !viewportIsTarget && createUniqueViewportArrangeElement(),
_windowElm: wnd,
_documentElm: ownerDocument,
packages/overlayscrollbars/src/support/dom/attribute.ts
+14
View File
@@ -39,6 +39,13 @@ export function attr(
elm && elm.setAttribute(attrName, value);
}
/**
* Treats the given attribute like the "class" attribute and adds or removes the given value from it.
* @param elm The element.
* @param attrName The attributeName to which the value shall be added or removed.
* @param value The value which shall be added or removed.
* @param add True if the value shall be added, false otherwise.
*/
export const attrClass = (
elm: HTMLElement | false | null | undefined,
attrName: string,
@@ -52,6 +59,13 @@ export const attrClass = (
attr(elm, attrName, from(currValuesSet).join(' ').trim());
};
/**
* Treats the given attribute like the "class" attribute and checks if the given value is in it.
* @param elm The element.
* @param attrName The attributeName from which the content shall be checked.
* @param value The value.
* @returns True if the given attribute has the value in it, false otherwise.
*/
export const hasAttrClass = (
elm: HTMLElement | false | null | undefined,
attrName: string,
packages/overlayscrollbars/tests/jest/setups/structureSetup/structureSetup.elements.test.ts
+204 -127
View File
@@ -1,3 +1,5 @@
import { hasClass, isFunction, isHTMLElement } from 'support';
import { dataAttributeHost } from 'classnames';
import { InternalEnvironment } from 'environment';
import {
createStructureSetupElements,
@@ -9,13 +11,20 @@ import type {
StructureStaticInitializationElement,
StructureDynamicInitializationElement,
} from 'setups/structureSetup/structureSetup.initialization';
import { isHTMLElement } from 'support';
const mockGetEnvironment = jest.fn();
jest.mock('environment', () => ({
getEnvironment: jest.fn().mockImplementation(() => mockGetEnvironment()),
}));
jest.mock('support/compatibility/apis', () => {
const originalModule = jest.requireActual('support/compatibility/apis');
return {
...originalModule,
ResizeObserverConstructor: true,
};
});
interface StructureSetupElementsProxy {
input: InitializationTarget;
elements: StructureSetupElementsObj;
@@ -67,31 +76,39 @@ const getElements = (textarea?: boolean) => {
};
};
const assertCorrectDOMStructure = (textarea?: boolean) => {
const assertCorrectDOMStructure = (textarea: boolean, viewportIsTarget: boolean) => {
const { target, host, padding, viewport, content } = getElements(textarea);
expect(host).toBeTruthy();
expect(viewport).toBeTruthy();
expect(viewport.parentElement).toBe(padding || host);
if (content) {
expect(content.parentElement).toBe(viewport);
}
if (padding) {
expect(padding.parentElement).toBe(host);
}
expect(host.parentElement).toBe(document.body);
expect(host.previousElementSibling).toBe(document.querySelector('nav'));
expect(host.nextElementSibling).toBe(document.querySelector('footer'));
const contentElm = content || viewport;
if (textarea) {
expect(target.parentElement).toBe(contentElm);
expect(contentElm.innerHTML).toBe(textareaContent);
} else {
if (viewportIsTarget) {
expect(target).toBe(host);
expect(contentElm.innerHTML).toBe(dynamicContent);
expect(host).toBeTruthy();
expect(padding).toBeFalsy();
expect(viewport).toBeFalsy();
expect(content).toBeFalsy();
} else {
expect(host).toBeTruthy();
expect(viewport).toBeTruthy();
expect(viewport.parentElement).toBe(padding || host);
if (content) {
expect(content.parentElement).toBe(viewport);
}
if (padding) {
expect(padding.parentElement).toBe(host);
}
expect(host.parentElement).toBe(document.body);
expect(host.previousElementSibling).toBe(document.querySelector('nav'));
expect(host.nextElementSibling).toBe(document.querySelector('footer'));
const contentElm = content || viewport;
if (textarea) {
expect(target.parentElement).toBe(contentElm);
expect(contentElm.innerHTML).toBe(textareaContent);
} else {
expect(target).toBe(host);
expect(contentElm.innerHTML).toBe(dynamicContent);
}
}
};
@@ -112,7 +129,16 @@ const assertCorrectSetupElements = (
environment: InternalEnvironment
): [StructureSetupElementsObj, () => void] => {
const { input, elements, destroy } = setupElementsProxy;
const { _target, _host, _padding, _viewport, _content } = elements;
const {
_target,
_host,
_padding,
_viewport,
_content,
_viewportIsTarget,
_viewportHasClass,
_viewportAddRemoveClass,
} = elements;
const { target, host, padding, viewport, content } = getElements(textarea);
const isTextarea = target.matches('textarea');
const isBody = target.matches('body');
@@ -122,21 +148,29 @@ const assertCorrectSetupElements = (
expect(_target).toBe(target);
expect(_host).toBe(host);
if (padding || _padding) {
if (_viewportIsTarget) {
expect(padding).toBeFalsy();
expect(_padding).toBeFalsy();
} else if (padding || _padding) {
expect(_padding).toBe(padding);
} else {
expect(padding).toBeFalsy();
expect(_padding).toBeFalsy();
}
if (viewport || _viewport) {
if (_viewportIsTarget) {
expect(_viewport).toBe(_target);
} else if (viewport || _viewport) {
expect(_viewport).toBe(viewport);
} else {
expect(viewport).toBeFalsy();
expect(_viewport).toBeFalsy();
}
if (content || _content) {
if (_viewportIsTarget) {
expect(content).toBeFalsy();
expect(_content).toBeFalsy();
} else if (content || _content) {
expect(_content).toBe(content);
} else {
expect(content).toBeFalsy();
@@ -166,14 +200,18 @@ const assertCorrectSetupElements = (
const styleElm = document.querySelector('style');
const checkStrategyDependendElements = (
elm: Element | null,
input: StructureStaticInitializationElement | StructureDynamicInitializationElement,
inputStrategy: StructureStaticInitializationElement | StructureDynamicInitializationElement,
isStaticStrategy: boolean,
strategy:
| InitializtationElementStrategy<StructureStaticInitializationElement>
| InitializtationElementStrategy<StructureDynamicInitializationElement>
| InitializtationElementStrategy<StructureDynamicInitializationElement>,
kind: 'padding' | 'viewport' | 'content' | 'host'
) => {
const input = isFunction(inputStrategy) ? inputStrategy(target) : inputStrategy;
if (input) {
expect(elm).toBeTruthy();
if (!_viewportIsTarget) {
expect(elm).toBeTruthy();
}
} else {
if (input === false) {
expect(elm).toBeFalsy();
@@ -184,7 +222,13 @@ const assertCorrectSetupElements = (
strategy as InitializtationElementStrategy<StructureStaticInitializationElement>;
if (typeof strategy === 'function') {
const result = strategy(target);
if (result) {
if (_viewportIsTarget) {
if (kind === 'host') {
expect(elm).toBeTruthy();
} else {
expect(elm).toBeFalsy();
}
} else if (result && !isTextarea) {
expect(result).toBe(elm);
} else {
expect(elm).toBeTruthy();
@@ -195,12 +239,17 @@ const assertCorrectSetupElements = (
} else {
strategy =
strategy as InitializtationElementStrategy<StructureDynamicInitializationElement>;
expect(strategy).not.toBe(null);
expect(strategy).not.toBe(undefined);
if (typeof strategy === 'function') {
const result = strategy(target);
const resultIsBoolean = typeof result === 'boolean';
if (resultIsBoolean) {
if (_viewportIsTarget) {
if (kind === 'host') {
expect(elm).toBeTruthy();
} else {
expect(elm).toBeFalsy();
}
} else if (resultIsBoolean) {
if (result) {
expect(elm).toBeTruthy();
} else {
@@ -231,10 +280,10 @@ const assertCorrectSetupElements = (
}
if (inputIsElement) {
checkStrategyDependendElements(padding, undefined, false, paddingInitStrategy);
checkStrategyDependendElements(content, undefined, false, contentInitStrategy);
checkStrategyDependendElements(viewport, undefined, true, viewportInitStrategy);
checkStrategyDependendElements(host, undefined, true, hostInitStrategy);
checkStrategyDependendElements(padding, undefined, false, paddingInitStrategy, 'padding');
checkStrategyDependendElements(content, undefined, false, contentInitStrategy, 'content');
checkStrategyDependendElements(viewport, undefined, true, viewportInitStrategy, 'viewport');
checkStrategyDependendElements(host, undefined, true, hostInitStrategy, 'host');
} else {
const {
padding: inputPadding,
@@ -242,10 +291,30 @@ const assertCorrectSetupElements = (
viewport: inputViewport,
host: inputHost,
} = inputAsObj;
checkStrategyDependendElements(padding, inputPadding, false, paddingInitStrategy);
checkStrategyDependendElements(content, inputContent, false, contentInitStrategy);
checkStrategyDependendElements(viewport, inputViewport, true, viewportInitStrategy);
checkStrategyDependendElements(host, inputHost, true, hostInitStrategy);
checkStrategyDependendElements(padding, inputPadding, false, paddingInitStrategy, 'padding');
checkStrategyDependendElements(content, inputContent, false, contentInitStrategy, 'content');
checkStrategyDependendElements(viewport, inputViewport, true, viewportInitStrategy, 'viewport');
checkStrategyDependendElements(host, inputHost, true, hostInitStrategy, 'host');
}
const className = 'clazz';
const attrName = 'attr';
_viewportAddRemoveClass(className, attrName, true);
if (_viewportIsTarget) {
expect(_host.getAttribute(dataAttributeHost)!.indexOf(attrName) >= 0).toBe(true);
expect(_viewportHasClass('', attrName)).toBe(true);
} else {
expect(hasClass(_viewport, className)).toBe(true);
expect(_viewportHasClass(className, '')).toBe(true);
}
_viewportAddRemoveClass(className, attrName);
if (_viewportIsTarget) {
expect(_host.getAttribute(dataAttributeHost)!.indexOf(attrName) >= 0).toBe(false);
expect(_viewportHasClass('', attrName)).toBe(false);
} else {
expect(hasClass(_viewport, className)).toBe(false);
expect(_viewportHasClass(className, '')).toBe(false);
}
return [elements, destroy];
@@ -294,7 +363,6 @@ const envInitStrategyMin = {
_viewport: () => null,
_content: () => false,
_padding: false,
_scrollbarsSlot: null,
}),
},
};
@@ -307,7 +375,6 @@ const envInitStrategyMax = {
_viewport: null,
_content: true,
_padding: () => true,
_scrollbarsSlot: null,
}),
},
};
@@ -320,7 +387,16 @@ const envInitStrategyAssigned = {
_viewport: (target: HTMLElement) => target.querySelector('#viewport') as HTMLElement,
_content: (target: HTMLElement) => target.querySelector<HTMLElement>('#content'),
_padding: (target: HTMLElement) => target.querySelector<HTMLElement>('#padding'),
_scrollbarsSlot: null,
}),
},
};
const envInitStrategyViewportIsTarget = {
name: 'initialization strategy assigned',
env: {
...env,
_nativeScrollbarStyling: true,
_getInitializationStrategy: () => ({
_viewport: (target: HTMLElement) => target,
}),
},
};
@@ -335,6 +411,7 @@ describe('structureSetup', () => {
envInitStrategyMin,
envInitStrategyMax,
envInitStrategyAssigned,
envInitStrategyViewportIsTarget,
].forEach((envWithName) => {
const { env: currEnv, name } = envWithName;
describe(`Environment: ${name}`, () => {
@@ -347,23 +424,23 @@ describe('structureSetup', () => {
describe('basic', () => {
test('Element', () => {
const snapshot = fillBody(isTextarea);
const [, destroy] = assertCorrectSetupElements(
const [elements, destroy] = assertCorrectSetupElements(
isTextarea,
createStructureSetupProxy(getTarget(isTextarea)),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
assertCorrectDestroy(snapshot, destroy);
});
test('Object', () => {
const snapshot = fillBody(isTextarea);
const [, destroy] = assertCorrectSetupElements(
const [elements, destroy] = assertCorrectSetupElements(
isTextarea,
createStructureSetupProxy({ target: getTarget(isTextarea) }),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
assertCorrectDestroy(snapshot, destroy);
});
});
@@ -376,16 +453,16 @@ describe('structureSetup', () => {
(content, hostId) =>
`<div id="${hostId}"><div id="padding">${content}</div></div>`
);
const [, destroy] = assertCorrectSetupElements(
const [elements, destroy] = assertCorrectSetupElements(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
padding: document.querySelector<HTMLElement>('#padding')!,
padding: () => document.querySelector<HTMLElement>('#padding')!,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
assertCorrectDestroy(snapshot, destroy);
});
@@ -395,16 +472,16 @@ describe('structureSetup', () => {
(content, hostId) =>
`<div id="${hostId}"><div id="viewport">${content}</div></div>`
);
const [, destroy] = assertCorrectSetupElements(
const [elements, destroy] = assertCorrectSetupElements(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
host: () => document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
viewport: document.querySelector<HTMLElement>('#viewport')!,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
assertCorrectDestroy(snapshot, destroy);
});
@@ -414,7 +491,7 @@ describe('structureSetup', () => {
(content, hostId) =>
`<div id="${hostId}"><div id="content">${content}</div></div>`
);
const [, destroy] = assertCorrectSetupElements(
const [elements, destroy] = assertCorrectSetupElements(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
@@ -423,7 +500,7 @@ describe('structureSetup', () => {
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
assertCorrectDestroy(snapshot, destroy);
});
});
@@ -435,18 +512,18 @@ describe('structureSetup', () => {
(content, hostId) =>
`<div id="${hostId}"><div id="padding"><div id="viewport"><div id="content">${content}</div></div></div></div>`
);
const [, destroy] = assertCorrectSetupElements(
const [elements, destroy] = assertCorrectSetupElements(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
padding: document.querySelector<HTMLElement>('#padding')!,
viewport: document.querySelector<HTMLElement>('#viewport')!,
content: document.querySelector<HTMLElement>('#content')!,
content: () => document.querySelector<HTMLElement>('#content')!,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
assertCorrectDestroy(snapshot, destroy);
});
@@ -456,17 +533,17 @@ describe('structureSetup', () => {
(content, hostId) =>
`<div id="${hostId}"><div id="padding"><div id="viewport">${content}</div></div></div>`
);
const [, destroy] = assertCorrectSetupElements(
const [elements, destroy] = assertCorrectSetupElements(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
host: () => document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
padding: document.querySelector<HTMLElement>('#padding')!,
viewport: document.querySelector<HTMLElement>('#viewport')!,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
assertCorrectDestroy(snapshot, destroy);
});
@@ -476,17 +553,17 @@ describe('structureSetup', () => {
(content, hostId) =>
`<div id="${hostId}"><div id="padding"><div id="content">${content}</div></div></div>`
);
const [, destroy] = assertCorrectSetupElements(
const [elements, destroy] = assertCorrectSetupElements(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
padding: document.querySelector<HTMLElement>('#padding')!,
padding: () => document.querySelector<HTMLElement>('#padding')!,
content: document.querySelector<HTMLElement>('#content')!,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
assertCorrectDestroy(snapshot, destroy);
});
@@ -496,17 +573,17 @@ describe('structureSetup', () => {
(content, hostId) =>
`<div id="${hostId}"><div id="viewport"><div id="content">${content}</div></div></div>`
);
const [, destroy] = assertCorrectSetupElements(
const [elements, destroy] = assertCorrectSetupElements(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
viewport: document.querySelector<HTMLElement>('#viewport')!,
content: document.querySelector<HTMLElement>('#content')!,
content: () => document.querySelector<HTMLElement>('#content')!,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
assertCorrectDestroy(snapshot, destroy);
});
});
@@ -514,7 +591,7 @@ describe('structureSetup', () => {
describe('single false', () => {
test('padding', () => {
const snapshot = fillBody(isTextarea);
const [, destroy] = assertCorrectSetupElements(
const [elements, destroy] = assertCorrectSetupElements(
isTextarea,
createStructureSetupProxy({
target: getTarget(isTextarea),
@@ -522,21 +599,21 @@ describe('structureSetup', () => {
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
assertCorrectDestroy(snapshot, destroy);
});
test('content', () => {
const snapshot = fillBody(isTextarea);
const [, destroy] = assertCorrectSetupElements(
const [elements, destroy] = assertCorrectSetupElements(
isTextarea,
createStructureSetupProxy({
target: getTarget(isTextarea),
content: false,
content: () => false,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
assertCorrectDestroy(snapshot, destroy);
});
});
@@ -544,21 +621,21 @@ describe('structureSetup', () => {
describe('single true', () => {
test('padding', () => {
const snapshot = fillBody(isTextarea);
const [, destroy] = assertCorrectSetupElements(
const [elements, destroy] = assertCorrectSetupElements(
isTextarea,
createStructureSetupProxy({
target: getTarget(isTextarea),
padding: true,
padding: () => true,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
assertCorrectDestroy(snapshot, destroy);
});
test('content', () => {
const snapshot = fillBody(isTextarea);
const [, destroy] = assertCorrectSetupElements(
const [elements, destroy] = assertCorrectSetupElements(
isTextarea,
createStructureSetupProxy({
target: getTarget(isTextarea),
@@ -566,7 +643,7 @@ describe('structureSetup', () => {
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
assertCorrectDestroy(snapshot, destroy);
});
});
@@ -574,7 +651,7 @@ describe('structureSetup', () => {
describe('multiple false', () => {
test('padding & content', () => {
const snapshot = fillBody(isTextarea);
const [, destroy] = assertCorrectSetupElements(
const [elements, destroy] = assertCorrectSetupElements(
isTextarea,
createStructureSetupProxy({
target: getTarget(isTextarea),
@@ -583,7 +660,7 @@ describe('structureSetup', () => {
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
assertCorrectDestroy(snapshot, destroy);
});
});
@@ -591,7 +668,7 @@ describe('structureSetup', () => {
describe('multiple true', () => {
test('padding & content', () => {
const snapshot = fillBody(isTextarea);
const [, destroy] = assertCorrectSetupElements(
const [elements, destroy] = assertCorrectSetupElements(
isTextarea,
createStructureSetupProxy({
target: getTarget(isTextarea),
@@ -600,7 +677,7 @@ describe('structureSetup', () => {
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
assertCorrectDestroy(snapshot, destroy);
});
});
@@ -612,7 +689,7 @@ describe('structureSetup', () => {
(content, hostId) =>
`<div id="${hostId}"><div id="viewport">${content}</div></div>`
);
const [, destroy] = assertCorrectSetupElements(
const [elements, destroy] = assertCorrectSetupElements(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
@@ -623,7 +700,7 @@ describe('structureSetup', () => {
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
assertCorrectDestroy(snapshot, destroy);
});
@@ -633,7 +710,7 @@ describe('structureSetup', () => {
(content, hostId) =>
`<div id="${hostId}"><div id="viewport">${content}</div></div>`
);
const [, destroy] = assertCorrectSetupElements(
const [elements, destroy] = assertCorrectSetupElements(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
@@ -644,7 +721,7 @@ describe('structureSetup', () => {
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
assertCorrectDestroy(snapshot, destroy);
});
@@ -654,18 +731,18 @@ describe('structureSetup', () => {
(content, hostId) =>
`<div id="${hostId}"><div id="viewport">${content}</div></div>`
);
const [, destroy] = assertCorrectSetupElements(
const [elements, destroy] = assertCorrectSetupElements(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
padding: false,
padding: () => false,
viewport: document.querySelector<HTMLElement>('#viewport')!,
content: true,
content: () => true,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
assertCorrectDestroy(snapshot, destroy);
});
@@ -675,18 +752,18 @@ describe('structureSetup', () => {
(content, hostId) =>
`<div id="${hostId}"><div id="viewport">${content}</div></div>`
);
const [, destroy] = assertCorrectSetupElements(
const [elements, destroy] = assertCorrectSetupElements(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
padding: true,
viewport: document.querySelector<HTMLElement>('#viewport')!,
viewport: () => document.querySelector<HTMLElement>('#viewport')!,
content: false,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
assertCorrectDestroy(snapshot, destroy);
});
@@ -696,7 +773,7 @@ describe('structureSetup', () => {
(content, hostId) =>
`<div id="${hostId}"><div id="content">${content}</div></div>`
);
const [, destroy] = assertCorrectSetupElements(
const [elements, destroy] = assertCorrectSetupElements(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
@@ -706,7 +783,7 @@ describe('structureSetup', () => {
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
assertCorrectDestroy(snapshot, destroy);
});
@@ -716,7 +793,7 @@ describe('structureSetup', () => {
(content, hostId) =>
`<div id="${hostId}"><div id="content">${content}</div></div>`
);
const [, destroy] = assertCorrectSetupElements(
const [elements, destroy] = assertCorrectSetupElements(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
@@ -726,7 +803,7 @@ describe('structureSetup', () => {
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
assertCorrectDestroy(snapshot, destroy);
});
@@ -736,17 +813,17 @@ describe('structureSetup', () => {
(content, hostId) =>
`<div id="${hostId}"><div id="viewport">${content}</div></div>`
);
const [, destroy] = assertCorrectSetupElements(
const [elements, destroy] = assertCorrectSetupElements(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
padding: false,
padding: () => false,
viewport: document.querySelector<HTMLElement>('#viewport')!,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
assertCorrectDestroy(snapshot, destroy);
});
@@ -756,7 +833,7 @@ describe('structureSetup', () => {
(content, hostId) =>
`<div id="${hostId}"><div id="viewport">${content}</div></div>`
);
const [, destroy] = assertCorrectSetupElements(
const [elements, destroy] = assertCorrectSetupElements(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
@@ -766,7 +843,7 @@ describe('structureSetup', () => {
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
assertCorrectDestroy(snapshot, destroy);
});
@@ -776,18 +853,18 @@ describe('structureSetup', () => {
(content, hostId) =>
`<div id="${hostId}"><div id="viewport"><div id="content">${content}</div></div></div>`
);
const [, destroy] = assertCorrectSetupElements(
const [elements, destroy] = assertCorrectSetupElements(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
viewport: document.querySelector<HTMLElement>('#viewport')!,
padding: false,
content: document.querySelector<HTMLElement>('#content')!,
content: () => document.querySelector<HTMLElement>('#content')!,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
assertCorrectDestroy(snapshot, destroy);
});
@@ -797,18 +874,18 @@ describe('structureSetup', () => {
(content, hostId) =>
`<div id="${hostId}"><div id="viewport"><div id="content">${content}</div></div></div>`
);
const [, destroy] = assertCorrectSetupElements(
const [elements, destroy] = assertCorrectSetupElements(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
viewport: document.querySelector<HTMLElement>('#viewport')!,
viewport: () => document.querySelector<HTMLElement>('#viewport')!,
padding: true,
content: document.querySelector<HTMLElement>('#content')!,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
assertCorrectDestroy(snapshot, destroy);
});
@@ -818,7 +895,7 @@ describe('structureSetup', () => {
(content, hostId) =>
`<div id="${hostId}"><div id="padding">${content}</div></div>`
);
const [, destroy] = assertCorrectSetupElements(
const [elements, destroy] = assertCorrectSetupElements(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
@@ -828,7 +905,7 @@ describe('structureSetup', () => {
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
assertCorrectDestroy(snapshot, destroy);
});
@@ -838,17 +915,17 @@ describe('structureSetup', () => {
(content, hostId) =>
`<div id="${hostId}"><div id="padding">${content}</div></div>`
);
const [, destroy] = assertCorrectSetupElements(
const [elements, destroy] = assertCorrectSetupElements(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
host: () => document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
padding: document.querySelector<HTMLElement>('#padding')!,
content: true,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
assertCorrectDestroy(snapshot, destroy);
});
@@ -858,17 +935,17 @@ describe('structureSetup', () => {
(content, hostId) =>
`<div id="${hostId}"><div id="viewport">${content}</div></div>`
);
const [, destroy] = assertCorrectSetupElements(
const [elements, destroy] = assertCorrectSetupElements(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
viewport: document.querySelector<HTMLElement>('#viewport')!,
viewport: () => document.querySelector<HTMLElement>('#viewport')!,
content: false,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
assertCorrectDestroy(snapshot, destroy);
});
@@ -878,7 +955,7 @@ describe('structureSetup', () => {
(content, hostId) =>
`<div id="${hostId}"><div id="viewport">${content}</div></div>`
);
const [, destroy] = assertCorrectSetupElements(
const [elements, destroy] = assertCorrectSetupElements(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
@@ -888,7 +965,7 @@ describe('structureSetup', () => {
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
assertCorrectDestroy(snapshot, destroy);
});
@@ -898,18 +975,18 @@ describe('structureSetup', () => {
(content, hostId) =>
`<div id="${hostId}"><div id="padding"><div id="viewport">${content}</div></div></div>`
);
const [, destroy] = assertCorrectSetupElements(
const [elements, destroy] = assertCorrectSetupElements(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
padding: document.querySelector<HTMLElement>('#padding')!,
padding: () => document.querySelector<HTMLElement>('#padding')!,
viewport: document.querySelector<HTMLElement>('#viewport')!,
content: false,
content: () => false,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
assertCorrectDestroy(snapshot, destroy);
});
@@ -919,18 +996,18 @@ describe('structureSetup', () => {
(content, hostId) =>
`<div id="${hostId}"><div id="padding"><div id="viewport">${content}</div></div></div>`
);
const [, destroy] = assertCorrectSetupElements(
const [elements, destroy] = assertCorrectSetupElements(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
host: () => document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
padding: document.querySelector<HTMLElement>('#padding')!,
viewport: document.querySelector<HTMLElement>('#viewport')!,
viewport: () => document.querySelector<HTMLElement>('#viewport')!,
content: true,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
assertCorrectDestroy(snapshot, destroy);
});
});
packages/overlayscrollbars/tests/jest/support/dom/attribute.test.ts
+70 -1
View File
@@ -1,6 +1,15 @@
import { attr, removeAttr, val, scrollLeft, scrollTop } from 'support/dom/attribute';
import {
attr,
attrClass,
hasAttrClass,
removeAttr,
val,
scrollLeft,
scrollTop,
} from 'support/dom/attribute';
const testElm = document.body;
const getAttribute = (name: string) => testElm.getAttribute(name);
const setAttribute = (name: string, value: string) => {
testElm.setAttribute(name, value);
};
@@ -46,6 +55,66 @@ describe('dom attributes', () => {
});
});
describe('attrClass', () => {
test('add', () => {
const attrName = 'data-test-attrClass-add';
attrClass(testElm, attrName, '000', true);
expect(getAttribute(attrName)).toBe('000');
setAttribute(attrName, '123');
attrClass(testElm, attrName, '456', true);
expect(getAttribute(attrName)).toBe('123 456');
attrClass(testElm, attrName, '789', true);
attrClass(testElm, attrName, '789', true);
expect(getAttribute(attrName)).toBe('123 456 789');
attrClass(testElm, attrName, '', true);
expect(getAttribute(attrName)).toBe('123 456 789');
removeAttribute(attrName);
});
test('remove', () => {
const attrName = 'data-test-attrClass-remove';
setAttribute(attrName, '123');
attrClass(testElm, attrName, '456');
expect(getAttribute(attrName)).toBe('123');
attrClass(testElm, attrName, '123');
expect(getAttribute(attrName)).toBe('');
attrClass(testElm, attrName, '123');
expect(getAttribute(attrName)).toBe('');
attrClass(testElm, attrName, '', true);
expect(getAttribute(attrName)).toBe('');
removeAttribute(attrName);
});
});
describe('hasAttrClass', () => {
test('hasAttrClass', () => {
const attrName = 'data-test-hasAttrClass';
expect(hasAttrClass(testElm, attrName, '123')).toBe(false);
setAttribute(attrName, '123');
attrClass(testElm, attrName, '456', true);
attrClass(testElm, attrName, '789', true);
expect(hasAttrClass(testElm, attrName, '123')).toBe(true);
expect(hasAttrClass(testElm, attrName, '456')).toBe(true);
expect(hasAttrClass(testElm, attrName, '789')).toBe(true);
expect(hasAttrClass(testElm, attrName, '123 456 789')).toBe(false);
expect(hasAttrClass(testElm, attrName, '')).toBe(false);
removeAttribute(attrName);
});
});
describe('scrollLeft', () => {
test('get', () => {
setScrollLeft(100);
packages/overlayscrollbars/tests/jest/support/dom/class.test.ts
+4
View File
@@ -19,6 +19,7 @@ describe('dom class names', () => {
describe('add', () => {
test('none', () => {
addClass(testElm, '');
addClass(testElm, ' ');
// @ts-ignore
addClass(testElm, null);
// @ts-ignore
@@ -53,6 +54,7 @@ describe('dom class names', () => {
test('none', () => {
addClass(testElm, 'test-class');
removeClass(testElm, '');
removeClass(testElm, ' ');
// @ts-ignore
removeClass(testElm, null);
// @ts-ignore
@@ -82,6 +84,7 @@ describe('dom class names', () => {
describe('has', () => {
test('none', () => {
expect(hasClass(testElm, '')).toBe(false);
expect(hasClass(testElm, ' ')).toBe(false);
});
test('single', () => {
@@ -103,6 +106,7 @@ describe('dom class names', () => {
describe('diff', () => {
test('none', () => {
expect(diffClass('', '')).toEqual([]);
expect(diffClass('', ' ')).toEqual([]);
});
test('single', () => {