https://smartdev.ai/assets/js/main.js

1/**
2* Template Name: FlexStart - v1.4.0
3* Template URL: https://bootstrapmade.com/flexstart-bootstrap-startup-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    if (all) {
27      select(el, all).forEach(e => e.addEventListener(type, listener))
28    } else {
29      select(el, all).addEventListener(type, listener)
30    }
31  }
32
33  /**
34   * Easy on scroll event listener 
35   */
36  const onscroll = (el, listener) => {
37    el.addEventListener('scroll', listener)
38  }
39
40  /**
41   * Navbar links active state on scroll
42   */
43  let navbarlinks = select('#navbar .scrollto', true)
44  const navbarlinksActive = () => {
45    let position = window.scrollY + 200
46    navbarlinks.forEach(navbarlink => {
47      if (!navbarlink.hash) return
48      let section = select(navbarlink.hash)
49      if (!section) return
50      if (position >= section.offsetTop && position <= (section.offsetTop + section.offsetHeight)) {
51        navbarlink.classList.add('active')
52      } else {
53        navbarlink.classList.remove('active')
54      }
55    })
56  }
57  window.addEventListener('load', navbarlinksActive)
58  onscroll(document, navbarlinksActive)
59
60  /**
61   * Scrolls to an element with header offset
62   */
63  const scrollto = (el) => {
64    let header = select('#header')
65    let offset = header.offsetHeight
66
67    if (!header.classList.contains('header-scrolled')) {
68      offset -= 10
69    }
70
71    let elementPos = select(el).offsetTop
72    window.scrollTo({
73      top: elementPos - offset,
74      behavior: 'smooth'
75    })
76  }
77
78  /**
79   * Toggle .header-scrolled class to #header when page is scrolled
80   */
81  let selectHeader = select('#header')
82  if (selectHeader) {
83    const headerScrolled = () => {
84      if (window.scrollY > 100) {
85        selectHeader.classList.add('header-scrolled')
86      } else {
87        selectHeader.classList.remove('header-scrolled')
88      }
89    }
90    window.addEventListener('load', headerScrolled)
91    onscroll(document, headerScrolled)
92  }
93
94  /**
95   * Back to top button
96   */
97  let backtotop = select('.back-to-top')
98  if (backtotop) {
99    const toggleBacktotop = () => {
100      if (window.scrollY > 100) {
101        backtotop.classList.add('active')
102      } else {
103        backtotop.classList.remove('active')
104      }
105    }
106    window.addEventListener('load', toggleBacktotop)
107    onscroll(document, toggleBacktotop)
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   * Clients Slider
160   */
161  new Swiper('.clients-slider', {
162    speed: 400,
163    loop: true,
164    autoplay: {
165      delay: 5000,
166      disableOnInteraction: false
167    },
168    slidesPerView: 'auto',
169    pagination: {
170      el: '.swiper-pagination',
171      type: 'bullets',
172      clickable: true
173    },
174    breakpoints: {
175      320: {
176        slidesPerView: 2,
177        spaceBetween: 40
178      },
179      480: {
180        slidesPerView: 3,
181        spaceBetween: 60
182      },
183      640: {
184        slidesPerView: 4,
185        spaceBetween: 80
186      },
187      992: {
188        slidesPerView: 6,
189        spaceBetween: 120
190      }
191    }
192  });
193
194  /**
195   * Porfolio isotope and filter
196   */
197  window.addEventListener('load', () => {
198    let portfolioContainer = select('.portfolio-container');
199    if (portfolioContainer) {
200      let portfolioIsotope = new Isotope(portfolioContainer, {
201        itemSelector: '.portfolio-item',
202        layoutMode: 'fitRows'
203      });
204
205      let portfolioFilters = select('#portfolio-flters li', true);
206
207      on('click', '#portfolio-flters li', function(e) {
208        e.preventDefault();

209        portfolioFilters.forEach(function(el) {
210          el.classList.remove('filter-active');
211        });
212        this.classList.add('filter-active');
213
214        portfolioIsotope.arrange({
215          filter: this.getAttribute('data-filter')
216        });
217        aos_init();
218      }, true);
219    }
220
221  });
222
223  /**
224   * Initiate portfolio lightbox 
225   */
226  const portfolioLightbox = GLightbox({
227    selector: '.portfokio-lightbox'
228  });
229
230  /**
231   * Portfolio details slider
232   */
233  new Swiper('.portfolio-details-slider', {
234    speed: 400,
235    autoplay: {
236      delay: 5000,
237      disableOnInteraction: false
238    },
239    pagination: {
240      el: '.swiper-pagination',
241      type: 'bullets',
242      clickable: true
243    }
244  });
245
246  /**
247   * Testimonials slider
248   */
249  new Swiper('.testimonials-slider', {
250    speed: 600,
251    loop: true,
252    autoplay: {
253      delay: 5000,
254      disableOnInteraction: false
255    },
256    slidesPerView: 'auto',
257    pagination: {
258      el: '.swiper-pagination',
259      type: 'bullets',
260      clickable: true
261    },
262    breakpoints: {
263      320: {
264        slidesPerView: 1,
265        spaceBetween: 40
266      },
267
268      1200: {
269        slidesPerView: 3,
270      }
271    }
272  });
273
274  /**
275   * Animation on scroll
276   */
277  function aos_init() {
278    AOS.init({
279      duration: 1000,
280      easing: "ease-in-out",
281      once: true,
282      mirror: false
283    });
284  }
285  window.addEventListener('load', () => {
286    aos_init();
287  });
288
289})();