From 08874bba6e31f4c4335394aaec88bc9298a7d5a7 Mon Sep 17 00:00:00 2001
From: uy-rrodriguez <5296200+uy-rrodriguez@users.noreply.github.com>
Date: Fri, 8 Mar 2024 22:27:25 +0000
Subject: [PATCH] Updated style of iframes  - CSS to set a sensible minimal
 width  - JS to resize iframes that embed local files

---
 _includes/head.html | 62 ++++++++++++++++++++++++++++++++++++++++++++-
 _sass/main.scss     |  8 +++---
 2 files changed, 66 insertions(+), 4 deletions(-)

diff --git a/_includes/head.html b/_includes/head.html
index b52d9cd..76abac7 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -8,9 +8,69 @@
 
     <script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
 
+    <script>
+      // Expand iframe to full height when the parent tab is shown
+      document.onload = () => {
+
+        /**
+         * Function to resize an iframe using the max height from its body or html.
+         *
+         * This method only works for iframes that embed local files. The same-origin policy prevents
+         * accessing the remote document element.
+         */
+        function resizeIframe(iframe) {
+            try {
+              const body = iframe.contentDocument.body,
+                    html = iframe.contentDocument.documentElement;
+              const height = Math.max(
+                body.scrollHeight, body.offsetHeight,
+                html.clientHeight, html.scrollHeight, html.offsetHeight,
+              );
+              iframe.style.height = height + "px";
+            }
+            catch {
+              // Ignore errors due to cross-origin
+              // We can't know the size of the remote page so the iframe stays the same
+            }
+        }
+
+        /**
+         * Event handler for tab shown.
+         */
+        function handleTabShown(event) {
+          // event.target is the button of the tab
+          const tab = event.target;
+          const tabPane = document.querySelector(tab.dataset.bsTarget);
+          tabPane.querySelectorAll("iframe").forEach(resizeIframe);
+
+          // Stop listening in this tab after the first execution
+          tab.removeEventListener("shown.bs.tab", handleTabShown);
+        }
+
+        /**
+         * Event handler for iframe load.
+         */
+        function handleIframeLoad(event) {
+          resizeIframe(event.target);
+          event.target.removeEventListener("load", handleIframeLoad);
+        }
+
+        // Add listener to each tab
+        document.querySelectorAll("button[data-bs-toggle=tab]").forEach(tab => {
+          tab.addEventListener("shown.bs.tab", handleTabShown);
+        });
+
+        // Add listener to each iframe
+        // This is necessary when there is an iframe in the default active tab ("shown.bs.tab" is not triggered)
+        // Also, useful in case the iframes finish loading after the tab event triggered
+        document.querySelectorAll("iframe").forEach(iframe => {
+          iframe.addEventListener("load", handleIframeLoad);
+        });
+      }
+    </script>
+
     {%- feed_meta -%}
     {%- if jekyll.environment == 'production' and site.google_analytics -%}
       {%- include google-analytics.html -%}
     {%- endif -%}
   </head>
-  
\ No newline at end of file
diff --git a/_sass/main.scss b/_sass/main.scss
index e84170e..d8b3edc 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -35,12 +35,14 @@ html, body {
 	padding: 1rem 0;
 }
 
-.tab-content {
-	padding-top: 1rem;
+.post {
+	.tab-content {
+		padding-top: 1rem;
+	}
 
 	iframe {
 		width: 100%;
-		height: 100%;
+		min-height: 50vh;
 	}
 }