@ranceheart/sticky-elevator
Version:
A lightweight scroll‑spy elevator nav for React
751 lines (748 loc) • 26.4 kB
JavaScript
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('@charset "UTF-8";.elevator{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}.elevator::-webkit-scrollbar{display:none}.elevator.fixed{position:fixed;top:0;left:0;right:0;margin:0 auto}.elevator.safe-padding{padding-top:env(safe-area-inset-top)}.elevator-wrapper{display:flex;width:100%;white-space:nowrap;box-sizing:content-box;padding:0;margin:0;gap:0}.elevator-item-wrapper{display:flex}.elevator-item{display:block;width:100%;background-size:cover;background-position:center;transition:background-position .2s}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
import Be, { useMemo as Ie, useRef as V, useState as $e, useCallback as We, useLayoutEffect as hr, useEffect as ne } from "react";
import Ye from "clsx";
import Ne from "resize-observer-polyfill";
import yr from "smoothscroll-polyfill";
var pe = { exports: {} }, G = {};
/**
* @license React
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var Me;
function br() {
if (Me) return G;
Me = 1;
var F = Be, _ = Symbol.for("react.element"), A = Symbol.for("react.fragment"), O = Object.prototype.hasOwnProperty, x = F.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, y = { key: !0, ref: !0, __self: !0, __source: !0 };
function P(S, m, L) {
var g, R = {}, j = null, k = null;
L !== void 0 && (j = "" + L), m.key !== void 0 && (j = "" + m.key), m.ref !== void 0 && (k = m.ref);
for (g in m) O.call(m, g) && !y.hasOwnProperty(g) && (R[g] = m[g]);
if (S && S.defaultProps) for (g in m = S.defaultProps, m) R[g] === void 0 && (R[g] = m[g]);
return { $$typeof: _, type: S, key: j, ref: k, props: R, _owner: x.current };
}
return G.Fragment = A, G.jsx = P, G.jsxs = P, G;
}
var X = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var Ve;
function Rr() {
return Ve || (Ve = 1, process.env.NODE_ENV !== "production" && function() {
var F = Be, _ = Symbol.for("react.element"), A = Symbol.for("react.portal"), O = Symbol.for("react.fragment"), x = Symbol.for("react.strict_mode"), y = Symbol.for("react.profiler"), P = Symbol.for("react.provider"), S = Symbol.for("react.context"), m = Symbol.for("react.forward_ref"), L = Symbol.for("react.suspense"), g = Symbol.for("react.suspense_list"), R = Symbol.for("react.memo"), j = Symbol.for("react.lazy"), k = Symbol.for("react.offscreen"), U = Symbol.iterator, B = "@@iterator";
function q(e) {
if (e === null || typeof e != "object")
return null;
var r = U && e[U] || e[B];
return typeof r == "function" ? r : null;
}
var C = F.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
function p(e) {
{
for (var r = arguments.length, t = new Array(r > 1 ? r - 1 : 0), n = 1; n < r; n++)
t[n - 1] = arguments[n];
W("error", e, t);
}
}
function W(e, r, t) {
{
var n = C.ReactDebugCurrentFrame, s = n.getStackAddendum();
s !== "" && (r += "%s", t = t.concat([s]));
var u = t.map(function(i) {
return String(i);
});
u.unshift("Warning: " + r), Function.prototype.apply.call(console[e], console, u);
}
}
var oe = !1, z = !1, Y = !1, D = !1, J = !1, Z;
Z = Symbol.for("react.module.reference");
function a(e) {
return !!(typeof e == "string" || typeof e == "function" || e === O || e === y || J || e === x || e === L || e === g || D || e === k || oe || z || Y || typeof e == "object" && e !== null && (e.$$typeof === j || e.$$typeof === R || e.$$typeof === P || e.$$typeof === S || e.$$typeof === m || // This needs to include all possible module reference object
// types supported by any Flight configuration anywhere since
// we don't know which Flight build this will end up being used
// with.
e.$$typeof === Z || e.getModuleId !== void 0));
}
function l(e, r, t) {
var n = e.displayName;
if (n)
return n;
var s = r.displayName || r.name || "";
return s !== "" ? t + "(" + s + ")" : t;
}
function f(e) {
return e.displayName || "Context";
}
function c(e) {
if (e == null)
return null;
if (typeof e.tag == "number" && p("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function")
return e.displayName || e.name || null;
if (typeof e == "string")
return e;
switch (e) {
case O:
return "Fragment";
case A:
return "Portal";
case y:
return "Profiler";
case x:
return "StrictMode";
case L:
return "Suspense";
case g:
return "SuspenseList";
}
if (typeof e == "object")
switch (e.$$typeof) {
case S:
var r = e;
return f(r) + ".Consumer";
case P:
var t = e;
return f(t._context) + ".Provider";
case m:
return l(e, e.render, "ForwardRef");
case R:
var n = e.displayName || null;
return n !== null ? n : c(e.type) || "Memo";
case j: {
var s = e, u = s._payload, i = s._init;
try {
return c(i(u));
} catch {
return null;
}
}
}
return null;
}
var E = Object.assign, w = 0, I, K, me, ge, Ee, he, ye;
function be() {
}
be.__reactDisabledLog = !0;
function qe() {
{
if (w === 0) {
I = console.log, K = console.info, me = console.warn, ge = console.error, Ee = console.group, he = console.groupCollapsed, ye = console.groupEnd;
var e = {
configurable: !0,
enumerable: !0,
value: be,
writable: !0
};
Object.defineProperties(console, {
info: e,
log: e,
warn: e,
error: e,
group: e,
groupCollapsed: e,
groupEnd: e
});
}
w++;
}
}
function ze() {
{
if (w--, w === 0) {
var e = {
configurable: !0,
enumerable: !0,
writable: !0
};
Object.defineProperties(console, {
log: E({}, e, {
value: I
}),
info: E({}, e, {
value: K
}),
warn: E({}, e, {
value: me
}),
error: E({}, e, {
value: ge
}),
group: E({}, e, {
value: Ee
}),
groupCollapsed: E({}, e, {
value: he
}),
groupEnd: E({}, e, {
value: ye
})
});
}
w < 0 && p("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
}
}
var ie = C.ReactCurrentDispatcher, se;
function Q(e, r, t) {
{
if (se === void 0)
try {
throw Error();
} catch (s) {
var n = s.stack.trim().match(/\n( *(at )?)/);
se = n && n[1] || "";
}
return `
` + se + e;
}
}
var ue = !1, ee;
{
var Je = typeof WeakMap == "function" ? WeakMap : Map;
ee = new Je();
}
function Re(e, r) {
if (!e || ue)
return "";
{
var t = ee.get(e);
if (t !== void 0)
return t;
}
var n;
ue = !0;
var s = Error.prepareStackTrace;
Error.prepareStackTrace = void 0;
var u;
u = ie.current, ie.current = null, qe();
try {
if (r) {
var i = function() {
throw Error();
};
if (Object.defineProperty(i.prototype, "props", {
set: function() {
throw Error();
}
}), typeof Reflect == "object" && Reflect.construct) {
try {
Reflect.construct(i, []);
} catch (b) {
n = b;
}
Reflect.construct(e, [], i);
} else {
try {
i.call();
} catch (b) {
n = b;
}
e.call(i.prototype);
}
} else {
try {
throw Error();
} catch (b) {
n = b;
}
e();
}
} catch (b) {
if (b && n && typeof b.stack == "string") {
for (var o = b.stack.split(`
`), h = n.stack.split(`
`), d = o.length - 1, v = h.length - 1; d >= 1 && v >= 0 && o[d] !== h[v]; )
v--;
for (; d >= 1 && v >= 0; d--, v--)
if (o[d] !== h[v]) {
if (d !== 1 || v !== 1)
do
if (d--, v--, v < 0 || o[d] !== h[v]) {
var T = `
` + o[d].replace(" at new ", " at ");
return e.displayName && T.includes("<anonymous>") && (T = T.replace("<anonymous>", e.displayName)), typeof e == "function" && ee.set(e, T), T;
}
while (d >= 1 && v >= 0);
break;
}
}
} finally {
ue = !1, ie.current = u, ze(), Error.prepareStackTrace = s;
}
var M = e ? e.displayName || e.name : "", $ = M ? Q(M) : "";
return typeof e == "function" && ee.set(e, $), $;
}
function Ke(e, r, t) {
return Re(e, !1);
}
function He(e) {
var r = e.prototype;
return !!(r && r.isReactComponent);
}
function re(e, r, t) {
if (e == null)
return "";
if (typeof e == "function")
return Re(e, He(e));
if (typeof e == "string")
return Q(e);
switch (e) {
case L:
return Q("Suspense");
case g:
return Q("SuspenseList");
}
if (typeof e == "object")
switch (e.$$typeof) {
case m:
return Ke(e.render);
case R:
return re(e.type, r, t);
case j: {
var n = e, s = n._payload, u = n._init;
try {
return re(u(s), r, t);
} catch {
}
}
}
return "";
}
var H = Object.prototype.hasOwnProperty, _e = {}, we = C.ReactDebugCurrentFrame;
function te(e) {
if (e) {
var r = e._owner, t = re(e.type, e._source, r ? r.type : null);
we.setExtraStackFrame(t);
} else
we.setExtraStackFrame(null);
}
function Ge(e, r, t, n, s) {
{
var u = Function.call.bind(H);
for (var i in e)
if (u(e, i)) {
var o = void 0;
try {
if (typeof e[i] != "function") {
var h = Error((n || "React class") + ": " + t + " type `" + i + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[i] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
throw h.name = "Invariant Violation", h;
}
o = e[i](r, i, n, t, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
} catch (d) {
o = d;
}
o && !(o instanceof Error) && (te(s), p("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", n || "React class", t, i, typeof o), te(null)), o instanceof Error && !(o.message in _e) && (_e[o.message] = !0, te(s), p("Failed %s type: %s", t, o.message), te(null));
}
}
}
var Xe = Array.isArray;
function le(e) {
return Xe(e);
}
function Ze(e) {
{
var r = typeof Symbol == "function" && Symbol.toStringTag, t = r && e[Symbol.toStringTag] || e.constructor.name || "Object";
return t;
}
}
function Qe(e) {
try {
return Te(e), !1;
} catch {
return !0;
}
}
function Te(e) {
return "" + e;
}
function xe(e) {
if (Qe(e))
return p("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Ze(e)), Te(e);
}
var Oe = C.ReactCurrentOwner, er = {
key: !0,
ref: !0,
__self: !0,
__source: !0
}, Se, Ce;
function rr(e) {
if (H.call(e, "ref")) {
var r = Object.getOwnPropertyDescriptor(e, "ref").get;
if (r && r.isReactWarning)
return !1;
}
return e.ref !== void 0;
}
function tr(e) {
if (H.call(e, "key")) {
var r = Object.getOwnPropertyDescriptor(e, "key").get;
if (r && r.isReactWarning)
return !1;
}
return e.key !== void 0;
}
function nr(e, r) {
typeof e.ref == "string" && Oe.current;
}
function ar(e, r) {
{
var t = function() {
Se || (Se = !0, p("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r));
};
t.isReactWarning = !0, Object.defineProperty(e, "key", {
get: t,
configurable: !0
});
}
}
function or(e, r) {
{
var t = function() {
Ce || (Ce = !0, p("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r));
};
t.isReactWarning = !0, Object.defineProperty(e, "ref", {
get: t,
configurable: !0
});
}
}
var ir = function(e, r, t, n, s, u, i) {
var o = {
// This tag allows us to uniquely identify this as a React Element
$$typeof: _,
// Built-in properties that belong on the element
type: e,
key: r,
ref: t,
props: i,
// Record the component responsible for creating this element.
_owner: u
};
return o._store = {}, Object.defineProperty(o._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: !1
}), Object.defineProperty(o, "_self", {
configurable: !1,
enumerable: !1,
writable: !1,
value: n
}), Object.defineProperty(o, "_source", {
configurable: !1,
enumerable: !1,
writable: !1,
value: s
}), Object.freeze && (Object.freeze(o.props), Object.freeze(o)), o;
};
function sr(e, r, t, n, s) {
{
var u, i = {}, o = null, h = null;
t !== void 0 && (xe(t), o = "" + t), tr(r) && (xe(r.key), o = "" + r.key), rr(r) && (h = r.ref, nr(r, s));
for (u in r)
H.call(r, u) && !er.hasOwnProperty(u) && (i[u] = r[u]);
if (e && e.defaultProps) {
var d = e.defaultProps;
for (u in d)
i[u] === void 0 && (i[u] = d[u]);
}
if (o || h) {
var v = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
o && ar(i, v), h && or(i, v);
}
return ir(e, o, h, s, n, Oe.current, i);
}
}
var ce = C.ReactCurrentOwner, Pe = C.ReactDebugCurrentFrame;
function N(e) {
if (e) {
var r = e._owner, t = re(e.type, e._source, r ? r.type : null);
Pe.setExtraStackFrame(t);
} else
Pe.setExtraStackFrame(null);
}
var fe;
fe = !1;
function de(e) {
return typeof e == "object" && e !== null && e.$$typeof === _;
}
function je() {
{
if (ce.current) {
var e = c(ce.current.type);
if (e)
return `
Check the render method of \`` + e + "`.";
}
return "";
}
}
function ur(e) {
return "";
}
var ke = {};
function lr(e) {
{
var r = je();
if (!r) {
var t = typeof e == "string" ? e : e.displayName || e.name;
t && (r = `
Check the top-level render call using <` + t + ">.");
}
return r;
}
}
function De(e, r) {
{
if (!e._store || e._store.validated || e.key != null)
return;
e._store.validated = !0;
var t = lr(r);
if (ke[t])
return;
ke[t] = !0;
var n = "";
e && e._owner && e._owner !== ce.current && (n = " It was passed a child from " + c(e._owner.type) + "."), N(e), p('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', t, n), N(null);
}
}
function Fe(e, r) {
{
if (typeof e != "object")
return;
if (le(e))
for (var t = 0; t < e.length; t++) {
var n = e[t];
de(n) && De(n, r);
}
else if (de(e))
e._store && (e._store.validated = !0);
else if (e) {
var s = q(e);
if (typeof s == "function" && s !== e.entries)
for (var u = s.call(e), i; !(i = u.next()).done; )
de(i.value) && De(i.value, r);
}
}
}
function cr(e) {
{
var r = e.type;
if (r == null || typeof r == "string")
return;
var t;
if (typeof r == "function")
t = r.propTypes;
else if (typeof r == "object" && (r.$$typeof === m || // Note: Memo only checks outer props here.
// Inner props are checked in the reconciler.
r.$$typeof === R))
t = r.propTypes;
else
return;
if (t) {
var n = c(r);
Ge(t, e.props, "prop", n, e);
} else if (r.PropTypes !== void 0 && !fe) {
fe = !0;
var s = c(r);
p("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", s || "Unknown");
}
typeof r.getDefaultProps == "function" && !r.getDefaultProps.isReactClassApproved && p("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
}
}
function fr(e) {
{
for (var r = Object.keys(e.props), t = 0; t < r.length; t++) {
var n = r[t];
if (n !== "children" && n !== "key") {
N(e), p("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", n), N(null);
break;
}
}
e.ref !== null && (N(e), p("Invalid attribute `ref` supplied to `React.Fragment`."), N(null));
}
}
var Ae = {};
function Le(e, r, t, n, s, u) {
{
var i = a(e);
if (!i) {
var o = "";
(e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (o += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
var h = ur();
h ? o += h : o += je();
var d;
e === null ? d = "null" : le(e) ? d = "array" : e !== void 0 && e.$$typeof === _ ? (d = "<" + (c(e.type) || "Unknown") + " />", o = " Did you accidentally export a JSX literal instead of a component?") : d = typeof e, p("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", d, o);
}
var v = sr(e, r, t, s, u);
if (v == null)
return v;
if (i) {
var T = r.children;
if (T !== void 0)
if (n)
if (le(T)) {
for (var M = 0; M < T.length; M++)
Fe(T[M], e);
Object.freeze && Object.freeze(T);
} else
p("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
else
Fe(T, e);
}
if (H.call(r, "key")) {
var $ = c(e), b = Object.keys(r).filter(function(Er) {
return Er !== "key";
}), ve = b.length > 0 ? "{key: someKey, " + b.join(": ..., ") + ": ...}" : "{key: someKey}";
if (!Ae[$ + ve]) {
var gr = b.length > 0 ? "{" + b.join(": ..., ") + ": ...}" : "{}";
p(`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`, ve, $, gr, $), Ae[$ + ve] = !0;
}
}
return e === O ? fr(v) : cr(v), v;
}
}
function dr(e, r, t) {
return Le(e, r, t, !0);
}
function vr(e, r, t) {
return Le(e, r, t, !1);
}
var pr = vr, mr = dr;
X.Fragment = O, X.jsx = pr, X.jsxs = mr;
}()), X;
}
process.env.NODE_ENV === "production" ? pe.exports = br() : pe.exports = Rr();
var ae = pe.exports;
yr.polyfill();
const Ue = (F) => {
let _ = 0;
const A = "onscrollend" in window, O = () => {
window.removeEventListener("scroll", y), window.removeEventListener("scrollend", x), clearTimeout(_);
}, x = () => {
O(), F();
}, y = () => {
clearTimeout(_), _ = window.setTimeout(x, 480);
};
A ? window.addEventListener("scrollend", x, { once: !0 }) : (window.addEventListener("scroll", y), y());
}, Or = ({
anchorPoints: F,
anchorImages: _,
anchorActiveImages: A,
number: O,
navbarHeight: x,
paddingTab: y,
align: P,
width: S,
zIndex: m,
className: L,
style: g
}) => {
const R = Ie(() => _.map((a, l) => {
const f = new Image(), c = new Image();
return f.src = a, c.src = A[l] || a, {
id: F[l] || "",
img: f,
activeImg: c
};
}), [F, _, A]), j = Ie(() => ({
width: `${S ?? "728px"}`,
margin: P === "left" ? "0 auto 0 0" : P === "right" ? "0 0 0 auto" : "0 auto",
zIndex: m ?? 10,
...g
}), [S, P, m, g]), k = V([]), U = V([]), B = V(null), q = V(null), C = V(!1), p = V(0), [W, oe] = $e(0), [z, Y] = $e(0), D = We(() => {
var l;
return (((l = k.current[0]) == null ? void 0 : l.offsetHeight) ?? x ?? 75) + (y ?? 0);
}, [x, y]);
hr(() => {
U.current = R.map((f) => document.getElementById(f.id)), Y(D());
const a = k.current[0];
if (!a) return;
const l = new Ne(() => Y(D()));
return l.observe(a), () => l.disconnect();
}, [R, D]);
const J = We((a, l = !1) => {
const f = B.current, c = k.current[a];
if (!f || !c) return;
const E = Math.max(c.offsetLeft - (f.clientWidth - c.offsetWidth) / 2, 0);
l ? f.scrollTo({ left: E, behavior: "smooth" }) : f.scrollLeft = E;
}, []);
ne(() => {
let a = !1;
const l = () => {
let c = 0;
U.current.forEach((E, w) => {
const I = E == null ? void 0 : E.getBoundingClientRect();
I && I.top < z + z * 0.2 && (c = w);
}), oe(c), a = !1;
}, f = () => {
a || (window.requestAnimationFrame(l), a = !0);
};
return window.addEventListener("scroll", f, { passive: !0 }), () => window.removeEventListener("scroll", f);
}, [z]), ne(() => {
Ue(() => {
C.current || J(W, !0);
});
}, [W, J]), ne(() => {
const a = () => Y(D());
return window.addEventListener("resize", a, { passive: !0 }), () => window.removeEventListener("resize", a);
}, [D]), ne(() => {
const a = B.current;
if (!a) return;
const l = () => {
if (!a) return;
const w = y ?? 0;
q.current && (q.current.style.height = `${a.offsetHeight - w}px`), a.classList.contains("fixed") ? a.style.paddingTop = `${w}px` : p.current = a.getBoundingClientRect().top + window.scrollY - w, Y(D());
}, f = new Ne(l);
f.observe(a);
const c = document.createElement("div");
c.style.width = "100%", c.style.visibility = "hidden", q.current = c, l();
const E = () => {
var I, K;
window.scrollY >= p.current && p.current !== 0 ? a.classList.contains("fixed") || ((I = a.parentNode) == null || I.insertBefore(c, a), a.classList.add("fixed", "safe-padding"), a.style.paddingTop = `${y ?? 0}px`) : a.classList.contains("fixed") && (a.classList.remove("fixed", "safe-padding"), (K = c.parentNode) == null || K.removeChild(c), a.style.paddingTop = "");
};
return window.addEventListener("scroll", E, { passive: !0 }), () => {
f.disconnect(), window.removeEventListener("scroll", E);
};
}, [D, y]);
const Z = (a, l) => {
const f = document.getElementById(l);
f && (C.current = !0, f.scrollIntoView({ behavior: "smooth", block: "start" }), Ue(() => {
C.current = !1, J(a, !0);
}));
};
return /* @__PURE__ */ ae.jsx("div", { ref: B, className: Ye("elevator", L), style: { ...j, ...g }, children: /* @__PURE__ */ ae.jsx("div", { className: "elevator-wrapper", children: R.map((a, l) => /* @__PURE__ */ ae.jsx(
"div",
{
ref: (f) => k.current[l] = f,
className: "elevator-item-wrapper",
style: { flex: `0 0 calc(100% / ${O})` },
onClick: () => Z(l, a.id),
children: /* @__PURE__ */ ae.jsx(
"img",
{
src: (W === l ? a.activeImg : a.img).src,
alt: `sticky-elevator-tab-${l}`,
className: Ye("elevator-item", W === l && "elevator-item-active")
}
)
},
a.id
)) }) });
};
export {
Or as Elevator
};