https://neeharaa.com/assets/js/main.js

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

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