https://bmftr-kurt.de/skin/kurt/assets/js/main.js

1/**
2* Template Name: Mamba - v4.7.0
3* Template URL: https://bootstrapmade.com/mamba-one-page-bootstrap-template-free/
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   * Header fixed top on scroll
79   */
80  let selectHeader = select('#header')
81  if (selectHeader) {
82    let headerOffset = selectHeader.offsetTop
83    let nextElement = selectHeader.nextElementSibling
84    const headerFixed = () => {
85      if ((headerOffset - window.scrollY) <= 0) {
86        selectHeader.classList.add('fixed-top')
87        nextElement.classList.add('scrolled-offset')
88      } else {
89        selectHeader.classList.remove('fixed-top')
90        nextElement.classList.remove('scrolled-offset')
91      }
92    }
93    window.addEventListener('load', headerFixed)
94    onscroll(document, headerFixed)
95  }
96
97  /**
98   * Hero carousel indicators
99   */
100  let heroCarouselIndicators = select("#hero-carousel-indicators")
101  let heroCarouselItems = select('#heroCarousel .carousel-item', true)
102
103  heroCarouselItems.forEach((item, index) => {
104    (index === 0) ?
105    heroCarouselIndicators.innerHTML += "<li data-bs-target='#heroCarousel' data-bs-slide-to='" + index + "' class='active'></li>":
106      heroCarouselIndicators.innerHTML += "<li data-bs-target='#heroCarousel' data-bs-slide-to='" + index + "'></li>"
107  });
108
109  /**
110   * Back to top button
111   */
112  let backtotop = select('.back-to-top')
113  if (backtotop) {
114    const toggleBacktotop = () => {
115      if (window.scrollY > 100) {
116        backtotop.classList.add('active')
117      } else {
118        backtotop.classList.remove('active')
119      }
120    }
121    window.addEventListener('load', toggleBacktotop)
122    onscroll(document, toggleBacktotop)
123  }
124
125  /**
126   * Mobile nav toggle
127   */
128  on('click', '.mobile-nav-toggle', function(e) {
129    select('#navbar').classList.toggle('navbar-mobile')
130    this.classList.toggle('bi-list')
131    this.classList.toggle('bi-x')
132  })
133
134  /**
135   * Mobile nav dropdowns activate
136   */
137  on('click', '.navbar .dropdown > a', function(e) {
138    if (select('#navbar').classList.contains('navbar-mobile')) {
139      e.preventDefault()
140      this.nextElementSibling.classList.toggle('dropdown-active')
141    }
142  }, true)
143
144  /**
145   * Scrool with ofset on links with a class name .scrollto
146   */
147  on('click', '.scrollto', function(e) {
148    if (select(this.hash)) {
149      e.preventDefault()
150
151      let navbar = select('#navbar')
152      if (navbar.classList.contains('navbar-mobile')) {
153        navbar.classList.remove('navbar-mobile')
154        let navbarToggle = select('.mobile-nav-toggle')

155        navbarToggle.classList.toggle('bi-list')
156        navbarToggle.classList.toggle('bi-x')
157      }
158      scrollto(this.hash)
159    }
160  }, true)
161
162  /**
163   * Scroll with ofset on page load with hash links in the url
164   */
165  window.addEventListener('load', () => {
166    if (window.location.hash) {
167      if (select(window.location.hash)) {
168        scrollto(window.location.hash)
169      }
170    }
171  });
172
173  /**
174   * Porfolio isotope and filter
175   */
176  window.addEventListener('load', () => {
177    let portfolioContainer = select('.portfolio-container');
178    if (portfolioContainer) {
179      let portfolioIsotope = new Isotope(portfolioContainer, {
180        itemSelector: '.portfolio-item',
181        layoutMode: 'fitRows',
182        filter: '.filter-app'
183      });
184
185      let portfolioFilters = select('#portfolio-flters li', true);
186
187      on('click', '#portfolio-flters li', function(e) {
188        e.preventDefault();
189        portfolioFilters.forEach(function(el) {
190          el.classList.remove('filter-active');
191        });
192        this.classList.add('filter-active');
193
194        portfolioIsotope.arrange({
195          filter: this.getAttribute('data-filter')
196        });
197        portfolioIsotope.on('arrangeComplete', function() {
198          AOS.refresh()
199        });
200      }, true);
201    }
202
203  });
204
205  /**
206   * Initiate portfolio lightbox 
207   */
208  const portfolioLightbox = GLightbox({
209    selector: '.portfolio-lightbox'
210  });
211
212  /**
213   * Portfolio details slider
214   */
215  new Swiper('.portfolio-details-slider', {
216    speed: 400,
217    autoplay: {
218      delay: 5000,
219      disableOnInteraction: false
220    },
221    pagination: {
222      el: '.swiper-pagination',
223      type: 'bullets',
224      clickable: true
225    }
226  });
227
228  /**
229   * Animation on scroll
230   */
231  window.addEventListener('load', () => {
232    AOS.init({
233      duration: 1000,
234      easing: "ease-in-out",
235      once: true,
236      mirror: false
237    });
238  });
239
240})()