https://www.scalabad.no/scripts/common/nav-bar-mobile.js

1(function (window) {
2
3    'use strict';
4
5    /**
6     * Extend Object helper function.
7     */
8    function extend(a, b) {
9        for (var key in b) {
10            if (b.hasOwnProperty(key)) {
11                a[key] = b[key];
12            }
13        }
14        return a;
15    }
16
17    /**
18     * Each helper function.
19     */
20    function each(collection, callback) {
21        for (var i = 0; i < collection.length; i++) {
22            var item = collection[i];
23            callback(item);
24        }
25    }
26
27    /**
28     * Menu Constructor.
29     */
30    function Menu(options) {
31        this.options = extend({}, this.options);
32        extend(this.options, options);
33        this._init();
34    }
35
36    /**
37     * Menu Options.
38     */
39    Menu.prototype.options = {
40        wrapper: '#o-wrapper',          // The content wrapper
41        type: 'slide-left',             // The menu type
42        menuOpenerClass: '.c-button',   // The menu opener class names (i.e. the buttons)
43        maskId: '#c-mask',              // The ID of the mask
44        menuStartId: '#c-menu--',        // The menu start id
45        closeClass: '.c-menu__close'// The menu close class names (i.e. the buttons)
46    };
47
48    /**
49     * Initialise Menu.
50     */
51    Menu.prototype._init = function () {
52        this.isOpen = false;
53        this.body = document.body;        
54        this.wrapper = document.querySelector(this.options.wrapper);
55        this.mask = document.querySelector(this.options.maskId);
56        this.menu = document.querySelector(this.options.menuStartId + this.options.type);
57        this.closeBtn = this.menu.querySelector(this.options.closeClass);
58        this.menuOpeners = document.querySelector(this.options.menuOpenerClass);
59        this._initEvents();
60        
61    };
62
63    /**
64     * Initialise Menu Events.
65     */
66    Menu.prototype._initEvents = function () {
67        if ( !!this._initCompleted)
68            return;
69
70        // Event for clicks on the close button inside the menu.
71        this.closeBtn.addEventListener('click', function (e) {
72            e.preventDefault();
73            this.close();
74        }.bind(this));
75
76        // Event for clicks on the mask.
77        this.mask.addEventListener('click', function (e) {
78            e.preventDefault();
79            this.close();
80        }.bind(this));
81
82        this.menuOpeners.addEventListener('click', function (e) {
83            e.preventDefault();
84            if (this.isOpen) {
85                this.close();
86            } else {
87                this.open();
88            }
89        }.bind(this));
90
91        this._initCompleted = true;
92    };
93
94    /**
95    * notransition - Remove animation.
96    */
97    Menu.prototype.notransition = function () {
98        this.menu.classList.add('notransition');
99        this.mask.classList.add('notransition');
100    };
101    /**
102        * notransition - Activate animation.
103        */
104    Menu.prototype.transition = function () {
105        this.menu.classList.remove('notransition');
106        this.mask.classList.remove('notransition');
107    };
108
109    /**
110     * Open Menu.
111     */
112    Menu.prototype.open = function () {
113        this.menuOpeners.classList.add('change');
114        this.body.classList.add('has-active-menu');
115        this.wrapper.classList.add('has-' + this.options.type);
116        this.menu.classList.add('is-active');
117        this.mask.classList.add('is-active');
118
119        this.isOpen = true;
120        PubSub.publish(mcWeb.MegaMenuResponsive.events.onOpen, this.menu.id);
121
122        if (jQuery("#mmenu.slinky-auto-open").length <= 0) return;
123
124
125        var nodeid = parseInt(jQuery('#hidden-nodeid').text());
126
127        if (this.slinkyMenu === undefined)
128            return;
129
130        if (jQuery('ul.nav-nodeid-' + nodeid).length > 0) {
131            //found the node; it has children too, so we can show its menu item
132            var slinkyMenu = this.slinkyMenu;
133            slinkyMenu.jump('ul.nav-nodeid-' + nodeid, true);
134        }
135        else {
136            var leafNode = jQuery('#mmenu li[data-nodeid="' + nodeid + '"]');
137            if (leafNode.length > 0) {
138                var parentNode = leafNode.parent();
139                var parentNodeId = parentNode.data("node-id");
140                if (parentNodeId !== undefined) {
141                    var slinkyMenu = this.slinkyMenu;
142                    slinkyMenu.jump('ul.nav-nodeid-' + parentNodeId, true);
143                }
144            }
145    
146        }
147    };
148
149    /**
150     * Close Menu.
151     */
152    Menu.prototype.close = function () {
153        this.menuOpeners.classList.remove('change');
154        this.body.classList.remove('has-active-menu');
155        this.wrapper.classList.remove('has-' + this.options.type);
156        this.menu.classList.remove('is-active');
157        this.mask.classList.remove('is-active');
158        //this.enableMenuOpeners();
159        this.isOpen = false;
160
161        PubSub.publish(mcWeb.MegaMenuResponsive.events.onClose, this.menu.id);
162    };
163
164    /**
165     * Add to global namespace.
166     */
167    window.Menu = Menu;
168
169})(window);