2056 lines
82 KiB
JavaScript
2056 lines
82 KiB
JavaScript
/*
|
|
Template Name: Grenviro Monitoring
|
|
Author: Themesbrand
|
|
Version: 4.1.0
|
|
Website: https://Themesbrand.com/
|
|
Contact: Themesbrand@gmail.com
|
|
File: Main Js File
|
|
*/
|
|
import '../../vendor/rappasoft/laravel-livewire-tables/resources/imports/laravel-livewire-tables-all.js';
|
|
import flatpickr from "flatpickr";
|
|
import "flatpickr/dist/flatpickr.css";
|
|
import '../scss/bootstrap.scss';
|
|
import '../scss/icons.scss';
|
|
import '../scss/app.scss';
|
|
import '../scss/custom.scss';
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
flatpickr(".datepicker", {});
|
|
});
|
|
(function () {
|
|
("use strict");
|
|
|
|
/**
|
|
* global variables
|
|
*/
|
|
var navbarMenuHTML = document.querySelector(".navbar-menu").innerHTML;
|
|
var horizontalMenuSplit = 7; // after this number all horizontal menus will be moved in More menu options
|
|
var default_lang = "en"; // set Default Language
|
|
var language = localStorage.getItem("language");
|
|
|
|
function initLanguage() {
|
|
// Set new language
|
|
(language === null) ? setLanguage(default_lang) : setLanguage(language);
|
|
var languages = document.getElementsByClassName("language");
|
|
languages && Array.from(languages).forEach(function (dropdown) {
|
|
dropdown.addEventListener("click", function (event) {
|
|
setLanguage(dropdown.getAttribute("data-lang"));
|
|
});
|
|
});
|
|
}
|
|
|
|
function setLanguage(lang) {
|
|
if (document.getElementById("header-lang-img")) {
|
|
if (lang == "en") {
|
|
document.getElementById("header-lang-img").src = "build/images/flags/us.svg";
|
|
} else if (lang == "sp") {
|
|
document.getElementById("header-lang-img").src = "build/images/flags/spain.svg";
|
|
} else if (lang == "gr") {
|
|
document.getElementById("header-lang-img").src = "build/images/flags/germany.svg";
|
|
} else if (lang == "it") {
|
|
document.getElementById("header-lang-img").src = "build/images/flags/italy.svg";
|
|
} else if (lang == "ru") {
|
|
document.getElementById("header-lang-img").src = "build/images/flags/russia.svg";
|
|
} else if (lang == "ch") {
|
|
document.getElementById("header-lang-img").src = "build/images/flags/china.svg";
|
|
} else if (lang == "fr") {
|
|
document.getElementById("header-lang-img").src = "build/images/flags/french.svg";
|
|
} else if (lang == "ar") {
|
|
document.getElementById("header-lang-img").src = "build/images/flags/ae.svg";
|
|
}
|
|
localStorage.setItem("language", lang);
|
|
language = localStorage.getItem("language");
|
|
getLanguage();
|
|
}
|
|
}
|
|
|
|
// Multi language setting
|
|
function getLanguage() {
|
|
language == null ? setLanguage(default_lang) : false;
|
|
var request = new XMLHttpRequest();
|
|
// Instantiating the request object
|
|
request.open("GET", "build/lang/" + language + ".json");
|
|
// Defining event listener for readystatechange event
|
|
request.onreadystatechange = function () {
|
|
// Check if the request is compete and was successful
|
|
if (this.readyState === 4 && this.status === 200) {
|
|
var data = JSON.parse(this.responseText);
|
|
Object.keys(data).forEach(function (key) {
|
|
var elements = document.querySelectorAll("[data-key='" + key + "']");
|
|
Array.from(elements).forEach(function (elem) {
|
|
elem.textContent = data[key];
|
|
});
|
|
});
|
|
}
|
|
};
|
|
// Sending the request to the server
|
|
request.send();
|
|
}
|
|
|
|
function pluginData() {
|
|
/**
|
|
* Common plugins
|
|
*/
|
|
/**
|
|
* Toast UI Notification
|
|
*/
|
|
var toastExamples = document.querySelectorAll("[data-toast]");
|
|
Array.from(toastExamples).forEach(function (element) {
|
|
element.addEventListener("click", function () {
|
|
var toastData = {};
|
|
var isToastVal = element.attributes;
|
|
if (isToastVal["data-toast-text"]) {
|
|
toastData.text = isToastVal["data-toast-text"].value.toString();
|
|
}
|
|
if (isToastVal["data-toast-gravity"]) {
|
|
toastData.gravity = isToastVal["data-toast-gravity"].value.toString();
|
|
}
|
|
if (isToastVal["data-toast-position"]) {
|
|
toastData.position = isToastVal["data-toast-position"].value.toString();
|
|
}
|
|
if (isToastVal["data-toast-className"]) {
|
|
toastData.className = isToastVal["data-toast-className"].value.toString();
|
|
}
|
|
if (isToastVal["data-toast-duration"]) {
|
|
toastData.duration = isToastVal["data-toast-duration"].value.toString();
|
|
}
|
|
if (isToastVal["data-toast-close"]) {
|
|
toastData.close = isToastVal["data-toast-close"].value.toString();
|
|
}
|
|
if (isToastVal["data-toast-style"]) {
|
|
toastData.style = isToastVal["data-toast-style"].value.toString();
|
|
}
|
|
if (isToastVal["data-toast-offset"]) {
|
|
toastData.offset = isToastVal["data-toast-offset"];
|
|
}
|
|
Toastify({
|
|
newWindow: true,
|
|
text: toastData.text,
|
|
gravity: toastData.gravity,
|
|
position: toastData.position,
|
|
className: "bg-" + toastData.className,
|
|
stopOnFocus: true,
|
|
offset: {
|
|
x: toastData.offset ? 50 : 0, // horizontal axis - can be a number or a string indicating unity. eg: '2em'
|
|
y: toastData.offset ? 10 : 0, // vertical axis - can be a number or a string indicating unity. eg: '2em'
|
|
},
|
|
duration: toastData.duration,
|
|
close: toastData.close == "close" ? true : false,
|
|
style: toastData.style == "style" ? {
|
|
background: "linear-gradient(to right, #0AB39C, #405189)"
|
|
} : "",
|
|
}).showToast();
|
|
});
|
|
});
|
|
|
|
/**
|
|
* Choices Select plugin
|
|
*/
|
|
var choicesExamples = document.querySelectorAll("[data-choices]");
|
|
Array.from(choicesExamples).forEach(function (item) {
|
|
var choiceData = {};
|
|
var isChoicesVal = item.attributes;
|
|
if (isChoicesVal["data-choices-groups"]) {
|
|
choiceData.placeholderValue = "This is a placeholder set in the config";
|
|
}
|
|
if (isChoicesVal["data-choices-search-false"]) {
|
|
choiceData.searchEnabled = false;
|
|
}
|
|
if (isChoicesVal["data-choices-search-true"]) {
|
|
choiceData.searchEnabled = true;
|
|
}
|
|
if (isChoicesVal["data-choices-removeItem"]) {
|
|
choiceData.removeItemButton = true;
|
|
}
|
|
if (isChoicesVal["data-choices-sorting-false"]) {
|
|
choiceData.shouldSort = false;
|
|
}
|
|
if (isChoicesVal["data-choices-sorting-true"]) {
|
|
choiceData.shouldSort = true;
|
|
}
|
|
if (isChoicesVal["data-choices-multiple-remove"]) {
|
|
choiceData.removeItemButton = true;
|
|
}
|
|
if (isChoicesVal["data-choices-limit"]) {
|
|
choiceData.maxItemCount = isChoicesVal["data-choices-limit"].value.toString();
|
|
}
|
|
if (isChoicesVal["data-choices-limit"]) {
|
|
choiceData.maxItemCount = isChoicesVal["data-choices-limit"].value.toString();
|
|
}
|
|
if (isChoicesVal["data-choices-editItem-true"]) {
|
|
choiceData.maxItemCount = true;
|
|
}
|
|
if (isChoicesVal["data-choices-editItem-false"]) {
|
|
choiceData.maxItemCount = false;
|
|
}
|
|
if (isChoicesVal["data-choices-text-unique-true"]) {
|
|
choiceData.duplicateItemsAllowed = false;
|
|
}
|
|
if (isChoicesVal["data-choices-text-disabled-true"]) {
|
|
choiceData.addItems = false;
|
|
}
|
|
isChoicesVal["data-choices-text-disabled-true"] ? new Choices(item, choiceData).disable() : new Choices(item, choiceData);
|
|
});
|
|
|
|
/**
|
|
* flatpickr
|
|
*/
|
|
var flatpickrExamples = document.querySelectorAll("[data-provider]");
|
|
Array.from(flatpickrExamples).forEach(function (item) {
|
|
if (item.getAttribute("data-provider") == "flatpickr") {
|
|
var dateData = {};
|
|
var isFlatpickerVal = item.attributes;
|
|
dateData.disableMobile = "true";
|
|
if (isFlatpickerVal["data-date-format"])
|
|
dateData.dateFormat = isFlatpickerVal["data-date-format"].value.toString();
|
|
if (isFlatpickerVal["data-enable-time"]) {
|
|
(dateData.enableTime = true),
|
|
(dateData.dateFormat = isFlatpickerVal["data-date-format"].value.toString() + " H:i");
|
|
}
|
|
if (isFlatpickerVal["data-altFormat"]) {
|
|
(dateData.altInput = true),
|
|
(dateData.altFormat = isFlatpickerVal["data-altFormat"].value.toString());
|
|
}
|
|
if (isFlatpickerVal["data-minDate"]) {
|
|
dateData.minDate = isFlatpickerVal["data-minDate"].value.toString();
|
|
dateData.dateFormat = isFlatpickerVal["data-date-format"].value.toString();
|
|
}
|
|
if (isFlatpickerVal["data-maxDate"]) {
|
|
dateData.maxDate = isFlatpickerVal["data-maxDate"].value.toString();
|
|
dateData.dateFormat = isFlatpickerVal["data-date-format"].value.toString();
|
|
}
|
|
if (isFlatpickerVal["data-deafult-date"]) {
|
|
dateData.defaultDate = isFlatpickerVal["data-deafult-date"].value.toString();
|
|
dateData.dateFormat = isFlatpickerVal["data-date-format"].value.toString();
|
|
}
|
|
if (isFlatpickerVal["data-multiple-date"]) {
|
|
dateData.mode = "multiple";
|
|
dateData.dateFormat = isFlatpickerVal["data-date-format"].value.toString();
|
|
}
|
|
if (isFlatpickerVal["data-range-date"]) {
|
|
dateData.mode = "range";
|
|
dateData.dateFormat = isFlatpickerVal["data-date-format"].value.toString();
|
|
}
|
|
if (isFlatpickerVal["data-inline-date"]) {
|
|
(dateData.inline = true),
|
|
(dateData.defaultDate = isFlatpickerVal["data-deafult-date"].value.toString());
|
|
dateData.dateFormat = isFlatpickerVal["data-date-format"].value.toString();
|
|
}
|
|
if (isFlatpickerVal["data-disable-date"]) {
|
|
var dates = [];
|
|
dates.push(isFlatpickerVal["data-disable-date"].value);
|
|
dateData.disable = dates.toString().split(",");
|
|
}
|
|
if (isFlatpickerVal["data-week-number"]) {
|
|
var dates = [];
|
|
dates.push(isFlatpickerVal["data-week-number"].value);
|
|
dateData.weekNumbers = true
|
|
}
|
|
flatpickr(item, dateData);
|
|
} else if (item.getAttribute("data-provider") == "timepickr") {
|
|
var timeData = {};
|
|
var isTimepickerVal = item.attributes;
|
|
if (isTimepickerVal["data-time-basic"]) {
|
|
(timeData.enableTime = true),
|
|
(timeData.noCalendar = true),
|
|
(timeData.dateFormat = "H:i");
|
|
}
|
|
if (isTimepickerVal["data-time-hrs"]) {
|
|
(timeData.enableTime = true),
|
|
(timeData.noCalendar = true),
|
|
(timeData.dateFormat = "H:i"),
|
|
(timeData.time_24hr = true);
|
|
}
|
|
if (isTimepickerVal["data-min-time"]) {
|
|
(timeData.enableTime = true),
|
|
(timeData.noCalendar = true),
|
|
(timeData.dateFormat = "H:i"),
|
|
(timeData.minTime = isTimepickerVal["data-min-time"].value.toString());
|
|
}
|
|
if (isTimepickerVal["data-max-time"]) {
|
|
(timeData.enableTime = true),
|
|
(timeData.noCalendar = true),
|
|
(timeData.dateFormat = "H:i"),
|
|
(timeData.minTime = isTimepickerVal["data-max-time"].value.toString());
|
|
}
|
|
if (isTimepickerVal["data-default-time"]) {
|
|
(timeData.enableTime = true),
|
|
(timeData.noCalendar = true),
|
|
(timeData.dateFormat = "H:i"),
|
|
(timeData.defaultDate = isTimepickerVal["data-default-time"].value.toString());
|
|
}
|
|
if (isTimepickerVal["data-time-inline"]) {
|
|
(timeData.enableTime = true),
|
|
(timeData.noCalendar = true),
|
|
(timeData.defaultDate = isTimepickerVal["data-time-inline"].value.toString());
|
|
timeData.inline = true;
|
|
}
|
|
flatpickr(item, timeData);
|
|
}
|
|
});
|
|
|
|
// Dropdown
|
|
Array.from(document.querySelectorAll('.dropdown-menu a[data-bs-toggle="tab"]')).forEach(function (element) {
|
|
element.addEventListener("click", function (e) {
|
|
e.stopPropagation();
|
|
bootstrap.Tab.getInstance(e.target).show();
|
|
});
|
|
});
|
|
}
|
|
|
|
// on click collapse menu
|
|
function isCollapseMenu() {
|
|
/**
|
|
* Sidebar menu collapse
|
|
*/
|
|
if (document.querySelectorAll(".navbar-nav .collapse")) {
|
|
var collapses = document.querySelectorAll(".navbar-nav .collapse");
|
|
Array.from(collapses).forEach(function (collapse) {
|
|
// Init collapses
|
|
var collapseInstance = new bootstrap.Collapse(collapse, {
|
|
toggle: false,
|
|
});
|
|
// Hide sibling collapses on `show.bs.collapse`
|
|
collapse.addEventListener("show.bs.collapse", function (e) {
|
|
e.stopPropagation();
|
|
var closestCollapse = collapse.parentElement.closest(".collapse");
|
|
if (closestCollapse) {
|
|
var siblingCollapses = closestCollapse.querySelectorAll(".collapse");
|
|
Array.from(siblingCollapses).forEach(function (siblingCollapse) {
|
|
var siblingCollapseInstance = bootstrap.Collapse.getInstance(siblingCollapse);
|
|
if (siblingCollapseInstance === collapseInstance) {
|
|
return;
|
|
}
|
|
siblingCollapseInstance.hide();
|
|
});
|
|
} else {
|
|
var getSiblings = function (elem) {
|
|
// Setup siblings array and get the first sibling
|
|
var siblings = [];
|
|
var sibling = elem.parentNode.firstChild;
|
|
// Loop through each sibling and push to the array
|
|
while (sibling) {
|
|
if (sibling.nodeType === 1 && sibling !== elem) {
|
|
siblings.push(sibling);
|
|
}
|
|
sibling = sibling.nextSibling;
|
|
}
|
|
return siblings;
|
|
};
|
|
var siblings = getSiblings(collapse.parentElement);
|
|
Array.from(siblings).forEach(function (item) {
|
|
if (item.childNodes.length > 2)
|
|
item.firstElementChild.setAttribute("aria-expanded", "false");
|
|
var ids = item.querySelectorAll("*[id]");
|
|
Array.from(ids).forEach(function (item1) {
|
|
item1.classList.remove("show");
|
|
if (item1.childNodes.length > 2) {
|
|
var val = item1.querySelectorAll("ul li a");
|
|
Array.from(val).forEach(function (subitem) {
|
|
if (subitem.hasAttribute("aria-expanded"))
|
|
subitem.setAttribute("aria-expanded", "false");
|
|
});
|
|
}
|
|
});
|
|
});
|
|
}
|
|
});
|
|
|
|
// Hide nested collapses on `hide.bs.collapse`
|
|
collapse.addEventListener("hide.bs.collapse", function (e) {
|
|
e.stopPropagation();
|
|
var childCollapses = collapse.querySelectorAll(".collapse");
|
|
Array.from(childCollapses).forEach(function (childCollapse) {
|
|
childCollapseInstance = bootstrap.Collapse.getInstance(childCollapse);
|
|
childCollapseInstance.hide();
|
|
});
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Generate two column menu
|
|
*/
|
|
function twoColumnMenuGenerate() {
|
|
var isTwoColumn = document.documentElement.getAttribute("data-layout");
|
|
var isValues = sessionStorage.getItem("defaultAttribute");
|
|
var defaultValues = JSON.parse(isValues);
|
|
|
|
if (defaultValues && (isTwoColumn == "twocolumn" || defaultValues["data-layout"] == "twocolumn")) {
|
|
if (document.querySelector(".navbar-menu")) {
|
|
document.querySelector(".navbar-menu").innerHTML = navbarMenuHTML;
|
|
}
|
|
var ul = document.createElement("ul");
|
|
ul.innerHTML = '<a href="#" class="logo"><img src="build/images/logo-sm.png" alt="" height="22"></a>';
|
|
Array.from(document.getElementById("navbar-nav").querySelectorAll(".menu-link")).forEach(function (item) {
|
|
ul.className = "twocolumn-iconview";
|
|
var li = document.createElement("li");
|
|
var a = item;
|
|
a.querySelectorAll("span").forEach(function (element) {
|
|
element.classList.add("d-none");
|
|
});
|
|
|
|
if (item.parentElement.classList.contains("twocolumn-item-show")) {
|
|
item.classList.add("active");
|
|
}
|
|
li.appendChild(a);
|
|
ul.appendChild(li);
|
|
|
|
a.classList.contains("nav-link") ? a.classList.replace("nav-link", "nav-icon") : "";
|
|
a.classList.remove("collapsed", "menu-link");
|
|
});
|
|
var currentPath = location.pathname == "/" ? "index" : location.pathname.substring(1);
|
|
currentPath = currentPath.substring(currentPath.lastIndexOf("/") + 1);
|
|
if (currentPath) {
|
|
// navbar-nav
|
|
var a = document.getElementById("navbar-nav").querySelector('[href="' + currentPath + '"]');
|
|
|
|
if (a) {
|
|
var parentCollapseDiv = a.closest(".collapse.menu-dropdown");
|
|
if (parentCollapseDiv) {
|
|
parentCollapseDiv.classList.add("show");
|
|
parentCollapseDiv.parentElement.children[0].classList.add("active");
|
|
parentCollapseDiv.parentElement.children[0].setAttribute("aria-expanded", "true");
|
|
if (parentCollapseDiv.parentElement.closest(".collapse.menu-dropdown")) {
|
|
parentCollapseDiv.parentElement.closest(".collapse").classList.add("show");
|
|
if (parentCollapseDiv.parentElement.closest(".collapse").previousElementSibling)
|
|
parentCollapseDiv.parentElement.closest(".collapse").previousElementSibling.classList.add("active");
|
|
if (parentCollapseDiv.parentElement.parentElement.parentElement.parentElement.closest(".collapse.menu-dropdown")) {
|
|
parentCollapseDiv.parentElement.parentElement.parentElement.parentElement.closest(".collapse").classList.add("show");
|
|
if (parentCollapseDiv.parentElement.parentElement.parentElement.parentElement.closest(".collapse").previousElementSibling) {
|
|
parentCollapseDiv.parentElement.parentElement.parentElement.parentElement.closest(".collapse").previousElementSibling.classList.add("active");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// add all sidebar menu icons
|
|
document.getElementById("two-column-menu").innerHTML = ul.outerHTML;
|
|
|
|
// show submenu on sidebar menu click
|
|
Array.from(document.querySelector("#two-column-menu ul").querySelectorAll("li a")).forEach(function (element) {
|
|
var currentPath = location.pathname == "/" ? "index" : location.pathname.substring(1);
|
|
currentPath = currentPath.substring(currentPath.lastIndexOf("/") + 1);
|
|
element.addEventListener("click", function (e) {
|
|
if (!(currentPath == "/" + element.getAttribute("href") && !element.getAttribute("data-bs-toggle")))
|
|
document.body.classList.contains("twocolumn-panel") ? document.body.classList.remove("twocolumn-panel") : "";
|
|
document.getElementById("navbar-nav").classList.remove("twocolumn-nav-hide");
|
|
document.querySelector(".hamburger-icon").classList.remove("open");
|
|
if ((e.target && e.target.matches("a.nav-icon")) || (e.target && e.target.matches("i"))) {
|
|
if (document.querySelector("#two-column-menu ul .nav-icon.active") !== null)
|
|
document.querySelector("#two-column-menu ul .nav-icon.active").classList.remove("active");
|
|
e.target.matches("i") ? e.target.closest("a").classList.add("active") : e.target.classList.add("active");
|
|
|
|
var twoColumnItem = document.getElementsByClassName("twocolumn-item-show");
|
|
|
|
twoColumnItem.length > 0 ? twoColumnItem[0].classList.remove("twocolumn-item-show") : "";
|
|
|
|
var currentMenu = e.target.matches("i") ? e.target.closest("a") : e.target;
|
|
var childMenusId = currentMenu.getAttribute("href").slice(1);
|
|
if (document.getElementById(childMenusId))
|
|
document.getElementById(childMenusId).parentElement.classList.add("twocolumn-item-show");
|
|
}
|
|
});
|
|
|
|
// add active class to the sidebar menu icon who has direct link
|
|
if (currentPath == "/" + element.getAttribute("href") && !element.getAttribute("data-bs-toggle")) {
|
|
element.classList.add("active");
|
|
document.getElementById("navbar-nav").classList.add("twocolumn-nav-hide");
|
|
if (document.querySelector(".hamburger-icon")) {
|
|
document.querySelector(".hamburger-icon").classList.add("open");
|
|
}
|
|
}
|
|
});
|
|
|
|
var currentLayout = document.documentElement.getAttribute("data-layout");
|
|
if (currentLayout !== "horizontal") {
|
|
var simpleBar = new SimpleBar(document.getElementById("navbar-nav"));
|
|
if (simpleBar) simpleBar.getContentElement();
|
|
|
|
var simpleBar1 = new SimpleBar(
|
|
document.getElementsByClassName("twocolumn-iconview")[0]
|
|
);
|
|
if (simpleBar1) simpleBar1.getContentElement();
|
|
}
|
|
}
|
|
}
|
|
|
|
// Search menu dropdown on Topbar
|
|
function isCustomDropdown() {
|
|
//Search bar
|
|
var searchOptions = document.getElementById("search-close-options");
|
|
var dropdown = document.getElementById("search-dropdown");
|
|
var searchInput = document.getElementById("search-options");
|
|
if (searchInput) {
|
|
searchInput.addEventListener("focus", function () {
|
|
var inputLength = searchInput.value.length;
|
|
if (inputLength > 0) {
|
|
dropdown.classList.add("show");
|
|
searchOptions.classList.remove("d-none");
|
|
} else {
|
|
dropdown.classList.remove("show");
|
|
searchOptions.classList.add("d-none");
|
|
}
|
|
});
|
|
|
|
searchInput.addEventListener("keyup", function (event) {
|
|
var inputLength = searchInput.value.length;
|
|
if (inputLength > 0) {
|
|
dropdown.classList.add("show");
|
|
searchOptions.classList.remove("d-none");
|
|
|
|
var inputVal = searchInput.value.toLowerCase();
|
|
|
|
var notifyItem = document.getElementsByClassName("notify-item");
|
|
|
|
Array.from(notifyItem).forEach(function (element) {
|
|
var notifiTxt = ''
|
|
if (element.querySelector("h6")) {
|
|
var spantext = element.getElementsByTagName("span")[0].innerText.toLowerCase()
|
|
var name = element.querySelector("h6").innerText.toLowerCase()
|
|
if (name.includes(inputVal)) {
|
|
notifiTxt = name
|
|
} else {
|
|
notifiTxt = spantext
|
|
}
|
|
} else if (element.getElementsByTagName("span")) {
|
|
notifiTxt = element.getElementsByTagName("span")[0].innerText.toLowerCase()
|
|
}
|
|
|
|
if (notifiTxt)
|
|
element.style.display = notifiTxt.includes(inputVal) ? "block" : "none";
|
|
|
|
});
|
|
} else {
|
|
dropdown.classList.remove("show");
|
|
searchOptions.classList.add("d-none");
|
|
}
|
|
});
|
|
|
|
searchOptions.addEventListener("click", function () {
|
|
searchInput.value = "";
|
|
dropdown.classList.remove("show");
|
|
searchOptions.classList.add("d-none");
|
|
});
|
|
|
|
document.body.addEventListener("click", function (e) {
|
|
if (e.target.getAttribute("id") !== "search-options") {
|
|
dropdown.classList.remove("show");
|
|
searchOptions.classList.add("d-none");
|
|
}
|
|
});
|
|
}
|
|
}
|
|
// search menu dropdown on topbar
|
|
function isCustomDropdownResponsive() {
|
|
//Search bar
|
|
var searchOptions = document.getElementById("search-close-options");
|
|
var dropdownReponsive = document.getElementById("search-dropdown-reponsive");
|
|
var searchInputReponsive = document.getElementById("search-options-reponsive");
|
|
|
|
if (searchOptions && dropdownReponsive && searchInputReponsive) {
|
|
searchInputReponsive.addEventListener("focus", function () {
|
|
var inputLength = searchInputReponsive.value.length;
|
|
if (inputLength > 0) {
|
|
dropdownReponsive.classList.add("show");
|
|
searchOptions.classList.remove("d-none");
|
|
} else {
|
|
dropdownReponsive.classList.remove("show");
|
|
searchOptions.classList.add("d-none");
|
|
}
|
|
});
|
|
|
|
searchInputReponsive.addEventListener("keyup", function () {
|
|
var inputLength = searchInputReponsive.value.length;
|
|
if (inputLength > 0) {
|
|
dropdownReponsive.classList.add("show");
|
|
searchOptions.classList.remove("d-none");
|
|
} else {
|
|
dropdownReponsive.classList.remove("show");
|
|
searchOptions.classList.add("d-none");
|
|
}
|
|
});
|
|
|
|
searchOptions.addEventListener("click", function () {
|
|
searchInputReponsive.value = "";
|
|
dropdownReponsive.classList.remove("show");
|
|
searchOptions.classList.add("d-none");
|
|
});
|
|
|
|
document.body.addEventListener("click", function (e) {
|
|
if (e.target.getAttribute("id") !== "search-options") {
|
|
dropdownReponsive.classList.remove("show");
|
|
searchOptions.classList.add("d-none");
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function elementInViewport(el) {
|
|
if (el) {
|
|
var top = el.offsetTop;
|
|
var left = el.offsetLeft;
|
|
var width = el.offsetWidth;
|
|
var height = el.offsetHeight;
|
|
|
|
if (el.offsetParent) {
|
|
while (el.offsetParent) {
|
|
el = el.offsetParent;
|
|
top += el.offsetTop;
|
|
left += el.offsetLeft;
|
|
}
|
|
}
|
|
return (
|
|
top >= window.pageYOffset &&
|
|
left >= window.pageXOffset &&
|
|
top + height <= window.pageYOffset + window.innerHeight &&
|
|
left + width <= window.pageXOffset + window.innerWidth
|
|
);
|
|
}
|
|
}
|
|
|
|
function initLeftMenuCollapse() {
|
|
/**
|
|
* Vertical layout menu scroll add
|
|
*/
|
|
if (document.documentElement.getAttribute("data-layout") == "vertical" || document.documentElement.getAttribute("data-layout") == "semibox") {
|
|
document.getElementById("two-column-menu").innerHTML = "";
|
|
if (document.querySelector(".navbar-menu")) {
|
|
document.querySelector(".navbar-menu").innerHTML = navbarMenuHTML;
|
|
}
|
|
document.getElementById("scrollbar").setAttribute("data-simplebar", "");
|
|
document.getElementById("navbar-nav").setAttribute("data-simplebar", "");
|
|
document.getElementById("scrollbar").classList.add("h-100");
|
|
}
|
|
|
|
/**
|
|
* Two-column layout menu scroll add
|
|
*/
|
|
if (document.documentElement.getAttribute("data-layout") == "twocolumn") {
|
|
document.getElementById("scrollbar").removeAttribute("data-simplebar");
|
|
document.getElementById("scrollbar").classList.remove("h-100");
|
|
}
|
|
|
|
/**
|
|
* Horizontal layout menu
|
|
*/
|
|
if (document.documentElement.getAttribute("data-layout") == "horizontal") {
|
|
updateHorizontalMenus();
|
|
}
|
|
}
|
|
|
|
function isLoadBodyElement() {
|
|
var verticalOverlay = document.getElementsByClassName("vertical-overlay");
|
|
if (verticalOverlay) {
|
|
Array.from(verticalOverlay).forEach(function (element) {
|
|
element.addEventListener("click", function () {
|
|
document.body.classList.remove("vertical-sidebar-enable");
|
|
if (sessionStorage.getItem("data-layout") == "twocolumn")
|
|
document.body.classList.add("twocolumn-panel");
|
|
else
|
|
document.documentElement.setAttribute("data-sidebar-size", sessionStorage.getItem("data-sidebar-size"));
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
function windowResizeHover() {
|
|
feather.replace();
|
|
var windowSize = document.documentElement.clientWidth;
|
|
if (windowSize < 1025 && windowSize > 767) {
|
|
document.body.classList.remove("twocolumn-panel");
|
|
if (sessionStorage.getItem("data-layout") == "twocolumn") {
|
|
document.documentElement.setAttribute("data-layout", "twocolumn");
|
|
if (document.getElementById("customizer-layout03")) {
|
|
document.getElementById("customizer-layout03").click();
|
|
}
|
|
twoColumnMenuGenerate();
|
|
initTwoColumnActiveMenu();
|
|
isCollapseMenu();
|
|
}
|
|
if (sessionStorage.getItem("data-layout") == "vertical") {
|
|
document.documentElement.setAttribute("data-sidebar-size", "sm");
|
|
}
|
|
if (sessionStorage.getItem("data-layout") == "semibox") {
|
|
document.documentElement.setAttribute("data-sidebar-size", "sm");
|
|
}
|
|
if (document.querySelector(".hamburger-icon")) {
|
|
document.querySelector(".hamburger-icon").classList.add("open");
|
|
}
|
|
} else if (windowSize >= 1025) {
|
|
document.body.classList.remove("twocolumn-panel");
|
|
if (sessionStorage.getItem("data-layout") == "twocolumn") {
|
|
document.documentElement.setAttribute("data-layout", "twocolumn");
|
|
if (document.getElementById("customizer-layout03")) {
|
|
document.getElementById("customizer-layout03").click();
|
|
}
|
|
twoColumnMenuGenerate();
|
|
initTwoColumnActiveMenu();
|
|
isCollapseMenu();
|
|
}
|
|
if (sessionStorage.getItem("data-layout") == "vertical") {
|
|
document.documentElement.setAttribute(
|
|
"data-sidebar-size",
|
|
sessionStorage.getItem("data-sidebar-size")
|
|
);
|
|
}
|
|
if (sessionStorage.getItem("data-layout") == "semibox") {
|
|
document.documentElement.setAttribute("data-sidebar-size", sessionStorage.getItem("data-sidebar-size"));
|
|
}
|
|
if (document.querySelector(".hamburger-icon")) {
|
|
document.querySelector(".hamburger-icon").classList.remove("open");
|
|
}
|
|
} else if (windowSize <= 767) {
|
|
document.body.classList.remove("vertical-sidebar-enable");
|
|
document.body.classList.add("twocolumn-panel");
|
|
if (sessionStorage.getItem("data-layout") == "twocolumn") {
|
|
document.documentElement.setAttribute("data-layout", "vertical");
|
|
hideShowLayoutOptions("vertical");
|
|
isCollapseMenu();
|
|
}
|
|
if (sessionStorage.getItem("data-layout") != "horizontal") {
|
|
document.documentElement.setAttribute("data-sidebar-size", "lg");
|
|
}
|
|
if (document.querySelector(".hamburger-icon")) {
|
|
document.querySelector(".hamburger-icon").classList.add("open");
|
|
}
|
|
}
|
|
|
|
var isElement = document.querySelectorAll("#navbar-nav > li.nav-item");
|
|
Array.from(isElement).forEach(function (item) {
|
|
item.addEventListener("click", menuItem.bind(this), false);
|
|
item.addEventListener("mouseover", menuItem.bind(this), false);
|
|
});
|
|
}
|
|
|
|
function menuItem(e) {
|
|
if (e.target && e.target.matches("a.nav-link span")) {
|
|
if (elementInViewport(e.target.parentElement.nextElementSibling) == false) {
|
|
e.target.parentElement.nextElementSibling.classList.add("dropdown-custom-right");
|
|
e.target.parentElement.parentElement.parentElement.parentElement.classList.add("dropdown-custom-right");
|
|
var eleChild = e.target.parentElement.nextElementSibling;
|
|
Array.from(eleChild.querySelectorAll(".menu-dropdown")).forEach(function (item) {
|
|
item.classList.add("dropdown-custom-right");
|
|
});
|
|
} else if (elementInViewport(e.target.parentElement.nextElementSibling) == true) {
|
|
if (window.innerWidth >= 1848) {
|
|
var elements = document.getElementsByClassName("dropdown-custom-right");
|
|
while (elements.length > 0) {
|
|
elements[0].classList.remove("dropdown-custom-right");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (e.target && e.target.matches("a.nav-link")) {
|
|
if (elementInViewport(e.target.nextElementSibling) == false) {
|
|
e.target.nextElementSibling.classList.add("dropdown-custom-right");
|
|
e.target.parentElement.parentElement.parentElement.classList.add("dropdown-custom-right");
|
|
var eleChild = e.target.nextElementSibling;
|
|
Array.from(eleChild.querySelectorAll(".menu-dropdown")).forEach(function (item) {
|
|
item.classList.add("dropdown-custom-right");
|
|
});
|
|
} else if (elementInViewport(e.target.nextElementSibling) == true) {
|
|
if (window.innerWidth >= 1848) {
|
|
var elements = document.getElementsByClassName("dropdown-custom-right");
|
|
while (elements.length > 0) {
|
|
elements[0].classList.remove("dropdown-custom-right");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function toggleHamburgerMenu() {
|
|
var windowSize = document.documentElement.clientWidth;
|
|
|
|
if (windowSize > 767)
|
|
document.querySelector(".hamburger-icon").classList.toggle("open");
|
|
|
|
//For collapse horizontal menu
|
|
if (document.documentElement.getAttribute("data-layout") === "horizontal") {
|
|
document.body.classList.contains("menu") ? document.body.classList.remove("menu") : document.body.classList.add("menu");
|
|
}
|
|
|
|
//For collapse vertical menu
|
|
if (document.documentElement.getAttribute("data-layout") === "vertical") {
|
|
if (windowSize <= 1025 && windowSize > 767) {
|
|
document.body.classList.remove("vertical-sidebar-enable");
|
|
document.documentElement.getAttribute("data-sidebar-size") == "sm" ?
|
|
document.documentElement.setAttribute("data-sidebar-size", "") :
|
|
document.documentElement.setAttribute("data-sidebar-size", "sm");
|
|
} else if (windowSize > 1025) {
|
|
document.body.classList.remove("vertical-sidebar-enable");
|
|
document.documentElement.getAttribute("data-sidebar-size") == "lg" ?
|
|
document.documentElement.setAttribute("data-sidebar-size", "sm") :
|
|
document.documentElement.setAttribute("data-sidebar-size", "lg");
|
|
} else if (windowSize <= 767) {
|
|
document.body.classList.add("vertical-sidebar-enable");
|
|
document.documentElement.setAttribute("data-sidebar-size", "lg");
|
|
}
|
|
}
|
|
|
|
// semibox menu
|
|
if (document.documentElement.getAttribute("data-layout") === "semibox") {
|
|
if (windowSize > 767) {
|
|
// (document.querySelector(".hamburger-icon").classList.contains("open")) ? document.documentElement.setAttribute('data-sidebar-visibility', "show"): '';
|
|
if(document.documentElement.getAttribute('data-sidebar-visibility') == "show") {
|
|
document.documentElement.getAttribute("data-sidebar-size") == "lg" ?
|
|
document.documentElement.setAttribute("data-sidebar-size", "sm") :
|
|
document.documentElement.setAttribute("data-sidebar-size", "lg");
|
|
} else {
|
|
document.getElementById("sidebar-visibility-show").click();
|
|
document.documentElement.setAttribute("data-sidebar-size", document.documentElement.getAttribute("data-sidebar-size"));
|
|
}
|
|
} else if (windowSize <= 767) {
|
|
document.body.classList.add("vertical-sidebar-enable");
|
|
document.documentElement.setAttribute("data-sidebar-size", "lg");
|
|
}
|
|
}
|
|
|
|
//Two column menu
|
|
if (document.documentElement.getAttribute("data-layout") == "twocolumn") {
|
|
document.body.classList.contains("twocolumn-panel") ?
|
|
document.body.classList.remove("twocolumn-panel") :
|
|
document.body.classList.add("twocolumn-panel");
|
|
}
|
|
}
|
|
|
|
function windowLoadContent() {
|
|
// Demo show code
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
var checkbox = document.getElementsByClassName("code-switcher");
|
|
Array.from(checkbox).forEach(function (check) {
|
|
check.addEventListener("change", function () {
|
|
var card = check.closest(".card");
|
|
var preview = card.querySelector(".live-preview");
|
|
var code = card.querySelector(".code-view");
|
|
|
|
if (check.checked) {
|
|
preview.classList.add("d-none");
|
|
code.classList.remove("d-none");
|
|
} else {
|
|
preview.classList.remove("d-none");
|
|
code.classList.add("d-none");
|
|
}
|
|
});
|
|
});
|
|
feather.replace();
|
|
});
|
|
|
|
window.addEventListener("resize", windowResizeHover);
|
|
windowResizeHover();
|
|
|
|
Waves.init();
|
|
|
|
document.addEventListener("scroll", function () {
|
|
windowScroll();
|
|
});
|
|
|
|
window.addEventListener("load", function () {
|
|
var isTwoColumn = document.documentElement.getAttribute("data-layout");
|
|
if (isTwoColumn == "twocolumn") {
|
|
initTwoColumnActiveMenu();
|
|
} else {
|
|
initActiveMenu();
|
|
}
|
|
isLoadBodyElement();
|
|
addEventListenerOnSmHoverMenu();
|
|
});
|
|
if (document.getElementById("topnav-hamburger-icon")) {
|
|
document.getElementById("topnav-hamburger-icon").addEventListener("click", toggleHamburgerMenu);
|
|
}
|
|
var isValues = sessionStorage.getItem("defaultAttribute");
|
|
var defaultValues = JSON.parse(isValues);
|
|
var windowSize = document.documentElement.clientWidth;
|
|
|
|
if (defaultValues["data-layout"] == "twocolumn" && windowSize < 767) {
|
|
Array.from(document.getElementById("two-column-menu").querySelectorAll("li")).forEach(function (item) {
|
|
item.addEventListener("click", function (e) {
|
|
document.body.classList.remove("twocolumn-panel");
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
// page topbar class added
|
|
function windowScroll() {
|
|
var pageTopbar = document.getElementById("page-topbar");
|
|
if (pageTopbar) {
|
|
document.body.scrollTop >= 50 || document.documentElement.scrollTop >= 50 ? pageTopbar.classList.add("topbar-shadow") : pageTopbar.classList.remove("topbar-shadow");
|
|
}
|
|
}
|
|
|
|
// Two-column menu activation
|
|
function initTwoColumnActiveMenu() {
|
|
feather.replace();
|
|
// two column sidebar active js
|
|
var currentPath = location.pathname == "/" ? "index" : location.pathname.substring(1);
|
|
currentPath = currentPath.substring(currentPath.lastIndexOf("/") + 1);
|
|
if (currentPath) {
|
|
if (document.body.className == "twocolumn-panel") {
|
|
document.getElementById("two-column-menu").querySelector('[href="' + currentPath + '"]').classList.add("active");
|
|
}
|
|
// navbar-nav
|
|
var a = document.getElementById("navbar-nav").querySelector('[href="' + currentPath + '"]');
|
|
if (a) {
|
|
a.classList.add("active");
|
|
var parentCollapseDiv = a.closest(".collapse.menu-dropdown");
|
|
if (parentCollapseDiv && parentCollapseDiv.parentElement.closest(".collapse.menu-dropdown")) {
|
|
parentCollapseDiv.classList.add("show");
|
|
parentCollapseDiv.parentElement.children[0].classList.add("active");
|
|
parentCollapseDiv.parentElement.closest(".collapse.menu-dropdown").parentElement.classList.add("twocolumn-item-show");
|
|
if (parentCollapseDiv.parentElement.parentElement.parentElement.parentElement.closest(".collapse.menu-dropdown")) {
|
|
var menuIdSub = parentCollapseDiv.parentElement.parentElement.parentElement.parentElement.closest(".collapse.menu-dropdown").getAttribute("id");
|
|
parentCollapseDiv.parentElement.parentElement.parentElement.parentElement.closest(".collapse.menu-dropdown").parentElement.classList.add("twocolumn-item-show");
|
|
parentCollapseDiv.parentElement.closest(".collapse.menu-dropdown").parentElement.classList.remove("twocolumn-item-show");
|
|
if (document.getElementById("two-column-menu").querySelector('[href="#' + menuIdSub + '"]'))
|
|
document.getElementById("two-column-menu").querySelector('[href="#' + menuIdSub + '"]').classList.add("active");
|
|
}
|
|
var menuId = parentCollapseDiv.parentElement.closest(".collapse.menu-dropdown").getAttribute("id");
|
|
if (document.getElementById("two-column-menu").querySelector('[href="#' + menuId + '"]'))
|
|
document.getElementById("two-column-menu").querySelector('[href="#' + menuId + '"]').classList.add("active");
|
|
} else {
|
|
a.closest(".collapse.menu-dropdown").parentElement.classList.add("twocolumn-item-show");
|
|
var menuId = parentCollapseDiv.getAttribute("id");
|
|
if (document.getElementById("two-column-menu").querySelector('[href="#' + menuId + '"]'))
|
|
document.getElementById("two-column-menu").querySelector('[href="#' + menuId + '"]').classList.add("active");
|
|
}
|
|
} else {
|
|
document.body.classList.add("twocolumn-panel");
|
|
}
|
|
}
|
|
}
|
|
|
|
// two-column sidebar active js
|
|
function initActiveMenu() {
|
|
var currentPath = location.pathname == "/" ? "index" : location.pathname.substring(1);
|
|
currentPath = currentPath.substring(currentPath.lastIndexOf("/") + 1);
|
|
if (currentPath) {
|
|
// navbar-nav
|
|
var a = document.getElementById("navbar-nav").querySelector('[href="' + currentPath + '"]');
|
|
if (a) {
|
|
a.classList.add("active");
|
|
var parentCollapseDiv = a.closest(".collapse.menu-dropdown");
|
|
if (parentCollapseDiv) {
|
|
parentCollapseDiv.classList.add("show");
|
|
parentCollapseDiv.parentElement.children[0].classList.add("active");
|
|
parentCollapseDiv.parentElement.children[0].setAttribute("aria-expanded", "true");
|
|
if (parentCollapseDiv.parentElement.closest(".collapse.menu-dropdown")) {
|
|
parentCollapseDiv.parentElement.closest(".collapse").classList.add("show");
|
|
if (parentCollapseDiv.parentElement.closest(".collapse").previousElementSibling)
|
|
parentCollapseDiv.parentElement.closest(".collapse").previousElementSibling.classList.add("active");
|
|
|
|
if (parentCollapseDiv.parentElement.parentElement.parentElement.parentElement.closest(".collapse.menu-dropdown")) {
|
|
parentCollapseDiv.parentElement.parentElement.parentElement.parentElement.closest(".collapse").classList.add("show");
|
|
if (parentCollapseDiv.parentElement.parentElement.parentElement.parentElement.closest(".collapse").previousElementSibling) {
|
|
|
|
parentCollapseDiv.parentElement.parentElement.parentElement.parentElement.closest(".collapse").previousElementSibling.classList.add("active");
|
|
if ((document.documentElement.getAttribute("data-layout") == "horizontal") && parentCollapseDiv.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.closest(".collapse")) {
|
|
parentCollapseDiv.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.closest(".collapse").previousElementSibling.classList.add("active")
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function elementInViewport(el) {
|
|
if (el) {
|
|
var top = el.offsetTop;
|
|
var left = el.offsetLeft;
|
|
var width = el.offsetWidth;
|
|
var height = el.offsetHeight;
|
|
|
|
if (el.offsetParent) {
|
|
while (el.offsetParent) {
|
|
el = el.offsetParent;
|
|
top += el.offsetTop;
|
|
left += el.offsetLeft;
|
|
}
|
|
}
|
|
return (
|
|
top >= window.pageYOffset &&
|
|
left >= window.pageXOffset &&
|
|
top + height <= window.pageYOffset + window.innerHeight &&
|
|
left + width <= window.pageXOffset + window.innerWidth
|
|
);
|
|
}
|
|
}
|
|
|
|
// notification cart dropdown
|
|
function initTopbarComponents() {
|
|
if (document.getElementsByClassName("dropdown-item-cart")) {
|
|
var dropdownItemCart = document.querySelectorAll(".dropdown-item-cart").length;
|
|
Array.from(document.querySelectorAll("#page-topbar .dropdown-menu-cart .remove-item-btn")).forEach(function (item) {
|
|
item.addEventListener("click", function (e) {
|
|
dropdownItemCart--;
|
|
this.closest(".dropdown-item-cart").remove();
|
|
Array.from(document.getElementsByClassName("cartitem-badge")).forEach(function (e) {
|
|
e.innerHTML = dropdownItemCart;
|
|
});
|
|
updateCartPrice();
|
|
if (document.getElementById("empty-cart")) {
|
|
document.getElementById("empty-cart").style.display = dropdownItemCart == 0 ? "block" : "none";
|
|
}
|
|
if (document.getElementById("checkout-elem")) {
|
|
document.getElementById("checkout-elem").style.display = dropdownItemCart == 0 ? "none" : "block";
|
|
}
|
|
});
|
|
});
|
|
Array.from(document.getElementsByClassName("cartitem-badge")).forEach(function (e) {
|
|
e.innerHTML = dropdownItemCart;
|
|
});
|
|
if (document.getElementById("empty-cart")) {
|
|
document.getElementById("empty-cart").style.display = "none";
|
|
}
|
|
if (document.getElementById("checkout-elem")) {
|
|
document.getElementById("checkout-elem").style.display = "block";
|
|
}
|
|
function updateCartPrice() {
|
|
var currencySign = "$";
|
|
var subtotal = 0;
|
|
Array.from(document.getElementsByClassName("cart-item-price")).forEach(function (e) {
|
|
subtotal += parseFloat(e.innerHTML);
|
|
});
|
|
if (document.getElementById("cart-item-total")) {
|
|
document.getElementById("cart-item-total").innerHTML = currencySign + subtotal.toFixed(2);
|
|
}
|
|
}
|
|
updateCartPrice();
|
|
}
|
|
|
|
// notification messages
|
|
if (document.getElementsByClassName("notification-check")) {
|
|
function emptyNotification() {
|
|
Array.from(document.querySelectorAll("#notificationItemsTabContent .tab-pane")).forEach(function (elem) {
|
|
if (elem.querySelectorAll(".notification-item").length > 0) {
|
|
if (elem.querySelector(".view-all")) {
|
|
elem.querySelector(".view-all").style.display = "block";
|
|
}
|
|
} else {
|
|
if (elem.querySelector(".view-all")) {
|
|
elem.querySelector(".view-all").style.display = "none";
|
|
}
|
|
var emptyNotificationElem = elem.querySelector(".empty-notification-elem")
|
|
if (!emptyNotificationElem) {
|
|
elem.innerHTML += '<div class="empty-notification-elem">\
|
|
<div class="w-25 w-sm-50 pt-3 mx-auto">\
|
|
<img src="build/images/svg/bell.svg" class="img-fluid" alt="user-pic">\
|
|
</div>\
|
|
<div class="text-center pb-5 mt-2">\
|
|
<h6 class="fs-18 fw-semibold lh-base">Hey! You have no any notifications </h6>\
|
|
</div>\
|
|
</div>'
|
|
}
|
|
}
|
|
});
|
|
}
|
|
emptyNotification();
|
|
|
|
|
|
Array.from(document.querySelectorAll(".notification-check input")).forEach(function (element) {
|
|
element.addEventListener("change", function (el) {
|
|
el.target.closest(".notification-item").classList.toggle("active");
|
|
|
|
var checkedCount = document.querySelectorAll('.notification-check input:checked').length;
|
|
|
|
if (el.target.closest(".notification-item").classList.contains("active")) {
|
|
(checkedCount > 0) ? document.getElementById("notification-actions").style.display = 'block' : document.getElementById("notification-actions").style.display = 'none';
|
|
} else {
|
|
(checkedCount > 0) ? document.getElementById("notification-actions").style.display = 'block' : document.getElementById("notification-actions").style.display = 'none';
|
|
}
|
|
document.getElementById("select-content").innerHTML = checkedCount
|
|
});
|
|
|
|
var notificationDropdown = document.getElementById('notificationDropdown')
|
|
notificationDropdown.addEventListener('hide.bs.dropdown', function (event) {
|
|
element.checked = false;
|
|
document.querySelectorAll('.notification-item').forEach(function (item) {
|
|
item.classList.remove("active");
|
|
})
|
|
document.getElementById('notification-actions').style.display = '';
|
|
});
|
|
});
|
|
|
|
var removeItem = document.getElementById('removeNotificationModal');
|
|
removeItem.addEventListener('show.bs.modal', function (event) {
|
|
document.getElementById("delete-notification").addEventListener("click", function () {
|
|
Array.from(document.querySelectorAll(".notification-item")).forEach(function (element) {
|
|
if (element.classList.contains("active")) {
|
|
element.remove();
|
|
}
|
|
});
|
|
emptyNotification();
|
|
|
|
document.getElementById("NotificationModalbtn-close").click();
|
|
})
|
|
})
|
|
}
|
|
}
|
|
|
|
function initComponents() {
|
|
// tooltip
|
|
var tooltipTriggerList = [].slice.call(
|
|
document.querySelectorAll('[data-bs-toggle="tooltip"]')
|
|
);
|
|
tooltipTriggerList.map(function (tooltipTriggerEl) {
|
|
return new bootstrap.Tooltip(tooltipTriggerEl);
|
|
});
|
|
|
|
// popover
|
|
var popoverTriggerList = [].slice.call(
|
|
document.querySelectorAll('[data-bs-toggle="popover"]')
|
|
);
|
|
popoverTriggerList.map(function (popoverTriggerEl) {
|
|
return new bootstrap.Popover(popoverTriggerEl);
|
|
});
|
|
}
|
|
|
|
// Counter Number
|
|
function counter() {
|
|
var counter = document.querySelectorAll(".counter-value");
|
|
var speed = 250; // The lower the slower
|
|
counter &&
|
|
Array.from(counter).forEach(function (counter_value) {
|
|
function updateCount() {
|
|
var target = +counter_value.getAttribute("data-target");
|
|
var count = +counter_value.innerText;
|
|
var inc = target / speed;
|
|
if (inc < 1) {
|
|
inc = 1;
|
|
}
|
|
// Check if target is reached
|
|
if (count < target) {
|
|
// Add inc to count and output in counter_value
|
|
counter_value.innerText = (count + inc).toFixed(0);
|
|
// Call function every ms
|
|
setTimeout(updateCount, 1);
|
|
} else {
|
|
counter_value.innerText = numberWithCommas(target);
|
|
}
|
|
numberWithCommas(counter_value.innerText);
|
|
}
|
|
updateCount();
|
|
});
|
|
|
|
function numberWithCommas(x) {
|
|
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
|
}
|
|
}
|
|
|
|
function updateHorizontalMenus() {
|
|
document.getElementById("two-column-menu").innerHTML = "";
|
|
if (document.querySelector(".navbar-menu")) {
|
|
document.querySelector(".navbar-menu").innerHTML = navbarMenuHTML;
|
|
}
|
|
document.getElementById("scrollbar").removeAttribute("data-simplebar");
|
|
document.getElementById("navbar-nav").removeAttribute("data-simplebar");
|
|
document.getElementById("scrollbar").classList.remove("h-100");
|
|
|
|
var splitMenu = horizontalMenuSplit;
|
|
var extraMenuName = "More";
|
|
var menuData = document.querySelectorAll("ul.navbar-nav > li.nav-item");
|
|
var newMenus = "";
|
|
var splitItem = "";
|
|
|
|
Array.from(menuData).forEach(function (item, index) {
|
|
if (index + 1 === splitMenu) {
|
|
splitItem = item;
|
|
}
|
|
if (index + 1 > splitMenu) {
|
|
newMenus += item.outerHTML;
|
|
item.remove();
|
|
}
|
|
|
|
if (index + 1 === menuData.length) {
|
|
if (splitItem.insertAdjacentHTML) {
|
|
splitItem.insertAdjacentHTML(
|
|
"afterend",
|
|
'<li class="nav-item">\
|
|
<a class="nav-link" href="#sidebarMore" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarMore">\
|
|
<i class="ri-briefcase-2-line"></i> <span data-key="t-more">' + extraMenuName + '</span>\
|
|
</a>\
|
|
<div class="collapse menu-dropdown" id="sidebarMore"><ul class="nav nav-sm flex-column">' + newMenus + "</ul></div>\
|
|
</li>");
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function hideShowLayoutOptions(dataLayout) {
|
|
if (dataLayout == "vertical") {
|
|
document.getElementById("two-column-menu").innerHTML = "";
|
|
if (document.querySelector(".navbar-menu")) {
|
|
document.querySelector(".navbar-menu").innerHTML = navbarMenuHTML;
|
|
}
|
|
if (document.getElementById("theme-settings-offcanvas")) {
|
|
document.getElementById("sidebar-size").style.display = "block";
|
|
document.getElementById("sidebar-view").style.display = "block";
|
|
document.getElementById("sidebar-color").style.display = "block";
|
|
if (document.getElementById("sidebar-img")) {
|
|
document.getElementById("sidebar-img").style.display = "block";
|
|
}
|
|
document.getElementById("layout-position").style.display = "block";
|
|
document.getElementById("layout-width").style.display = "block";
|
|
document.getElementById("sidebar-visibility").style.display = "none";
|
|
}
|
|
initLeftMenuCollapse();
|
|
initActiveMenu();
|
|
addEventListenerOnSmHoverMenu();
|
|
initMenuItemScroll();
|
|
} else if (dataLayout == "horizontal") {
|
|
updateHorizontalMenus();
|
|
if (document.getElementById("theme-settings-offcanvas")) {
|
|
document.getElementById("sidebar-size").style.display = "none";
|
|
document.getElementById("sidebar-view").style.display = "none";
|
|
document.getElementById("sidebar-color").style.display = "none";
|
|
if (document.getElementById("sidebar-img")) {
|
|
document.getElementById("sidebar-img").style.display = "none";
|
|
}
|
|
document.getElementById("layout-position").style.display = "block";
|
|
document.getElementById("layout-width").style.display = "block";
|
|
document.getElementById("sidebar-visibility").style.display = "none";
|
|
}
|
|
initActiveMenu();
|
|
} else if (dataLayout == "twocolumn") {
|
|
document.getElementById("scrollbar").removeAttribute("data-simplebar");
|
|
document.getElementById("scrollbar").classList.remove("h-100");
|
|
if (document.getElementById("theme-settings-offcanvas")) {
|
|
document.getElementById("sidebar-size").style.display = "none";
|
|
document.getElementById("sidebar-view").style.display = "none";
|
|
document.getElementById("sidebar-color").style.display = "block";
|
|
if (document.getElementById("sidebar-img")) {
|
|
document.getElementById("sidebar-img").style.display = "block";
|
|
}
|
|
document.getElementById("layout-position").style.display = "none";
|
|
document.getElementById("layout-width").style.display = "none";
|
|
document.getElementById("sidebar-visibility").style.display = "none";
|
|
}
|
|
} else if (dataLayout == "semibox") {
|
|
document.getElementById("two-column-menu").innerHTML = "";
|
|
if (document.querySelector(".navbar-menu")) {
|
|
document.querySelector(".navbar-menu").innerHTML = navbarMenuHTML;
|
|
}
|
|
if (document.getElementById("theme-settings-offcanvas")) {
|
|
document.getElementById("sidebar-size").style.display = "block";
|
|
document.getElementById("sidebar-view").style.display = "none";
|
|
document.getElementById("sidebar-color").style.display = "block";
|
|
if (document.getElementById("sidebar-img")) {
|
|
document.getElementById("sidebar-img").style.display = "block";
|
|
}
|
|
document.getElementById("layout-position").style.display = "block";
|
|
document.getElementById("layout-width").style.display = "none";
|
|
document.getElementById("sidebar-visibility").style.display = "block";
|
|
}
|
|
initLeftMenuCollapse();
|
|
initActiveMenu();
|
|
addEventListenerOnSmHoverMenu();
|
|
initMenuItemScroll();
|
|
}
|
|
}
|
|
|
|
// add listener Sidebar Hover icon on change layout from setting
|
|
function addEventListenerOnSmHoverMenu() {
|
|
document.getElementById("vertical-hover").addEventListener("click", function () {
|
|
if (document.documentElement.getAttribute("data-sidebar-size") === "sm-hover") {
|
|
document.documentElement.setAttribute("data-sidebar-size", "sm-hover-active");
|
|
} else if (document.documentElement.getAttribute("data-sidebar-size") === "sm-hover-active") {
|
|
document.documentElement.setAttribute("data-sidebar-size", "sm-hover");
|
|
} else {
|
|
document.documentElement.setAttribute("data-sidebar-size", "sm-hover");
|
|
}
|
|
});
|
|
}
|
|
// set full layout
|
|
function layoutSwitch(isLayoutAttributes) {
|
|
switch (isLayoutAttributes) {
|
|
case isLayoutAttributes:
|
|
switch (isLayoutAttributes["data-layout"]) {
|
|
case "vertical":
|
|
getElementUsingTagname("data-layout", "vertical");
|
|
sessionStorage.setItem("data-layout", "vertical");
|
|
document.documentElement.setAttribute("data-layout", "vertical");
|
|
hideShowLayoutOptions("vertical");
|
|
isCollapseMenu();
|
|
break;
|
|
case "horizontal":
|
|
getElementUsingTagname("data-layout", "horizontal");
|
|
sessionStorage.setItem("data-layout", "horizontal");
|
|
document.documentElement.setAttribute("data-layout", "horizontal");
|
|
hideShowLayoutOptions("horizontal");
|
|
break;
|
|
case "twocolumn":
|
|
getElementUsingTagname("data-layout", "twocolumn");
|
|
sessionStorage.setItem("data-layout", "twocolumn");
|
|
document.documentElement.setAttribute("data-layout", "twocolumn");
|
|
hideShowLayoutOptions("twocolumn");
|
|
break;
|
|
case "semibox":
|
|
getElementUsingTagname("data-layout", "semibox");
|
|
sessionStorage.setItem("data-layout", "semibox");
|
|
document.documentElement.setAttribute("data-layout", "semibox");
|
|
hideShowLayoutOptions("semibox");
|
|
break;
|
|
default:
|
|
if (sessionStorage.getItem("data-layout") == "vertical" && sessionStorage.getItem("data-layout")) {
|
|
getElementUsingTagname("data-layout", "vertical");
|
|
sessionStorage.setItem("data-layout", "vertical");
|
|
document.documentElement.setAttribute("data-layout", "vertical");
|
|
hideShowLayoutOptions("vertical");
|
|
isCollapseMenu();
|
|
} else if (sessionStorage.getItem("data-layout") == "horizontal") {
|
|
getElementUsingTagname("data-layout", "horizontal");
|
|
sessionStorage.setItem("data-layout", "horizontal");
|
|
document.documentElement.setAttribute("data-layout", "horizontal");
|
|
hideShowLayoutOptions("horizontal");
|
|
} else if (sessionStorage.getItem("data-layout") == "twocolumn") {
|
|
getElementUsingTagname("data-layout", "twocolumn");
|
|
sessionStorage.setItem("data-layout", "twocolumn");
|
|
document.documentElement.setAttribute("data-layout", "twocolumn");
|
|
hideShowLayoutOptions("twocolumn");
|
|
} else if (sessionStorage.getItem("data-layout") == "semibox") {
|
|
getElementUsingTagname("data-layout", "semibox");
|
|
sessionStorage.setItem("data-layout", "semibox");
|
|
document.documentElement.setAttribute("data-layout", "semibox");
|
|
hideShowLayoutOptions("semibox");
|
|
}
|
|
break;
|
|
}
|
|
switch (isLayoutAttributes["data-topbar"]) {
|
|
case "light":
|
|
getElementUsingTagname("data-topbar", "light");
|
|
sessionStorage.setItem("data-topbar", "light");
|
|
document.documentElement.setAttribute("data-topbar", "light");
|
|
break;
|
|
case "dark":
|
|
getElementUsingTagname("data-topbar", "dark");
|
|
sessionStorage.setItem("data-topbar", "dark");
|
|
document.documentElement.setAttribute("data-topbar", "dark");
|
|
break;
|
|
default:
|
|
if (sessionStorage.getItem("data-topbar") == "dark") {
|
|
getElementUsingTagname("data-topbar", "dark");
|
|
sessionStorage.setItem("data-topbar", "dark");
|
|
document.documentElement.setAttribute("data-topbar", "dark");
|
|
} else {
|
|
getElementUsingTagname("data-topbar", "light");
|
|
sessionStorage.setItem("data-topbar", "light");
|
|
document.documentElement.setAttribute("data-topbar", "light");
|
|
}
|
|
break;
|
|
}
|
|
|
|
switch (isLayoutAttributes["data-sidebar-visibility"]) {
|
|
case "hidden":
|
|
getElementUsingTagname("data-sidebar-visibility", "hidden");
|
|
sessionStorage.setItem("data-sidebar-visibility", "hidden");
|
|
document.documentElement.setAttribute("data-sidebar-visibility", "hidden");
|
|
break;
|
|
default:
|
|
getElementUsingTagname("data-sidebar-visibility", "show");
|
|
sessionStorage.setItem("data-sidebar-visibility", "show");
|
|
document.documentElement.setAttribute("data-sidebar-visibility", "show");
|
|
break;
|
|
}
|
|
|
|
switch (isLayoutAttributes["data-layout-style"]) {
|
|
case "default":
|
|
getElementUsingTagname("data-layout-style", "default");
|
|
sessionStorage.setItem("data-layout-style", "default");
|
|
document.documentElement.setAttribute("data-layout-style", "default");
|
|
break;
|
|
case "detached":
|
|
getElementUsingTagname("data-layout-style", "detached");
|
|
sessionStorage.setItem("data-layout-style", "detached");
|
|
document.documentElement.setAttribute("data-layout-style", "detached");
|
|
break;
|
|
default:
|
|
if (sessionStorage.getItem("data-layout-style") == "detached") {
|
|
getElementUsingTagname("data-layout-style", "detached");
|
|
sessionStorage.setItem("data-layout-style", "detached");
|
|
document.documentElement.setAttribute("data-layout-style", "detached");
|
|
} else {
|
|
getElementUsingTagname("data-layout-style", "default");
|
|
sessionStorage.setItem("data-layout-style", "default");
|
|
document.documentElement.setAttribute("data-layout-style", "default");
|
|
}
|
|
break;
|
|
}
|
|
|
|
switch (isLayoutAttributes["data-sidebar-size"]) {
|
|
case "lg":
|
|
getElementUsingTagname("data-sidebar-size", "lg");
|
|
document.documentElement.setAttribute("data-sidebar-size", "lg");
|
|
sessionStorage.setItem("data-sidebar-size", "lg");
|
|
break;
|
|
|
|
case "sm":
|
|
getElementUsingTagname("data-sidebar-size", "sm");
|
|
document.documentElement.setAttribute("data-sidebar-size", "sm");
|
|
sessionStorage.setItem("data-sidebar-size", "sm");
|
|
break;
|
|
|
|
case "md":
|
|
getElementUsingTagname("data-sidebar-size", "md");
|
|
document.documentElement.setAttribute("data-sidebar-size", "md");
|
|
sessionStorage.setItem("data-sidebar-size", "md");
|
|
break;
|
|
|
|
case "sm-hover":
|
|
getElementUsingTagname("data-sidebar-size", "sm-hover");
|
|
document.documentElement.setAttribute("data-sidebar-size", "sm-hover");
|
|
sessionStorage.setItem("data-sidebar-size", "sm-hover");
|
|
break;
|
|
|
|
default:
|
|
if (sessionStorage.getItem("data-sidebar-size") == "sm") {
|
|
document.documentElement.setAttribute("data-sidebar-size", "sm");
|
|
getElementUsingTagname("data-sidebar-size", "sm");
|
|
sessionStorage.setItem("data-sidebar-size", "sm");
|
|
} else if (sessionStorage.getItem("data-sidebar-size") == "md") {
|
|
document.documentElement.setAttribute("data-sidebar-size", "md");
|
|
getElementUsingTagname("data-sidebar-size", "md");
|
|
sessionStorage.setItem("data-sidebar-size", "md");
|
|
} else if (sessionStorage.getItem("data-sidebar-size") == "sm-hover") {
|
|
document.documentElement.setAttribute("data-sidebar-size", "sm-hover");
|
|
getElementUsingTagname("data-sidebar-size", "sm-hover");
|
|
sessionStorage.setItem("data-sidebar-size", "sm-hover");
|
|
} else {
|
|
document.documentElement.setAttribute("data-sidebar-size", "lg");
|
|
getElementUsingTagname("data-sidebar-size", "lg");
|
|
sessionStorage.setItem("data-sidebar-size", "lg");
|
|
}
|
|
break;
|
|
}
|
|
|
|
switch (isLayoutAttributes["data-bs-theme"]) {
|
|
case "light":
|
|
getElementUsingTagname("data-bs-theme", "light");
|
|
document.documentElement.setAttribute("data-bs-theme", "light");
|
|
sessionStorage.setItem("data-bs-theme", "light");
|
|
break;
|
|
case "dark":
|
|
getElementUsingTagname("data-bs-theme", "dark");
|
|
document.documentElement.setAttribute("data-bs-theme", "dark");
|
|
sessionStorage.setItem("data-bs-theme", "dark");
|
|
break;
|
|
default:
|
|
if (sessionStorage.getItem("data-bs-theme") && sessionStorage.getItem("data-bs-theme") == "dark") {
|
|
sessionStorage.setItem("data-bs-theme", "dark");
|
|
document.documentElement.setAttribute("data-bs-theme", "dark");
|
|
getElementUsingTagname("data-bs-theme", "dark");
|
|
} else {
|
|
sessionStorage.setItem("data-bs-theme", "light");
|
|
document.documentElement.setAttribute("data-bs-theme", "light");
|
|
getElementUsingTagname("data-bs-theme", "light");
|
|
}
|
|
break;
|
|
}
|
|
|
|
switch (isLayoutAttributes["data-layout-width"]) {
|
|
case "fluid":
|
|
getElementUsingTagname("data-layout-width", "fluid");
|
|
document.documentElement.setAttribute("data-layout-width", "fluid");
|
|
sessionStorage.setItem("data-layout-width", "fluid");
|
|
break;
|
|
case "boxed":
|
|
getElementUsingTagname("data-layout-width", "boxed");
|
|
document.documentElement.setAttribute("data-layout-width", "boxed");
|
|
sessionStorage.setItem("data-layout-width", "boxed");
|
|
break;
|
|
default:
|
|
if (sessionStorage.getItem("data-layout-width") == "boxed") {
|
|
sessionStorage.setItem("data-layout-width", "boxed");
|
|
document.documentElement.setAttribute("data-layout-width", "boxed");
|
|
getElementUsingTagname("data-layout-width", "boxed");
|
|
} else {
|
|
sessionStorage.setItem("data-layout-width", "fluid");
|
|
document.documentElement.setAttribute("data-layout-width", "fluid");
|
|
getElementUsingTagname("data-layout-width", "fluid");
|
|
}
|
|
break;
|
|
}
|
|
|
|
switch (isLayoutAttributes["data-sidebar"]) {
|
|
case "light":
|
|
getElementUsingTagname("data-sidebar", "light");
|
|
sessionStorage.setItem("data-sidebar", "light");
|
|
document.documentElement.setAttribute("data-sidebar", "light");
|
|
break;
|
|
case "dark":
|
|
getElementUsingTagname("data-sidebar", "dark");
|
|
sessionStorage.setItem("data-sidebar", "dark");
|
|
document.documentElement.setAttribute("data-sidebar", "dark");
|
|
break;
|
|
case "gradient":
|
|
getElementUsingTagname("data-sidebar", "gradient");
|
|
sessionStorage.setItem("data-sidebar", "gradient");
|
|
document.documentElement.setAttribute("data-sidebar", "gradient");
|
|
break;
|
|
case "gradient-2":
|
|
getElementUsingTagname("data-sidebar", "gradient-2");
|
|
sessionStorage.setItem("data-sidebar", "gradient-2");
|
|
document.documentElement.setAttribute("data-sidebar", "gradient-2");
|
|
break;
|
|
case "gradient-3":
|
|
getElementUsingTagname("data-sidebar", "gradient-3");
|
|
sessionStorage.setItem("data-sidebar", "gradient-3");
|
|
document.documentElement.setAttribute("data-sidebar", "gradient-3");
|
|
break;
|
|
case "gradient-4":
|
|
getElementUsingTagname("data-sidebar", "gradient-4");
|
|
sessionStorage.setItem("data-sidebar", "gradient-4");
|
|
document.documentElement.setAttribute("data-sidebar", "gradient-4");
|
|
break;
|
|
default:
|
|
if (sessionStorage.getItem("data-sidebar") && sessionStorage.getItem("data-sidebar") == "light") {
|
|
sessionStorage.setItem("data-sidebar", "light");
|
|
getElementUsingTagname("data-sidebar", "light");
|
|
document.documentElement.setAttribute("data-sidebar", "light");
|
|
} else if (sessionStorage.getItem("data-sidebar") == "dark") {
|
|
sessionStorage.setItem("data-sidebar", "dark");
|
|
getElementUsingTagname("data-sidebar", "dark");
|
|
document.documentElement.setAttribute("data-sidebar", "dark");
|
|
} else if (sessionStorage.getItem("data-sidebar") == "gradient") {
|
|
sessionStorage.setItem("data-sidebar", "gradient");
|
|
getElementUsingTagname("data-sidebar", "gradient");
|
|
document.documentElement.setAttribute("data-sidebar", "gradient");
|
|
} else if (sessionStorage.getItem("data-sidebar") == "gradient-2") {
|
|
sessionStorage.setItem("data-sidebar", "gradient-2");
|
|
getElementUsingTagname("data-sidebar", "gradient-2");
|
|
document.documentElement.setAttribute("data-sidebar", "gradient-2");
|
|
} else if (sessionStorage.getItem("data-sidebar") == "gradient-3") {
|
|
sessionStorage.setItem("data-sidebar", "gradient-3");
|
|
getElementUsingTagname("data-sidebar", "gradient-3");
|
|
document.documentElement.setAttribute("data-sidebar", "gradient-3");
|
|
} else if (sessionStorage.getItem("data-sidebar") == "gradient-4") {
|
|
sessionStorage.setItem("data-sidebar", "gradient-4");
|
|
getElementUsingTagname("data-sidebar", "gradient-4");
|
|
document.documentElement.setAttribute("data-sidebar", "gradient-4");
|
|
}
|
|
break;
|
|
}
|
|
|
|
switch (isLayoutAttributes["data-sidebar-image"]) {
|
|
case "none":
|
|
getElementUsingTagname("data-sidebar-image", "none");
|
|
sessionStorage.setItem("data-sidebar-image", "none");
|
|
document.documentElement.setAttribute("data-sidebar-image", "none");
|
|
break;
|
|
case "img-1":
|
|
getElementUsingTagname("data-sidebar-image", "img-1");
|
|
sessionStorage.setItem("data-sidebar-image", "img-1");
|
|
document.documentElement.setAttribute("data-sidebar-image", "img-1");
|
|
break;
|
|
case "img-2":
|
|
getElementUsingTagname("data-sidebar-image", "img-2");
|
|
sessionStorage.setItem("data-sidebar-image", "img-2");
|
|
document.documentElement.setAttribute("data-sidebar-image", "img-2");
|
|
break;
|
|
case "img-3":
|
|
getElementUsingTagname("data-sidebar-image", "img-3");
|
|
sessionStorage.setItem("data-sidebar-image", "img-3");
|
|
document.documentElement.setAttribute("data-sidebar-image", "img-3");
|
|
break;
|
|
case "img-4":
|
|
getElementUsingTagname("data-sidebar-image", "img-4");
|
|
sessionStorage.setItem("data-sidebar-image", "img-4");
|
|
document.documentElement.setAttribute("data-sidebar-image", "img-4");
|
|
break;
|
|
default:
|
|
if (sessionStorage.getItem("data-sidebar-image") && sessionStorage.getItem("data-sidebar-image") == "none") {
|
|
sessionStorage.setItem("data-sidebar-image", "none");
|
|
getElementUsingTagname("data-sidebar-image", "none");
|
|
document.documentElement.setAttribute("data-sidebar-image", "none");
|
|
} else if (sessionStorage.getItem("data-sidebar-image") == "img-1") {
|
|
sessionStorage.setItem("data-sidebar-image", "img-1");
|
|
getElementUsingTagname("data-sidebar-image", "img-1");
|
|
document.documentElement.setAttribute("data-sidebar-image", "img-2");
|
|
} else if (sessionStorage.getItem("data-sidebar-image") == "img-2") {
|
|
sessionStorage.setItem("data-sidebar-image", "img-2");
|
|
getElementUsingTagname("data-sidebar-image", "img-2");
|
|
document.documentElement.setAttribute("data-sidebar-image", "img-2");
|
|
} else if (sessionStorage.getItem("data-sidebar-image") == "img-3") {
|
|
sessionStorage.setItem("data-sidebar-image", "img-3");
|
|
getElementUsingTagname("data-sidebar-image", "img-3");
|
|
document.documentElement.setAttribute("data-sidebar-image", "img-3");
|
|
} else if (sessionStorage.getItem("data-sidebar-image") == "img-4") {
|
|
sessionStorage.setItem("data-sidebar-image", "img-4");
|
|
getElementUsingTagname("data-sidebar-image", "img-4");
|
|
document.documentElement.setAttribute("data-sidebar-image", "img-4");
|
|
}
|
|
break;
|
|
}
|
|
|
|
switch (isLayoutAttributes["data-layout-position"]) {
|
|
case "fixed":
|
|
getElementUsingTagname("data-layout-position", "fixed");
|
|
sessionStorage.setItem("data-layout-position", "fixed");
|
|
document.documentElement.setAttribute("data-layout-position", "fixed");
|
|
break;
|
|
case "scrollable":
|
|
getElementUsingTagname("data-layout-position", "scrollable");
|
|
sessionStorage.setItem("data-layout-position", "scrollable");
|
|
document.documentElement.setAttribute("data-layout-position", "scrollable");
|
|
break;
|
|
default:
|
|
if (sessionStorage.getItem("data-layout-position") && sessionStorage.getItem("data-layout-position") == "scrollable") {
|
|
getElementUsingTagname("data-layout-position", "scrollable");
|
|
sessionStorage.setItem("data-layout-position", "scrollable");
|
|
document.documentElement.setAttribute("data-layout-position", "scrollable");
|
|
} else {
|
|
getElementUsingTagname("data-layout-position", "fixed");
|
|
sessionStorage.setItem("data-layout-position", "fixed");
|
|
document.documentElement.setAttribute("data-layout-position", "fixed");
|
|
}
|
|
break;
|
|
}
|
|
|
|
switch (isLayoutAttributes["data-preloader"]) {
|
|
case "disable":
|
|
getElementUsingTagname("data-preloader", "disable");
|
|
sessionStorage.setItem("data-preloader", "disable");
|
|
document.documentElement.setAttribute("data-preloader", "disable");
|
|
|
|
break;
|
|
case "enable":
|
|
getElementUsingTagname("data-preloader", "enable");
|
|
sessionStorage.setItem("data-preloader", "enable");
|
|
document.documentElement.setAttribute("data-preloader", "enable");
|
|
var preloader = document.getElementById("preloader");
|
|
if (preloader) {
|
|
window.addEventListener("load", function () {
|
|
preloader.style.opacity = "0";
|
|
preloader.style.visibility = "hidden";
|
|
});
|
|
}
|
|
break;
|
|
default:
|
|
if (sessionStorage.getItem("data-preloader") && sessionStorage.getItem("data-preloader") == "disable") {
|
|
getElementUsingTagname("data-preloader", "disable");
|
|
sessionStorage.setItem("data-preloader", "disable");
|
|
document.documentElement.setAttribute("data-preloader", "disable");
|
|
|
|
} else if (sessionStorage.getItem("data-preloader") == "enable") {
|
|
getElementUsingTagname("data-preloader", "enable");
|
|
sessionStorage.setItem("data-preloader", "enable");
|
|
document.documentElement.setAttribute("data-preloader", "enable");
|
|
var preloader = document.getElementById("preloader");
|
|
if (preloader) {
|
|
window.addEventListener("load", function () {
|
|
preloader.style.opacity = "0";
|
|
preloader.style.visibility = "hidden";
|
|
});
|
|
}
|
|
} else {
|
|
document.documentElement.setAttribute("data-preloader", "disable");
|
|
}
|
|
break;
|
|
}
|
|
|
|
switch (isLayoutAttributes["data-body-image"]) {
|
|
case "img-1":
|
|
getElementUsingTagname("data-body-image", "img-1");
|
|
sessionStorage.setItem("data-sidebabodyr-image", "img-1");
|
|
document.documentElement.setAttribute("data-body-image", "img-1");
|
|
if (document.getElementById("theme-settings-offcanvas")) {
|
|
document.documentElement.removeAttribute("data-sidebar-image");
|
|
}
|
|
break;
|
|
case "img-2":
|
|
getElementUsingTagname("data-body-image", "img-2");
|
|
sessionStorage.setItem("data-body-image", "img-2");
|
|
document.documentElement.setAttribute("data-body-image", "img-2");
|
|
break;
|
|
case "img-3":
|
|
getElementUsingTagname("data-body-image", "img-3");
|
|
sessionStorage.setItem("data-body-image", "img-3");
|
|
document.documentElement.setAttribute("data-body-image", "img-3");
|
|
break;
|
|
case "none":
|
|
getElementUsingTagname("data-body-image", "none");
|
|
sessionStorage.setItem("data-body-image", "none");
|
|
document.documentElement.setAttribute("data-body-image", "none");
|
|
break;
|
|
|
|
default:
|
|
if (sessionStorage.getItem("data-body-image") && sessionStorage.getItem("data-body-image") == "img-1") {
|
|
sessionStorage.setItem("data-body-image", "img-1");
|
|
getElementUsingTagname("data-body-image", "img-1");
|
|
document.documentElement.setAttribute("data-body-image", "img-1");
|
|
|
|
if (document.getElementById("theme-settings-offcanvas")) {
|
|
if (document.getElementById("sidebar-img")) {
|
|
document.getElementById("sidebar-img").style.display = "none";
|
|
document.documentElement.removeAttribute("data-sidebar-image");
|
|
}
|
|
}
|
|
} else if (sessionStorage.getItem("data-body-image") == "img-2") {
|
|
sessionStorage.setItem("data-body-image", "img-2");
|
|
getElementUsingTagname("data-body-image", "img-2");
|
|
document.documentElement.setAttribute("data-body-image", "img-2");
|
|
} else if (sessionStorage.getItem("data-body-image") == "img-3") {
|
|
sessionStorage.setItem("data-body-image", "img-3");
|
|
getElementUsingTagname("data-body-image", "img-3");
|
|
document.documentElement.setAttribute("data-body-image", "img-3");
|
|
} else if (sessionStorage.getItem("data-body-image") == "none") {
|
|
sessionStorage.setItem("data-body-image", "none");
|
|
getElementUsingTagname("data-body-image", "none");
|
|
document.documentElement.setAttribute("data-body-image", "none");
|
|
}
|
|
break;
|
|
}
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
|
|
function initMenuItemScroll() {
|
|
setTimeout(function () {
|
|
var sidebarMenu = document.getElementById("navbar-nav");
|
|
if (sidebarMenu) {
|
|
var activeMenu = sidebarMenu.querySelector(".nav-item .active");
|
|
var offset = activeMenu ? activeMenu.offsetTop : 0;
|
|
if (offset > 300) {
|
|
var verticalMenu = document.getElementsByClassName("app-menu") ? document.getElementsByClassName("app-menu")[0] : "";
|
|
if (verticalMenu && verticalMenu.querySelector(".simplebar-content-wrapper")) {
|
|
setTimeout(function () {
|
|
offset == 330 ?
|
|
(verticalMenu.querySelector(".simplebar-content-wrapper").scrollTop = offset + 85) :
|
|
(verticalMenu.querySelector(".simplebar-content-wrapper").scrollTop = offset);
|
|
}, 0);
|
|
}
|
|
}
|
|
}
|
|
}, 250);
|
|
}
|
|
|
|
// add change event listener on right layout setting
|
|
var resizeEvent = new Event('resize');
|
|
function getElementUsingTagname(ele, val) {
|
|
Array.from(document.querySelectorAll("input[name=" + ele + "]")).forEach(function (x) {
|
|
val == x.value ? (x.checked = true) : (x.checked = false);
|
|
|
|
x.addEventListener("change", function () {
|
|
document.documentElement.setAttribute(ele, x.value);
|
|
sessionStorage.setItem(ele, x.value);
|
|
initLanguage();
|
|
|
|
if (ele == "data-layout-width" && x.value == "boxed") {
|
|
document.documentElement.setAttribute("data-sidebar-size", "sm-hover");
|
|
sessionStorage.setItem("data-sidebar-size", "sm-hover");
|
|
document.getElementById("sidebar-size-small-hover").checked = true;
|
|
} else if (ele == "data-layout-width" && x.value == "fluid") {
|
|
document.documentElement.setAttribute("data-sidebar-size", "lg");
|
|
sessionStorage.setItem("data-sidebar-size", "lg");
|
|
document.getElementById("sidebar-size-default").checked = true;
|
|
}
|
|
|
|
if (ele == "data-layout") {
|
|
if (x.value == "vertical") {
|
|
hideShowLayoutOptions("vertical");
|
|
isCollapseMenu();
|
|
feather.replace();
|
|
} else if (x.value == "horizontal") {
|
|
if (document.getElementById("sidebarimg-none")) {
|
|
document.getElementById("sidebarimg-none").click();
|
|
}
|
|
hideShowLayoutOptions("horizontal");
|
|
feather.replace();
|
|
} else if (x.value == "twocolumn") {
|
|
hideShowLayoutOptions("twocolumn");
|
|
document.documentElement.setAttribute("data-layout-width", "fluid");
|
|
document.getElementById("layout-width-fluid").click();
|
|
twoColumnMenuGenerate();
|
|
initTwoColumnActiveMenu();
|
|
isCollapseMenu();
|
|
feather.replace();
|
|
} else if (x.value == "semibox") {
|
|
hideShowLayoutOptions("semibox");
|
|
document.documentElement.setAttribute("data-layout-width", "fluid");
|
|
document.getElementById("layout-width-fluid").click();
|
|
document.documentElement.setAttribute("data-layout-style", "default");
|
|
document.getElementById("sidebar-view-default").click();
|
|
isCollapseMenu();
|
|
feather.replace();
|
|
}
|
|
}
|
|
|
|
var sidebarSections = "block";
|
|
if (document.documentElement.getAttribute("data-layout") == "semibox") {
|
|
if(document.documentElement.getAttribute("data-sidebar-visibility") == "hidden"){
|
|
document.documentElement.removeAttribute("data-sidebar");
|
|
document.documentElement.removeAttribute("data-sidebar-image");
|
|
document.documentElement.removeAttribute("data-sidebar-size");
|
|
sidebarSections = "none";
|
|
} else {
|
|
document.documentElement.setAttribute("data-sidebar", sessionStorage.getItem("data-sidebar"));
|
|
document.documentElement.setAttribute("data-sidebar-image", sessionStorage.getItem("data-sidebar-image"));
|
|
document.documentElement.setAttribute("data-sidebar-size", sessionStorage.getItem("data-sidebar-size"));
|
|
}
|
|
}
|
|
document.getElementById("sidebar-size").style.display = sidebarSections;
|
|
document.getElementById("sidebar-color").style.display = sidebarSections;
|
|
if (document.getElementById("sidebar-img")) {
|
|
document.getElementById("sidebar-img").style.display = sidebarSections;
|
|
}
|
|
|
|
if (ele == "data-preloader" && x.value == "enable") {
|
|
document.documentElement.setAttribute("data-preloader", "enable");
|
|
var preloader = document.getElementById("preloader");
|
|
if (preloader) {
|
|
setTimeout(function () {
|
|
preloader.style.opacity = "0";
|
|
preloader.style.visibility = "hidden";
|
|
}, 1000);
|
|
}
|
|
document.getElementById("customizerclose-btn").click();
|
|
} else if (ele == "data-preloader" && x.value == "disable") {
|
|
document.documentElement.setAttribute("data-preloader", "disable");
|
|
document.getElementById("customizerclose-btn").click();
|
|
}
|
|
|
|
if(ele == 'data-bs-theme') {
|
|
// Dispatch the resize event on the window object
|
|
window.dispatchEvent(resizeEvent);
|
|
}
|
|
});
|
|
});
|
|
|
|
if (document.getElementById('collapseBgGradient')) {
|
|
Array.from(document.querySelectorAll("#collapseBgGradient .form-check input")).forEach(function (subElem) {
|
|
var myCollapse = document.getElementById('collapseBgGradient')
|
|
if ((subElem.checked == true)) {
|
|
var bsCollapse = new bootstrap.Collapse(myCollapse, {
|
|
toggle: false,
|
|
})
|
|
bsCollapse.show()
|
|
}
|
|
|
|
if (document.querySelector("[data-bs-target='#collapseBgGradient']")) {
|
|
document.querySelector("[data-bs-target='#collapseBgGradient']").addEventListener('click', function (elem) {
|
|
document.getElementById("sidebar-color-gradient").click();
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
if (document.querySelectorAll("[data-bs-target='#collapseBgGradient.show']")) {
|
|
Array.from(document.querySelectorAll("[data-bs-target='#collapseBgGradient.show']")).forEach(function (subElem) {
|
|
subElem.addEventListener("click", function(){
|
|
var myCollapse = document.getElementById('collapseBgGradient')
|
|
var bsCollapse = new bootstrap.Collapse(myCollapse, {
|
|
toggle: false,
|
|
})
|
|
bsCollapse.hide()
|
|
})
|
|
});
|
|
}
|
|
|
|
Array.from(document.querySelectorAll("[name='data-sidebar']")).forEach(function (elem) {
|
|
if (document.querySelector("[data-bs-target='#collapseBgGradient']")) {
|
|
if (document.querySelector("#collapseBgGradient .form-check input:checked")) {
|
|
document.querySelector("[data-bs-target='#collapseBgGradient']").classList.add("active");
|
|
} else {
|
|
document.querySelector("[data-bs-target='#collapseBgGradient']").classList.remove("active");
|
|
}
|
|
|
|
elem.addEventListener("change", function () {
|
|
if (document.querySelector("#collapseBgGradient .form-check input:checked")) {
|
|
document.querySelector("[data-bs-target='#collapseBgGradient']").classList.add("active");
|
|
} else {
|
|
document.querySelector("[data-bs-target='#collapseBgGradient']").classList.remove("active");
|
|
}
|
|
})
|
|
}
|
|
})
|
|
|
|
}
|
|
|
|
function setDefaultAttribute() {
|
|
if (!sessionStorage.getItem("defaultAttribute")) {
|
|
var attributesValue = document.documentElement.attributes;
|
|
var isLayoutAttributes = {};
|
|
Array.from(attributesValue).forEach(function (x) {
|
|
if (x && x.nodeName && x.nodeName != "undefined") {
|
|
var nodeKey = x.nodeName;
|
|
isLayoutAttributes[nodeKey] = x.nodeValue;
|
|
sessionStorage.setItem(nodeKey, x.nodeValue);
|
|
}
|
|
});
|
|
sessionStorage.setItem("defaultAttribute", JSON.stringify(isLayoutAttributes));
|
|
layoutSwitch(isLayoutAttributes);
|
|
|
|
// open right sidebar on first time load
|
|
// var offCanvas = document.querySelector('.btn[data-bs-target="#theme-settings-offcanvas"]');
|
|
// offCanvas ? offCanvas.click() : "";
|
|
} else {
|
|
var isLayoutAttributes = {};
|
|
isLayoutAttributes["data-layout"] = sessionStorage.getItem("data-layout");
|
|
isLayoutAttributes["data-sidebar-size"] = sessionStorage.getItem("data-sidebar-size");
|
|
isLayoutAttributes["data-bs-theme"] = sessionStorage.getItem("data-bs-theme");
|
|
isLayoutAttributes["data-layout-width"] = sessionStorage.getItem("data-layout-width");
|
|
isLayoutAttributes["data-sidebar"] = sessionStorage.getItem("data-sidebar");
|
|
isLayoutAttributes['data-sidebar-image'] = sessionStorage.getItem('data-sidebar-image');
|
|
isLayoutAttributes["data-layout-position"] = sessionStorage.getItem("data-layout-position");
|
|
isLayoutAttributes["data-layout-style"] = sessionStorage.getItem("data-layout-style");
|
|
isLayoutAttributes["data-topbar"] = sessionStorage.getItem("data-topbar");
|
|
isLayoutAttributes["data-preloader"] = sessionStorage.getItem("data-preloader");
|
|
isLayoutAttributes["data-body-image"] = sessionStorage.getItem("data-body-image");
|
|
layoutSwitch(isLayoutAttributes);
|
|
}
|
|
}
|
|
|
|
function initFullScreen() {
|
|
var fullscreenBtn = document.querySelector('[data-toggle="fullscreen"]');
|
|
fullscreenBtn &&
|
|
fullscreenBtn.addEventListener("click", function (e) {
|
|
e.preventDefault();
|
|
document.body.classList.toggle("fullscreen-enable");
|
|
if (!document.fullscreenElement &&
|
|
/* alternative standard method */
|
|
!document.mozFullScreenElement &&
|
|
!document.webkitFullscreenElement
|
|
) {
|
|
// current working methods
|
|
if (document.documentElement.requestFullscreen) {
|
|
document.documentElement.requestFullscreen();
|
|
} else if (document.documentElement.mozRequestFullScreen) {
|
|
document.documentElement.mozRequestFullScreen();
|
|
} else if (document.documentElement.webkitRequestFullscreen) {
|
|
document.documentElement.webkitRequestFullscreen(
|
|
Element.ALLOW_KEYBOARD_INPUT
|
|
);
|
|
}
|
|
} else {
|
|
if (document.cancelFullScreen) {
|
|
document.cancelFullScreen();
|
|
} else if (document.mozCancelFullScreen) {
|
|
document.mozCancelFullScreen();
|
|
} else if (document.webkitCancelFullScreen) {
|
|
document.webkitCancelFullScreen();
|
|
}
|
|
}
|
|
});
|
|
|
|
document.addEventListener("fullscreenchange", exitHandler);
|
|
document.addEventListener("webkitfullscreenchange", exitHandler);
|
|
document.addEventListener("mozfullscreenchange", exitHandler);
|
|
|
|
function exitHandler() {
|
|
if (!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
|
|
document.body.classList.remove("fullscreen-enable");
|
|
}
|
|
}
|
|
}
|
|
|
|
function setLayoutMode(mode, modeType, modeTypeId, html) {
|
|
var isModeTypeId = document.getElementById(modeTypeId);
|
|
html.setAttribute(mode, modeType);
|
|
if (isModeTypeId) {
|
|
document.getElementById(modeTypeId).click();
|
|
}
|
|
}
|
|
|
|
function initModeSetting() {
|
|
var html = document.getElementsByTagName("HTML")[0];
|
|
var lightDarkBtn = document.querySelectorAll(".light-dark-mode");
|
|
if (lightDarkBtn && lightDarkBtn.length) {
|
|
lightDarkBtn[0].addEventListener("click", function (event) {
|
|
html.hasAttribute("data-bs-theme") && html.getAttribute("data-bs-theme") == "dark" ?
|
|
setLayoutMode("data-bs-theme", "light", "layout-mode-light", html) :
|
|
setLayoutMode("data-bs-theme", "dark", "layout-mode-dark", html);
|
|
// Dispatch the resize event on the window object
|
|
window.dispatchEvent(resizeEvent);
|
|
});
|
|
}
|
|
}
|
|
|
|
function resetLayout() {
|
|
if (document.getElementById("reset-layout")) {
|
|
document.getElementById("reset-layout").addEventListener("click", function () {
|
|
sessionStorage.clear();
|
|
window.location.reload();
|
|
});
|
|
}
|
|
}
|
|
|
|
function init() {
|
|
setDefaultAttribute();
|
|
twoColumnMenuGenerate();
|
|
isCustomDropdown();
|
|
isCustomDropdownResponsive();
|
|
initFullScreen();
|
|
initModeSetting();
|
|
windowLoadContent();
|
|
counter();
|
|
initLeftMenuCollapse();
|
|
initTopbarComponents();
|
|
initComponents();
|
|
resetLayout();
|
|
pluginData();
|
|
initLanguage();
|
|
isCollapseMenu();
|
|
initMenuItemScroll();
|
|
}
|
|
init();
|
|
|
|
var timeOutFunctionId;
|
|
|
|
function setResize() {
|
|
var currentLayout = document.documentElement.getAttribute("data-layout");
|
|
if (currentLayout !== "horizontal") {
|
|
if (document.getElementById("navbar-nav")) {
|
|
var simpleBar = new SimpleBar(document.getElementById("navbar-nav"));
|
|
if (simpleBar) simpleBar.getContentElement();
|
|
}
|
|
|
|
if (document.getElementsByClassName("twocolumn-iconview")[0]) {
|
|
var simpleBar1 = new SimpleBar(
|
|
document.getElementsByClassName("twocolumn-iconview")[0]
|
|
);
|
|
if (simpleBar1) simpleBar1.getContentElement();
|
|
}
|
|
clearTimeout(timeOutFunctionId);
|
|
}
|
|
}
|
|
|
|
window.addEventListener("resize", function () {
|
|
if (timeOutFunctionId) clearTimeout(timeOutFunctionId);
|
|
timeOutFunctionId = setTimeout(setResize, 2000);
|
|
});
|
|
})();
|
|
|
|
|
|
//
|
|
/********************* scroll top js ************************/
|
|
//
|
|
|
|
var mybutton = document.getElementById("back-to-top");
|
|
|
|
if (mybutton) {
|
|
// When the user scrolls down 20px from the top of the document, show the button
|
|
window.onscroll = function () {
|
|
scrollFunction();
|
|
};
|
|
|
|
function scrollFunction() {
|
|
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
|
|
mybutton.style.display = "block";
|
|
} else {
|
|
mybutton.style.display = "none";
|
|
}
|
|
}
|
|
|
|
// When the user clicks on the button, scroll to the top of the document
|
|
function topFunction() {
|
|
document.body.scrollTop = 0;
|
|
document.documentElement.scrollTop = 0;
|
|
}
|
|
}
|