https://www.kampeerzaken.nl/cms/wp-content/themes/kampeerzaken/js/menu.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  };
45
46  /**
47   * Initialise Menu.
48   */
49  Menu.prototype._init = function() {
50    this.body = document.body;
51    this.wrapper = document.querySelector(this.options.wrapper);
52    this.mask = document.querySelector(this.options.maskId);
53    this.menu = document.querySelector('#c-menu--' + this.options.type);
54    this.closeBtn = this.menu.querySelector('.c-menu__close');
55    this.menuOpeners = document.querySelectorAll(this.options.menuOpenerClass);
56    this._initEvents();
57  };
58
59  /**
60   * Initialise Menu Events.
61   */
62  Menu.prototype._initEvents = function() {
63    // Event for clicks on the close button inside the menu.
64    this.closeBtn.addEventListener('click', function(e) {
65      e.preventDefault();
66      this.close();
67    }.bind(this));
68
69    // Event for clicks on the mask.
70    this.mask.addEventListener('click', function(e) {
71      e.preventDefault();
72      this.close();
73    }.bind(this));
74  };
75
76  /**
77   * Open Menu.
78   */
79  Menu.prototype.open = function() {
80    this.body.classList.add('has-active-menu');
81    this.wrapper.classList.add('has-' + this.options.type);
82    this.menu.classList.add('is-active');
83    this.mask.classList.add('is-active');
84    this.disableMenuOpeners();
85  };
86
87  /**
88   * Close Menu.
89   */
90  Menu.prototype.close = function() {
91    this.body.classList.remove('has-active-menu');
92    this.wrapper.classList.remove('has-' + this.options.type);
93    this.menu.classList.remove('is-active');
94    this.mask.classList.remove('is-active');
95    this.enableMenuOpeners();
96  };
97
98  /**
99   * Disable Menu Openers.
100   */
101  Menu.prototype.disableMenuOpeners = function() {
102    each(this.menuOpeners, function(item) {
103      item.disabled = true;
104    });
105  };
106
107  /**
108   * Enable Menu Openers.
109   */
110  Menu.prototype.enableMenuOpeners = function() {
111    each(this.menuOpeners, function(item) {
112      item.disabled = false;
113    });
114  };
115
116  /**
117   * Add to global namespace.
118   */
119  window.Menu = Menu;
120
121})(window);