96 lines
3 KiB
JavaScript
96 lines
3 KiB
JavaScript
class Footer extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
|
|
this.socialButtons = [
|
|
{
|
|
"link": "//www.thingiverse.com/jonasled/designs/",
|
|
"icon": "3d_model",
|
|
},
|
|
{
|
|
"link": "//paypal.me/jonasled",
|
|
"icon": "paypal",
|
|
},
|
|
{
|
|
"link": "//matrix.to/#/@jonasled:jonasled.de",
|
|
"icon": "matrix"
|
|
},
|
|
{
|
|
"link": "//twitter.com/jonasled1",
|
|
"icon": "twitter"
|
|
}
|
|
];
|
|
this.links = [
|
|
{
|
|
"name": "Datenschutzerklärung",
|
|
"link": "/datenschutzerklaerung.html"
|
|
},
|
|
{
|
|
"name": "Bildquellen",
|
|
"link": "/bildquellen.html"
|
|
},
|
|
{
|
|
"name": "Impressum",
|
|
"link": "/impressum.html"
|
|
},
|
|
{
|
|
"name": "Quellcode",
|
|
"link": "//gitlab.jonasled.de/jonasled/website"
|
|
}
|
|
]
|
|
const footer = document.createElement("footer");
|
|
this.appendChild(footer);
|
|
|
|
const blueBar = document.createElement("div");
|
|
blueBar.id = "blueBar";
|
|
footer.appendChild(blueBar);
|
|
|
|
const footerContent = document.createElement("div");
|
|
footerContent.id = "footerContent";
|
|
footer.appendChild(footerContent);
|
|
|
|
const footerLinks = document.createElement("div");
|
|
footerContent.appendChild(footerLinks);
|
|
|
|
this.links.forEach(link => {
|
|
const linkElement = document.createElement("a");
|
|
linkElement.href = link["link"];
|
|
linkElement.innerText = link["name"];
|
|
footerLinks.appendChild(linkElement);
|
|
|
|
const linebreak = document.createElement("br");
|
|
footerLinks.appendChild(linebreak);
|
|
});
|
|
|
|
const footerPostDiv = document.createElement("div");
|
|
footerPostDiv.id = "newestPost";
|
|
footerContent.appendChild(footerPostDiv);
|
|
|
|
const postHeadline = document.createElement("h3");
|
|
postHeadline.innerText = "Neueste Beiträge";
|
|
footerPostDiv.appendChild(postHeadline);
|
|
|
|
const footerPost = document.createElement("jl-footer_blog");
|
|
footerPostDiv.appendChild(footerPost);
|
|
|
|
const footerIconDiv = document.createElement("div");
|
|
footerIconDiv.className = "center";
|
|
footerContent.appendChild(footerIconDiv);
|
|
|
|
const socialButtonsContainer = document.createElement("p");
|
|
socialButtonsContainer.className = "center";
|
|
footerIconDiv.appendChild(socialButtonsContainer);
|
|
|
|
this.socialButtons.forEach(button => {
|
|
const link = document.createElement("a");
|
|
link.href = button["link"];
|
|
socialButtonsContainer.appendChild(link)
|
|
|
|
const icon = document.createElement("jl-svg");
|
|
icon.setAttribute("data-name", button["icon"]);
|
|
link.appendChild(icon);
|
|
});
|
|
}
|
|
}
|
|
|
|
customElements.define("jl-footer", Footer);
|