images to figures

uclab-potsdam · Feb 12, 2024 · dd33a00 · dd33a00
1 parent 7c30554
commit dd33a00
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 48 deletions.
diff --git a/README.md b/README.md
@@ -57,14 +57,14 @@ The template is in use to document the following [Interface Design](https://inte
 - **[Organigrams for/from the future](https://infovis.fh-potsdam.de/organigrams/)** (Summer 2023)
 
 
+<img src='img/decolonizing.webp' class='noresize'>
 
-[![](img/decolonizing.webp)  
-Decolonizing Data Visualization – Visualizing Postcolonies](https://infovis.fh-potsdam.de/decolonizing/)  
+[Decolonizing Data Visualization – Visualizing Postcolonies](https://infovis.fh-potsdam.de/decolonizing/)
 
 
+<img src='img/organigrams.webp' class='noresize'>
 
-[![](img/organigrams.webp)  
-Organigrams for/from the future](https://infovis.fh-potsdam.de/organigrams/)  
+[Organigrams for/from the future](https://infovis.fh-potsdam.de/organigrams/)
 
 
 ---

diff --git a/src/style.css b/src/style.css
@@ -75,16 +75,16 @@ body {
   pointer-events: none;
 }
 
-.content > p > img {
+.content > figure > img {
     transition: transform 0.5s ease;
     cursor: zoom-in; 
 }
 
-.content a img {
+.content > a > img {
     cursor: pointer; 
 }
 
-.content > p > img.noresize {
+.content > figure > img.noresize {
     cursor: unset;
 }
 
@@ -111,7 +111,7 @@ li {
 
 div.hasImg {
     background: none;
-    max-width: 20em;
+    max-width: 25em;
     text-align: center;
     padding: 0;
 }
@@ -163,9 +163,6 @@ p {
 }
 
  /* Specific styles */
-#app, #wrapper, #links {
-    pointer-events: none;
-}
 #wrapper {
     position: absolute;
     width: 100%;
@@ -221,10 +218,17 @@ p {
     border-radius: .5em;
     font-size: 0.85em;
 }
+
+.content figure {
+    text-align: center;
+    margin: 0;
+    padding: 0;
+}
+
 .content img, .cursor img {
     max-width: 100%;
-    height: 20em;
-    max-height: 20em;
+    height: 25em;
+    max-height: 25em;
     object-fit: contain;
 }
 
@@ -272,6 +276,11 @@ a[href^="#"]:hover {
     transition: all 0.3s ease-in-out;
     padding: 3em 0.75em 0.75em 0.75em;
 }
+
+#anchors a {
+    cursor: pointer !important;
+}
+
 #anchors p {
     margin: 0;
     padding: 0.2em;
@@ -285,7 +294,7 @@ a[href^="#"]:hover {
    left: 0%;
    background-color: var(--background-menu);
 }
-#anchors .active a{
+#anchors .active a {
     font-weight: bold;
     color: var(--font) !important;
 }
@@ -320,18 +329,20 @@ footer a:hover img, footer a:active img {
 }
 @media only screen and (max-width: 767px) and (orientation: portrait) {
     body {
-        font-size: 16px !important;
+        font-size: 15px !important;
     }
     h1 { font-size: 1.75em; }
-    
-    .content{
-        max-width: 20em;
+
+    .content, figure {
+        max-width: 20em !important;
     }
+
     .content img, #cursor img {
         max-width: 17.5em;
         max-height: 17.5em;
         height: 17.5em;
     }
+
     .cursor{
         max-width: 85%;
         left: unset;

diff --git a/src/syllabussite.js b/src/syllabussite.js
@@ -298,35 +298,45 @@ function createBaseData(json) {
 	imagesLoaded()
 	updateView()
 }
+
 function wrapCaptions() {
-		// wrap image captions with a span
-		document.querySelectorAll('div.content').forEach(div => {
-			// Check if there's exactly one image inside the div
-			const images = div.querySelectorAll('img');
-			if (images.length === 1) {
-				let img = images[0];
-
-				div.classList.add('hasImg');
-
-				// Case 1: Image outside, caption inside paragraph
-				if (img.parentElement.tagName !== 'P' && img.nextElementSibling?.tagName === 'P') {
-					const p = img.nextElementSibling;
-					p.innerHTML = `<span>${p.innerHTML}</span>`;
-				} 
-				// Case 2: Both image and caption inside paragraph
-				else if (img.parentElement.tagName === 'P') {
-					const p = img.parentElement;
-					const restOfContent = p.innerHTML.split(img.outerHTML)[1];
-					p.innerHTML = img.outerHTML + `<span>${restOfContent}</span>`;
-				}
-				// Case 3: No paragraph element, and no link
-				else if (img.parentElement.tagName !== 'A') {			
-					const restOfContent = div.innerHTML.split(img.outerHTML)[1];
-					div.innerHTML = img.outerHTML + `<span>${restOfContent}</span>`;
+	document.querySelectorAll('div.content').forEach(div => {
+		const imgElement = div.querySelector('img:first-child');
+		if (imgElement) {
+			div.classList.add('hasImg');
+			const figure = document.createElement('figure');
+			figure.appendChild(imgElement);
+			const textNodes = Array.from(div.childNodes);
+			// Create a caption element and append the text nodes
+			const caption = document.createElement('figcaption');
+
+			// Iterate through child nodes, handle text and elements differently
+			Array.from(div.childNodes).forEach(node => {
+				if (node.nodeType === Node.TEXT_NODE) {
+				if (typeof node.innerHTML !== "undefined") caption.appendChild(node);
+				} else if (node.tagName === 'P') {
+					let figpar = node.innerHTML.trim().replace(/^\<br\>/, "");
+					caption.innerHTML += figpar;
+				} else {
+				// Append other elements as-is
+				caption.appendChild(node);
 				}
-			}
-		});	
+			});  
+
+			caption.innerHTML = "<span>"+caption.innerHTML+"</span>";
+
+			// Append the caption to the figure
+			figure.appendChild(caption);
+
+			// Clear the content of the div
+			div.innerHTML = "";
+
+			// Append the figure to the div
+			div.appendChild(figure);
+		}
+	});
 }
+
 function imagesLoaded() {
 	var images = document.getElementsByTagName('img');
 	for (var i = 0; i < images.length; i++) {		
@@ -412,13 +422,10 @@ async function updateView() {
         }
     });
 
-	document.querySelectorAll('.content p > img:not(.noresize)').forEach(img => {
+	document.querySelectorAll('.content > figure > img:not(.noresize)').forEach(img => {
 		img.addEventListener('click', function(e) {
-
 			if (e.target.parentElement.tagName === 'A') return;
 
-			e.preventDefault();
-
 			let content = img.closest('.content');
 			let app = document.querySelector('#app');