https://manzanillo.gob.mx/assets/js/main.js

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

198    loop: true,
199    autoplay: {
200      delay: 5000,
201      disableOnInteraction: false
202    },
203    slidesPerView: 'auto',
204    pagination: {
205      el: '.swiper-pagination',
206      type: 'bullets',
207      clickable: true
208    }
209  });
210
211  /**
212   * Porfolio isotope and filter
213   */
214  window.addEventListener('load', () => {
215    let portfolioContainer = select('.portfolio-container');
216    if (portfolioContainer) {
217      let portfolioIsotope = new Isotope(portfolioContainer, {
218        itemSelector: '.portfolio-item'
219      });
220
221      let portfolioFilters = select('#portfolio-flters li', true);
222
223      on('click', '#portfolio-flters li', function(e) {
224        e.preventDefault();
225        portfolioFilters.forEach(function(el) {
226          el.classList.remove('filter-active');
227        });
228        this.classList.add('filter-active');
229
230        portfolioIsotope.arrange({
231          filter: this.getAttribute('data-filter')
232        });
233        portfolioIsotope.on('arrangeComplete', function() {
234          AOS.refresh()
235        });
236      }, true);
237    }
238
239  });
240
241  /**
242   * Initiate portfolio lightbox 
243   */
244  const portfolioLightbox = GLightbox({
245    selector: '.portfolio-lightbox'
246  });
247
248  /**
249   * Portfolio details slider
250   */
251  new Swiper('.portfolio-details-slider', {
252    speed: 400,
253    loop: true,
254    autoplay: {
255      delay: 5000,
256      disableOnInteraction: false
257    },
258    pagination: {
259      el: '.swiper-pagination',
260      type: 'bullets',
261      clickable: true
262    }
263  });
264
265  /**
266   * Animation on scroll
267   */
268  window.addEventListener('load', () => {
269    AOS.init({
270      duration: 1000,
271      easing: 'ease-in-out',
272      once: true,
273      mirror: false
274    })
275  });
276
277})()