🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

ajala.js

Package Overview
Dependencies
Maintainers
1
Versions
30
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ajala.js - npm Package Compare versions

Comparing version

0.3.11
to
0.4.0

310

dist/ajala.js
var Q = Object.defineProperty;
var B = (r) => {
throw TypeError(r);
var B = (h) => {
throw TypeError(h);
};
var X = (r, t, i) => t in r ? Q(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), A = (r, t, i) => t.has(r) || B("Cannot " + i);
var _ = (r, t, i) => (A(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) => (A(r, t, "write to private field"), e ? e.call(r, i) : t.set(r, i), i), v = (r, t, i) => (A(r, t, "access private method"), i);
function G(r) {
var X = (h, t, i) => t in h ? Q(h, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : h[t] = i;
var p = (h, t, i) => X(h, typeof t != "symbol" ? t + "" : t, i), M = (h, t, i) => t.has(h) || B("Cannot " + i);
var _ = (h, t, i) => (M(h, t, "read from private field"), i ? i.call(h) : t.get(h)), b = (h, t, i) => t.has(h) ? B("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(h) : t.set(h, i), C = (h, t, i, e) => (M(h, t, "write to private field"), e ? e.call(h, i) : t.set(h, i), i), u = (h, t, i) => (M(h, t, "access private method"), i);
function G(h) {
const t = /* @__PURE__ */ new Map(), i = [], e = [];
for (const s of r)
(s == null ? void 0 : s.order) === void 0 ? i.push(s) : (s == null ? void 0 : s.order) > r.length || (s == null ? void 0 : s.order) < 0 ? e.push(s) : t.set(s.order, s);
const n = new Array(r.length);
for (const s of h)
(s == null ? void 0 : s.order) === void 0 ? i.push(s) : (s == null ? void 0 : s.order) > h.length || (s == null ? void 0 : s.order) < 0 ? e.push(s) : t.set(s.order, s);
const n = new Array(h.length);
let a = 0, l = 0;
for (let s = 0; s < r.length; s++)
for (let s = 0; s < h.length; s++)
t.has(s) ? n[s] = t.get(s) : a < i.length ? n[s] = i[a++] : n[s] = e[l++];
return n.length === r.length ? n : n.slice(0, r.length);
return n.length === h.length ? n : n.slice(0, h.length);
}
function N(r) {
const t = {}, i = ["id", "data"];
for (let e = 0; e < r.length; e++) {
const n = r[e];
function N(h) {
const t = {}, i = [
"id",
"data",
"onActive",
"onInActive"
];
for (let e = 0; e < h.length; e++) {
const n = h[e];
Object.keys(n).forEach((a) => {

@@ -41,4 +46,4 @@ if (!i.includes(a)) {

}
function I(r, t, i) {
const e = JSON.parse(JSON.stringify(r));
function I(h, t, i) {
const e = JSON.parse(JSON.stringify(h));
return t.forEach((n) => {

@@ -51,5 +56,5 @@ const a = e.findIndex(

}
function z(r, t) {
function z(h, t) {
let i = JSON.parse(
JSON.stringify(r)
JSON.stringify(h)
);

@@ -64,15 +69,15 @@ return Object.values(t).forEach((e) => {

}
const T = (r, t, i) => (i = Math.max(0, Math.min(1, i)), r + (t - r) * i);
function K(r, t) {
const E = (h, t, i) => (i = Math.max(0, Math.min(1, i)), h + (t - h) * i);
function K(h, t) {
let i = null;
return function(...e) {
i && clearTimeout(i), i = setTimeout(() => {
r(...e), clearTimeout(i), i = null;
h(...e), clearTimeout(i), i = null;
}, t);
};
}
function R(r) {
function R(h) {
const t = /* @__PURE__ */ new Set(), i = [];
for (let e = 0; e < r.length; e++) {
const n = r[e], a = `step-${e + Math.random()}`;
for (let e = 0; e < h.length; e++) {
const n = h[e], a = `step-${e + Math.random()}`;
n.id ? t.has(n.id) ? (console.warn(

@@ -86,6 +91,6 @@ `Duplicate ajala step id found: ${n.id}. Please make sure all step ids are unique.`

}
var F, U, W, V;
var O, U, W, V;
class tt {
constructor(t) {
S(this, F);
b(this, O);
p(this, "ajala");

@@ -113,3 +118,3 @@ p(this, "tooltip_element");

init() {
var e, n, a, l, s, o, c, d, h, m;
var e, n, a, l, s, o, c, d, r, m;
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(

@@ -121,3 +126,3 @@ "click",

this.closeOnOverlayClickHandler
), this.ajala.options.custom_tooltip || v(this, F, U).call(this), this.ajala.options.custom_arrow ? this.arrow_element.appendChild(this.ajala.options.custom_arrow) : v(this, F, W).call(this);
), this.ajala.options.custom_tooltip || u(this, O, U).call(this), this.ajala.options.custom_arrow ? this.arrow_element.appendChild(this.ajala.options.custom_arrow) : u(this, O, W).call(this);
const t = (e = this.ajala.options.default_arrow_options) != null && e.size ? `${(n = this.ajala.options.default_arrow_options) == null ? void 0 : n.size}px` : "48px";

@@ -142,3 +147,3 @@ 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 = ((a = this.ajala.options.default_arrow_options) == null ? void 0 : a.color) || "#000000", this.arrow_element.style.zIndex = "2", this.arrow_element.style.pointerEvents = "none", this.arrow_element.classList.add("ajala_tooltip_arrow"), (l = this.ajala.options.default_arrow_options) != null && l.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 = (c = this.ajala.options) != null && c.tooltip_height ? `${(d = this.ajala.options) == null ? void 0 : d.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);

`, document.head.appendChild(i), (typeof ((h = this.ajala.options.overlay_options) == null ? void 0 : h.hide) > "u" || !((m = this.ajala.options.overlay_options) != null && m.hide)) && (v(this, F, V).call(this), this.wrapper_element.append(this.overlay_element), document.body.classList.add("ajala_isOverlay"));
`, document.head.appendChild(i), (typeof ((r = this.ajala.options.overlay_options) == null ? void 0 : r.hide) > "u" || !((m = this.ajala.options.overlay_options) != null && m.hide)) && (u(this, O, V).call(this), this.wrapper_element.append(this.overlay_element), document.body.classList.add("ajala_isOverlay"));
}

@@ -150,5 +155,5 @@ update(t) {

if (!(i != null && i.hide_dot_nav)) {
const o = this.ajala.getFlattenSteps().map((d, h) => {
const o = this.ajala.getFlattenSteps().map((d, r) => {
const m = document.createElement("div");
return m.classList.add("ajala_dot_nav"), h === this.ajala.getActiveStepFlattenIndex() && m.classList.add("ajala_dot_nav_active"), m;
return m.classList.add("ajala_dot_nav"), r === this.ajala.getActiveStepFlattenIndex() && m.classList.add("ajala_dot_nav_active"), m;
}), c = this.wrapper_element.querySelector(".ajala_dot_navs");

@@ -170,7 +175,7 @@ c && c.replaceChildren(...o);

if ((((a = this.ajala.active_step) == null ? void 0 : a.enable_target_interaction) ?? ((l = this.ajala.options) == null ? void 0 : l.enable_target_interaction)) && c && c.classList.add("ajala_target_interactive"), this.ajala.getFlattenSteps().length - 1 === this.ajala.getActiveStepFlattenIndex() && this.next_btn && (this.next_btn.innerText = "Finish"), c) {
const { x: h, y: m, rotate: g } = this.placement.arrow.calculatePlacmentDelta({
const { x: r, y: m, rotate: g } = this.placement.arrow.calculatePlacmentDelta({
active_index: s,
placement: o
});
this.arrow_element.style.visibility = "visible", this.arrow_element.style.transform = `translate(${h}px, ${m}px) rotate(${g}deg)`;
this.arrow_element.style.visibility = "visible", this.arrow_element.style.transform = `translate(${r}px, ${m}px) rotate(${g}deg)`;
} else

@@ -287,3 +292,3 @@ this.arrow_element.style.visibility = "hidden";

}
F = new WeakSet(), U = function() {
O = new WeakSet(), U = function() {
var n, a, l, s, o, c;

@@ -356,3 +361,3 @@ this.is_default_tooltip_element = !0;

async goTo(t) {
var i, e;
var i, e, n;
if (!((i = this.animations) != null && i.is_animating)) {

@@ -365,4 +370,9 @@ if ((e = this.ajala.getFlattenSteps()[t]) != null && e.skip) {

this.animations.is_animating = !0, this.ui.resetOverlayCutoutSvgRect();
const n = await this.placement.tooltip.calculateTravelDistance(t), a = () => {
this.animations.is_animating = !1, this.ajala.active_step = this.ajala.getFlattenSteps()[n.active_index], this.ui.update(n), this.ajala.dispatchEvent({
const a = (n = this.ajala.getOriginalSteps()[this.ajala.getActiveStepOriginalIndex()]) == null ? void 0 : n.onInActive;
a && t !== this.ajala.getActiveStepFlattenIndex() && a(this.ajala.getActiveStep(), this.ajala);
const l = await this.placement.tooltip.calculateTravelDistance(t), s = () => {
var c;
this.animations.is_animating = !1, this.ajala.active_step = this.ajala.getFlattenSteps()[l.active_index], this.ui.update(l);
const o = (c = this.ajala.getOriginalSteps()[this.ajala.getActiveStepOriginalIndex()]) == null ? void 0 : c.onActive;
o && o(this.ajala.getActiveStep(), this.ajala), this.ajala.dispatchEvent({
type: "onTransitionComplete",

@@ -376,5 +386,5 @@ data: {

this.animations.transition[this.animations.transition_type](
n,
l,
{
onComplete: a
onComplete: s
}

@@ -386,11 +396,17 @@ );

async next() {
var i;
if (this.animations.is_animating) return;
let t = this.ajala.getActiveStepFlattenIndex() + 1;
if (t = this.getValidNavIndex(t, "next"), this.ajala.getFlattenSteps().length > t) {
this.animations.is_animating = !0, this.ajala.dispatchEvent({
this.animations.is_animating = !0;
const e = (i = this.ajala.getOriginalSteps()[this.ajala.getActiveStepOriginalIndex()]) == null ? void 0 : i.onInActive;
e && e(this.ajala.getActiveStep(), this.ajala), this.ajala.dispatchEvent({
type: "onNext",
data: this.ajala
}), this.ui.resetOverlayCutoutSvgRect();
const i = await this.placement.tooltip.calculateTravelDistance(t), e = () => {
this.animations.is_animating = !1, this.ajala.active_step = this.ajala.getFlattenSteps()[i.active_index], this.ui.update(i), this.ajala.dispatchEvent({
const n = await this.placement.tooltip.calculateTravelDistance(t), a = () => {
var s;
this.animations.is_animating = !1, this.ajala.active_step = this.ajala.getFlattenSteps()[n.active_index], this.ui.update(n);
const l = (s = this.ajala.getOriginalSteps()[this.ajala.getActiveStepOriginalIndex()]) == null ? void 0 : s.onActive;
l && l(this.ajala.getActiveStep(), this.ajala), this.ajala.dispatchEvent({
type: "onTransitionComplete",

@@ -404,5 +420,5 @@ data: {

this.animations.transition[this.animations.transition_type](
i,
n,
{
onComplete: e
onComplete: a
}

@@ -417,11 +433,17 @@ );

async prev() {
var i;
if (this.animations.is_animating) return;
let t = this.ajala.getActiveStepFlattenIndex() - 1;
if (t = this.getValidNavIndex(t, "prev"), t > -1) {
this.animations.is_animating = !0, this.ajala.dispatchEvent({
this.animations.is_animating = !0;
const e = (i = this.ajala.getOriginalSteps()[this.ajala.getActiveStepOriginalIndex()]) == null ? void 0 : i.onInActive;
e && e(this.ajala.getActiveStep(), this.ajala), this.ajala.dispatchEvent({
type: "onPrev",
data: this.ajala
}), this.ui.resetOverlayCutoutSvgRect();
const i = await this.placement.tooltip.calculateTravelDistance(t), e = () => {
this.animations.is_animating = !1, this.ajala.active_step = this.ajala.getFlattenSteps()[i.active_index], this.ui.update(i), this.ajala.dispatchEvent({
const n = await this.placement.tooltip.calculateTravelDistance(t), a = () => {
var s;
this.animations.is_animating = !1, this.ajala.active_step = this.ajala.getFlattenSteps()[n.active_index], this.ui.update(n);
const l = (s = this.ajala.getOriginalSteps()[this.ajala.getActiveStepOriginalIndex()]) == null ? void 0 : s.onActive;
l && l(this.ajala.getActiveStep(), this.ajala), this.ajala.dispatchEvent({
type: "onTransitionComplete",

@@ -435,5 +457,5 @@ data: {

this.animations.transition[this.animations.transition_type](
i,
n,
{
onComplete: e
onComplete: a
}

@@ -468,3 +490,5 @@ );

close() {
this.ajala.destroy(), this.ajala.dispatchEvent({
var i;
const t = (i = this.ajala.getOriginalSteps()[this.ajala.getActiveStepOriginalIndex()]) == null ? void 0 : i.onInActive;
t && t(this.ajala.getActiveStep(), this.ajala), this.ajala.destroy(), this.ajala.dispatchEvent({
type: "onClose",

@@ -532,3 +556,3 @@ data: this.ajala

}
var $;
var F;
class at {

@@ -542,4 +566,4 @@ constructor({

p(this, "placement");
S(this, $);
this.ajala = t, C(this, $, i), this.placement = e;
b(this, F);
this.ajala = t, C(this, F, i), this.placement = e;
}

@@ -554,7 +578,7 @@ calculatePlacmentDelta({

rotate: 0
}, n = _(this, $).getTargetElement(
}, n = _(this, F).getTargetElement(
this.ajala.getFlattenSteps()[t].target
);
if (!n) return e;
const a = n.getBoundingClientRect(), l = _(this, $).arrow_element.getBoundingClientRect(), s = _(this, $).tooltip_container_element.getBoundingClientRect(), { axis: o, align: c } = this.placement.getMetadata({
const a = n.getBoundingClientRect(), l = _(this, F).arrow_element.getBoundingClientRect(), s = _(this, F).tooltip_container_element.getBoundingClientRect(), { axis: o, align: c } = this.placement.getMetadata({
next_index: t,

@@ -565,10 +589,10 @@ placement: i

if (c === "left") {
let h = T(0, s.width, 0.05);
a.width < s.width / 2 && (h = -l.width / 2 + a.width / 2), e.x = h;
let r = E(0, s.width, 0.05);
a.width < s.width / 2 && (r = -l.width / 2 + a.width / 2), e.x = r;
} else if (c === "center") {
let h = T(0, s.width, 0.5);
h = h - l.width / 2, e.x = h;
let r = E(0, s.width, 0.5);
r = r - l.width / 2, e.x = r;
} else if (c === "right") {
let h = T(0, s.width, 0.95);
h = h - l.width, a.width < s.width / 2 && (h = s.width - l.width / 2 - a.width / 2), e.x = h;
let r = E(0, s.width, 0.95);
r = r - l.width, a.width < s.width / 2 && (r = s.width - l.width / 2 - a.width / 2), e.x = r;
}

@@ -579,10 +603,10 @@ o === "top" ? (e.rotate = 180, e.y = s.height - l.height / 2 + d) : o === "bottom" && (e.rotate = 0, e.y = -(l.height / 2) - d);

if (c === "top") {
let h = T(0, s.height, 0.1);
a.height < s.height / 2 && (h = -l.height / 2 + a.height / 2), e.y = h;
let r = E(0, s.height, 0.1);
a.height < s.height / 2 && (r = -l.height / 2 + a.height / 2), e.y = r;
} else if (c === "center") {
let h = T(0, s.height, 0.5);
h = h - l.height / 2, e.y = h;
let r = E(0, s.height, 0.5);
r = r - l.height / 2, e.y = r;
} else if (c === "bottom") {
let h = T(0, s.height, 0.9);
h = h - l.height, a.height < s.height / 2 && (h = s.height - l.height / 2 - a.height / 2), e.y = h;
let r = E(0, s.height, 0.9);
r = r - l.height, a.height < s.height / 2 && (r = s.height - l.height / 2 - a.height / 2), e.y = r;
}

@@ -596,4 +620,4 @@ o === "left" ? (e.rotate = 90, e.x = s.width - l.width / 2 + d) : o === "right" && (e.rotate = -90, e.x = -(l.width / 2) - d);

}
$ = new WeakMap();
var w, M, D, H, P;
F = new WeakMap();
var w, k, D, H, P;
class nt {

@@ -605,3 +629,3 @@ constructor({

}) {
S(this, w);
b(this, w);
p(this, "ajala");

@@ -613,3 +637,3 @@ p(this, "placement");

async calculateTravelDistance(t) {
var f, j;
var f, x;
let i = !1;

@@ -621,3 +645,3 @@ this.ui.arrow_element.style.visibility = "hidden";

let a = n.getBoundingClientRect();
const l = (b) => b > 0 ? -b : Math.abs(b);
const l = (S) => S > 0 ? -S : Math.abs(S);
if (!e)

@@ -639,4 +663,4 @@ return {

const o = this.ajala.getFlattenSteps()[t].tooltip_gutter ?? this.ajala.options.tooltip_gutter ?? 0;
let c = l(a.y), d = l(a.x), h = s.y + o, m = s.x + o;
(s.y < 0 || s.y > window.innerHeight || s.y + s.height > window.innerHeight || h < 0 || h > window.innerHeight || h + a.height > window.innerHeight || h + a.height < 0) && (((f = this.placement.animations) == null ? void 0 : f.transition_type) === "popout" && (this.ui.tooltip_container_element.style.visibility = "hidden"), await ((j = this.placement.animations) == null ? void 0 : j.scrollToLocation(
let c = l(a.y), d = l(a.x), r = s.y + o, m = s.x + o;
(s.y < 0 || s.y > window.innerHeight || s.y + s.height > window.innerHeight || r < 0 || r > window.innerHeight || r + a.height > window.innerHeight || r + a.height < 0) && (((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.scrollToLocation(
e,

@@ -649,4 +673,4 @@ t

});
return m = g.x_delta, h = g.y_delta, {
y_delta: h,
return m = g.x_delta, r = g.y_delta, {
y_delta: r,
x_delta: m,

@@ -675,3 +699,3 @@ y_offset: c,

placement: d
} = this.placement.getMetadata({ next_index: i }), h = v(this, w, D).call(this, {
} = this.placement.getMetadata({ next_index: i }), r = u(this, w, D).call(this, {
axis: l,

@@ -681,6 +705,6 @@ target: t,

spotlight_padding: c.padding
}), m = v(this, w, H).call(this, {
}), m = u(this, w, H).call(this, {
align: s,
target: t
}), g = v(this, w, P).call(this, {
}), g = u(this, w, P).call(this, {
align: s,

@@ -690,6 +714,6 @@ target: t

if (l === "top" || l === "bottom")
if (g.is_valid && h.is_valid)
e = g.alignment, n = h.axis, a = d;
if (g.is_valid && r.is_valid)
e = g.alignment, n = r.axis, a = d;
else {
const { auto_x_delta: f, auto_y_delta: j, auto_placement: b } = v(this, w, M).call(this, {
const { auto_x_delta: f, auto_y_delta: x, auto_placement: S } = u(this, w, k).call(this, {
target: t,

@@ -699,9 +723,9 @@ axis_gutter: o,

});
e = f, n = j, a = b;
e = f, n = x, a = S;
}
else if (l === "left" || l === "right")
if (m.is_valid && h.is_valid)
e = h.axis, n = m.alignment, a = d;
if (m.is_valid && r.is_valid)
e = r.axis, n = m.alignment, a = d;
else {
const { auto_x_delta: f, auto_y_delta: j, auto_placement: b } = v(this, w, M).call(this, {
const { auto_x_delta: f, auto_y_delta: x, auto_placement: S } = u(this, w, k).call(this, {
target: t,

@@ -711,6 +735,6 @@ axis_gutter: o,

});
e = f, n = j, a = b;
e = f, n = x, a = S;
}
else {
const { auto_x_delta: f, auto_y_delta: j, auto_placement: b } = v(this, w, M).call(this, {
const { auto_x_delta: f, auto_y_delta: x, auto_placement: S } = u(this, w, k).call(this, {
target: t,

@@ -720,3 +744,3 @@ axis_gutter: o,

});
e = f, n = j, a = b;
e = f, n = x, a = S;
}

@@ -732,3 +756,3 @@ return {

}
w = new WeakSet(), M = function({
w = new WeakSet(), k = function({
target: t,

@@ -755,3 +779,3 @@ axis_gutter: i,

s = n[o];
const c = s.split("_"), d = c[0], h = c[1], m = v(this, w, D).call(this, {
const c = s.split("_"), d = c[0], r = c[1], m = u(this, w, D).call(this, {
axis: d,

@@ -761,7 +785,7 @@ target: t,

spotlight_padding: e
}), g = v(this, w, H).call(this, {
align: h,
}), g = u(this, w, H).call(this, {
align: r,
target: t
}), f = v(this, w, P).call(this, {
align: h,
}), f = u(this, w, P).call(this, {
align: r,
target: t

@@ -914,3 +938,3 @@ });

}
var k, q;
var L, q;
class ot {

@@ -922,3 +946,3 @@ constructor({

}) {
S(this, k);
b(this, L);
p(this, "ajala");

@@ -956,3 +980,3 @@ p(this, "ui");

let o = !0, c;
const h = {
const r = {
easeInOut: (g) => g < 0.5 ? 2 * g * g : 1 - Math.pow(-2 * g + 2, 2) / 2

@@ -964,4 +988,4 @@ // Second half: decelerate

if (!o) return;
const f = g - s, j = Math.min(f / e, 1), b = h(j), Z = T(t, i, b);
a(Z), j < 1 ? (c = requestAnimationFrame(m), this.is_animating = !0) : (l(), this.is_animating = !1);
const f = g - s, x = Math.min(f / e, 1), S = r(x), Z = E(t, i, S);
a(Z), x < 1 ? (c = requestAnimationFrame(m), this.is_animating = !0) : (l(), this.is_animating = !1);
};

@@ -986,4 +1010,4 @@ return c = requestAnimationFrame(m), {

duration: o,
onUpdate(h) {
window.scrollTo(0, h);
onUpdate(r) {
window.scrollTo(0, r);
},

@@ -1041,6 +1065,6 @@ onComplete() {

to: 1,
duration: v(this, k, q).call(this, d),
onUpdate(h) {
const m = (c == null ? void 0 : c.x) ?? 0, g = (c == null ? void 0 : c.y) ?? 0, f = m + (a + l) * h, j = g + (s + o) * h;
n.style.transform = `translate(${f}px, ${j}px)`;
duration: u(this, L, q).call(this, d),
onUpdate(r) {
const m = (c == null ? void 0 : c.x) ?? 0, g = (c == null ? void 0 : c.y) ?? 0, f = m + (a + l) * r, x = g + (s + o) * r;
n.style.transform = `translate(${f}px, ${x}px)`;
},

@@ -1066,3 +1090,3 @@ onComplete: () => {

to: 1,
duration: v(this, k, q).call(this, s),
duration: u(this, L, q).call(this, s),
onUpdate(o) {

@@ -1081,8 +1105,8 @@ n.style.visibility = "visible", n.style.transform = `translate(${a}px, ${l}px) scale(${o})`;

}
k = new WeakSet(), q = function(t) {
L = new WeakSet(), q = function(t) {
var i, e;
return ((i = this.ajala.getFlattenSteps()[t]) == null ? void 0 : i.transition_duration) ?? ((e = this.ajala.options) == null ? void 0 : e.transition_duration) ?? 1e3;
};
var x, y, u, E, O, L, J, Y;
class ht extends it {
var j, y, v, A, T, $, J, Y;
class rt extends it {
constructor(i, { start_immediately: e = !0, ...n } = {

@@ -1092,3 +1116,3 @@ start_immediately: !0

super();
S(this, L);
b(this, $);
p(this, "options");

@@ -1099,20 +1123,20 @@ p(this, "is_active");

p(this, "flatten_steps");
S(this, x);
b(this, j);
p(this, "active_step");
S(this, y);
S(this, u);
S(this, E);
S(this, O);
b(this, y);
b(this, v);
b(this, A);
b(this, T);
const a = R(i);
this.options = { start_immediately: e, ...n }, this.is_active = !!this.options.start_immediately, this.original_steps = a, C(this, x, {
this.options = { start_immediately: e, ...n }, this.is_active = !!this.options.start_immediately, this.original_steps = a, C(this, j, {
instances: [],
queries: {}
}), this.flatten_steps = [], this.initialized = !0, this.active_step = this.flatten_steps[0], C(this, y, new tt(this)), C(this, u, new et({
}), this.flatten_steps = [], this.initialized = !0, this.active_step = this.flatten_steps[0], C(this, y, new tt(this)), C(this, v, new et({
ajala: this,
ui: _(this, y)
})), C(this, E, new lt({ ajala: this, ui: _(this, y) })), C(this, O, new ot({
})), C(this, A, new lt({ ajala: this, ui: _(this, y) })), C(this, T, new ot({
ajala: this,
ui: _(this, y),
placement: _(this, E)
})), _(this, y).navigation = _(this, u), _(this, y).placement = _(this, E), _(this, u).placement = _(this, E), _(this, u).animations = _(this, O), _(this, E).animations = _(this, O), this.active_step = this.getFlattenSteps()[_(this, u).getValidNavIndex(0, "next")], this.destroy = this.destroy.bind(this);
placement: _(this, A)
})), _(this, y).navigation = _(this, v), _(this, y).placement = _(this, A), _(this, v).placement = _(this, A), _(this, v).animations = _(this, T), _(this, A).animations = _(this, T), this.active_step = this.getFlattenSteps()[_(this, v).getValidNavIndex(0, "next")], this.destroy = this.destroy.bind(this);
}

@@ -1125,3 +1149,3 @@ /**

const e = R(this.original_steps);
this.is_active = !!this.options.start_immediately, this.original_steps = e, C(this, x, {
this.is_active = !!this.options.start_immediately, this.original_steps = e, C(this, j, {
instances: [],

@@ -1131,4 +1155,4 @@ queries: N(e)

e,
_(this, x).queries
), v(this, L, Y).call(this), this.active_step = this.getFlattenSteps()[_(this, u).getValidNavIndex(0, "next")], this.is_active = !!this.options.start_immediately, _(this, y).init(), _(this, u).init(), (this.options.start_immediately || i) && this.start();
_(this, j).queries
), u(this, $, Y).call(this), this.active_step = this.getFlattenSteps()[_(this, v).getValidNavIndex(0, "next")], this.is_active = !!this.options.start_immediately, _(this, y).init(), _(this, v).init(), (this.options.start_immediately || i) && this.start();
}

@@ -1184,3 +1208,3 @@ /**

const n = R(i);
this.original_steps = n, C(this, x, {
this.original_steps = n, C(this, j, {
instances: [],

@@ -1190,3 +1214,3 @@ queries: N(n)

n,
_(this, x).queries
_(this, j).queries
), this.active_step = this.getFlattenSteps()[0], e && this.restart();

@@ -1230,3 +1254,3 @@ }

start() {
this.is_active = !0, this.active_step = this.getFlattenSteps()[_(this, u).getValidNavIndex(0, "next")], _(this, y).start(), _(this, u).start(), this.dispatchEvent({
this.is_active = !0, this.active_step = this.getFlattenSteps()[_(this, v).getValidNavIndex(0, "next")], _(this, y).start(), _(this, v).start(), this.dispatchEvent({
type: "onStart",

@@ -1247,3 +1271,3 @@ data: this

next() {
this.is_active && _(this, u).next();
this.is_active && _(this, v).next();
}

@@ -1254,3 +1278,3 @@ /**

prev() {
this.is_active && _(this, u).prev();
this.is_active && _(this, v).prev();
}

@@ -1261,3 +1285,3 @@ /**

close() {
_(this, u).close();
_(this, v).close();
}

@@ -1271,3 +1295,3 @@ /**

const e = this.getFlattenSteps().findIndex((n) => n.id === i);
e > -1 && _(this, u).goTo(e);
e > -1 && _(this, v).goTo(e);
}

@@ -1284,12 +1308,12 @@ /**

destroy() {
v(this, L, J).call(this), _(this, y).destroy(), this.is_active = !1;
u(this, $, J).call(this), _(this, y).destroy(), this.is_active = !1;
}
}
x = new WeakMap(), y = new WeakMap(), u = new WeakMap(), E = new WeakMap(), O = new WeakMap(), L = new WeakSet(), J = function() {
_(this, x).instances.forEach((i) => {
j = new WeakMap(), y = new WeakMap(), v = new WeakMap(), A = new WeakMap(), T = new WeakMap(), $ = new WeakSet(), J = function() {
_(this, j).instances.forEach((i) => {
i.onchange = null;
}), _(this, y).cleanUp(), _(this, u).cleanUp();
}), _(this, y).cleanUp(), _(this, v).cleanUp();
}, Y = function() {
for (const [i, e] of Object.entries(
_(this, x).queries
_(this, j).queries
)) {

@@ -1302,3 +1326,3 @@ const n = window.matchMedia(i);

)), n.onchange = (a) => {
const l = _(this, x).queries[a.media];
const l = _(this, j).queries[a.media];
a.matches && l ? this.flatten_steps = I(

@@ -1312,4 +1336,4 @@ this.flatten_steps,

"default"
)), _(this, x).instances.forEach((s) => {
const o = _(this, x).queries[s.media];
)), _(this, j).instances.forEach((s) => {
const o = _(this, j).queries[s.media];
s.matches && o && (this.flatten_steps = I(

@@ -1321,9 +1345,9 @@ this.flatten_steps,

})), _(this, y).update(), this.goToStep(
this.getFlattenSteps()[_(this, u).getValidNavIndex(0, "next")].id
this.getFlattenSteps()[_(this, v).getValidNavIndex(0, "next")].id
);
}, _(this, x).instances.push(n);
}, _(this, j).instances.push(n);
}
};
export {
ht as AjalaJourney
rt as AjalaJourney
};

25

dist/index.d.ts

@@ -167,6 +167,3 @@ export declare class AjalaJourney extends EventEmitter<TAjalaEventTypes> {

[property in keyof TResponsiveStepsProperties]: TResponsiveStepsProperties[property] | TMediaQuery<TResponsiveStepsProperties[property]>;
} & {
id: string;
data?: unknown;
};
} & TUnresponsiveStepsProperties;

@@ -183,13 +180,6 @@ declare type TMediaQuery<T> = {

/**
* Steps properties that can be overridden by media queries
*/
declare type TResponsiveStepsProperties = Omit<TSteps, "id" | "data">;
export declare interface TSteps {
id: string;
declare type TResponsiveStepsProperties = {
target?: string;
title?: string;
content?: string;
data?: unknown;
order?: number;

@@ -205,4 +195,6 @@ skip?: boolean;

enable_overlay_close?: boolean;
}
};
export declare type TSteps = TUnresponsiveStepsProperties & TResponsiveStepsProperties;
export declare type TTooltipPlacement = `${"top" | "bottom"}_${TPlacementXAlign}` | `${"left" | "right"}_${TPlacementYAlign}` | "auto";

@@ -212,2 +204,9 @@

declare interface TUnresponsiveStepsProperties {
id: string;
data?: unknown;
onActive?: (step: TAjalaSteps, self: AjalaJourney) => void;
onInActive?: (step: TAjalaSteps, self: AjalaJourney) => void;
}
export { }

2

package.json
{
"name": "ajala.js",
"private": false,
"version": "0.3.11",
"version": "0.4.0",
"type": "module",

@@ -6,0 +6,0 @@ "main": "./dist/ajala.cjs",

22

README.md

@@ -0,1 +1,3 @@

<!-- @format -->
# Àjàlá.js

@@ -10,8 +12,8 @@

- **Simple**: is simple to use and has no external dependency at all
- **Light-weight**: is just 7kb gzipped.
- **Highly customizable**: you can pass your own custom tooltip element, custom arrow, customize each step state value at different screen size etc, all this with a powerful API.
- **TypeScript**: Written in TypeScript
- **Consistent behavior**: usable across all browsers
- **MIT Licensed**: free for personal and commercial use
- **Simple**: Easy to use with no external dependencies.
- **Light-weight**: A small footprint of just 7KB when gzipped.
- **Highly customizable**: Fully customizable tooltips with the ability to change the tooltip element, arrow design, and step state behavior at different screen sizes—all controlled via a powerful API.
- **TypeScript**: Built with TypeScript for improved type safety and developer experience.
- **Consistent behavior**: Works seamlessly across all major browsers.
- **MIT Licensed**: Free to use for both personal and commercial projects

@@ -59,6 +61,10 @@ <br />

**Please note:** That you only need `import "ajala.js/dist/ajala.css";` when you are using ajala default tooltip, you don't need it if you provide your own custom tooltip
**Please note:** You only need to import `import "ajala.js/dist/ajala.css";` if you are using the default tooltip provided by Ajala. If you choose to provide your own custom tooltip, you can skip this import.
`AjalaJourney` class accept two arguments, an array of steps object which is compulsory and the journey options that's used to customize the jounery experience globally.
The `AjalaJourney` class accept two arguments:
1. **Steps Array:** This is a required array of step objects that define the individual steps in the walkthrough journey.
2. **Journey Options:** These are used to globally customize the walkthrough journey experience, allowing you to adjust settings like appearance, behavior, and other configurations.
## Ajala Step Shape

@@ -65,0 +71,0 @@ 

dist/ajala.cjs

Sorry, the diff of this file is not supported yet