headfoot.js

var menu = [{'name':'Informationen', 'combos':[{'name':'Projekte', 'link':'./project'}, {'name':'Über das M4_LAB', 'link':'./index_Projektseite_M4_LAB.html'}], 'type':'dropdown', 'link':'#'},{'name':'Zusammenarbeit', 'combos':[{'name':'...', 'link':'#'}, {'name':'...', 'link':'#'}], 'type':'dropdown', 'link':'#'},{'name':'Events', 'combos':[{'name':'...', 'link':'#'}, {'name':'...', 'link':'#'}], 'type':'dropdown', 'link':'#'},{'name':'Bürgerbeteiligung', 'combos':[{'name':'...', 'link':'#'}, {'name':'...', 'link':'#'}], 'type':'dropdown', 'link':'#'},{'name':'Login', 'combos':[], 'type':'', 'link':'./user/login'}];

var hft_links = [{'url':'#', 'name':'Kontakt'},{'url':'#', 'name':'Impressum'},{'url':'#', 'name':'Datenschutz'}]

var socialmedias = [{'url':'https://twitter.com/HFT_Presse', 'name': 'fa-twitter'}, {'url':'https://www.facebook.com/HfTStuttgart/', 'name': 'fa-facebook-square'}, {'url':'https://www.instagram.com/hft_stuttgart/', '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/ihs_logo.jpg', 'alt':'Innovative Hochschule'}]

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

/* 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 = "×";
    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 = "https://transfer.hft-stuttgart.de/";
    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.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);
        }
        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("col-md-3", "footer-unten");
        let collink = document.createElement('a');
        collink.innerHTML = hft_links[i].name;
        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="100";
        image.height= "50";
        image.alt = footer_images[k].alt;
        imagediv.appendChild(image);
    }
    containerdiv.appendChild(imagediv);
    footerdiv.appendChild(containerdiv);
    document.body.appendChild(footerdiv);
};


head();
foot();