From 61bc809fa8465b3087a162c6fc435bb4701ee1f8 Mon Sep 17 00:00:00 2001
From: Jonas Leder <jonas@jonasled.de>
Date: Fri, 25 Mar 2022 09:38:48 +0100
Subject: [PATCH] generate social buttons from array
---
js/customElements/footer.js | 46 ++++++++++++++++++++++++-------------
1 file changed, 30 insertions(+), 16 deletions(-)
diff --git a/js/customElements/footer.js b/js/customElements/footer.js
index 7ef713f..d6bb09d 100644
--- a/js/customElements/footer.js
+++ b/js/customElements/footer.js
@@ -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);
+ });
}
}
--
GitLab