generate social buttons from array
This commit is contained in:
parent
f155578daa
commit
61bc809fa8
1 changed files with 30 additions and 16 deletions
|
@ -1,6 +1,25 @@
|
||||||
class Footer extends HTMLElement {
|
class Footer extends HTMLElement {
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
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 = `
|
this.innerHTML = `
|
||||||
<footer>
|
<footer>
|
||||||
<div id="blueBar"></div>
|
<div id="blueBar"></div>
|
||||||
|
@ -16,27 +35,22 @@ class Footer extends HTMLElement {
|
||||||
<jl-footer_blog></jl-footer_blog>
|
<jl-footer_blog></jl-footer_blog>
|
||||||
</div>
|
</div>
|
||||||
<div class="center">
|
<div class="center">
|
||||||
<p class="center">
|
<p class="center" id="socialButtonsContainer">
|
||||||
<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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</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);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue