118 lines
4.4 KiB
JavaScript
118 lines
4.4 KiB
JavaScript
|
var collapse_triggers = document.querySelectorAll("[collapse_trigger]");
|
||
|
|
||
|
collapse_triggers.forEach((trigger) => {
|
||
|
var collapse = trigger.nextElementSibling;
|
||
|
|
||
|
trigger.addEventListener("click", function () {
|
||
|
if (trigger.getAttribute("aria-expanded") == "true") {
|
||
|
var collapse_height = collapse.scrollHeight;
|
||
|
close_collapse(trigger, collapse, collapse_height);
|
||
|
} else {
|
||
|
var collapse_height = collapse.scrollHeight;
|
||
|
open_collapse(trigger, collapse, collapse_height);
|
||
|
}
|
||
|
});
|
||
|
});
|
||
|
|
||
|
function open_collapse(trigger, collapse, height) {
|
||
|
trigger.classList.remove("after:text-slate-800/50");
|
||
|
trigger.classList.add("after:rotate-180", "after:text-slate-800");
|
||
|
|
||
|
if (!trigger.hasAttribute("active_primary")) {
|
||
|
trigger.classList.add("dark:after:text-white");
|
||
|
trigger.classList.remove("dark:after:text-white/50");
|
||
|
}
|
||
|
|
||
|
collapse.classList.remove("max-h-0");
|
||
|
collapse.style.maxHeight = height + "px";
|
||
|
|
||
|
if (trigger.getAttribute("collapse_trigger") == "secondary") {
|
||
|
collapse_parent = trigger.closest("div");
|
||
|
parent_height = collapse_parent.scrollHeight + height;
|
||
|
collapse_parent.style.maxHeight = parent_height + "px";
|
||
|
}
|
||
|
|
||
|
trigger.setAttribute("aria-expanded", "true");
|
||
|
}
|
||
|
|
||
|
function close_collapse(trigger, collapse, height) {
|
||
|
trigger.classList.remove("after:rotate-180", "after:text-slate-800");
|
||
|
trigger.classList.add("after:text-slate-800/50");
|
||
|
|
||
|
if (!trigger.hasAttribute("active_primary")) {
|
||
|
trigger.classList.add("dark:after:text-white/50");
|
||
|
trigger.classList.remove("dark:after:text-white");
|
||
|
}
|
||
|
|
||
|
collapse.removeAttribute("style");
|
||
|
collapse.classList.add("max-h-0");
|
||
|
|
||
|
if (trigger.getAttribute("collapse_trigger") == "secondary") {
|
||
|
collapse_parent = trigger.closest("div");
|
||
|
parent_height = collapse_parent.scrollHeight - height;
|
||
|
collapse_parent.style.maxHeight = parent_height + "px";
|
||
|
}
|
||
|
|
||
|
trigger.setAttribute("aria-expanded", "false");
|
||
|
}
|
||
|
|
||
|
var page = window.location.pathname.split("/").pop().split(".")[0];
|
||
|
var aux = window.location.pathname.split("/");
|
||
|
// var to_build = (aux.includes('pages')?'../':'./');
|
||
|
// var root = window.location.pathname.split("/")
|
||
|
// if (!aux.includes("pages")) {
|
||
|
// page = "dashboard";
|
||
|
// }
|
||
|
|
||
|
var page_name = window.location.pathname.split("/");
|
||
|
var current_page = page_name.pop();
|
||
|
var parent_page = page_name.pop();
|
||
|
var root_page = page_name.pop();
|
||
|
var root_folder = page_name.pop();
|
||
|
|
||
|
|
||
|
|
||
|
if (root_folder == "pages") {
|
||
|
var a_href = "../../../pages/" + root_page + "/" + parent_page + "/" + current_page;
|
||
|
|
||
|
var active_page = document.querySelector('a[href="' + a_href + '"]');
|
||
|
var active_secondary = active_page.closest("div").previousElementSibling;
|
||
|
|
||
|
var active_primary = active_secondary.closest("div").previousElementSibling;
|
||
|
var active_primary_icon = active_primary.querySelector("div");
|
||
|
var active_primary_icon_fills = active_primary_icon.querySelectorAll(".fill-slate-800");
|
||
|
|
||
|
active_primary.setAttribute("active_primary", "");
|
||
|
|
||
|
active_primary.nextElementSibling.style.maxHeight = active_primary.nextElementSibling.scrollHeight + active_secondary.nextElementSibling.scrollHeight + "px";
|
||
|
active_secondary.nextElementSibling.style.maxHeight = active_secondary.nextElementSibling.scrollHeight + "px";
|
||
|
} else if(aux.includes("pages")) {
|
||
|
root_folder = root_page;
|
||
|
root_page = parent_page;
|
||
|
parent_page = current_page;
|
||
|
|
||
|
var a_href = "../../pages/" + root_page + "/" + parent_page;
|
||
|
|
||
|
var active_page = document.querySelector('a[href="' + a_href + '"]');
|
||
|
active_page.setAttribute("active_page", "");
|
||
|
active_page.setAttribute("active_secondary", "");
|
||
|
|
||
|
var active_primary = active_page.closest("div").previousElementSibling;
|
||
|
var active_primary_icon = active_primary.querySelector("div");
|
||
|
var active_primary_icon_fills = active_primary_icon.querySelectorAll(".fill-slate-800");
|
||
|
|
||
|
active_primary.nextElementSibling.style.maxHeight = active_primary.nextElementSibling.scrollHeight + "px";
|
||
|
} else {
|
||
|
var a_href = "./pages/dashboards/default.html";
|
||
|
|
||
|
var active_page = document.querySelector('a[href="' + a_href + '"]');
|
||
|
active_page.setAttribute("active_page", "");
|
||
|
active_page.setAttribute("active_secondary", "");
|
||
|
|
||
|
var active_primary = active_page.closest("div").previousElementSibling;
|
||
|
var active_primary_icon = active_primary.querySelector("div");
|
||
|
var active_primary_icon_fills = active_primary_icon.querySelectorAll(".fill-slate-800");
|
||
|
|
||
|
active_primary.nextElementSibling.style.maxHeight = active_primary.nextElementSibling.scrollHeight + "px";
|
||
|
}
|