jonasled2/website
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

generate social buttons from array

Browse source
This commit is contained in:
Jonas Leder 2022-03-25 09:38:48 +01:00
parent f155578daa
commit 61bc809fa8
No known key found for this signature in database
GPG key ID: CC3C488E27DFF5CA
1 changed files with 30 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
js/customElements/footer.js
View file

@ -1,6 +1,25 @@
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.innerHTML = `
<footer>
<div id="blueBar"></div>
@ -16,27 +35,22 @@ class Footer extends HTMLElement {
<jl-footer_blog></jl-footer_blog>
</div>
<div class="center">
<p class="center">
<a href="https://www.thingiverse.com/jonasled/designs/" aria-label="Thingiverse">
<jl-svg data-name="3d_model"></jl-svg>
</a>
<a href="https://paypal.me/jonasled/" aria-label="PayPal">
<jl-svg data-name="paypal"></jl-svg>
</a>
<a href="https://matrix.to/#/@jonasled:jonasled.de" aria-label="Matrix">
<jl-svg data-name="matrix"></jl-svg>
</a>
<a href="https://twitter.com/jonasled1" aria-label="Twitter">
<jl-svg data-name="twitter"></jl-svg>
</a>
<p class="center" id="socialButtonsContainer">
</p>
</div>
</div>
</footer>
`;
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);
});
}
}