removal of navbar for Venueless iframe (#104)

blulady · tim-schilling · web-flow · commit 1d3fe824c09e · 2024-09-14T08:40:28.000-05:00
* script working in default.html when placed directly but not getting called properly from script file

* Move iframe_compat.js to the assets/js folder.

* Swap published with eleventyExcludeFromCollections

E11venty doesn't have a published flag.

---------

Co-authored-by: Tim Schilling &lt;schillingt@better-simple.com&gt;
diff --git a/src/_layouts/default.html b/src/_layouts/default.html
@@ -110,5 +110,6 @@
   {%- include 'svg-social-icons.html' -%}
 
   <script src="/assets/js/main.js"></script>
+  <script src="/assets/js/iframe_compat.js"></script>
 </body>
 </html>
diff --git a/src/assets/js/iframe_compat.js b/src/assets/js/iframe_compat.js
@@ -0,0 +1,33 @@
+console.log("Navbar removal script starting");
+(function() {
+    function isInIframe() {
+        try {
+            return window.self !== window.top;
+        } catch (e) {
+            return true;
+        }
+    }
+
+    function removeNavbar() {
+        if (!isInIframe()) {
+            console.log('Page is not in an iframe, keeping navbar');
+            return;
+        }
+
+        console.log('Page is in an iframe, attempting to remove navbar');
+        var navbar = document.querySelector('nav');
+        if (navbar) {
+            console.log('Navbar found, removing');
+            navbar.remove();
+        } else {
+            console.log('Navbar not found');
+        }
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', removeNavbar);
+    } else {
+        removeNavbar();
+    }
+})();
+console.log("Navbar removal script ended");
diff --git a/src/iframe.html b/src/iframe.html
@@ -0,0 +1,34 @@
+---
+layout: null
+permalink: /iframe/
+eleventyExcludeFromCollections: true
+sitemap: false
+---
+
+<!doctype html>
+<html class="no-js" lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+      iframe {
+        width: 100%;
+        height: 100vh;
+      }
+    </style>
+  </head>
+  <body>
+    <p>This is a testing harness. Browse to
+      <code>
+        <a href="/iframe/?page=/conduct/">/iframe/?page=/conduct/</a>
+      </code>
+      to test the conduct page in an iframe.
+    </p>
+    <iframe id="iframe-test" src=""></iframe>
+  </body>
+  <script>
+    const iframe = document.getElementById('iframe-test')
+    iframe.src = 'http://localhost:8080'+(new URLSearchParams(window.location.search)).get('page')
+  </script>
+</html>
