headfoot.js 9.61 KB
Newer Older
Wolfgang Knopki's avatar
Wolfgang Knopki committed
1
var menu = [{'name':'Informationen', 'combos':[{'name':'Projekte', 'link':'/project'}, {'name':'Über das M4_LAB', 'link':'/projectoverview?projectID=1'},{'name':'Kontakt', 'link':'/account/contact'}], 'type':'dropdown', 'link':'#'},{'name':'Zusammenarbeit', 'combos':[{'name':'Mailinglisten', 'link':'/mailinglists'},{'name':'Videokonferenzen', 'link':'/videoconference.html'},/* {'name':'...', 'link':'#'}*/], 'type':'dropdown', 'link':'#'},{'name':'Events', 'combos':[{'name':'Veranstaltungen der HfT', 'link':'http://www.hft-stuttgart.de/Aktuell/Veranstaltungen/'},{'name':'Veranstaltungen der HfT Forschung', 'link':'https://www.hft-stuttgart.de/forschung/veranstaltungen'}], 'type':'dropdown', 'link':'#'},{'name':'Benutzerkonto', 'combos': [], 'type':'', 'link':'/account/'}];
2
3


Varun Srivastava's avatar
Varun Srivastava committed
4
var hft_links = [{'url':'/account/contact', 'name':'Kontakt'},{'url':'https://www.hft-stuttgart.de/impressum', 'name':'Impressum'},{'url':'https://www.hft-stuttgart.de/datenschutz', 'name':'Datenschutz'}]
5

Wolfgang Knopki's avatar
Wolfgang Knopki committed
6
var socialmedias = [{'url':'https://twitter.com/InnolabM4', 'name': 'fa-twitter'}, {'url':'https://www.facebook.com/HfTStuttgart/', 'name': 'fa-facebook-square'}, {'url':'https://www.instagram.com/m4_lab/', 'name': 'fa-instagram'}, {'url':'https://de.linkedin.com/school/hochschule-f%C3%BCr-technik-stuttgart-%E2%80%93-university-of-applied-sciences/', 'name': 'fa-linkedin'}, {'url':'https://www.youtube.com/channel/UCi0_JfF2qMZbOhOnNH5PyHA', 'name': 'fa-youtube'}];
7

Wolfgang Knopki's avatar
Wolfgang Knopki committed
8
var footer_images = [/*{'src':'/images/demo/bbf_logo.png', 'alt':'BMBF'},*/ {'src':'/images/demo/Innovative_Hochschule_Initiative_BMBF_GWK_RGB.jpg', 'alt':'Innovative Hochschule'}]
9
10
11
12
13

function prependChild(parent,child){
    parent.insertBefore(child, parent.childNodes[0]);
}

Wolfgang Knopki's avatar
Wolfgang Knopki committed
14

Wolfgang Knopki's avatar
Wolfgang Knopki committed
15
16
17
18
19
20
21
22
function readCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for(var i = 0; i <ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
Wolfgang Knopki's avatar
Wolfgang Knopki committed
23
    }
Wolfgang Knopki's avatar
Wolfgang Knopki committed
24
25
26
27
28
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
Wolfgang Knopki's avatar
Wolfgang Knopki committed
29
30
}

Wolfgang Knopki's avatar
Wolfgang Knopki committed
31
function sendRequest(URL){
Wolfgang Knopki's avatar
Wolfgang Knopki committed
32
    console.log(document.cookie);
Wolfgang Knopki's avatar
Wolfgang Knopki committed
33
34
    let xhr = new XMLHttpRequest();
    xhr.open("POST", URL, true);
Wolfgang Knopki's avatar
Wolfgang Knopki committed
35
    let token = readCookie("XSRF-TOKEN");
Wolfgang Knopki's avatar
Wolfgang Knopki committed
36
37
38
39
40
41
    //Send the proper header information along with the request
    xhr.setRequestHeader('X-CSRF-TOKEN', token);
    xhr.send();
}


42
43
44
45
/* function head()
 * creates header and prepends it to the documents body
 */

Rosanny Sihombing's avatar
Rosanny Sihombing committed
46
47
function head() {
    let navheader = document.createElement("header");
48
49
    navheader.id = "header";
    navheader.classList.add("clear");
Rosanny Sihombing's avatar
Rosanny Sihombing committed
50
51
52
53
54
55
56

    // disclaimer
    let alertdiv = document.createElement("div");
    alertdiv.classList.add("alert", "alert-danger", "alert-dismissible", "fade", "show");
    alertdiv.style = "text-align:center;";
    alertdiv.innerHTML="<strong>Disclaimer</strong> This website is under construction and in prototype-phase. It is not for public use."
    let alertbutton = document.createElement("button");
57
58
59
60
61
    alertbutton.type = "button";
    alertbutton.classList.add("close");
    alertbutton.setAttribute("data-dismiss", "alert");
    alertbutton.innerHTML = "&times;";
    prependChild(alertdiv, alertbutton);
62

Rosanny Sihombing's avatar
Rosanny Sihombing committed
63
64
65
66
    // navigation header
    let navbar = document.createElement("nav");
    navbar.classList.add("navbar", "navbar-expand-md", "navbar-light");
    navbar.style = "background-color: #ffffff;";
67
68
69
70
71
72

    let navbarcontainer = document.createElement("div");
    navbarcontainer.classList.add("container");

    let navbarheader = document.createElement("div");
    navbarheader.classList.add("navbar-header");
Rosanny Sihombing's avatar
Rosanny Sihombing committed
73
    // navigation header - logo
74
    let link_m4lab = document.createElement('a');
75
    link_m4lab.href = "/";
Rosanny Sihombing's avatar
Rosanny Sihombing committed
76
    link_m4lab.classList.add("navbar-brand");
77
    link_m4lab.innerHTML = "<img src='/img/header/Logozeile_Header.png' alt='Logo Innovationslabor M4_LAB'>";
78
    navbarheader.appendChild(link_m4lab);
Rosanny Sihombing's avatar
Rosanny Sihombing committed
79
80
81
82
83
84
85
86
87
88
    // navigation header - toggle button menu for mobile devices
    let togglebutton = document.createElement('button');
    togglebutton.classList.add("navbar-toggler")
    togglebutton.type = "button";
    togglebutton.setAttribute("data-toggle", "collapse");
    togglebutton.setAttribute("data-target", "#navbarCollapse");
    togglebutton.setAttribute("aria-controls", "navbarCollapse");
    togglebutton.setAttribute("aria-expanded", "false");
    togglebutton.setAttribute("aria-label", "Toggle navigation");
    togglebutton.innerHTML = "<span class='navbar-toggler-icon'></span>";
89
    // nav menu
Rosanny Sihombing's avatar
Rosanny Sihombing committed
90
    let navelements = document.createElement('ul');
91
92
    navelements.id="navbarCollapse";
    navelements.classList.add("collapse", "nav", "navbar-collapse", "navbar-nav", "justify-content-end");
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
    for(let j = 0; j<menu.length; j++){
        let headitem = document.createElement('li');
        let itemtype = menu[j].type;
        headitem.classList.add("nav-item")
        let headlink = document.createElement('a');
        headlink.href=menu[j].link;
        headlink.id="navbarDropdown" + j;
        headlink.classList.add('nav-link');
        headlink.setAttribute("role", "button");
        if(itemtype=='dropdown'){
            headitem.classList.add("dropdown");
            headlink.classList.add('dropdown-toggle');
            headlink.setAttribute("data-toggle", "dropdown");
            headlink.setAttribute("aria-haspopup", "true");
            headlink.setAttribute("aria-expanded", "false");
        }
        headlink.innerHTML=menu[j].name;
        if(itemtype=='dropdown'){
            let combodiv = document.createElement('div');
112
            combodiv.id=headlink.id+"_par";
113
114
115
116
117
            combodiv.setAttribute("aria-labelledby",headlink.id);
            combodiv.classList.add("dropdown-menu");
            for(let k = 0; k< menu[j].combos.length; k++){
                let combolink = document.createElement('a');
                combolink.classList.add("dropdown-item");
Wolfgang Knopki's avatar
Wolfgang Knopki committed
118
                combolink.href = menu[j].combos[k].link;
119
120
121
                combolink.innerHTML = menu[j].combos[k].name;
                combodiv.appendChild(combolink);
            }
122
            headitem.appendChild(combodiv);
123
        }
Rosanny Sihombing's avatar
Rosanny Sihombing committed
124
        prependChild(headitem, headlink)
125
126
        navelements.appendChild(headitem);
    }
Rosanny Sihombing's avatar
Rosanny Sihombing committed
127

128
129
130
131
    navbarcontainer.appendChild(navbarheader);
    navbarcontainer.appendChild(togglebutton);
    navbarcontainer.appendChild(navelements);
    navbar.appendChild(navbarcontainer)
Rosanny Sihombing's avatar
Rosanny Sihombing committed
132
133

    navheader.appendChild(alertdiv);
134
    navheader.appendChild(navbar);
Rosanny Sihombing's avatar
Rosanny Sihombing committed
135
136
    prependChild(document.body, navheader);
}
137
138
139
140
141

/* function foot()
 * creates footer and appends it to the documents body
 */

142
function foot() {
Rosanny Sihombing's avatar
Rosanny Sihombing committed
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
    // add styles to <head> to manage sticky footer
    var styles = `
        @media only screen and (min-width: 768px) {
            html {
                position: relative;
                min-height: 100%;
            }
            body {
                margin-bottom: 120px; /* Margin bottom by footer height */
            }
            #homepage {
                position: absolute;
                bottom: 0;
                width: 100%;
                text-align: center;
            }
        }
    `
    var styleSheet = document.createElement("style")
    styleSheet.type = "text/css"
    styleSheet.innerText = styles
    document.head.appendChild(styleSheet)
    
166
167
168
169
    let footerdiv = document.createElement('div');
    footerdiv.id="homepage";
    footerdiv.innerHTML = "<hr>";
    let containerdiv = document.createElement('div');
170
    containerdiv.classList.add('container');
Rosanny Sihombing's avatar
Rosanny Sihombing committed
171
172
    let containerdivrow = document.createElement('div');
    containerdivrow.classList.add('row');
173
174
175
176

    //bmbf
    let bmbf = document.createElement('div');
    bmbf.classList.add("col-md-auto");
177
    bmbf.innerHTML = "<img src='/img/footer/Innovative_Hochschule_Initiative_BMBF_GWK_RGB.png' alt='Innovative Hochschule' style='height:90px'/>"
178
179
180
    //m4labgrau
    let m4labgrau = document.createElement('div');
    m4labgrau.classList.add("col-md-auto");
181
    m4labgrau.innerHTML = "<img src='/img/footer/M4_LAB_LOGO_Graustufen.png' alt='M4_LAB' style='height:80px'/>"
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
    // socmed
    let socialdiv = document.createElement('div');
    socialdiv.classList.add("col-md-auto");
    let socialrow = document.createElement('div');
    socialrow.id="socialmediabuttons";
    for(let j = 0; j< socialmedias.length; j++){
        let sociallink = document.createElement('a');
        sociallink.href = socialmedias[j].url;
        let socialcontent = document.createElement('i');
        socialcontent.classList.add("fab", socialmedias[j].name);
        sociallink.appendChild(socialcontent);
        socialrow.appendChild(sociallink);
        socialrow.innerHTML+="&nbsp;";
    }
    socialdiv.appendChild(socialrow);
    // contact
198
    let contactdiv = document.createElement('div');
199
    contactdiv.classList.add("col-md-auto", "footer-unten")
200
201
202
203
204
    contactdiv.innerHTML="Hochschule für Technik Stuttgart";
    let rowdiv = document.createElement('div');
    rowdiv.classList.add("row");
    for(let i = 0; i<hft_links.length; i++){
        let coldiv = document.createElement('div');
Wolfgang Knopki's avatar
Wolfgang Knopki committed
205
        coldiv.classList.add("contactrow", "footer-unten");
206
207
        let collink = document.createElement('a');
        collink.innerHTML = hft_links[i].name;
Wolfgang Knopki's avatar
Wolfgang Knopki committed
208
        collink.classList.add("contact-lower")
209
210
211
212
213
        collink.href = hft_links[i].url;
        coldiv.appendChild(collink)
        rowdiv.appendChild(coldiv);
    }
    contactdiv.appendChild(rowdiv);
214
215
216

    containerdivrow.appendChild(bmbf);
    containerdivrow.appendChild(m4labgrau);
Rosanny Sihombing's avatar
Rosanny Sihombing committed
217
    containerdivrow.appendChild(socialdiv);
218
219
    containerdivrow.appendChild(contactdiv);

Rosanny Sihombing's avatar
Rosanny Sihombing committed
220
    containerdiv.appendChild(containerdivrow);
221
222
    footerdiv.appendChild(containerdiv);
    document.body.appendChild(footerdiv);
223
}
224
225
226

head();
foot();