https://its-my.link/assets/js/hope-ui.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 the script for initialize & listener Template.
7*/
8
9/*----------------------------------------------
10Index Of Script
11------------------------------------------------
12
13------- Plugin Init --------
14
15:: Sticky-Nav
16:: Popover
17:: Tooltip
18:: Circle Progress
19:: Progress Bar
20:: NoUiSlider
21:: CopyToClipboard
22:: CounterUp 2
23:: SliderTab
24:: Data Tables
25:: Active Class for Pricing Table
26:: AOS Animation Plugin
27
28------ Functions --------
29
30:: Resize Plugins
31:: Loader Init
32:: Sidebar Toggle
33:: Back To Top
34
35------- Listners ---------
36
37:: DOMContentLoaded
38:: Window Resize
39:: DropDown
40:: Form Validation
41:: Flatpickr
42------------------------------------------------
43Index Of Script
44----------------------------------------------*/
45"use strict";
46/*---------------------------------------------------------------------
47              Sticky-Nav
48-----------------------------------------------------------------------*/
49window.addEventListener('scroll', function () {
50  let yOffset = document.documentElement.scrollTop;
51  let navbar = document.querySelector(".navs-sticky")
52  if (navbar !== null) {
53    if (yOffset >= 100) {
54      navbar.classList.add("menu-sticky");
55    } else {
56      navbar.classList.remove("menu-sticky");
57    }
58  }
59});
60/*---------------------------------------------------------------------
61              Popover
62-----------------------------------------------------------------------*/
63var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
64if (typeof bootstrap !== typeof undefined) {
65  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
66    return new bootstrap.Popover(popoverTriggerEl)
67  })
68}
69/*---------------------------------------------------------------------
70                Tooltip
71-----------------------------------------------------------------------*/
72if (typeof bootstrap !== typeof undefined) {
73  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
74  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
75    return new bootstrap.Tooltip(tooltipTriggerEl)
76  })
77
78  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-sidebar-toggle="tooltip"]'))
79  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
80    return new bootstrap.Tooltip(tooltipTriggerEl)
81  })
82}
83/*---------------------------------------------------------------------
84              Circle Progress
85-----------------------------------------------------------------------*/
86const progressBar = document.getElementsByClassName('circle-progress')
87if (typeof progressBar !== typeof undefined) {
88  Array.from(progressBar, (elem) => {
89    const minValue = elem.getAttribute('data-min-value')
90    const maxValue = elem.getAttribute('data-max-value')
91    const value = elem.getAttribute('data-value')
92    const type = elem.getAttribute('data-type')
93    if (elem.getAttribute('id') !== '' && elem.getAttribute('id') !== null) {
94      new CircleProgress('#' + elem.getAttribute('id'), {
95        min: minValue,
96        max: maxValue,
97        value: value,
98        textFormat: type,
99      });
100    }
101  })
102}
103/*---------------------------------------------------------------------
104              Progress Bar
105-----------------------------------------------------------------------*/
106const progressBarInit = (elem) => {
107  const currentValue = elem.getAttribute('aria-valuenow')
108  elem.style.width = '0%'
109  elem.style.transition = 'width 2s'
110  if (typeof Waypoint !== typeof undefined) {
111    new Waypoint({
112      element: elem,
113      handler: function () {
114        setTimeout(() => {
115          elem.style.width = currentValue + '%'
116        }, 100);
117      },
118      offset: 'bottom-in-view',
119    })
120  }
121}
122const customProgressBar = document.querySelectorAll('[data-toggle="progress-bar"]')
123Array.from(customProgressBar, (elem) => {
124  progressBarInit(elem)
125})
126/*---------------------------------------------------------------------
127                 noUiSlider
128-----------------------------------------------------------------------*/
129const rangeSlider = document.querySelectorAll('.range-slider');
130Array.from(rangeSlider, (elem) => {
131  if (typeof noUiSlider !== typeof undefined) {
132    noUiSlider.create(elem, {
133      start: [20, 80],
134      connect: true,
135      range: {
136        'min': 0,
137        'max': 100
138      }
139    })
140  }
141})
142
143const slider = document.querySelectorAll('.slider');
144Array.from(slider, (elem) => {
145  if (typeof noUiSlider !== typeof undefined) {
146    noUiSlider.create(elem, {
147      start: 50,
148      connect: [true, false],
149      range: {
150        'min': 0,
151        'max': 100
152      }
153    })
154  }
155})
156/*---------------------------------------------------------------------
157              Copy To Clipboard
158-----------------------------------------------------------------------*/
159const copy = document.querySelectorAll('[data-toggle="copy"]')
160if (typeof copy !== typeof undefined) {
161  Array.from(copy, (elem) => {
162    elem.addEventListener('click', (e) => {
163      const target = elem.getAttribute("data-copy-target");
164      let value = elem.getAttribute("data-copy-value");
165      const container = document.querySelector(target);
166      if (container !== undefined && container !== null) {
167        if (container.value !== undefined && container.value !== null) {
168          value = container.value;
169        } else {
170          value = container.innerHTML;
171        }
172      }
173      if (value !== null) {
174        const elem = document.createElement("input");
175        document.querySelector("body").appendChild(elem);
176        elem.value = value;
177        elem.select();
178        document.execCommand("copy");
179        elem.remove();
180      }
181    })
182  });
183}
184
185/*---------------------------------------------------------------------
186              CounterUp 2
187-----------------------------------------------------------------------*/
188if (window.counterUp !== undefined) {
189  const counterUp = window.counterUp["default"];
190  const counterUp2 = document.querySelectorAll('.counter')
191  Array.from(counterUp2, (el) => {
192    if (typeof Waypoint !== typeof undefined) {
193      const waypoint = new Waypoint({
194        element: el,
195        handler: function () {
196          counterUp(el, {
197            duration: 1000,
198            delay: 10,
199          });
200          this.destroy();
201        },
202        offset: "bottom-in-view",
203      });
204    }
205  })
206}
207/*---------------------------------------------------------------------
208              SliderTab
209-----------------------------------------------------------------------*/
210Array.from(document.querySelectorAll('[data-toggle="slider-tab"]'), (elem) => {
211  if (typeof SliderTab !== typeof undefined) {
212    new SliderTab(elem)
213  }
214})
215
216let Scrollbar
217if (typeof Scrollbar !== typeof null) {
218  if (document.querySelectorAll(".data-scrollbar").length) {
219    Scrollbar = window.Scrollbar
220    Scrollbar.init(document.querySelector('.data-scrollbar'), {
221      continuousScrolling: false,
222    })
223  }
224}
225
226/*---------------------------------------------------------------------
227  Data tables
228-----------------------------------------------------------------------*/
229if ($.fn.DataTable) {
230  if ($('[data-toggle="data-table"]').length) {
231    const table = $('[data-toggle="data-table"]').DataTable({
232      "dom": '<"row align-items-center"<"col-md-6" l><"col-md-6" f>><"table-responsive border-bottom my-3" rt><"row align-items-center" <"col-md-6" i><"col-md-6" p>

232><"clear">',
233    });
234  }
235}
236/*---------------------------------------------------------------------
237  Active Class for Pricing Table
238-----------------------------------------------------------------------*/
239const tableTh = document.querySelectorAll('#my-table tr th')
240const tableTd = document.querySelectorAll('#my-table td')
241if (tableTh !== null) {
242  Array.from(tableTh, (elem) => {
243    elem.addEventListener('click', (e) => {
244      Array.from(tableTh, (th) => {
245        if (th.children.length) {
246          th.children[0].classList.remove('active')
247        }
248      })
249      elem.children[0].classList.add('active')
250      Array.from(tableTd, (td) => td.classList.remove('active'))
251
252      const col = Array.prototype.indexOf.call(document.querySelector('#my-table tr').children, elem);
253      const tdIcons = document.querySelectorAll("#my-table tr td:nth-child(" + parseInt(col + 1) + ")");
254      Array.from(tdIcons, (td) => td.classList.add('active'))
255    })
256  })
257}
258/*---------------------------------------------------------------------
259              AOS Animation Plugin
260-----------------------------------------------------------------------*/
261if (typeof AOS !== typeof undefined) {
262  AOS.init({
263    startEvent: 'DOMContentLoaded',
264    disable: function () {
265      var maxWidth = 996;
266      return window.innerWidth < maxWidth;
267    },
268    throttleDelay: 10,
269    once: true,
270    duration: 700,
271    offset: 10
272  });
273}
274/*---------------------------------------------------------------------
275              Resize Plugins
276-----------------------------------------------------------------------*/
277const resizePlugins = () => {
278  // sidebar-mini
279  const tabs = document.querySelectorAll('.nav')
280  const sidebarResponsive = document.querySelector('.sidebar-default')
281  if (window.innerWidth < 1025) {
282    Array.from(tabs, (elem) => {
283      if (!elem.classList.contains('flex-column') && elem.classList.contains('nav-tabs') && elem.classList.contains('nav-pills')) {
284        elem.classList.add('flex-column', 'on-resize');
285      }
286    })
287    if (sidebarResponsive !== null) {
288      if (!sidebarResponsive.classList.contains('sidebar-mini')) {
289        sidebarResponsive.classList.add('sidebar-mini', 'on-resize')
290      }
291    }
292  } else {
293    Array.from(tabs, (elem) => {
294      if (elem.classList.contains('on-resize')) {
295        elem.classList.remove('flex-column', 'on-resize');
296      }
297    })
298    if (sidebarResponsive !== null) {
299      if (sidebarResponsive.classList.contains('sidebar-mini') && sidebarResponsive.classList.contains('on-resize')) {
300        sidebarResponsive.classList.remove('sidebar-mini', 'on-resize')
301      }
302    }
303  }
304}
305/*---------------------------------------------------------------------
306              LoaderInit
307-----------------------------------------------------------------------*/
308const loaderInit = () => {
309  const loader = document.querySelector('.loader')
310  setTimeout(() => {
311    loader.classList.add('animate__animated', 'animate__fadeOut')
312    setTimeout(() => {
313      loader.classList.add('d-none')
314    }, 500)
315  }, 500)
316}
317/*---------------------------------------------------------------------
318              Sidebar Toggle
319-----------------------------------------------------------------------*/
320const sidebarToggle = (elem) => {
321  elem.addEventListener('click', (e) => {
322    const sidebar = document.querySelector('.sidebar')
323    if (sidebar.classList.contains('sidebar-mini')) {
324      sidebar.classList.remove('sidebar-mini')
325    } else {
326      sidebar.classList.add('sidebar-mini')
327    }
328  })
329}
330
331const sidebarToggleBtn = document.querySelectorAll('[data-toggle="sidebar"]')
332const sidebar = document.querySelector('.sidebar-default')
333if (sidebar !== null) {
334  const sidebarActiveItem = sidebar.querySelectorAll('.active')
335  Array.from(sidebarActiveItem, (elem) => {
336    if (!elem.closest('ul').classList.contains('iq-main-menu')) {
337      const childMenu = elem.closest('ul')
338      childMenu.classList.add('show')
339      const parentMenu = childMenu.closest('li').querySelector('.nav-link')
340      parentMenu.classList.add('collapsed')
341      parentMenu.setAttribute('aria-expanded', true)
342    }
343  })
344}
345Array.from(sidebarToggleBtn, (sidebarBtn) => {
346  sidebarToggle(sidebarBtn)
347})
348/*---------------------------------------------------------------------------
349                            Back To Top
350----------------------------------------------------------------------------*/
351const backToTop = document.getElementById("back-to-top")
352if (backToTop !== null && backToTop !== undefined) {
353  document.getElementById("back-to-top").classList.add("animate__animated", "animate__fadeOut")
354  window.addEventListener('scroll', (e) => {
355    if (document.documentElement.scrollTop > 250) {
356      document.getElementById("back-to-top").classList.remove("animate__fadeOut")
357      document.getElementById("back-to-top").classList.add("animate__fadeIn")
358    } else {
359      document.getElementById("back-to-top").classList.remove("animate__fadeIn")
360      document.getElementById("back-to-top").classList.add("animate__fadeOut")
361    }
362  })
363  // scroll body to 0px on click
364  document.querySelector('#top').addEventListener('click', (e) => {
365    e.preventDefault()
366    window.scrollTo({ top: 0, behavior: 'smooth' });
367  })
368}
369/*---------------------------------------------------------------------
370              DOMContentLoaded
371-----------------------------------------------------------------------*/
372document.addEventListener('DOMContentLoaded', (event) => {
373  resizePlugins()
374  loaderInit()
375});
376/*---------------------------------------------------------------------
377              Window Resize
378-----------------------------------------------------------------------*/
379window.addEventListener('resize', function (event) {
380  resizePlugins()
381});
382/*---------------------------------------------------------------------
383| | | | | DropDown
384-----------------------------------------------------------------------*/
385function darken_screen(yesno) {
386  if (yesno == true) {
387    if (document.querySelector('.screen-darken') !== null) {
388      document.querySelector('.screen-darken').classList.add('active');
389    }
390  }
391  else if (yesno == false) {
392    if (document.querySelector('.screen-darken') !== null) {
393      document.querySelector('.screen-darken').classList.remove('active');
394    }
395  }
396}
397function close_offcanvas() {
398  darken_screen(false);
399  if (document.querySelector('.mobile-offcanvas.show') !== null) {
400    document.querySelector('.mobile-offcanvas.show').classList.remove('show');
401    document.body.classList.remove('offcanvas-active');
402  }
403}
404function show_offcanvas(offcanvas_id) {
405  darken_screen(true);
406  if (document.getElementById(offcanvas_id) !== null) {
407    document.getElementById(offcanvas_id).classList.add('show');
408    document.body.classList.add('offcanvas-active');
409  }
410}
411document.addEventListener("DOMContentLoaded", function () {
412  document.querySelectorAll('[data-trigger]').forEach(function (everyelement) {
413    let offcanvas_id = everyelement.getAttribute('data-trigger');
414    everyelement.addEventListener('click', function (e) {
415      e.preventDefault();
416      show_offcanvas(offcanvas_id);
417    });
418  });
419  if (document.querySelectorAll('.btn-close')) {
420    document.querySelectorAll('.btn-close').forEach(function (everybutton) {
421      everybutton.addEventListener('click', function (e) {
422        close_offcanvas();
423      });
424    });
425  }
426  if (document.querySelector('.screen-darken')) {
427    document.querySelector('.screen-darken').addEventListener('click', function (event) {
428      close_offcanvas();
429    });
430  }
431});
432if (document.querySelector('#navbarSideCollapse')) {
433  document.querySelector('#navbarSideCollapse').addEventListener('click', function () {
434    document.querySelector('.offcanvas-collapse').classList.toggle('open')
435  })
436}
437/*---------------------------------------------------------------------
438                                   Form Validation
439-----------------------------------------------------------------------*/
440// Example starter JavaScript for disabling form submissions if there are invalid fields
441window.addEventListener('load', function () {
442  // Fetch all the forms we want to apply custom Bootstrap validation styles to
443  var forms = document.getElementsByClassName('needs-validation');
444  // Loop over them and prevent submission

445  var validation = Array.prototype.filter.call(forms, function (form) {
446    form.addEventListener('submit', function (event) {
447      if (form.checkValidity() === false) {
448        event.preventDefault();
449        event.stopPropagation();
450      }
451      form.classList.add('was-validated');
452    }, false);
453  });
454}, false);
455
456(function () {
457  /*----------------------------------------------------------
458                             Flatpickr
459  -------------------------------------------------------------*/
460  const date_flatpickr = document.querySelectorAll('.date_flatpicker')
461  Array.from(date_flatpickr, (elem) => {
462    if (typeof flatpickr !== typeof undefined) {
463      flatpickr(elem, {
464        minDate: "today",
465        dateFormat: "Y-m-d",
466      })
467    }
468  })
469  /*----------Range Flatpickr--------------*/
470  const range_flatpicker = document.querySelectorAll('.range_flatpicker')
471  Array.from(range_flatpicker, (elem) => {
472    if (typeof flatpickr !== typeof undefined) {
473      flatpickr(elem, {
474        mode: "range",
475        minDate: "today",
476        dateFormat: "Y-m-d",
477      })
478    }
479  })
480  /*------------Wrap Flatpickr---------------*/
481  const wrap_flatpicker = document.querySelectorAll('.wrap_flatpicker')
482  Array.from(wrap_flatpicker, (elem) => {
483    if (typeof flatpickr !== typeof undefined) {
484      flatpickr(elem, {
485        wrap: true,
486        minDate: "today",
487        dateFormat: "Y-m-d",
488      })
489    }
490  })
491  /*-------------Time Flatpickr---------------*/
492  const time_flatpickr = document.querySelectorAll('.time_flatpicker')
493  Array.from(time_flatpickr, (elem) => {
494    if (typeof flatpickr !== typeof undefined) {
495      flatpickr(elem, {
496        enableTime: true,
497        noCalendar: true,
498        dateFormat: "H:i",
499      })
500    }
501  })
502  /*-------------Inline Flatpickr-----------------*/
503  const inline_flatpickr = document.querySelectorAll('.inline_flatpickr')
504  Array.from(inline_flatpickr, (elem) => {
505    if (typeof flatpickr !== typeof undefined) {
506      flatpickr(elem, {
507        inline: true,
508        minDate: "today",
509        dateFormat: "Y-m-d",
510      })
511    }
512  })
513
514})();