75 lines
1.6 KiB
JavaScript
75 lines
1.6 KiB
JavaScript
var menu = (function() {
|
|
|
|
var _bind = function() {
|
|
var allMenuNavButton = helper.eA(".menu-nav-button");
|
|
allMenuNavButton.forEach(function(arrayItem, index) {
|
|
arrayItem.addEventListener("click", function() {
|
|
_tab(this);
|
|
}, false);
|
|
});
|
|
};
|
|
|
|
var _tab = function(button) {
|
|
var allMenuNavButton = helper.eA(".menu-nav-button");
|
|
var allMenuContentArea = helper.eA(".menu-content-area");
|
|
var target = helper.e(button.dataset.target);
|
|
allMenuNavButton.forEach(function(arrayItem, index) {
|
|
helper.removeClass(arrayItem, "active");
|
|
});
|
|
allMenuContentArea.forEach(function(arrayItem, index) {
|
|
helper.addClass(arrayItem, "is-hidden");
|
|
});
|
|
helper.addClass(button, "active");
|
|
helper.removeClass(target, "is-hidden");
|
|
};
|
|
|
|
var close = function() {
|
|
state.get().menu.active = false;
|
|
render();
|
|
};
|
|
|
|
var open = function() {
|
|
state.get().menu.active = true;
|
|
render();
|
|
};
|
|
|
|
var toggle = function() {
|
|
if (state.get().menu.active) {
|
|
state.get().menu.active = false;
|
|
} else {
|
|
state.get().menu.active = true;
|
|
};
|
|
render();
|
|
};
|
|
|
|
var render = function() {
|
|
var html = helper.e("html");
|
|
if (state.get().menu.active) {
|
|
helper.addClass(html, "is-menu-open");
|
|
helper.e(".menu-nav-button.active").focus();
|
|
shade.render({
|
|
action: function() {
|
|
close();
|
|
render();
|
|
}
|
|
});
|
|
} else {
|
|
helper.removeClass(html, "is-menu-open");
|
|
};
|
|
};
|
|
|
|
var init = function() {
|
|
_bind();
|
|
close();
|
|
};
|
|
|
|
return {
|
|
init: init,
|
|
close: close,
|
|
open: open,
|
|
toggle: toggle,
|
|
render: render
|
|
};
|
|
|
|
})();
|