https://audiogest.pt/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    type: 'slide-right',             // The menu type
41    menuOpenerClass: '.c-button',   // The menu opener class names (i.e. the buttons)
42    maskId: '#c-mask'               // The ID of the mask
43  };
44
45  /**
46   * Initialise Menu.
47   */
48  Menu.prototype._init = function() {
49    this.body = document.body;
50    this.mask = document.querySelector(this.options.maskId);
51    this.menu = document.querySelector('#c-menu--' + this.options.type);
52    this.closeBtn = this.menu.querySelector('.c-menu__close');
53    this.menuOpeners = document.querySelectorAll(this.options.menuOpenerClass);
54    this._initEvents();
55  };
56
57  /**
58   * Initialise Menu Events.
59   */
60  Menu.prototype._initEvents = function() {
61    // Event for clicks on the close button inside the menu.
62    this.closeBtn.addEventListener('click', function(e) {
63      e.preventDefault();
64      this.close();
65    }.bind(this));
66
67    // Event for clicks on the mask.
68    this.mask.addEventListener('click', function(e) {
69      e.preventDefault();
70      this.close();
71    }.bind(this));
72  };
73
74  /**
75   * Open Menu.
76   */
77  Menu.prototype.open = function() {
78    this.body.classList.add('has-active-menu');
79    this.menu.classList.add('is-active');
80    this.mask.classList.add('is-active');
81    this.disableMenuOpeners();
82  };
83
84  /**
85   * Close Menu.
86   */
87  Menu.prototype.close = function() {
88    this.body.classList.remove('has-active-menu');
89    this.menu.classList.remove('is-active');
90    this.mask.classList.remove('is-active');
91    this.enableMenuOpeners();
92  };
93
94  /**
95   * Disable Menu Openers.
96   */
97  Menu.prototype.disableMenuOpeners = function() {
98    each(this.menuOpeners, function(item) {
99      //item.disabled = true;
100    });
101  };
102
103  /**
104   * Enable Menu Openers.
105   */
106  Menu.prototype.enableMenuOpeners = function() {
107    each(this.menuOpeners, function(item) {
108      //item.disabled = false;
109    });
110  };
111
112  /**
113   * Add to global namespace.
114   */
115  window.Menu = Menu;
116
117})(window);
118
119
120$(".close--menu").click(function(){
121	// Fechar Menu ao clicar nos links/botões do menu
122    $('#c-menu--slide-right').removeClass('is-active');
123    $('#c-mask').removeClass('is-active');
124    $('body').removeClass('has-active-menu');
125});