merged new header

js/headfootLogout.js

+var menu = [{'name':'Informationen', 'combos':[{'name':'Projekte', 'link':'/project'}, {'name':'Über das M4_LAB', 'link':'/projectoverview?projectID=1'}], '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':'...', 'link':'#'}*/], 'type':'dropdown', 'link':'#'},/*{'name':'Bürgerbeteiligung', 'combos':[{'name':'...', 'link':'#'}, {'name':'...', 'link':'#'}], 'type':'dropdown', 'link':'#'},*/{'name':'Logout', 'combos':[], 'type':'logoutbutton', 'link':'/logout'}];
+
+
+var hft_links = [{'url':'http://www.hft-stuttgart.de/Forschung/M4-Lab/Team/index.html/de', 'name':'Kontakt'},{'url':'http://www.hft-stuttgart.de/Hochschule/Impressum.html/de', 'name':'Impressum'},{'url':'http://www.hft-stuttgart.de/Einrichtungen/Datenschutz/Datenschutz-Homepage', 'name':'Datenschutz'}]
+
+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'}];
+
+var footer_images = [/*{'src':'/images/demo/bbf_logo.png', 'alt':'BMBF'},*/ {'src':'/images/demo/Innovative_Hochschule_Initiative_BMBF_GWK_RGB.jpg', 'alt':'Innovative Hochschule'}]
+
+function prependChild(parent,child){
+    parent.insertBefore(child, parent.childNodes[0]);
+}
+
+function userAuthenticated(){
+    let params = new URLSearchParams(window.location.search);
+    if(params.get('isAuthenticatedUser')){
+        return true;
+    }else if(document.getElementById('loginswitch')){   //relikt login via OAuth
+        if(document.getElementById('loginswitch').getAttribute('authenticated') == '1'){
+            return true;
+        }
+    }else{
+        return false;
+    }
+}
+
+
+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);
+    }
+    if (c.indexOf(name) == 0) {
+      return c.substring(name.length, c.length);
+    }
+  }
+  return "";
+}
+
+function sendRequest(URL){
+    console.log(document.cookie);
+    let xhr = new XMLHttpRequest();
+    xhr.open("POST", URL, true);
+    let token = readCookie("XSRF-TOKEN");
+    //Send the proper header information along with the request
+    xhr.setRequestHeader('X-CSRF-TOKEN', token);
+    xhr.send();
+}
+
+
+/* function head()
+ * creates header and prepends it to the documents body
+ */
+
+function head(){
+    let headerdiv = document.createElement('div');
+    let alertdiv = document.createElement('div');
+    headerdiv.classList.add("wrapper","row1");
+    let navheader = document.createElement('header');
+    navheader.id = "header";
+    navheader.classList.add("clear");
+    let alertbutton = document.createElement('button');
+    alertbutton.type = "button";
+    alertbutton.classList.add("close");
+    alertbutton.setAttribute("data-dismiss", "alert");
+    alertbutton.innerHTML = "&times;";
+    alertdiv.innerHTML="<strong>Disclaimer</strong> This website is under construction and in prototype-phase. It is not for public use."
+    prependChild(alertdiv, alertbutton);
+    alertdiv.classList.add('alert','alert-danger', 'alert-dismissible', 'fade','show');
+    alertdiv.style = "text-align:center;";
+    navheader.appendChild(alertdiv);
+    let navbar = document.createElement('nav');
+    navbar.classList.add("navbar", "navbar-default");
+    let fluiddiv = document.createElement('div');
+    fluiddiv.classList.add("container-fluid");
+    let navbardiv = document.createElement('div');
+    navbardiv.classList.add("navbar-header");
+    let navelements = document.createElement('ul');
+    navelements.id="navelemente";
+    let logos = document.createElement('li');
+    let link_m4lab = document.createElement('a');
+    link_m4lab.href = "/";
+    link_m4lab.innerHTML = "<img src='/images/demo/m4lab_logo.jpg' alt='Logo Innovationslabor M4_LAB'>";
+    logos.appendChild(link_m4lab);
+    navelements.appendChild(logos);
+    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');
+            combodiv.id=headlink.id+"_par";
+            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");
+                if(userAuthenticated() || typeof user !== 'undefined'){ //either logged in the old way or logged in using SAML
+                    if(menu[j].combos[k].link.includes('?')){
+                        combolink.href = menu[j].combos[k].link + "&isAuthenticatedUser=true";
+                    }else{    
+                        combolink.href = menu[j].combos[k].link + "?isAuthenticatedUser=true";
+                    }
+                }else{
+                    combolink.href = menu[j].combos[k].link;
+                }
+                combolink.innerHTML = menu[j].combos[k].name;
+                combodiv.appendChild(combolink);
+            }
+            headitem.appendChild(combodiv);
+        }else if(itemtype=='logoutbutton'){
+        /*    if(userAuthenticated()){
+                headlink.innerHTML="Account";
+                headlink.href="/account/";
+            } */
+            headlink.innerHTML="Logout";
+            headlink.href="/logout";
+            headlink.classList.remove("nav-link");
+            headlink.classList.add("btn");
+            headlink.classList.add("btn-outline-danger");
+        }
+        headitem.appendChild(headlink);
+        navelements.appendChild(headitem);
+    }
+/*    let searchitem = document.createElement('li');
+    searchitem.classList.add("nav-item");
+    let searchinput = document.createElement('input');
+    searchinput.value='Suche...'
+    searchinput.type="text";
+    searchinput.classList.add("nav-item-suchfeld");
+    searchinput.setAttribute('onFocus', "this.value=(this.value=='search...')? '' : this.value");
+    searchitem.appendChild(searchinput);
+    let magnifier = document.createElement('input');
+    magnifier.type="image"
+    magnifier.src="/images/Lupe_grau.png";
+    magnifier.width="25";
+    magnifier.height="25";
+    magnifier.alt="";
+    magnifier.id="sf_submit";
+    magnifier.value="search";
+    searchitem.appendChild(magnifier);
+    navelements.appendChild(searchitem);*/
+    navbardiv.appendChild(navelements);
+    fluiddiv.appendChild(navbardiv);
+    navbar.appendChild(fluiddiv);
+    navheader.appendChild(navbar);
+    headerdiv.appendChild(navheader);
+    prependChild(document.body, headerdiv);
+};
+
+/* function foot()
+ * creates footer and appends it to the documents body
+ */
+
+function foot(){
+    let footerdiv = document.createElement('div');
+    footerdiv.id="homepage";
+    footerdiv.classList.add("last", "clear");
+    footerdiv.innerHTML = "<hr>";
+    let containerdiv = document.createElement('div');
+    containerdiv.classList.add('flex-container');
+    let hftlink = document.createElement('a');
+    hftlink.classList.add("col-md-3");
+    hftlink.setAttribute('style','flex-basis: 400px;');
+    hftlink.href="https://www.hft-stuttgart.de";
+    let hftimage = document.createElement('img');
+    hftimage.src="/images/demo/hft_logo.jpg"; 
+    hftimage.alt="Logo der Hochschule für Technik Stuttgart";
+    hftimage.height= '75';
+    hftlink.appendChild(hftimage);
+    containerdiv.appendChild(hftlink);
+    let contactdiv = document.createElement('div');
+    contactdiv.classList.add("col-md-3", "footer-unten")
+    contactdiv.setAttribute('style',"flex-basis:400px");
+    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');
+        coldiv.classList.add("contactrow", "footer-unten");
+        let collink = document.createElement('a');
+        collink.innerHTML = hft_links[i].name;
+        collink.classList.add("contact-lower")
+        collink.href = hft_links[i].url;
+        coldiv.appendChild(collink)
+        rowdiv.appendChild(coldiv);
+    }
+    contactdiv.appendChild(rowdiv);
+    containerdiv.appendChild(contactdiv);
+    let socialdiv = document.createElement('div');
+    socialdiv.classList.add("col-md-3");
+    socialdiv.setAttribute('style','flex-basis: 400px;');
+    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);
+    containerdiv.appendChild(socialdiv);
+    let imagediv = document.createElement('div');
+    imagediv.classList.add("col-md-3");
+    imagediv.setAttribute("style", "flex-basis:400px;");
+    for (let k = 0; k< footer_images.length; k++){
+        let image = document.createElement('img');
+        image.src = footer_images[k].src;
+        image.width="300";
+        image.height= "73";
+        image.alt = footer_images[k].alt;
+        imagediv.appendChild(image);
+    }
+    containerdiv.appendChild(imagediv);
+    footerdiv.appendChild(containerdiv);
+    document.body.appendChild(footerdiv);
+};
+
+
+head();
+foot();
\ No newline at end of file