https://www.corpuschristionline.us/Scripts/Home/Page/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      //try{
55          this.closeBtn = this.menu.querySelector('.c-menu__close');
56      //}
57      //catch (ex) { }
58    this.menuOpeners = document.querySelectorAll(this.options.menuOpenerClass);
59    this._initEvents();
60  };
61
62  /**
63   * Initialise Menu Events.
64   */
65  Menu.prototype._initEvents = function() {
66    // Event for clicks on the close button inside the menu.
67    this.closeBtn.addEventListener('click', function(e) {
68      e.preventDefault();
69      this.close();
70    }.bind(this));
71
72      // Event for clicks on the mask.
73      try
74      {
75          this.mask.addEventListener('click', function(e) {
76              e.preventDefault();
77              this.close();
78          }.bind(this));
79      }
80      catch (ex) {
81          console.info(ex);
82      }
83  };
84
85  /**
86   * Open Menu.
87   */
88  Menu.prototype.open = function() {
89    this.body.classList.add('has-active-menu');
90    this.wrapper.classList.add('has-' + this.options.type);
91    this.menu.classList.add('is-active');
92    this.mask.classList.add('is-active');
93    this.disableMenuOpeners();
94  };
95
96  /**
97   * Close Menu.
98   */
99  Menu.prototype.close = function() {
100    this.body.classList.remove('has-active-menu');
101    this.wrapper.classList.remove('has-' + this.options.type);
102    this.menu.classList.remove('is-active');
103    this.mask.classList.remove('is-active');
104    this.enableMenuOpeners();
105  };
106
107  /**
108   * Disable Menu Openers.
109   */
110  Menu.prototype.disableMenuOpeners = function() {
111    each(this.menuOpeners, function(item) {
112      item.disabled = true;
113    });
114  };
115
116  /**
117   * Enable Menu Openers.
118   */
119  Menu.prototype.enableMenuOpeners = function() {
120    each(this.menuOpeners, function(item) {
121      item.disabled = false;
122    });
123  };
124
125  /**
126   * Add to global namespace.
127   */
128  window.Menu = Menu;
129
130})(window);