https://kyarbaconvention.com/userfiles/templates/big/assets/templates_features/js/js-for-template.js

1//Add class for navigation when scroll
2
3$(function () {
4    $(document).scroll(function () {
5        var $nav = $(".main .navigation-holder.not-transparent");
6        $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
7    });
8});
9
10// checking for images and add class
11
12var checkFirstSectionForNav = function () {
13    var navIfHasBackground = $(".main .navigation-holder.not-transparent");
14    var skip = $('.main-content').find('section').first().hasClass('mw-layout-overlay-wrapper');
15
16    if (skip) {
17        $(navIfHasBackground).removeClass('mw-nav-menu-not-transparent');
18        $(navIfHasBackground).addClass('mw-nav-menu-transparent-with-image');
19
20    } else {
21        $(navIfHasBackground).removeClass('mw-nav-menu-transparent-with-image');
22        $(navIfHasBackground).addClass('mw-nav-menu-not-transparent');
23    }
24};
25
26$(window).on('load', function () {
27    checkFirstSectionForNav();
28
29    $(window).on('moduleLoaded', function () {
30        checkFirstSectionForNav();
31    });
32
33});
34
35//header menus js
36
37$(window).on('load', function () {
38    $(".navT-header-menu").on("click", function(){
39        $(this).toggleClass("active-menu");
40        $("#header-menu-skin-1").toggleClass("open");
41        $(".content").toggleClass("shift");
42
43    });
44
45    $('button.menu-toggle').on('click', function(){
46        $('body').toggleClass('open-header-menu');
47    });
48
49    $("button.header-menu-hamburger").click(function() {
50        $(".header-menu-hamburger").toggleClass("header-menu-focus");
51        $(".header-menu-content").toggleClass("header-menu-show");
52    });
53
54    var menuBtn = document.querySelector('.header-menu-btn');
55    var nav = document.querySelector('nav');
56    var lineOne = document.querySelector('nav .header-menu-btn .line--1');
57    var lineTwo = document.querySelector('nav .header-menu-btn .line--2');
58    var lineThree = document.querySelector('nav .header-menu-btn .line--3');
59    var link = document.querySelector('nav .nav-links');
60    if (menuBtn) {
61        menuBtn.addEventListener('click', function () {
62            nav.classList.toggle('nav-open');
63            lineOne.classList.toggle('line-cross');
64            lineTwo.classList.toggle('line-fade-out');
65            lineThree.classList.toggle('line-cross');
66            link.classList.toggle('fade-in');
67        });
68    }
69
70});
71
72$(document).ready(function(){
73    var menu = $(".header-menu");
74    var hamburger = $(".menu-header-hamburger");
75    var line = $(".line");
76    var menuOpen;
77
78    function openMenu(){
79        menu.css("left", "0px");
80        // line.css("background", "#FFF");
81        menuOpen = true;
82    }
83
84    function closeMenu(){
85        menu.css("left", "-320px");
86        // line.css("background", "#BCAD90");
87        menuOpen = false;
88    }
89
90    function toggleMenu(){
91        if (menuOpen) {
92            closeMenu();
93        } else {
94            openMenu();
95        }
96    }
97
98    hamburger.on({
99        mouseenter: function(){
100            openMenu();
101        }
102    });
103
104    menu.on({
105        mouseleave: function(){
106            closeMenu();
107        }
108
109    });
110
111    hamburger.on({
112        click: function(){
113            toggleMenu();
114        }
115    });
116});
117
118$(document).ready(function(){
119    var headerMenuSkinBody = document.querySelector('.header-menu-nav-body'),
120        headerMenuSkiNav = document.querySelector('.nav'),
121        headerMenuSkiNavBar = document.querySelector('.nav--bar'),
122        headerMenuSkinNavToggle = document.querySelector('.nav--toggle'),
123        navMenuIsOpen = false,
124        navMenu = document.querySelector('.nav--menu'),
125        navMenuBG = document.querySelector('.nav--menu-bg');
126
127    // TODO: scroll debounce
128    var windowHeight = window.innerHeight;
129    var navBarHeight = !!headerMenuSkiNavBar ? headerMenuSkiNavBar.offsetHeight : 0;
130    var windowNavOffset = windowHeight - navBarHeight;
131
132    // nav
133    function showNav() {
134        navMenuIsOpen = true;
135
136        if (headerMenuSkinBody) {
137            headerMenuSkinBody.classList.add('nav--is-visible');
138        }
139        if (headerMenuSkinNavToggle) {
140            headerMenuSkinNavToggle.classList.add('header-menu-skin-active');
141        }
142        if (navMenu) {
143            navMenu.classList.add('header-menu-skin-active');
144        }
145        if (navMenuBG) {
146            navMenuBG.classList.add('header-menu-skin-active');
147        }
148
149    }
150
151    function hideNav() {
152        navMenuIsOpen = false;

153        if (headerMenuSkinBody) {
154            headerMenuSkinBody.classList.remove('nav--is-visible');
155        }
156        if (headerMenuSkinNavToggle) {
157            headerMenuSkinNavToggle.classList.remove('header-menu-skin-active');
158        }
159        if (navMenu) {
160            navMenu.classList.remove('header-menu-skin-active');
161        }
162        if (navMenuBG) {
163            navMenuBG.classList.remove('header-menu-skin-active');
164        }
165
166    }
167
168    // nav
169    if (headerMenuSkinNavToggle) {
170        headerMenuSkinNavToggle.addEventListener('click', function (e) {
171            !navMenuIsOpen ? showNav() : hideNav();
172            console.log('navMenuIsOpen', navMenuIsOpen);
173        });
174    }
175    // show navbar on page scroll
176    if(headerMenuSkiNav) {
177        document.addEventListener('scroll', function (e) {
178            var scrollPosition = pageYOffset;
179
180            if (scrollPosition > windowNavOffset) {
181                headerMenuSkiNav.classList.add('nav--solid');
182            } else {
183                headerMenuSkiNav.classList.remove('nav--solid');
184            }
185        });
186    }
187
188    // enable hover on touch
189    document.addEventListener('touchstart', function(){}, true);
190
191});
192
193/* ###################### Counter ###################### */
194var numbCount = function (el) {
195    var html = el.innerHTML.trim();
196    var to = parseInt(html, 10);
197    var inc = 120;
198    if (to > 20) inc = 60;
199    if (to > 60) inc = 40;
200    if (to > 120) inc = 10;
201    if (to > 320) inc = 5;
202    if (to > 1220) inc = 3;
203    if (to > 5000) inc = 1;
204    if (!isNaN(to)) {
205        var time = 10;
206        for (var i = 1; i <= to; i++) {
207            time += inc;
208            (function (time, i, el) {
209                setTimeout(function () {
210                    el.innerHTML = i;
211                }, time)
212            })(time, i, el)
213        }
214    }
215}
216
217$.fn.isOnScreen = function () {
218    var win = $(window);
219
220    var viewport = {
221        top: win.scrollTop(),
222        left: win.scrollLeft()
223    };
224    viewport.right = viewport.left + win.width();
225    viewport.bottom = viewport.top + win.height();
226
227    var bounds = this.offset();
228    bounds.right = bounds.left + this.outerWidth();
229    bounds.bottom = bounds.top + this.outerHeight();
230
231    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
232};
233
234
235$(window).on('load resize scroll', function () {
236    setTimeout(function () {
237        $('[data-counter]').each(function () {
238            if ($(this).isOnScreen()) {
239                $(this).css({'visibility': 'visible'});
240                $(this).removeClass('js-start-from-zero');
241                if (!this.__activated) {
242
243                    this.__activated = true;
244                    numbCount(this);
245                }
246            }
247        });
248    }, 10);
249
250});