touch device problem push - non simplified

EmreT58 · Jan 21, 2024 · 5dcba7b · 5dcba7b
1 parent b453a87
commit 5dcba7b
Show file tree

Hide file tree

Showing 6 changed files with 189 additions and 173 deletions.
diff --git a/binnenkant.html b/binnenkant.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
+    <title>Binnenkant - La Tienda</title>
+    <link rel="stylesheet" href="style.css">
+    <script src='https://unpkg.com/[email protected]/dist/panzoom.min.js'></script>
+</head>
+<body>
+    <div id="image-container">
+        <div id="binnenkant"><img src="images/binnen-ss.png"></div>
+        <div class="marker" id="magnetron"></div>
+        <div class="textbox" id="magnetron-janinfo">
+            <p>Two microwaves for $500 people heat their lunch</p>
+        </div>
+        <div class="textbox" id="magnetron-extrainfo">
+            <p>Did you know 500 Colombian pesos is equal to 12 Euro cents</p>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/images/entrance.png b/images/entrance.png
diff --git a/index.html b/index.html
@@ -2,32 +2,37 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
-    <title>Coffeeshop La Tienda</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Buitenkant - La Tienda</title>
     <link rel="stylesheet" href="style.css">
     <script src='https://unpkg.com/[email protected]/dist/panzoom.min.js'></script>
 </head>
 
 <!-- Start met video, transitie naar sketch, typewriter animatie introductie en daarna auto scroll naar deur -->
 <!-- Vervolgens highlighted sketch met klikbare divs, als je divs klikt krijg je een witte vak met tekst te zien -->
 
+<!-- <img id="binnenkant" src="images/binnen-ss.png"> -->
+<!-- binnenkant zetten op een andere pagina zodat de divs niet door elkaar heen gaan -->
+<!-- of aan de hand van displayed sketch vorige divs niet klikbaar maken -->
+
 <body>
-    <main>
-        <div id="video-container">
-            <h1>La Tienda</h1>
-            <video autoplay muted loop><source src="images/"></video>
-        </div>
 
-        <div id="image-container">
-            <img id="buitenkant" src="images/buiten-ss.png">
-            <div id="deur-buiten" onclick="naarBinnen()"></div>
+    <div id="video-container">
+        <h1>La Tienda</h1>
+        <video autoplay muted loop><source src="images/"></video>
+    </div>
 
-            <!-- <img id="binnenkant" src="images/binnen-ss.png"> -->
-            <!-- binnenkant zetten op een andere pagina zodat de divs niet door elkaar heen gaan -->
-            <!-- of aan de hand van displayed sketch vorige divs niet klikbaar maken -->
+    <div id="image-container">
+        <div id="binnenkant"><img src="images/buiten-ss.png"></div>
+        <div class="marker" id="entrance"></div>
+        <a href="binnenkant.html">
+            <div class="textbox" id="entrance-info">
+                <p>Enter?</p>
+                <img src="images/entrance.png" alt="entrance icon">
+            </div>
+        </a>
 
-        </div>
-    </main>
+    </div>
     <script src="script.js"></script>
 </body>
 </html>

diff --git a/panzoom.html b/panzoom.html
diff --git a/script.js b/script.js
@@ -1,4 +1,4 @@
-window.onload = function() {
+window.onload = function() { // Werkt niet met viewport meta tag op mobiel
     // Get the dimensions of the image and the viewport
     var image = document.getElementById('buitenkant'); // Replace 'yourImageId' with the actual ID of your image
     var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
@@ -14,4 +14,69 @@ window.onload = function() {
       left: scrollX,
       behavior: 'smooth' // You can adjust this to 'auto' or 'instant' based on your preference
     });
-  };
+  };
+
+// https://github.com/anvaka/panzoom
+
+var zoomer = panzoom(document.querySelector("#image-container"), {
+  maxZoom: 20,
+  minZoom: 1,
+});
+
+zoomer.on("zoom", event =>   document.querySelectorAll('.marker[data-visible]').forEach(checkIfZoomed));
+
+function checkIfZoomed(marker) {
+  let treshold = 0.08; //op desktop emulatie werkt 0.3 goed maar op echte mobiel werkt 0.08 goed??
+  let markerSize = marker.getBoundingClientRect();
+  if (markerSize.width / self.innerWidth > treshold) {
+      if (!marker.hasAttribute("data-active")) {
+
+      // Checks
+      marker.toggleAttribute("data-active");
+      console.log("Activated", marker.id);
+
+      // Triggers
+      document.querySelectorAll(".textbox").forEach(function(textbox) { textbox.style.opacity = 1; });
+
+    }
+  } 
+  // ---
+  else {
+    if (marker.hasAttribute("data-active")) {
+
+      // Checks
+      marker.toggleAttribute("data-active");
+      console.log("De-activated", marker.id);
+
+      // Triggers
+      document.querySelectorAll(".textbox").forEach(function(textbox) { textbox.style.opacity = 0; });
+
+    }
+  }
+}
+
+let observer = new IntersectionObserver(entries => {
+  entries.forEach(entry => {
+    entry.target.toggleAttribute("data-visible", entry.isIntersecting);
+  });
+});
+
+document.querySelectorAll(".marker").forEach(element => observer.observe(element));
+
+document.getElementById("entrance").addEventListener("click", function() {
+  window.location.href = "binnenkant.html";
+});
+
+// code om mobile klikbaar te maken
+
+// panzoom(document.getElementById('entrance-info'), {
+//   onTouch: function(e) {
+//     // `e` - is current touch event.
+
+//     return false; // tells the library to not preventDefault.
+//   }
+// });
+
+// document.getElementById("entrance-info").addEventListener("click", function() {
+//   window.location.href = "binnenkant.html";
+// });
diff --git a/style.css b/style.css
@@ -4,12 +4,85 @@ html {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     /* box-sizing: border-box; */
 }
-body {
-    width: 100%;
+#image-container {
+    position: relative;
+    width: 100vw;
     height: 100vh;
 }
-/* ================================================================= */
-img {
-    width: 600%;
+/* =====- Zoomable areas and popups -=========================================================== */
+.marker {
+    position: absolute;
+    background-color: grey;
+    opacity: 0.5;
+}
+.marker[data-visible] {
     border: 1px solid red;
-}
+    transition: 0.3s ease-in-out; /* Added transition for smoother color changes */
+}
+.marker[data-active] { 
+    border: 1px solid green;
+}
+.textbox {
+    background-color: white;
+    padding: 5px;
+    position: absolute;
+    font-size: 9px;
+    max-width: 90px;
+    /* border-radius: 60% 40% 40% 20% / 70% 50% 30% 25%; */
+    border-radius: 15px;
+    box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
+    font-family: cursive;
+    opacity: 0; 
+    transition: opacity 0.5s ease-in-out;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex-flow: column;
+    margin: auto;
+}
+/* ===- Markers -=== */
+#magnetron {
+    left: 900px;
+    top: 320px;
+    width: 50px;
+    height: 100px;
+}
+#entrance {
+    left: 940px;
+    top: 570px;
+    width: 50px;
+    height: 120px;
+}
+#entrance-info {
+    left: 950px;
+    top: 580px;
+}
+#entrance-info img {
+    width: 2em;
+    height: auto;
+}
+
+#magnetron-janinfo {
+    left: 900px;
+    top: 260px;
+    opacity: 0; /* Initially set to 0 for invisibility */
+    transition: opacity 0.5s ease-in-out;
+}
+#magnetron-extrainfo {
+    left: 900px;
+    top: 420px;
+    opacity: 0; 
+    transition: opacity 0.5s ease-in-out;
+}
+/* ===- Backlog -=== */
+
+/* .textbox:before {
+    content: "";
+    position:absolute;
+    top:-40px;
+    left:0;
+    height:40px;
+    width: 40px;
+    border-bottom-left-radius: 50%;
+    box-shadow: 0 20px 0 0 white;
+} */