https://tasmania.com/wp-content/themes/tasmania/js/offcanvas.js

1(function($) {
2    /*$(document).ready(initOffCanvas);
3
4    function viewport() {
5        var w = window, a = 'inner';
6        if (!('innerWidth' in window )) {
7            a = 'client';
8            w = document.documentElement || document.body;
9        }
10        return { width : w[ a+'Width' ] , height : w[ a+'Height' ] };
11    }
12
13    function initOffCanvas() {
14        var $offCanvas = $('.offcanvas');
15        var $onCanvas = $('.oncanvas');
16        var menuShown = false;
17        var $body = $('body');
18
19        var $toggles = $('[data-offcanvas-toggle="offcanvas"]');
20        var $closeButtons = $('[data-offcanvas-close="offcanvas"]');
21
22        var $overlay;
23
24        $toggles.on('click', function() {
25            if(menuShown) {
26                hideMenu();
27            } else {
28                showMenu();
29            }
30        });
31
32        $closeButtons.on('click', function() {
33            if(menuShown) {
34                hideMenu();
35            }
36        });
37
38        $(window).on('hashchange', function() {
39            if(window.location.hash !== '#primary-menu') {
40                if(menuShown) {
41                    hideMenu();
42                }
43            }
44        });
45
46        function addOverlay() {
47            $overlay = $('<div/>', {
48                id: 'oncanvas--overlay'
49            });
50            $overlay.on('click', function() {
51                if(menuShown) {
52                    hideMenu();
53                }
54            });
55            $overlay.appendTo($onCanvas);
56            $overlay.addClass('shown');
57        }
58        function removeOverlay() {
59            $overlay.removeClass('shown');
60            $overlay.remove();
61        }
62
63        function showMenu() {
64            if($offCanvas.data('hide-class')) $offCanvas.removeClass($offCanvas.data('hide-class'));
65            $offCanvas.addClass('shown '+$offCanvas.data('show-class'));
66            $('body').addClass('noscroll');
67            $('html').addClass('noscroll');
68
69            addOverlay();
70
71            menuShown = true;
72            $toggles.addClass('is-active active');
73        }
74
75        function hideMenu() {
76            if($offCanvas.data('hide-class')) $offCanvas.addClass($offCanvas.data('hide-class'));
77            $offCanvas.removeClass('shown '+$offCanvas.data('show-class'));
78            $('body').removeClass('noscroll');
79            $('html').removeClass('noscroll');
80            removeOverlay();
81            menuShown = false;
82            $toggles.removeClass('is-active active');
83        }
84    }*/
85
86
87    var $offCanvas,
88        $onCanvas,
89        $overlay,
90        menuShown,
91        toggleSelector = '[data-offcanvas-toggle="offcanvas"]',
92        closeSelector = '[data-offcanvas-close="offcanvas"]'
93    ;
94
95    //$(document).ready(initMenu);
96    initMenu();
97
98    function initMenu() {
99        $offCanvas =  $offCanvas = $('.offcanvas');
100        $onCanvas = $('.oncanvas');
101        if($offCanvas.length ==0 || $onCanvas.length == 0) return;
102        createOverlay();
103        bindToggles();
104        bindClosers();
105    }
106
107    function bindToggles() {
108        $(document.body).on('click', toggleSelector, toggleClickHandler);
109    }
110    function bindClosers() {
111        $(document.body).on('click', closeSelector, closeClickHandler);
112    }
113
114    function toggleClickHandler(e) {
115        e.preventDefault();
116        if(menuShown) {
117            hideMenu.apply(this);
118        } else {
119            showMenu.apply(this);
120        }
121    }
122    function closeClickHandler(e) {
123        e.preventDefault();
124        hideMenu.apply(this);
125    }
126
127    function hashchangeHandler(e) {
128        if(window.location.hash !== '#primary-menu') {
129            if(menuShown) {
130                hideMenu.apply(null);
131            }
132        }
133    }
134
135    function createOverlay() {
136        if($overlay) $overlay.remove();
137
138        $overlay = $('<div/>', {
139            id: 'oncanvas--overlay'
140        });
141        $overlay.on('click', hideMenu);
142    }
143    function showOverlay() {
144        $overlay.appendTo($onCanvas);
145        $overlay.addClass('shown');
146    }
147    function hideOverlay() {
148        $overlay.removeClass('shown');
149        $overlay.detach();
150    }
151
152    function showMenu() {
153        if(menuShown) return;
154
155        $(window).on('hashchange', hashchangeHandler);
156
157        window.location.hash = '#primary-menu';
158
159        if($offCanvas.data('hide-class')) $offCanvas.removeClass($offCanvas.data('hide-class'));
160        $offCanvas.addClass('shown '+$offCanvas.data('show-class'));
161        $(document.body).addClass('noscroll');
162        $('html').addClass('noscroll');
163
164        showOverlay();
165
166        menuShown = true;
167        $(toggleSelector).addClass('is-active active');
168
169        $(document.body).trigger('kd_offcanvas:show');
170    }
171
172    function hideMenu() {
173        if(!menuShown) return;
174
175        $(window).off('hashchange', hashchangeHandler);
176
177        window.location.hash = '';
178
179        if($offCanvas.data('hide-class')) $offCanvas.addClass($offCanvas.data('hide-class'));
180        $offCanvas.removeClass('shown '+$offCanvas.data('show-class'));
181        $(document.body).removeClass('noscroll');
182        $('html').removeClass('noscroll');
183
184        hideOverlay();
185
186        menuShown = false;

187
188        $(toggleSelector).removeClass('is-active active');
189
190        $(document.body).trigger('kd_offcanvas:hide');
191    }
192})(jQuery);