Comparing version
var Y = Object.defineProperty; | ||
var B = (r) => { | ||
var H = (r) => { | ||
throw TypeError(r); | ||
}; | ||
var X = (r, t, i) => t in r ? Y(r, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : r[t] = i; | ||
var p = (r, t, i) => X(r, typeof t != "symbol" ? t + "" : t, i), M = (r, t, i) => t.has(r) || B("Cannot " + i); | ||
var _ = (r, t, i) => (M(r, t, "read from private field"), i ? i.call(r) : t.get(r)), S = (r, t, i) => t.has(r) ? B("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, i), C = (r, t, i, e) => (M(r, t, "write to private field"), e ? e.call(r, i) : t.set(r, i), i), v = (r, t, i) => (M(r, t, "access private method"), i); | ||
var p = (r, t, i) => X(r, typeof t != "symbol" ? t + "" : t, i), M = (r, t, i) => t.has(r) || H("Cannot " + i); | ||
var _ = (r, t, i) => (M(r, t, "read from private field"), i ? i.call(r) : t.get(r)), S = (r, t, i) => t.has(r) ? H("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, i), C = (r, t, i, e) => (M(r, t, "write to private field"), e ? e.call(r, i) : t.set(r, i), i), v = (r, t, i) => (M(r, t, "access private method"), i); | ||
function G(r) { | ||
const t = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new Map(), e = [], n = []; | ||
const t = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new Map(), e = [], s = []; | ||
for (const l of r) | ||
(l == null ? void 0 : l.order) === void 0 ? e.push(l) : (l == null ? void 0 : l.order) > r.length || (l == null ? void 0 : l.order) < 0 ? n.push(l) : t.has(l.order) ? i.set(l.order, l) : t.set(l.order, l); | ||
(l == null ? void 0 : l.order) === void 0 ? e.push(l) : (l == null ? void 0 : l.order) > r.length || (l == null ? void 0 : l.order) < 0 ? s.push(l) : t.has(l.order) ? i.set(l.order, l) : t.set(l.order, l); | ||
const a = new Array(r.length); | ||
let s = 0, o = 0; | ||
let n = 0, o = 0; | ||
for (let l = 0; l < r.length; l++) | ||
@@ -20,6 +20,6 @@ if (t.has(l)) { | ||
} | ||
} else s < e.length ? a[l] = e[s++] : a[l] = n[o++]; | ||
} else n < e.length ? a[l] = e[n++] : a[l] = s[o++]; | ||
return a.length === r.length ? a : a.slice(0, r.length); | ||
} | ||
function H(r) { | ||
function z(r) { | ||
const t = {}, i = [ | ||
@@ -32,14 +32,14 @@ "id", | ||
for (let e = 0; e < r.length; e++) { | ||
const n = r[e]; | ||
Object.keys(n).forEach((a) => { | ||
const s = r[e]; | ||
Object.keys(s).forEach((a) => { | ||
if (!i.includes(a)) { | ||
const s = n[a]; | ||
s && typeof s == "object" && Object.keys(s).forEach((o) => { | ||
const n = s[a]; | ||
n && typeof n == "object" && Object.keys(n).forEach((o) => { | ||
if (o === "default") return; | ||
const l = { | ||
id: n.id, | ||
id: s.id, | ||
key: a, | ||
value: s[o], | ||
value: n[o], | ||
media_query: o, | ||
default: s.default | ||
default: n.default | ||
}; | ||
@@ -55,7 +55,7 @@ t[o] ? t[o].push(l) : t[o] = [l]; | ||
const e = JSON.parse(JSON.stringify(r)); | ||
return t.forEach((n) => { | ||
return t.forEach((s) => { | ||
const a = e.findIndex( | ||
(s) => (s == null ? void 0 : s.id) === n.id | ||
(n) => (n == null ? void 0 : n.id) === s.id | ||
); | ||
a > -1 && (e[a][n.key] = n[i]); | ||
a > -1 && (e[a][s.key] = s[i]); | ||
}), G(e); | ||
@@ -87,8 +87,8 @@ } | ||
for (let e = 0; e < r.length; e++) { | ||
const n = r[e], a = `step-${e + Math.random()}`; | ||
n.id ? t.has(n.id) ? (console.warn( | ||
`Duplicate ajala step id found: ${n.id}. Please make sure all step ids are unique.` | ||
), n.id = a) : t.add(n.id) : (n.id = a, console.warn( | ||
const s = r[e], a = `step-${e + Math.random()}`; | ||
s.id ? t.has(s.id) ? (console.warn( | ||
`Duplicate ajala step id found: ${s.id}. Please make sure all step ids are unique.` | ||
), s.id = a) : t.add(s.id) : (s.id = a, console.warn( | ||
`ajala step ${e} is missing an id. Please make sure all steps have unique ids.` | ||
)), i.push(n); | ||
)), i.push(s); | ||
} | ||
@@ -124,3 +124,3 @@ return i; | ||
init() { | ||
var i, e, n, a, s, o, l, h, d, c; | ||
var i, e, s, a, n, o, l, h, d, c; | ||
this.wrapper_element = document.createElement("div"), this.tooltip_element = this.ajala.options.custom_tooltip || document.createElement("div"), this.tooltip_container_element = document.createElement("div"), this.next_btn = null, this.prev_btn = null, this.close_btn = null, this.overlay_path.addEventListener( | ||
@@ -134,6 +134,6 @@ "click", | ||
const t = (i = this.ajala.options.default_arrow_options) != null && i.size ? `${(e = this.ajala.options.default_arrow_options) == null ? void 0 : e.size}px` : "48px"; | ||
this.arrow_element.style.position = "absolute", this.arrow_element.style.width = t, this.arrow_element.style.height = t, this.arrow_element.style.top = "0px", this.arrow_element.style.left = "0px", this.arrow_element.style.fill = ((n = this.ajala.options.default_arrow_options) == null ? void 0 : n.color) || "#000000", this.arrow_element.style.zIndex = "2", this.arrow_element.style.pointerEvents = "none", this.arrow_element.classList.add("ajala_tooltip_arrow"), (a = this.ajala.options.default_arrow_options) != null && a.hide || this.tooltip_container_element.appendChild(this.arrow_element), this.tooltip_container_element.style.position = "fixed", this.tooltip_container_element.style.top = "0px", this.tooltip_container_element.style.left = "0px", this.tooltip_container_element.style.zIndex = "20", this.tooltip_container_element.style.width = (s = this.ajala.options) != null && s.tooltip_width ? `${(o = this.ajala.options) == null ? void 0 : o.tooltip_width}px` : "250px", this.tooltip_container_element.style.height = (l = this.ajala.options) != null && l.tooltip_height ? `${(h = this.ajala.options) == null ? void 0 : h.tooltip_height}px` : "180px", this.tooltip_container_element.style.pointerEvents = "auto", this.tooltip_container_element.classList.add("ajala_tooltip_container"), this.tooltip_container_element.appendChild(this.tooltip_element), this.tooltip_container_element.style.transform = "translate(0px, 0px)", this.wrapper_element.style.position = "fixed", this.wrapper_element.style.top = "0px", this.wrapper_element.style.left = "0px", this.wrapper_element.style.zIndex = "9999999", this.wrapper_element.classList.add("ajala"), this.wrapper_element.append(this.tooltip_container_element), (typeof ((d = this.ajala.options.overlay_options) == null ? void 0 : d.hide) > "u" || !((c = this.ajala.options.overlay_options) != null && c.hide)) && (v(this, O, J).call(this), this.wrapper_element.append(this.overlay_element), document.body.classList.add("ajala_isOverlay")); | ||
this.arrow_element.style.position = "absolute", this.arrow_element.style.width = t, this.arrow_element.style.height = t, this.arrow_element.style.top = "0px", this.arrow_element.style.left = "0px", this.arrow_element.style.fill = ((s = this.ajala.options.default_arrow_options) == null ? void 0 : s.color) || "#000000", this.arrow_element.style.zIndex = "2", this.arrow_element.style.pointerEvents = "none", this.arrow_element.classList.add("ajala_tooltip_arrow"), (a = this.ajala.options.default_arrow_options) != null && a.hide || this.tooltip_container_element.appendChild(this.arrow_element), this.tooltip_container_element.style.position = "fixed", this.tooltip_container_element.style.top = "0px", this.tooltip_container_element.style.left = "0px", this.tooltip_container_element.style.zIndex = "20", this.tooltip_container_element.style.width = (n = this.ajala.options) != null && n.tooltip_width ? `${(o = this.ajala.options) == null ? void 0 : o.tooltip_width}px` : "250px", this.tooltip_container_element.style.height = (l = this.ajala.options) != null && l.tooltip_height ? `${(h = this.ajala.options) == null ? void 0 : h.tooltip_height}px` : "180px", this.tooltip_container_element.style.pointerEvents = "auto", this.tooltip_container_element.classList.add("ajala_tooltip_container"), this.tooltip_container_element.appendChild(this.tooltip_element), this.tooltip_container_element.style.transform = "translate(0px, 0px)", this.wrapper_element.style.position = "fixed", this.wrapper_element.style.top = "0px", this.wrapper_element.style.left = "0px", this.wrapper_element.style.zIndex = "9999999", this.wrapper_element.classList.add("ajala"), this.wrapper_element.append(this.tooltip_container_element), (typeof ((d = this.ajala.options.overlay_options) == null ? void 0 : d.hide) > "u" || !((c = this.ajala.options.overlay_options) != null && c.hide)) && (v(this, O, J).call(this), this.wrapper_element.append(this.overlay_element), document.body.classList.add("ajala_isOverlay")); | ||
} | ||
update(t) { | ||
var e, n, a, s; | ||
var e, s, a, n; | ||
const i = this.ajala.options.default_tooltip_options; | ||
@@ -154,3 +154,3 @@ if (this.is_default_tooltip_element) { | ||
const o = document.querySelector(".ajala_content"); | ||
o && (o.innerText = ((n = this.ajala.active_step) == null ? void 0 : n.content) ?? ""); | ||
o && (o.innerText = ((s = this.ajala.active_step) == null ? void 0 : s.content) ?? ""); | ||
} | ||
@@ -161,3 +161,3 @@ this.next_btn && (this.next_btn.innerText = "Next"); | ||
const { active_index: o, placement: l, taregt_el: h } = t; | ||
if ((((a = this.ajala.active_step) == null ? void 0 : a.enable_target_interaction) ?? ((s = this.ajala.options) == null ? void 0 : s.enable_target_interaction)) && h && h.classList.add("ajala_target_interactive"), this.ajala.getFlattenSteps().length - 1 === this.ajala.getActiveStepFlattenIndex() && this.next_btn && (this.next_btn.innerText = "Finish"), h) { | ||
if ((((a = this.ajala.active_step) == null ? void 0 : a.enable_target_interaction) ?? ((n = this.ajala.options) == null ? void 0 : n.enable_target_interaction)) && h && h.classList.add("ajala_target_interactive"), this.ajala.getFlattenSteps().length - 1 === this.ajala.getActiveStepFlattenIndex() && this.next_btn && (this.next_btn.innerText = "Finish"), h) { | ||
const { x: c, y: m, rotate: g } = this.placement.arrow.calculatePlacmentDelta({ | ||
@@ -176,12 +176,12 @@ active_index: o, | ||
height: e, | ||
width: n, | ||
width: s, | ||
border_radius: a | ||
}) { | ||
const s = ` | ||
const n = ` | ||
M${t + a},${i} | ||
h${Math.max(n - 2 * a, 0)} | ||
h${Math.max(s - 2 * a, 0)} | ||
a${a},${a} 0 0 1 ${a},${a} | ||
v${Math.max(e - 2 * a, 0)} | ||
a${a},${a} 0 0 1 -${a},${a} | ||
h-${Math.max(n - 2 * a, 0)} | ||
h-${Math.max(s - 2 * a, 0)} | ||
a${a},${a} 0 0 1 -${a},-${a} | ||
@@ -193,3 +193,3 @@ v-${Math.max(e - 2 * a, 0)} | ||
M${window.innerWidth},0 L0,0 L0,${window.innerHeight} L${window.innerWidth},${window.innerHeight} L${window.innerWidth},0 Z | ||
${s} | ||
${n} | ||
`; | ||
@@ -221,3 +221,3 @@ this.overlay_path.setAttribute("d", o); | ||
start() { | ||
var i, e, n; | ||
var i, e, s; | ||
document.body.classList.remove("ajala_active"), document.body.style.overflow = "hidden", this.ajala.dispatchEvent({ | ||
@@ -257,3 +257,3 @@ type: "onBeforeDomInsert", | ||
`, document.head.appendChild(this.style_element), this.next_btn && (this.next_btn.innerText = "Next"), this.navigation && ((i = this.next_btn) == null || i.addEventListener("click", this.navigation.next), (e = this.prev_btn) == null || e.addEventListener("click", this.navigation.prev), (n = this.close_btn) == null || n.addEventListener("click", this.navigation.close)), window.addEventListener("resize", this.refresh); | ||
`, document.head.appendChild(this.style_element), this.next_btn && (this.next_btn.innerText = "Next"), this.navigation && ((i = this.next_btn) == null || i.addEventListener("click", this.navigation.next), (e = this.prev_btn) == null || e.addEventListener("click", this.navigation.prev), (s = this.close_btn) == null || s.addEventListener("click", this.navigation.close)), window.addEventListener("resize", this.refresh); | ||
} | ||
@@ -301,3 +301,3 @@ closeOnOverlayClickHandler() { | ||
O = new WeakSet(), V = function() { | ||
var n, a, s, o, l, h; | ||
var s, a, n, o, l, h; | ||
this.is_default_tooltip_element = !0; | ||
@@ -332,3 +332,3 @@ const t = this.ajala.options.default_tooltip_options; | ||
</div> | ||
<h3 class="ajala_title">${(n = this.ajala.active_step) == null ? void 0 : n.title}</h3> | ||
<h3 class="ajala_title">${(s = this.ajala.active_step) == null ? void 0 : s.title}</h3> | ||
<p class="ajala_content"> | ||
@@ -340,3 +340,3 @@ ${(a = this.ajala.active_step) == null ? void 0 : a.content} | ||
<button class="ajala_btn_next">Next</button> | ||
</div>`, this.next_btn = this.tooltip_element.querySelector(".ajala_btn_next"), this.prev_btn = this.tooltip_element.querySelector(".ajala_btn_prev"), this.close_btn = this.tooltip_element.querySelector(".ajala_close_btn"), t != null && t.class_name && this.tooltip_element.classList.add(t.class_name), t != null && t.hide_dot_nav && ((s = this.tooltip_element.querySelector(".ajala_dot_navs")) == null || s.remove()), t != null && t.hide_title && ((o = this.tooltip_element.querySelector(".ajala_title")) == null || o.remove()), t != null && t.hide_content && ((l = this.tooltip_element.querySelector(".ajala_content")) == null || l.remove()), t != null && t.hide_close_btn && ((h = this.close_btn) == null || h.remove()); | ||
</div>`, this.next_btn = this.tooltip_element.querySelector(".ajala_btn_next"), this.prev_btn = this.tooltip_element.querySelector(".ajala_btn_prev"), this.close_btn = this.tooltip_element.querySelector(".ajala_close_btn"), t != null && t.class_name && this.tooltip_element.classList.add(t.class_name), t != null && t.hide_dot_nav && ((n = this.tooltip_element.querySelector(".ajala_dot_navs")) == null || n.remove()), t != null && t.hide_title && ((o = this.tooltip_element.querySelector(".ajala_title")) == null || o.remove()), t != null && t.hide_content && ((l = this.tooltip_element.querySelector(".ajala_content")) == null || l.remove()), t != null && t.hide_close_btn && ((h = this.close_btn) == null || h.remove()); | ||
}, W = function() { | ||
@@ -349,4 +349,4 @@ var i, e; | ||
}, J = function() { | ||
var e, n, a; | ||
const t = ((n = (e = this.ajala.options.overlay_options) == null ? void 0 : e.opacity) == null ? void 0 : n.toString()) || " 0.7", i = ((a = this.ajala.options.overlay_options) == null ? void 0 : a.color) || " black"; | ||
var e, s, a; | ||
const t = ((s = (e = this.ajala.options.overlay_options) == null ? void 0 : e.opacity) == null ? void 0 : s.toString()) || " 0.7", i = ((a = this.ajala.options.overlay_options) == null ? void 0 : a.color) || " black"; | ||
this.overlay_element.setAttribute("xmlns", "http://www.w3.org/2000/svg"), this.overlay_element.style.position = "fixed", this.overlay_element.style.zIndex = "10", this.overlay_element.style.top = "0px", this.overlay_element.style.left = "0px", this.overlay_element.style.width = "100vw", this.overlay_element.style.height = "100vh", this.overlay_element.style.pointerEvents = "none", this.overlay_element.classList.add("ajala_overlay"), this.overlay_path.style.pointerEvents = "auto", this.updateOverlayCutoutPathData({ | ||
@@ -372,3 +372,3 @@ x: 0, | ||
async goTo(t) { | ||
var i, e, n; | ||
var i, e, s; | ||
if (!((i = this.animations) != null && i.is_animating)) { | ||
@@ -381,7 +381,7 @@ if ((e = this.ajala.getFlattenSteps()[t]) != null && e.skip) { | ||
this.animations.is_animating = !0, this.ui.resetOverlayCutoutSvgRect(); | ||
const a = (n = this.ajala.getOriginalSteps()[this.ajala.getActiveStepOriginalIndex()]) == null ? void 0 : n.onInActive; | ||
const a = (s = this.ajala.getOriginalSteps()[this.ajala.getActiveStepOriginalIndex()]) == null ? void 0 : s.onInActive; | ||
a && t !== this.ajala.getActiveStepFlattenIndex() && a(this.ajala.getActiveStep(), this.ajala); | ||
const s = await this.placement.tooltip.calculateTravelDistance(t), o = () => { | ||
const n = await this.placement.tooltip.calculateTravelDistance(t), o = () => { | ||
var h; | ||
this.animations.is_animating = !1, this.ajala.active_step = this.ajala.getFlattenSteps()[s.active_index], this.ui.update(s); | ||
this.animations.is_animating = !1, this.ajala.active_step = this.ajala.getFlattenSteps()[n.active_index], this.ui.update(n); | ||
const l = (h = this.ajala.getOriginalSteps()[this.ajala.getActiveStepOriginalIndex()]) == null ? void 0 : h.onActive; | ||
@@ -397,3 +397,3 @@ l && l(this.ajala.getActiveStep(), this.ajala), this.ajala.dispatchEvent({ | ||
this.animations.transition[this.animations.transition_type]( | ||
s, | ||
n, | ||
{ | ||
@@ -417,7 +417,7 @@ onComplete: o | ||
}), this.ui.resetOverlayCutoutSvgRect(); | ||
const n = await this.placement.tooltip.calculateTravelDistance(t), a = () => { | ||
const s = await this.placement.tooltip.calculateTravelDistance(t), a = () => { | ||
var o; | ||
this.animations.is_animating = !1, this.ajala.active_step = this.ajala.getFlattenSteps()[n.active_index], this.ui.update(n); | ||
const s = (o = this.ajala.getOriginalSteps()[this.ajala.getActiveStepOriginalIndex()]) == null ? void 0 : o.onActive; | ||
s && s(this.ajala.getActiveStep(), this.ajala), this.ajala.dispatchEvent({ | ||
this.animations.is_animating = !1, this.ajala.active_step = this.ajala.getFlattenSteps()[s.active_index], this.ui.update(s); | ||
const n = (o = this.ajala.getOriginalSteps()[this.ajala.getActiveStepOriginalIndex()]) == null ? void 0 : o.onActive; | ||
n && n(this.ajala.getActiveStep(), this.ajala), this.ajala.dispatchEvent({ | ||
type: "onTransitionComplete", | ||
@@ -431,3 +431,3 @@ data: { | ||
this.animations.transition[this.animations.transition_type]( | ||
n, | ||
s, | ||
{ | ||
@@ -454,7 +454,7 @@ onComplete: a | ||
}), this.ui.resetOverlayCutoutSvgRect(); | ||
const n = await this.placement.tooltip.calculateTravelDistance(t), a = () => { | ||
const s = await this.placement.tooltip.calculateTravelDistance(t), a = () => { | ||
var o; | ||
this.animations.is_animating = !1, this.ajala.active_step = this.ajala.getFlattenSteps()[n.active_index], this.ui.update(n); | ||
const s = (o = this.ajala.getOriginalSteps()[this.ajala.getActiveStepOriginalIndex()]) == null ? void 0 : o.onActive; | ||
s && s(this.ajala.getActiveStep(), this.ajala), this.ajala.dispatchEvent({ | ||
this.animations.is_animating = !1, this.ajala.active_step = this.ajala.getFlattenSteps()[s.active_index], this.ui.update(s); | ||
const n = (o = this.ajala.getOriginalSteps()[this.ajala.getActiveStepOriginalIndex()]) == null ? void 0 : o.onActive; | ||
n && n(this.ajala.getActiveStep(), this.ajala), this.ajala.dispatchEvent({ | ||
type: "onTransitionComplete", | ||
@@ -468,3 +468,3 @@ data: { | ||
this.animations.transition[this.animations.transition_type]( | ||
n, | ||
s, | ||
{ | ||
@@ -478,9 +478,9 @@ onComplete: a | ||
const e = this.ajala.getFlattenSteps()[t]; | ||
let n = t; | ||
let s = t; | ||
if (i === "next" && (e != null && e.skip)) { | ||
n = this.ajala.getFlattenSteps().length; | ||
s = this.ajala.getFlattenSteps().length; | ||
for (let a = t; a < this.ajala.getFlattenSteps().length; a++) { | ||
const s = this.ajala.getFlattenSteps()[a]; | ||
if (!(s != null && s.skip)) { | ||
n = a; | ||
const n = this.ajala.getFlattenSteps()[a]; | ||
if (!(n != null && n.skip)) { | ||
s = a; | ||
break; | ||
@@ -490,7 +490,7 @@ } | ||
} else if (i === "prev" && (e != null && e.skip)) { | ||
n = -1; | ||
s = -1; | ||
for (let a = t; a > 0; a--) { | ||
const s = this.ajala.getFlattenSteps()[a]; | ||
if (!(s != null && s.skip)) { | ||
n = a; | ||
const n = this.ajala.getFlattenSteps()[a]; | ||
if (!(n != null && n.skip)) { | ||
s = a; | ||
break; | ||
@@ -500,3 +500,3 @@ } | ||
} | ||
return n; | ||
return s; | ||
} | ||
@@ -547,6 +547,6 @@ close() { | ||
if (e === void 0) return; | ||
const n = e[t]; | ||
if (n !== void 0) { | ||
const a = n.indexOf(i); | ||
a !== -1 && n.splice(a, 1); | ||
const s = e[t]; | ||
if (s !== void 0) { | ||
const a = s.indexOf(i); | ||
a !== -1 && s.splice(a, 1); | ||
} | ||
@@ -564,5 +564,5 @@ } | ||
if (e !== void 0) { | ||
const n = e.slice(0); | ||
for (let a = 0, s = n.length; a < s; a++) | ||
n[a].call(this, t); | ||
const s = e.slice(0); | ||
for (let a = 0, n = s.length; a < n; a++) | ||
s[a].call(this, t); | ||
} | ||
@@ -591,7 +591,7 @@ } | ||
rotate: 0 | ||
}, n = _(this, I).getTargetElement( | ||
}, s = _(this, I).getTargetElement( | ||
this.ajala.getFlattenSteps()[t].target | ||
); | ||
if (!n) return e; | ||
const a = n.getBoundingClientRect(), s = _(this, I).arrow_element.getBoundingClientRect(), o = _(this, I).tooltip_container_element.getBoundingClientRect(), { axis: l, align: h } = this.placement.getMetadata({ | ||
if (!s) return e; | ||
const a = s.getBoundingClientRect(), n = _(this, I).arrow_element.getBoundingClientRect(), o = _(this, I).tooltip_container_element.getBoundingClientRect(), { axis: l, align: h } = this.placement.getMetadata({ | ||
next_index: t, | ||
@@ -603,11 +603,11 @@ placement: i | ||
let c = E(0, o.width, 0.05); | ||
a.width < o.width / 2 && (c = -s.width / 2 + a.width / 2), e.x = c; | ||
a.width < o.width / 2 && (c = -n.width / 2 + a.width / 2), e.x = c; | ||
} else if (h === "center") { | ||
let c = E(0, o.width, 0.5); | ||
c = c - s.width / 2, e.x = c; | ||
c = c - n.width / 2, e.x = c; | ||
} else if (h === "right") { | ||
let c = E(0, o.width, 0.95); | ||
c = c - s.width, a.width < o.width / 2 && (c = o.width - s.width / 2 - a.width / 2), e.x = c; | ||
c = c - n.width, a.width < o.width / 2 && (c = o.width - n.width / 2 - a.width / 2), e.x = c; | ||
} | ||
l === "top" ? (e.rotate = 180, e.y = o.height - s.height / 2 + d) : l === "bottom" && (e.rotate = 0, e.y = -(s.height / 2) - d); | ||
l === "top" ? (e.rotate = 180, e.y = o.height - n.height / 2 + d) : l === "bottom" && (e.rotate = 0, e.y = -(n.height / 2) - d); | ||
} | ||
@@ -617,11 +617,11 @@ if (l === "left" || l === "right") { | ||
let c = E(0, o.height, 0.1); | ||
a.height < o.height / 2 && (c = -s.height / 2 + a.height / 2), e.y = c; | ||
a.height < o.height / 2 && (c = -n.height / 2 + a.height / 2), e.y = c; | ||
} else if (h === "center") { | ||
let c = E(0, o.height, 0.5); | ||
c = c - s.height / 2, e.y = c; | ||
c = c - n.height / 2, e.y = c; | ||
} else if (h === "bottom") { | ||
let c = E(0, o.height, 0.9); | ||
c = c - s.height, a.height < o.height / 2 && (c = o.height - s.height / 2 - a.height / 2), e.y = c; | ||
c = c - n.height, a.height < o.height / 2 && (c = o.height - n.height / 2 - a.height / 2), e.y = c; | ||
} | ||
l === "left" ? (e.rotate = 90, e.x = o.width - s.width / 2 + d) : l === "right" && (e.rotate = -90, e.x = -(s.width / 2) - d); | ||
l === "left" ? (e.rotate = 90, e.x = o.width - n.width / 2 + d) : l === "right" && (e.rotate = -90, e.x = -(n.width / 2) - d); | ||
} | ||
@@ -635,3 +635,3 @@ return e; | ||
var j, k, P, R, q; | ||
class nt { | ||
class st { | ||
constructor({ | ||
@@ -653,3 +653,3 @@ ajala: t, | ||
this.ajala.getFlattenSteps()[t].target | ||
), a = this.ui.tooltip_container_element.getBoundingClientRect(), s = (b) => b > 0 ? -b : Math.abs(b); | ||
), a = this.ui.tooltip_container_element.getBoundingClientRect(), n = (b) => b > 0 ? -b : Math.abs(b); | ||
if (!e) | ||
@@ -661,4 +661,4 @@ return { | ||
x_delta: window.innerWidth / 2 - a.width / 2, | ||
y_offset: s(a.y), | ||
x_offset: s(a.x), | ||
y_offset: n(a.y), | ||
x_offset: n(a.x), | ||
active_index: t, | ||
@@ -671,3 +671,3 @@ tooltip_rect: a, | ||
((f = this.placement.animations) == null ? void 0 : f.transition_type) === "popout" && (this.ui.tooltip_container_element.style.visibility = "hidden"), await ((x = this.placement.animations) == null ? void 0 : x.scrollIntoView(e, 100)); | ||
const o = e.getBoundingClientRect(), l = this.ajala.getFlattenSteps()[t].tooltip_gutter ?? this.ajala.options.tooltip_gutter ?? 0, h = s(a.y), d = s(a.x); | ||
const o = e.getBoundingClientRect(), l = this.ajala.getFlattenSteps()[t].tooltip_gutter ?? this.ajala.options.tooltip_gutter ?? 0, h = n(a.y), d = n(a.x); | ||
let c = o.y + l, m = o.x + l; | ||
@@ -696,5 +696,5 @@ const g = this.calculatePlacementDelta({ | ||
}) { | ||
let e = 0, n = 0, a = "auto"; | ||
let e = 0, s = 0, a = "auto"; | ||
const { | ||
axis: s, | ||
axis: n, | ||
align: o, | ||
@@ -705,3 +705,3 @@ axis_gutter: l, | ||
} = this.placement.getMetadata({ next_index: i }), c = v(this, j, P).call(this, { | ||
axis: s, | ||
axis: n, | ||
target: t, | ||
@@ -717,5 +717,5 @@ axis_gutter: l, | ||
}); | ||
if (s === "top" || s === "bottom") | ||
if (n === "top" || n === "bottom") | ||
if (g.is_valid && c.is_valid) | ||
e = g.alignment, n = c.axis, a = d; | ||
e = g.alignment, s = c.axis, a = d; | ||
else { | ||
@@ -727,7 +727,7 @@ const { auto_x_delta: f, auto_y_delta: x, auto_placement: b } = v(this, j, k).call(this, { | ||
}); | ||
e = f, n = x, a = b; | ||
e = f, s = x, a = b; | ||
} | ||
else if (s === "left" || s === "right") | ||
else if (n === "left" || n === "right") | ||
if (m.is_valid && c.is_valid) | ||
e = c.axis, n = m.alignment, a = d; | ||
e = c.axis, s = m.alignment, a = d; | ||
else { | ||
@@ -739,3 +739,3 @@ const { auto_x_delta: f, auto_y_delta: x, auto_placement: b } = v(this, j, k).call(this, { | ||
}); | ||
e = f, n = x, a = b; | ||
e = f, s = x, a = b; | ||
} | ||
@@ -748,7 +748,7 @@ else { | ||
}); | ||
e = f, n = x, a = b; | ||
e = f, s = x, a = b; | ||
} | ||
return { | ||
x_delta: e, | ||
y_delta: n, | ||
y_delta: s, | ||
placement: a | ||
@@ -771,3 +771,3 @@ }; | ||
}) { | ||
const n = [ | ||
const s = [ | ||
"bottom_center", | ||
@@ -786,5 +786,5 @@ "bottom_right", | ||
]; | ||
let a = 0, s = 0, o = "bottom_center"; | ||
for (let l = 0; l < n.length; l++) { | ||
o = n[l]; | ||
let a = 0, n = 0, o = "bottom_center"; | ||
for (let l = 0; l < s.length; l++) { | ||
o = s[l]; | ||
const h = o.split("_"), d = h[0], c = h[1], m = v(this, j, P).call(this, { | ||
@@ -803,14 +803,14 @@ axis: d, | ||
if ((d === "bottom" || d === "top") && m.is_valid && f.is_valid) { | ||
a = f.alignment, s = m.axis; | ||
a = f.alignment, n = m.axis; | ||
break; | ||
} | ||
if ((d === "right" || d === "left") && m.is_valid && g.is_valid) { | ||
a = m.axis, s = g.alignment; | ||
a = m.axis, n = g.alignment; | ||
break; | ||
} | ||
l === n.length - 1 && (s = m.axis, a = f.alignment); | ||
l === s.length - 1 && (n = m.axis, a = f.alignment); | ||
} | ||
return { | ||
auto_x_delta: a, | ||
auto_y_delta: s, | ||
auto_y_delta: n, | ||
auto_placement: o | ||
@@ -822,5 +822,5 @@ }; | ||
axis_gutter: e, | ||
spotlight_padding: n | ||
spotlight_padding: s | ||
}) { | ||
const a = i.getBoundingClientRect(), s = this.ui.tooltip_container_element.getBoundingClientRect(), o = { | ||
const a = i.getBoundingClientRect(), n = this.ui.tooltip_container_element.getBoundingClientRect(), o = { | ||
is_valid: !1, | ||
@@ -830,16 +830,16 @@ axis: 0 | ||
if (t === "top") { | ||
const l = a.y - s.height - e - n; | ||
const l = a.y - n.height - e - s; | ||
l >= 0 && a.y <= window.innerHeight ? (o.is_valid = !0, o.axis = l) : (o.is_valid = !1, o.axis = l); | ||
} | ||
if (t === "bottom") { | ||
const l = a.bottom + e + n; | ||
l + s.height >= 0 && l + s.height <= window.innerHeight ? (o.is_valid = !0, o.axis = l) : (o.is_valid = !1, o.axis = l); | ||
const l = a.bottom + e + s; | ||
l + n.height >= 0 && l + n.height <= window.innerHeight ? (o.is_valid = !0, o.axis = l) : (o.is_valid = !1, o.axis = l); | ||
} | ||
if (t === "left") { | ||
const l = a.x - s.width - e - n; | ||
const l = a.x - n.width - e - s; | ||
l >= 0 && a.x <= window.innerWidth ? (o.is_valid = !0, o.axis = l) : (o.is_valid = !1, o.axis = l); | ||
} | ||
if (t === "right") { | ||
const l = a.right + e + n; | ||
l >= 0 && l + s.width <= window.innerWidth ? (o.is_valid = !0, o.axis = l) : (o.is_valid = !1, o.axis = l); | ||
const l = a.right + e + s; | ||
l >= 0 && l + n.width <= window.innerWidth ? (o.is_valid = !0, o.axis = l) : (o.is_valid = !1, o.axis = l); | ||
} | ||
@@ -851,13 +851,13 @@ return o; | ||
}) { | ||
const e = i.getBoundingClientRect(), n = this.ui.tooltip_container_element.getBoundingClientRect(), a = { | ||
const e = i.getBoundingClientRect(), s = this.ui.tooltip_container_element.getBoundingClientRect(), a = { | ||
is_valid: !1, | ||
alignment: 0 | ||
}; | ||
if (t === "top" && (e.y + n.height <= window.innerHeight && e.y >= 0 ? (a.is_valid = !0, a.alignment = e.y) : (a.is_valid = !1, a.alignment = e.y)), t === "center") { | ||
const s = e.height / 2, o = n.height / 2, l = e.y + s - o; | ||
if (t === "top" && (e.y + s.height <= window.innerHeight && e.y >= 0 ? (a.is_valid = !0, a.alignment = e.y) : (a.is_valid = !1, a.alignment = e.y)), t === "center") { | ||
const n = e.height / 2, o = s.height / 2, l = e.y + n - o; | ||
l + e.height <= window.innerHeight && l >= 0 ? (a.is_valid = !0, a.alignment = l) : (a.is_valid = !1, a.alignment = l); | ||
} | ||
if (t === "bottom") { | ||
const s = e.bottom - n.height; | ||
s + n.height <= window.innerHeight && s >= 0 ? (a.is_valid = !0, a.alignment = s) : (a.is_valid = !1, a.alignment = s); | ||
const n = e.bottom - s.height; | ||
n + s.height <= window.innerHeight && n >= 0 ? (a.is_valid = !0, a.alignment = n) : (a.is_valid = !1, a.alignment = n); | ||
} | ||
@@ -869,17 +869,17 @@ return a; | ||
}) { | ||
const e = i.getBoundingClientRect(), n = this.ui.tooltip_container_element.getBoundingClientRect(), a = { | ||
const e = i.getBoundingClientRect(), s = this.ui.tooltip_container_element.getBoundingClientRect(), a = { | ||
is_valid: !1, | ||
alignment: 0 | ||
}; | ||
if (t === "left" && (e.x + n.width <= window.innerWidth && e.x >= 0 ? (a.is_valid = !0, a.alignment = e.x) : (a.is_valid = !1, a.alignment = e.x)), t === "center") { | ||
const s = e.width / 2, o = n.width / 2, l = e.x + s - o; | ||
l >= 0 && l + n.width <= window.innerWidth ? (a.is_valid = !0, a.alignment = l) : (a.is_valid = !1, a.alignment = l); | ||
if (t === "left" && (e.x + s.width <= window.innerWidth && e.x >= 0 ? (a.is_valid = !0, a.alignment = e.x) : (a.is_valid = !1, a.alignment = e.x)), t === "center") { | ||
const n = e.width / 2, o = s.width / 2, l = e.x + n - o; | ||
l >= 0 && l + s.width <= window.innerWidth ? (a.is_valid = !0, a.alignment = l) : (a.is_valid = !1, a.alignment = l); | ||
} | ||
if (t === "right") { | ||
const s = e.right - n.width; | ||
s + n.width <= window.innerWidth && s >= 0 ? (a.is_valid = !0, a.alignment = s) : (a.is_valid = !1, a.alignment = s); | ||
const n = e.right - s.width; | ||
n + s.width <= window.innerWidth && n >= 0 ? (a.is_valid = !0, a.alignment = n) : (a.is_valid = !1, a.alignment = n); | ||
} | ||
return a; | ||
}; | ||
class st { | ||
class nt { | ||
constructor({ | ||
@@ -906,11 +906,11 @@ ajala: t, | ||
if (!e) return i; | ||
const n = e.getBoundingClientRect(), { spotlight: a } = this.placement.getMetadata({ | ||
const s = e.getBoundingClientRect(), { spotlight: a } = this.placement.getMetadata({ | ||
next_index: t | ||
}); | ||
return i.x = Math.max(0, n.x - a.padding), i.y = Math.max(0, n.y - a.padding), i.width = Math.min( | ||
return i.x = Math.max(0, s.x - a.padding), i.y = Math.max(0, s.y - a.padding), i.width = Math.min( | ||
window.innerWidth, | ||
n.width + a.padding * 2 | ||
s.width + a.padding * 2 | ||
), i.height = Math.min( | ||
window.innerWidth, | ||
n.height + a.padding * 2 | ||
s.height + a.padding * 2 | ||
), i.border_radius = a.border_radius, i; | ||
@@ -927,3 +927,3 @@ } | ||
p(this, "animations"); | ||
this.arrow = new at({ ajala: t, ui: i, placement: this }), this.tooltip = new nt({ ajala: t, ui: i, placement: this }), this.overlay_cutout_svg_rect = new st({ | ||
this.arrow = new at({ ajala: t, ui: i, placement: this }), this.tooltip = new st({ ajala: t, ui: i, placement: this }), this.overlay_cutout_svg_rect = new nt({ | ||
ajala: t, | ||
@@ -939,5 +939,5 @@ ui: i, | ||
var l, h; | ||
const e = this.ajala.getFlattenSteps()[t].tooltip_gutter || this.ajala.options.tooltip_gutter || 10, n = i || this.ajala.getFlattenSteps()[t].tooltip_placement || this.ajala.options.tooltip_placement || "auto", a = n.split("_"), s = this.ajala.getFlattenSteps()[t].spotlight_padding || ((l = this.ajala.options.spotlight_options) == null ? void 0 : l.padding) || 0, o = this.ajala.getFlattenSteps()[t].spotlight_border_radius || ((h = this.ajala.options.spotlight_options) == null ? void 0 : h.border_radius) || 0; | ||
const e = this.ajala.getFlattenSteps()[t].tooltip_gutter || this.ajala.options.tooltip_gutter || 10, s = i || this.ajala.getFlattenSteps()[t].tooltip_placement || this.ajala.options.tooltip_placement || "auto", a = s.split("_"), n = this.ajala.getFlattenSteps()[t].spotlight_padding || ((l = this.ajala.options.spotlight_options) == null ? void 0 : l.padding) || 0, o = this.ajala.getFlattenSteps()[t].spotlight_border_radius || ((h = this.ajala.options.spotlight_options) == null ? void 0 : h.border_radius) || 0; | ||
return { | ||
placement: n, | ||
placement: s, | ||
axis: a[0], | ||
@@ -947,3 +947,3 @@ align: a[1], | ||
spotlight: { | ||
padding: s, | ||
padding: n, | ||
border_radius: o | ||
@@ -970,4 +970,4 @@ } | ||
p(this, "transition"); | ||
var n; | ||
this.ajala = t, this.ui = i, this.placement = e, this.transition_type = ((n = this.ajala.options) == null ? void 0 : n.transition_type) || "traveller", this.transition = { | ||
var s; | ||
this.ajala = t, this.ui = i, this.placement = e, this.transition_type = ((s = this.ajala.options) == null ? void 0 : s.transition_type) || "traveller", this.transition = { | ||
traveller: this.travelTransition.bind(this), | ||
@@ -988,7 +988,7 @@ popout: this.popOutTransition.bind(this) | ||
duration: e = 1e3, | ||
onPlay: n = () => { | ||
onPlay: s = () => { | ||
}, | ||
onUpdate: a = () => { | ||
}, | ||
onComplete: s = () => { | ||
onComplete: n = () => { | ||
} | ||
@@ -1002,7 +1002,7 @@ }) { | ||
}.easeInOut; | ||
n(); | ||
s(); | ||
const m = (g) => { | ||
if (!l) return; | ||
const f = g - o, x = Math.min(f / e, 1), b = c(x), Q = E(t, i, b); | ||
a(Q), x < 1 ? (h = requestAnimationFrame(m), this.is_animating = !0) : (s(), this.is_animating = !1); | ||
a(Q), x < 1 ? (h = requestAnimationFrame(m), this.is_animating = !0) : (n(), this.is_animating = !1); | ||
}; | ||
@@ -1017,5 +1017,5 @@ return h = requestAnimationFrame(m), { | ||
return new Promise((e) => { | ||
let n; | ||
let s; | ||
function a() { | ||
clearTimeout(n), n = setTimeout(() => { | ||
clearTimeout(s), s = setTimeout(() => { | ||
document.removeEventListener("scroll", a, !0), e(null); | ||
@@ -1025,3 +1025,3 @@ }, i); | ||
document.addEventListener("scroll", a, !0), t.scrollIntoView({ behavior: "smooth", block: "center" }), setTimeout(() => { | ||
n || e(null); | ||
s || e(null); | ||
}, i + 100); | ||
@@ -1031,3 +1031,3 @@ }); | ||
spotlightTarget(t) { | ||
const { x: i, y: e, width: n, height: a, border_radius: s } = this.placement.overlay_cutout_svg_rect.calculatePlacmentDelta({ | ||
const { x: i, y: e, width: s, height: a, border_radius: n } = this.placement.overlay_cutout_svg_rect.calculatePlacmentDelta({ | ||
active_index: t | ||
@@ -1043,5 +1043,5 @@ }); | ||
y: e, | ||
width: n * o, | ||
width: s * o, | ||
height: a * o, | ||
border_radius: s | ||
border_radius: n | ||
}); | ||
@@ -1055,3 +1055,3 @@ }, | ||
height: 0, | ||
border_radius: s | ||
border_radius: n | ||
}); | ||
@@ -1065,7 +1065,7 @@ } | ||
} = {}) { | ||
const n = this.ui.tooltip_container_element; | ||
const s = this.ui.tooltip_container_element; | ||
if (t.is_valid) { | ||
const { | ||
x_delta: a, | ||
x_offset: s, | ||
x_offset: n, | ||
y_delta: o, | ||
@@ -1081,4 +1081,4 @@ y_offset: l, | ||
onUpdate(c) { | ||
const m = (h == null ? void 0 : h.x) ?? 0, g = (h == null ? void 0 : h.y) ?? 0, f = m + (a + s) * c, x = g + (o + l) * c; | ||
n.style.transform = `translate(${f}px, ${x}px)`; | ||
const m = (h == null ? void 0 : h.x) ?? 0, g = (h == null ? void 0 : h.y) ?? 0, f = m + (a + n) * c, x = g + (o + l) * c; | ||
s.style.transform = `translate(${f}px, ${x}px)`; | ||
}, | ||
@@ -1098,5 +1098,5 @@ onComplete: () => { | ||
} = {}) { | ||
const n = this.ui.tooltip_container_element; | ||
const s = this.ui.tooltip_container_element; | ||
if (t.is_valid) { | ||
const { x_delta: a, y_delta: s, active_index: o } = t; | ||
const { x_delta: a, y_delta: n, active_index: o } = t; | ||
this.animate({ | ||
@@ -1107,3 +1107,3 @@ from: 0, | ||
onUpdate(l) { | ||
n.style.visibility = "visible", n.style.transform = `translate(${a}px, ${s}px) scale(${l})`; | ||
s.style.visibility = "visible", s.style.transform = `translate(${a}px, ${n}px) scale(${l})`; | ||
}, | ||
@@ -1124,5 +1124,5 @@ onComplete: () => { | ||
}; | ||
var y, w, u, A, T, F, Z, z; | ||
var y, w, u, A, T, F, Z, B; | ||
class ht extends it { | ||
constructor(i, { start_immediately: e = !0, ...n } = { | ||
constructor(i, { start_immediately: e = !0, ...s } = { | ||
start_immediately: !0 | ||
@@ -1144,3 +1144,3 @@ }) { | ||
const a = D(i); | ||
this.options = { start_immediately: e, ...n }, this.is_active = !1, this.original_steps = a, C(this, y, { | ||
this.options = { start_immediately: e, ...s }, this.is_active = !1, this.original_steps = a, C(this, y, { | ||
instances: [], | ||
@@ -1161,11 +1161,11 @@ queries: {} | ||
init(i) { | ||
console.log("Initializing Againnn"), this.initialized = !0; | ||
this.initialized = !0; | ||
const e = D(this.original_steps); | ||
this.is_active = !1, this.original_steps = e, C(this, y, { | ||
instances: [], | ||
queries: H(e) | ||
queries: z(e) | ||
}), this.flatten_steps = U( | ||
e, | ||
_(this, y).queries | ||
), v(this, F, z).call(this), this.active_step = this.getFlattenSteps()[_(this, u).getValidNavIndex(0, "next")], _(this, w).init(), _(this, u).init(), (this.options.start_immediately || i) && this.start(); | ||
), v(this, F, B).call(this), this.active_step = this.getFlattenSteps()[_(this, u).getValidNavIndex(0, "next")], _(this, w).init(), _(this, u).init(), (this.options.start_immediately || i) && this.start(); | ||
} | ||
@@ -1180,3 +1180,3 @@ /** | ||
let e = this.flatten_steps; | ||
return i && (e = e.filter((n) => !(n != null && n.skip))), e; | ||
return i && (e = e.filter((s) => !(s != null && s.skip))), e; | ||
} | ||
@@ -1196,4 +1196,4 @@ /** | ||
(e) => { | ||
var n; | ||
return e.id === ((n = this.active_step) == null ? void 0 : n.id); | ||
var s; | ||
return e.id === ((s = this.active_step) == null ? void 0 : s.id); | ||
} | ||
@@ -1210,4 +1210,4 @@ ); | ||
(e) => { | ||
var n; | ||
return e.id === ((n = this.active_step) == null ? void 0 : n.id); | ||
var s; | ||
return e.id === ((s = this.active_step) == null ? void 0 : s.id); | ||
} | ||
@@ -1223,10 +1223,10 @@ ); | ||
updateSteps(i, e = !0) { | ||
const n = D(i); | ||
this.original_steps = n, C(this, y, { | ||
const s = D(i); | ||
this.original_steps = s, C(this, y, { | ||
instances: [], | ||
queries: H(n) | ||
queries: z(s) | ||
}), this.flatten_steps = U( | ||
n, | ||
s, | ||
_(this, y).queries | ||
), v(this, F, z).call(this), e && this.restart(); | ||
), v(this, F, B).call(this), e && this.restart(); | ||
} | ||
@@ -1307,3 +1307,3 @@ /** | ||
if (!this.is_active) return; | ||
const e = this.getFlattenSteps().findIndex((n) => n.id === i); | ||
const e = this.getFlattenSteps().findIndex((s) => s.id === i); | ||
e > -1 && _(this, u).goTo(e); | ||
@@ -1328,3 +1328,3 @@ } | ||
}), _(this, w).cleanUp(), _(this, u).cleanUp(); | ||
}, z = function() { | ||
}, B = function() { | ||
for (const [i, e] of Object.entries( | ||
@@ -1336,16 +1336,16 @@ _(this, y).queries | ||
}); | ||
const n = window.matchMedia(i); | ||
n.matches && (this.flatten_steps = $( | ||
const s = window.matchMedia(i); | ||
s.matches && (this.flatten_steps = $( | ||
this.flatten_steps, | ||
e, | ||
"value" | ||
)), n.onchange = (a) => { | ||
const s = _(this, y).queries[a.media]; | ||
a.matches && s ? this.flatten_steps = $( | ||
)), s.onchange = (a) => { | ||
const n = _(this, y).queries[a.media]; | ||
a.matches && n ? this.flatten_steps = $( | ||
this.flatten_steps, | ||
s, | ||
n, | ||
"value" | ||
) : (s && (this.flatten_steps = $( | ||
) : (n && (this.flatten_steps = $( | ||
this.flatten_steps, | ||
s, | ||
n, | ||
"default" | ||
@@ -1362,3 +1362,3 @@ )), _(this, y).instances.forEach((o) => { | ||
); | ||
}, _(this, y).instances.push(n); | ||
}, _(this, y).instances.push(s); | ||
} | ||
@@ -1365,0 +1365,0 @@ }; |
{ | ||
"name": "ajala.js", | ||
"private": false, | ||
"version": "0.4.5", | ||
"version": "0.4.6", | ||
"type": "module", | ||
@@ -6,0 +6,0 @@ "main": "./dist/ajala.cjs", |
Sorry, the diff of this file is not supported yet
126060
-0.06%