https://yorato.ai/member-assets/js/app.min.js

1const settings = Object.assign({}, userSettings);
2
3const 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
80    if (boxedLayoutElement) boxedLayoutElement.checked = true;
81    switch (settings.BoxedLayout) {
82      case true:
83        document.documentElement.setAttribute("data-boxed-layout", "boxed");
84        if (boxedLayoutElement) boxedLayoutElement.checked = true;
85        break;
86      case false:
87        document.documentElement.setAttribute("data-boxed-layout", "full");
88        if (fullLayoutElement) fullLayoutElement.checked = true;
89        break;
90      default:
91        break;
92    }
93  },
94
95  // Direction Type
96  ManageDirectionLayout() {
97    const ltrLayoutElement = document.getElementById("ltr-layout");
98    const rtlLayoutElement = document.getElementById("rtl-layout");
99
100    switch (settings.Direction) {
101      case "ltr":
102        if (ltrLayoutElement) {
103          ltrLayoutElement.checked = true;
104        }
105        document.documentElement.setAttribute("dir", "ltr");
106        const offcanvasStart = document.querySelector(".offcanvas-start");
107        if (offcanvasStart) {
108          offcanvasStart.classList.toggle("offcanvas-end");
109          offcanvasStart.classList.remove("offcanvas-start");
110        }
111        break;
112      case "rtl":
113        document.documentElement.setAttribute("dir", "rtl");
114        const offcanvasEnd = document.querySelector(".offcanvas-end");
115        if (offcanvasEnd) {
116          offcanvasEnd.classList.toggle("offcanvas-start");
117          offcanvasEnd.classList.remove("offcanvas-end");
118        }
119        if (rtlLayoutElement) {
120          rtlLayoutElement.checked = true;
121        }
122        break;
123      default:
124        break;
125    }
126  },
127
128  // Card Type
129  ManageCardLayout() {
130    const cardWithoutBorderElement = document.getElementById(
131      "card-without-border"
132    );
133    const cardWithBorderElement = document.getElementById("card-with-border");
134
135    if (cardWithoutBorderElement) cardWithoutBorderElement.checked = true;
136    switch (settings.cardBorder) {
137      case true:
138        document.documentElement.setAttribute("data-card", "border");
139        if (cardWithBorderElement) cardWithBorderElement.checked = true;
140        break;
141      case false:
142        document.documentElement.setAttribute("data-card", "shadow");
143        if (cardWithoutBorderElement) cardWithoutBorderElement.checked = true;
144        break;
145      default:
146        break;
147    }
148  },
149
150  // Theme Dark or Light
151  ManageDarkThemeLayout() {
152    const setTheme = (theme, hideElements, showElements, hideElements2) => {
153      document.documentElement.setAttribute("data-bs-theme", theme);
154      const themeLayoutElement = document.getElementById(`${theme}-layout`);
155      if (themeLayoutElement) {
156        themeLayoutElement.checked = true;
157      }
158

159      hideElements.forEach((el) =>
160        document
161          .querySelectorAll(`.${el}`)
162          .forEach((e) => (e.style.display = "none"))
163      );
164      showElements.forEach((el) =>
165        document
166          .querySelectorAll(`.${el}`)
167          .forEach((e) => (e.style.display = "flex"))
168      );
169      hideElements2.forEach((el) =>
170        document
171          .querySelectorAll(`.${el}`)
172          .forEach((e) => (e.style.display = "none"))
173      );
174    };
175
176    switch (settings.Theme) {
177      case "light":
178        setTheme("light", ["light-logo"], ["moon"], ["sun"]);
179        break;
180      case "dark":
181        setTheme("dark", ["dark-logo"], ["sun"], ["moon"]);
182        break;
183      default:
184        break;
185    }
186  },
187
188  // Theme Color
189  ManageColorThemeLayout() {
190    const { ColorTheme } = settings;
191    const colorThemeElement = document.getElementById(ColorTheme);
192
193    if (colorThemeElement) {
194      document.documentElement.setAttribute("data-color-theme", ColorTheme);
195      colorThemeElement.checked = true;
196    }
197  },
198};
199
200// Initialize settings
201AdminSettings.AdminSettingsInit();
202
203// Handle Click
204document.addEventListener("DOMContentLoaded", function () {
205  // Theme Direction RTL LTR click
206  function handleDirection() {
207    const rtlLayoutElement = document.getElementById("rtl-layout");
208    const ltrLayoutElement = document.getElementById("ltr-layout");
209
210    if (rtlLayoutElement) {
211      rtlLayoutElement.addEventListener("click", function () {
212        document.documentElement.setAttribute("dir", "rtl");
213        const offcanvasEnd = document.querySelector(".offcanvas-end");
214        if (offcanvasEnd) {
215          offcanvasEnd.classList.toggle("offcanvas-start");
216          offcanvasEnd.classList.remove("offcanvas-end");
217        }
218      });
219    }
220
221    if (ltrLayoutElement) {
222      ltrLayoutElement.addEventListener("click", function () {
223        document.documentElement.setAttribute("dir", "ltr");
224        const offcanvasStart = document.querySelector(".offcanvas-start");
225        if (offcanvasStart) {
226          offcanvasStart.classList.toggle("offcanvas-end");
227          offcanvasStart.classList.remove("offcanvas-start");
228        }
229      });
230    }
231  }
232
233  handleDirection();
234
235  // Theme Layout Box or Full
236  function handleBoxedLayout() {
237    const boxedLayout = document.getElementById("boxed-layout");
238    const fullLayout = document.getElementById("full-layout");
239    const containerFluid = document.querySelectorAll(".container-fluid");
240
241    if (boxedLayout) {
242      boxedLayout.addEventListener("click", function () {
243        containerFluid.forEach((element) => element.classList.remove("mw-100"));
244        document.documentElement.setAttribute("data-boxed-layout", "boxed");
245        this.checked;
246      });
247    }
248
249    if (fullLayout) {
250      fullLayout.addEventListener("click", function () {
251        containerFluid.forEach((element) => element.classList.add("mw-100"));
252        document.documentElement.setAttribute("data-boxed-layout", "full");
253        this.checked;
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      });
269    }
270
271    if (horizontalLayout) {
272      horizontalLayout.addEventListener("click", function () {
273        document.documentElement.setAttribute("data-layout", "horizontal");
274        this.checked;
275      });
276    }
277  }
278  handleLayout();
279
280  // Theme mode Dark or Light
281  function handleTheme() {
282    function setThemeAttributes(
283      theme,
284      darkDisplay,
285      lightDisplay,
286      sunDisplay,
287      moonDisplay
288    ) {
289      document.documentElement.setAttribute("data-bs-theme", theme);
290      const themeLayoutElement = document.getElementById(`${theme}-layout`);
291      if (themeLayoutElement) {
292        themeLayoutElement.checked = true;
293      }
294
295      document
296        .querySelectorAll(`.${darkDisplay}`)
297        .forEach((el) => (el.style.display = "none"));
298      document
299        .querySelectorAll(`.${lightDisplay}`)
300        .forEach((el) => (el.style.display = "flex"));
301      document
302        .querySelectorAll(`.${sunDisplay}`)
303        .forEach((el) => (el.style.display = "none"));
304      document
305        .querySelectorAll(`.${moonDisplay}`)
306        .forEach((el) => (el.style.display = "flex"));
307    }
308
309    document.querySelectorAll(".dark-layout").forEach((element) => {
310      element.addEventListener("click", () =>
311        setThemeAttributes("dark", "dark-logo", "light-logo", "moon", "sun")
312      );
313    });
314
315    document.querySelectorAll(".light-layout").forEach((element) => {
316      element.addEventListener("click", () =>
317        setThemeAttributes("light", "light-logo", "dark-logo", "sun", "moon")
318      );
319    });
320  }

321  handleTheme();
322
323  // Theme card with Border or Shadow
324  function handleCardLayout() {
325    function setCardAttribute(cardType) {
326      document.documentElement.setAttribute("data-card", cardType);
327    }
328
329    const cardWithBorderElement = document.getElementById("card-with-border");
330    const cardWithoutBorderElement = document.getElementById(
331      "card-without-border"
332    );
333
334    if (cardWithBorderElement) {
335      cardWithBorderElement.addEventListener("click", () =>
336        setCardAttribute("border")
337      );
338    }
339    if (cardWithoutBorderElement) {
340      cardWithoutBorderElement.addEventListener("click", () =>
341        setCardAttribute("shadow")
342      );
343    }
344  }
345  handleCardLayout();
346
347  // Theme Sidebar
348  function handleSidebarToggle() {
349    function setSidebarType(sidebarType) {
350      document.body.setAttribute("data-sidebartype", sidebarType);
351    }
352
353    const fullSidebarElement = document.getElementById("full-sidebar");
354    const miniSidebarElement = document.getElementById("mini-sidebar");
355
356    if (fullSidebarElement) {
357      fullSidebarElement.addEventListener("click", () =>
358        setSidebarType("full")
359      );
360    }
361    if (miniSidebarElement) {
362      miniSidebarElement.addEventListener("click", () =>
363        setSidebarType("mini-sidebar")
364      );
365    }
366  }
367  handleSidebarToggle();
368
369  // Toggle Sidebar
370  function handleSidebar() {
371    document.querySelectorAll(".sidebartoggler").forEach((element) => {
372      element.addEventListener("click", function () {
373        document.querySelectorAll(".sidebartoggler").forEach((el) => {
374          el.checked = true;
375        });
376        document
377          .getElementById("main-wrapper")
378          .classList.toggle("show-sidebar");
379        document.querySelectorAll(".sidebarmenu").forEach((el) => {
380          el.classList.toggle("close");
381        });
382        const dataTheme = document.body.getAttribute("data-sidebartype");
383        if (dataTheme === "full") {
384          document.body.setAttribute("data-sidebartype", "mini-sidebar");
385        } else {
386          document.body.setAttribute("data-sidebartype", "full");
387        }
388      });
389    });
390  }
391  handleSidebar();
392});