-
Notifications
You must be signed in to change notification settings - Fork 0
/
sidebarScript.js
88 lines (83 loc) · 3.77 KB
/
sidebarScript.js
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
(function (window, undefined) {
'use strict';
// responsive pinnable sidemenu component
var sideMenu = function (el) {
var htmlSideMenu = el, htmlSideMenuPinTrigger = {}, htmlSideMenuPinTriggerImage = {}, htmlOverlay = {};
var init = function () {
htmlSideMenuPinTrigger = el.querySelector('.wui-side-menu-pin-trigger');
htmlSideMenuPinTriggerImage = htmlSideMenuPinTrigger.querySelector('i.fa');
htmlOverlay = document.querySelector('.wui-overlay');
Array.prototype.forEach.call(document.querySelectorAll('.wui-side-menu-trigger'), function (elmt, i) {
elmt.addEventListener('click', function (e) {
e.preventDefault();
toggleMenuState();
}, false);
});
htmlSideMenuPinTrigger.addEventListener('click', function (e) {
e.preventDefault();
toggleMenuPinState();
}, false);
htmlOverlay.addEventListener("click", function (e) {
htmlSideMenu.classList.remove('open');
}, false);
window.addEventListener("resize", checkIfNeedToCloseMenu, false);
checkIfNeedToCloseMenu();
};
var toggleMenuState = function () {
htmlSideMenu.classList.toggle('open');
menuStateChanged(htmlSideMenu, htmlSideMenu.classList.contains('open'));
};
var toggleMenuPinState = function () {
htmlSideMenu.classList.toggle('pinned');
htmlSideMenuPinTriggerImage.classList.toggle('fa-rotate-90');
if (htmlSideMenu.classList.contains('pinned') !== true) {
htmlSideMenu.classList.remove('open');
}
menuPinStateChanged(htmlSideMenu, htmlSideMenu.classList.contains('pinned'));
};
var checkIfNeedToCloseMenu = function () {
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if (width <= 767 && htmlSideMenu.classList.contains('open') === true) {
htmlSideMenu.classList.remove('open');
menuStateChanged(htmlSideMenu, htmlSideMenu.classList.contains('open'));
}
if (width > 767 && htmlSideMenu.classList.contains('pinned') === false) {
htmlSideMenu.classList.remove('open');
menuStateChanged(htmlSideMenu, htmlSideMenu.classList.contains('open'));
}
};
var menuStateChanged = function (element, state) {
var evt = new CustomEvent('menuStateChanged', { detail: { open: state} });
element.dispatchEvent(evt);
};
var menuPinStateChanged = function (element, state) {
var evt = new CustomEvent('menuPinStateChanged', { detail: { pinned: state} });
element.dispatchEvent(evt);
};
init();
return {
htmlElement: htmlSideMenu,
toggleMenuState: toggleMenuState,
toggleMenuPinState: toggleMenuPinState
};
};
window.SideMenu = sideMenu;
})(window);
var documentReady = function (fn) {
if (document.readyState != 'loading') {
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
};
documentReady(function() {
var sample = new SideMenu(document.querySelector('.wui-side-menu'))
sample.htmlElement.addEventListener('menuPinStateChanged', function(e) {
// document.querySelector('#events').innerHTML += 'menuPinStateChanged , menu pinned? => '
// + e.detail.pinned + '<br>';
}, false);
sample.htmlElement.addEventListener('menuStateChanged', function(e) {
// document.querySelector('#events').innerHTML += 'menuStateChanged , menu open? => '
// + e.detail.open + '<br>';
}, false);
});