avances en plantillas

This commit is contained in:
JACS 2026-05-01 18:15:40 -05:00
parent 0f84beacf1
commit da0530d79b
2062 changed files with 598814 additions and 22 deletions

View file

@ -0,0 +1 @@
.driver-active .driver-overlay,.driver-active *{pointer-events:none}.driver-active .driver-active-element,.driver-active .driver-active-element *,.driver-popover,.driver-popover *{pointer-events:auto}@keyframes animate-fade-in{0%{opacity:0}to{opacity:1}}.driver-fade .driver-overlay{animation:animate-fade-in .2s ease-in-out}.driver-fade .driver-popover{animation:animate-fade-in .2s}.driver-popover{all:unset;box-sizing:border-box;color:#2d2d2d;margin:0;padding:15px;border-radius:5px;min-width:250px;max-width:300px;box-shadow:0 1px 10px #0006;z-index:1000000000;position:fixed;top:0;right:0;background-color:#fff}.driver-popover *{font-family:Helvetica Neue,Inter,ui-sans-serif,"Apple Color Emoji",Helvetica,Arial,sans-serif}.driver-popover-title{font:19px/normal sans-serif;font-weight:700;display:block;position:relative;line-height:1.5;zoom:1;margin:0}.driver-popover-close-btn{all:unset;position:absolute;top:0;right:0;width:32px;height:28px;cursor:pointer;font-size:18px;font-weight:500;color:#d2d2d2;z-index:1;text-align:center;transition:color;transition-duration:.2s}.driver-popover-close-btn:hover,.driver-popover-close-btn:focus{color:#2d2d2d}.driver-popover-title[style*=block]+.driver-popover-description{margin-top:5px}.driver-popover-description{margin-bottom:0;font:14px/normal sans-serif;line-height:1.5;font-weight:400;zoom:1}.driver-popover-footer{margin-top:15px;text-align:right;zoom:1;display:flex;align-items:center;justify-content:space-between}.driver-popover-progress-text{font-size:13px;font-weight:400;color:#727272;zoom:1}.driver-popover-footer button{all:unset;display:inline-block;box-sizing:border-box;padding:3px 7px;text-decoration:none;text-shadow:1px 1px 0 #fff;background-color:#fff;color:#2d2d2d;font:12px/normal sans-serif;cursor:pointer;outline:0;zoom:1;line-height:1.3;border:1px solid #ccc;border-radius:3px}.driver-popover-footer .driver-popover-btn-disabled{opacity:.5;pointer-events:none}:not(body):has(>.driver-active-element){overflow:hidden!important}.driver-no-interaction,.driver-no-interaction *{pointer-events:none!important}.driver-popover-footer button:hover,.driver-popover-footer button:focus{background-color:#f7f7f7}.driver-popover-navigation-btns{display:flex;flex-grow:1;justify-content:flex-end}.driver-popover-navigation-btns button+button{margin-left:4px}.driver-popover-arrow{content:"";position:absolute;border:5px solid #fff}.driver-popover-arrow-side-over{display:none}.driver-popover-arrow-side-left{left:100%;border-right-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-right{right:100%;border-left-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-top{top:100%;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}.driver-popover-arrow-side-bottom{bottom:100%;border-left-color:transparent;border-top-color:transparent;border-right-color:transparent}.driver-popover-arrow-side-center{display:none}.driver-popover-arrow-side-left.driver-popover-arrow-align-start,.driver-popover-arrow-side-right.driver-popover-arrow-align-start{top:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-start,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-start{left:15px}.driver-popover-arrow-align-end.driver-popover-arrow-side-left,.driver-popover-arrow-align-end.driver-popover-arrow-side-right{bottom:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-end,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-end{right:15px}.driver-popover-arrow-side-left.driver-popover-arrow-align-center,.driver-popover-arrow-side-right.driver-popover-arrow-align-center{top:50%;margin-top:-5px}.driver-popover-arrow-side-top.driver-popover-arrow-align-center,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-center{left:50%;margin-left:-5px}.driver-popover-arrow-none{display:none}

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,137 @@
// Generated by dts-bundle-generator v8.0.1
export type StageDefinition = {
x: number;
y: number;
width: number;
height: number;
};
export type State = {
isInitialized?: boolean;
activeIndex?: number;
activeElement?: Element;
activeStep?: DriveStep;
previousElement?: Element;
previousStep?: DriveStep;
popover?: PopoverDOM;
__previousElement?: Element;
__activeElement?: Element;
__previousStep?: DriveStep;
__activeStep?: DriveStep;
__activeOnDestroyed?: Element;
__resizeTimeout?: number;
__transitionCallback?: () => void;
__activeStagePosition?: StageDefinition;
__overlaySvg?: SVGSVGElement;
};
export type DriverHook = (element: Element | undefined, step: DriveStep, opts: {
config: Config;
state: State;
driver: Driver;
}) => void;
export type Config = {
steps?: DriveStep[];
animate?: boolean;
overlayColor?: string;
overlayOpacity?: number;
smoothScroll?: boolean;
allowClose?: boolean;
overlayClickBehavior?: "close" | "nextStep" | DriverHook;
stagePadding?: number;
stageRadius?: number;
disableActiveInteraction?: boolean;
allowKeyboardControl?: boolean;
popoverClass?: string;
popoverOffset?: number;
showButtons?: AllowedButtons[];
disableButtons?: AllowedButtons[];
showProgress?: boolean;
progressText?: string;
nextBtnText?: string;
prevBtnText?: string;
doneBtnText?: string;
onPopoverRender?: (popover: PopoverDOM, opts: {
config: Config;
state: State;
driver: Driver;
}) => void;
onHighlightStarted?: DriverHook;
onHighlighted?: DriverHook;
onDeselected?: DriverHook;
onDestroyStarted?: DriverHook;
onDestroyed?: DriverHook;
onNextClick?: DriverHook;
onPrevClick?: DriverHook;
onCloseClick?: DriverHook;
};
export type Side = "top" | "right" | "bottom" | "left" | "over";
export type Alignment = "start" | "center" | "end";
export type AllowedButtons = "next" | "previous" | "close";
export type Popover = {
title?: string;
description?: string;
side?: Side;
align?: Alignment;
showButtons?: AllowedButtons[];
showProgress?: boolean;
disableButtons?: AllowedButtons[];
popoverClass?: string;
progressText?: string;
doneBtnText?: string;
nextBtnText?: string;
prevBtnText?: string;
onPopoverRender?: (popover: PopoverDOM, opts: {
config: Config;
state: State;
driver: Driver;
}) => void;
onNextClick?: DriverHook;
onPrevClick?: DriverHook;
onCloseClick?: DriverHook;
};
export type PopoverDOM = {
wrapper: HTMLElement;
arrow: HTMLElement;
title: HTMLElement;
description: HTMLElement;
footer: HTMLElement;
progress: HTMLElement;
previousButton: HTMLButtonElement;
nextButton: HTMLButtonElement;
closeButton: HTMLButtonElement;
footerButtons: HTMLElement;
};
export type DriveStep = {
element?: string | Element | (() => Element);
onHighlightStarted?: DriverHook;
onHighlighted?: DriverHook;
onDeselected?: DriverHook;
popover?: Popover;
disableActiveInteraction?: boolean;
};
export interface Driver {
isActive: () => boolean;
refresh: () => void;
drive: (stepIndex?: number) => void;
setConfig: (config: Config) => void;
setSteps: (steps: DriveStep[]) => void;
getConfig: () => Config;
getState: (key?: string) => any;
getActiveIndex: () => number | undefined;
isFirstStep: () => boolean;
isLastStep: () => boolean;
getActiveStep: () => DriveStep | undefined;
getActiveElement: () => Element | undefined;
getPreviousElement: () => Element | undefined;
getPreviousStep: () => DriveStep | undefined;
moveNext: () => void;
movePrevious: () => void;
moveTo: (index: number) => void;
hasNextStep: () => boolean;
hasPreviousStep: () => boolean;
highlight: (step: DriveStep) => void;
destroy: () => void;
}
export declare function driver(options?: Config): Driver;
export {};

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,675 @@
let z = {}, J;
function F(e = {}) {
z = {
animate: !0,
allowClose: !0,
overlayClickBehavior: "close",
overlayOpacity: 0.7,
smoothScroll: !1,
disableActiveInteraction: !1,
showProgress: !1,
stagePadding: 10,
stageRadius: 5,
popoverOffset: 10,
showButtons: ["next", "previous", "close"],
disableButtons: [],
overlayColor: "#000",
...e
};
}
function s(e) {
return e ? z[e] : z;
}
function le(e) {
J = e;
}
function _() {
return J;
}
let I = {};
function N(e, o) {
I[e] = o;
}
function L(e) {
var o;
(o = I[e]) == null || o.call(I);
}
function de() {
I = {};
}
function O(e, o, t, i) {
return (e /= i / 2) < 1 ? t / 2 * e * e + o : -t / 2 * (--e * (e - 2) - 1) + o;
}
function U(e) {
const o = 'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])';
return e.flatMap((t) => {
const i = t.matches(o), d = Array.from(t.querySelectorAll(o));
return [...i ? [t] : [], ...d];
}).filter((t) => getComputedStyle(t).pointerEvents !== "none" && ve(t));
}
function ee(e) {
if (!e || ue(e))
return;
const o = s("smoothScroll"), t = e.offsetHeight > window.innerHeight;
e.scrollIntoView({
// Removing the smooth scrolling for elements which exist inside the scrollable parent
// This was causing the highlight to not properly render
behavior: !o || pe(e) ? "auto" : "smooth",
inline: "center",
block: t ? "start" : "center"
});
}
function pe(e) {
if (!e || !e.parentElement)
return;
const o = e.parentElement;
return o.scrollHeight > o.clientHeight;
}
function ue(e) {
const o = e.getBoundingClientRect();
return o.top >= 0 && o.left >= 0 && o.bottom <= (window.innerHeight || document.documentElement.clientHeight) && o.right <= (window.innerWidth || document.documentElement.clientWidth);
}
function ve(e) {
return !!(e.offsetWidth || e.offsetHeight || e.getClientRects().length);
}
let D = {};
function k(e, o) {
D[e] = o;
}
function l(e) {
return e ? D[e] : D;
}
function X() {
D = {};
}
function fe(e, o, t, i) {
let d = l("__activeStagePosition");
const n = d || t.getBoundingClientRect(), f = i.getBoundingClientRect(), w = O(e, n.x, f.x - n.x, o), r = O(e, n.y, f.y - n.y, o), v = O(e, n.width, f.width - n.width, o), g = O(e, n.height, f.height - n.height, o);
d = {
x: w,
y: r,
width: v,
height: g
}, oe(d), k("__activeStagePosition", d);
}
function te(e) {
if (!e)
return;
const o = e.getBoundingClientRect(), t = {
x: o.x,
y: o.y,
width: o.width,
height: o.height
};
k("__activeStagePosition", t), oe(t);
}
function he() {
const e = l("__activeStagePosition"), o = l("__overlaySvg");
if (!e)
return;
if (!o) {
console.warn("No stage svg found.");
return;
}
const t = window.innerWidth, i = window.innerHeight;
o.setAttribute("viewBox", `0 0 ${t} ${i}`);
}
function ge(e) {
const o = we(e);
document.body.appendChild(o), re(o, (t) => {
t.target.tagName === "path" && L("overlayClick");
}), k("__overlaySvg", o);
}
function oe(e) {
const o = l("__overlaySvg");
if (!o) {
ge(e);
return;
}
const t = o.firstElementChild;
if ((t == null ? void 0 : t.tagName) !== "path")
throw new Error("no path element found in stage svg");
t.setAttribute("d", ie(e));
}
function we(e) {
const o = window.innerWidth, t = window.innerHeight, i = document.createElementNS("http://www.w3.org/2000/svg", "svg");
i.classList.add("driver-overlay", "driver-overlay-animated"), i.setAttribute("viewBox", `0 0 ${o} ${t}`), i.setAttribute("xmlSpace", "preserve"), i.setAttribute("xmlnsXlink", "http://www.w3.org/1999/xlink"), i.setAttribute("version", "1.1"), i.setAttribute("preserveAspectRatio", "xMinYMin slice"), i.style.fillRule = "evenodd", i.style.clipRule = "evenodd", i.style.strokeLinejoin = "round", i.style.strokeMiterlimit = "2", i.style.zIndex = "10000", i.style.position = "fixed", i.style.top = "0", i.style.left = "0", i.style.width = "100%", i.style.height = "100%";
const d = document.createElementNS("http://www.w3.org/2000/svg", "path");
return d.setAttribute("d", ie(e)), d.style.fill = s("overlayColor") || "rgb(0,0,0)", d.style.opacity = `${s("overlayOpacity")}`, d.style.pointerEvents = "auto", d.style.cursor = "auto", i.appendChild(d), i;
}
function ie(e) {
const o = window.innerWidth, t = window.innerHeight, i = s("stagePadding") || 0, d = s("stageRadius") || 0, n = e.width + i * 2, f = e.height + i * 2, w = Math.min(d, n / 2, f / 2), r = Math.floor(Math.max(w, 0)), v = e.x - i + r, g = e.y - i, y = n - r * 2, a = f - r * 2;
return `M${o},0L0,0L0,${t}L${o},${t}L${o},0Z
M${v},${g} h${y} a${r},${r} 0 0 1 ${r},${r} v${a} a${r},${r} 0 0 1 -${r},${r} h-${y} a${r},${r} 0 0 1 -${r},-${r} v-${a} a${r},${r} 0 0 1 ${r},-${r} z`;
}
function me() {
const e = l("__overlaySvg");
e && e.remove();
}
function ye() {
const e = document.getElementById("driver-dummy-element");
if (e)
return e;
let o = document.createElement("div");
return o.id = "driver-dummy-element", o.style.width = "0", o.style.height = "0", o.style.pointerEvents = "none", o.style.opacity = "0", o.style.position = "fixed", o.style.top = "50%", o.style.left = "50%", document.body.appendChild(o), o;
}
function j(e) {
const { element: o } = e;
let t = typeof o == "function" ? o() : typeof o == "string" ? document.querySelector(o) : o;
t || (t = ye()), be(t, e);
}
function xe() {
const e = l("__activeElement"), o = l("__activeStep");
e && (te(e), he(), ae(e, o));
}
function be(e, o) {
var C;
const i = Date.now(), d = l("__activeStep"), n = l("__activeElement") || e, f = !n || n === e, w = e.id === "driver-dummy-element", r = n.id === "driver-dummy-element", v = s("animate"), g = o.onHighlightStarted || s("onHighlightStarted"), y = (o == null ? void 0 : o.onHighlighted) || s("onHighlighted"), a = (d == null ? void 0 : d.onDeselected) || s("onDeselected"), p = s(), c = l();
!f && a && a(r ? void 0 : n, d, {
config: p,
state: c,
driver: _()
}), g && g(w ? void 0 : e, o, {
config: p,
state: c,
driver: _()
});
const u = !f && v;
let h = !1;
Se(), k("previousStep", d), k("previousElement", n), k("activeStep", o), k("activeElement", e);
const m = () => {
if (l("__transitionCallback") !== m)
return;
const b = Date.now() - i, E = 400 - b <= 400 / 2;
o.popover && E && !h && u && (Q(e, o), h = !0), s("animate") && b < 400 ? fe(b, 400, n, e) : (te(e), y && y(w ? void 0 : e, o, {
config: s(),
state: l(),
driver: _()
}), k("__transitionCallback", void 0), k("__previousStep", d), k("__previousElement", n), k("__activeStep", o), k("__activeElement", e)), window.requestAnimationFrame(m);
};
k("__transitionCallback", m), window.requestAnimationFrame(m), ee(e), !u && o.popover && Q(e, o), n.classList.remove("driver-active-element", "driver-no-interaction"), n.removeAttribute("aria-haspopup"), n.removeAttribute("aria-expanded"), n.removeAttribute("aria-controls"), ((C = o.disableActiveInteraction) != null ? C : s("disableActiveInteraction")) && e.classList.add("driver-no-interaction"), e.classList.add("driver-active-element"), e.setAttribute("aria-haspopup", "dialog"), e.setAttribute("aria-expanded", "true"), e.setAttribute("aria-controls", "driver-popover-content");
}
function Ce() {
var e;
(e = document.getElementById("driver-dummy-element")) == null || e.remove(), document.querySelectorAll(".driver-active-element").forEach((o) => {
o.classList.remove("driver-active-element", "driver-no-interaction"), o.removeAttribute("aria-haspopup"), o.removeAttribute("aria-expanded"), o.removeAttribute("aria-controls");
});
}
function M() {
const e = l("__resizeTimeout");
e && window.cancelAnimationFrame(e), k("__resizeTimeout", window.requestAnimationFrame(xe));
}
function Pe(e) {
var r;
if (!l("isInitialized") || !(e.key === "Tab" || e.keyCode === 9))
return;
const i = l("__activeElement"), d = (r = l("popover")) == null ? void 0 : r.wrapper, n = U([
...d ? [d] : [],
...i ? [i] : []
]), f = n[0], w = n[n.length - 1];
if (e.preventDefault(), e.shiftKey) {
const v = n[n.indexOf(document.activeElement) - 1] || w;
v == null || v.focus();
} else {
const v = n[n.indexOf(document.activeElement) + 1] || f;
v == null || v.focus();
}
}
function ne(e) {
var t;
((t = s("allowKeyboardControl")) == null || t) && (e.key === "Escape" ? L("escapePress") : e.key === "ArrowRight" ? L("arrowRightPress") : e.key === "ArrowLeft" && L("arrowLeftPress"));
}
function re(e, o, t) {
const i = (n, f) => {
const w = n.target;
e.contains(w) && ((!t || t(w)) && (n.preventDefault(), n.stopPropagation(), n.stopImmediatePropagation()), f == null || f(n));
};
document.addEventListener("pointerdown", i, !0), document.addEventListener("mousedown", i, !0), document.addEventListener("pointerup", i, !0), document.addEventListener("mouseup", i, !0), document.addEventListener(
"click",
(n) => {
i(n, o);
},
!0
);
}
function ke() {
window.addEventListener("keyup", ne, !1), window.addEventListener("keydown", Pe, !1), window.addEventListener("resize", M), window.addEventListener("scroll", M);
}
function _e() {
window.removeEventListener("keyup", ne), window.removeEventListener("resize", M), window.removeEventListener("scroll", M);
}
function Se() {
const e = l("popover");
e && (e.wrapper.style.display = "none");
}
function Q(e, o) {
var b, P;
let t = l("popover");
t && document.body.removeChild(t.wrapper), t = Le(), document.body.appendChild(t.wrapper);
const {
title: i,
description: d,
showButtons: n,
disableButtons: f,
showProgress: w,
nextBtnText: r = s("nextBtnText") || "Next &rarr;",
prevBtnText: v = s("prevBtnText") || "&larr; Previous",
progressText: g = s("progressText") || "{current} of {total}"
} = o.popover || {};
t.nextButton.innerHTML = r, t.previousButton.innerHTML = v, t.progress.innerHTML = g, i ? (t.title.innerHTML = i, t.title.style.display = "block") : t.title.style.display = "none", d ? (t.description.innerHTML = d, t.description.style.display = "block") : t.description.style.display = "none";
const y = n || s("showButtons"), a = w || s("showProgress") || !1, p = (y == null ? void 0 : y.includes("next")) || (y == null ? void 0 : y.includes("previous")) || a;
t.closeButton.style.display = y.includes("close") ? "block" : "none", p ? (t.footer.style.display = "flex", t.progress.style.display = a ? "block" : "none", t.nextButton.style.display = y.includes("next") ? "block" : "none", t.previousButton.style.display = y.includes("previous") ? "block" : "none") : t.footer.style.display = "none";
const c = f || s("disableButtons") || [];
c != null && c.includes("next") && (t.nextButton.disabled = !0, t.nextButton.classList.add("driver-popover-btn-disabled")), c != null && c.includes("previous") && (t.previousButton.disabled = !0, t.previousButton.classList.add("driver-popover-btn-disabled")), c != null && c.includes("close") && (t.closeButton.disabled = !0, t.closeButton.classList.add("driver-popover-btn-disabled"));
const u = t.wrapper;
u.style.display = "block", u.style.left = "", u.style.top = "", u.style.bottom = "", u.style.right = "", u.id = "driver-popover-content", u.setAttribute("role", "dialog"), u.setAttribute("aria-labelledby", "driver-popover-title"), u.setAttribute("aria-describedby", "driver-popover-description");
const h = t.arrow;
h.className = "driver-popover-arrow";
const m = ((b = o.popover) == null ? void 0 : b.popoverClass) || s("popoverClass") || "";
u.className = `driver-popover ${m}`.trim(), re(
t.wrapper,
(E) => {
var B, R, W;
const T = E.target, A = ((B = o.popover) == null ? void 0 : B.onNextClick) || s("onNextClick"), H = ((R = o.popover) == null ? void 0 : R.onPrevClick) || s("onPrevClick"), $ = ((W = o.popover) == null ? void 0 : W.onCloseClick) || s("onCloseClick");
if (T.closest(".driver-popover-next-btn"))
return A ? A(e, o, {
config: s(),
state: l(),
driver: _()
}) : L("nextClick");
if (T.closest(".driver-popover-prev-btn"))
return H ? H(e, o, {
config: s(),
state: l(),
driver: _()
}) : L("prevClick");
if (T.closest(".driver-popover-close-btn"))
return $ ? $(e, o, {
config: s(),
state: l(),
driver: _()
}) : L("closeClick");
},
(E) => !(t != null && t.description.contains(E)) && !(t != null && t.title.contains(E)) && typeof E.className == "string" && E.className.includes("driver-popover")
), k("popover", t);
const x = ((P = o.popover) == null ? void 0 : P.onPopoverRender) || s("onPopoverRender");
x && x(t, {
config: s(),
state: l(),
driver: _()
}), ae(e, o), ee(u);
const C = e.classList.contains("driver-dummy-element"), S = U([u, ...C ? [] : [e]]);
S.length > 0 && S[0].focus();
}
function se() {
const e = l("popover");
if (!(e != null && e.wrapper))
return;
const o = e.wrapper.getBoundingClientRect(), t = s("stagePadding") || 0, i = s("popoverOffset") || 0;
return {
width: o.width + t + i,
height: o.height + t + i,
realWidth: o.width,
realHeight: o.height
};
}
function Z(e, o) {
const { elementDimensions: t, popoverDimensions: i, popoverPadding: d, popoverArrowDimensions: n } = o;
return e === "start" ? Math.max(
Math.min(
t.top - d,
window.innerHeight - i.realHeight - n.width
),
n.width
) : e === "end" ? Math.max(
Math.min(
t.top - (i == null ? void 0 : i.realHeight) + t.height + d,
window.innerHeight - (i == null ? void 0 : i.realHeight) - n.width
),
n.width
) : e === "center" ? Math.max(
Math.min(
t.top + t.height / 2 - (i == null ? void 0 : i.realHeight) / 2,
window.innerHeight - (i == null ? void 0 : i.realHeight) - n.width
),
n.width
) : 0;
}
function G(e, o) {
const { elementDimensions: t, popoverDimensions: i, popoverPadding: d, popoverArrowDimensions: n } = o;
return e === "start" ? Math.max(
Math.min(
t.left - d,
window.innerWidth - i.realWidth - n.width
),
n.width
) : e === "end" ? Math.max(
Math.min(
t.left - (i == null ? void 0 : i.realWidth) + t.width + d,
window.innerWidth - (i == null ? void 0 : i.realWidth) - n.width
),
n.width
) : e === "center" ? Math.max(
Math.min(
t.left + t.width / 2 - (i == null ? void 0 : i.realWidth) / 2,
window.innerWidth - (i == null ? void 0 : i.realWidth) - n.width
),
n.width
) : 0;
}
function ae(e, o) {
const t = l("popover");
if (!t)
return;
const { align: i = "start", side: d = "left" } = (o == null ? void 0 : o.popover) || {}, n = i, f = e.id === "driver-dummy-element" ? "over" : d, w = s("stagePadding") || 0, r = se(), v = t.arrow.getBoundingClientRect(), g = e.getBoundingClientRect(), y = g.top - r.height;
let a = y >= 0;
const p = window.innerHeight - (g.bottom + r.height);
let c = p >= 0;
const u = g.left - r.width;
let h = u >= 0;
const m = window.innerWidth - (g.right + r.width);
let x = m >= 0;
const C = !a && !c && !h && !x;
let S = f;
if (f === "top" && a ? x = h = c = !1 : f === "bottom" && c ? x = h = a = !1 : f === "left" && h ? x = a = c = !1 : f === "right" && x && (h = a = c = !1), f === "over") {
const b = window.innerWidth / 2 - r.realWidth / 2, P = window.innerHeight / 2 - r.realHeight / 2;
t.wrapper.style.left = `${b}px`, t.wrapper.style.right = "auto", t.wrapper.style.top = `${P}px`, t.wrapper.style.bottom = "auto";
} else if (C) {
const b = window.innerWidth / 2 - (r == null ? void 0 : r.realWidth) / 2, P = 10;
t.wrapper.style.left = `${b}px`, t.wrapper.style.right = "auto", t.wrapper.style.bottom = `${P}px`, t.wrapper.style.top = "auto";
} else if (h) {
const b = Math.min(
u,
window.innerWidth - (r == null ? void 0 : r.realWidth) - v.width
), P = Z(n, {
elementDimensions: g,
popoverDimensions: r,
popoverPadding: w,
popoverArrowDimensions: v
});
t.wrapper.style.left = `${b}px`, t.wrapper.style.top = `${P}px`, t.wrapper.style.bottom = "auto", t.wrapper.style.right = "auto", S = "left";
} else if (x) {
const b = Math.min(
m,
window.innerWidth - (r == null ? void 0 : r.realWidth) - v.width
), P = Z(n, {
elementDimensions: g,
popoverDimensions: r,
popoverPadding: w,
popoverArrowDimensions: v
});
t.wrapper.style.right = `${b}px`, t.wrapper.style.top = `${P}px`, t.wrapper.style.bottom = "auto", t.wrapper.style.left = "auto", S = "right";
} else if (a) {
const b = Math.min(
y,
window.innerHeight - r.realHeight - v.width
);
let P = G(n, {
elementDimensions: g,
popoverDimensions: r,
popoverPadding: w,
popoverArrowDimensions: v
});
t.wrapper.style.top = `${b}px`, t.wrapper.style.left = `${P}px`, t.wrapper.style.bottom = "auto", t.wrapper.style.right = "auto", S = "top";
} else if (c) {
const b = Math.min(
p,
window.innerHeight - (r == null ? void 0 : r.realHeight) - v.width
);
let P = G(n, {
elementDimensions: g,
popoverDimensions: r,
popoverPadding: w,
popoverArrowDimensions: v
});
t.wrapper.style.left = `${P}px`, t.wrapper.style.bottom = `${b}px`, t.wrapper.style.top = "auto", t.wrapper.style.right = "auto", S = "bottom";
}
C ? t.arrow.classList.add("driver-popover-arrow-none") : Ee(n, S, e);
}
function Ee(e, o, t) {
const i = l("popover");
if (!i)
return;
const d = t.getBoundingClientRect(), n = se(), f = i.arrow, w = n.width, r = window.innerWidth, v = d.width, g = d.left, y = n.height, a = window.innerHeight, p = d.top, c = d.height;
f.className = "driver-popover-arrow";
let u = o, h = e;
if (o === "top" ? (g + v <= 0 ? (u = "right", h = "end") : g + v - w <= 0 && (u = "top", h = "start"), g >= r ? (u = "left", h = "end") : g + w >= r && (u = "top", h = "end")) : o === "bottom" ? (g + v <= 0 ? (u = "right", h = "start") : g + v - w <= 0 && (u = "bottom", h = "start"), g >= r ? (u = "left", h = "start") : g + w >= r && (u = "bottom", h = "end")) : o === "left" ? (p + c <= 0 ? (u = "bottom", h = "end") : p + c - y <= 0 && (u = "left", h = "start"), p >= a ? (u = "top", h = "end") : p + y >= a && (u = "left", h = "end")) : o === "right" && (p + c <= 0 ? (u = "bottom", h = "start") : p + c - y <= 0 && (u = "right", h = "start"), p >= a ? (u = "top", h = "start") : p + y >= a && (u = "right", h = "end")), !u)
f.classList.add("driver-popover-arrow-none");
else {
f.classList.add(`driver-popover-arrow-side-${u}`), f.classList.add(`driver-popover-arrow-align-${h}`);
const m = t.getBoundingClientRect(), x = f.getBoundingClientRect(), C = s("stagePadding") || 0, S = m.left - C < window.innerWidth && m.right + C > 0 && m.top - C < window.innerHeight && m.bottom + C > 0;
o === "bottom" && S && (x.x > m.x && x.x + x.width < m.x + m.width ? i.wrapper.style.transform = "translateY(0)" : (f.classList.remove(`driver-popover-arrow-align-${h}`), f.classList.add("driver-popover-arrow-none"), i.wrapper.style.transform = `translateY(-${C / 2}px)`));
}
}
function Le() {
const e = document.createElement("div");
e.classList.add("driver-popover");
const o = document.createElement("div");
o.classList.add("driver-popover-arrow");
const t = document.createElement("header");
t.id = "driver-popover-title", t.classList.add("driver-popover-title"), t.style.display = "none", t.innerText = "Popover Title";
const i = document.createElement("div");
i.id = "driver-popover-description", i.classList.add("driver-popover-description"), i.style.display = "none", i.innerText = "Popover description is here";
const d = document.createElement("button");
d.type = "button", d.classList.add("driver-popover-close-btn"), d.setAttribute("aria-label", "Close"), d.innerHTML = "&times;";
const n = document.createElement("footer");
n.classList.add("driver-popover-footer");
const f = document.createElement("span");
f.classList.add("driver-popover-progress-text"), f.innerText = "";
const w = document.createElement("span");
w.classList.add("driver-popover-navigation-btns");
const r = document.createElement("button");
r.type = "button", r.classList.add("driver-popover-prev-btn"), r.innerHTML = "&larr; Previous";
const v = document.createElement("button");
return v.type = "button", v.classList.add("driver-popover-next-btn"), v.innerHTML = "Next &rarr;", w.appendChild(r), w.appendChild(v), n.appendChild(f), n.appendChild(w), e.appendChild(d), e.appendChild(o), e.appendChild(t), e.appendChild(i), e.appendChild(n), {
wrapper: e,
arrow: o,
title: t,
description: i,
footer: n,
previousButton: r,
nextButton: v,
closeButton: d,
footerButtons: w,
progress: f
};
}
function Te() {
var o;
const e = l("popover");
e && ((o = e.wrapper.parentElement) == null || o.removeChild(e.wrapper));
}
function Ae(e = {}) {
F(e);
function o() {
s("allowClose") && g();
}
function t() {
const a = s("overlayClickBehavior");
if (s("allowClose") && a === "close") {
g();
return;
}
if (typeof a == "function") {
const p = l("__activeStep"), c = l("__activeElement");
a(c, p, {
config: s(),
state: l(),
driver: _()
});
return;
}
a === "nextStep" && i();
}
function i() {
const a = l("activeIndex"), p = s("steps") || [];
if (typeof a == "undefined")
return;
const c = a + 1;
p[c] ? v(c) : g();
}
function d() {
const a = l("activeIndex"), p = s("steps") || [];
if (typeof a == "undefined")
return;
const c = a - 1;
p[c] ? v(c) : g();
}
function n(a) {
(s("steps") || [])[a] ? v(a) : g();
}
function f() {
var x;
if (l("__transitionCallback"))
return;
const p = l("activeIndex"), c = l("__activeStep"), u = l("__activeElement");
if (typeof p == "undefined" || typeof c == "undefined" || typeof l("activeIndex") == "undefined")
return;
const m = ((x = c.popover) == null ? void 0 : x.onPrevClick) || s("onPrevClick");
if (m)
return m(u, c, {
config: s(),
state: l(),
driver: _()
});
d();
}
function w() {
var m;
if (l("__transitionCallback"))
return;
const p = l("activeIndex"), c = l("__activeStep"), u = l("__activeElement");
if (typeof p == "undefined" || typeof c == "undefined")
return;
const h = ((m = c.popover) == null ? void 0 : m.onNextClick) || s("onNextClick");
if (h)
return h(u, c, {
config: s(),
state: l(),
driver: _()
});
i();
}
function r() {
l("isInitialized") || (k("isInitialized", !0), document.body.classList.add("driver-active", s("animate") ? "driver-fade" : "driver-simple"), ke(), N("overlayClick", t), N("escapePress", o), N("arrowLeftPress", f), N("arrowRightPress", w));
}
function v(a = 0) {
var $, B, R, W, V, q, K, Y;
const p = s("steps");
if (!p) {
console.error("No steps to drive through"), g();
return;
}
if (!p[a]) {
g();
return;
}
k("__activeOnDestroyed", document.activeElement), k("activeIndex", a);
const c = p[a], u = p[a + 1], h = p[a - 1], m = (($ = c.popover) == null ? void 0 : $.doneBtnText) || s("doneBtnText") || "Done", x = s("allowClose"), C = typeof ((B = c.popover) == null ? void 0 : B.showProgress) != "undefined" ? (R = c.popover) == null ? void 0 : R.showProgress : s("showProgress"), b = (((W = c.popover) == null ? void 0 : W.progressText) || s("progressText") || "{{current}} of {{total}}").replace("{{current}}", `${a + 1}`).replace("{{total}}", `${p.length}`), P = ((V = c.popover) == null ? void 0 : V.showButtons) || s("showButtons"), E = [
"next",
"previous",
...x ? ["close"] : []
].filter((ce) => !(P != null && P.length) || P.includes(ce)), T = ((q = c.popover) == null ? void 0 : q.onNextClick) || s("onNextClick"), A = ((K = c.popover) == null ? void 0 : K.onPrevClick) || s("onPrevClick"), H = ((Y = c.popover) == null ? void 0 : Y.onCloseClick) || s("onCloseClick");
j({
...c,
popover: {
showButtons: E,
nextBtnText: u ? void 0 : m,
disableButtons: [...h ? [] : ["previous"]],
showProgress: C,
progressText: b,
onNextClick: T || (() => {
u ? v(a + 1) : g();
}),
onPrevClick: A || (() => {
v(a - 1);
}),
onCloseClick: H || (() => {
g();
}),
...(c == null ? void 0 : c.popover) || {}
}
});
}
function g(a = !0) {
const p = l("__activeElement"), c = l("__activeStep"), u = l("__activeOnDestroyed"), h = s("onDestroyStarted");
if (a && h) {
const C = !p || (p == null ? void 0 : p.id) === "driver-dummy-element";
h(C ? void 0 : p, c, {
config: s(),
state: l(),
driver: _()
});
return;
}
const m = (c == null ? void 0 : c.onDeselected) || s("onDeselected"), x = s("onDestroyed");
if (document.body.classList.remove("driver-active", "driver-fade", "driver-simple"), _e(), Te(), Ce(), me(), de(), X(), p && c) {
const C = p.id === "driver-dummy-element";
m && m(C ? void 0 : p, c, {
config: s(),
state: l(),
driver: _()
}), x && x(C ? void 0 : p, c, {
config: s(),
state: l(),
driver: _()
});
}
u && u.focus();
}
const y = {
isActive: () => l("isInitialized") || !1,
refresh: M,
drive: (a = 0) => {
r(), v(a);
},
setConfig: F,
setSteps: (a) => {
X(), F({
...s(),
steps: a
});
},
getConfig: s,
getState: l,
getActiveIndex: () => l("activeIndex"),
isFirstStep: () => l("activeIndex") === 0,
isLastStep: () => {
const a = s("steps") || [], p = l("activeIndex");
return p !== void 0 && p === a.length - 1;
},
getActiveStep: () => l("activeStep"),
getActiveElement: () => l("activeElement"),
getPreviousElement: () => l("previousElement"),
getPreviousStep: () => l("previousStep"),
moveNext: i,
movePrevious: d,
moveTo: n,
hasNextStep: () => {
const a = s("steps") || [], p = l("activeIndex");
return p !== void 0 && !!a[p + 1];
},
hasPreviousStep: () => {
const a = s("steps") || [], p = l("activeIndex");
return p !== void 0 && !!a[p - 1];
},
highlight: (a) => {
r(), j({
...a,
popover: a.popover ? {
showButtons: [],
showProgress: !1,
progressText: "",
...a.popover
} : void 0
});
},
destroy: () => {
g(!1);
}
};
return le(y), y;
}
export {
Ae as driver
};

View file

@ -0,0 +1,21 @@
The MIT License
Copyright (c) Kamran Ahmed
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

View file

@ -0,0 +1,68 @@
{
"name": "driver.js",
"license": "MIT",
"private": false,
"version": "1.4.0",
"main": "./dist/driver.js.cjs",
"module": "./dist/driver.js.mjs",
"types": "./dist/driver.js.d.ts",
"homepage": "https://driverjs.com",
"repository": "https://github.com/kamranahmedse/driver.js",
"author": "Kamran Ahmed <kamranahmed.se@gmail.com>",
"bugs": {
"url": "https://github.com/kamranahmedse/driver.js/issues"
},
"exports": {
".": {
"types": "./dist/driver.js.d.ts",
"require": "./dist/driver.js.cjs",
"import": "./dist/driver.js.mjs"
},
"./dist/driver.css": {
"require": "./dist/driver.css",
"import": "./dist/driver.css",
"default": "./dist/driver.css"
}
},
"scripts": {
"dev": "vite --host",
"build": "tsc && vite build && dts-bundle-generator --config ./dts-bundle-generator.config.ts",
"test": "vitest",
"format": "prettier . --write"
},
"files": [
"!tests/**/*",
"!docs/**/*",
"dist/**/*",
"!dist/**/*.js.map"
],
"devDependencies": {
"@types/jsdom": "^21.1.2",
"@types/node": "^20.5.9",
"@vitest/coverage-c8": "^0.32.0",
"dts-bundle-generator": "^8.0.1",
"postcss": "^8.4.29",
"postcss-scss": "^4.0.7",
"prettier": "^3.0.3",
"ts-node": "^10.9.1",
"typescript": "^5.2.2",
"vite": "^4.4.9",
"vitest": "^0.34.3"
},
"keywords": [
"driver.js",
"driver",
"tour",
"guide",
"overlay",
"tooltip",
"walkthrough",
"product tour",
"product walkthrough",
"product guide",
"product tutorial",
"product demo",
"modal",
"lightbox"
]
}

View file

@ -0,0 +1,57 @@
<h1 align="center"><img height="150" src="https://driverjs.com/driver.svg" /><br> Driver.js</h1>
<p align="center">
<a href="https://github.com/kamranahmedse/driver.js/blob/master/license">
<img src="https://img.shields.io/badge/License-MIT-yellow.svg" />
</a>
<a href="https://www.jsdelivr.com/package/npm/driver.js">
<img src="https://data.jsdelivr.com/v1/package/npm/driver.js/badge?style=rounded" alt="jsdelivr hits" />
</a>
<a href="https://npmjs.org/package/driver.js">
<img src="https://img.shields.io/npm/dm/driver.js" alt="downloads" />
</a>
</p>
<p align="center">
<b>Powerful, highly customizable vanilla JavaScript engine to drive user's focus on the page</b></br>
<sub>No external dependencies, light-weight, supports all major browsers and highly customizable </sub><br>
</p>
<br />
- **Simple**: is simple to use and has no external dependency at all
- **Light-weight**: is just 5kb gzipped as compared to other libraries which are +12kb gzipped
- **Highly customizable**: has a powerful API and can be used however you want
- **Highlight anything**: highlight any (literally any) element on page
- **Feature introductions**: create powerful feature introductions for your web applications
- **Focus shifters**: add focus shifters for users
- **User friendly**: Everything is controllable by keyboard
- **TypeScript**: Written in TypeScript
- **Consistent behavior**: usable across all browsers
- **MIT Licensed**: free for personal and commercial use
<br />
## Documentation
For demos and documentation, visit [driverjs.com](https://driverjs.com)
<br />
## So, yet another tour library?
**No**, it's more than a tour library. **Tours are just one of the many use-cases**. Driver.js can be used wherever you need some sort of overlay for the page; some common usecases could be: [highlighting a page component](https://i.imgur.com/TS0LSK9.png) when user is interacting with some component to keep them focused, providing contextual help e.g. popover with dimmed background when user is filling a form, using it as a focus shifter to bring user's attention to some component on page, using it to simulate those "Turn off the Lights" widgets that you might have seen on video players online, usage as a simple modal, and of-course product tours etc.
Driver.js is written in Vanilla TypeScript, has zero dependencies and is highly customizable. It has several options allowing you to change how it behaves and also **provides you the hooks** to manipulate the elements as they are highlighted, about to be highlighted, or deselected.
> Also, comparing the size of Driver.js with other libraries, it's the most light-weight, it is **just ~5kb gzipped** while others are 12kb+.
<br>
## Contributions
Feel free to submit pull requests, create issues or spread the word.
## License
MIT &copy; [Kamran Ahmed](https://twitter.com/kamrify)