961 lines
33 KiB
JavaScript
961 lines
33 KiB
JavaScript
// =========================================================
|
|
// Material Dashboard 2 - v3.1.0
|
|
// =========================================================
|
|
|
|
// Product Page: https://www.creative-tim.com/product/material-dashboard
|
|
// Copyright 2023 Creative Tim (https://www.creative-tim.com)
|
|
// Licensed under MIT (https://github.com/creativetimofficial/material-dashboard/blob/master/LICENSE.md)
|
|
|
|
// Coded by www.creative-tim.com
|
|
|
|
// =========================================================
|
|
|
|
// The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
// Initialization for ES Users
|
|
import { Tab, initMDB } from "mdb-ui-kit";
|
|
|
|
initMDB({ Tab });
|
|
|
|
// Verify navbar blur on scroll
|
|
if (document.getElementById("navbarBlur")) {
|
|
navbarBlurOnScroll("navbarBlur");
|
|
}
|
|
|
|
// initialization of Tooltips
|
|
var tooltipTriggerList = [].slice.call(
|
|
document.querySelectorAll('[data-bs-toggle="tooltip"]')
|
|
);
|
|
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
|
return new bootstrap.Tooltip(tooltipTriggerEl);
|
|
});
|
|
|
|
// when input is focused add focused class for style
|
|
function focused(el) {
|
|
if (el.parentElement.classList.contains("input-group")) {
|
|
el.parentElement.classList.add("focused");
|
|
}
|
|
}
|
|
|
|
// when input is focused remove focused class for style
|
|
function defocused(el) {
|
|
if (el.parentElement.classList.contains("input-group")) {
|
|
el.parentElement.classList.remove("focused");
|
|
}
|
|
}
|
|
|
|
// helper for adding on all elements multiple attributes
|
|
function setAttributes(el, options) {
|
|
Object.keys(options).forEach(function (attr) {
|
|
el.setAttribute(attr, options[attr]);
|
|
});
|
|
}
|
|
|
|
// adding on inputs attributes for calling the focused and defocused functions
|
|
if (document.querySelectorAll(".input-group").length != 0) {
|
|
var allInputs = document.querySelectorAll("input.form-control");
|
|
allInputs.forEach((el) =>
|
|
setAttributes(el, {
|
|
onfocus: "focused(this)",
|
|
onfocusout: "defocused(this)",
|
|
})
|
|
);
|
|
}
|
|
|
|
// Fixed Plugin
|
|
|
|
if (document.querySelector(".fixed-plugin")) {
|
|
var fixedPlugin = document.querySelector(".fixed-plugin");
|
|
var fixedPlugin = document.querySelector(".fixed-plugin");
|
|
var fixedPluginButton = document.querySelector(".fixed-plugin-button");
|
|
var fixedPluginButtonNav = document.querySelector(
|
|
".fixed-plugin-button-nav"
|
|
);
|
|
var fixedPluginCard = document.querySelector(".fixed-plugin .card");
|
|
var fixedPluginCloseButton = document.querySelectorAll(
|
|
".fixed-plugin-close-button"
|
|
);
|
|
var navbar = document.getElementById("navbarBlur");
|
|
var buttonNavbarFixed = document.getElementById("navbarFixed");
|
|
|
|
if (fixedPluginButton) {
|
|
fixedPluginButton.onclick = function () {
|
|
if (!fixedPlugin.classList.contains("show")) {
|
|
fixedPlugin.classList.add("show");
|
|
} else {
|
|
fixedPlugin.classList.remove("show");
|
|
}
|
|
};
|
|
}
|
|
|
|
if (fixedPluginButtonNav) {
|
|
fixedPluginButtonNav.onclick = function () {
|
|
if (!fixedPlugin.classList.contains("show")) {
|
|
fixedPlugin.classList.add("show");
|
|
} else {
|
|
fixedPlugin.classList.remove("show");
|
|
}
|
|
};
|
|
}
|
|
|
|
fixedPluginCloseButton.forEach(function (el) {
|
|
el.onclick = function () {
|
|
fixedPlugin.classList.remove("show");
|
|
};
|
|
});
|
|
|
|
document.querySelector("body").onclick = function (e) {
|
|
if (
|
|
e.target != fixedPluginButton &&
|
|
e.target != fixedPluginButtonNav &&
|
|
e.target.closest(".fixed-plugin .card") != fixedPluginCard
|
|
) {
|
|
fixedPlugin.classList.remove("show");
|
|
}
|
|
};
|
|
|
|
if (navbar) {
|
|
if (navbar.getAttribute("data-scroll") == "true" && buttonNavbarFixed) {
|
|
buttonNavbarFixed.setAttribute("checked", "true");
|
|
}
|
|
}
|
|
}
|
|
|
|
//Set Sidebar Color
|
|
function sidebarColor(a) {
|
|
var parent = document.querySelector(".nav-link.active");
|
|
var color = a.getAttribute("data-color");
|
|
|
|
if (parent.classList.contains("bg-gradient-primary")) {
|
|
parent.classList.remove("bg-gradient-primary");
|
|
}
|
|
if (parent.classList.contains("bg-gradient-dark")) {
|
|
parent.classList.remove("bg-gradient-dark");
|
|
}
|
|
if (parent.classList.contains("bg-gradient-info")) {
|
|
parent.classList.remove("bg-gradient-info");
|
|
}
|
|
if (parent.classList.contains("bg-gradient-success")) {
|
|
parent.classList.remove("bg-gradient-success");
|
|
}
|
|
if (parent.classList.contains("bg-gradient-warning")) {
|
|
parent.classList.remove("bg-gradient-warning");
|
|
}
|
|
if (parent.classList.contains("bg-gradient-danger")) {
|
|
parent.classList.remove("bg-gradient-danger");
|
|
}
|
|
parent.classList.add("bg-gradient-" + color);
|
|
}
|
|
|
|
// Set Sidebar Type
|
|
function sidebarType(a) {
|
|
var parent = a.parentElement.children;
|
|
var color = a.getAttribute("data-class");
|
|
var body = document.querySelector("body");
|
|
var bodyWhite = document.querySelector("body:not(.dark-version)");
|
|
var bodyDark = body.classList.contains("dark-version");
|
|
|
|
var colors = [];
|
|
|
|
for (var i = 0; i < parent.length; i++) {
|
|
parent[i].classList.remove("active");
|
|
colors.push(parent[i].getAttribute("data-class"));
|
|
}
|
|
|
|
if (!a.classList.contains("active")) {
|
|
a.classList.add("active");
|
|
} else {
|
|
a.classList.remove("active");
|
|
}
|
|
|
|
var sidebar = document.querySelector(".sidenav");
|
|
|
|
for (var i = 0; i < colors.length; i++) {
|
|
sidebar.classList.remove(colors[i]);
|
|
}
|
|
|
|
sidebar.classList.add(color);
|
|
|
|
// Remove text-white/text-dark classes
|
|
if (color == "bg-transparent" || color == "bg-white") {
|
|
var textWhites = document.querySelectorAll(".sidenav .text-white");
|
|
for (let i = 0; i < textWhites.length; i++) {
|
|
textWhites[i].classList.remove("text-white");
|
|
textWhites[i].classList.add("text-dark");
|
|
}
|
|
} else {
|
|
var textDarks = document.querySelectorAll(".sidenav .text-dark");
|
|
for (let i = 0; i < textDarks.length; i++) {
|
|
textDarks[i].classList.add("text-white");
|
|
textDarks[i].classList.remove("text-dark");
|
|
}
|
|
}
|
|
|
|
if (color == "bg-transparent" && bodyDark) {
|
|
var textDarks = document.querySelectorAll(".navbar-brand .text-dark");
|
|
for (let i = 0; i < textDarks.length; i++) {
|
|
textDarks[i].classList.add("text-white");
|
|
textDarks[i].classList.remove("text-dark");
|
|
}
|
|
}
|
|
|
|
// Remove logo-white/logo-dark
|
|
|
|
if ((color == "bg-transparent" || color == "bg-white") && bodyWhite) {
|
|
var navbarBrand = document.querySelector(".navbar-brand-img");
|
|
var navbarBrandImg = navbarBrand.src;
|
|
|
|
if (navbarBrandImg.includes("logo-ct.png")) {
|
|
var navbarBrandImgNew = navbarBrandImg.replace(
|
|
"logo-ct",
|
|
"logo-ct-dark"
|
|
);
|
|
navbarBrand.src = navbarBrandImgNew;
|
|
}
|
|
} else {
|
|
var navbarBrand = document.querySelector(".navbar-brand-img");
|
|
var navbarBrandImg = navbarBrand.src;
|
|
if (navbarBrandImg.includes("logo-ct-dark.png")) {
|
|
var navbarBrandImgNew = navbarBrandImg.replace(
|
|
"logo-ct-dark",
|
|
"logo-ct"
|
|
);
|
|
navbarBrand.src = navbarBrandImgNew;
|
|
}
|
|
}
|
|
|
|
if (color == "bg-white" && bodyDark) {
|
|
var navbarBrand = document.querySelector(".navbar-brand-img");
|
|
var navbarBrandImg = navbarBrand.src;
|
|
|
|
if (navbarBrandImg.includes("logo-ct.png")) {
|
|
var navbarBrandImgNew = navbarBrandImg.replace(
|
|
"logo-ct",
|
|
"logo-ct-dark"
|
|
);
|
|
navbarBrand.src = navbarBrandImgNew;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Set Navbar Fixed
|
|
function navbarFixed(el) {
|
|
let classes = [
|
|
"position-sticky",
|
|
"blur",
|
|
"shadow-blur",
|
|
"mt-4",
|
|
"left-auto",
|
|
"top-1",
|
|
"z-index-sticky",
|
|
];
|
|
const navbar = document.getElementById("navbarBlur");
|
|
|
|
if (!el.getAttribute("checked")) {
|
|
navbar.classList.add(...classes);
|
|
navbar.setAttribute("navbar-scroll", "true");
|
|
navbarBlurOnScroll("navbarBlur");
|
|
el.setAttribute("checked", "true");
|
|
} else {
|
|
navbar.classList.remove(...classes);
|
|
navbar.setAttribute("navbar-scroll", "false");
|
|
navbarBlurOnScroll("navbarBlur");
|
|
el.removeAttribute("checked");
|
|
}
|
|
}
|
|
|
|
// Set Navbar Minimized
|
|
function navbarMinimize(el) {
|
|
var sidenavShow = document.getElementsByClassName("g-sidenav-show")[0];
|
|
|
|
if (!el.getAttribute("checked")) {
|
|
sidenavShow.classList.remove("g-sidenav-pinned");
|
|
sidenavShow.classList.add("g-sidenav-hidden");
|
|
el.setAttribute("checked", "true");
|
|
} else {
|
|
sidenavShow.classList.remove("g-sidenav-hidden");
|
|
sidenavShow.classList.add("g-sidenav-pinned");
|
|
el.removeAttribute("checked");
|
|
}
|
|
}
|
|
|
|
// Navbar blur on scroll
|
|
function navbarBlurOnScroll(id) {
|
|
const navbar = document.getElementById(id);
|
|
let navbarScrollActive = navbar
|
|
? navbar.getAttribute("data-scroll")
|
|
: false;
|
|
let scrollDistance = 5;
|
|
let classes = ["blur", "shadow-blur", "left-auto"];
|
|
let toggleClasses = ["shadow-none"];
|
|
|
|
if (navbarScrollActive == "true") {
|
|
window.onscroll = debounce(function () {
|
|
if (window.scrollY > scrollDistance) {
|
|
blurNavbar();
|
|
} else {
|
|
transparentNavbar();
|
|
}
|
|
}, 10);
|
|
} else {
|
|
window.onscroll = debounce(function () {
|
|
transparentNavbar();
|
|
}, 10);
|
|
}
|
|
|
|
var isWindows = navigator.platform.indexOf("Win") > -1 ? true : false;
|
|
|
|
if (isWindows) {
|
|
var content = document.querySelector(".main-content");
|
|
if (navbarScrollActive == "true") {
|
|
content.addEventListener(
|
|
"ps-scroll-y",
|
|
debounce(function () {
|
|
if (content.scrollTop > scrollDistance) {
|
|
blurNavbar();
|
|
} else {
|
|
transparentNavbar();
|
|
}
|
|
}, 10)
|
|
);
|
|
} else {
|
|
content.addEventListener(
|
|
"ps-scroll-y",
|
|
debounce(function () {
|
|
transparentNavbar();
|
|
}, 10)
|
|
);
|
|
}
|
|
}
|
|
|
|
function blurNavbar() {
|
|
navbar.classList.add(...classes);
|
|
navbar.classList.remove(...toggleClasses);
|
|
|
|
toggleNavLinksColor("blur");
|
|
}
|
|
|
|
function transparentNavbar() {
|
|
navbar.classList.remove(...classes);
|
|
navbar.classList.add(...toggleClasses);
|
|
|
|
toggleNavLinksColor("transparent");
|
|
}
|
|
|
|
function toggleNavLinksColor(type) {
|
|
let navLinks = document.querySelectorAll(".navbar-main .nav-link");
|
|
let navLinksToggler = document.querySelectorAll(
|
|
".navbar-main .sidenav-toggler-line"
|
|
);
|
|
|
|
if (type === "blur") {
|
|
navLinks.forEach((element) => {
|
|
element.classList.remove("text-body");
|
|
});
|
|
|
|
navLinksToggler.forEach((element) => {
|
|
element.classList.add("bg-dark");
|
|
});
|
|
} else if (type === "transparent") {
|
|
navLinks.forEach((element) => {
|
|
element.classList.add("text-body");
|
|
});
|
|
|
|
navLinksToggler.forEach((element) => {
|
|
element.classList.remove("bg-dark");
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
// Debounce Function
|
|
// Returns a function, that, as long as it continues to be invoked, will not
|
|
// be triggered. The function will be called after it stops being called for
|
|
// N milliseconds. If `immediate` is passed, trigger the function on the
|
|
// leading edge, instead of the trailing.
|
|
function debounce(func, wait, immediate) {
|
|
var timeout;
|
|
return function () {
|
|
var context = this,
|
|
args = arguments;
|
|
var later = function () {
|
|
timeout = null;
|
|
if (!immediate) func.apply(context, args);
|
|
};
|
|
var callNow = immediate && !timeout;
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(later, wait);
|
|
if (callNow) func.apply(context, args);
|
|
};
|
|
}
|
|
|
|
// initialization of Toasts
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
var toastElList = [].slice.call(document.querySelectorAll(".toast"));
|
|
|
|
var toastList = toastElList.map(function (toastEl) {
|
|
return new bootstrap.Toast(toastEl);
|
|
});
|
|
|
|
var toastButtonList = [].slice.call(
|
|
document.querySelectorAll(".toast-btn")
|
|
);
|
|
|
|
toastButtonList.map(function (toastButtonEl) {
|
|
toastButtonEl.addEventListener("click", function () {
|
|
var toastToTrigger = document.getElementById(
|
|
toastButtonEl.dataset.target
|
|
);
|
|
|
|
if (toastToTrigger) {
|
|
var toast = bootstrap.Toast.getInstance(toastToTrigger);
|
|
toast.show();
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
// Tabs navigation
|
|
|
|
var total = document.querySelectorAll(".nav-pills");
|
|
|
|
function initNavs() {
|
|
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 = "-";
|
|
|
|
moving_div.classList.add("moving-tab", "position-absolute", "nav-link");
|
|
moving_div.appendChild(tab);
|
|
item.appendChild(moving_div);
|
|
|
|
var list_length = item.getElementsByTagName("li").length;
|
|
|
|
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"); // get reference
|
|
if (li) {
|
|
let nodes = Array.from(li.closest("ul").children); // get array
|
|
let index = nodes.indexOf(li) + 1;
|
|
item.querySelector(
|
|
"li:nth-child(" + index + ") .nav-link"
|
|
).onclick = function () {
|
|
moving_div = item.querySelector(".moving-tab");
|
|
let sum = 0;
|
|
if (item.classList.contains("flex-column")) {
|
|
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";
|
|
}
|
|
};
|
|
}
|
|
};
|
|
});
|
|
}
|
|
|
|
setTimeout(function () {
|
|
initNavs();
|
|
}, 100);
|
|
|
|
// 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 = "-";
|
|
|
|
moving_div.classList.add("moving-tab", "position-absolute", "nav-link");
|
|
moving_div.appendChild(tab);
|
|
|
|
item.appendChild(moving_div);
|
|
|
|
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); // get array
|
|
let index = nodes.indexOf(li) + 1;
|
|
|
|
let sum = 0;
|
|
if (item.classList.contains("flex-column")) {
|
|
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-column")) {
|
|
item.classList.remove("flex-row");
|
|
item.classList.add("flex-column", "on-resize");
|
|
let li = item.querySelector(".nav-link.active").parentElement;
|
|
let nodes = Array.from(li.closest("ul").children); // get array
|
|
let index = nodes.indexOf(li) + 1;
|
|
let sum = 0;
|
|
for (var j = 1; j <= nodes.indexOf(li); j++) {
|
|
sum += item.querySelector(
|
|
"li:nth-child(" + j + ")"
|
|
).offsetHeight;
|
|
}
|
|
var moving_div = document.querySelector(".moving-tab");
|
|
moving_div.style.width =
|
|
item.querySelector("li:nth-child(1)").offsetWidth + "px";
|
|
moving_div.style.transform =
|
|
"translate3d(0px," + sum + "px, 0px)";
|
|
}
|
|
});
|
|
} else {
|
|
total.forEach(function (item, i) {
|
|
if (item.classList.contains("on-resize")) {
|
|
item.classList.remove("flex-column", "on-resize");
|
|
item.classList.add("flex-row");
|
|
let li = item.querySelector(".nav-link.active").parentElement;
|
|
let nodes = Array.from(li.closest("ul").children); // get array
|
|
let index = nodes.indexOf(li) + 1;
|
|
let sum = 0;
|
|
for (var j = 1; j <= nodes.indexOf(li); j++) {
|
|
sum += item.querySelector(
|
|
"li:nth-child(" + j + ")"
|
|
).offsetWidth;
|
|
}
|
|
var moving_div = document.querySelector(".moving-tab");
|
|
moving_div.style.transform =
|
|
"translate3d(" + sum + "px, 0px, 0px)";
|
|
moving_div.style.width =
|
|
item.querySelector("li:nth-child(" + index + ")")
|
|
.offsetWidth + "px";
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
// Function to remove flex row on mobile devices
|
|
if (window.innerWidth < 991) {
|
|
total.forEach(function (item, i) {
|
|
if (item.classList.contains("flex-row")) {
|
|
item.classList.remove("flex-row");
|
|
item.classList.add("flex-column", "on-resize");
|
|
}
|
|
});
|
|
}
|
|
|
|
function getEventTarget(e) {
|
|
e = e || window.event;
|
|
return e.target || e.srcElement;
|
|
}
|
|
|
|
// End tabs navigation
|
|
|
|
window.onload = function () {
|
|
// Material Design Input function
|
|
var inputs = document.querySelectorAll("input");
|
|
|
|
for (var i = 0; i < inputs.length; i++) {
|
|
inputs[i].addEventListener(
|
|
"focus",
|
|
function (e) {
|
|
this.parentElement.classList.add("is-focused");
|
|
},
|
|
false
|
|
);
|
|
|
|
inputs[i].onkeyup = function (e) {
|
|
if (this.value != "") {
|
|
this.parentElement.classList.add("is-filled");
|
|
} else {
|
|
this.parentElement.classList.remove("is-filled");
|
|
}
|
|
};
|
|
|
|
inputs[i].addEventListener(
|
|
"focusout",
|
|
function (e) {
|
|
if (this.value != "") {
|
|
this.parentElement.classList.add("is-filled");
|
|
}
|
|
this.parentElement.classList.remove("is-focused");
|
|
},
|
|
false
|
|
);
|
|
}
|
|
|
|
// Ripple Effect
|
|
var ripples = document.querySelectorAll(".btn");
|
|
|
|
for (var i = 0; i < ripples.length; i++) {
|
|
ripples[i].addEventListener(
|
|
"click",
|
|
function (e) {
|
|
var targetEl = e.target;
|
|
var rippleDiv = targetEl.querySelector(".ripple");
|
|
|
|
rippleDiv = document.createElement("span");
|
|
rippleDiv.classList.add("ripple");
|
|
rippleDiv.style.width = rippleDiv.style.height =
|
|
Math.max(targetEl.offsetWidth, targetEl.offsetHeight) +
|
|
"px";
|
|
targetEl.appendChild(rippleDiv);
|
|
|
|
rippleDiv.style.left =
|
|
e.offsetX - rippleDiv.offsetWidth / 2 + "px";
|
|
rippleDiv.style.top =
|
|
e.offsetY - rippleDiv.offsetHeight / 2 + "px";
|
|
rippleDiv.classList.add("ripple");
|
|
setTimeout(function () {
|
|
rippleDiv.parentElement.removeChild(rippleDiv);
|
|
}, 600);
|
|
},
|
|
false
|
|
);
|
|
}
|
|
};
|
|
|
|
// Toggle Sidenav
|
|
const iconNavbarSidenav = document.getElementById("iconNavbarSidenav");
|
|
const iconSidenav = document.getElementById("iconSidenav");
|
|
const sidenav = document.getElementById("sidenav-main");
|
|
let body = document.getElementsByTagName("body")[0];
|
|
let className = "g-sidenav-pinned";
|
|
|
|
if (iconNavbarSidenav) {
|
|
iconNavbarSidenav.addEventListener("click", toggleSidenav);
|
|
}
|
|
|
|
if (iconSidenav) {
|
|
iconSidenav.addEventListener("click", toggleSidenav);
|
|
}
|
|
|
|
function toggleSidenav() {
|
|
if (body.classList.contains(className)) {
|
|
body.classList.remove(className);
|
|
setTimeout(function () {
|
|
sidenav.classList.remove("bg-white");
|
|
}, 100);
|
|
sidenav.classList.remove("bg-transparent");
|
|
} else {
|
|
body.classList.add(className);
|
|
sidenav.classList.add("bg-white");
|
|
sidenav.classList.remove("bg-transparent");
|
|
iconSidenav.classList.remove("d-none");
|
|
}
|
|
}
|
|
|
|
// Resize navbar color depends on configurator active type of sidenav
|
|
|
|
let referenceButtons = document.querySelector("[data-class]");
|
|
|
|
if (sidenav) {
|
|
window.addEventListener("resize", navbarColorOnResize);
|
|
|
|
function navbarColorOnResize() {
|
|
if (window.innerWidth > 1200) {
|
|
if (
|
|
referenceButtons?.classList.contains("active") &&
|
|
referenceButtons?.getAttribute("data-class") ===
|
|
"bg-transparent"
|
|
) {
|
|
sidenav.classList.remove("bg-white");
|
|
} else {
|
|
sidenav.classList.add("bg-white");
|
|
}
|
|
} else {
|
|
sidenav.classList.add("bg-white");
|
|
sidenav.classList.remove("bg-transparent");
|
|
}
|
|
}
|
|
}
|
|
|
|
// Deactivate sidenav type buttons on resize and small screens
|
|
window.addEventListener("resize", sidenavTypeOnResize);
|
|
window.addEventListener("load", sidenavTypeOnResize);
|
|
|
|
function sidenavTypeOnResize() {
|
|
let elements = document.querySelectorAll('[onclick="sidebarType(this)"]');
|
|
if (window.innerWidth < 1200) {
|
|
elements.forEach(function (el) {
|
|
el.classList.add("disabled");
|
|
});
|
|
} else {
|
|
elements.forEach(function (el) {
|
|
el.classList.remove("disabled");
|
|
});
|
|
}
|
|
}
|
|
|
|
// Light Mode / Dark Mode
|
|
function darkMode(el) {
|
|
const body = document.getElementsByTagName("body")[0];
|
|
const hr = document.querySelectorAll("div:not(.sidenav) > hr");
|
|
const hr_card = document.querySelectorAll("div:not(.bg-gradient-dark) hr");
|
|
const text_btn = document.querySelectorAll("button:not(.btn) > .text-dark");
|
|
const text_span = document.querySelectorAll(
|
|
"span.text-dark, .breadcrumb .text-dark"
|
|
);
|
|
const text_span_white = document.querySelectorAll(
|
|
"span.text-white, .breadcrumb .text-white"
|
|
);
|
|
const text_strong = document.querySelectorAll("strong.text-dark");
|
|
const text_strong_white = document.querySelectorAll("strong.text-white");
|
|
const text_nav_link = document.querySelectorAll("a.nav-link.text-dark");
|
|
const text_nav_link_white = document.querySelectorAll(
|
|
"a.nav-link.text-white"
|
|
);
|
|
const secondary = document.querySelectorAll(".text-secondary");
|
|
const bg_gray_100 = document.querySelectorAll(".bg-gray-100");
|
|
const bg_gray_600 = document.querySelectorAll(".bg-gray-600");
|
|
const btn_text_dark = document.querySelectorAll(
|
|
".btn.btn-link.text-dark, .material-icons.text-dark"
|
|
);
|
|
const btn_text_white = document.querySelectorAll(
|
|
".btn.btn-link.text-white, .material-icons.text-white"
|
|
);
|
|
const card_border = document.querySelectorAll(".card.border");
|
|
const card_border_dark = document.querySelectorAll(
|
|
".card.border.border-dark"
|
|
);
|
|
|
|
const svg = document.querySelectorAll("g");
|
|
|
|
if (!el.getAttribute("checked")) {
|
|
body.classList.add("dark-version");
|
|
for (var i = 0; i < hr.length; i++) {
|
|
if (hr[i].classList.contains("dark")) {
|
|
hr[i].classList.remove("dark");
|
|
hr[i].classList.add("light");
|
|
}
|
|
}
|
|
|
|
for (var i = 0; i < hr_card.length; i++) {
|
|
if (hr_card[i].classList.contains("dark")) {
|
|
hr_card[i].classList.remove("dark");
|
|
hr_card[i].classList.add("light");
|
|
}
|
|
}
|
|
for (var i = 0; i < text_btn.length; i++) {
|
|
if (text_btn[i].classList.contains("text-dark")) {
|
|
text_btn[i].classList.remove("text-dark");
|
|
text_btn[i].classList.add("text-white");
|
|
}
|
|
}
|
|
for (var i = 0; i < text_span.length; i++) {
|
|
if (text_span[i].classList.contains("text-dark")) {
|
|
text_span[i].classList.remove("text-dark");
|
|
text_span[i].classList.add("text-white");
|
|
}
|
|
}
|
|
for (var i = 0; i < text_strong.length; i++) {
|
|
if (text_strong[i].classList.contains("text-dark")) {
|
|
text_strong[i].classList.remove("text-dark");
|
|
text_strong[i].classList.add("text-white");
|
|
}
|
|
}
|
|
for (var i = 0; i < text_nav_link.length; i++) {
|
|
if (text_nav_link[i].classList.contains("text-dark")) {
|
|
text_nav_link[i].classList.remove("text-dark");
|
|
text_nav_link[i].classList.add("text-white");
|
|
}
|
|
}
|
|
for (var i = 0; i < secondary.length; i++) {
|
|
if (secondary[i].classList.contains("text-secondary")) {
|
|
secondary[i].classList.remove("text-secondary");
|
|
secondary[i].classList.add("text-white");
|
|
secondary[i].classList.add("opacity-8");
|
|
}
|
|
}
|
|
for (var i = 0; i < bg_gray_100.length; i++) {
|
|
if (bg_gray_100[i].classList.contains("bg-gray-100")) {
|
|
bg_gray_100[i].classList.remove("bg-gray-100");
|
|
bg_gray_100[i].classList.add("bg-gray-600");
|
|
}
|
|
}
|
|
for (var i = 0; i < btn_text_dark.length; i++) {
|
|
btn_text_dark[i].classList.remove("text-dark");
|
|
btn_text_dark[i].classList.add("text-white");
|
|
}
|
|
for (var i = 0; i < svg.length; i++) {
|
|
if (svg[i].hasAttribute("fill")) {
|
|
svg[i].setAttribute("fill", "#fff");
|
|
}
|
|
}
|
|
for (var i = 0; i < card_border.length; i++) {
|
|
card_border[i].classList.add("border-dark");
|
|
}
|
|
el.setAttribute("checked", "true");
|
|
} else {
|
|
body.classList.remove("dark-version");
|
|
for (var i = 0; i < hr.length; i++) {
|
|
if (hr[i].classList.contains("light")) {
|
|
hr[i].classList.add("dark");
|
|
hr[i].classList.remove("light");
|
|
}
|
|
}
|
|
for (var i = 0; i < hr_card.length; i++) {
|
|
if (hr_card[i].classList.contains("light")) {
|
|
hr_card[i].classList.add("dark");
|
|
hr_card[i].classList.remove("light");
|
|
}
|
|
}
|
|
for (var i = 0; i < text_btn.length; i++) {
|
|
if (text_btn[i].classList.contains("text-white")) {
|
|
text_btn[i].classList.remove("text-white");
|
|
text_btn[i].classList.add("text-dark");
|
|
}
|
|
}
|
|
for (var i = 0; i < text_span_white.length; i++) {
|
|
if (
|
|
text_span_white[i].classList.contains("text-white") &&
|
|
!text_span_white[i].closest(".sidenav") &&
|
|
!text_span_white[i].closest(".card.bg-gradient-dark")
|
|
) {
|
|
text_span_white[i].classList.remove("text-white");
|
|
text_span_white[i].classList.add("text-dark");
|
|
}
|
|
}
|
|
for (var i = 0; i < text_strong_white.length; i++) {
|
|
if (text_strong_white[i].classList.contains("text-white")) {
|
|
text_strong_white[i].classList.remove("text-white");
|
|
text_strong_white[i].classList.add("text-dark");
|
|
}
|
|
}
|
|
for (var i = 0; i < text_nav_link_white.length; i++) {
|
|
if (
|
|
text_nav_link_white[i].classList.contains("text-white") &&
|
|
!text_nav_link_white[i].closest(".sidenav")
|
|
) {
|
|
text_nav_link_white[i].classList.remove("text-white");
|
|
text_nav_link_white[i].classList.add("text-dark");
|
|
}
|
|
}
|
|
for (var i = 0; i < secondary.length; i++) {
|
|
if (secondary[i].classList.contains("text-white")) {
|
|
secondary[i].classList.remove("text-white");
|
|
secondary[i].classList.remove("opacity-8");
|
|
secondary[i].classList.add("text-dark");
|
|
}
|
|
}
|
|
for (var i = 0; i < bg_gray_600.length; i++) {
|
|
if (bg_gray_600[i].classList.contains("bg-gray-600")) {
|
|
bg_gray_600[i].classList.remove("bg-gray-600");
|
|
bg_gray_600[i].classList.add("bg-gray-100");
|
|
}
|
|
}
|
|
for (var i = 0; i < svg.length; i++) {
|
|
if (svg[i].hasAttribute("fill")) {
|
|
svg[i].setAttribute("fill", "#252f40");
|
|
}
|
|
}
|
|
for (var i = 0; i < btn_text_white.length; i++) {
|
|
if (!btn_text_white[i].closest(".card.bg-gradient-dark")) {
|
|
btn_text_white[i].classList.remove("text-white");
|
|
btn_text_white[i].classList.add("text-dark");
|
|
}
|
|
}
|
|
for (var i = 0; i < card_border_dark.length; i++) {
|
|
card_border_dark[i].classList.remove("border-dark");
|
|
}
|
|
el.removeAttribute("checked");
|
|
}
|
|
}
|
|
|
|
// side bullets
|
|
|
|
const indicators = document.querySelectorAll(".indicator");
|
|
const sections = document.querySelectorAll("section");
|
|
|
|
if (indicators) {
|
|
const resetCurrentActiveIndicator = () => {
|
|
const activeIndicator = document.querySelector(".indicator.active");
|
|
if (activeIndicator) {
|
|
activeIndicator.classList.remove("active");
|
|
}
|
|
};
|
|
|
|
const onSectionLeavesViewport = (section) => {
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
resetCurrentActiveIndicator();
|
|
const element = entry.target;
|
|
const indicator = document.querySelector(
|
|
`a[href='#${element.id}']`
|
|
);
|
|
indicator.classList.add("active");
|
|
return;
|
|
}
|
|
});
|
|
},
|
|
{
|
|
root: null,
|
|
rootMargin: "0px",
|
|
threshold: 0.75,
|
|
}
|
|
);
|
|
observer.observe(section);
|
|
};
|
|
|
|
indicators.forEach((indicator) => {
|
|
indicator.addEventListener("click", function (event) {
|
|
event.preventDefault();
|
|
document.querySelector(this.getAttribute("href")).scrollIntoView({
|
|
behavior: "smooth",
|
|
});
|
|
resetCurrentActiveIndicator();
|
|
this.classList.add("active");
|
|
});
|
|
});
|
|
|
|
sections.forEach(onSectionLeavesViewport);
|
|
}
|