Simplify example code

mdn · Aug 26, 2024 · b00cc6c · b00cc6c
1 parent ae5f1bc
commit b00cc6c
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 83 deletions.
diff --git a/visual-viewport-api/index.html b/visual-viewport-api/index.html
@@ -9,21 +9,12 @@
 </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>
+  <p id="instructions">Try scrolling around on a desktop and a mobile browser to see how the reported values change.
+    Also try pinch/zooming on a mobile browser to see the effect.</p>
+  <div id="output">
+    <p id="visual-info"></p>
+    <hr>
+    <p id="window-info"></p>
   </div>
 </body>
 

diff --git a/visual-viewport-api/main.js b/visual-viewport-api/main.js
@@ -1,62 +1,22 @@
-const total = document.getElementById("total");
-const visibleBoxes = [];
+const output = document.getElementById("output");
+const visualInfo = document.getElementById("visual-info");
+const windowInfo = document.getElementById("window-info");
 
 const scrollUpdater = () => {
-  total.style.top = `${visualViewport.offsetTop + 10}px`;
-  total.style.left = `${visualViewport.offsetLeft + 10}px`;
-  total.style.background = "yellow";
+  output.style.top = `${visualViewport.offsetTop + 10}px`;
+  output.style.left = `${visualViewport.offsetLeft + 10}px`;
+  output.style.background = "yellow";
+  updateText();
 };
 
 const scrollendUpdater = () => {
-  total.style.background = "lime";
-  updateVisibleBoxes();
-  updateSum();
+  output.style.background = "lime";
+  updateText();
 };
 
-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}`;
+function updateText() {
+  visualInfo.innerText = `Visual viewport top: ${visualViewport.offsetTop.toFixed(2)} left: ${visualViewport.offsetLeft.toFixed(2)}`;
+  windowInfo.innerText = `Window scrollX: ${window.scrollX.toFixed(2)} scrollY: ${window.scrollY.toFixed(2)}`;
 }
 
 visualViewport.onresize = scrollUpdater;
@@ -66,5 +26,4 @@ window.onresize = scrollUpdater;
 window.onscroll = scrollUpdater;
 window.onscrollend = scrollendUpdater;
 
-updateVisibleBoxes();
-updateSum();
+updateText();
diff --git a/visual-viewport-api/style.css b/visual-viewport-api/style.css
@@ -1,25 +1,19 @@
 html {
   font-family: sans-serif;
+  height: 2000px;
+  width: 4000px;
 }
 
-body {
-  margin-top: 50px;
+p {
+  margin: 0;
 }
 
-.grid {
-  display: grid;
-  grid-template-columns: repeat(3, 80vw);
-  grid-auto-rows: 200px;
+#instructions {
+  position: relative;
+  top: 90px;
 }
 
-.gridbox {
-  align-content: center;
-  text-align: center;
-  font-size: 2rem;
-  border: solid 1px black;
-}
-
-.note {
+#output {
   position: fixed;
   top: 10px;
   left: 10px;