From ae5f1bc089fd54196096253b15da32c2d8dc1f4e Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Sat, 3 Aug 2024 13:02:57 +0100 Subject: [PATCH 1/3] Add visual viewport API demo --- README.md | 2 + visual-viewport-api/index.html | 30 +++++++++++++++ visual-viewport-api/main.js | 70 ++++++++++++++++++++++++++++++++++ visual-viewport-api/style.css | 29 ++++++++++++++ 4 files changed, 131 insertions(+) create mode 100644 visual-viewport-api/index.html create mode 100644 visual-viewport-api/main.js create mode 100644 visual-viewport-api/style.css diff --git a/README.md b/README.md index 38ed432..8b4d72c 100644 --- 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 new file mode 100644 index 0000000..d3fce2d --- /dev/null +++ b/visual-viewport-api/index.html @@ -0,0 +1,30 @@ + + + + + Visual Viewport API example + + + + + + +

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
+
+ + + diff --git a/visual-viewport-api/main.js b/visual-viewport-api/main.js new file mode 100644 index 0000000..029d506 --- /dev/null +++ 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 new file mode 100644 index 0000000..14bd62b --- /dev/null +++ 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; +} From b00cc6c478c04611abc0cd9e8ecf8707ef4439ab Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Mon, 26 Aug 2024 11:19:11 +0100 Subject: [PATCH 2/3] 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 d3fce2d..ad46e8e 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 029d506..e296483 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 14bd62b..4cd5d63 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; From 9ef458b15d2751f12e8441627c435bfe2ab35c6c Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Mon, 26 Aug 2024 12:56:45 +0100 Subject: [PATCH 3/3] Couple of small tweaks --- visual-viewport-api/main.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/visual-viewport-api/main.js b/visual-viewport-api/main.js index e296483..15390c7 100644 --- a/visual-viewport-api/main.js +++ b/visual-viewport-api/main.js @@ -15,15 +15,15 @@ const scrollendUpdater = () => { }; function updateText() { - visualInfo.innerText = `Visual viewport top: ${visualViewport.offsetTop.toFixed(2)} left: ${visualViewport.offsetLeft.toFixed(2)}`; + visualInfo.innerText = `Visual viewport left: ${visualViewport.offsetLeft.toFixed(2)} top: ${visualViewport.offsetTop.toFixed(2)}`; windowInfo.innerText = `Window scrollX: ${window.scrollX.toFixed(2)} scrollY: ${window.scrollY.toFixed(2)}`; } +updateText(); + visualViewport.onresize = scrollUpdater; visualViewport.onscroll = scrollUpdater; visualViewport.onscrollend = scrollendUpdater; window.onresize = scrollUpdater; window.onscroll = scrollUpdater; window.onscrollend = scrollendUpdater; - -updateText();