https://sijojohns0n.github.io/js/main.js

1/* ===================================================================
2 * Sijo Johnson 1.0.0 - Main JS
3 *
4 * ------------------------------------------------------------------- */
5
6(function(html) {
7
8    'use strict';
9
10    const cfg = {
11
12        // MailChimp URL
13        mailChimpURL : 'https://facebook.us1.list-manage.com/subscribe/post?u=1abf75f6981256963a47d197a&id=37c6d8f4d6' 
14
15    };
16
17
18   /* preloader
19    * -------------------------------------------------- */
20    const ssPreloader = function() {
21
22        const siteBody = document.querySelector('body');
23        const preloader = document.querySelector('#preloader');
24        if (!preloader) return;
25
26        html.classList.add('ss-preload');
27        
28        window.addEventListener('load', function() {
29            html.classList.remove('ss-preload');
30            html.classList.add('ss-loaded');
31            
32            preloader.addEventListener('transitionend', function afterTransition(e) {
33                if (e.target.matches('#preloader'))  {
34                    siteBody.classList.add('ss-show');
35                    e.target.style.display = 'none';
36                    preloader.removeEventListener(e.type, afterTransition);
37                }
38            });
39        });
40
41    }; // end ssPreloader
42
43
44   /* mobile menu
45    * ---------------------------------------------------- */ 
46    const ssMobileMenu = function() {
47
48        const toggleButton = document.querySelector('.s-header__menu-toggle');
49        const mainNavWrap = document.querySelector('.s-header__nav');
50        const siteBody = document.querySelector('body');
51
52        if (!(toggleButton && mainNavWrap)) return;
53
54        toggleButton.addEventListener('click', function(e) {
55            e.preventDefault();
56            toggleButton.classList.toggle('is-clicked');
57            siteBody.classList.toggle('menu-is-open');
58        });
59
60        mainNavWrap.querySelectorAll('.s-header__nav a').forEach(function(link) {
61
62            link.addEventListener("click", function(event) {
63
64                // at 900px and below
65                if (window.matchMedia('(max-width: 900px)').matches) {
66                    toggleButton.classList.toggle('is-clicked');
67                    siteBody.classList.toggle('menu-is-open');
68                }
69            });
70        });
71
72        window.addEventListener('resize', function() {
73
74            // above 900px
75            if (window.matchMedia('(min-width: 901px)').matches) {
76                if (siteBody.classList.contains('menu-is-open')) siteBody.classList.remove('menu-is-open');
77                if (toggleButton.classList.contains('is-clicked')) toggleButton.classList.remove('is-clicked');
78            }
79        });
80
81    }; // end ssMobileMenu
82
83
84   /* swiper
85    * ------------------------------------------------------ */ 
86    const ssSwiper = function() {
87
88        const homeSliderSwiper = new Swiper('.home-slider', {
89
90            slidesPerView: 1,
91            pagination: {
92                el: '.swiper-pagination',
93                clickable: true,
94            },
95            breakpoints: {
96                // when window width is > 400px
97                401: {
98                    slidesPerView: 1,
99                    spaceBetween: 20
100                },
101                // when window width is > 800px
102                801: {
103                    slidesPerView: 2,
104                    spaceBetween: 40
105                },
106                // when window width is > 1330px
107                1331: {
108                    slidesPerView: 3,
109                    spaceBetween: 48
110                },
111                // when window width is > 1773px
112                1774: {
113                    slidesPerView: 4,
114                    spaceBetween: 48
115                }
116            }
117        });
118
119        const pageSliderSwiper = new Swiper('.page-slider', {
120
121            slidesPerView: 1,
122            pagination: {
123                el: '.swiper-pagination',
124                clickable: true,
125            },
126            breakpoints: {
127                // when window width is > 400px
128                401: {
129                    slidesPerView: 1,
130                    spaceBetween: 20
131                },
132                // when window width is > 800px
133                801: {
134                    slidesPerView: 2,
135                    spaceBetween: 40
136                },
137                // when window width is > 1240px
138                1241: {
139                    slidesPerView: 3,
140                    spaceBetween: 48
141                }
142            }
143        });
144
145    }; // end ssSwiper
146
147
148   /* mailchimp form
149    * ---------------------------------------------------- */ 
150    const ssMailChimpForm = function() {
151
152        const mcForm = document.querySelector('#mc-form');
153
154        if (!mcForm) return;
155
156        // Add novalidate attribute
157        mcForm.setAttribute('novalidate', true);
158
159        // Field validation
160        function hasError(field) {
161
162            // Don't validate submits, buttons, file and reset inputs, and disabled fields
163            if (field.disabled || field.type === 'file' || field.type === 'reset' || field.type === 'submit' || field.type === 'button') return;
164
165            // Get validity
166            let validity = field.validity;
167
168            // If valid, return null
169            if (validity.valid) return;
170
171            // If field is required and empty
172            if (validity.valueMissing) return 'Please enter an email address.';
173
174            // If not the right type
175            if (validity.typeMismatch) {
176                if (field.type === 'email') return 'Please enter a valid email address.';
177            }
178
179            // If pattern doesn't match
180            if (validity.patternMismatch) {
181
182                // If pattern info is included, return custom error
183                if (field.hasAttribute('title')) return field.getAttribute('title');
184
185                // Otherwise, generic error
186                return 'Please match the requested format.';
187            }
188
189            // If all else fails, return a generic catchall error
190            return 'The value you entered for this field is invali

190d.';
191
192        };
193
194        // Show error message
195        function showError(field, error) {
196
197            // Get field id or name
198            let id = field.id || field.name;
199            if (!id) return;
200
201            let errorMessage = field.form.querySelector('.mc-status');
202
203            // Update error message
204            errorMessage.classList.remove('success-message');
205            errorMessage.classList.add('error-message');
206            errorMessage.innerHTML = error;
207
208        };
209
210        // Display form status (callback function for JSONP)
211        window.displayMailChimpStatus = function (data) {
212
213            // Make sure the data is in the right format and that there's a status container
214            if (!data.result || !data.msg || !mcStatus ) return;
215
216            // Update our status message
217            mcStatus.innerHTML = data.msg;
218
219            // If error, add error class
220            if (data.result === 'error') {
221                mcStatus.classList.remove('success-message');
222                mcStatus.classList.add('error-message');
223                return;
224            }
225
226            // Otherwise, add success class
227            mcStatus.classList.remove('error-message');
228            mcStatus.classList.add('success-message');
229        };
230
231        // Submit the form 
232        function submitMailChimpForm(form) {
233
234            let url = cfg.mailChimpURL;
235            let emailField = form.querySelector('#mce-EMAIL');
236            let serialize = '&' + encodeURIComponent(emailField.name) + '=' + encodeURIComponent(emailField.value);
237
238            if (url == '') return;
239
240            url = url.replace('/post?u=', '/post-json?u=');
241            url += serialize + '&c=displayMailChimpStatus';
242
243            // Create script with url and callback (if specified)
244            var ref = window.document.getElementsByTagName( 'script' )[ 0 ];
245            var script = window.document.createElement( 'script' );
246            script.src = url;
247
248            // Create global variable for the status container
249            window.mcStatus = form.querySelector('.mc-status');
250            window.mcStatus.classList.remove('error-message', 'success-message')
251            window.mcStatus.innerText = 'Submitting...';
252
253            // Insert script tag into the DOM
254            ref.parentNode.insertBefore( script, ref );
255
256            // After the script is loaded (and executed), remove it
257            script.onload = function () {
258                this.remove();
259            };
260
261        };
262
263        // Check email field on submit
264        mcForm.addEventListener('submit', function (event) {
265
266            event.preventDefault();
267
268            let emailField = event.target.querySelector('#mce-EMAIL');
269            let error = hasError(emailField);
270
271            if (error) {
272                showError(emailField, error);
273                emailField.focus();
274                return;
275            }
276
277            submitMailChimpForm(this);
278
279        }, false);
280
281    }; // end ssMailChimpForm
282
283
284   /* alert boxes
285    * ------------------------------------------------------ */
286    const ssAlertBoxes = function() {
287
288        const boxes = document.querySelectorAll('.alert-box');
289  
290        boxes.forEach(function(box){
291
292            box.addEventListener('click', function(e) {
293                if (e.target.matches('.alert-box__close')) {
294                    e.stopPropagation();
295                    e.target.parentElement.classList.add('hideit');
296
297                    setTimeout(function() {
298                        box.style.display = 'none';
299                    }, 500)
300                }
301            });
302        })
303
304    }; // end ssAlertBoxes
305
306
307    /* Back to Top
308    * ------------------------------------------------------ */
309    const ssBackToTop = function() {
310
311        const pxShow = 900;
312        const goTopButton = document.querySelector(".ss-go-top");
313
314        if (!goTopButton) return;
315
316        // Show or hide the button
317        if (window.scrollY >= pxShow) goTopButton.classList.add("link-is-visible");
318
319        window.addEventListener('scroll', function() {
320            if (window.scrollY >= pxShow) {
321                if(!goTopButton.classList.contains('link-is-visible')) goTopButton.classList.add("link-is-visible")
322            } else {
323                goTopButton.classList.remove("link-is-visible")
324            }
325        });
326
327    }; // end ssBackToTop
328
329
330   /* smoothscroll
331    * ------------------------------------------------------ */
332    const ssMoveTo = function() {
333
334        const easeFunctions = {
335            easeInQuad: function (t, b, c, d) {
336                t /= d;
337                return c * t * t + b;
338            },
339            easeOutQuad: function (t, b, c, d) {
340                t /= d;
341                return -c * t* (t - 2) + b;
342            },
343            easeInOutQuad: function (t, b, c, d) {
344                t /= d/2;
345                if (t < 1) return c/2*t*t + b;
346                t--;
347                return -c/2 * (t*(t-2) - 1) + b;
348            },
349            easeInOutCubic: function (t, b, c, d) {
350                t /= d/2;
351                if (t < 1) return c/2*t*t*t + b;
352                t -= 2;
353                return c/2*(t*t*t + 2) + b;
354            }
355        }
356
357        const triggers = document.querySelectorAll('.smoothscroll');
358        
359        const moveTo = new MoveTo({
360            tolerance: 0,
361            duration: 1200,
362            easing: 'easeInOutCubic',
363            container: window
364        }, easeFunctions);
365

366        triggers.forEach(function(trigger) {
367            moveTo.registerTrigger(trigger);
368        });
369
370    }; // end ssMoveTo
371
372
373   /* Initialize
374    * ------------------------------------------------------ */
375    (function ssInit() {
376
377        ssPreloader();
378        ssMobileMenu();
379        ssSwiper();
380        ssMailChimpForm();
381        ssAlertBoxes();
382        ssMoveTo();
383
384    })();
385
386})(document.documentElement);