2021-04-13 10:17:35 +02:00
|
|
|
class Footer extends HTMLElement {
|
|
|
|
constructor() {
|
|
|
|
super();
|
2022-03-25 09:38:48 +01:00
|
|
|
|
|
|
|
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"
|
|
|
|
}
|
|
|
|
];
|
2021-04-13 10:17:35 +02:00
|
|
|
this.innerHTML = `
|
|
|
|
<footer>
|
|
|
|
<div id="blueBar"></div>
|
|
|
|
<div id="footerContent">
|
|
|
|
<div>
|
2021-04-13 11:29:40 +02:00
|
|
|
<a href="/datenschutzerklaerung.html">Datenschutzerklärung</a><br>
|
|
|
|
<a href="/bildquellen.html">Bildquellen</a><br>
|
|
|
|
<a href="/impressum.html">Impressum</a><br>
|
2021-08-16 16:46:40 +02:00
|
|
|
<a href="//gitlab.jonasled.de/jonasled/website">Quellcode</a><br>
|
2021-04-13 10:17:35 +02:00
|
|
|
</div>
|
|
|
|
<div id="newestPost">
|
|
|
|
<h3>Neueste Beiträge:</h3>
|
|
|
|
<jl-footer_blog></jl-footer_blog>
|
|
|
|
</div>
|
|
|
|
<div class="center">
|
2022-03-25 09:38:48 +01:00
|
|
|
<p class="center" id="socialButtonsContainer">
|
2021-04-13 10:17:35 +02:00
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</footer>
|
|
|
|
`;
|
2022-03-25 09:38:48 +01:00
|
|
|
const socialButtonsContainer = this.querySelector("#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);
|
|
|
|
});
|
2021-04-13 10:17:35 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-09-09 12:50:04 +02:00
|
|
|
customElements.define("jl-footer", Footer);
|