"use strict"; (function() { var isWindows = navigator.platform.indexOf('Win') > -1 ? true : false; if (isWindows) { // if we are on windows OS we activate the perfectScrollbar function if (document.getElementsByClassName('main-content')[0]) { var mainpanel = document.querySelector('.main-content'); var ps = new PerfectScrollbar(mainpanel); }; if (document.getElementsByClassName('sidenav')[0]) { var sidebar = document.querySelector('.sidenav'); var ps1 = new PerfectScrollbar(sidebar); }; if (document.getElementsByClassName('navbar-collapse')[0]) { var fixedplugin = document.querySelector('.navbar:not(.navbar-expand-lg) .navbar-collapse'); var ps2 = new PerfectScrollbar(fixedplugin); }; if (document.getElementsByClassName('fixed-plugin')[0]) { var fixedplugin = document.querySelector('.fixed-plugin'); var ps3 = new PerfectScrollbar(fixedplugin); }; }; })(); // Verify navbar blur on scroll if (document.getElementById('navbarBlur')) { navbarBlurOnScroll('navbarBlur'); } // initialization of Tooltips var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl) }) // when input is focused add focused class for style function focused(el) { if (el.parentElement.classList.contains('input-group')) { el.parentElement.classList.add('focused'); } } // when input is focused remove focused class for style function defocused(el) { if (el.parentElement.classList.contains('input-group')) { el.parentElement.classList.remove('focused'); } } // helper for adding on all elements multiple attributes function setAttributes(el, options) { Object.keys(options).forEach(function(attr) { el.setAttribute(attr, options[attr]); }) } // adding on inputs attributes for calling the focused and defocused functions if (document.querySelectorAll('.input-group').length != 0) { var allInputs = document.querySelectorAll('input.form-control'); allInputs.forEach(el => setAttributes(el, { "onfocus": "focused(this)", "onfocusout": "defocused(this)" })); } // Fixed Plugin if (document.querySelector('.fixed-plugin')) { var fixedPlugin = document.querySelector('.fixed-plugin'); var fixedPluginButton = document.querySelector('.fixed-plugin-button'); var fixedPluginButtonNav = document.querySelector('.fixed-plugin-button-nav'); var fixedPluginCard = document.querySelector('.fixed-plugin .card'); var fixedPluginCloseButton = document.querySelectorAll('.fixed-plugin-close-button'); var navbar = document.getElementById('navbarBlur'); var buttonNavbarFixed = document.getElementById('navbarFixed'); if (fixedPluginButton) { fixedPluginButton.onclick = function() { if (!fixedPlugin.classList.contains('show')) { fixedPlugin.classList.add('show'); } else { fixedPlugin.classList.remove('show'); } } } if (fixedPluginButtonNav) { fixedPluginButtonNav.onclick = function() { if (!fixedPlugin.classList.contains('show')) { fixedPlugin.classList.add('show'); } else { fixedPlugin.classList.remove('show'); } } } fixedPluginCloseButton.forEach(function(el) { el.onclick = function() { fixedPlugin.classList.remove('show'); } }) document.querySelector('body').onclick = function(e) { if (e.target != fixedPluginButton && e.target != fixedPluginButtonNav && e.target.closest('.fixed-plugin .card') != fixedPluginCard) { fixedPlugin.classList.remove('show'); } } if (navbar) { if (navbar.getAttribute('data-scroll') == 'true' && buttonNavbarFixed) { buttonNavbarFixed.setAttribute("checked", "true"); } } } //Set Sidebar Color function sidebarColor(a) { var parent = a.parentElement.children; var color = a.getAttribute("data-color"); for (var i = 0; i < parent.length; i++) { parent[i].classList.remove('active'); } if (!a.classList.contains('active')) { a.classList.add('active'); } else { a.classList.remove('active'); } var sidebar = document.querySelector('.sidenav'); sidebar.setAttribute("data-color", color); if (document.querySelector('#sidenavCard')) { var sidenavCard = document.querySelector('#sidenavCard+.btn+.btn'); let sidenavCardClasses = ['btn', 'btn-sm', 'w-100', 'mb-0', 'bg-gradient-' + color]; sidenavCard.removeAttribute('class'); sidenavCard.classList.add(...sidenavCardClasses); } } // Set Sidebar Type function sidebarType(a) { var parent = a.parentElement.children; var color = a.getAttribute("data-class"); var body = document.querySelector("body"); var bodyWhite = document.querySelector("body:not(.dark-version)"); var bodyDark = body.classList.contains('dark-version'); var colors = []; for (var i = 0; i < parent.length; i++) { parent[i].classList.remove('active'); colors.push(parent[i].getAttribute('data-class')); } if (!a.classList.contains('active')) { a.classList.add('active'); } else { a.classList.remove('active'); } var sidebar = document.querySelector('.sidenav'); for (var i = 0; i < colors.length; i++) { sidebar.classList.remove(colors[i]); } sidebar.classList.add(color); // Remove text-white/text-dark classes if (color == 'bg-white') { var textWhites = document.querySelectorAll('.sidenav .text-white'); for (let i = 0; i < textWhites.length; i++) { textWhites[i].classList.remove('text-white'); textWhites[i].classList.add('text-dark'); } } else { var textDarks = document.querySelectorAll('.sidenav .text-dark'); for (let i = 0; i < textDarks.length; i++) { textDarks[i].classList.add('text-white'); textDarks[i].classList.remove('text-dark'); } } if (color == 'bg-default' && bodyDark) { var textDarks = document.querySelectorAll('.navbar-brand .text-dark'); for (let i = 0; i < textDarks.length; i++) { textDarks[i].classList.add('text-white'); textDarks[i].classList.remove('text-dark'); } } // Remove logo-white/logo-dark if ((color == 'bg-white') && bodyWhite) { var navbarBrand = document.querySelector('.navbar-brand-img'); var navbarBrandImg = navbarBrand.src; if (navbarBrandImg.includes('logo-ct.png')) { var navbarBrandImgNew = navbarBrandImg.replace("logo-ct", "logo-ct-dark"); navbarBrand.src = navbarBrandImgNew; } } else { var navbarBrand = document.querySelector('.navbar-brand-img'); var navbarBrandImg = navbarBrand.src; if (navbarBrandImg.includes('logo-ct-dark.png')) { var navbarBrandImgNew = navbarBrandImg.replace("logo-ct-dark", "logo-ct"); navbarBrand.src = navbarBrandImgNew; } } if (color == 'bg-white' && bodyDark) { var navbarBrand = document.querySelector('.navbar-brand-img'); var navbarBrandImg = navbarBrand.src; if (navbarBrandImg.includes('logo-ct.png')) { var navbarBrandImgNew = navbarBrandImg.replace("logo-ct", "logo-ct-dark"); navbarBrand.src = navbarBrandImgNew; } } } // Set Navbar Fixed function navbarFixed(el) { let classes = ['position-sticky', 'bg-white', 'left-auto', 'top-2', 'z-index-sticky']; const navbar = document.getElementById('navbarBlur'); if (!el.getAttribute("checked")) { toggleNavLinksColor('blur'); navbar.classList.add(...classes); navbar.setAttribute('data-scroll', 'true'); navbarBlurOnScroll('navbarBlur'); el.setAttribute("checked", "true"); } else { toggleNavLinksColor('transparent'); navbar.classList.remove(...classes); navbar.setAttribute('data-scroll', 'false'); navbarBlurOnScroll('navbarBlur'); el.removeAttribute("checked"); } }; // Set Navbar Minimized function navbarMinimize(el) { var sidenavShow = document.getElementsByClassName('g-sidenav-show')[0]; if (!el.getAttribute("checked")) { sidenavShow.classList.remove('g-sidenav-pinned'); sidenavShow.classList.add('g-sidenav-hidden'); el.setAttribute("checked", "true"); } else { sidenavShow.classList.remove('g-sidenav-hidden'); sidenavShow.classList.add('g-sidenav-pinned'); el.removeAttribute("checked"); } } function toggleNavLinksColor(type) { let navLinks = document.querySelectorAll('.navbar-main .nav-link, .navbar-main .breadcrumb-item, .navbar-main .breadcrumb-item a, .navbar-main h6') let navLinksToggler = document.querySelectorAll('.navbar-main .sidenav-toggler-line') if (type === "blur") { navLinks.forEach(element => { element.classList.remove('text-white') }); navLinksToggler.forEach(element => { element.classList.add('bg-dark') element.classList.remove('bg-white') }); } else if (type === "transparent") { navLinks.forEach(element => { element.classList.add('text-white') }); navLinksToggler.forEach(element => { element.classList.remove('bg-dark') element.classList.add('bg-white') }); } } // Navbar blur on scroll function navbarBlurOnScroll(id) { const navbar = document.getElementById(id); let navbarScrollActive = navbar ? navbar.getAttribute("data-scroll") : false; let scrollDistance = 5; let classes = ['bg-white', 'left-auto', 'position-sticky']; let toggleClasses = ['shadow-none']; if (navbarScrollActive == 'true') { window.onscroll = debounce(function() { if (window.scrollY > scrollDistance) { blurNavbar(); } else { transparentNavbar(); } }, 10); } else { window.onscroll = debounce(function() { transparentNavbar(); }, 10); } var isWindows = navigator.platform.indexOf('Win') > -1 ? true : false; if (isWindows) { var content = document.querySelector('.main-content'); if (navbarScrollActive == 'true') { content.addEventListener('ps-scroll-y', debounce(function() { if (content.scrollTop > scrollDistance) { blurNavbar(); } else { transparentNavbar(); } }, 10)); } else { content.addEventListener('ps-scroll-y', debounce(function() { transparentNavbar(); }, 10)); } } function blurNavbar() { navbar.classList.add(...classes) navbar.classList.remove(...toggleClasses) toggleNavLinksColor('blur'); } function transparentNavbar() { navbar.classList.remove(...classes) navbar.classList.add(...toggleClasses) toggleNavLinksColor('transparent'); } } // Debounce Function // Returns a function, that, as long as it continues to be invoked, will not // be triggered. The function will be called after it stops being called for // N milliseconds. If `immediate` is passed, trigger the function on the // leading edge, instead of the trailing. function debounce(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; }; // Toggle Sidenav const iconNavbarSidenav = document.getElementById('iconNavbarSidenav'); const iconSidenav = document.getElementById('iconSidenav'); const sidenav = document.getElementById('sidenav-main'); let body = document.getElementsByTagName('body')[0]; let className = 'g-sidenav-pinned'; if (iconNavbarSidenav) { iconNavbarSidenav.addEventListener("click", toggleSidenav); } if (iconSidenav) { iconSidenav.addEventListener("click", toggleSidenav); } function toggleSidenav() { if (body.classList.contains(className)) { body.classList.remove(className); setTimeout(function() { sidenav.classList.remove('bg-white'); }, 100); sidenav.classList.remove('bg-transparent'); } else { body.classList.add(className); sidenav.classList.add('bg-white'); sidenav.classList.remove('bg-transparent'); iconSidenav.classList.remove('d-none'); } } let html = document.getElementsByTagName('html')[0]; html.addEventListener("click", function(e) { if (body.classList.contains('g-sidenav-pinned') && !e.target.classList.contains('sidenav-toggler-line')) { body.classList.remove(className); } }); // Resize navbar color depends on configurator active type of sidenav let referenceButtons = document.querySelector('[data-class]'); window.addEventListener("resize", navbarColorOnResize); function navbarColorOnResize() { if (window.innerWidth > 1200) { if (referenceButtons.classList.contains('active') && referenceButtons.getAttribute('data-class') === 'bg-transparent') { sidenav.classList.remove('bg-white'); } else { if (!body.classList.contains('dark-version')) { sidenav.classList.add('bg-white'); } } } else { sidenav.classList.add('bg-white'); sidenav.classList.remove('bg-transparent'); } } // Deactivate sidenav type buttons on resize and small screens window.addEventListener("resize", sidenavTypeOnResize); window.addEventListener("load", sidenavTypeOnResize); function sidenavTypeOnResize() { let elements = document.querySelectorAll('[onclick="sidebarType(this)"]'); if (window.innerWidth < 1200) { elements.forEach(function(el) { el.classList.add('disabled'); }); } else { elements.forEach(function(el) { el.classList.remove('disabled'); }); } } // Tabs navigation var total = document.querySelectorAll('.nav-pills'); total.forEach(function(item, i) { var moving_div = document.createElement('div'); var first_li = item.querySelector('li:first-child .nav-link'); var tab = first_li.cloneNode(); tab.innerHTML = "-"; moving_div.classList.add('moving-tab', 'position-absolute', 'nav-link'); moving_div.appendChild(tab); item.appendChild(moving_div); var list_length = item.getElementsByTagName("li").length; moving_div.style.padding = '0px'; moving_div.style.width = item.querySelector('li:nth-child(1)').offsetWidth + 'px'; moving_div.style.transform = 'translate3d(0px, 0px, 0px)'; moving_div.style.transition = '.5s ease'; item.onmouseover = function(event) { let target = getEventTarget(event); let li = target.closest('li'); // get reference if (li) { let nodes = Array.from(li.closest('ul').children); // get array let index = nodes.indexOf(li) + 1; item.querySelector('li:nth-child(' + index + ') .nav-link').onclick = function() { moving_div = item.querySelector('.moving-tab'); let sum = 0; if (item.classList.contains('flex-column')) { for (var j = 1; j <= nodes.indexOf(li); j++) { sum += item.querySelector('li:nth-child(' + j + ')').offsetHeight; } moving_div.style.transform = 'translate3d(0px,' + sum + 'px, 0px)'; moving_div.style.height = item.querySelector('li:nth-child(' + j + ')').offsetHeight; } else { for (var j = 1; j <= nodes.indexOf(li); j++) { sum += item.querySelector('li:nth-child(' + j + ')').offsetWidth; } moving_div.style.transform = 'translate3d(' + sum + 'px, 0px, 0px)'; moving_div.style.width = item.querySelector('li:nth-child(' + index + ')').offsetWidth + 'px'; } } } } }); // Tabs navigation resize window.addEventListener('resize', function(event) { total.forEach(function(item, i) { item.querySelector('.moving-tab').remove(); var moving_div = document.createElement('div'); var tab = item.querySelector(".nav-link.active").cloneNode(); tab.innerHTML = "-"; moving_div.classList.add('moving-tab', 'position-absolute', 'nav-link'); moving_div.appendChild(tab); item.appendChild(moving_div); moving_div.style.padding = '0px'; moving_div.style.transition = '.5s ease'; let li = item.querySelector(".nav-link.active").parentElement; if (li) { let nodes = Array.from(li.closest('ul').children); // get array let index = nodes.indexOf(li) + 1; let sum = 0; if (item.classList.contains('flex-column')) { for (var j = 1; j <= nodes.indexOf(li); j++) { sum += item.querySelector('li:nth-child(' + j + ')').offsetHeight; } moving_div.style.transform = 'translate3d(0px,' + sum + 'px, 0px)'; moving_div.style.width = item.querySelector('li:nth-child(' + index + ')').offsetWidth + 'px'; moving_div.style.height = item.querySelector('li:nth-child(' + j + ')').offsetHeight; } else { for (var j = 1; j <= nodes.indexOf(li); j++) { sum += item.querySelector('li:nth-child(' + j + ')').offsetWidth; } moving_div.style.transform = 'translate3d(' + sum + 'px, 0px, 0px)'; moving_div.style.width = item.querySelector('li:nth-child(' + index + ')').offsetWidth + 'px'; } } }); if (window.innerWidth < 991) { total.forEach(function(item, i) { if (!item.classList.contains('flex-column')) { item.classList.add('flex-column', 'on-resize'); } }); } else { total.forEach(function(item, i) { if (item.classList.contains('on-resize')) { item.classList.remove('flex-column', 'on-resize'); } }) } }); function getEventTarget(e) { e = e || window.event; return e.target || e.srcElement; } // End tabs navigation // Light Mode / Dark Mode function darkMode(el) { const body = document.getElementsByTagName('body')[0]; const hr = document.querySelectorAll('div:not(.sidenav) > hr'); const sidebar = document.querySelector('.sidenav'); const sidebarWhite = document.querySelectorAll('.sidenav.bg-white'); const hr_card = document.querySelectorAll('div:not(.bg-gradient-dark) hr'); const text_btn = document.querySelectorAll('button:not(.btn) > .text-dark'); const text_span = document.querySelectorAll('span.text-dark, .breadcrumb .text-dark'); const text_span_white = document.querySelectorAll('span.text-white'); const text_strong = document.querySelectorAll('strong.text-dark'); const text_strong_white = document.querySelectorAll('strong.text-white'); const text_nav_link = document.querySelectorAll('a.nav-link.text-dark'); const secondary = document.querySelectorAll('.text-secondary'); const bg_gray_100 = document.querySelectorAll('.bg-gray-100'); const bg_gray_600 = document.querySelectorAll('.bg-gray-600'); const btn_text_dark = document.querySelectorAll('.btn.btn-link.text-dark, .btn .ni.text-dark'); const btn_text_white = document.querySelectorAll('.btn.btn-link.text-white, .btn .ni.text-white'); const card_border = document.querySelectorAll('.card.border'); const card_border_dark = document.querySelectorAll('.card.border.border-dark'); const svg = document.querySelectorAll('g'); const navbarBrand = document.querySelector('.navbar-brand-img'); const navbarBrandImg = navbarBrand.src; const navLinks = document.querySelectorAll('.navbar-main .nav-link, .navbar-main .breadcrumb-item, .navbar-main .breadcrumb-item a, .navbar-main h6'); const cardNavLinksIcons = document.querySelectorAll('.card .nav .nav-link i'); const cardNavSpan = document.querySelectorAll('.card .nav .nav-link span'); if (!el.getAttribute("checked")) { body.classList.add('dark-version'); if (navbarBrandImg.includes('logo-ct-dark.png')) { var navbarBrandImgNew = navbarBrandImg.replace("logo-ct-dark", "logo-ct"); navbarBrand.src = navbarBrandImgNew; } for (var i = 0; i < cardNavLinksIcons.length; i++) { if (cardNavLinksIcons[i].classList.contains('text-dark')) { cardNavLinksIcons[i].classList.remove('text-dark'); cardNavLinksIcons[i].classList.add('text-white'); } } for (var i = 0; i < cardNavSpan.length; i++) { if (cardNavSpan[i].classList.contains('text-sm')) { cardNavSpan[i].classList.add('text-white'); } } for (var i = 0; i < hr.length; i++) { if (hr[i].classList.contains('dark')) { hr[i].classList.remove('dark'); hr[i].classList.add('light'); } } for (var i = 0; i < hr_card.length; i++) { if (hr_card[i].classList.contains('dark')) { hr_card[i].classList.remove('dark'); hr_card[i].classList.add('light'); } } for (var i = 0; i < text_btn.length; i++) { if (text_btn[i].classList.contains('text-dark')) { text_btn[i].classList.remove('text-dark'); text_btn[i].classList.add('text-white'); } } for (var i = 0; i < text_span.length; i++) { if (text_span[i].classList.contains('text-dark')) { text_span[i].classList.remove('text-dark'); text_span[i].classList.add('text-white'); } } for (var i = 0; i < text_strong.length; i++) { if (text_strong[i].classList.contains('text-dark')) { text_strong[i].classList.remove('text-dark'); text_strong[i].classList.add('text-white'); } } for (var i = 0; i < text_nav_link.length; i++) { if (text_nav_link[i].classList.contains('text-dark')) { text_nav_link[i].classList.remove('text-dark'); text_nav_link[i].classList.add('text-white'); } } for (var i = 0; i < secondary.length; i++) { if (secondary[i].classList.contains('text-secondary')) { secondary[i].classList.remove('text-secondary'); secondary[i].classList.add('text-white'); secondary[i].classList.add('opacity-8'); } } for (var i = 0; i < bg_gray_100.length; i++) { if (bg_gray_100[i].classList.contains('bg-gray-100')) { bg_gray_100[i].classList.remove('bg-gray-100'); bg_gray_100[i].classList.add('bg-gray-600'); } } for (var i = 0; i < btn_text_dark.length; i++) { btn_text_dark[i].classList.remove('text-dark'); btn_text_dark[i].classList.add('text-white'); } for (var i = 0; i < sidebarWhite.length; i++) { sidebarWhite[i].classList.remove('bg-white'); } for (var i = 0; i < svg.length; i++) { if (svg[i].hasAttribute('fill')) { svg[i].setAttribute('fill', '#fff'); } } for (var i = 0; i < card_border.length; i++) { card_border[i].classList.add('border-dark'); } el.setAttribute("checked", "true"); } else { body.classList.remove('dark-version'); sidebar.classList.add('bg-white'); if (navbarBrandImg.includes('logo-ct.png')) { var navbarBrandImgNew = navbarBrandImg.replace("logo-ct", "logo-ct-dark"); navbarBrand.src = navbarBrandImgNew; } for (var i = 0; i < navLinks.length; i++) { if (navLinks[i].classList.contains('text-dark')) { navLinks[i].classList.add('text-white'); navLinks[i].classList.remove('text-dark'); } } for (var i = 0; i < cardNavLinksIcons.length; i++) { if (cardNavLinksIcons[i].classList.contains('text-white')) { cardNavLinksIcons[i].classList.remove('text-white'); cardNavLinksIcons[i].classList.add('text-dark'); } } for (var i = 0; i < cardNavSpan.length; i++) { if (cardNavSpan[i].classList.contains('text-white')) { cardNavSpan[i].classList.remove('text-white'); } } for (var i = 0; i < hr.length; i++) { if (hr[i].classList.contains('light')) { hr[i].classList.add('dark'); hr[i].classList.remove('light'); } } for (var i = 0; i < hr_card.length; i++) { if (hr_card[i].classList.contains('light')) { hr_card[i].classList.add('dark'); hr_card[i].classList.remove('light'); } } for (var i = 0; i < text_btn.length; i++) { if (text_btn[i].classList.contains('text-white')) { text_btn[i].classList.remove('text-white'); text_btn[i].classList.add('text-dark'); } } for (var i = 0; i < text_span_white.length; i++) { if (text_span_white[i].classList.contains('text-white') && !text_span_white[i].closest('.sidenav') && !text_span_white[i].closest('.card.bg-gradient-dark')) { text_span_white[i].classList.remove('text-white'); text_span_white[i].classList.add('text-dark'); } } for (var i = 0; i < text_strong_white.length; i++) { if (text_strong_white[i].classList.contains('text-white')) { text_strong_white[i].classList.remove('text-white'); text_strong_white[i].classList.add('text-dark'); } } for (var i = 0; i < secondary.length; i++) { if (secondary[i].classList.contains('text-white')) { secondary[i].classList.remove('text-white'); secondary[i].classList.remove('opacity-8'); secondary[i].classList.add('text-dark'); } } for (var i = 0; i < bg_gray_600.length; i++) { if (bg_gray_600[i].classList.contains('bg-gray-600')) { bg_gray_600[i].classList.remove('bg-gray-600'); bg_gray_600[i].classList.add('bg-gray-100'); } } for (var i = 0; i < svg.length; i++) { if (svg[i].hasAttribute('fill')) { svg[i].setAttribute('fill', '#252f40'); } } for (var i = 0; i < btn_text_white.length; i++) { if (!btn_text_white[i].closest('.card.bg-gradient-dark')) { btn_text_white[i].classList.remove('text-white'); btn_text_white[i].classList.add('text-dark'); } } for (var i = 0; i < card_border_dark.length; i++) { card_border_dark[i].classList.remove('border-dark'); } el.removeAttribute("checked"); } };