https://www.caravaggio.org/assets/js/main.js

1(function() {
2  "use strict";
3
4  /**
5   * Easy selector helper function
6   */
7  const select = (el, all = false) => {
8    el = el.trim()
9    if (all) {
10      return [...document.querySelectorAll(el)]
11    } else {
12      return document.querySelector(el)
13    }
14  }
15
16  /**
17   * Easy event listener function
18   */
19  const on = (type, el, listener, all = false) => {
20    let selectEl = select(el, all)
21    if (selectEl) {
22      if (all) {
23        selectEl.forEach(e => e.addEventListener(type, listener))
24      } else {
25        selectEl.addEventListener(type, listener)
26      }
27    }
28  }
29
30  /**
31   * Easy on scroll event listener 
32   */
33  const onscroll = (el, listener) => {
34    el.addEventListener('scroll', listener)
35  }
36
37  /**
38   * Navbar links active state on scroll
39   */
40  let navbarlinks = select('#navbar .scrollto', true)
41  const navbarlinksActive = () => {
42    let position = window.scrollY + 200
43    navbarlinks.forEach(navbarlink => {
44      if (!navbarlink.hash) return
45      let section = select(navbarlink.hash)
46      if (!section) return
47      if (position >= section.offsetTop && position <= (section.offsetTop + section.offsetHeight)) {
48        navbarlink.classList.add('active')
49      } else {
50        navbarlink.classList.remove('active')
51      }
52    })
53  }
54  window.addEventListener('load', navbarlinksActive)
55  onscroll(document, navbarlinksActive)
56
57  /**
58   * Scrolls to an element with header offset
59   */
60  const scrollto = (el) => {
61    let header = select('#header')
62    let offset = header.offsetHeight
63
64    if (!header.classList.contains('header-scrolled')) {
65      offset -= 20
66    }
67
68    let elementPos = select(el).offsetTop
69    window.scrollTo({
70      top: elementPos - offset,
71      behavior: 'smooth'
72    })
73  }
74
75  /**
76   * Toggle .header-scrolled class to #header when page is scrolled
77   */
78  let selectHeader = select('#header')
79  if (selectHeader) {
80    const headerScrolled = () => {
81      if (window.scrollY > 100) {
82        selectHeader.classList.add('header-scrolled')
83      } else {
84        selectHeader.classList.remove('header-scrolled')
85      }
86    }
87    window.addEventListener('load', headerScrolled)
88    onscroll(document, headerScrolled)
89  }
90
91  /**
92   * Back to top button
93   */
94  let backtotop = select('.back-to-top')
95  if (backtotop) {
96    const toggleBacktotop = () => {
97      if (window.scrollY > 100) {
98        backtotop.classList.add('active')
99      } else {
100        backtotop.classList.remove('active')
101      }
102    }
103    window.addEventListener('load', toggleBacktotop)
104    onscroll(document, toggleBacktotop)
105  }
106
107  /**
108   * Mobile nav toggle
109   */
110  on('click', '.mobile-nav-toggle', function(e) {
111    select('#navbar').classList.toggle('navbar-mobile')
112    this.classList.toggle('bi-list')
113    this.classList.toggle('bi-x')
114  })
115
116  /**
117   * Mobile nav dropdowns activate
118   */
119  on('click', '.navbar .dropdown > a', function(e) {
120    if (select('#navbar').classList.contains('navbar-mobile')) {
121      e.preventDefault()
122      this.nextElementSibling.classList.toggle('dropdown-active')
123    }
124  }, true)
125
126  /**
127   * Scrool with ofset on links with a class name .scrollto
128   */
129  on('click', '.scrollto', function(e) {
130    if (select(this.hash)) {
131      e.preventDefault()
132
133      let navbar = select('#navbar')
134      if (navbar.classList.contains('navbar-mobile')) {
135        navbar.classList.remove('navbar-mobile')
136        let navbarToggle = select('.mobile-nav-toggle')
137        navbarToggle.classList.toggle('bi-list')
138        navbarToggle.classList.toggle('bi-x')
139      }
140      scrollto(this.hash)
141    }
142  }, true)
143
144  /**
145   * Scroll with ofset on page load with hash links in the url
146   */
147  window.addEventListener('load', () => {
148    if (window.location.hash) {
149      if (select(window.location.hash)) {
150        scrollto(window.location.hash)
151      }
152    }
153  });
154
155  /**
156   * Preloader
157   */
158  let preloader = select('#preloader');
159  if (preloader) {
160    window.addEventListener('load', () => {
161      preloader.remove()
162    });

163  }
164
165  function getCurrentScroll() {
166    return window.pageYOffset || document.documentElement.scrollTop;
167  }
168
169})()