300 lines
10 KiB
JavaScript
300 lines
10 KiB
JavaScript
'use strict';
|
|
|
|
(function () {
|
|
|
|
// Root css-variable value
|
|
const getCssVariableValue = function(variableName) {
|
|
let hex = getComputedStyle(document.documentElement).getPropertyValue(variableName);
|
|
if ( hex && hex.length > 0 ) {
|
|
hex = hex.trim();
|
|
}
|
|
return hex;
|
|
}
|
|
|
|
// Global variables
|
|
window.config = {
|
|
colors: {
|
|
primary : getCssVariableValue('--bs-primary'),
|
|
secondary : getCssVariableValue('--bs-secondary'),
|
|
success : getCssVariableValue('--bs-success'),
|
|
info : getCssVariableValue('--bs-info'),
|
|
warning : getCssVariableValue('--bs-warning'),
|
|
danger : getCssVariableValue('--bs-danger'),
|
|
light : getCssVariableValue('--bs-light'),
|
|
dark : getCssVariableValue('--bs-dark'),
|
|
gridBorder : "rgba(77, 138, 240, .15)",
|
|
},
|
|
fontFamily : "'Roboto', Helvetica, sans-serif"
|
|
}
|
|
|
|
|
|
|
|
const body = document.body;
|
|
const sidebar = document.querySelector('.sidebar');
|
|
const sidebarBody = document.querySelector('.sidebar .sidebar-body');
|
|
const horizontalMenu = document.querySelector('.horizontal-menu');
|
|
|
|
|
|
// Initializing bootstrap tooltip
|
|
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
|
|
const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
|
return new bootstrap.Tooltip(tooltipTriggerEl)
|
|
})
|
|
|
|
|
|
|
|
// Initializing bootstrap popover
|
|
const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
|
|
const popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
|
|
return new bootstrap.Popover(popoverTriggerEl)
|
|
})
|
|
|
|
|
|
|
|
// Applying perfect-scrollbar
|
|
if (document.querySelector('.sidebar .sidebar-body')) {
|
|
const sidebarBodyScroll = new PerfectScrollbar('.sidebar-body');
|
|
}
|
|
|
|
|
|
|
|
// Sidebar toggle to sidebar-folded
|
|
const sidebarTogglers = document.querySelectorAll('.sidebar-toggler');
|
|
// there are two sidebar togglers.
|
|
// 1: on sidebar - for min-width 992px (laptop, desktop)
|
|
// 2: on navbar - for max-width 991px (mobile phone, tablet)
|
|
if (sidebarTogglers.length) {
|
|
|
|
sidebarTogglers.forEach( toggler => {
|
|
|
|
toggler.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
document.querySelector('.sidebar .sidebar-toggler').classList.toggle('active');
|
|
if (window.matchMedia('(min-width: 992px)').matches) {
|
|
body.classList.toggle('sidebar-folded');
|
|
} else if (window.matchMedia('(max-width: 991px)').matches) {
|
|
body.classList.toggle('sidebar-open');
|
|
}
|
|
});
|
|
|
|
});
|
|
|
|
// To avoid layout issues, remove body and toggler classes on window resize.
|
|
window.addEventListener('resize', function(event) {
|
|
body.classList.remove('sidebar-folded', 'sidebar-open');
|
|
document.querySelector('.sidebar .sidebar-toggler').classList.remove('active');
|
|
}, true);
|
|
|
|
}
|
|
|
|
|
|
|
|
// sidebar-folded on min-width:992px and max-width: 1199px (in lg only not in xl)
|
|
// Warning!!! this results apex chart width issue
|
|
//
|
|
// const desktopMedium = window.matchMedia('(min-width:992px) and (max-width: 1199px)');
|
|
// function iconSidebar() {
|
|
// if (desktopMedium.matches) {
|
|
// body.classList.add('sidebar-folded');
|
|
// } else {
|
|
// body.classList.remove('sidebar-folded');
|
|
// }
|
|
// }
|
|
// window.addEventListener('resize', iconSidebar)
|
|
// iconSidebar();
|
|
|
|
|
|
|
|
// Add "active" class to nav-link based on url dynamically
|
|
function addActiveClass(element) {
|
|
|
|
// Get parents of the 'el' with a selector (class, id, etc..)
|
|
function getParents(el, selector) {
|
|
const parents = [];
|
|
while ((el = el.parentNode) && el !== document) {
|
|
if (!selector || el.matches(selector)) parents.push(el);
|
|
}
|
|
return parents;
|
|
}
|
|
|
|
if (current === "") {
|
|
// For root url
|
|
if (element.getAttribute('href').indexOf("index.html") !== -1) { // Checking href of 'element' matching with 'index.html'
|
|
const elParents = getParents(element, '.nav-item'); // Getting parents of the 'element' with a class '.nav-item'
|
|
elParents[elParents.length - 1].classList.add('active'); // Adding class 'active' to the outer(direct) '.nav-item'
|
|
if (getParents(element, '.sub-menu').length) { // Checking if it's a submenu 'element'
|
|
element.closest('.collapse').classList.add('show'); // Adding class 'show' to the closest '.collapse' to expand submenu
|
|
element.classList.add('active'); // Adding class 'active' to the submenu '.nav-link'
|
|
}
|
|
}
|
|
} else {
|
|
// For other url
|
|
if (element.getAttribute('href').indexOf(current) !== -1) { // Checking href of 'element' matching with current url
|
|
const elParents = getParents(element, '.nav-item'); // Getting parents of the 'element' with a class '.nav-item'
|
|
elParents[elParents.length - 1].classList.add('active'); // Adding class 'active' to the outer(direct) '.nav-item'
|
|
if (getParents(element, '.sub-menu').length) { // Checking if it's a submenu 'element' [in vertical menu sidebar - demo1]
|
|
element.closest('.collapse').classList.add('show'); // Adding class 'show' to the closest '.collapse' to expand submenu
|
|
element.classList.add('active'); // Adding class 'active' to the submenu '.nav-link'
|
|
}
|
|
if (getParents(element, '.submenu-item')) { // Checking if it's a submenu-item 'element' [in horizontal menu bottom-navbar - demo2]
|
|
element.classList.add('active'); // Adding class 'active' to the submenu-item '.nav-link'
|
|
if (element.closest('.nav-item.active .submenu')) { // Checking element has a submenu
|
|
element.closest('.nav-item.active').classList.add('show-submenu'); // adding class 'show-submenu' to the parent .nav-item (only for mobile/tablet)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// current url [Eg: dashboard.html]
|
|
const current = location.pathname.split("/").slice(-1)[0].replace(/^\/|\/$/g, '');
|
|
|
|
if (sidebar) {
|
|
const sidebarNavLinks = document.querySelectorAll('.sidebar .nav li a');
|
|
sidebarNavLinks.forEach( navLink => {
|
|
addActiveClass(navLink);
|
|
});
|
|
}
|
|
|
|
if (horizontalMenu) {
|
|
const navbarNavLinks = document.querySelectorAll('.horizontal-menu .nav li a');
|
|
navbarNavLinks.forEach( navLink => {
|
|
addActiveClass(navLink);
|
|
});
|
|
}
|
|
|
|
|
|
|
|
// Open & fold sidebar-folded on mouse enter and leave
|
|
if (sidebarBody) {
|
|
sidebarBody.addEventListener('mouseenter', function () {
|
|
if (body.classList.contains('sidebar-folded')) {
|
|
body.classList.add('open-sidebar-folded');
|
|
}
|
|
});
|
|
|
|
sidebarBody.addEventListener('mouseleave', function () {
|
|
if (body.classList.contains('sidebar-folded')) {
|
|
body.classList.remove('open-sidebar-folded');
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
|
|
// Close sidebar on click outside in phone/tablet
|
|
const mainWrapper = document.querySelector('.main-wrapper');
|
|
if (sidebar) {
|
|
document.addEventListener('touchstart', function(e) {
|
|
if (e.target === mainWrapper && body.classList.contains('sidebar-open')) {
|
|
body.classList.remove('sidebar-open');
|
|
document.querySelector('.sidebar .sidebar-toggler').classList.remove('active');
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
|
|
// Horizontal menu in small screen devices (mobile/tablet)
|
|
if (horizontalMenu) {
|
|
const horizontalMenuToggleButton = document.querySelector('[data-toggle="horizontal-menu-toggle"]');
|
|
const bottomNavbar = document.querySelector('.horizontal-menu .bottom-navbar');
|
|
if (horizontalMenuToggleButton) {
|
|
horizontalMenuToggleButton.addEventListener('click', function () {
|
|
bottomNavbar.classList.toggle('header-toggled');
|
|
horizontalMenuToggleButton.classList.toggle('open');
|
|
body.classList.toggle('header-open'); // used for creating backdrop
|
|
});
|
|
|
|
// To avoid layout issues, remove body and toggler classes on window resize.
|
|
window.addEventListener('resize', function(event) {
|
|
bottomNavbar.classList.remove('header-toggled');
|
|
horizontalMenuToggleButton.classList.remove('open');
|
|
body.classList.remove('header-open');
|
|
}, true);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
// Horizontal menu nav-item click submenu show/hide on mobile/tablet
|
|
if (horizontalMenu) {
|
|
const navItems = document.querySelectorAll('.horizontal-menu .page-navigation >.nav-item');
|
|
if (window.matchMedia('(max-width: 991px)').matches) {
|
|
navItems.forEach( function (navItem) {
|
|
navItem.addEventListener('click', function () {
|
|
if (!this.classList.contains('show-submenu')) {
|
|
navItems.forEach(function (navItem) {
|
|
navItem.classList.remove('show-submenu');
|
|
});
|
|
}
|
|
this.classList.toggle('show-submenu');
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
// Horizontal menu fixed on scroll on Demo2
|
|
if (horizontalMenu) {
|
|
window.addEventListener('scroll', function () {
|
|
if (window.matchMedia('(min-width: 992px)').matches) {
|
|
if (window.scrollY >= 60) {
|
|
horizontalMenu.classList.add('fixed-on-scroll');
|
|
} else {
|
|
horizontalMenu.classList.remove('fixed-on-scroll');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
|
|
// Prevent body scrolling while sidebar scroll
|
|
//
|
|
// if (sidebarBody) {
|
|
// sidebarBody.addEventListener('mouseover', function () {
|
|
// body.classList.add('overflow-hidden');
|
|
// });
|
|
// sidebarBody.addEventListener('mouseout', function () {
|
|
// body.classList.remove('overflow-hidden');
|
|
// });
|
|
// }
|
|
|
|
|
|
|
|
|
|
// Setup clipboard.js plugin (https://github.com/zenorocha/clipboard.js)
|
|
const clipboardButtons = document.querySelectorAll('.btn-clipboard');
|
|
|
|
if (clipboardButtons.length) {
|
|
|
|
clipboardButtons.forEach( btn => {
|
|
btn.addEventListener('mouseover', function() {
|
|
this.innerText = 'copy to clipboard';
|
|
});
|
|
btn.addEventListener('mouseout', function() {
|
|
this.innerText = 'copy';
|
|
});
|
|
});
|
|
|
|
const clipboard = new ClipboardJS('.btn-clipboard');
|
|
|
|
clipboard.on('success', function(e) {
|
|
e.trigger.innerHTML = 'copied';
|
|
setTimeout(function() {
|
|
e.trigger.innerHTML = 'copy';
|
|
e.clearSelection();
|
|
},300)
|
|
});
|
|
}
|
|
|
|
|
|
|
|
// Enable feather-icons with SVG markup
|
|
feather.replace();
|
|
|
|
})(); |