deving
This commit is contained in:
9
res/assets/js/theme/app.dark.init.js
Normal file
9
res/assets/js/theme/app.dark.init.js
Normal file
@@ -0,0 +1,9 @@
|
||||
var userSettings = {
|
||||
Layout: "vertical", // vertical | horizontal
|
||||
SidebarType: "full", // full | mini-sidebar
|
||||
BoxedLayout: true, // true | false
|
||||
Direction: "ltr", // ltr | rtl
|
||||
Theme: "dark", // light | dark
|
||||
ColorTheme: "Blue_Theme", // Blue_Theme | Aqua_Theme | Purple_Theme | Green_Theme | Cyan_Theme | Orange_Theme
|
||||
cardBorder: false, // true | false
|
||||
};
|
||||
9
res/assets/js/theme/app.horizontal.init.js
Normal file
9
res/assets/js/theme/app.horizontal.init.js
Normal file
@@ -0,0 +1,9 @@
|
||||
var userSettings = {
|
||||
Layout: "horizontal", // vertical | horizontal
|
||||
SidebarType: "full", // full | mini-sidebar
|
||||
BoxedLayout: true, // true | false
|
||||
Direction: "ltr", // ltr | rtl
|
||||
Theme: "light", // light | dark
|
||||
ColorTheme: "Blue_Theme", // Blue_Theme | Aqua_Theme | Purple_Theme | Green_Theme | Cyan_Theme | Orange_Theme
|
||||
cardBorder: false, // true | false
|
||||
};
|
||||
9
res/assets/js/theme/app.init.js
Normal file
9
res/assets/js/theme/app.init.js
Normal file
@@ -0,0 +1,9 @@
|
||||
var userSettings = {
|
||||
Layout: "vertical", // vertical | horizontal
|
||||
SidebarType: "full", // full | mini-sidebar
|
||||
BoxedLayout: true, // true | false
|
||||
Direction: "ltr", // ltr | rtl
|
||||
Theme: "light", // light | dark
|
||||
ColorTheme: "Blue_Theme", // Blue_Theme | Aqua_Theme | Purple_Theme | Green_Theme | Cyan_Theme | Orange_Theme
|
||||
cardBorder: false, // true | false
|
||||
};
|
||||
392
res/assets/js/theme/app.min.js
vendored
Normal file
392
res/assets/js/theme/app.min.js
vendored
Normal file
@@ -0,0 +1,392 @@
|
||||
const settings = Object.assign({}, userSettings);
|
||||
|
||||
const AdminSettings = {
|
||||
// Settings INIT
|
||||
AdminSettingsInit() {
|
||||
this.ManageThemeLayout();
|
||||
this.ManageSidebarType();
|
||||
this.ManageBoxedLayout();
|
||||
this.ManageDirectionLayout();
|
||||
this.ManageDarkThemeLayout();
|
||||
this.ManageColorThemeLayout();
|
||||
this.ManageCardLayout();
|
||||
},
|
||||
|
||||
// Vertical / Horizontal Layout
|
||||
ManageThemeLayout() {
|
||||
const horizontalLayoutElement =
|
||||
document.getElementById("horizontal-layout");
|
||||
const verticalLayoutElement = document.getElementById("vertical-layout");
|
||||
|
||||
switch (settings.Layout) {
|
||||
case "horizontal":
|
||||
if (horizontalLayoutElement) {
|
||||
horizontalLayoutElement.checked = true;
|
||||
}
|
||||
document.documentElement.setAttribute("data-layout", "horizontal");
|
||||
break;
|
||||
case "vertical":
|
||||
if (verticalLayoutElement) {
|
||||
verticalLayoutElement.checked = true;
|
||||
}
|
||||
document.documentElement.setAttribute("data-layout", "vertical");
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
// Full / Mini Sidebar Type
|
||||
ManageSidebarType() {
|
||||
switch (settings.SidebarType) {
|
||||
case "full":
|
||||
const fullSidebarElement = document.querySelector("#full-sidebar");
|
||||
if (fullSidebarElement) {
|
||||
fullSidebarElement.checked = true;
|
||||
}
|
||||
document.body.setAttribute("data-sidebartype", "full");
|
||||
|
||||
const setSidebarType = () => {
|
||||
const width =
|
||||
window.innerWidth > 0 ? window.innerWidth : screen.width;
|
||||
if (width < 1300) {
|
||||
document.body.setAttribute("data-sidebartype", "mini-sidebar");
|
||||
} else {
|
||||
document.body.setAttribute("data-sidebartype", "full");
|
||||
}
|
||||
};
|
||||
window.addEventListener("DOMContentLoaded", setSidebarType);
|
||||
window.addEventListener("resize", setSidebarType);
|
||||
break;
|
||||
|
||||
case "mini-sidebar":
|
||||
const miniSidebarElement = document.querySelector("#mini-sidebar");
|
||||
if (miniSidebarElement) {
|
||||
miniSidebarElement.checked = true;
|
||||
}
|
||||
document.body.setAttribute("data-sidebartype", "mini-sidebar");
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
// Layout Boxed or Full
|
||||
ManageBoxedLayout() {
|
||||
const boxedLayoutElement = document.getElementById("boxed-layout");
|
||||
const fullLayoutElement = document.getElementById("full-layout");
|
||||
|
||||
if (boxedLayoutElement) boxedLayoutElement.checked = true;
|
||||
switch (settings.BoxedLayout) {
|
||||
case true:
|
||||
document.documentElement.setAttribute("data-boxed-layout", "boxed");
|
||||
if (boxedLayoutElement) boxedLayoutElement.checked = true;
|
||||
break;
|
||||
case false:
|
||||
document.documentElement.setAttribute("data-boxed-layout", "full");
|
||||
if (fullLayoutElement) fullLayoutElement.checked = true;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
// Direction Type
|
||||
ManageDirectionLayout() {
|
||||
const ltrLayoutElement = document.getElementById("ltr-layout");
|
||||
const rtlLayoutElement = document.getElementById("rtl-layout");
|
||||
|
||||
switch (settings.Direction) {
|
||||
case "ltr":
|
||||
if (ltrLayoutElement) {
|
||||
ltrLayoutElement.checked = true;
|
||||
}
|
||||
document.documentElement.setAttribute("dir", "ltr");
|
||||
const offcanvasStart = document.querySelector(".offcanvas-start");
|
||||
if (offcanvasStart) {
|
||||
offcanvasStart.classList.toggle("offcanvas-end");
|
||||
offcanvasStart.classList.remove("offcanvas-start");
|
||||
}
|
||||
break;
|
||||
case "rtl":
|
||||
document.documentElement.setAttribute("dir", "rtl");
|
||||
const offcanvasEnd = document.querySelector(".offcanvas-end");
|
||||
if (offcanvasEnd) {
|
||||
offcanvasEnd.classList.toggle("offcanvas-start");
|
||||
offcanvasEnd.classList.remove("offcanvas-end");
|
||||
}
|
||||
if (rtlLayoutElement) {
|
||||
rtlLayoutElement.checked = true;
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
// Card Type
|
||||
ManageCardLayout() {
|
||||
const cardWithoutBorderElement = document.getElementById(
|
||||
"card-without-border"
|
||||
);
|
||||
const cardWithBorderElement = document.getElementById("card-with-border");
|
||||
|
||||
if (cardWithoutBorderElement) cardWithoutBorderElement.checked = true;
|
||||
switch (settings.cardBorder) {
|
||||
case true:
|
||||
document.documentElement.setAttribute("data-card", "border");
|
||||
if (cardWithBorderElement) cardWithBorderElement.checked = true;
|
||||
break;
|
||||
case false:
|
||||
document.documentElement.setAttribute("data-card", "shadow");
|
||||
if (cardWithoutBorderElement) cardWithoutBorderElement.checked = true;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
// Theme Dark or Light
|
||||
ManageDarkThemeLayout() {
|
||||
const setTheme = (theme, hideElements, showElements, hideElements2) => {
|
||||
document.documentElement.setAttribute("data-bs-theme", theme);
|
||||
const themeLayoutElement = document.getElementById(`${theme}-layout`);
|
||||
if (themeLayoutElement) {
|
||||
themeLayoutElement.checked = true;
|
||||
}
|
||||
|
||||
hideElements.forEach((el) =>
|
||||
document
|
||||
.querySelectorAll(`.${el}`)
|
||||
.forEach((e) => (e.style.display = "none"))
|
||||
);
|
||||
showElements.forEach((el) =>
|
||||
document
|
||||
.querySelectorAll(`.${el}`)
|
||||
.forEach((e) => (e.style.display = "flex"))
|
||||
);
|
||||
hideElements2.forEach((el) =>
|
||||
document
|
||||
.querySelectorAll(`.${el}`)
|
||||
.forEach((e) => (e.style.display = "none"))
|
||||
);
|
||||
};
|
||||
|
||||
switch (settings.Theme) {
|
||||
case "light":
|
||||
setTheme("light", ["light-logo"], ["moon"], ["sun"]);
|
||||
break;
|
||||
case "dark":
|
||||
setTheme("dark", ["dark-logo"], ["sun"], ["moon"]);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
// Theme Color
|
||||
ManageColorThemeLayout() {
|
||||
const { ColorTheme } = settings;
|
||||
const colorThemeElement = document.getElementById(ColorTheme);
|
||||
|
||||
if (colorThemeElement) {
|
||||
document.documentElement.setAttribute("data-color-theme", ColorTheme);
|
||||
colorThemeElement.checked = true;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
// Initialize settings
|
||||
AdminSettings.AdminSettingsInit();
|
||||
|
||||
// Handle Click
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
// Theme Direction RTL LTR click
|
||||
function handleDirection() {
|
||||
const rtlLayoutElement = document.getElementById("rtl-layout");
|
||||
const ltrLayoutElement = document.getElementById("ltr-layout");
|
||||
|
||||
if (rtlLayoutElement) {
|
||||
rtlLayoutElement.addEventListener("click", function () {
|
||||
document.documentElement.setAttribute("dir", "rtl");
|
||||
const offcanvasEnd = document.querySelector(".offcanvas-end");
|
||||
if (offcanvasEnd) {
|
||||
offcanvasEnd.classList.toggle("offcanvas-start");
|
||||
offcanvasEnd.classList.remove("offcanvas-end");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (ltrLayoutElement) {
|
||||
ltrLayoutElement.addEventListener("click", function () {
|
||||
document.documentElement.setAttribute("dir", "ltr");
|
||||
const offcanvasStart = document.querySelector(".offcanvas-start");
|
||||
if (offcanvasStart) {
|
||||
offcanvasStart.classList.toggle("offcanvas-end");
|
||||
offcanvasStart.classList.remove("offcanvas-start");
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
handleDirection();
|
||||
|
||||
// Theme Layout Box or Full
|
||||
function handleBoxedLayout() {
|
||||
const boxedLayout = document.getElementById("boxed-layout");
|
||||
const fullLayout = document.getElementById("full-layout");
|
||||
const containerFluid = document.querySelectorAll(".container-fluid");
|
||||
|
||||
if (boxedLayout) {
|
||||
boxedLayout.addEventListener("click", function () {
|
||||
containerFluid.forEach((element) => element.classList.remove("mw-100"));
|
||||
document.documentElement.setAttribute("data-boxed-layout", "boxed");
|
||||
this.checked;
|
||||
});
|
||||
}
|
||||
|
||||
if (fullLayout) {
|
||||
fullLayout.addEventListener("click", function () {
|
||||
containerFluid.forEach((element) => element.classList.add("mw-100"));
|
||||
document.documentElement.setAttribute("data-boxed-layout", "full");
|
||||
this.checked;
|
||||
});
|
||||
}
|
||||
}
|
||||
handleBoxedLayout();
|
||||
|
||||
// Theme Layout Vertical or Horizontal
|
||||
function handleLayout() {
|
||||
const verticalLayout = document.getElementById("vertical-layout");
|
||||
const horizontalLayout = document.getElementById("horizontal-layout");
|
||||
|
||||
if (verticalLayout) {
|
||||
verticalLayout.addEventListener("click", function () {
|
||||
document.documentElement.setAttribute("data-layout", "vertical");
|
||||
this.checked;
|
||||
});
|
||||
}
|
||||
|
||||
if (horizontalLayout) {
|
||||
horizontalLayout.addEventListener("click", function () {
|
||||
document.documentElement.setAttribute("data-layout", "horizontal");
|
||||
this.checked;
|
||||
});
|
||||
}
|
||||
}
|
||||
handleLayout();
|
||||
|
||||
// Theme mode Dark or Light
|
||||
function handleTheme() {
|
||||
function setThemeAttributes(
|
||||
theme,
|
||||
darkDisplay,
|
||||
lightDisplay,
|
||||
sunDisplay,
|
||||
moonDisplay
|
||||
) {
|
||||
document.documentElement.setAttribute("data-bs-theme", theme);
|
||||
const themeLayoutElement = document.getElementById(`${theme}-layout`);
|
||||
if (themeLayoutElement) {
|
||||
themeLayoutElement.checked = true;
|
||||
}
|
||||
|
||||
document
|
||||
.querySelectorAll(`.${darkDisplay}`)
|
||||
.forEach((el) => (el.style.display = "none"));
|
||||
document
|
||||
.querySelectorAll(`.${lightDisplay}`)
|
||||
.forEach((el) => (el.style.display = "flex"));
|
||||
document
|
||||
.querySelectorAll(`.${sunDisplay}`)
|
||||
.forEach((el) => (el.style.display = "none"));
|
||||
document
|
||||
.querySelectorAll(`.${moonDisplay}`)
|
||||
.forEach((el) => (el.style.display = "flex"));
|
||||
}
|
||||
|
||||
document.querySelectorAll(".dark-layout").forEach((element) => {
|
||||
element.addEventListener("click", () =>
|
||||
setThemeAttributes("dark", "dark-logo", "light-logo", "moon", "sun")
|
||||
);
|
||||
});
|
||||
|
||||
document.querySelectorAll(".light-layout").forEach((element) => {
|
||||
element.addEventListener("click", () =>
|
||||
setThemeAttributes("light", "light-logo", "dark-logo", "sun", "moon")
|
||||
);
|
||||
});
|
||||
}
|
||||
handleTheme();
|
||||
|
||||
// Theme card with Border or Shadow
|
||||
function handleCardLayout() {
|
||||
function setCardAttribute(cardType) {
|
||||
document.documentElement.setAttribute("data-card", cardType);
|
||||
}
|
||||
|
||||
const cardWithBorderElement = document.getElementById("card-with-border");
|
||||
const cardWithoutBorderElement = document.getElementById(
|
||||
"card-without-border"
|
||||
);
|
||||
|
||||
if (cardWithBorderElement) {
|
||||
cardWithBorderElement.addEventListener("click", () =>
|
||||
setCardAttribute("border")
|
||||
);
|
||||
}
|
||||
if (cardWithoutBorderElement) {
|
||||
cardWithoutBorderElement.addEventListener("click", () =>
|
||||
setCardAttribute("shadow")
|
||||
);
|
||||
}
|
||||
}
|
||||
handleCardLayout();
|
||||
|
||||
// Theme Sidebar
|
||||
function handleSidebarToggle() {
|
||||
function setSidebarType(sidebarType) {
|
||||
document.body.setAttribute("data-sidebartype", sidebarType);
|
||||
}
|
||||
|
||||
const fullSidebarElement = document.getElementById("full-sidebar");
|
||||
const miniSidebarElement = document.getElementById("mini-sidebar");
|
||||
|
||||
if (fullSidebarElement) {
|
||||
fullSidebarElement.addEventListener("click", () =>
|
||||
setSidebarType("full")
|
||||
);
|
||||
}
|
||||
if (miniSidebarElement) {
|
||||
miniSidebarElement.addEventListener("click", () =>
|
||||
setSidebarType("mini-sidebar")
|
||||
);
|
||||
}
|
||||
}
|
||||
handleSidebarToggle();
|
||||
|
||||
// Toggle Sidebar
|
||||
function handleSidebar() {
|
||||
document.querySelectorAll(".sidebartoggler").forEach((element) => {
|
||||
element.addEventListener("click", function () {
|
||||
document.querySelectorAll(".sidebartoggler").forEach((el) => {
|
||||
el.checked = true;
|
||||
});
|
||||
document
|
||||
.getElementById("main-wrapper")
|
||||
.classList.toggle("show-sidebar");
|
||||
document.querySelectorAll(".sidebarmenu").forEach((el) => {
|
||||
el.classList.toggle("close");
|
||||
});
|
||||
const dataTheme = document.body.getAttribute("data-sidebartype");
|
||||
if (dataTheme === "full") {
|
||||
document.body.setAttribute("data-sidebartype", "mini-sidebar");
|
||||
} else {
|
||||
document.body.setAttribute("data-sidebartype", "full");
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
handleSidebar();
|
||||
});
|
||||
9
res/assets/js/theme/app.minisidebar.init.js
Normal file
9
res/assets/js/theme/app.minisidebar.init.js
Normal file
@@ -0,0 +1,9 @@
|
||||
var userSettings = {
|
||||
Layout: "vertical", // vertical | horizontal
|
||||
SidebarType: "mini-sidebar", // full | mini-sidebar
|
||||
BoxedLayout: true, // true | false
|
||||
Direction: "ltr", // ltr | rtl
|
||||
Theme: "light", // light | dark
|
||||
ColorTheme: "Blue_Theme", // Blue_Theme | Aqua_Theme | Purple_Theme | Green_Theme | Cyan_Theme | Orange_Theme
|
||||
cardBorder: false, // true | false
|
||||
};
|
||||
9
res/assets/js/theme/app.rtl.init.js
Normal file
9
res/assets/js/theme/app.rtl.init.js
Normal file
@@ -0,0 +1,9 @@
|
||||
var userSettings = {
|
||||
Layout: "vertical", // vertical | horizontal
|
||||
SidebarType: "full", // full | mini-sidebar
|
||||
BoxedLayout: true, // true | false
|
||||
Direction: "rtl", // ltr | rtl
|
||||
Theme: "light", // light | dark
|
||||
ColorTheme: "Blue_Theme", // Blue_Theme | Aqua_Theme | Purple_Theme | Green_Theme | Cyan_Theme | Orange_Theme
|
||||
cardBorder: false, // true | false
|
||||
};
|
||||
112
res/assets/js/theme/sidebarmenu.js
Normal file
112
res/assets/js/theme/sidebarmenu.js
Normal file
@@ -0,0 +1,112 @@
|
||||
var at = document.documentElement.getAttribute("data-layout");
|
||||
if ((at = "vertical")) {
|
||||
|
||||
// ----------------------------------------
|
||||
// Active 2 file at same time
|
||||
// ----------------------------------------
|
||||
|
||||
var currentNewURL =
|
||||
window.location != window.parent.location
|
||||
? document.referrer
|
||||
: document.location.href;
|
||||
|
||||
var current_link = document.getElementById("get-url");
|
||||
if (currentNewURL.includes("/main/index.html")) {
|
||||
current_link.setAttribute("href", "../main/index.html");
|
||||
} else if (currentNewURL.includes("/index.html")) {
|
||||
current_link.setAttribute("href", "./index.html");
|
||||
} else {
|
||||
current_link.setAttribute("href", "./");
|
||||
}
|
||||
// end
|
||||
|
||||
|
||||
function findMatchingElement() {
|
||||
var currentUrl = window.location.href;
|
||||
var anchors = document.querySelectorAll("#sidebarnav a");
|
||||
for (var i = 0; i < anchors.length; i++) {
|
||||
if (anchors[i].href === currentUrl) {
|
||||
return anchors[i];
|
||||
}
|
||||
}
|
||||
|
||||
return null; // Return null if no matching element is found
|
||||
}
|
||||
var elements = findMatchingElement();
|
||||
|
||||
// Do something with the matching element
|
||||
if (elements) {
|
||||
elements.classList.add("active");
|
||||
}
|
||||
|
||||
document
|
||||
.querySelectorAll("ul#sidebarnav ul li a.active")
|
||||
.forEach(function (link) {
|
||||
link.closest("ul").classList.add("in");
|
||||
link.closest("ul").parentElement.classList.add("selected");
|
||||
});
|
||||
|
||||
document.querySelectorAll("#sidebarnav li").forEach(function (li) {
|
||||
const isActive = li.classList.contains("selected");
|
||||
if (isActive) {
|
||||
const anchor = li.querySelector("a");
|
||||
if (anchor) {
|
||||
anchor.classList.add("active");
|
||||
}
|
||||
}
|
||||
});
|
||||
document.querySelectorAll("#sidebarnav a").forEach(function (link) {
|
||||
link.addEventListener("click", function (e) {
|
||||
const isActive = this.classList.contains("active");
|
||||
const parentUl = this.closest("ul");
|
||||
if (!isActive) {
|
||||
// hide any open menus and remove all other classes
|
||||
parentUl.querySelectorAll("ul").forEach(function (submenu) {
|
||||
submenu.classList.remove("in");
|
||||
});
|
||||
parentUl.querySelectorAll("a").forEach(function (navLink) {
|
||||
navLink.classList.remove("active");
|
||||
});
|
||||
|
||||
// open our new menu and add the open class
|
||||
const submenu = this.nextElementSibling;
|
||||
if (submenu) {
|
||||
submenu.classList.add("in");
|
||||
}
|
||||
|
||||
this.classList.add("active");
|
||||
} else {
|
||||
this.classList.remove("active");
|
||||
parentUl.classList.remove("active");
|
||||
const submenu = this.nextElementSibling;
|
||||
if (submenu) {
|
||||
submenu.classList.remove("in");
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
if ((at = "horizontal")) {
|
||||
function findMatchingElement() {
|
||||
var currentUrl = window.location.href;
|
||||
var anchors = document.querySelectorAll("#sidebarnavh ul#sidebarnav a");
|
||||
for (var i = 0; i < anchors.length; i++) {
|
||||
if (anchors[i].href === currentUrl) {
|
||||
return anchors[i];
|
||||
}
|
||||
}
|
||||
|
||||
return null; // Return null if no matching element is found
|
||||
}
|
||||
var elements = findMatchingElement();
|
||||
|
||||
if (elements) {
|
||||
elements.classList.add("active");
|
||||
}
|
||||
document
|
||||
.querySelectorAll("#sidebarnavh ul#sidebarnav a.active")
|
||||
.forEach(function (link) {
|
||||
link.closest("a").parentElement.classList.add("selected");
|
||||
link.closest("ul").parentElement.classList.add("selected");
|
||||
});
|
||||
}
|
||||
64
res/assets/js/theme/theme.js
Normal file
64
res/assets/js/theme/theme.js
Normal file
@@ -0,0 +1,64 @@
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
"use strict";
|
||||
|
||||
// =================================
|
||||
// Tooltip
|
||||
// =================================
|
||||
const tooltipTriggerList = Array.from(
|
||||
document.querySelectorAll('[data-bs-toggle="tooltip"]')
|
||||
);
|
||||
tooltipTriggerList.forEach((tooltipTriggerEl) => {
|
||||
new bootstrap.Tooltip(tooltipTriggerEl);
|
||||
});
|
||||
|
||||
// =================================
|
||||
// Popover
|
||||
// =================================
|
||||
var popoverTriggerList = [].slice.call(
|
||||
document.querySelectorAll('[data-bs-toggle="popover"]')
|
||||
);
|
||||
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
|
||||
return new bootstrap.Popover(popoverTriggerEl);
|
||||
});
|
||||
// =================================
|
||||
// Hide preloader
|
||||
// =================================
|
||||
var preloader = document.querySelector(".preloader");
|
||||
if (preloader) {
|
||||
preloader.style.display = "none";
|
||||
}
|
||||
// =================================
|
||||
// Increment & Decrement
|
||||
// =================================
|
||||
var quantityButtons = document.querySelectorAll(".minus, .add");
|
||||
if (quantityButtons) {
|
||||
quantityButtons.forEach(function (button) {
|
||||
button.addEventListener("click", function () {
|
||||
var qtyInput = this.closest("div").querySelector(".qty");
|
||||
var currentVal = parseInt(qtyInput.value);
|
||||
var isAdd = this.classList.contains("add");
|
||||
|
||||
if (!isNaN(currentVal)) {
|
||||
qtyInput.value = isAdd
|
||||
? ++currentVal
|
||||
: currentVal > 0
|
||||
? --currentVal
|
||||
: currentVal;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
// =================================
|
||||
// Fixed header
|
||||
// =================================
|
||||
window.addEventListener("scroll", function () {
|
||||
var topbar = document.querySelector(".topbar");
|
||||
if (topbar) {
|
||||
if (window.scrollY >= 60) {
|
||||
topbar.classList.add("shadow-sm");
|
||||
} else {
|
||||
topbar.classList.remove("shadow-sm");
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user