https://www.generationsmove.org/js/mobile-menu.js

1/*!
2 *
3 *  Copyright (c) David Bushell | http://dbushell.com/
4 *
5 */
6(function(window, document, undefined)
7{
8
9    // helper functions
10
11    var trim = function(str)
12    {
13        return str.trim ? str.trim() : str.replace(/^\s+|\s+$/g,'');
14    };
15
16    var hasClass = function(el, cn)
17    {
18        return (' ' + el.className + ' ').indexOf(' ' + cn + ' ') !== -1;
19    };
20
21    var addClass = function(el, cn)
22    {
23        if (!hasClass(el, cn)) {
24            el.className = (el.className === '') ? cn : el.className + ' ' + cn;
25        }
26    };
27
28    var removeClass = function(el, cn)
29    {
30        el.className = trim((' ' + el.className + ' ').replace(' ' + cn + ' ', ' '));
31    };
32
33    var hasParent = function(el, id)
34    {
35        if (el) {
36            do {
37                if (el.id === id) {
38                    return true;
39                }
40                if (el.nodeType === 9) {
41                    break;
42                }
43            }
44            while((el = el.parentNode));
45        }
46        return false;
47    };
48
49    // normalize vendor prefixes
50
51    var doc = document.documentElement;
52
53    var transform_prop = window.Modernizr.prefixed('transform'),
54        transition_prop = window.Modernizr.prefixed('transition'),
55        transition_end = (function() {
56            var props = {
57                'WebkitTransition' : 'webkitTransitionEnd',
58                'MozTransition'    : 'transitionend',
59                'OTransition'      : 'oTransitionEnd otransitionend',
60                'msTransition'     : 'MSTransitionEnd',
61                'transition'       : 'transitionend'
62            };
63            return props.hasOwnProperty(transition_prop) ? props[transition_prop] : false;
64        })();
65
66    window.App = (function()
67    {
68
69        var _init = false, app = { };
70
71        var inner = document.getElementById('inner-wrap'),
72
73            nav_open = false,
74
75            nav_class = 'js-nav';
76
77
78        app.init = function()
79        {
80            if (_init) {
81                return;
82            }
83            _init = true;
84
85            var closeNavEnd = function(e)
86            {
87                if (e && e.target === inner) {
88                    document.removeEventListener(transition_end, closeNavEnd, false);
89                }
90                nav_open = false;
91            };
92
93            app.closeNav =function()
94            {
95                if (nav_open) {
96                    // close navigation after transition or immediately
97                    var duration = (transition_end && transition_prop) ? parseFloat(window.getComputedStyle(inner, '')[transition_prop + 'Duration']) : 0;
98                    if (duration > 0) {
99                        document.addEventListener(transition_end, closeNavEnd, false);
100                    } else {
101                        closeNavEnd(null);
102                    }
103                }
104                removeClass(doc, nav_class);
105            };
106
107            app.openNav = function()
108            {
109                if (nav_open) {
110                    return;
111                }
112                addClass(doc, nav_class);
113                nav_open = true;
114            };
115
116            app.toggleNav = function(e)
117            {
118                if (nav_open && hasClass(doc, nav_class)) {
119                    app.closeNav();
120                } else {
121                    app.openNav();
122                }
123                if (e) {
124                    e.preventDefault();
125                }
126            };
127
128            // open nav with main "nav" button
129            document.getElementById('nav-open-btn').addEventListener('click', app.toggleNav, false);
130
131            // close nav with main "close" button
132            document.getElementById('nav-close-btn').addEventListener('click', app.toggleNav, false);
133
134            // close nav by touching the partial off-screen content
135            document.addEventListener('click', function(e)
136            {
137                if (nav_open && !hasParent(e.target, 'nav')) {
138                    e.preventDefault();
139                    app.closeNav();
140                }
141            },
142            true);
143
144            addClass(doc, 'js-ready');
145
146        };
147
148        return app;
149
150    })();
151
152    if (window.addEventListener) {
153        window.addEventListener('DOMContentLoaded', window.App.init, false);
154    }
155
156})(window, window.document);