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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
(function() {
// var user = 'root';
// var password = '0penBmc';
// var ip = 'https://9.3.164.177';
//
// var login = {
// "type": "POST",
// "url": ip + "/login",
// "dataType": "json",
// "async": false,
// "headers": {
// 'Accept': 'application/json',
// 'Content-Type': 'application/json'
// },
// "xhrFields": {
// withCredentials: true
// },
// "data": JSON.stringify({"data": [user, password]}),
// "success": function(response){
// console.log(response);
// },
// "error": function(xhr, textStatus, errorThrown){
// console.log("not a successful request!")
// console.log(xhr, textStatus, errorThrown)
// }
// };
//
// $.ajax(login);
// Init functions
header();
nav();
// Load logo
function loadLogo(){
$('.logo__wrapper').load('logo.html', function(){
// Grab logo if has ID or not
var logoID = document.getElementById("header__logo");
var logo = document.querySelectorAll("img, svg");
// Has ID - call header height
if(logoID && logoID !== null) {
getHeaderHeight();
// If logo exists but no ID - call header height
} else if (logo !== null && logo.length == 1){
$('img, svg').on('load', function(){
getHeaderHeight();
})
// If no logo at all - call header height
} else { getHeaderHeight(); }
});
}
// Get header height
function getHeaderHeight() {
// Get header height after logo is loaded
var header = document.getElementById("header__wrapper");
var headerHeight = header.offsetHeight;
// Add body padding to compensate for fixed header
document.body.style.paddingTop = headerHeight + 'px';
nav(headerHeight);
}
// Include header
function header() {
$('#header__wrapper').load('header.html', function () {
// include logo into header
loadLogo();
})
}
// load navigation - pass in header height
function nav(height) {
$('#navigation').load('navigation.html', function (headerHeight) {
var nav = document.getElementById("nav__top-level");
var navWidth = nav.offsetWidth; // Get navigation width
var subnav = document.getElementsByClassName("nav__second-level");
var navBtn = document.querySelectorAll('#nav__top-level button');
// Add body padding to compensate for fixed nav
document.body.style.paddingLeft = navWidth + 'px';
// Bump down nav to compensate for fixed header
nav.style.top = height + 'px';
// Bump second level nav down for fixed header
for (var i = 0; i < subnav.length; i++) {
subnav[i].style.top = height + 'px';
}
// Loop over nav buttons
for (var i = 0, len = navBtn.length; i < len; i++) {
// Click event for each nav button
navBtn[i].addEventListener('click', function(){
var parent = $(this).parents("#navigation");
var btnId = $(this).attr("class").match(/btn[\w-]*\b/);
var subnavClass = $('.nav__second-level.' + btnId);
// Remove opened class from buttons
parent.find('.opened').removeClass('opened');
// Add opened class to clicked button
this.classList.add("opened");
// Close all sub panels and remove opened class
parent.find('.nav__second-level').css("left", '-' + navWidth + "px").removeClass('opened');
// Open sub panels that matches clicked button and add opened class
parent.find(subnavClass).addClass('opened').css("left", navWidth);
})
}
// Temp solution to close subnav - TODO: better way to close
for (var i = 0, len = subnav.length; i < len; i++) {
subnav[i].addEventListener('click', function(){
this.classList.remove("opened");
this.style.left = "-" + navWidth + "px";
})
}
});
}
}());
|
