350 lines
10 KiB
JavaScript
350 lines
10 KiB
JavaScript
// -----------------------------------------------------------------------------------
|
|
|
|
// Template Name: ki-admin Admin
|
|
// Template URI: http://admin.la-themes.com/ki-admin/theme
|
|
// Description: This is Admin theme
|
|
// Author: la-themes
|
|
// Author URI: https://themeforest.net/user/la-themes
|
|
|
|
// -----------------------------------------------------------------------------------
|
|
|
|
// 01. Horizontal Nav js
|
|
// 02. Flag Icon Js
|
|
// 03. copy js
|
|
// 04. sidebar toggle js
|
|
// 05. List page js
|
|
// 06. Sidebar scroll js
|
|
// 07. Loader JS
|
|
// 08. tap on top
|
|
// 09. flag dropdown
|
|
// 10. hide-show
|
|
// 11. dark mode js
|
|
// 12. close on click js
|
|
// 13. searchbar js
|
|
// 14. closeCollapse js
|
|
// 15. Modal js
|
|
|
|
|
|
// >>-- 01 Horizontal Nav Js --<<
|
|
let navBar = $(".main-nav");
|
|
let size = "150px";
|
|
let leftsideLimit = -100;
|
|
let navbarSize;
|
|
let containerWidth;
|
|
let maxNavbarLimit;
|
|
|
|
function setUpHorizontalHeader() {
|
|
navbarSize = navBar.width();
|
|
containerWidth = ($(".simplebar-content").width())
|
|
maxNavbarLimit = -(navbarSize - containerWidth);
|
|
if ($("nav").hasClass("horizontal-sidebar")) {
|
|
$(".menu-next").removeClass("d-none");
|
|
$(".menu-previous").removeClass("d-none");
|
|
} else {
|
|
navBar.css("marginLeft",0)
|
|
$(".menu-next").addClass("d-none");
|
|
$(".menu-previous").addClass("d-none");
|
|
}
|
|
$(".horizontal-sidebar .show").removeClass("show");
|
|
}
|
|
|
|
$(document).on('click', '.menu-previous', function (e) {
|
|
let layoutOption = getLocalStorageItem("layout-option","ltr");
|
|
let attribute = (layoutOption == 'ltr' || layoutOption == 'box-layout') ? 'marginLeft' : 'marginRight';
|
|
let currentPosition = parseInt(navBar.css(attribute));
|
|
if (currentPosition < 0) {
|
|
navBar.css(`${attribute}`, "+=" + size)
|
|
$(".menu-next").removeClass("d-none");
|
|
$(".menu-previous").removeClass("d-none");
|
|
if (currentPosition >= leftsideLimit) {
|
|
$(this).addClass("d-none");
|
|
}
|
|
}
|
|
})
|
|
|
|
$(document).on('click', '.menu-next', function (e) {
|
|
let layoutOption = getLocalStorageItem("layout-option","ltr");
|
|
let attribute = (layoutOption == 'ltr' || layoutOption == 'box-layout') ? 'marginLeft' : 'marginRight';
|
|
let currentPosition = parseInt(navBar.css(attribute));
|
|
if (currentPosition >= maxNavbarLimit) {
|
|
$(".menu-next").removeClass("d-none");
|
|
$(".menu-previous").removeClass("d-none");
|
|
navBar.css(`${attribute}`, "-=" + size)
|
|
if (currentPosition - parseInt(size) <= maxNavbarLimit) {
|
|
$(this).addClass("d-none");
|
|
}
|
|
}
|
|
})
|
|
|
|
$(function () {
|
|
setUpHorizontalHeader();
|
|
let themeMode = getLocalStorageItem('theme-mode', 'light')
|
|
setTimeout(() => {
|
|
$('body').addClass(`${themeMode}`)
|
|
}, 1500);
|
|
});
|
|
|
|
|
|
// >>-- 02 Flag Icon Js --<<
|
|
$(function () {
|
|
let text = $(".selected i").attr('class')
|
|
$(".flag i").prop('class', text);
|
|
$(document).on('click', '.lang', function () {
|
|
$(".lang").removeClass("selected");
|
|
$(this).addClass("selected");
|
|
text = $(".selected i").attr('class')
|
|
$(".flag i").prop('class', text);
|
|
});
|
|
})
|
|
|
|
|
|
|
|
// >>-- 03 Copy js --<<
|
|
function copyvalue() {
|
|
let temp = document.createElement('input');
|
|
let texttoCopy = document.getElementById('copyText2').innerHTML;
|
|
temp.type = 'input';
|
|
temp.setAttribute('value', texttoCopy);
|
|
document.body.appendChild(temp);
|
|
temp.select();
|
|
document.execCommand("copy");
|
|
temp.remove();
|
|
console.timeEnd('time2');
|
|
}
|
|
|
|
|
|
|
|
// >>-- 04 Sidebar toggle js --<<
|
|
$(document).on('click', '.header-toggle', function () {
|
|
$("nav").toggleClass("semi-nav");
|
|
});
|
|
$(".toggle-semi-nav").on("click", function () {
|
|
$("nav").removeClass("semi-nav");
|
|
});
|
|
|
|
|
|
// >>-- 05 List page js --<<
|
|
const $window = $(window);
|
|
const $nav = $('nav');
|
|
const $contactListbox = $(".contact-listbox");
|
|
|
|
// Event listener for click
|
|
$contactListbox.on("click", function () {
|
|
$(this).toggleClass("stared");
|
|
});
|
|
|
|
function resize() {
|
|
$nav.removeClass('semi-nav');
|
|
if ($window.width() < 768) {
|
|
} else if ($window.width() < 1199) {
|
|
$nav.addClass('semi-nav');
|
|
}
|
|
}
|
|
$(function () {
|
|
resize();
|
|
});
|
|
|
|
window.addEventListener("resize", () => {
|
|
resize();
|
|
});
|
|
|
|
// >>-- 06 Sidebar scroll js --<<
|
|
const myElement = document.getElementById('app-simple-bar');
|
|
if (myElement) {
|
|
new SimpleBar(myElement, { autoHide: true });
|
|
}
|
|
|
|
// Sidebar active class js
|
|
$(function () {
|
|
const current = location.pathname.split('/').pop();
|
|
const $mainNavLinks = $('.main-nav li a');
|
|
|
|
$mainNavLinks.each(function () {
|
|
const $this = $(this);
|
|
const linkHref = $this.attr("href").split('/').pop();
|
|
|
|
if (current === linkHref) {
|
|
const $parentLi = $this.parent('li');
|
|
const $parentUl = $this.parent().parent().parent();
|
|
const $grandParentUl = $parentUl.parent().parent().parent();
|
|
|
|
if ($grandParentUl.hasClass("another-level")) {
|
|
$grandParentUl.closest('li').children().addClass('show').attr("aria-expanded", "true");
|
|
}
|
|
|
|
$parentUl.children().addClass('show').attr("aria-expanded", "true");
|
|
$parentLi.addClass('active');
|
|
}
|
|
});
|
|
});
|
|
// >>-- 07 Loader JS --<<
|
|
$('.loader-wrapper').fadeOut('slow', function () {
|
|
$(this).remove();
|
|
});
|
|
|
|
|
|
// >>-- 08 tap on top --<<
|
|
let calcScrollValue = () => {
|
|
const $scrollProgress = document.getElementsByClassName("go-top")[0];
|
|
const $progressValue = document.getElementsByClassName("progress-value")[0];
|
|
const docElement = document.documentElement;
|
|
|
|
const pos = docElement.scrollTop;
|
|
const calcHeight = docElement.scrollHeight - docElement.clientHeight;
|
|
const scrollValue = Math.round((pos * 100) / calcHeight);
|
|
|
|
if (pos > 100) {
|
|
$scrollProgress.style.display = 'grid';
|
|
} else {
|
|
$scrollProgress.style.display = 'none';
|
|
}
|
|
|
|
$scrollProgress.addEventListener("click", () => {
|
|
docElement.scrollTop = 0;
|
|
});
|
|
|
|
$scrollProgress.style.background = `conic-gradient(rgba(var(--primary), 1) ${scrollValue}%, rgba(var(--primary), 1) ${scrollValue}%)`;
|
|
};
|
|
|
|
window.onscroll = calcScrollValue;
|
|
|
|
|
|
// >>-- 09 Flag dropdown --<<
|
|
$(function () {
|
|
const $flagImg = $(".flag img");
|
|
const $flagIcon = $(".flag i");
|
|
const $langs = $(".lang");
|
|
|
|
// Initialize image and icon from the selected language
|
|
const initialSelected = $(".lang.selected");
|
|
const initialImgSrc = initialSelected.find("img").attr("src");
|
|
const initialIconClass = initialSelected.find("i").attr("class");
|
|
|
|
$flagImg.prop("src", initialImgSrc);
|
|
$flagIcon.prop("class", initialIconClass);
|
|
|
|
$(document).on("click", ".lang", function () {
|
|
$langs.removeClass("selected");
|
|
|
|
const $this = $(this);
|
|
$this.addClass("selected");
|
|
|
|
const newImgSrc = $this.find("img").attr("src");
|
|
const newIconClass = $this.find("i").attr("class");
|
|
|
|
$flagImg.prop("src", newImgSrc);
|
|
$flagIcon.prop("class", newIconClass);
|
|
});
|
|
});
|
|
|
|
|
|
|
|
// >>-- 10 Hide-show --<<
|
|
|
|
const appElement = document.getElementById("myapp");
|
|
const $buttonContent = $("#button-content");
|
|
const $buttonCode = $("#button-code");
|
|
|
|
function myFunction() {
|
|
if (appElement.style.display === "none") {
|
|
appElement.style.display = "block";
|
|
const buttoncontent = $buttonContent.html().replace(/</g, "<").replace(/>/g, ">");
|
|
$buttonCode.html(buttoncontent);
|
|
} else {
|
|
appElement.style.display = "none";
|
|
$buttonCode.html("");
|
|
}
|
|
}
|
|
|
|
|
|
// >>-- 11 Dark mode js --<<
|
|
|
|
const themeToggle = document.querySelector(".header-dark");
|
|
|
|
if (themeToggle) {
|
|
themeToggle.addEventListener("click", () => {
|
|
document.querySelector(".sun-logo")?.classList.toggle("sun");
|
|
document.querySelector(".moon-logo")?.classList.toggle("moon");
|
|
|
|
const isDark = document.body.classList.contains("dark");
|
|
document.body.classList.toggle("dark", !isDark);
|
|
document.body.classList.toggle("light", isDark);
|
|
setLocalStorageItem('theme-mode', isDark ? 'light' : 'dark');
|
|
});
|
|
}
|
|
function appendHtml() {
|
|
let div = document.getElementsByClassName('app-wrapper');
|
|
div.innerHTML += '<p>This is some HTML code</p>';
|
|
}
|
|
window.onload = function () {
|
|
appendHtml();
|
|
}
|
|
|
|
// >>-- 12 Close on click js --<<
|
|
|
|
$(document).on('click', '.close-btn', function () {
|
|
let targetItem = $(this).closest(".head-box");
|
|
let targetParent = targetItem.parent();
|
|
$(this).parent().parent().remove();
|
|
if (targetParent.find(".head-box").length <= 0) {
|
|
targetParent.parent().parent().find('.head-box-footer').addClass('d-none');
|
|
targetParent.parent().parent().find('.offcanvas-body').addClass('h-auto');
|
|
}
|
|
});
|
|
|
|
// >>-- 13 Searchbar js --<<
|
|
$(document).on('keyup', '.search-filter', function () {
|
|
const search = $(this).val().toLowerCase();
|
|
$('.search-list-item').each(function () {
|
|
const item = $(this);
|
|
const contentElement = item.find('.search-list-content h6');
|
|
const contentText = contentElement.text().toLowerCase();
|
|
|
|
if (contentText.includes(search)) {
|
|
item.show();
|
|
const highlightedText = contentText.replace(new RegExp(search, 'gi'), function (match) {
|
|
return `<span class="highlight-searchtext">${match}</span>`;
|
|
});
|
|
contentElement.html(highlightedText);
|
|
} else {
|
|
item.hide();
|
|
}
|
|
});
|
|
});
|
|
|
|
// >>-- 14 CloseCollapse js --<<
|
|
const closeCollaps = document.querySelectorAll('.main-nav li a[data-bs-toggle="collapse"]');
|
|
|
|
closeCollaps.forEach((element) => {
|
|
element.addEventListener('click', () => {
|
|
const parent = element.closest('.collapse');
|
|
const all = document.querySelectorAll('.main-nav ul.collapse');
|
|
|
|
all.forEach((e) => {
|
|
if (e !== parent) {
|
|
e.classList.remove('show');
|
|
const ariaExpand = e.previousElementSibling;
|
|
if (ariaExpand) ariaExpand.setAttribute('aria-expanded', 'false');
|
|
}
|
|
});
|
|
|
|
parent?.classList.add('show');
|
|
const ariaExpand = element;
|
|
if (ariaExpand) ariaExpand.setAttribute('aria-expanded', 'true');
|
|
});
|
|
});
|
|
// >>-- 15 Modal js --<<
|
|
|
|
$(function () {
|
|
$('#welcomeCard').modal('show');
|
|
});
|
|
|
|
function copyTextToClipboard(text) {
|
|
let textarea = document.createElement('textarea');
|
|
textarea.value = text;
|
|
document.body.appendChild(textarea);
|
|
textarea.select();
|
|
document.execCommand('copy');
|
|
document.body.removeChild(textarea);
|
|
}
|