소스 검색

Add .document event modifier

Caleb Porzio 5 년 전
부모
커밋
83807e0dcb
9개의 변경된 파일23개의 추가작업 그리고 5개의 파일을 삭제
  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>`
 

파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 0 - 0
dist/alpine.js


파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 0 - 0
dist/alpine.js.map


파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 0 - 0
dist/alpine.mjs


파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 0 - 0
dist/alpine.mjs.map


파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 0 - 0
dist/alpine.umd.js


파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 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 }">

이 변경점에서 너무 많은 파일들이 변경되어 몇몇 파일들은 표시되지 않았습니다.