sanic_start

1
document.addEventListener('DOMContentLoaded', () => {
2

3
  // Get all "navbar-burger" elements
4
  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
5
  console.log($navbarBurgers)
6
  // Add a click event on each of them
7
  $navbarBurgers.forEach( el => {
8
    el.addEventListener('click', () => {
9

10
      // Get the target from the "data-target" attribute
11
      const target = el.dataset.target;
12
      const $target = document.getElementById(target);
13

14
      // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
15
      el.classList.toggle('is-active');
16
      $target.classList.toggle('is-active');
17

18
    });
19
  });
20

21
});
22
document.addEventListener('DOMContentLoaded', () => {
23
  // Functions to open and close a modal
24
  function openModal($el) {
25
    $el.classList.add('is-active');
26
  }
27

28
  function closeModal($el) {
29
    $el.classList.remove('is-active');
30
  }
31

32
  function closeAllModals() {
33
    (document.querySelectorAll('.modal') || []).forEach(($modal) => {
34
      closeModal($modal);
35
    });
36
  }
37

38
  // Add a click event on buttons to open a specific modal
39
  (document.querySelectorAll('.js-modal-trigger') || []).forEach(($trigger) => {
40
    const modal = $trigger.dataset.target;
41
    const $target = document.getElementById(modal);
42

43
    $trigger.addEventListener('click', () => {
44
      openModal($target);
45
    });
46
  });
47

48
  // Add a click event on various child elements to close the parent modal
49
  (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
50
    const $target = $close.closest('.modal');
51

52
    $close.addEventListener('click', () => {
53
      closeModal($target);
54
    });
55
  });
56

57
  // Add a keyboard event to close all modals
58
  document.addEventListener('keydown', (event) => {
59
    if(event.key === "Escape") {
60
      closeAllModals();
61
    }
62
  });
63
});
64