https://ssgpssystem.vercel.app/assets/js/main.js

1/**
2* Template Name: NiceAdmin
3* Updated: Nov 17 2023 with Bootstrap v5.3.2
4* Template URL: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/
5* Author: BootstrapMade.com
6* License: https://bootstrapmade.com/license/
7*/
8(function() {
9  "use strict";
10
11  /**
12   * Easy selector helper function
13   */
14  const select = (el, all = false) => {
15    el = el.trim()
16    if (all) {
17      return [...document.querySelectorAll(el)]
18    } else {
19      return document.querySelector(el)
20    }
21  }
22
23  /**
24   * Easy event listener function
25   */
26  const on = (type, el, listener, all = false) => {
27    if (all) {
28      select(el, all).forEach(e => e.addEventListener(type, listener))
29    } else {
30      select(el, all).addEventListener(type, listener)
31    }
32  }
33
34  /**
35   * Easy on scroll event listener 
36   */
37  const onscroll = (el, listener) => {
38    el.addEventListener('scroll', listener)
39  }
40
41  /**
42   * Sidebar toggle
43   */
44  if (select('.toggle-sidebar-btn')) {
45    on('click', '.toggle-sidebar-btn', function(e) {
46      select('body').classList.toggle('toggle-sidebar')
47    })
48  }
49
50  /**
51   * Search bar toggle
52   */
53  if (select('.search-bar-toggle')) {
54    on('click', '.search-bar-toggle', function(e) {
55      select('.search-bar').classList.toggle('search-bar-show')
56    })
57  }
58
59  /**
60   * Navbar links active state on scroll
61   */
62  let navbarlinks = select('#navbar .scrollto', true)
63  const navbarlinksActive = () => {
64    let position = window.scrollY + 200
65    navbarlinks.forEach(navbarlink => {
66      if (!navbarlink.hash) return
67      let section = select(navbarlink.hash)
68      if (!section) return
69      if (position >= section.offsetTop && position <= (section.offsetTop + section.offsetHeight)) {
70        navbarlink.classList.add('active')
71      } else {
72        navbarlink.classList.remove('active')
73      }
74    })
75  }
76  window.addEventListener('load', navbarlinksActive)
77  onscroll(document, navbarlinksActive)
78
79  /**
80   * Toggle .header-scrolled class to #header when page is scrolled
81   */
82  let selectHeader = select('#header')
83  if (selectHeader) {
84    const headerScrolled = () => {
85      if (window.scrollY > 100) {
86        selectHeader.classList.add('header-scrolled')
87      } else {
88        selectHeader.classList.remove('header-scrolled')
89      }
90    }
91    window.addEventListener('load', headerScrolled)
92    onscroll(document, headerScrolled)
93  }
94
95  /**
96   * Back to top button
97   */
98  let backtotop = select('.back-to-top')
99  if (backtotop) {
100    const toggleBacktotop = () => {
101      if (window.scrollY > 100) {
102        backtotop.classList.add('active')
103      } else {
104        backtotop.classList.remove('active')
105      }
106    }
107    window.addEventListener('load', toggleBacktotop)
108    onscroll(document, toggleBacktotop)
109  }
110
111  /**
112   * Initiate tooltips
113   */
114  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
115  var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
116    return new bootstrap.Tooltip(tooltipTriggerEl)
117  })
118
119  /**
120   * Initiate quill editors
121   */
122  if (select('.quill-editor-default')) {
123    new Quill('.quill-editor-default', {
124      theme: 'snow'
125    });
126  }
127
128  if (select('.quill-editor-bubble')) {
129    new Quill('.quill-editor-bubble', {
130      theme: 'bubble'
131    });
132  }
133
134  if (select('.quill-editor-full')) {
135    new Quill(".quill-editor-full", {
136      modules: {
137        toolbar: [
138          [{
139            font: []
140          }, {
141            size: []
142          }],
143          ["bold", "italic", "underline", "strike"],
144          [{
145              color: []
146            },
147            {
148              background: []
149            }
150          ],
151          [{
152              script: "super"
153            },
154            {
155              script: "sub"
156            }
157          ],
158          [{
159              list: "ordered"
160            },
161            {
162              list: "bullet"
163            },
164            {
165              indent: "-1"
166            },
167            {
168              indent: "+1"
169            }
170          ],
171          ["direction", {
172            align: []
173          }],
174          ["link", "image", "video"],
175          ["clean"]
176        ]
177      },
178      theme: "snow"
179    });
180  }
181
182  /**
183   * Initiate TinyMCE Editor
184   */
185  const useDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
186  const isSmallScreen = window.matchMedia('(max-width: 1023.5px)').matches;
187
188  tinymce.init({
189    selector: 'textarea.tinymce-editor',
190    plugins: 'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap quickbars emoticons',
191    editimage_cors_hosts: ['picsum.photos'],
192    menubar: 'file edit view insert format tools table help',
193    toolbar: 'undo redo | bold italic underline strikethrough | fontfamily fontsize blocks | alignleft aligncenter alignright al

193ignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | insertfile image media template link anchor codesample | ltr rtl',
194    toolbar_sticky: true,
195    toolbar_sticky_offset: isSmallScreen ? 102 : 108,
196    autosave_ask_before_unload: true,
197    autosave_interval: '30s',
198    autosave_prefix: '{path}{query}-{id}-',
199    autosave_restore_when_empty: false,
200    autosave_retention: '2m',
201    image_advtab: true,
202    link_list: [{
203        title: 'My page 1',
204        value: 'https://www.tiny.cloud'
205      },
206      {
207        title: 'My page 2',
208        value: 'http://www.moxiecode.com'
209      }
210    ],
211    image_list: [{
212        title: 'My page 1',
213        value: 'https://www.tiny.cloud'
214      },
215      {
216        title: 'My page 2',
217        value: 'http://www.moxiecode.com'
218      }
219    ],
220    image_class_list: [{
221        title: 'None',
222        value: ''
223      },
224      {
225        title: 'Some class',
226        value: 'class-name'
227      }
228    ],
229    importcss_append: true,
230    file_picker_callback: (callback, value, meta) => {
231      /* Provide file and text for the link dialog */
232      if (meta.filetype === 'file') {
233        callback('https://www.google.com/logos/google.jpg', {
234          text: 'My text'
235        });
236      }
237
238      /* Provide image and alt text for the image dialog */
239      if (meta.filetype === 'image') {
240        callback('https://www.google.com/logos/google.jpg', {
241          alt: 'My alt text'
242        });
243      }
244
245      /* Provide alternative source and posted for the media dialog */
246      if (meta.filetype === 'media') {
247        callback('movie.mp4', {
248          source2: 'alt.ogg',
249          poster: 'https://www.google.com/logos/google.jpg'
250        });
251      }
252    },
253    templates: [{
254        title: 'New Table',
255        description: 'creates a new table',
256        content: '<div class="mceTmpl"><table width="98%%"  border="0" cellspacing="0" cellpadding="0"><tr><th scope="col"> </th><th scope="col"> </th></tr><tr><td> </td><td> </td></tr></table></div>'
257      },
258      {
259        title: 'Starting my story',
260        description: 'A cure for writers block',
261        content: 'Once upon a time...'
262      },
263      {
264        title: 'New list with dates',
265        description: 'New List with dates',
266        content: '<div class="mceTmpl"><span class="cdate">cdate</span><br><span class="mdate">mdate</span><h2>My List</h2><ul><li></li><li></li></ul></div>'
267      }
268    ],
269    template_cdate_format: '[Date Created (CDATE): %m/%d/%Y : %H:%M:%S]',
270    template_mdate_format: '[Date Modified (MDATE): %m/%d/%Y : %H:%M:%S]',
271    height: 600,
272    image_caption: true,
273    quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
274    noneditable_class: 'mceNonEditable',
275    toolbar_mode: 'sliding',
276    contextmenu: 'link image table',
277    skin: useDarkMode ? 'oxide-dark' : 'oxide',
278    content_css: useDarkMode ? 'dark' : 'default',
279    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
280  });
281
282  /**
283   * Initiate Bootstrap validation check
284   */
285  var needsValidation = document.querySelectorAll('.needs-validation')
286
287  Array.prototype.slice.call(needsValidation)
288    .forEach(function(form) {
289      form.addEventListener('submit', function(event) {
290        if (!form.checkValidity()) {
291          event.preventDefault()
292          event.stopPropagation()
293        }
294
295        form.classList.add('was-validated')
296      }, false)
297    })
298
299  /**
300   * Initiate Datatables
301   */
302  const datatables = select('.datatable', true)
303  datatables.forEach(datatable => {
304    new simpleDatatables.DataTable(datatable, {
305      perPageSelect: [5, 10, 15, ["All", -1]],
306      columns: [{
307          select: 2,
308          sortSequence: ["desc", "asc"]
309        },
310        {
311          select: 3,
312          sortSequence: ["desc"]
313        },
314        {
315          select: 4,
316          cellClass: "green",
317          headerClass: "red"
318        }
319      ]
320    });
321  })
322
323  /**
324   * Autoresize echart charts
325   */
326  const mainContainer = select('#main');
327  if (mainContainer) {
328    setTimeout(() => {
329      new ResizeObserver(function() {
330        select('.echart', true).forEach(getEchart => {
331          echarts.getInstanceByDom(getEchart).resize();
332        })
333      }).observe(mainContainer);
334    }, 200);
335  }
336
337})();