Add system-modifier key-combo listeners

calebporzio · calebporzio · commit 5ae7b85cf49c · 2020-01-14T17:07:22.000-05:00
diff --git a/README.md b/README.md
@@ -14,7 +14,7 @@ Think of it like [Tailwind](https://tailwindcss.com/) for JavaScript.
 
 **From CDN:** Add the following script to the end of your `<head>` section.
 ```html
-<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.8.1/dist/alpine.js" defer></script>
+<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.8.2/dist/alpine.js" defer></script>
 ```
 
 That's it. It will initialize itself.
@@ -234,6 +234,8 @@ You can specify specific keys to listen for using keydown modifiers appended to
 
 Examples: `enter`, `escape`, `arrow-up`, `arrow-down`
 
+> Note: You can also listen for system-modifier key combinations like: `x-on:keydown.cmd.enter="foo"`
+
 **`.away` modifier**
 
 **Example:** `<div x-on:click.away="showModal = false"></div>`
diff --git a/dist/alpine.js b/dist/alpine.js
diff --git a/dist/alpine.js.map b/dist/alpine.js.map
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "main": "dist/alpine.js",
   "name": "alpinejs",
-  "version": "1.8.1",
+  "version": "1.8.2",
   "repository": {
     "type": "git",
     "url": "git://github.com/alpinejs/alpine.git"
diff --git a/src/component.js b/src/component.js
@@ -294,10 +294,28 @@ export default class Component {
                 ? window : (modifiers.includes('document') ? document : el)
 
             const handler = e => {
-                const modifiersWithoutWindowOrDocument = modifiers
-                    .filter(i => i !== 'window').filter(i => i !== 'document')
+                const keyModifiers = modifiers.filter(i => i !== 'window').filter(i => i !== 'document')
 
-                if (event === 'keydown' && modifiersWithoutWindowOrDocument.length > 0 && ! modifiersWithoutWindowOrDocument.includes(keyToModifier(e.key))) return
+                // The user is scoping the keydown listener to a specific key using modifiers.
+                if (event === 'keydown' && keyModifiers.length > 0) {
+                    // The user is listening for a specific key.
+                    if (keyModifiers.length === 1 && ! keyModifiers.includes(keyToModifier(e.key))) return
+
+                    // The user is listening for key combinations.
+                    const systemKeyModifiers = ['ctrl', 'shift', 'alt', 'meta', 'cmd', 'super']
+                    const selectedSystemKeyModifiers = systemKeyModifiers.filter(modifier => keyModifiers.includes(modifier))
+
+                    if (selectedSystemKeyModifiers.length > 0) {
+                        const activelyPressedKeyModifiers = selectedSystemKeyModifiers.filter(modifier => {
+                            // Alias "cmd" and "super" to "meta"
+                            if (modifier === 'cmd' || modifier === 'super') modifier = 'meta'
+
+                            return e[`${modifier}Key`]
+                        })
+
+                        if (activelyPressedKeyModifiers.length === 0) return
+                    }
+                }
 
                 if (modifiers.includes('prevent')) e.preventDefault()
                 if (modifiers.includes('stop')) e.stopPropagation()
diff --git a/test/on.spec.js b/test/on.spec.js
@@ -169,6 +169,28 @@ test('keydown modifiers', async () => {
     await wait(() => { expect(document.querySelector('span').innerText).toEqual(7) })
 })
 
+test('keydown combo modifiers', async () => {
+    document.body.innerHTML = `
+        <div x-data="{ count: 0 }">
+            <input type="text" x-on:keydown.cmd.enter="count++">
+
+            <span x-text="count"></span>
+        </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('span').innerText).toEqual(0)
+
+    fireEvent.keyDown(document.querySelector('input'), { key: 'Enter' })
+
+    await wait(() => { expect(document.querySelector('span').innerText).toEqual(0) })
+
+    fireEvent.keyDown(document.querySelector('input'), { key: 'Enter', metaKey: true })
+
+    await wait(() => { expect(document.querySelector('span').innerText).toEqual(1) })
+})
+
 test('click away', async () => {
     // Because jsDom doesn't support .offsetHeight and offsetWidth, we have to
     // make our own implementation using a specific class added to the class. Ugh.

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"main": "dist/alpine.js",`
`3`	`3`	`"name": "alpinejs",`
`4`		`- "version": "1.8.1",`
	`4`	`+ "version": "1.8.2",`
`5`	`5`	`"repository": {`
`6`	`6`	`"type": "git",`
`7`	`7`	`"url": "git://github.com/alpinejs/alpine.git"`