https://acode-u.org/assets/js/main.js

1/**
2* Template Name: Multi - v4.7.0
3* Template URL: https://bootstrapmade.com/multi-responsive-bootstrap-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    if (!header.classList.contains('header-scrolled')) {
71      offset -= 16
72    }
73
74    let elementPos = select(el).offsetTop
75    window.scrollTo({
76      top: elementPos - offset,
77      behavior: 'smooth'
78    })
79  }
80
81  /**
82   * Toggle .header-scrolled class to #header when page is scrolled
83   */
84  let selectHeader = select('#header')
85  if (selectHeader) {
86    const headerScrolled = () => {
87      if (window.scrollY > 100) {
88        selectHeader.classList.add('header-scrolled')
89      } else {
90        selectHeader.classList.remove('header-scrolled')
91      }
92    }
93    window.addEventListener('load', headerScrolled)
94    onscroll(document, headerScrolled)
95  }
96
97  /**
98   * Back to top button
99   */
100  let backtotop = select('.back-to-top')
101  if (backtotop) {
102    const toggleBacktotop = () => {
103      if (window.scrollY > 100) {
104        backtotop.classList.add('active')
105      } else {
106        backtotop.classList.remove('active')
107      }
108    }
109    window.addEventListener('load', toggleBacktotop)
110    onscroll(document, toggleBacktotop)
111  }
112
113  /**
114   * Mobile nav toggle
115   */
116  on('click', '.mobile-nav-toggle', function(e) {
117    select('#navbar').classList.toggle('navbar-mobile')
118    this.classList.toggle('bi-list')
119    this.classList.toggle('bi-x')
120  })
121
122  /**
123   * Mobile nav dropdowns activate
124   */
125  on('click', '.navbar .dropdown > a', function(e) {
126    if (select('#navbar').classList.contains('navbar-mobile')) {
127      e.preventDefault()
128      this.nextElementSibling.classList.toggle('dropdown-active')
129    }
130  }, true)
131
132  /**
133   * Scrool with ofset on links with a class name .scrollto
134   */
135  on('click', '.scrollto', function(e) {
136    if (select(this.hash)) {
137      e.preventDefault()
138
139      let navbar = select('#navbar')
140      if (navbar.classList.contains('navbar-mobile')) {
141        navbar.classList.remove('navbar-mobile')
142        let navbarToggle = select('.mobile-nav-toggle')
143        navbarToggle.classList.toggle('bi-list')
144        navbarToggle.classList.toggle('bi-x')
145      }
146      scrollto(this.hash)
147    }
148  }, true)
149
150  /**
151   * Scroll with ofset on page load with hash links in the url
152   */
153  window.addEventListener('load', () => {
154    if (window.location.hash) {
155      if (select(window.location.hash)) {
156        scrollto(window.location.hash)
157      }
158    }
159  });
160
161  /**
162   * Preloader
163   */
164  let preloader = select('#preloader');
165  if (preloader) {
166    window.addEventListener('load', () => {
167      preloader.remove()
168    });
169  }
170
171  /**
172   * Hero carousel indicators
173   */
174  let heroCarouselIndicators = select("#hero-carousel-indicators")
175  let heroCarouselItems = select('#heroCarousel .carousel-item', true)
176

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