Add visual viewport API demo

chrisdavidmills · Aug 3, 2024 · ae5f1bc · ae5f1bc
1 parent 878a5da
commit ae5f1bc
Show file tree

Hide file tree

Showing 4 changed files with 131 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -69,6 +69,8 @@ Code examples that accompany various MDN DOM and Web API documentation pages.
 
 - The "touchevents" directory is for examples and demos of the [Touch Events](https://developer.mozilla.org/docs/Web/API/Touch_events) standard.
 
+- The "visual-viewport-api" directory contains a basic demo to show usage of the Visual Viewport API. For more details on how it works, read [Visual Viewport API](https://developer.mozilla.org/docs/Web/API/Visual_Viewport_API). [View the demo live](https://mdn.github.io/dom-examples/visual-viewport-api/).
+
 - The "web-animations-api" directory contains [Web Animation API](https://developer.mozilla.org/docs/Web/API/Web_Animations_API) demos. See the [web animations README](web-animations-api/README.md) for more information.
 
 - The "web-storage" directory contains a basic demo to show usage of the Web Storage API. For more detail on how it works, read [Using the Web Storage API](https://developer.mozilla.org/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API). [View the demo live](https://mdn.github.io/dom-examples/web-storage/).

diff --git a/visual-viewport-api/index.html b/visual-viewport-api/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Visual Viewport API example</title>
+  <script async src="main.js"></script>
+  <link href="style.css" rel="stylesheet" type="text/css">
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+</head>
+
+<body>
+  <p>On a mobile device, try pinch-zooming and pan around the boxes.
+    On scrollend, the "Total" box will update to show which boxes are
+    in view, and the sum of their numbers.</p>
+  <div id="total" class="note"></div>
+  <div id="grid" class="grid">
+    <div id="box1" class="gridbox">1</div>
+    <div id="box10" class="gridbox">10</div>
+    <div id="box3" class="gridbox">3</div>
+    <div id="box8" class="gridbox">8</div>
+    <div id="box5" class="gridbox">5</div>
+    <div id="box6" class="gridbox">6</div>
+    <div id="box7" class="gridbox">7</div>
+    <div id="box4" class="gridbox">4</div>
+    <div id="box9" class="gridbox">9</div>
+    <div id="box2" class="gridbox">2</div>
+  </div>
+</body>
+
+</html>
diff --git a/visual-viewport-api/main.js b/visual-viewport-api/main.js
@@ -0,0 +1,70 @@
+const total = document.getElementById("total");
+const visibleBoxes = [];
+
+const scrollUpdater = () => {
+  total.style.top = `${visualViewport.offsetTop + 10}px`;
+  total.style.left = `${visualViewport.offsetLeft + 10}px`;
+  total.style.background = "yellow";
+};
+
+const scrollendUpdater = () => {
+  total.style.background = "lime";
+  updateVisibleBoxes();
+  updateSum();
+};
+
+function isVisible(box) {
+  const x = box.offsetLeft;
+  const y = box.offsetTop;
+  const right = x + box.offsetWidth;
+  const bottom = y + box.offsetHeight;
+
+  const horLowerBound = window.scrollX + visualViewport.offsetLeft;
+  const horUpperBound = window.scrollX + visualViewport.offsetLeft + visualViewport.width;
+  const horizontal = (x > horLowerBound && x < horUpperBound) ||
+    (right > horLowerBound && right < horUpperBound);
+
+  const verLowerBound = window.scrollY + visualViewport.offsetTop;
+  const verUpperBound = window.scrollY + visualViewport.offsetTop + visualViewport.height;
+  const vertical = (y > verLowerBound && y < verUpperBound) ||
+    (bottom > verLowerBound && bottom < verUpperBound);
+
+  return horizontal && vertical;
+}
+
+function updateVisibleBoxes() {
+  const boxes = document.querySelectorAll(".gridbox");
+  visibleBoxes.length = 0;
+
+  for (const box of boxes) {
+    if (isVisible(box)) {
+      visibleBoxes.push(box);
+    }
+  }
+}
+
+function updateSum() {
+  let sumTotal = 0;
+  const summands = [];
+
+  for (const box of visibleBoxes) {
+    console.log(`${box.id} is visible`);
+
+    const n = parseInt(box.innerText);
+
+    sumTotal += n;
+    summands.push(n);
+  }
+
+  total.innerText = `Total: ${summands.join(" + ")} = ${sumTotal}`;
+}
+
+visualViewport.onresize = scrollUpdater;
+visualViewport.onscroll = scrollUpdater;
+visualViewport.onscrollend = scrollendUpdater;
+window.onresize = scrollUpdater;
+window.onscroll = scrollUpdater;
+window.onscrollend = scrollendUpdater;
+
+updateVisibleBoxes();
+updateSum();
diff --git a/visual-viewport-api/style.css b/visual-viewport-api/style.css
@@ -0,0 +1,29 @@
+html {
+  font-family: sans-serif;
+}
+
+body {
+  margin-top: 50px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(3, 80vw);
+  grid-auto-rows: 200px;
+}
+
+.gridbox {
+  align-content: center;
+  text-align: center;
+  font-size: 2rem;
+  border: solid 1px black;
+}
+
+.note {
+  position: fixed;
+  top: 10px;
+  left: 10px;
+  border: solid 1px green;
+  background: lime;
+  padding: 5px;
+}