https://roadkill.ch/assets/js/main.js

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

172  }
173
174  /**
175   * Menu isotope and filter
176   */
177  window.addEventListener('load', () => {
178    let menuContainer = select('.menu-container');
179    if (menuContainer) {
180      let menuIsotope = new Isotope(menuContainer, {
181        itemSelector: '.menu-item',
182        layoutMode: 'fitRows'
183      });
184
185      let menuFilters = select('#menu-flters li', true);
186
187      on('click', '#menu-flters li', function(e) {
188        e.preventDefault();
189        menuFilters.forEach(function(el) {
190          el.classList.remove('filter-active');
191        });
192        this.classList.add('filter-active');
193
194        menuIsotope.arrange({
195          filter: this.getAttribute('data-filter')
196        });
197        menuIsotope.on('arrangeComplete', function() {
198          AOS.refresh()
199        });
200      }, true);
201    }
202
203  });
204
205  /**
206   * Initiate glightbox 
207   */
208  const glightbox = GLightbox({
209    selector: '.glightbox'
210  });
211
212  /**
213   * Events slider
214   */
215  new Swiper('.events-slider', {
216    speed: 600,
217    loop: true,
218    autoplay: {
219      delay: 5000,
220      disableOnInteraction: false
221    },
222    slidesPerView: 'auto',
223    pagination: {
224      el: '.swiper-pagination',
225      type: 'bullets',
226      clickable: true
227    }
228  });
229
230  /**
231   * Testimonials slider
232   */
233  new Swiper('.testimonials-slider', {
234    speed: 600,
235    loop: true,
236    autoplay: {
237      delay: 5000,
238      disableOnInteraction: false
239    },
240    slidesPerView: 'auto',
241    pagination: {
242      el: '.swiper-pagination',
243      type: 'bullets',
244      clickable: true
245    },
246    breakpoints: {
247      320: {
248        slidesPerView: 1,
249        spaceBetween: 20
250      },
251
252      1200: {
253        slidesPerView: 3,
254        spaceBetween: 20
255      }
256    }
257  });
258
259  /**
260   * Initiate gallery lightbox 
261   */
262  const galleryLightbox = GLightbox({
263    selector: '.gallery-lightbox'
264  });
265
266  /**
267   * Animation on scroll
268   */
269  window.addEventListener('load', () => {
270    AOS.init({
271      duration: 1000,
272      easing: 'ease-in-out',
273      once: true,
274      mirror: false
275    })
276  });
277
278})()