Forráskód Böngészése

Add .document event modifier

Caleb Porzio 5 éve
szülő
commit
83807e0dcb
9 módosított fájl, 23 hozzáadás és 5 törlés
  1. 2 0
      README.md
  2. 0 0
      dist/alpine.js
  3. 0 0
      dist/alpine.js.map
  4. 0 0
      dist/alpine.mjs
  5. 0 0
      dist/alpine.mjs.map
  6. 0 0
      dist/alpine.umd.js
  7. 0 0
      dist/alpine.umd.js.map
  8. 3 5
      src/component.js
  9. 18 0
      test/on.spec.js

+ 2 - 0
README.md

@@ -226,6 +226,8 @@ Adding `.stop` to an event listener will call `stopPropagation` on the triggered
 
 Adding `.window` to an event listener will install the listener on the global window object instead of the DOM node on which it is declared. This is useful for when you want to modify component state when something changes with the window, like the resize event. In this example, when the window grows larger than 768 pixels wide, we will close the modal/dropdown, otherwise maintain the same state.
 
+>Note: You can also use the `.document` modifier to attach listeners to `document` instead of `window`
+
 **`.once` modifier**
 **Example:** `<button x-on:mouseenter.once="fetchSomething()"></button>`
 

A különbségek nem kerülnek megjelenítésre, a fájl túl nagy
+ 0 - 0
dist/alpine.js


A különbségek nem kerülnek megjelenítésre, a fájl túl nagy
+ 0 - 0
dist/alpine.js.map


A különbségek nem kerülnek megjelenítésre, a fájl túl nagy
+ 0 - 0
dist/alpine.mjs


A különbségek nem kerülnek megjelenítésre, a fájl túl nagy
+ 0 - 0
dist/alpine.mjs.map


A különbségek nem kerülnek megjelenítésre, a fájl túl nagy
+ 0 - 0
dist/alpine.umd.js


A különbségek nem kerülnek megjelenítésre, a fájl túl nagy
+ 0 - 0
dist/alpine.umd.js.map


+ 3 - 5
src/component.js

@@ -232,13 +232,11 @@ export default class Component {
             document.addEventListener(event, handler)
         } else {
             const listenerTarget = modifiers.includes('window')
-                ? window
-                : modifiers.includes('document')
-                ? document
-                : el
+                ? window : (modifiers.includes('document') ? document : el)
 
             const handler = e => {
-                const modifiersWithoutWindow = modifiers.filter(i => i !== 'window')
+                const modifiersWithoutWindowOrDocument = modifiers
+                    .filter(i => i !== 'window').filter(i => i !== 'document')
 
                 if (event === 'keydown' && modifiersWithoutWindow.length > 0 && ! modifiersWithoutWindow.includes(kebabCase(e.key))) return
 

+ 18 - 0
test/on.spec.js

@@ -97,6 +97,24 @@ test('.window modifier', async () => {
     await wait(() => { expect(document.querySelector('span').getAttribute('foo')).toEqual('baz') })
 })
 
+test('.document modifier', async () => {
+    document.body.innerHTML = `
+        <div x-data="{ foo: 'bar' }">
+            <div x-on:click.document="foo = 'baz'"></div>
+
+            <span x-bind:foo="foo"></span>
+        </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('span').getAttribute('foo')).toEqual('bar')
+
+    document.body.click()
+
+    await wait(() => { expect(document.querySelector('span').getAttribute('foo')).toEqual('baz') })
+})
+
 test('.once modifier', async () => {
     document.body.innerHTML = `
         <div x-data="{ count: 0 }">

Nem az összes módosított fájl került megjelenítésre, mert túl sok fájl változott