Add option to show modals

Modals can be shown instead of opening links.
vu-ih2ls · Apr 3, 2024 · 4bebcc4 · 4bebcc4
1 parent 2e6fd17
commit 4bebcc4
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 28 deletions.
diff --git a/README.md b/README.md
@@ -25,10 +25,14 @@ The second step is to upload your images into the `img` folder (or any other fol
 - `pannellumViewer.js`: Here you can change all the settings related to Pannellum, the virtual tour, locations of markers and more. For an extensive explanation, see https://pannellum.org/documentation/overview/. Also look at the useful links below.
 - `index.html`: By default, the virtual lab environment consists of one single page that shows the pannellum viewer in fullscreen, as this works best when embedding the website in canvas or any other site. To change anything on this default page, edit `index.html`.
 - `fallback.html`: Shown when the browser does not support WebGL and/or Pannellum. An option could be to show some static images of the lab, as those will always load.
+- `modal.js`: Configuration of the modal popups that are shown when clicking on an information hotspot. By default, text `<p>`, embeds `<iframe>` and images `<img>` are supported. Can be edited to allow for more modal types or combinations of the modal types.
 - `favicon.ico`: The icon that will be shown in the browser tab, the default is the iH2LS logo. The icon can be removed for no icon or replaced by generating an icon using image editing software or an online tool (https://realfavicongenerator.net for example).
 - `pannellum` (folder): In this folder, the Pannellum library is stored, dowloaded from https://pannellum.org/download/. If necessary, the Pannellum CDN can be used instead of the folder.
 - `README.md`: This explanatory file, delete after copying this template.
 
+## Pannellum hotspots
+The Pannellum hotspots can be added according to the Pannellum documentation for the navigational hotspots and the information hotspots that open a link. For showing a popup when clicking on an information hotspot, the `clickHandlerFunc` and `clickHandlerArgs` attributes can be used together with the `modal.js` file. As shown in the example in `pannellumViewer.js`, `clickHandlerFunc` should be set to `showModal`. `clickHandlerArgs` should be an array containing the type of modal (`p`,`iframe`,`img`) and the value (either a string of text for `p`, or a path/url for `iframe` and `img`).
+
 ## Useful links
 - [Adding a logo on top of the tripod using the insta360 app](https://www.insta360.com/support/supportcourse?post_id=9341)
 - [Editing an equirectangular image in Affinity photo](https://affinity.help/photo/en-US.lproj/index.html?page=pages/LiveProjection/equirectangular.html&title=Equirectangular%20projection)

diff --git a/index.html b/index.html
@@ -10,56 +10,69 @@
         html, body {
             height: 100%;
             margin: 0;
+            font-family: sans-serif;
         }
         #panorama {
             height: 100%;
         }
-        /* Warning for small screens */
-        .overlay {
+        /* Simple modal, based on https://www.w3schools.com/howto/howto_css_modals.asp */
+        .modal {
+            display: block;
+            position: fixed;
+            z-index: 1;
+            padding-top: 5vh;
+            inset: 0;
+            width: 100%;
             height: 100%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            text-align: center;
-            flex-direction: column;
-            font-family: sans-serif;
+            background-color: rgba(255, 255, 255, 0.5);
+        }
+        .modal-content {
+            background-color: white;
+            margin: auto;
+            padding: 1em;
+            width: 75%;
+            border-radius: 1em;
         }
-        .overlay > :is(h2, p, button) {
-            padding: 10px;
+        .close {
+            color: #aaaaaa;
+            float: right;
+            font-size: 28px;
+            font-weight: bold;
         }
-        .hidden {
-            display: none;
+        .close:hover,
+        .close:focus {
+            color: #000;
+            text-decoration: none;
+            cursor: pointer;
         }
     </style>
 </head>
 <body>
-    <div id="popup" class="hidden overlay">
-        <h2>Let op:</h2>
-        <p>Voor de beste ervaring wordt een groter scherm aanbevolen.</p>
-        <button onclick="popup()">Toch doorgaan</button>
-    </div>
     <div id="panorama"></div>
+    <template id="modal">
+         <div class="modal">
+            <div class="modal-content">
+                <span class="close" onclick="return this.parentNode.parentNode.remove();">&times;</span>
+            </div>
+         </div>
+    </template>
     <script type="module">
       import pannellumViewer from './pannellumViewer.js';
       import settings from './settings.js';
+      import {smallScreenModal} from './modal.js';
 
       // Initialize pannellum viewer.
       pannellum.viewer('panorama', pannellumViewer);
 
-      // Warning for small screens.
+      // Show warning for small screens (messages below can be changed).
       if (settings.smallScreenWarning) {
         let windowSize = window.innerWidth;
         window.addEventListener('load', () => {
-          if (windowSize <= 800) {popup()}
+          if (windowSize <= 800) {smallScreenModal(
+            'Voor de beste ervaring wordt een groter scherm aanbevolen.', 'Toch doorgaan'
+          )}
         });
       }
     </script>
-    <script>
-      // Popup function for small screen warning.
-      function popup() {
-        document.getElementById('popup').classList.toggle('hidden');
-        document.getElementById('panorama').classList.toggle('hidden');
-      }
-    </script>
 </body>
 </html>
diff --git a/modal.js b/modal.js
@@ -0,0 +1,61 @@
+// Popup function for small screen warning.
+export let smallScreenModal = function(msg, btn) {
+  // See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
+  // Select elements
+  const body = document.querySelector("body");
+  const template = document.querySelector("#modal");
+  // Clone the template
+  const clone = template.content.cloneNode(true);
+  let content = clone.querySelector(".modal-content");
+  // Modal should fill 80% of screen height
+  content.style = "min-height: 80vh;";
+  // Adding <p> tag:
+  let p = document.createElement("p");
+  p.textContent = msg;
+  content.appendChild(p);
+  // Adding <button>:
+  let button = document.createElement("button");
+  button.textContent = btn;
+  button.onclick = function() {return this.parentNode.parentNode.remove()};
+  content.appendChild(button);
+  // Add modal to body
+  body.appendChild(clone);
+};
+
+export let showModal = function(e, [type, value]) {
+  // See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
+  // Select elements
+  const body = document.querySelector("body");
+  const template = document.querySelector("#modal");
+  // Clone the template
+  const clone = template.content.cloneNode(true);
+  let content = clone.querySelector(".modal-content");
+  // Determine type of modal.
+  if (type === 'p') {
+    // Adding <p> tag:
+    let p = document.createElement("p");
+    p.textContent = value;
+    content.appendChild(p)
+  } else if (type === 'iframe') {
+    // Adding <iframe> tag with video url:
+    let iframe = document.createElement("iframe");
+    // Styling
+    iframe.allowFullscreen = true;
+    iframe.width = "100%";
+    iframe.style = "min-height: 80vh;";
+    iframe.frameBorder = "0";
+    // Set url of iframe to value
+    iframe.src = value;
+    content.appendChild(iframe);
+  } else if (type === 'img') {
+    // Adding <img> tag with img url:
+    let img = document.createElement("img");
+    // Styling
+    img.style = "width: 100%; min-height: 80vh;";
+    // Set url of img to value
+    img.src = value;
+    content.appendChild(img);
+  }
+  // Add modal to body
+  body.appendChild(clone);
+};
diff --git a/pannellumViewer.js b/pannellumViewer.js
@@ -1,5 +1,6 @@
 // Import settings from settings file.
 import settings from './settings.js';
+import {showModal} from './modal.js';
 const baseUrl = settings.baseUrl;
 const folder = settings.folder;
 
@@ -37,7 +38,14 @@ const pannellumViewer = {
           // Text shown on hover.
           "text": "Instrument 1",
           // Link to canvas page or url with more information.
-          "URL": baseUrl + "/pages/instrument"
+          // "URL": baseUrl + "/pages/instrument",
+
+          // OR: Use custom popup function to show popup.
+          "clickHandlerFunc": showModal,
+          // With arguments: array of html element name (in this case <p>) and the value (text or a url).
+          "clickHandlerArgs": ["p", "This is a test!"],
+          // OR:
+          // "clickHandlerArgs": ["iframe", "https://www.youtube.com/embed/gw4A4CgwtyE?si=WmNxFpOCBCLPGQrn"],
         },
       ]
     },

diff --git a/settings.js b/settings.js
@@ -1,7 +1,7 @@
 const settings = {
   // Edit this url for different canvas urls or course codes.
   "baseUrl": "https://canvas.vu.nl/courses/<COURSE_CODE>/",
-  // Name of the folder containing the files.
+  // Name of the folder containing the image files.
   "folder": "img",
   // Warning popup for small screens.
   "smallScreenWarning": true