1
const settings = Object.assign({}, userSettings);
6
this.ManageThemeLayout();
7
this.ManageSidebarType();
8
this.ManageBoxedLayout();
9
this.ManageDirectionLayout();
10
this.ManageDarkThemeLayout();
11
this.ManageColorThemeLayout();
12
this.ManageCardLayout();
17
const horizontalLayoutElement =
18
document.getElementById("horizontal-layout");
19
const verticalLayoutElement = document.getElementById("vertical-layout");
21
switch (settings.Layout) {
23
if (horizontalLayoutElement) {
24
horizontalLayoutElement.checked = true;
26
document.documentElement.setAttribute("data-layout", "horizontal");
29
if (verticalLayoutElement) {
30
verticalLayoutElement.checked = true;
32
document.documentElement.setAttribute("data-layout", "vertical");
41
switch (settings.SidebarType) {
43
const fullSidebarElement = document.querySelector("#full-sidebar");
44
if (fullSidebarElement) {
45
fullSidebarElement.checked = true;
47
document.body.setAttribute("data-sidebartype", "full");
49
const setSidebarType = () => {
51
window.innerWidth > 0 ? window.innerWidth : screen.width;
53
document.body.setAttribute("data-sidebartype", "mini-sidebar");
55
document.body.setAttribute("data-sidebartype", "full");
58
window.addEventListener("DOMContentLoaded", setSidebarType);
59
window.addEventListener("resize", setSidebarType);
63
const miniSidebarElement = document.querySelector("#mini-sidebar");
64
if (miniSidebarElement) {
65
miniSidebarElement.checked = true;
67
document.body.setAttribute("data-sidebartype", "mini-sidebar");
77
const boxedLayoutElement = document.getElementById("boxed-layout");
78
const fullLayoutElement = document.getElementById("full-layout");
79
if (boxedLayoutElement) boxedLayoutElement.checked = true;
80
switch (settings.BoxedLayout) {
82
document.documentElement.setAttribute("data-boxed-layout", "boxed");
83
if (boxedLayoutElement) boxedLayoutElement.checked = true;
86
document.documentElement.setAttribute("data-boxed-layout", "full");
87
if (fullLayoutElement) fullLayoutElement.checked = true;
95
ManageDirectionLayout() {
96
const ltrLayoutElement = document.getElementById("ltr-layout");
97
const rtlLayoutElement = document.getElementById("rtl-layout");
99
switch (settings.Direction) {
101
if (ltrLayoutElement) {
102
ltrLayoutElement.checked = true;
104
document.documentElement.setAttribute("dir", "ltr");
105
const offcanvasStart = document.querySelector(".offcanvas-start");
106
if (offcanvasStart) {
107
offcanvasStart.classList.toggle("offcanvas-end");
108
offcanvasStart.classList.remove("offcanvas-start");
112
document.documentElement.setAttribute("dir", "rtl");
113
const offcanvasEnd = document.querySelector(".offcanvas-end");
115
offcanvasEnd.classList.toggle("offcanvas-start");
116
offcanvasEnd.classList.remove("offcanvas-end");
118
if (rtlLayoutElement) {
119
rtlLayoutElement.checked = true;
129
const cardWithoutBorderElement = document.getElementById(
130
"card-without-border"
132
const cardWithBorderElement = document.getElementById("card-with-border");
134
if (cardWithoutBorderElement) cardWithoutBorderElement.checked = true;
135
switch (settings.cardBorder) {
137
document.documentElement.setAttribute("data-card", "border");
138
if (cardWithBorderElement) cardWithBorderElement.checked = true;
141
document.documentElement.setAttribute("data-card", "shadow");
142
if (cardWithoutBorderElement) cardWithoutBorderElement.checked = true;
150
ManageDarkThemeLayout() {
151
const setTheme = (theme, hideElements, showElements, hideElements2) => {
152
document.documentElement.setAttribute("data-bs-theme", theme);
153
const themeLayoutElement = document.getElementById(`${theme}-layout`);
154
if (themeLayoutElement) {
155
themeLayoutElement.checked = true;
158
hideElements.forEach((el) =>
160
.querySelectorAll(`.${el}`)
161
.forEach((e) => (e.style.display = "none"))
163
showElements.forEach((el) =>
165
.querySelectorAll(`.${el}`)
166
.forEach((e) => (e.style.display = "flex"))
168
hideElements2.forEach((el) =>
170
.querySelectorAll(`.${el}`)
171
.forEach((e) => (e.style.display = "none"))
175
switch (settings.Theme) {
177
setTheme("light", ["light-logo"], ["moon"], ["sun"]);
180
setTheme("dark", ["dark-logo"], ["sun"], ["moon"]);
188
ManageColorThemeLayout() {
189
const {ColorTheme} = settings;
190
const colorThemeElement = document.getElementById(ColorTheme);
191
document.documentElement.setAttribute("data-color-theme", ColorTheme);
196
AdminSettings.AdminSettingsInit();
200
function set_settings () {
202
function handleDirection() {
203
const rtlLayoutElement = document.getElementById("rtl-layout");
204
const ltrLayoutElement = document.getElementById("ltr-layout");
206
if (rtlLayoutElement) {
207
rtlLayoutElement.addEventListener("click", function () {
208
document.documentElement.setAttribute("dir", "rtl");
209
const offcanvasEnd = document.querySelector(".offcanvas-end");
211
offcanvasEnd.classList.toggle("offcanvas-start");
212
offcanvasEnd.classList.remove("offcanvas-end");
215
document.cookie = "Direction="+"rtl"+";path=/;"
218
if (ltrLayoutElement) {
219
ltrLayoutElement.addEventListener("click", function () {
220
document.documentElement.setAttribute("dir", "ltr");
221
const offcanvasStart = document.querySelector(".offcanvas-start");
222
if (offcanvasStart) {
223
offcanvasStart.classList.toggle("offcanvas-end");
224
offcanvasStart.classList.remove("offcanvas-start");
227
document.cookie = "Direction="+"ltr"+";path=/;"
234
function handleBoxedLayout() {
235
const boxedLayout = document.getElementById("boxed-layout");
236
const fullLayout = document.getElementById("full-layout");
237
const containerFluid = document.querySelectorAll(".container-fluid");
239
boxedLayout.addEventListener("click", function () {
240
containerFluid.forEach((element) => element.classList.remove("mw-100"));
241
document.documentElement.setAttribute("data-boxed-layout", "boxed");
243
document.cookie = "BoxedLayout="+"true"+";path=/;"
248
fullLayout.addEventListener("click", function () {
249
containerFluid.forEach((element) => element.classList.add("mw-100"));
250
document.documentElement.setAttribute("data-boxed-layout", "full");
252
document.cookie = "BoxedLayout="+"false"+";path=/;"
260
function handleLayout() {
261
const verticalLayout = document.getElementById("vertical-layout");
262
const horizontalLayout = document.getElementById("horizontal-layout");
264
if (verticalLayout) {
265
verticalLayout.addEventListener("click", function () {
266
document.documentElement.setAttribute("data-layout", "vertical");
268
document.cookie = "Layout="+"vertical"+";path=/;"
272
if (horizontalLayout) {
273
horizontalLayout.addEventListener("click", function () {
274
document.documentElement.setAttribute("data-layout", "horizontal");
276
document.cookie = "Layout="+"horizontal"+";path=/;"
284
function handleTheme() {
285
function setThemeAttributes(
292
document.documentElement.setAttribute("data-bs-theme", theme);
293
const themeLayoutElement = document.getElementById(`${theme}-layout`);
294
if (themeLayoutElement) {
295
themeLayoutElement.checked = true;
297
if (theme == 'dark') {
298
document.cookie = "Theme="+"dark"+";path=/;"
300
document.cookie = "Theme="+"light"+";path=/;"
303
document.querySelectorAll(`.${darkDisplay}`)
304
.forEach((el) => (el.style.display = "none"));
305
document.querySelectorAll(`.${lightDisplay}`)
306
.forEach((el) => (el.style.display = "flex"));
307
document.querySelectorAll(`.${sunDisplay}`)
308
.forEach((el) => (el.style.display = "none"));
309
document.querySelectorAll(`.${moonDisplay}`)
310
.forEach((el) => (el.style.display = "flex"));
313
document.querySelectorAll(".dark-layout").forEach((element) => {
314
element.addEventListener("click", () =>
315
setThemeAttributes("dark", "dark-logo", "light-logo", "moon", "sun")
319
document.querySelectorAll(".light-layout").forEach((element) => {
320
element.addEventListener("click", () =>
321
setThemeAttributes("light", "light-logo", "dark-logo", "sun", "moon")
329
function handleCardLayout() {
330
function setCardAttribute(cardType) {
331
document.documentElement.setAttribute("data-card", cardType);
334
const cardWithBorderElement = document.getElementById("card-with-border");
335
const cardWithoutBorderElement = document.getElementById(
336
"card-without-border"
339
if (cardWithBorderElement) {
340
cardWithBorderElement.addEventListener("click", () =>
341
setCardAttribute("border")
344
if (cardWithoutBorderElement) {
345
cardWithoutBorderElement.addEventListener("click", () =>
346
setCardAttribute("shadow")
354
function handleSidebarToggle() {
355
function setSidebarType(sidebarType) {
356
document.body.setAttribute("data-sidebartype", sidebarType);
359
const fullSidebarElement = document.getElementById("full-sidebar");
360
const miniSidebarElement = document.getElementById("mini-sidebar");
362
if (fullSidebarElement) {
363
fullSidebarElement.addEventListener("click", () =>
364
setSidebarType("full")
366
document.cookie = "SidebarType="+"full"+";path=/;"
368
if (miniSidebarElement) {
369
miniSidebarElement.addEventListener("click", () =>
370
setSidebarType("mini-sidebar")
372
document.cookie = "SidebarType="+"mini-sidebar"+";path=/;"
376
handleSidebarToggle();
379
function handleSidebar() {
380
document.querySelectorAll(".sidebartoggler").forEach((element) => {
381
element.addEventListener("click", function () {
382
document.querySelectorAll(".sidebartoggler").forEach((el) => {
386
.getElementById("main-wrapper")
387
.classList.toggle("show-sidebar");
388
document.querySelectorAll(".sidebarmenu").forEach((el) => {
389
el.classList.toggle("close");
391
const dataTheme = document.body.getAttribute("data-sidebartype");
392
if (dataTheme === "full") {
393
document.body.setAttribute("data-sidebartype", "mini-sidebar");
394
document.cookie = "SidebarType="+"mini-sidebar"+";path=/;"
396
document.body.setAttribute("data-sidebartype", "full");
397
document.cookie = "SidebarType="+"full"+";path=/;"