Merge pull request #40 from qvalentin/feature/annotations

annotations support

static/script.js

@@ -14,6 +14,24 @@ document.querySelectorAll("#lyrics a").forEach(item => {
 
 function getAnnotation(e) {
 	e.preventDefault()
-	//const uri = e.target.parentElement.getAttribute("href")
-	console.log("Annotations are not yet implemented!")
+	const uri = e.target.parentElement.getAttribute("href")
+	const presentAnnotation = document.getElementById(uri)
+	if (presentAnnotation) {
+		presentAnnotation.remove()
+		return
+	}
+
+	xhr = new XMLHttpRequest()
+	xhr.open("GET", uri + "/annotations")
+	xhr.send()
+	xhr.onreadystatechange = function() {
+		if (this.readyState == 4 && this.status == 200) {
+			const parsedReponse = JSON.parse(this.responseText)
+			const annotationDiv = document.createElement('div');
+			annotationDiv.innerHTML = parsedReponse.html
+			annotationDiv.id = uri
+			annotationDiv.className = "annotation"
+			e.target.parentElement.insertAdjacentElement('afterend', annotationDiv)
+		}
+	}
 }

static/style.css

@@ -56,8 +56,7 @@ body {
 	cursor: initial;
 }
 
-/*** NOT YET IMPLEMENTED
-#lyrics a {
+#lyrics a, .annotation {
 	background-color: #ddd;
 	color: inherit;
 }
@@ -65,7 +64,6 @@ body {
 #lyrics a:hover {
 	background-color: #ccc;
 }
-***/
 
 nav {
 	background-color: #ffcd38;
@@ -166,6 +164,19 @@ a {
 	cursor: pointer;
 }
 
+.annotation {
+  padding: 1rem;
+}
+
+.annotation img {
+  max-width: 100%;
+  height: auto;
+}
+
+.annotation ul {
+  padding-left: 1em;
+}
+
 .hidden {
 	display: none;
 }
@@ -337,6 +348,16 @@ footer a:hover {
 		color: #ccc;
 	}
 
+	#lyrics a, .annotation {
+		background-color: #272d44;
+		color: inherit;
+	}
+
+
+	#lyrics a:hover {
+		background-color: #32384f;
+	}
+
 	#metadata h1 {
 		color: #ddd;
 	}