diff --git a/js/customElements/footer.js b/js/customElements/footer.js index 7ef713ffcb4baa44dbb1f3ba9cde972c60c95fbb..d6bb09de54a9232c39853a5463f9a7830cee70f7 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); + }); } }