rcreasey.github.io/src/js/menu.js at 0bdbfee5456c08801c54e088a745e9e120b931f0 · rcreasey/rcreasey.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
var menu = (function() {

  var mod = {};

  mod.open = function() {
    helper.setObject({
      object: state.get(),
      path: "menu",
      newValue: true
    });
  };

  mod.close = function() {
    helper.setObject({
      object: state.get(),
      path: "menu",
      newValue: false
    });
  };

  var render = {};

  render.scrollToTop = function() {
    if (window.innerWidth < 550) {
      helper.e(".menu-area").scrollTop = 0;
    } else {
      helper.e(".menu-content").scrollTop = 0;
    };
  };

  render.nav = function(menuNavButton, menuContentArea) {
    var allMenuNavButton = helper.eA(".menu-nav-button");
    var allMenuContentArea = helper.eA(".menu-content-area");
    allMenuNavButton.forEach(function(arrayItem, index) {
      helper.removeClass(arrayItem, "active");
    });
    allMenuContentArea.forEach(function(arrayItem, index) {
      helper.addClass(arrayItem, "is-hidden");
    });
    helper.addClass(menuNavButton, "active");
    helper.removeClass(menuContentArea, "is-hidden");
  };

  render.tabindex = {
    toggle: function() {
      var menu = helper.e(".menu");
      if (state.get().menu) {
        menu.tabIndex = 1;
        menu.querySelectorAll("[tabindex]").forEach(function(arrayItem, index) {
          arrayItem.tabIndex = 1;
        });
      } else {
        menu.tabIndex = -1;
        menu.querySelectorAll("[tabindex]").forEach(function(arrayItem, index) {
          arrayItem.tabIndex = -1;
        });
      };
    }
  };

  render.focus = function() {
    helper.e(".menu").focus();
  };

  render.open = function() {
    helper.addClass(helper.e("html"), "is-menu-open");
  };

  render.close = function() {
    helper.removeClass(helper.e("html"), "is-menu-open");
  };

  render.removeStyle = function() {
    helper.e(".menu").removeAttribute("style");
  };

  var nav = function(button, area) {
    render.nav(button, area);
    render.scrollToTop();
  };

  var toggle = function() {
    if (state.get().menu) {
      close();
    } else {
      open();
    };
  };

  var open = function() {
    mod.open();
    render.open();
    render.focus();
    render.scrollToTop();
    render.tabindex.toggle();
    shade.open({
      action: function() {
        close();
      }
    });
    pagelock.lock();
  };

  var close = function() {
    mod.close();
    render.close();
    render.tabindex.toggle();
    shade.close();
    pagelock.unlock();
  };

  var init = function() {
    mod.close();
    render.close();
    render.removeStyle();
  };

  return {
    init: init,
    mod: mod,
    render: render,
    open: open,
    close: close,
    toggle: toggle,
    nav: nav
  };

})();