130 lines
5.3 KiB
JavaScript
130 lines
5.3 KiB
JavaScript
|
// Tabs navigation
|
||
|
|
||
|
var total = document.querySelectorAll("[nav-pills]");
|
||
|
if (total[0]) {
|
||
|
total.forEach(function (item, i) {
|
||
|
var moving_div = document.createElement("div");
|
||
|
var first_li = item.querySelector("li:first-child [nav-link]");
|
||
|
var tab = first_li.cloneNode();
|
||
|
tab.innerHTML = "-";
|
||
|
tab.classList.remove("bg-inherit", "text-slate-700", "dark:text-white");
|
||
|
tab.classList.add("bg-white", "text-white", "dark:bg-slate-950", "dark:text-slate-950", "shadow-soft-xxs");
|
||
|
tab.style.animation = ".2s ease";
|
||
|
|
||
|
moving_div.classList.add("z-10", "absolute", "text-slate-700", "rounded-lg", "bg-inherit", "flex-auto", "text-center", "bg-none", "border-0", "block");
|
||
|
moving_div.setAttribute("moving-tab", "");
|
||
|
moving_div.setAttribute("nav-link", "");
|
||
|
moving_div.appendChild(tab);
|
||
|
item.appendChild(moving_div);
|
||
|
|
||
|
var list_length = item.getElementsByTagName("li").length;
|
||
|
|
||
|
// moving_div.style.boxShadow = "0 1px 5px 1px #ddd";
|
||
|
moving_div.style.padding = "0px";
|
||
|
moving_div.style.width = item.querySelector("li:nth-child(1)").offsetWidth + "px";
|
||
|
moving_div.style.transform = "translate3d(0px, 0px, 0px)";
|
||
|
moving_div.style.transition = ".5s ease";
|
||
|
|
||
|
item.onmouseover = function (event) {
|
||
|
let target = getEventTarget(event);
|
||
|
let li = target.closest("li");
|
||
|
if (li) {
|
||
|
let nodes = Array.from(li.closest("ul").children);
|
||
|
let index = nodes.indexOf(li) + 1;
|
||
|
item.querySelector("li:nth-child(" + index + ") [nav-link]").onclick = function () {
|
||
|
item.querySelectorAll("li").forEach(function (list_item) {
|
||
|
list_item.firstElementChild.classList.remove("dark:text-white");
|
||
|
list_item.firstElementChild.removeAttribute("active");
|
||
|
list_item.firstElementChild.setAttribute("aria-selected", "false");
|
||
|
});
|
||
|
li.firstElementChild.setAttribute("active", "");
|
||
|
li.firstElementChild.setAttribute("aria-selected", "true");
|
||
|
li.firstElementChild.classList.add("dark:text-white");
|
||
|
moving_div = item.querySelector("[moving-tab]");
|
||
|
let sum = 0;
|
||
|
if (item.classList.contains("flex-col")) {
|
||
|
for (var j = 1; j <= nodes.indexOf(li); j++) {
|
||
|
sum += item.querySelector("li:nth-child(" + j + ")").offsetHeight;
|
||
|
}
|
||
|
moving_div.style.transform = "translate3d(0px," + sum + "px, 0px)";
|
||
|
moving_div.style.height = item.querySelector("li:nth-child(" + j + ")").offsetHeight;
|
||
|
} else {
|
||
|
for (var j = 1; j <= nodes.indexOf(li); j++) {
|
||
|
sum += item.querySelector("li:nth-child(" + j + ")").offsetWidth;
|
||
|
}
|
||
|
moving_div.style.transform = "translate3d(" + sum + "px, 0px, 0px)";
|
||
|
moving_div.style.width = item.querySelector("li:nth-child(" + index + ")").offsetWidth + "px";
|
||
|
}
|
||
|
};
|
||
|
}
|
||
|
};
|
||
|
});
|
||
|
|
||
|
// Tabs navigation resize
|
||
|
|
||
|
window.addEventListener("resize", function (event) {
|
||
|
total.forEach(function (item, i) {
|
||
|
item.querySelector("[moving-tab]").remove();
|
||
|
var moving_div = document.createElement("div");
|
||
|
var tab = item.querySelector("[nav-link][active]").cloneNode();
|
||
|
tab.innerHTML = "-";
|
||
|
tab.classList.remove("bg-inherit");
|
||
|
tab.classList.add("bg-white", "text-white", "shadow-soft-xxs");
|
||
|
tab.style.animation = ".2s ease";
|
||
|
|
||
|
moving_div.classList.add("z-10", "absolute", "text-slate-700", "rounded-lg", "bg-inherit", "flex-auto", "text-center", "bg-none", "border-0", "block");
|
||
|
moving_div.setAttribute("moving-tab", "");
|
||
|
moving_div.setAttribute("nav-link", "");
|
||
|
moving_div.appendChild(tab);
|
||
|
|
||
|
item.appendChild(moving_div);
|
||
|
|
||
|
// moving_div.style.boxShadow = "0 1px 5px 1px #ddd";
|
||
|
moving_div.style.padding = "0px";
|
||
|
moving_div.style.transition = ".5s ease";
|
||
|
|
||
|
let li = item.querySelector("[nav-link][active]").parentElement;
|
||
|
|
||
|
if (li) {
|
||
|
let nodes = Array.from(li.closest("ul").children);
|
||
|
let index = nodes.indexOf(li) + 1;
|
||
|
|
||
|
let sum = 0;
|
||
|
if (item.classList.contains("flex-col")) {
|
||
|
for (var j = 1; j <= nodes.indexOf(li); j++) {
|
||
|
sum += item.querySelector("li:nth-child(" + j + ")").offsetHeight;
|
||
|
}
|
||
|
moving_div.style.transform = "translate3d(0px," + sum + "px, 0px)";
|
||
|
moving_div.style.width = item.querySelector("li:nth-child(" + index + ")").offsetWidth + "px";
|
||
|
moving_div.style.height = item.querySelector("li:nth-child(" + j + ")").offsetHeight;
|
||
|
} else {
|
||
|
for (var j = 1; j <= nodes.indexOf(li); j++) {
|
||
|
sum += item.querySelector("li:nth-child(" + j + ")").offsetWidth;
|
||
|
}
|
||
|
moving_div.style.transform = "translate3d(" + sum + "px, 0px, 0px)";
|
||
|
moving_div.style.width = item.querySelector("li:nth-child(" + index + ")").offsetWidth + "px";
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
|
||
|
if (window.innerWidth < 991) {
|
||
|
total.forEach(function (item, i) {
|
||
|
if (!item.classList.contains("flex-col")) {
|
||
|
item.classList.add("flex-col", "on-resize");
|
||
|
}
|
||
|
});
|
||
|
} else {
|
||
|
total.forEach(function (item, i) {
|
||
|
if (item.classList.contains("on-resize")) {
|
||
|
item.classList.remove("flex-col", "on-resize");
|
||
|
}
|
||
|
});
|
||
|
}
|
||
|
});
|
||
|
|
||
|
function getEventTarget(e) {
|
||
|
e = e || window.event;
|
||
|
return e.target || e.srcElement;
|
||
|
}
|
||
|
}
|