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
|
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
//if we find the menu items
//----------------------------------------------
// Account Menu
if (document.getElementById('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);
//
if (typeof(document.getElementById('js-overlay-content')) != 'undefined' && document.getElementById('js-overlay-content') != null) {
// Select your overlay trigger
var trigger = document.querySelector('#overlay-trigger');
trigger.addEventListener('click', function(e){
e.preventDefault();
novicell.overlay.create({
'selector': trigger.getAttribute('data-element'),
'class': 'selector-overlay',
});
});
}
|
