https://codersforum.netlify.app/assets/js/main.js

1
2
3(function() {
4  "use strict";
5
6  /**
7   * Easy selector helper function
8   */
9  const select = (el, all = false) => {
10    el = el.trim()
11    if (all) {
12      return [...document.querySelectorAll(el)]
13    } else {
14      return document.querySelector(el)
15    }
16  }
17
18  /**
19   * Easy event listener function
20   */
21  const on = (type, el, listener, all = false) => {
22    let selectEl = select(el, all)
23    if (selectEl) {
24      if (all) {
25        selectEl.forEach(e => e.addEventListener(type, listener))
26      } else {
27        selectEl.addEventListener(type, listener)
28      }
29    }
30  }
31
32  /**
33   * Easy on scroll event listener 
34   */
35  const onscroll = (el, listener) => {
36    el.addEventListener('scroll', listener)
37  }
38
39  /**
40   * Navbar links active state on scroll
41   */
42  let navbarlinks = select('#navbar .scrollto', true)
43  const navbarlinksActive = () => {
44    let position = window.scrollY + 200
45    navbarlinks.forEach(navbarlink => {
46      if (!navbarlink.hash) return
47      let section = select(navbarlink.hash)
48      if (!section) return
49      if (position >= section.offsetTop && position <= (section.offsetTop + section.offsetHeight)) {
50        navbarlink.classList.add('active')
51      } else {
52        navbarlink.classList.remove('active')
53      }
54    })
55  }
56  window.addEventListener('load', navbarlinksActive)
57  onscroll(document, navbarlinksActive)
58
59  /**
60   * Scrolls to an element with header offset
61   */
62  const scrollto = (el) => {
63    let header = select('#header')
64    let offset = header.offsetHeight
65
66    let elementPos = select(el).offsetTop
67    window.scrollTo({
68      top: elementPos - offset,
69      behavior: 'smooth'
70    })
71  }
72
73  /**
74   * Toggle .header-scrolled class to #header when page is scrolled
75   */
76  let selectHeader = select('#header')
77  if (selectHeader) {
78    const headerScrolled = () => {
79      if (window.scrollY > 100) {
80        selectHeader.classList.add('header-scrolled')
81      } else {
82        selectHeader.classList.remove('header-scrolled')
83      }
84    }
85    window.addEventListener('load', headerScrolled)
86    onscroll(document, headerScrolled)
87  }
88
89  /**
90   * Back to top button
91   */
92  let backtotop = select('.back-to-top')
93  if (backtotop) {
94    const toggleBacktotop = () => {
95      if (window.scrollY > 100) {
96        backtotop.classList.add('active')
97      } else {
98        backtotop.classList.remove('active')
99      }
100    }
101    window.addEventListener('load', toggleBacktotop)
102    onscroll(document, toggleBacktotop)
103  }
104
105  /**
106   * Mobile nav toggle
107   */
108  on('click', '.mobile-nav-toggle', function(e) {
109    select('#navbar').classList.toggle('navbar-mobile')
110    this.classList.toggle('bi-list')
111    this.classList.toggle('bi-x')
112  })
113
114  /**
115   * Mobile nav dropdowns activate
116   */
117  on('click', '.navbar .dropdown > a', function(e) {
118    if (select('#navbar').classList.contains('navbar-mobile')) {
119      e.preventDefault()
120      this.nextElementSibling.classList.toggle('dropdown-active')
121    }
122  }, true)
123
124  /**
125   * Scrool with ofset on links with a class name .scrollto
126   */
127  on('click', '.scrollto', function(e) {
128    if (select(this.hash)) {
129      e.preventDefault()
130
131      let navbar = select('#navbar')
132      if (navbar.classList.contains('navbar-mobile')) {
133        navbar.classList.remove('navbar-mobile')
134        let navbarToggle = select('.mobile-nav-toggle')
135        navbarToggle.classList.toggle('bi-list')
136        navbarToggle.classList.toggle('bi-x')
137      }
138      scrollto(this.hash)
139    }
140  }, true)
141
142  /**
143   * Scroll with ofset on page load with hash links in the url
144   */
145  window.addEventListener('load', () => {
146    if (window.location.hash) {
147      if (select(window.location.hash)) {
148        scrollto(window.location.hash)
149      }
150    }
151  });
152
153  /**
154   * Preloader
155   */
156  let preloader = select('#preloader');
157  if (preloader) {
158    window.addEventListener('load', () => {
159      preloader.remove()
160    });
161  }
162
163  /**
164   * Clients Slider
165   */
166  new Swiper('.clients-slider', {
167    speed: 400,
168    loop: true,
169    autoplay: {
170      delay: 5000,
171      disableOnInteraction: false
172    },
173    slidesPerView: 'auto',
174    pagination: {
175      el: '.swiper-pagination',
176      type: 'bullets',
177      clickable: true
178    },
179    breakpoints: {
180      320: {
181        slidesPerView: 2,
182        spaceBetween: 40
183      },
184      480: {
185        slidesPerView: 3,
186        spaceBetween: 60
187      },
188      640: {
189        slidesPerView: 4,
190        spaceBetween: 80
191      },
192      992: {
193        slidesPerView: 6,
194        spaceBetween: 120
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   * Initiate portfolio lightbox 
231   */
232  const portfolioLightbox = GLightbox({
233    selector: '.portfolio-lightbox'
234  });
235
236  /**
237   * Portfolio details slider
238   */
239  new Swiper('.portfolio-details-slider', {
240    speed: 400,
241    loop: true,
242    autoplay: {
243      delay: 5000,
244      disableOnInteraction: false
245    },
246    pagination: {
247      el: '.swiper-pagination',
248      type: 'bullets',
249      clickable: true
250    }
251  });
252
253  /**
254   * Testimonials slider
255   */
256  new Swiper('.testimonials-slider', {
257    speed: 600,
258    loop: true,
259    autoplay: {
260      delay: 5000,
261      disableOnInteraction: false
262    },
263    slidesPerView: 'auto',
264    pagination: {
265      el: '.swiper-pagination',
266      type: 'bullets',
267      clickable: true
268    }
269  });
270
271  /**
272   * Animation on scroll
273   */
274  window.addEventListener('load', () => {
275    AOS.init({
276      duration: 1000,
277      easing: "ease-in-out",
278      once: true,
279      mirror: false
280    });
281  });
282
283  /**
284   * Initiate Pure Counter 
285   */
286  new PureCounter();
287
288})()