From b00cc6c478c04611abc0cd9e8ecf8707ef4439ab Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Mon, 26 Aug 2024 11:19:11 +0100 Subject: [PATCH] Simplify example code --- visual-viewport-api/index.html | 21 +++-------- visual-viewport-api/main.js | 67 +++++++--------------------------- visual-viewport-api/style.css | 22 ++++------- 3 files changed, 27 insertions(+), 83 deletions(-) diff --git a/visual-viewport-api/index.html b/visual-viewport-api/index.html index d3fce2de..ad46e8ea 100644 --- a/visual-viewport-api/index.html +++ b/visual-viewport-api/index.html @@ -9,21 +9,12 @@ -

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.

-
-
-
1
-
10
-
3
-
8
-
5
-
6
-
7
-
4
-
9
-
2
+

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.

+
+

+
+

diff --git a/visual-viewport-api/main.js b/visual-viewport-api/main.js index 029d5061..e2964837 100644 --- 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 index 14bd62bd..4cd5d634 100644 --- 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;