Add viewport modifier to resize plugin (#4910)

* Add viewport modifier to resize plugin

Assisted-By: devx/01a80b4a-afc0-4fff-ab03-cfaf238bf0d9

* Ensure viewport fallback initializes independently

Assisted-By: devx/01a80b4a-afc0-4fff-ab03-cfaf238bf0d9

* Register viewport cleanup before evaluation

Assisted-By: devx/01a80b4a-afc0-4fff-ab03-cfaf238bf0d9

Author: BillyNoyes

packages/docs/src/en/plugins/resize.md

@@ -78,6 +78,19 @@ For example, here's a simple example of using `x-resize` to display the width an
 <a name="modifiers"></a>
 ## Modifiers
 
+<a name="viewport"></a>
+### .viewport
+
+The visual viewport is the portion of the page currently visible on screen. On mobile browsers, it can change independently of the document when browser controls or the on-screen keyboard appear. Use the `.viewport` modifier to react to these changes using `window.visualViewport`:
+
+```alpine
+<div x-resize.viewport="width = $width; height = $height">
+    ...
+</div>
+```
+
+`$width` and `$height` contain the visual viewport's dimensions. In browsers where `window.visualViewport` is unavailable, Alpine falls back to observing the document.
+
 <a name="document"></a>
 ### .document
 

packages/resize/src/index.js

@@ -6,6 +6,12 @@ export default function (Alpine) {
             evaluator(() => {}, { scope: { '$width': width, '$height': height }})
         }
 
+        if (modifiers.includes('viewport')) {
+            onViewportResize(evaluate, cleanup)
+
+            return
+        }
+
         let off = modifiers.includes('document')
             ? onDocumentResize(evaluate)
             : onElResize(el, evaluate)
@@ -26,6 +32,22 @@ function onElResize(el, callback) {
     return () => observer.disconnect()
 }
 
+function onViewportResize(callback, cleanup) {
+    let viewport = window.visualViewport
+
+    if (! viewport) {
+        cleanup(onElResize(document.documentElement, callback))
+
+        return
+    }
+
+    let evaluate = () => callback(viewport.width, viewport.height)
+
+    viewport.addEventListener('resize', evaluate)
+    cleanup(() => viewport.removeEventListener('resize', evaluate))
+    evaluate()
+}
+
 let documentResizeObserver
 let documentResizeObserverCallbacks = new Set
 

tests/cypress/integration/plugins/resize.spec.js

@@ -46,3 +46,99 @@ test('can react to the resizing of the document',
         get('h2').should(haveText('750'))
     },
 )
+
+test('can react to the resizing of the visual viewport',
+    [html`
+    <div x-data="{ width: 0, height: 0 }">
+        <h1 x-text="width"></h1>
+        <h2 x-text="height"></h2>
+
+        <div x-resize.viewport="width = $width; height = $height"></div>
+
+        <button @click="window.testViewport.width = 400; window.testViewport.height = 600; window.testViewport.dispatchEvent(new Event('resize'))">resize</button>
+    </div>
+    `, `
+        window.testViewport = Object.assign(new EventTarget(), { width: 320, height: 480 })
+        Object.defineProperty(window, 'visualViewport', { configurable: true, value: window.testViewport })
+    `],
+    ({ get }) => {
+        get('h1').should(haveText('320'))
+        get('h2').should(haveText('480'))
+
+        get('button').click()
+
+        get('h1').should(haveText('400'))
+        get('h2').should(haveText('600'))
+    },
+)
+
+test('removes the visual viewport listener when the directive is cleaned up',
+    [html`
+    <div x-data="{ shown: true, count: 0 }">
+        <h1 x-text="count"></h1>
+
+        <template x-if="shown">
+            <div x-resize.viewport="count++"></div>
+        </template>
+
+        <button id="remove" @click="shown = false">remove</button>
+        <button id="resize" @click="window.testViewport.dispatchEvent(new Event('resize'))">resize</button>
+    </div>
+    `, `
+        window.testViewport = Object.assign(new EventTarget(), { width: 320, height: 480 })
+        Object.defineProperty(window, 'visualViewport', { configurable: true, value: window.testViewport })
+    `],
+    ({ get }) => {
+        get('h1').should(haveText('1'))
+
+        get('button#remove').click()
+        get('[x-resize\\.viewport]').should('not.exist')
+        get('button#resize').click()
+
+        get('h1').should(haveText('1'))
+    },
+)
+
+test('removes the visual viewport listener during its initial evaluation',
+    [html`
+    <div x-data="{ count: 0 }">
+        <h1 x-text="count"></h1>
+
+        <div x-resize.viewport="count++; window.Alpine.destroyTree($el)"></div>
+
+        <button @click="window.testViewport.dispatchEvent(new Event('resize'))">resize</button>
+    </div>
+    `, `
+        window.testViewport = Object.assign(new EventTarget(), { width: 320, height: 480 })
+        Object.defineProperty(window, 'visualViewport', { configurable: true, value: window.testViewport })
+    `],
+    ({ get }) => {
+        get('h1').should(haveText('1'))
+
+        get('button').click()
+
+        get('h1').should(haveText('1'))
+    },
+)
+
+test('falls back to observing the document when visualViewport is unavailable',
+    [html`
+    <div x-data="{ width: 0, height: 0 }">
+        <h1 x-text="width"></h1>
+        <h2 x-text="height"></h2>
+
+        <div x-resize.viewport="width = $width; height = $height"></div>
+    </div>
+    `, `
+        Object.defineProperty(window, 'visualViewport', { configurable: true, value: null })
+    `],
+    ({ get }) => {
+        get('h1').should(notHaveText('0'))
+        get('h2').should(notHaveText('0'))
+
+        cy.viewport(550, 750)
+
+        get('h1').should(haveText('550'))
+        get('h2').should(haveText('750'))
+    },
+)