https://jaisteel.in/assets/js/main.js

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

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