const initAppToggler = () => {
const appTogglers = document.querySelectorAll(".app-toggler");
const appMenubars = document.getElementById("appMenubar"); // single element
if (!appMenubars || appTogglers.length === 0) return;
appTogglers.forEach(toggler => {
toggler.addEventListener("click", () => {
toggler.classList.toggle("active");
if (window.innerWidth >= 1191) {
// Toggle the value between 'full' and 'mini'
const currentValue = document.documentElement.getAttribute("data-app-sidebar");
document.documentElement.setAttribute(
"data-app-sidebar",
currentValue === "full" ? "mini" : "full"
);
} else {
// For <1191, toggle 'open' on the single menubar
appMenubars.classList.toggle("open");
}
});
});
// Hover logic for mini sidebar
appMenubars.addEventListener("mouseenter", () => {
if (document.documentElement.getAttribute("data-app-sidebar") === "mini") {
document.documentElement.setAttribute("data-app-sidebar", "mini-hover");
}
});
appMenubars.addEventListener("mouseleave", () => {
if (document.documentElement.getAttribute("data-app-sidebar") === "mini-hover") {
document.documentElement.setAttribute("data-app-sidebar", "mini");
}
});
};
const saerchList = () => {
let listItems = [];
// JSON load
$.getJSON("assets/ajax/search.json", function(data) {
listItems = data.listItems;
});
// Search functionality
$("#searchInput").on("keyup", function() {
let query = $(this).val().toLowerCase();
let searchContainer = $("#searchContainer");
searchContainer.empty();
searchContainer.hide();
$('#recentlyResults').hide();
if (query.length === 0) {
searchContainer.hide();
$('#recentlyResults').show();
return;
}
let matched = listItems.filter(item =>
item.name.toLowerCase().includes(query) ||
item.url.toLowerCase().includes(query)
);
if (matched.length > 0) {
let grouped = {};
matched.forEach(item => {
if (!grouped[item.category]) grouped[item.category] = [];
grouped[item.category].push(item);
});
for (let cat in grouped) {
searchContainer.append(
`${cat}`
);
let ul = $("
No result found
Please try again with a different query
`);
searchContainer.show();
}
});
};
const currentYear = () => {
const elements = document.querySelectorAll('.currentYear');
const currentYear = new Date().getFullYear();
elements.forEach(element => {
element.textContent = currentYear;
});
};
const setElementHeight = () => {
const footer = document.querySelector('.footer-wrapper');
if (footer) {
const footerHeight = footer ? footer.offsetHeight : 0;
document.documentElement.style.setProperty('--footer-height', `${footerHeight}px`);
}
const chatBox = document.querySelector('.chat-wrapper');
if (chatBox) {
const chatHeight = chatBox.offsetHeight;
document.documentElement.style.setProperty('--chat-height', `${chatHeight}px`);
}
};
const initSelectPicker = () => {
document.querySelectorAll('.select-status').forEach(dropdown => {
const toggleButton = dropdown.querySelector('.dropdown-toggle');
const items = dropdown.querySelectorAll('.dropdown-item');
const updateButtonClassAndText = (text, selectedClass) => {
// Remove btn-* except btn-sm, btn-lg
toggleButton.classList.forEach(cls => {
if (/^btn-/.test(cls) && !['btn-sm', 'btn-lg'].includes(cls)) {
toggleButton.classList.remove(cls);
}
});
if (selectedClass) {
toggleButton.classList.add(...selectedClass.split(' '));
}
toggleButton.textContent = text;
};
// Handle default selection on page load
const selectedItem = dropdown.querySelector('.dropdown-item[data-selected="true"]');
if (selectedItem) {
const defaultText = selectedItem.textContent.trim();
const defaultClass = selectedItem.getAttribute('data-class');
updateButtonClassAndText(defaultText, defaultClass);
}
// Handle selection on click
items.forEach(item => {
item.addEventListener('click', (e) => {
e.preventDefault();
items.forEach(i => i.removeAttribute('data-selected'));
item.setAttribute('data-selected', 'true');
const selectedText = item.textContent.trim();
const selectedClass = item.getAttribute('data-class');
updateButtonClassAndText(selectedText, selectedClass);
});
});
});
};
function initSectionCheckboxSync() {
document.querySelectorAll('.data-row-checkbox').forEach(function(section) {
const masterCheckbox = section.querySelector('[data-row-checkbox]');
const checkboxes = section.querySelectorAll('[data-checkbox]');
if (!masterCheckbox || checkboxes.length === 0) return;
masterCheckbox.addEventListener('change', function() {
const checked = this.checked;
checkboxes.forEach(function(cb) {
cb.checked = checked;
});
});
checkboxes.forEach(function(cb) {
cb.addEventListener('change', function() {
const allChecked = Array.from(checkboxes).every(c => c.checked);
masterCheckbox.checked = allChecked;
});
});
});
}
function initTooltips() {
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
}
function initPopover() {
const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
const popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
}
function initSidebarMenu() {
jQuery('.app-navbar .menubar > li.menu-arrow > a').next('.menu-inner').slideUp();
jQuery('.app-navbar .menu-inner > li > a').next('.menu-inner').slideUp();
jQuery('.app-navbar .menubar > li.menu-arrow > a, .app-navbar .menu-inner > li > a').unbind().on('click', function(e){
if(jQuery(this).hasClass('open')){
jQuery(this).removeClass('open');
jQuery(this).parent('li').children('.menu-inner').slideUp();
}else{
if (!window.event.ctrlKey) {
jQuery(this).addClass('open');
}
if(jQuery(this).parent('li').children('.menu-inner').length > 0){
e.preventDefault();
jQuery(this).next('.menu-inner').slideDown();
jQuery(this).parent('li').siblings('li').find('a:first').removeClass('open');
jQuery(this).parent('li').siblings('li').children('.menu-inner').slideUp();
}else{
jQuery(this).next('.menu-inner').slideUp();
}
}
});
for (var nk = window.location,
o = $(".app-navbar .menubar a").filter(function(){
return this.href == nk;
}).addClass("active").parent().addClass("active").parent().show().siblings('a').addClass("active open").parent().parent().show().siblings('a').addClass("open");;){
if (!o.is("li")) {
break;
}
o = o.parent().slideDown().parent('li').children('a').addClass("active");
}
}
function initCheckable() {
document.querySelectorAll('.checkable-wrapper').forEach(function(wrapper) {
const checkAll = wrapper.querySelector('.checkable-check-all');
const checkboxes = wrapper.querySelectorAll('.checkable-check-input');
// Initialize checked state on load
checkboxes.forEach(function(checkbox) {
const item = checkbox.closest('.checkable-item');
if (checkbox.checked && item) {
item.classList.add('is-checked');
}
});
// Handle "Select All"
if (checkAll) {
checkAll.addEventListener('change', function () {
const isChecked = this.checked;
checkboxes.forEach(function(checkbox) {
checkbox.checked = isChecked;
const item = checkbox.closest('.checkable-item');
if (item) {
item.classList.toggle('is-checked', isChecked);
}
});
});
}
// Handle individual checkbox toggle
wrapper.addEventListener('change', function (e) {
if (e.target.matches('.checkable-check-input')) {
const item = e.target.closest('.checkable-item');
if (item) {
item.classList.toggle('is-checked', e.target.checked);
}
// Update "Select All" state
const allChecked = wrapper.querySelectorAll('.checkable-check-input:not(:checked)').length === 0;
if (checkAll) {
checkAll.checked = allChecked;
}
}
});
});
}
function initEmailSidebarToggle() {
const toggler = document.querySelector('.mail-sidebar-toggler');
const sidebar = document.querySelector('.mail-sidebar');
const overlay = document.querySelector('.sidebar-mobile-overlay');
if (toggler && sidebar && overlay) {
toggler.addEventListener('click', () => {
sidebar.classList.toggle('open');
overlay.classList.toggle('show', sidebar.classList.contains('open'));
});
overlay.addEventListener('click', () => {
sidebar.classList.remove('open');
overlay.classList.remove('show');
});
}
}
function initChatSidebarToggle() {
const toggler = document.querySelector('.chat-sidebar-toggler');
const sidebar = document.querySelector('.chat-sidebar');
const overlay = document.querySelector('.sidebar-mobile-overlay');
const btnClose = document.querySelector('.btn-close');
if (toggler && sidebar && overlay) {
toggler.addEventListener('click', () => {
sidebar.classList.toggle('open');
overlay.classList.toggle('show', sidebar.classList.contains('open'));
});
overlay.addEventListener('click', () => {
sidebar.classList.remove('open');
overlay.classList.remove('show');
});
btnClose.addEventListener('click', () => {
sidebar.classList.remove('open');
overlay.classList.remove('show');
});
}
}
function initBookmarks() {
document.addEventListener('click', (e) => {
const bookmark = e.target.closest('.mail-item-bookmark');
if (bookmark) {
bookmark.classList.toggle('active');
}
});
}
const ThemeSwitcher = () => {
'use strict';
// Cookie Utility: Get a cookie value by name
const getCookie = (name) => {
const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
return match ? match[2] : null;
};
// Cookie Utility: Set a cookie with optional expiry
const setCookie = (name, value, days = 365) => {
const expires = new Date(Date.now() + days * 864e5).toUTCString();
document.cookie = `${name}=${value}; expires=${expires}; path=/`;
};
// Get stored theme from cookie (if available)
const getStoredTheme = () => getCookie('theme');
// Save selected theme to cookie
const setStoredTheme = (theme) => setCookie('theme', theme);
// Determine preferred theme: cookie > system preference
const getPreferredTheme = () => {
const storedTheme = getStoredTheme();
if (storedTheme) return storedTheme;
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
};
// Apply the theme to
const setTheme = (theme) => {
const appliedTheme = (theme === 'auto')
? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
: theme;
document.documentElement.setAttribute('data-bs-theme', appliedTheme);
};
// Update active state and icon based on selected theme
const showActiveTheme = (theme, focus = false) => {
const themeSwitcher = document.querySelector('#ld-theme'); // button
const themeSwitcherText = document.querySelector('#ld-theme-text'); // button label
const activeThemeIcon = document.querySelector('.theme-icon-active'); //