https://panther-one.com/Pre-requisitos/assets/js/main.js

1/**
2* Template Name: Imperial - v5.3.0
3* Template URL: https://bootstrapmade.com/imperial-free-onepage-bootstrap-theme/
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 + 300
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    let elementPos = select(el).offsetTop
71    window.scrollTo({
72      top: elementPos - offset,
73      behavior: 'smooth'
74    })
75  }
76
77  /**
78   * Header fixed top on scroll
79   */
80  let selectHeader = select('#header')
81  if (selectHeader) {
82    let headerOffset = selectHeader.offsetTop
83    let nextElement = selectHeader.nextElementSibling
84    const headerFixed = () => {
85      if ((headerOffset - window.scrollY) <= 0) {
86        selectHeader.classList.add('fixed-top')
87        nextElement.classList.add('scrolled-offset')
88      } else {
89        selectHeader.classList.remove('fixed-top')
90        nextElement.classList.remove('scrolled-offset')
91      }
92    }
93    window.addEventListener('load', headerFixed)
94    onscroll(document, headerFixed)
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      setTimeout(() => {
168        preloader.remove()
169      }, 100);
170    });
171  }
172
173  /**
174   * Hero type effect

175   */
176  const typed = select('.typed')
177  if (typed) {
178    let typed_strings = typed.getAttribute('data-typed-items')
179    typed_strings = typed_strings.split(',')
180    new Typed('.typed', {
181      strings: typed_strings,
182      loop: true,
183      typeSpeed: 100,
184      backSpeed: 50,
185      backDelay: 2000
186    });
187  }
188
189  /**
190   * Porfolio isotope and filter
191   */
192  window.addEventListener('load', () => {
193    let portfolioContainer = select('.portfolio-container');
194    if (portfolioContainer) {
195      let portfolioIsotope = new Isotope(portfolioContainer, {
196        itemSelector: '.portfolio-item',
197        layoutMode: 'fitRows'
198      });
199
200      let portfolioFilters = select('#portfolio-flters li', true);
201
202      on('click', '#portfolio-flters li', function(e) {
203        e.preventDefault();
204        portfolioFilters.forEach(function(el) {
205          el.classList.remove('filter-active');
206        });
207        this.classList.add('filter-active');
208
209        portfolioIsotope.arrange({
210          filter: this.getAttribute('data-filter')
211        });
212      }, true);
213    }
214
215  });
216
217  /**
218   * Initiate portfolio lightbox 
219   */
220  const portfolioLightbox = GLightbox({
221    selector: '.portfolio-lightbox'
222  });
223
224  /**
225   * Portfolio details slider
226   */
227  new Swiper('.portfolio-details-slider', {
228    speed: 400,
229    loop: true,
230    autoplay: {
231      delay: 5000,
232      disableOnInteraction: false
233    },
234    pagination: {
235      el: '.swiper-pagination',
236      type: 'bullets',
237      clickable: true
238    }
239  });
240
241})()