https://masterramenstore.com/assets/admin2//js/plugins/setting.js

1/*
2* Version: 1.2.0
3* Template: Hope-Ui - Responsive Bootstrap 5 Admin Dashboard Template
4* Author: iqonic.design
5* Design and Developed by: iqonic.design
6* NOTE: This file contains all the setting change script.
7*/
8
9/*----------------------------------------------
10Index Of Script
11------------------------------------------------
12
13:: Variables
14
15------- Functions --------
16:: rtlModeDefault - This function help for change offcanvas position based on rtlMode
17:: checkSettingMenu - This function help for on page load setting panel active
18:: darkMode - This function help for change dark mode
19:: changeMode -This function help for change with create event
20:: updateMode - This function help for change dashboard setting on page load based on session storage
21
22------- Listners --------
23:: RTL Mode
24:: Color Mode
25:: Sidebar Color
26:: Sidebar Types
27:: Sidebar Active Style
28:: Navbar & Header style
29:: Navbar default style
30:: colorChange Mode
31
32------------------------------------------------
33Index Of Script
34----------------------------------------------*/
35
36(function () {
37    "use strict";
38
39    // Variables
40    let sidebarTypeSetting = [];
41
42    //  RTL mode on change offcanvas position change function
43    const rtlModeDefault = (check) => {
44        if (check) {
45            $('.offcanvas-start').addClass('on-rtl start').removeClass('offcanvas-start')
46            $('.offcanvas-end').addClass('on-rtl end').removeClass('offcanvas-end')
47            $('.on-rtl.start').addClass('offcanvas-end').removeClass('start')
48            $('.on-rtl.end').addClass('offcanvas-start').removeClass('end')
49        } else {
50            $('.offcanvas-start').addClass('on-rtl start').removeClass('offcanvas-start')
51            $('.offcanvas-end').addClass('on-rtl end').removeClass('offcanvas-end')
52            $('.on-rtl.start').addClass('offcanvas-end').removeClass('start')
53            $('.on-rtl.end').addClass('offcanvas-start').removeClass('end')
54        }
55    }
56
57    // On Page Load Active Function
58    const checkSettingMenu = (type, name, value, data) => {
59        if(data == 'addedClass'){
60            document.querySelectorAll(`[data-setting="${type}"][data-name="${name}"].active`).forEach((el) => {
61                el.classList.remove('active')
62            });
63        }
64        if(data == 'noClass'){
65            const dataREmove = `[data-setting="${type}"][data-name="${name}"]`;
66            const dataAdd = `[data-setting="${type}"][data-name="${name}"][data-value="${value}"]`;
67            
68            document.querySelectorAll(dataREmove).forEach((el) => {
69                el.classList.remove('active')
70            });
71            document.querySelectorAll(dataAdd).forEach((el) => {
72                el.classList.add('active')
73            });
74        }
75    }
76
77    // Dark mode enable & disabled function
78    const darkMode = () => {
79        if (document.querySelector('body').classList.contains('auto')) {
80            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
81                document.querySelector('body').classList.add('dark')
82            } else {
83                document.querySelector('body').classList.remove('dark')
84            }
85        }
86    }
87
88    // For Dark, RTL & Sidebar Class Update
89    const changeMode = (type, value, target) => {
90        let detailObj = {}
91        if (type == 'color-mode') {
92            detailObj = {dark: value}
93            document.querySelector('body').classList.add(value)
94        }
95        if (type == 'dir-mode') {
96            detailObj = {dir: value}
97            document.querySelector('html').setAttribute('dir',value)
98        }
99        if (type == 'sidebar') {
100            detailObj = {'sidebar-color': value}            
101           const sidebarclass= document.querySelector('.sidebar-default')
102           if(sidebarclass !== null && sidebarclass !== undefined){
103                sidebarclass.classList.add(value)
104           }
105        }
106        const event = new CustomEvent("ChangeMode", {detail: detailObj });
107        document.dispatchEvent(event);
108    }
109
110    // Page on load function
111    const updateMode = () => {
112        // Change Mode Custom Event Listners
113        document.addEventListener('ChangeMode',(e) => {
114            if (e.detail.dir === 'rtl' || e.detail.dir === 'ltr') {
115                rtlModeDefault(true)
116            }
117            if (e.detail.dark !== null || e.detail.dark !== undefined) {
118                darkMode()
119            }
120        })
121
122        // For Dark Mode
123        const colorMode =  sessionStorage.getItem('color-mode')
124        if(colorMode !== null && colorMode !== undefined) {
125            document.body.classList.remove('dark')
126            document.body.classList.add(colorMode)
127            darkMode()
128            checkSettingMenu('color-mode', 'color', colorMode, 'addedClass')
129        }
130
131        // For RTL Mode
132        const dirMode =  sessionStorage.getItem('dir-mode')
133        if(dirMode !== null && dirMode !== undefined && dirMode !== 'ltr') {
134            checkSettingMenu('dir-mode', 'dir', dirMode, 'addedClass')
135            changeMode('dir-mode', dirMode)
136        }
137
138        // For Sidebar Color
139        const sidebarColors =  sessionStorage.getItem('sidebar')
140        if(sidebarColors !== null && sidebarColors !== undefined) {
141            checkSettingMenu('sidebar', 'sidebar-color', sidebarColors, 'addedClass')
142            changeMode('sidebar', sidebarColors)
143        }
144
145        // For Sidebar Types
146        const sidebarTypeSession = sessionStorage.getItem('sidebarType')
147        if(sidebarTypeSession !== null && sidebarTypeSession !== undefined) {
148            sidebarTypeSetting = JSON.parse(sidebarTypeSession)
149            Array.from(sidebarTypeSetting,(type) => {
150                document.querySelectorAll(`[data-setting="sidebar"][data-name="sidebar-type"][data-value="${type}"]`).forEach((el) => {
151                    el.classList.add('active')
152                });
153                changeMode('sidebar', type)
154            })
155        }
156
157        // For Sidebar Active Style
158        const allActiveType =  sessionStorage.getItem('sidebar-style')
159        if(allActiveType !== null && allActiveType !== undefined) {
160            document.querySelector('.sidebar').classList.remove('navs-rounded-all')
161            document.querySelector('.sidebar').classList.add(`${allActiveType}`)
162            checkSettingMenu('sidebar', 'sidebar-item', allActiveType, 'addedClass')
163            changeMode('sidebar-style', allActiveType)
164        }
165
166        // For Navbar & Header Style
167        const allNavbarType = sessionStorage.getItem('navbarTypes')
168        if(allNavbarType !== null && allNavbarType !== undefined){
169            if(allNavbarType == 'nav-glass' || allNavbarType == 'navs-sticky' || allNavbarType == 'navs-trans

169parent'){
170                document.querySelector('.iq-navbar').classList.add(`${allNavbarType}`)
171            }
172            if(allNavbarType == 'navs-bg-color'){
173                document.querySelector('.iq-navbar').classList.remove('nav-glass','navs-sticky','navs-transparent')
174                document.querySelector('.iq-navbar-header').classList.add(`${allNavbarType}`)
175            }
176            checkSettingMenu('navbar', 'navbar-type', allNavbarType, 'noClass')
177        }
178    }
179
180    updateMode()
181
182    //dark-mode & light-mode
183    const colorMode = document.querySelectorAll('[data-setting="color-mode"][data-name="color"]')
184    Array.from(colorMode, (mode) => {
185        mode.addEventListener('click', (e) => {
186            Array.from(colorMode, (el) => {
187                el.classList.remove('active')
188                document.querySelector('body').classList.remove(el.getAttribute('data-value'))
189            })
190            sessionStorage.setItem('color-mode', mode.getAttribute('data-value'))
191            mode.classList.add('active')
192            document.querySelector('body').classList.add(mode.getAttribute('data-value'))
193            changeMode('color-mode', mode.getAttribute('data-value'))
194        })
195    })
196
197    //rtl & ltr
198    const dirMode = document.querySelectorAll('[data-setting="dir-mode"][data-name="dir"]')
199    Array.from(dirMode, (mode) => {
200        mode.addEventListener('click', (e) => {
201            Array.from(dirMode, (el) => {
202                el.classList.remove('active')
203            })
204            if (!mode.classList.contains('active')) {
205                Array.from(document.querySelectorAll(`[data-value="${mode.getAttribute('data-value')}"]`), (el) => el.classList.add('active'))
206                sessionStorage.setItem('dir-mode', mode.getAttribute('data-value'))
207                changeMode('dir-mode', mode.getAttribute('data-value'))
208            }
209        })
210    })
211    
212    //Sidebar Color
213    const sidebarColors = document.querySelectorAll('[data-setting="sidebar"][data-name="sidebar-color"]')
214    Array.from(sidebarColors, (mode) => {
215        mode.addEventListener('click', (e) => {
216            Array.from(sidebarColors, (el) => {
217                el.classList.remove('active')
218                document.querySelector('.sidebar-default').classList.remove(el.getAttribute('data-value'))
219            })
220            sessionStorage.setItem('sidebar', mode.getAttribute('data-value'))
221            mode.classList.add('active')
222            document.querySelector('.sidebar-default').classList.add(mode.getAttribute('data-value'))
223            changeMode('sidebar', mode.getAttribute('data-value'))
224        })
225    })
226
227    // Sidebar type style
228    const sidebarTypes = document.querySelectorAll('[data-setting="sidebar"][data-name="sidebar-type"]')
229    Array.from(sidebarTypes, (sidebarType) => {
230        sidebarType.addEventListener('click', (e) => {
231            if (sidebarType.classList.contains('active')) {
232                sidebarType.classList.remove('active')
233                document.querySelector('.sidebar-default').classList.remove(sidebarType.getAttribute('data-value'))
234                const sidebarTypeIndexOf = sidebarTypeSetting.findIndex(type => type === sidebarType.getAttribute('data-value'))
235                sidebarTypeSetting.splice(sidebarTypeIndexOf, 1)
236                if (sidebarType.getAttribute('data-extra-value') !== null) {
237                    document.querySelector('.sidebar-default').classList.remove(sidebarType.getAttribute('data-extra-value'))
238                    document.querySelector(`[data-value="${sidebarType.getAttribute('data-extra-value')}"]`).classList.remove('active')
239
240                    const sidebarExtraTypeIndexOf = sidebarTypeSetting.findIndex(type => type === sidebarType.getAttribute('data-extra-value'))
241                    sidebarTypeSetting.splice(sidebarExtraTypeIndexOf, 1)
242                }
243            } else {
244                Array.from(document.querySelectorAll(`[data-value="${sidebarType.getAttribute('data-value')}"]`), (el) => el.classList.add('active'))
245                document.querySelector('.sidebar-default').classList.add(sidebarType.getAttribute('data-value'))
246                if (sidebarTypeSetting.indexOf(sidebarType.getAttribute('data-value')) === -1) {
247                    sidebarTypeSetting.push(sidebarType.getAttribute('data-value'))
248                }
249                if (sidebarType.getAttribute('data-extra-value') !== null) {
250                    document.querySelector('.sidebar-default').classList.add(sidebarType.getAttribute('data-extra-value'))
251                    Array.from(document.querySelectorAll(`[data-value="${sidebarType.getAttribute('data-extra-value')}"]`), (el) => el.classList.add('active'))
252                    if(sidebarTypeSetting.indexOf(sidebarType.getAttribute('data-extra-value')) === -1) {
253                        sidebarTypeSetting.push(sidebarType.getAttribute('data-extra-value'))
254                    }
255                }
256            }
257            sessionStorage.setItem('sidebarType', JSON.stringify(sidebarTypeSetting))
258        })
259    })
260
261    //Sidebar Active Style 
262    const allActiveType = document.querySelectorAll('[data-setting="sidebar"][data-name="sidebar-item"]')
263    Array.from(allActiveType, (activeStyle) => {
264        activeStyle.addEventListener('click', (e) => {
265            if(!activeStyle.classList.contains('active')){
266                Array.from(allActiveType, (el) => {
267                    el.classList.remove('active')
268                    document.querySelector('.sidebar-default').classList.remove(el.getAttribute('data-value'))
269                })
270                sessionStorage.setItem('sidebar-style', activeStyle.getAttribute('data-value'))
271                activeStyle.classList.add('active')
272                Array.from(document.querySelectorAll(`[data-value="${activeStyle.getAttribute('data-value')}"]`), (el) => el.classList.add('active'))
273                changeMode('sidebar', activeStyle.getAttribute('data-value'))
274            }
275        })
276    })
277
278    // Navbar Style
279    const allNavbarType = document.querySelectorAll('[data-setting="navbar"][data-name="navbar-type"]')
280    Array.from(allNavbarType, (navbarType) => {
281        navbarType.addEventListener('click', (e) => {
282            Array.from(allNavbarType, (el) => {
283                el.classList.remove('active')
284                document.querySelector(el.getAttribute('data-target')).classList.remove(el.getAttribute('data-value'))
285            })
286            sessionStorage.setItem('navbarTypes', navbarType.getAttribute('data-value'))
287            Array.from(document.querySelectorAll(`[data-value="${navbarType.getAttribute('data-value')}"]`), (el) => el.classList.add('active'))
288            document.querySelector(navbarType.getAttribute('data-target')).classList.add(navbarType.getAttribute('data-value'))
289            changeMode('navbarTypes', navbarType.getAttribute('data-value'), navbarType.getAttribute('data-target'))
290        })
291    })
292
293    // Navbar default style
294    const defaultNavbarType = document.querySelector('[data-setting="navbar"][data-name="navbar-default"]')
295    if (defaultNavbarType !== null) {
296        defaultNavbarType.addEventListener("click", (e) => {
297            document.querySelector('.iq-navbar').classList.remove('nav-glass','navs-sticky', 'navs-trans

297parent')
298            document.querySelector('.iq-navbar-header').classList.remove('navs-bg-color')
299            sessionStorage.setItem('navbarTypes', '')
300        })
301    }
302   
303    // For colorChange Mode
304    const customizerMode = (custombodyclass,colors,colorInfo) => {
305    document.querySelector('body').classList.add(`${custombodyclass}`)
306    sessionStorage.setItem('colorcustomchart-mode', getComputedStyle(document.body).getPropertyValue('--bs-primary'))
307    document.documentElement.style.setProperty('--bs-info', colors);
308    const color = sessionStorage.getItem('colorcustomchart-mode')
309    if(color !== 'null' && color !== undefined && color !== ''){
310    const event = new CustomEvent("ColorChange", {detail :{detail1:color.trim(), detail2:colors.trim()}});
311    document.dispatchEvent(event);
312    }
313    else{
314    const event = new CustomEvent("ColorChange", {detail :{detail1:colorInfo.trim(), detail2:colors.trim()}});
315    document.dispatchEvent(event);
316    }
317    const elements = document.querySelectorAll('[data-setting="color-mode1"][data-name="color"]')
318    Array.from(elements, (mode) => {
319        const colorclass = mode.getAttribute('data-value');
320        if(colorclass === custombodyclass ){
321            mode.classList.add('active')
322        }
323        else{
324            mode.classList.remove('active')
325        }
326    })
327    }
328
329    const elements = document.querySelectorAll('[data-setting="color-mode1"][data-name="color"]')
330    Array.from(elements, (mode) => {
331    mode.addEventListener('click', (e) => {
332        Array.from(elements, (el) => {
333            el.classList.remove('active')
334            document.querySelector('body').classList.remove(el.getAttribute('data-value'))
335        })
336        sessionStorage.setItem('colorcustom-mode', mode.getAttribute('data-value'))
337        sessionStorage.setItem('colorcustominfo-mode', mode.getAttribute('data-info'))
338        
339        mode.classList.add('active')
340        const colors = mode.getAttribute('data-info');
341        const color = getComputedStyle(document.body).getPropertyValue('--bs-primary');
342        customizerMode(mode.getAttribute('data-value'),colors,color)
343        
344        })
345    })
346    
347    const custombodyclass = sessionStorage.getItem('colorcustom-mode')
348    const colors = sessionStorage.getItem('colorcustominfo-mode')
349    const color = sessionStorage.getItem('colorcustomchart-mode')
350    if(custombodyclass !== null && custombodyclass !== undefined && colors !== null && colors !== undefined){
351        customizerMode(custombodyclass,colors,color)     
352    }
353
354})()