https://nishihama.org/assets/js/main.js

1/**
2* Template Name: Presento - v3.10.0
3* Template URL: https://bootstrapmade.com/presento-bootstrap-corporate-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   * Clients Slider
162   */
163  new Swiper('.clients-slider', {
164    speed: 400,
165    loop: true,
166    autoplay: {
167      delay: 5000,
168      disableOnInteraction: false
169    },
170    slidesPerView: 'auto',
171    pagination: {
172      el: '.swiper-pagination',
173      type: 'bullets',
174      clickable: true
175    },
176    breakpoints: {
177      320: {
178        slidesPerView: 2,
179        spaceBetween: 40
180      },
181      480: {
182        slidesPerView: 3,
183        spaceBetween: 60
184      },
185      640: {
186        slidesPerView: 4,
187        spaceBetween: 80
188      },
189      992: {
190        slidesPerView: 6,
191        spaceBetween: 120
192      }
193    }
194  });
195
196  /**
197   * Porfolio isotope and filter
198   */
199  window.addEventListener('load', () => {
200    let portfolioContainer = select('.portfolio-container');
201    if (portfolioContainer) {
202      let portfolioIsotope = new Isotope(portfolioContainer, {
203        itemSelector: '.portfolio-item',
204        layoutMode: 'fitRows'
205      });
206
207      let portfolioFilters = select('#portfolio-flters li', true);
208
209      on('click', '#portfolio-flters li', function(e) {
210        e.preventDefault();

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