61 lines
2.4 KiB
JavaScript
61 lines
2.4 KiB
JavaScript
|
var container = document.querySelector("[multisteps-form]");
|
||
|
|
var buttons = container.querySelectorAll("[aria-controls]");
|
||
|
|
var multisteps_form = container.querySelector("form");
|
||
|
|
var forms = container.querySelectorAll("form div[form]");
|
||
|
|
multisteps_form.style.height = forms[0].scrollHeight + "px";
|
||
|
|
var num = forms.length;
|
||
|
|
const active_btn_classes = ["before:scale-120", "before:bg-current", "text-slate-700"];
|
||
|
|
const inactive_btn_classes = ["before:bg-white", "text-slate-100"];
|
||
|
|
const active_form_classes = ["h-auto", "opacity-100", "visible"];
|
||
|
|
const inactive_form_classes = ["h-0", "opacity-0", "invisible"];
|
||
|
|
|
||
|
|
buttons.forEach((button) => {
|
||
|
|
button.addEventListener("click", function () {
|
||
|
|
let form_name = button.getAttribute("aria-controls");
|
||
|
|
let asoc_form = container.querySelector("[form='" + form_name + "']");
|
||
|
|
|
||
|
|
if (!asoc_form.hasAttribute("active")) {
|
||
|
|
var done = false;
|
||
|
|
for (let i = 0; i < num; i++) {
|
||
|
|
var element = buttons[i];
|
||
|
|
var current_form_name = element.getAttribute("aria-controls");
|
||
|
|
var current_form = container.querySelector("form div[form='" + current_form_name + "']");
|
||
|
|
if (!done) {
|
||
|
|
active_btn_classes.forEach((class_name) => {
|
||
|
|
element.classList.add(class_name);
|
||
|
|
});
|
||
|
|
inactive_btn_classes.forEach((class_name) => {
|
||
|
|
element.classList.remove(class_name);
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
inactive_btn_classes.forEach((class_name) => {
|
||
|
|
element.classList.add(class_name);
|
||
|
|
});
|
||
|
|
active_btn_classes.forEach((class_name) => {
|
||
|
|
element.classList.remove(class_name);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (current_form.hasAttribute("active")) {
|
||
|
|
current_form.removeAttribute("active");
|
||
|
|
inactive_form_classes.forEach((class_name) => {
|
||
|
|
current_form.classList.add(class_name);
|
||
|
|
});
|
||
|
|
active_form_classes.forEach((class_name) => {
|
||
|
|
current_form.classList.remove(class_name);
|
||
|
|
});
|
||
|
|
} else if (current_form_name == form_name) {
|
||
|
|
current_form.setAttribute("active", "");
|
||
|
|
active_form_classes.forEach((class_name) => {
|
||
|
|
current_form.classList.add(class_name);
|
||
|
|
});
|
||
|
|
inactive_form_classes.forEach((class_name) => {
|
||
|
|
current_form.classList.remove(class_name);
|
||
|
|
});
|
||
|
|
multisteps_form.style.height = current_form.scrollHeight + "px";
|
||
|
|
done = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|