https://lafayette250.org/js/main.js

1/* ===================================================================
2 * Ceevee 2.0.0 - Main JS
3 *
4 * ------------------------------------------------------------------- */
5
6(function(html) {
7
8    "use strict";
9    
10    html.className = html.className.replace(/\bno-js\b/g, '') + ' js ';
11
12
13   /* Preloader
14    * -------------------------------------------------- */
15    const ssPreloader = function() {
16
17        const preloader = document.querySelector('#preloader');
18        if (!preloader) return;
19
20        window.addEventListener('load', function() {
21            
22            document.querySelector('body').classList.remove('ss-preload');
23            document.querySelector('body').classList.add('ss-loaded');
24
25            preloader.addEventListener('transitionend', function(e) {
26                if (e.target.matches("#preloader")) {
27                    this.style.display = 'none';
28                }
29            });
30
31        });
32
33        // force page scroll position to top at page refresh
34        // window.addEventListener('beforeunload' , function () {
35        //     window.scrollTo(0, 0);
36        // });
37
38    }; // end ssPreloader
39
40
41   /* Parallax
42    * -------------------------------------------------- */
43    const ssParallax = function() { 
44
45        const rellax = new Rellax('.rellax');
46
47    }; // end ssParallax
48
49
50   /* Move header menu
51    * -------------------------------------------------- */
52    const ssMoveHeader = function () {
53
54        const hdr = document.querySelector('.s-header');
55        const hero = document.querySelector('#hero');
56        let triggerHeight;
57
58        if (!(hdr && hero)) return;
59
60        setTimeout(function(){
61            triggerHeight = hero.offsetHeight - 170;
62        }, 300);
63
64        window.addEventListener('scroll', function () {
65
66            let loc = window.scrollY;
67           
68
69            if (loc > triggerHeight) {
70                hdr.classList.add('sticky');
71            } else {
72                hdr.classList.remove('sticky');
73            }
74
75            if (loc > triggerHeight + 20) {
76                hdr.classList.add('offset');
77            } else {
78                hdr.classList.remove('offset');
79            }
80
81            if (loc > triggerHeight + 150) {
82                hdr.classList.add('scrolling');
83            } else {
84                hdr.classList.remove('scrolling');
85            }
86
87        });
88
89    }; // end ssMoveHeader
90
91
92   /* Mobile Menu
93    * ---------------------------------------------------- */ 
94    const ssMobileMenu = function() {
95
96        const toggleButton = document.querySelector('.s-header__menu-toggle');
97        const headerNavWrap = document.querySelector('.s-header__nav-wrap');
98        const siteBody = document.querySelector("body");
99
100        if (!(toggleButton && headerNavWrap)) return;
101
102        toggleButton.addEventListener('click', function(event){
103            event.preventDefault();
104            toggleButton.classList.toggle('is-clicked');
105            siteBody.classList.toggle('menu-is-open');
106        });
107
108        headerNavWrap.querySelectorAll('.s-header__nav a').forEach(function(link) {
109            link.addEventListener("click", function(evt) {
110
111                // at 800px and below
112                if (window.matchMedia('(max-width: 800px)').matches) {
113                    toggleButton.classList.toggle('is-clicked');
114                    siteBody.classList.toggle('menu-is-open');
115                }
116            });
117        });
118
119        window.addEventListener('resize', function() {
120
121            // above 800px
122            if (window.matchMedia('(min-width: 801px)').matches) {
123                if (siteBody.classList.contains('menu-is-open')) siteBody.classList.remove('menu-is-open');
124                if (toggleButton.classList.contains("is-clicked")) toggleButton.classList.remove("is-clicked");
125            }
126        });
127
128    }; // end ssMobileMenu
129
130
131   /* Highlight active menu link on pagescroll
132    * ------------------------------------------------------ */
133    const ssScrollSpy = function() {
134
135        const sections = document.querySelectorAll(".target-section");
136
137        // Add an event listener listening for scroll
138        window.addEventListener("scroll", navHighlight);
139
140        function navHighlight() {
141        
142            // Get current scroll position
143            let scrollY = window.pageYOffset;
144        
145            // Loop through sections to get height(including padding and border), 
146            // top and ID values for each
147            sections.forEach(function(current) {
148                const sectionHeight = current.offsetHeight;
149                const sectionTop = current.offsetTop - 50;
150                const sectionId = current.getAttribute("id");
151            

152               /* If our current scroll position enters the space where current section 
153                * on screen is, add .current class to parent element(li) of the thecorresponding 
154                * navigation link, else remove it. To know which link is active, we use 
155                * sectionId variable we are getting while looping through sections as 
156                * an selector
157                */
158                if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
159                    document.querySelector(".s-header__nav a[href*=" + sectionId + "]").parentNode.classList.add("current");
160                } else {
161                    document.querySelector(".s-header__nav a[href*=" + sectionId + "]").parentNode.classList.remove("current");
162                }
163            });
164        }
165
166    }; // end ssScrollSpy
167
168
169   /* Swiper
170    * ------------------------------------------------------ */ 
171    const ssSwiper = function() {
172
173        const mySwiper = new Swiper('.swiper-container', {
174
175            slidesPerView: 1,
176            pagination: {
177                el: '.swiper-pagination',
178                clickable: true,
179            },          
180            breakpoints: {
181                // when window width is >= 401px
182                401: {
183                    slidesPerView: 1,
184                    spaceBetween: 20
185                },
186                // when window width is >= 801px
187                801: {
188                    slidesPerView: 2,
189                    spaceBetween: 48
190                }
191            }
192         });
193
194    }; // end ssSwiper
195
196
197   /* Lightbox
198    * ------------------------------------------------------ */
199    const ssLightbox = function() {
200
201        const folioLinks = document.querySelectorAll('.folio-item a');
202        const modals = [];
203
204        folioLinks.forEach(function(link) {
205            let modalbox = link.getAttribute('href');
206            let instance = basicLightbox.create(
207                document.querySelector(modalbox),
208                {
209                    onShow: function(instance) {
210                        //detect Escape key press
211                        document.addEventListener("keydown", function(evt) {
212                            evt = evt || window.event;
213                            if(evt.keyCode === 27){
214                            instance.close();
215                            }
216                        });
217                    }
218                }
219            )
220            modals.push(instance);
221        });
222
223        folioLinks.forEach(function(link, index) {
224            link.addEventListener("click", function(e) {
225                e.preventDefault();
226                modals[index].show();
227            });
228        });
229
230    };  // end ssLightbox
231
232
233   /* Alert boxes
234    * ------------------------------------------------------ */
235    const ssAlertBoxes = function() {
236
237        const boxes = document.querySelectorAll('.alert-box');
238  
239        boxes.forEach(function(box) {
240
241            box.addEventListener('click', function(e){
242                if (e.target.matches(".alert-box__close")) {
243                    e.stopPropagation();
244                    e.target.parentElement.classList.add("hideit");
245
246                    setTimeout(function() {
247                        box.style.display = "none";
248                    }, 500)
249                }    
250            });
251
252        })
253
254    }; // end ssAlertBoxes
255
256
257   /* Smoothscroll
258    * ------------------------------------------------------ */
259    const ssSmoothScroll = function () {
260        
261        const triggers = document.querySelectorAll(".smoothscroll");
262
263        triggers.forEach(function(trigger) {
264            trigger.addEventListener("click", function() {
265                const target = trigger.getAttribute("href");
266
267                Jump(target, {
268                    duration: 1200,
269                });
270            });
271        });
272
273    }; // end ssSmoothScroll
274
275
276   /* back to top
277    * ------------------------------------------------------ */
278    const ssBackToTop = function() {
279
280        const pxShow = 900;
281        const goTopButton = document.querySelector(".ss-go-top");
282
283        if (!goTopButton) return;
284
285        // Show or hide the button
286        if (window.scrollY >= pxShow) goTopButton.classList.add("link-is-visible");
287
288        window.addEventListener('scroll', function() {
289            if (window.scrollY >= pxShow) {
290                if(!goTopButton.classList.contains('link-is-visible')) goTopButton.classList.add("link-is-visible")
291            } else {
292                goTopButton.classList.remove("link-is-visible")
293            }
294        });
295
296    }; // end ssBackToTop
297
298
299
300   /* initialize
301    * ------------------------------------------------------ */
302    (function ssInit() {
303
304        ssPreloader();
305        ssParallax();
306        ssMoveHeader();
307        ssMobileMenu();
308        ssScrollSpy();
309        ssSwiper();
310        ssLightbox();
311        ssAlertBoxes();
312        ssSmoothScroll();
313        ssBackToTop();
314
315    })();
316
317})(document.documentElement);