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

1/**
2* Template Name: DevFolio - v4.3.0
3* Template URL: https://bootstrapmade.com/devfolio-bootstrap-portfolio-html-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   * Intro type effect
163   */
164  const typed = select('.typed')
165  if (typed) {
166    let typed_strings = typed.getAttribute('data-typed-items')
167    typed_strings = typed_strings.split(',')
168    new Typed('.typed', {

169      strings: typed_strings,
170      loop: true,
171      typeSpeed: 100,
172      backSpeed: 50,
173      backDelay: 2000
174    });
175  }
176
177  /**
178   * Initiate portfolio lightbox 
179   */
180  const portfolioLightbox = GLightbox({
181    selector: '.portfolio-lightbox'
182  });
183
184  /**
185   * Testimonials slider
186   */
187  new Swiper('.testimonials-slider', {
188    speed: 600,
189    loop: true,
190    autoplay: {
191      delay: 5000,
192      disableOnInteraction: false
193    },
194    slidesPerView: 'auto',
195    pagination: {
196      el: '.swiper-pagination',
197      type: 'bullets',
198      clickable: true
199    }
200  });
201
202  /**
203   * Portfolio details slider
204   */
205  new Swiper('.portfolio-details-slider', {
206    speed: 400,
207    loop: true,
208    autoplay: {
209      delay: 5000,
210      disableOnInteraction: false
211    },
212    pagination: {
213      el: '.swiper-pagination',
214      type: 'bullets',
215      clickable: true
216    }
217  });
218
219  /**
220   * Preloader
221   */
222  let preloader = select('#preloader');
223  if (preloader) {
224    window.addEventListener('load', () => {
225      preloader.remove()
226    });
227  }
228
229})()