lavkach3

1
const settings = Object.assign({}, userSettings);
2

3
const AdminSettings = {
4
    // Settings INIT
5
    AdminSettingsInit() {
6
        this.ManageThemeLayout();
7
        this.ManageSidebarType();
8
        this.ManageBoxedLayout();
9
        this.ManageDirectionLayout();
10
        this.ManageDarkThemeLayout();
11
        this.ManageColorThemeLayout();
12
        this.ManageCardLayout();
13
    },
14

15
    // Vertical / Horizontal Layout
16
    ManageThemeLayout() {
17
        const horizontalLayoutElement =
18
            document.getElementById("horizontal-layout");
19
        const verticalLayoutElement = document.getElementById("vertical-layout");
20

21
        switch (settings.Layout) {
22
            case "horizontal":
23
                if (horizontalLayoutElement) {
24
                    horizontalLayoutElement.checked = true;
25
                }
26
                document.documentElement.setAttribute("data-layout", "horizontal");
27
                break;
28
            case "vertical":
29
                if (verticalLayoutElement) {
30
                    verticalLayoutElement.checked = true;
31
                }
32
                document.documentElement.setAttribute("data-layout", "vertical");
33
                break;
34
            default:
35
                break;
36
        }
37
    },
38

39
    // Full / Mini Sidebar Type
40
    ManageSidebarType() {
41
        switch (settings.SidebarType) {
42
            case "full":
43
                const fullSidebarElement = document.querySelector("#full-sidebar");
44
                if (fullSidebarElement) {
45
                    fullSidebarElement.checked = true;
46
                }
47
                document.body.setAttribute("data-sidebartype", "full");
48

49
                const setSidebarType = () => {
50
                    const width =
51
                        window.innerWidth > 0 ? window.innerWidth : screen.width;
52
                    if (width < 1300) {
53
                        document.body.setAttribute("data-sidebartype", "mini-sidebar");
54
                    } else {
55
                        document.body.setAttribute("data-sidebartype", "full");
56
                    }
57
                };
58
                window.addEventListener("DOMContentLoaded", setSidebarType);
59
                window.addEventListener("resize", setSidebarType);
60
                break;
61

62
            case "mini-sidebar":
63
                const miniSidebarElement = document.querySelector("#mini-sidebar");
64
                if (miniSidebarElement) {
65
                    miniSidebarElement.checked = true;
66
                }
67
                document.body.setAttribute("data-sidebartype", "mini-sidebar");
68
                break;
69

70
            default:
71
                break;
72
        }
73
    },
74

75
    // Layout Boxed or Full
76
    ManageBoxedLayout() {
77
        const boxedLayoutElement = document.getElementById("boxed-layout");
78
        const fullLayoutElement = document.getElementById("full-layout");
79
        if (boxedLayoutElement) boxedLayoutElement.checked = true;
80
        switch (settings.BoxedLayout) {
81
            case true:
82
                document.documentElement.setAttribute("data-boxed-layout", "boxed");
83
                if (boxedLayoutElement) boxedLayoutElement.checked = true;
84
                break;
85
            case false:
86
                document.documentElement.setAttribute("data-boxed-layout", "full");
87
                if (fullLayoutElement) fullLayoutElement.checked = true;
88
                break;
89
            default:
90
                break;
91
        }
92
    },
93

94
    // Direction Type
95
    ManageDirectionLayout() {
96
        const ltrLayoutElement = document.getElementById("ltr-layout");
97
        const rtlLayoutElement = document.getElementById("rtl-layout");
98

99
        switch (settings.Direction) {
100
            case "ltr":
101
                if (ltrLayoutElement) {
102
                    ltrLayoutElement.checked = true;
103
                }
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");
109
                }
110
                break;
111
            case "rtl":
112
                document.documentElement.setAttribute("dir", "rtl");
113
                const offcanvasEnd = document.querySelector(".offcanvas-end");
114
                if (offcanvasEnd) {
115
                    offcanvasEnd.classList.toggle("offcanvas-start");
116
                    offcanvasEnd.classList.remove("offcanvas-end");
117
                }
118
                if (rtlLayoutElement) {
119
                    rtlLayoutElement.checked = true;
120
                }
121
                break;
122
            default:
123
                break;
124
        }
125
    },
126

127
    // Card Type
128
    ManageCardLayout() {
129
        const cardWithoutBorderElement = document.getElementById(
130
            "card-without-border"
131
        );
132
        const cardWithBorderElement = document.getElementById("card-with-border");
133

134
        if (cardWithoutBorderElement) cardWithoutBorderElement.checked = true;
135
        switch (settings.cardBorder) {
136
            case true:
137
                document.documentElement.setAttribute("data-card", "border");
138
                if (cardWithBorderElement) cardWithBorderElement.checked = true;
139
                break;
140
            case false:
141
                document.documentElement.setAttribute("data-card", "shadow");
142
                if (cardWithoutBorderElement) cardWithoutBorderElement.checked = true;
143
                break;
144
            default:
145
                break;
146
        }
147
    },
148

149
    // Theme Dark or Light
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;
156
            }
157

158
            hideElements.forEach((el) =>
159
                document
160
                    .querySelectorAll(`.${el}`)
161
                    .forEach((e) => (e.style.display = "none"))
162
            );
163
            showElements.forEach((el) =>
164
                document
165
                    .querySelectorAll(`.${el}`)
166
                    .forEach((e) => (e.style.display = "flex"))
167
            );
168
            hideElements2.forEach((el) =>
169
                document
170
                    .querySelectorAll(`.${el}`)
171
                    .forEach((e) => (e.style.display = "none"))
172
            );
173
        };
174

175
        switch (settings.Theme) {
176
            case "light":
177
                setTheme("light", ["light-logo"], ["moon"], ["sun"]);
178
                break;
179
            case "dark":
180
                setTheme("dark", ["dark-logo"], ["sun"], ["moon"]);
181
                break;
182
            default:
183
                break;
184
        }
185
    },
186

187
    // Theme Color
188
    ManageColorThemeLayout() {
189
        const {ColorTheme} = settings;
190
        const colorThemeElement = document.getElementById(ColorTheme);
191
        document.documentElement.setAttribute("data-color-theme", ColorTheme);
192
    },
193
};
194

195
// Initialize settings
196
AdminSettings.AdminSettingsInit();
197

198
// Handle Click
199

200
function set_settings () {
201
    // Theme Direction RTL LTR click
202
    function handleDirection() {
203
        const rtlLayoutElement = document.getElementById("rtl-layout");
204
        const ltrLayoutElement = document.getElementById("ltr-layout");
205

206
        if (rtlLayoutElement) {
207
            rtlLayoutElement.addEventListener("click", function () {
208
                document.documentElement.setAttribute("dir", "rtl");
209
                const offcanvasEnd = document.querySelector(".offcanvas-end");
210
                if (offcanvasEnd) {
211
                    offcanvasEnd.classList.toggle("offcanvas-start");
212
                    offcanvasEnd.classList.remove("offcanvas-end");
213
                }
214
            });
215
            document.cookie = "Direction="+"rtl"+";path=/;"
216
        }
217

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");
225
                }
226
            });
227
            document.cookie = "Direction="+"ltr"+";path=/;"
228
        }
229
    }
230

231
    handleDirection();
232

233
    // Theme Layout Box or Full
234
    function handleBoxedLayout() {
235
        const boxedLayout = document.getElementById("boxed-layout");
236
        const fullLayout = document.getElementById("full-layout");
237
        const containerFluid = document.querySelectorAll(".container-fluid");
238
        if (boxedLayout) {
239
            boxedLayout.addEventListener("click", function () {
240
                containerFluid.forEach((element) => element.classList.remove("mw-100"));
241
                document.documentElement.setAttribute("data-boxed-layout", "boxed");
242
                this.checked;
243
                document.cookie = "BoxedLayout="+"true"+";path=/;"
244
            });
245
        }
246

247
        if (fullLayout) {
248
            fullLayout.addEventListener("click", function () {
249
                containerFluid.forEach((element) => element.classList.add("mw-100"));
250
                document.documentElement.setAttribute("data-boxed-layout", "full");
251
                this.checked;
252
                document.cookie = "BoxedLayout="+"false"+";path=/;"
253
            });
254
        }
255
    }
256

257
    handleBoxedLayout();
258

259
    // Theme Layout Vertical or Horizontal
260
    function handleLayout() {
261
        const verticalLayout = document.getElementById("vertical-layout");
262
        const horizontalLayout = document.getElementById("horizontal-layout");
263

264
        if (verticalLayout) {
265
            verticalLayout.addEventListener("click", function () {
266
                document.documentElement.setAttribute("data-layout", "vertical");
267
                this.checked;
268
                document.cookie = "Layout="+"vertical"+";path=/;"
269
            });
270
        }
271

272
        if (horizontalLayout) {
273
            horizontalLayout.addEventListener("click", function () {
274
                document.documentElement.setAttribute("data-layout", "horizontal");
275
                this.checked;
276
                document.cookie = "Layout="+"horizontal"+";path=/;"
277
            });
278
        }
279
    }
280

281
    handleLayout();
282

283
    // Theme mode Dark or Light
284
    function handleTheme() {
285
        function setThemeAttributes(
286
            theme,
287
            darkDisplay,
288
            lightDisplay,
289
            sunDisplay,
290
            moonDisplay
291
        ) {
292
            document.documentElement.setAttribute("data-bs-theme", theme);
293
            const themeLayoutElement = document.getElementById(`${theme}-layout`);
294
            if (themeLayoutElement) {
295
                themeLayoutElement.checked = true;
296
            }
297
            if (theme == 'dark') {
298
                document.cookie = "Theme="+"dark"+";path=/;"
299
            } else {
300
                document.cookie = "Theme="+"light"+";path=/;"
301
            }
302

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"));
311
        }
312

313
        document.querySelectorAll(".dark-layout").forEach((element) => {
314
            element.addEventListener("click", () =>
315
                setThemeAttributes("dark", "dark-logo", "light-logo", "moon", "sun")
316
            );
317
        });
318

319
        document.querySelectorAll(".light-layout").forEach((element) => {
320
            element.addEventListener("click", () =>
321
                setThemeAttributes("light", "light-logo", "dark-logo", "sun", "moon")
322
            );
323
        });
324
    }
325

326
    handleTheme();
327

328
    // Theme card with Border or Shadow
329
    function handleCardLayout() {
330
        function setCardAttribute(cardType) {
331
            document.documentElement.setAttribute("data-card", cardType);
332
        }
333

334
        const cardWithBorderElement = document.getElementById("card-with-border");
335
        const cardWithoutBorderElement = document.getElementById(
336
            "card-without-border"
337
        );
338

339
        if (cardWithBorderElement) {
340
            cardWithBorderElement.addEventListener("click", () =>
341
                setCardAttribute("border")
342
            );
343
        }
344
        if (cardWithoutBorderElement) {
345
            cardWithoutBorderElement.addEventListener("click", () =>
346
                setCardAttribute("shadow")
347
            );
348
        }
349
    }
350

351
    handleCardLayout();
352

353
    // Theme Sidebar
354
    function handleSidebarToggle() {
355
        function setSidebarType(sidebarType) {
356
            document.body.setAttribute("data-sidebartype", sidebarType);
357
        }
358

359
        const fullSidebarElement = document.getElementById("full-sidebar");
360
        const miniSidebarElement = document.getElementById("mini-sidebar");
361

362
        if (fullSidebarElement) {
363
            fullSidebarElement.addEventListener("click", () =>
364
                setSidebarType("full")
365
            );
366
            document.cookie = "SidebarType="+"full"+";path=/;"
367
        }
368
        if (miniSidebarElement) {
369
            miniSidebarElement.addEventListener("click", () =>
370
                setSidebarType("mini-sidebar")
371
            );
372
            document.cookie = "SidebarType="+"mini-sidebar"+";path=/;"
373
        }
374
    }
375

376
    handleSidebarToggle();
377

378
    // Toggle Sidebar
379
    function handleSidebar() {
380
        document.querySelectorAll(".sidebartoggler").forEach((element) => {
381
            element.addEventListener("click", function () {
382
                document.querySelectorAll(".sidebartoggler").forEach((el) => {
383
                    el.checked = true;
384
                });
385
                document
386
                    .getElementById("main-wrapper")
387
                    .classList.toggle("show-sidebar");
388
                document.querySelectorAll(".sidebarmenu").forEach((el) => {
389
                    el.classList.toggle("close");
390
                });
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=/;"
395
                } else {
396
                    document.body.setAttribute("data-sidebartype", "full");
397
                    document.cookie = "SidebarType="+"full"+";path=/;"
398
                }
399
            });
400
        });
401
    }
402

403
    handleSidebar();
404
}
405
set_settings()
406