https://www.oita-kotairen.jp/js/plugins.init.js

1/* Template Name: 【公式】大分県高等学校体育連盟
2   Author: Shreethemes
3   E-mail: [email protected]
4   Created: August 2021
5   Version: 1.0.0
6   File Description: Common JS file of the template(plugins.init.js)
7*/
8
9
10/*********************************/
11/*         INDEX                 */
12/*================================
13 *     01.  Tiny Slider          *
14 *     02.  Swiper slider        *
15 *     03.  Countdown Js         * (For Comingsoon pages)
16 *     04.  Maintenance js       * (For Maintenance page)
17 *     05.  Data Counter         *
18 *     06.  Date & Time Picker   *
19 *     07.  Gallery filter js    * (For Portfolio pages)
20 *     08.  Tobii lightbox       * (For Portfolio pages)
21 *     09.  Typed Text animation (animation) * 
22 ================================*/
23         
24//=========================================//
25/*            01) Tiny slider              */
26//=========================================//
27
28if(document.getElementsByClassName('tiny-single-item').length > 0) {
29    var slider = tns({
30        container: '.tiny-single-item',
31        items: 1,
32        controls: true,
33        mouseDrag: true,
34        loop: true,
35        rewind: true,
36        autoplay: true,
37        autoplayButtonOutput: false,
38        autoplayTimeout: 3000,
39        navPosition: "bottom",
40        controlsText: ['<i class="mdi mdi-chevron-left "></i>', '<i class="mdi mdi-chevron-right"></i>'],
41        nav: false,
42        speed: 400,
43        gutter: 0,
44    });
45};
46
47if(document.getElementsByClassName('tiny-three-item').length > 0) {
48    var slider = tns({
49        container: '.tiny-three-item',
50        controls: false,
51        mouseDrag: true,
52        loop: true,
53        rewind: true,
54        autoplay: true,
55        autoplayButtonOutput: false,
56        autoplayTimeout: 3000,
57        navPosition: "bottom",
58        speed: 400,
59        gutter: 12,
60        responsive: {
61            992: {
62                items: 3
63            },
64
65            767: {
66                items: 2
67            },
68
69            320: {
70                items: 1
71            },
72        },
73    });
74};
75
76if(document.getElementsByClassName('tiny-four-item').length > 0) {
77    var slider = tns({
78        container: '.tiny-four-item',
79        controls: false,
80        mouseDrag: true,
81        loop: true,
82        rewind: true,
83        autoplay: true,
84        autoplayButtonOutput: false,
85        autoplayTimeout: 3000,
86        navPosition: "bottom",
87        speed: 400,
88        gutter: 12,
89        responsive: {
90            992: {
91                items: 4
92            },
93
94            767: {
95                items: 2
96            },
97
98            320: {
99                items: 1
100            },
101        },
102    });
103};
104
105if(document.getElementsByClassName('tiny-five-item').length > 0) {
106    var slider = tns({
107        container: '.tiny-five-item',
108        controls: false,
109        mouseDrag: true,
110        loop: true,
111        rewind: true,
112        autoplay: true,
113        autoplayButtonOutput: false,
114        autoplayTimeout: 3000,
115        navPosition: "bottom",
116        speed: 400,
117        gutter: 12,
118        responsive: {
119            1025: {
120                items: 5
121            },
122
123            992: {
124                items: 4
125            },
126
127            767: {
128                items: 2
129            },
130
131            320: {
132                items: 1
133            },
134        },
135    });
136};
137
138if(document.getElementsByClassName('tiny-six-item').length > 0) {
139    var slider = tns({
140        container: '.tiny-six-item',
141        controls: false,
142        mouseDrag: true,
143        loop: true,
144        rewind: true,
145        autoplay: true,
146        autoplayButtonOutput: false,
147        autoplayTimeout: 3000,
148        navPosition: "bottom",
149        speed: 400,
150        gutter: 0,
151        responsive: {
152            1025: {
153                items: 6
154            },
155
156            992: {
157                items: 4
158            },
159
160            767: {
161                items: 3
162            },
163
164            425: {
165                items: 2
166            },
167
168            375: {
169                items: 1
170            },
171        },
172    });
173};
174
175if(document.getElementsByClassName('tiny-twelve-item').length > 0) {
176    var slider = tns({
177        container: '.tiny-twelve-item',
178        controls: true,
179        mouseDrag: true,
180        loop: true,
181        rewind: true,
182        autoplay: true,
183        autoplayButtonOutput: false,
184        autoplayTimeout: 3000,
185        navPosition: "bottom",
186        controlsText: ['<i class="mdi mdi-chevron-left "></i>', '<i class="mdi mdi-chevron-right"></i>'],
187        nav: false,
188        speed: 400,
189        gutter: 0,
190        responsive: {
191            1025: {
192                items: 10
193            },
194
195            992: {
196                items: 8
197            },
198
199            767: {
200                items: 6
201            },
202
203            320: {
204                items: 2
205            },
206        },
207    });
208};
209//=========================================//
210/*            02) Swiper slider            */
211//=========================================//
212
213try {
214    var menu = [];
215    var interleaveOffset = 0.5;
216    var swiperOptions = {
217        loop: true,
218        speed: 1000,
219        parallax: true,
220        autoplay: {
221            delay: 6500,
222            disableOnInteraction: false,
223        },
224        watchSlidesProgress: true,
225        pagination: {
226            el: '.swiper-pagination',
227            clickable: true,
228            renderBullet: function (index, className) {
229                return '<span class="' + className + '">' + 0 + (index + 1) + '</span>';
230            },
231        },
232
233        navigation: {
234            nextEl: '.swiper-button-next',
235            prevEl: '.swiper-button-prev',
236        },
237
238        on: {
239            progress: function () {
240                var swiper = this;
241                for (var i = 0; i < swiper.slides.length; i++) {
242                    var slideProgress = swiper.slides[i].progress;
243                    var innerOffset = swiper.width * interleaveOffset;
244                    var innerTranslate = slideProgress * innerOffset;
245                    swiper.slides[i].querySelector(".slide-inner").style.transform =
246                        "translate3d(" + innerTranslate + "px, 0, 0)";
247                }
248            },
249
250            touchStart: function () {
251                var swiper = this;
252                for (var i = 0; i < swiper.slides.length; i++) {
253                    swiper.slides[i].style.transition = "";
254                }
255            },
256
257            setTransition: function (speed) {
258                var swiper = this;
259                for (var i = 0; i < swiper.slides.length; i++) {
260                    swiper.slides[i].style.transition = speed + "ms";
261                    swiper.slides[i].querySelector(".slide-inner").style.transition =
262                        speed + "ms";
263                }
264            }
265        }
266    };
267
268    // DATA BACKGROUND IMAGE
269    var swiper = new Swiper(".swiper-container", swiperOptions);
270
271    let data = document.querySelectorAll(".slide-bg-image")
272    data.forEach((e) => {
273        e.style.backgroundImage =
274        `url(${e.getAttribute('data-background')})`;
275    })
276} catch (err) {
277
278}
279
280try {
281    var swiper = new Swiper('#swiper-slider-container', {
282        slidesPerView: 1,
283        autoplay: {
284            delay: 3000,
285        },
286        breakpoints: {
287            768: {
288                slidesPerView: 2,
289            },
290            769: {
291                slidesPerView: 3,
292            },
293            1025: {
294                slidesPerView:5,
295            },
296        }
297    });
298} catch (err) {
299
300}
301
302try {
303    var swiper = new Swiper('#swiper-slider-container-four', {
304        slidesPerView: 1,
305        autoplay: {
306            delay: 3000,
307        },
308        breakpoints: {
309            768: {
310                slidesPerView: 2,
311            },
312            769: {
313                slidesPerView: 3,
314            },
315            1025: {
316                slidesPerView:4,
317            },
318        }
319    });
320} catch (err) {
321
322}
323
324//=========================================//
325/*/*            03) Countdown js           */
326//=========================================//
327
328try {
329    if(document.getElementById("days")){
330        // The data/time we want to countdown to
331        var eventCountDown = new Date("August 25, 2023 16:37:52").getTime();
332
333        // Run myfunc every second
334        var myfunc = setInterval(function () {
335
336            var now = new Date().getTime();
337            var timeleft = eventCountDown - now;
338
339            // Calculating the days, hours, minutes and seconds left
340            var days = Math.floor(timeleft / (1000 * 60 * 60 * 24));
341            var hours = Math.floor((timeleft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
342            var minutes = Math.floor((timeleft % (1000 * 60 * 60)) / (1000 * 60));
343            var seconds = Math.floor((timeleft % (1000 * 60)) / 1000);
344
345            // Result is output to the specific element
346            document.getElementById("days").innerHTML = days + "<p class='count-head'>Days</p> "
347            document.getElementById("hours").innerHTML = hours + "<p class='count-head'>Hours</p> "
348            document.getElementById("mins").innerHTML = minutes + "<p class='count-head'>Mins</p> "
349            document.getElementById("secs").innerHTML = seconds + "<p class='count-head'>Secs</p> "
350
351            // Display the message when countdown is over
352            if (timeleft < 0) {
353                clearInterval(myfunc);
354                document.getElementById("days").innerHTML = ""
355                document.getElementById("hours").innerHTML = ""
356                document.getElementById("mins").innerHTML = ""
357                document.getElementById("secs").innerHTML = ""
358                document.getElementById("end").innerHTML = "00:00:00:00";
359            }
360        }, 1000);
361    }
362} catch (err) {
363
364}
365
366
367//=========================================//
368/*/*            04) Maintenance js         */
369//=========================================//
370
371try {
372    if(document.getElementById("maintenance")){
373        var seconds = 3599;
374        function secondPassed() {
375            var minutes = Math.round((seconds - 30) / 60);
376            var remainingSeconds = seconds % 60;
377            if (remainingSeconds < 10) {
378                remainingSeconds = "0" + remainingSeconds;
379            }
380            document.getElementById('maintenance').innerHTML = minutes + ":" + remainingSeconds;
381            if (seconds == 0) {
382                clearInterval(countdownTimer);
383                document.getElementById('maintenance').innerHTML = "Buzz Buzz";
384            } else {
385                seconds--;
386            }
387        }
388        var countdownTimer = setInterval('secondPassed()', 1000);
389    }
390} catch (err) {
391
392}
393
394//=========================================//
395/*/*            05) Data Counter           */
396//=========================================//
397
398try {
399    const counter = document.querySelectorAll('.counter-value');
400    const speed = 2500; // The lower the slower
401
402    counter.forEach(counter_value => {
403        const updateCount = () => {
404            const target = +counter_value.getAttribute('data-target');
405            const count = +counter_value.innerText;
406
407            // Lower inc to slow and higher to slow
408            var inc = target / speed;
409
410            if (inc < 1) {
411                inc = 1;
412            }
413
414            // Check if target is reached
415            if (count < target) {
416                // Add inc to count and output in counter_value
417                counter_value.innerText = (count + inc).toFixed(0);
418                // Call function every ms
419                setTimeout(updateCount, 1);
420            } else {
421                counter_value.innerText = target;
422            }
423        };
424
425        updateCount();
426    });
427} catch (err) {
428
429}
430
431
432//=========================================//
433/*/*            06) Date & Time Picker     */
434//=========================================//
435
436//Date Picker
437try {
438    const start = datepicker('.start', { id: 1 })
439    const end = datepicker('.end', { id: 1 })
440} catch (err) {
441
442}
443
444//Time Picker
445
446
447//=========================================//
448/*/*            07) Gallery filter js      */
449//=========================================//
450
451try {
452    var Shuffle = window.Shuffle;
453
454    class Demo {
455        constructor(element) {
456            if(element){
457                this.element = element;
458                this.shuffle = new Shuffle(element, {
459                    itemSelector: '.picture-item',
460                    sizer: element.querySelector('.my-sizer-element'),
461                });
462
463                // Log events.
464                this.addShuffleEventListeners();
465                this._activeFilters = [];
466                this.addFilterButtons();
467            }
468        }
469
470        /**
471         * Shuffle uses the CustomEvent constructor to dispatch events. You can listen
472         * for them like you normally would (with jQuery for example).
473         */
474        addShuffleEventListeners() {
475            this.shuffle.on(Shuffle.EventType.LAYOUT, (data) => {
476                console.log('layout. data:', data);
477            });
478            this.shuffle.on(Shuffle.EventType.REMOVED, (data) => {
479                console.log('removed. data:', data);
480            });
481        }
482
483        addFilterButtons() {
484            const options = document.querySelector('.filter-options');
485            if (!options) {
486                return;
487            }
488
489            const filterButtons = Array.from(options.children);
490            const onClick = this._handleFilterClick.bind(this);
491            filterButtons.forEach((button) => {
492                button.addEventListener('click', onClick, false);
493            });
494        }
495
496        _handleFilterClick(evt) {
497            const btn = evt.currentTarget;
498            const isActive = btn.classList.contains('active');
499            const btnGroup = btn.getAttribute('data-group');
500
501            this._removeActiveClassFromChildren(btn.parentNode);
502
503            let filterGroup;
504            if (isActive) {
505                btn.classList.remove('active');
506                filterGroup = Shuffle.ALL_ITEMS;
507            } else {
508                btn.classList.add('active');
509                filterGroup = btnGroup;
510            }
511
512            this.shuffle.filter(filterGroup);
513        }
514
515        _removeActiveClassFromChildren(parent) {
516            const { children } = parent;
517            for (let i = children.length - 1; i >= 0; i--) {
518                children[i].classList.remove('active');
519            }
520        }
521    }
522
523    document.addEventListener('DOMContentLoaded', () => {
524        window.demo = new Demo(document.getElementById('grid'));
525    });
526} catch (err) {
527
528}
529
530
531//=========================================//
532/*/*            08) Tobii lightbox         */
533//=========================================//
534
535try {
536    const tobii = new Tobii()
537} catch (err) {
538
539}
540
541//=========================================//
542/*/*    09) Validation Shop Checkouts      */
543//=========================================//
544
545(function () {
546    'use strict'
547
548    if(document.getElementsByClassName('needs-validation').length > 0) {
549        // Fetch all the forms we want to apply custom Bootstrap validation styles to
550        var forms = document.querySelectorAll('.needs-validation')
551
552        // Loop over them and prevent submission
553        Array.prototype.slice.call(forms)
554            .forEach(function (form) {
555            form.addEventListener('submit', function (event) {
556                if (!form.checkValidity()) {
557                event.preventDefault()
558                event.stopPropagation()
559                }
560
561                form.classList.add('was-validated')
562            }, false)
563        })
564    }
565})()
566
567
568//=========================================//
569/*/*    10) Switcher js                    */
570//=========================================//
571try {
572    function setTheme(theme) {
573        document.getElementById('theme-opt').href = './css/' + theme + '.min.css';
574    };
575} catch (error) {
576    
577}