2019-01-03 23:30:27 +01:00
|
|
|
var menu = (function() {
|
|
|
|
|
2019-01-04 17:24:05 +01:00
|
|
|
var _bind = function() {
|
|
|
|
var allMenuNavButton = helper.eA(".menu-nav-button");
|
2019-01-14 19:22:39 +01:00
|
|
|
var menuClose = helper.e(".menu-close");
|
2019-01-04 17:24:05 +01:00
|
|
|
allMenuNavButton.forEach(function(arrayItem, index) {
|
|
|
|
arrayItem.addEventListener("click", function() {
|
|
|
|
_tab(this);
|
|
|
|
}, false);
|
|
|
|
});
|
2019-01-14 19:22:39 +01:00
|
|
|
menuClose.addEventListener("click", function() {
|
|
|
|
close();
|
|
|
|
shade.destroy();
|
2019-05-23 20:55:08 +02:00
|
|
|
page.update();
|
2019-01-14 19:22:39 +01:00
|
|
|
}, false);
|
2019-01-04 17:24:05 +01:00
|
|
|
};
|
|
|
|
|
2019-02-18 16:33:25 +01:00
|
|
|
var _scrollToTop = function() {
|
|
|
|
if (window.innerWidth < 550) {
|
|
|
|
helper.e(".menu-area").scrollTop = 0;
|
|
|
|
} else {
|
|
|
|
helper.e(".menu-content").scrollTop = 0;
|
|
|
|
};
|
2019-01-26 17:53:09 +01:00
|
|
|
};
|
|
|
|
|
2019-01-04 17:24:05 +01:00
|
|
|
var _tab = function(button) {
|
|
|
|
var allMenuNavButton = helper.eA(".menu-nav-button");
|
2019-01-04 20:40:49 +01:00
|
|
|
var allMenuContentArea = helper.eA(".menu-content-area");
|
2019-01-04 17:24:05 +01:00
|
|
|
var target = helper.e(button.dataset.target);
|
|
|
|
allMenuNavButton.forEach(function(arrayItem, index) {
|
|
|
|
helper.removeClass(arrayItem, "active");
|
|
|
|
});
|
2019-01-04 20:40:49 +01:00
|
|
|
allMenuContentArea.forEach(function(arrayItem, index) {
|
|
|
|
helper.addClass(arrayItem, "is-hidden");
|
2019-01-04 17:24:05 +01:00
|
|
|
});
|
|
|
|
helper.addClass(button, "active");
|
2019-01-04 20:40:49 +01:00
|
|
|
helper.removeClass(target, "is-hidden");
|
2019-02-18 16:33:25 +01:00
|
|
|
_scrollToTop();
|
2019-01-04 17:24:05 +01:00
|
|
|
};
|
|
|
|
|
2019-01-03 23:30:27 +01:00
|
|
|
var close = function() {
|
2019-02-03 15:36:40 +01:00
|
|
|
helper.setObject({
|
|
|
|
object: state.get(),
|
|
|
|
path: "menu",
|
|
|
|
newValue: false
|
|
|
|
});
|
2019-01-03 23:30:27 +01:00
|
|
|
render();
|
|
|
|
};
|
|
|
|
|
|
|
|
var open = function() {
|
2019-05-23 20:15:14 +02:00
|
|
|
_scrollToTop();
|
2019-02-03 15:36:40 +01:00
|
|
|
helper.setObject({
|
|
|
|
object: state.get(),
|
|
|
|
path: "menu",
|
|
|
|
newValue: true
|
|
|
|
});
|
2019-01-03 23:30:27 +01:00
|
|
|
render();
|
|
|
|
};
|
|
|
|
|
|
|
|
var toggle = function() {
|
2019-02-03 14:51:54 +01:00
|
|
|
if (state.get().menu) {
|
2019-02-03 15:36:40 +01:00
|
|
|
helper.setObject({
|
|
|
|
object: state.get(),
|
|
|
|
path: "menu",
|
|
|
|
newValue: false
|
|
|
|
});
|
2019-01-03 23:30:27 +01:00
|
|
|
} else {
|
2019-05-23 20:15:14 +02:00
|
|
|
_scrollToTop();
|
2019-02-03 15:36:40 +01:00
|
|
|
helper.setObject({
|
|
|
|
object: state.get(),
|
|
|
|
path: "menu",
|
|
|
|
newValue: true
|
|
|
|
});
|
2019-01-03 23:30:27 +01:00
|
|
|
};
|
|
|
|
render();
|
|
|
|
};
|
|
|
|
|
|
|
|
var render = function() {
|
|
|
|
var html = helper.e("html");
|
2019-02-03 14:51:54 +01:00
|
|
|
if (state.get().menu) {
|
2019-01-03 23:30:27 +01:00
|
|
|
helper.addClass(html, "is-menu-open");
|
2019-01-15 13:33:15 +01:00
|
|
|
helper.e(".menu").focus();
|
2019-01-03 23:30:27 +01:00
|
|
|
shade.render({
|
|
|
|
action: function() {
|
|
|
|
close();
|
2019-05-11 09:33:19 +02:00
|
|
|
page.update();
|
2019-01-03 23:30:27 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
helper.removeClass(html, "is-menu-open");
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
var init = function() {
|
2019-01-04 17:24:05 +01:00
|
|
|
_bind();
|
2019-01-03 23:30:27 +01:00
|
|
|
close();
|
|
|
|
};
|
|
|
|
|
|
|
|
return {
|
|
|
|
init: init,
|
|
|
|
close: close,
|
|
|
|
open: open,
|
|
|
|
toggle: toggle,
|
|
|
|
render: render
|
|
|
|
};
|
|
|
|
|
|
|
|
})();
|