headfoot.js

var menu = [{'name':'Informationen', 'combos':[{'name':'Über das M4_LAB', 'link':'/projectoverview?projectID=1'},{'name':'Kontakt', 'link':'/account/contact'}], 'type':'dropdown', 'link':'#'},{'name':'Projekte', 'combos':[{'name':'Projektinformationen', 'link':'/projektinformationen'},{'name':'Projektcode und -daten', 'link':'/projektdaten'},{'name':'High-Performance Computing', 'link':'/info_hpc.html'}], 'type':'dropdown', 'link':'#'},{'name':'Zusammenarbeit', 'combos':[{'name':'Mailinglisten', 'link':'/mailinglists'},{'name':'Videokonferenzen', 'link':'/videoconference.html'},{'name':'Wissensaustausch', 'link':'/confluence.html'},{'name':'Aufgabenmanagement', 'link':'/jira.html'},{'name':'Dateibearbeitung', 'link':'/bwcloud.html'}], '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':'Beteiligungsplattform', 'combos':[{'name':'Informationen', 'link':'/info_partizipation.html'},{'name':'Zum M4_Lab Showcase', 'link':'/partizipation/'}], 'type':'dropdown', 'link':'#'},{'name':'<i class="fa fa-question-circle" aria-hidden="true"></i> Hilfe', 'combos': [], 'type':'', 'link':'/help/'},{'name':'<i class="fa fa-user-circle" aria-hidden="true"></i> Konto', 'combos': [], 'type':'', 'link':'/account/'}];


var hft_links = [{'url':'/account/contact', 'name':'Kontakt'},{'url':'/impressum.html', 'name':'Impressum'},{'url':'/datenschutz.html', 'name':'Datenschutz'},{'url':'/terms.html', 'name':'Nutzungsbedingungen'}]

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 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 navheader = document.createElement("header");
    navheader.id = "header";
    navheader.classList.add("clear");

    // 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");
    alertbutton.type = "button";
    alertbutton.classList.add("close");
    alertbutton.setAttribute("data-dismiss", "alert");
    alertbutton.innerHTML = "&times;";
    prependChild(alertdiv, alertbutton);

    // navigation header
    let navbar = document.createElement("nav");
    navbar.classList.add("navbar", "navbar-expand-md", "navbar-light");
    navbar.style = "background-color: #ffffff;";

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

    let navbarheader = document.createElement("div");
    navbarheader.classList.add("navbar-header");
    // navigation header - logo
    let link_m4lab = document.createElement('a');
    link_m4lab.href = "/";
    link_m4lab.classList.add("navbar-brand");
    link_m4lab.innerHTML = "<img src='/img/header/Logozeile_Header.png' alt='Logo Innovationslabor M4_LAB'>";
    navbarheader.appendChild(link_m4lab);
    // 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", "#mainNav");
    togglebutton.setAttribute("aria-controls", "navbarCollapse");
    togglebutton.setAttribute("aria-expanded", "false");
    togglebutton.setAttribute("aria-label", "Toggle navigation");
    togglebutton.innerHTML = "<span class='navbar-toggler-icon'></span>";

    // main nav
    let mainNav = document.createElement('div');
    mainNav.setAttribute("id", "mainNav");
    mainNav.classList.add("navbar-collapse");

    // offcanvasHeader
    let offcanvasHeader = document.createElement('div');
    offcanvasHeader.classList.add("offcanvas-header", "mt-3");

    // close button
    let closeButton = document.createElement('button');
    closeButton.classList.add("btn", "btn-outline-danger", "btn-close", "float-right");
    closeButton.innerHTML = "&times Schließen";

    // offcanvas title
    let offcanvasTitle = document.createElement('h5');
    offcanvasTitle.classList.add("py-2");
    offcanvasTitle.innerHTML = "Hauptnavigation";

    // nav menu
    let navelements = document.createElement('ul');
    // navelements.id="navbarCollapse";
    // navelements.classList.add("collapse", "nav", "navbar-collapse", "navbar-nav", "justify-content-end");
    navelements.classList.add("nav", "navbar-nav", "justify-content-end");
    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(menu[j].link =="/help/"){ // if help open in new tab
            headlink.setAttribute("target", "_blank");
        }
        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");
                combolink.href = menu[j].combos[k].link;
                combolink.innerHTML = menu[j].combos[k].name;
                if(menu[j].name == "Zusammenarbeit"){
                    combolink.setAttribute("target", "_blank");
                } 
                combodiv.appendChild(combolink);
            }
            headitem.appendChild(combodiv);
        }
        prependChild(headitem, headlink)
        navelements.appendChild(headitem);
    }

    navbarcontainer.appendChild(navbarheader);
    navbarcontainer.appendChild(togglebutton);
    offcanvasHeader.appendChild(closeButton);
    offcanvasHeader.appendChild(offcanvasTitle);
    mainNav.appendChild(offcanvasHeader);
    mainNav.appendChild(navelements);
    navbarcontainer.appendChild(mainNav);
    navbar.appendChild(navbarcontainer)
    navheader.appendChild(alertdiv);
    navheader.appendChild(navbar);
    prependChild(document.body, navheader);
}

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

function foot() {
    // 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)
    
    let footerdiv = document.createElement('div');
    footerdiv.id="homepage";
    footerdiv.innerHTML = "<hr>";
    let containerdiv = document.createElement('div');
    containerdiv.classList.add('container');
    let containerdivrow = document.createElement('div');
    containerdivrow.classList.add('row');

    //bmbf
    let bmbf = document.createElement('div');
    bmbf.classList.add("col-md-auto");
    bmbf.innerHTML = "<img src='/img/footer/Innovative_Hochschule_Initiative_BMBF_GWK_RGB.png' alt='Innovative Hochschule' height='90'/>"
    //m4labgrau
    let m4labgrau = document.createElement('div');
    m4labgrau.classList.add("col-md-auto");
    m4labgrau.innerHTML = "<img src='/img/footer/M4_LAB_LOGO_Graustufen.png' alt='M4_LAB' height='80' />"
    // 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
    let contactdiv = document.createElement('div');
    contactdiv.classList.add("col-md-auto", "footer-unten")
    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);

    containerdivrow.appendChild(bmbf);
    containerdivrow.appendChild(m4labgrau);
    containerdivrow.appendChild(socialdiv);
    containerdivrow.appendChild(contactdiv);
    
    containerdiv.appendChild(containerdivrow);
    footerdiv.appendChild(containerdiv);
    
    // cookiebanner
    let cookiediv = document.createElement("div");
    cookiediv.classList.add("alert", "alert-info", "alert-dismissible", "hidden", "cookie-banner" );
    cookiediv.style = "text-align:center;";
    cookiediv.id="cookiediv";
    cookiediv.innerHTML="<strong>Cookie-Benachrichtigung</strong><br/> Diese Webseite nutzt technisch notwendige Session-Cookies und gegebenenfalls Cookies zur Authentifizierung. Mit der Benutzung der Webseite erklären Sie sich damit einverstanden. <br/> Weitere Informationen finden Sie in unserer <a href='https://www.hft-stuttgart.de/datenschutz'> Datenschutzerklärung </a>"
    let cookiebutton = document.createElement("button");
    cookiebutton.type = "button";
    cookiebutton.classList.add("close");
    cookiebutton.setAttribute("data-dismiss", "alert");
    cookiebutton.innerHTML = "&times;";
    prependChild(cookiediv, cookiebutton);

    footerdiv.appendChild(cookiediv);
    
    document.body.appendChild(footerdiv);
}

function setCookieSeen(){
    if (localStorage.getItem("cookieSeen") != "shown") {
        document.getElementById("cookiediv").classList.remove("hidden");
        document.getElementById("cookiediv").classList.add("show");
        localStorage.setItem("cookieSeen","shown")
    };
}

head();
foot();
setCookieSeen();