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
|
function hideOnClickOutsided(element, btn) {
// given a menu element and btn, hide the menu
// whenever the click is not on either the element
// or the btn the opened it
const outsideClickListener = event => {
if (!element.contains(event.target) && (event.target.id != btn)) { // or use: event.target.closest(selector) === null
if (isVisible(element)) {
element.classList.remove('active')
removeClickListener()
}
}
}
const removeClickListener = () => {
document.removeEventListener('click', outsideClickListener)
}
document.addEventListener('click', outsideClickListener)
}
const isVisible = elem => !!elem && !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length ) // source (2018-03-11): https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js
//----------------------------------------
//Initialize main menu bar with progressive enhancements
//----------------------------------------------
// Account Menu
var account_a = document.getElementById("account-menu");
var account_div = document.getElementById("user-menu");
//Add button function
account_a.addEventListener('click', function(e){
e.preventDefault();
account_div.classList.toggle('active')
account_div.focus();
hideOnClickOutsided(account_div, account_a.id);
}, false);
// Notebooks Menu
var notebook_a = document.getElementById("notebook-menu-link");
var notebook_div = document.getElementById("notebooks-menu");
//Add button function
notebook_a.addEventListener('click', function(e){
e.preventDefault();
notebook_div.classList.toggle('active')
notebook_div.focus();
hideOnClickOutsided(notebook_div, notebook_a.id);
}, false);
//function buildNotebookMenu () {
// var data = JSON.parse(this.responseText);
// var div = document.getElementById("notebooks-menu");
// var ul = document.createElement("ul");
// ul.classList.add("vertical","list-style-none");
// div.appendChild(ul);
// for(var i in data) {
// var li = document.createElement("li");
// var a = document.createElement("a");
// a.setAttribute("href", data[i]['json_absolute_url']);
// a.innerHTML = data[i]['name'];
// li.append(a);
// ul.append(li);
// }
// var li = document.createElement("li");
// var a = document.createElement("a");
// a.setAttribute("href", '/user/{{user.username}}/notebooks/');
// a.innerHTML = "View all"
// li.append(a);
// ul.append(li);
//}
//
//
//// getJSON("{%url 'notebook-api-list' %}", buildNotebookMenu);
|
