feat: Update composeMail function

- Move function to hippie functions
- Use vanilla instead of jQuery
- Add examples to introduction page
- Reindent

source/code/app.js

@@ -111,49 +111,6 @@ function zeroFill( number, width ){
 	return number + ""; // always return a string
 }
 
-// create emails
-function composeMail(tag, name, prov, suffix, text, topic) {
-	var trigger = tag.indexOf(".");
-	var mailString = name + '@' + prov + '.' + suffix;
-	var textString = mailString.replace(/@/g, "(at)");
-	var descString = "Nachricht an " + mailString;
-	if (trigger == -1) {
-		if (!text) {
-			text = mailString;
-		} else if (text == "at") {
-			text = textString;
-		} else if (text == "to") {
-			text = descString;
-		}
-		if (!topic) {
-			topic = "";
-		} else {
-			topic = "?subject=" + topic;
-		}
-		var old = $('#'+tag).html();
-		$('#'+tag).html(old + text);
-		$('#'+tag).attr("href", "mailto:" + mailString + topic);
-	} else {
-		$(tag).each(function() {
-			if (!text) {
-				text = mailString;
-			} else if (text == "at") {
-				text = textString;
-			} else if (text == "to") {
-				text = descString;
-			}
-			if (!topic) {
-				topic = "";
-			} else {
-				topic = "?subject=" + topic;
-			}
-			var old = $(this).html();
-			$(this).html(old + text);
-			$(this).attr("href", "mailto:" + mailString + topic);
-		});
-	}
-}
-
 //Länge der Balken im Diagram berechnen
 function barwidth(size, G, W) {
 	var s = size;

source/code/hippie/functions.js

@@ -146,6 +146,45 @@ function HippieMeta($ma, $pp) {
 	});
 }
 
+// Sets the href attribute to mailto: with given information
+function composeMail(tag, name, prov, suffix, text, topic) {
+	let trigger = tag.indexOf(".");
+	let mailString = name + '@' + prov + '.' + suffix;
+	let textString = mailString.replace(/@/g, "(at)");
+	let descString = "Nachricht an " + mailString;
+
+	if (!text) {
+		text = mailString;
+	} else if (text === "at") {
+		text = textString;
+	} else if (text === "to") {
+		text = descString;
+	}
+
+	if (topic) {
+		topic = "?subject=" + topic;
+	} else {
+		topic = "";
+	}
+
+	if (trigger === -1) {
+		const el = document.getElementById(tag);
+		const elContent = el.innerHTML;
+
+		el.innerHTML = elContent + text;
+		el.setAttribute("href", "mailto:" + mailString + topic);
+	} else {
+		const els = document.getElementsByClassName(tag.slice(1));
+
+		for (let el of els) {
+			const elContent = el.innerHTML;
+
+			el.innerHTML = elContent + text;
+			el.setAttribute("href", "mailto:" + mailString + topic);
+		};
+	}
+}
+
 // get document coordinates of the element
 // function getCoords (elem) {
 // 	let box = elem.getBoundingClientRect();

source/screens/demo/introduction.njk

@@ -26,6 +26,8 @@ tags:
     </header>
     <article>
       <p>&hellip;</p>
+      <p>Contact: <a id="special" href=""></a></p>
+      <p>More: <a class="general" href=""></a>, <a class="general" href=""></a></p>
     </article>
   </section>
 {% endblock %}
@@ -43,6 +45,8 @@ tags:
 
     $(document).ready(function () {
       logPerf('JQ document ready event fired.');
+      composeMail('special', 'me', 'domain', 'tld', 'Me', 'HIPPIE')
+      composeMail('.general', 'name', 'domain', 'tld', '', '')
     });
 
     $(document).scroll(function () {