headfoot.js

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':'Wissensaustausch', 'link':'/confluence.html'},{'name':'Aufgabenmanagement', 'link':'/jira.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':'Bürgerbeteiligung', 'combos':[{'name':'Infos zur Bürgerbeteiligung', '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>', 'combos': [], 'type':'', 'link':'/help/'},{'name':'<i class="fa fa-user-circle" aria-hidden="true"></i>', 'combos': [], 'type':'', 'link':'/account/'}];


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'}]

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", "#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>";
    // nav menu
    let navelements = document.createElement('ul');
    navelements.id="navbarCollapse";
    navelements.classList.add("collapse", "nav", "navbar-collapse", "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;
                combodiv.appendChild(combolink);
            }
            headitem.appendChild(combodiv);
        }
        prependChild(headitem, headlink)
        navelements.appendChild(headitem);
    }

    navbarcontainer.appendChild(navbarheader);
    navbarcontainer.appendChild(togglebutton);
    navbarcontainer.appendChild(navelements);
    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' style='height:90px'/>"
    //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' style='height:80px'/>"
    // 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);
    document.body.appendChild(footerdiv);
}

head();
foot();