Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature Request - Cross-platform "modify" for keydown filter. #654

Open
bennadel opened this issue Feb 8, 2023 · 2 comments · May be fixed by #715
Open

Feature Request - Cross-platform "modify" for keydown filter. #654

bennadel opened this issue Feb 8, 2023 · 2 comments · May be fixed by #715

Comments

@bennadel
Copy link

bennadel commented Feb 8, 2023

I believe there is a common pattern to modify some keydown events using a different key on Mac and Windows operating systems. The one I see most commonly is using CMD+Enter on Mac and CTRL+Enter on Windows in order to submit a form while typing in a textarea.

I know that the data-action attribute on an element can take multiple actions; so, I could, in theory, achieve this as follows:

<form data-controller="demo">
    <textarea data-action="
        keydown.meta+enter->demo#submit
        keydown.ctrl+enter->demo#submit
    "></textarea>
</form>

But, considering that I'd want to use this pattern in many places, this seems verbose.

My next thought was to register a custom keydown filter - mod - as follows:

var macOsPattern = /Mac|iPod|iPhone|iPad/;

// Map the "mod" filter pattern to the OS-specific key.
defaultSchema.keyMappings[ "mod" ] = macOsPattern.test( window.navigator.platform )
	? "meta"
	: "ctrl"
;

window.Stimulus = Application.start( document.documentElement, defaultSchema );

... with the hope being that I could use something like keydown.mod+enter where it would be evaluated as meta+enter on Mac and ctrl+enter on Windows. But, unfortunately, it looks like modifier keys are handled separately from the custom key mappings.

So, my thought would be to have Stimulus add a new modifier call mod or modify that would be the cross-platform evaluation.

Anyway, just throwing that out there. I raised it on the Hotwired community forum, and I tried Googling for it, and I didn't see anyone discussing this anywhere.
@lb- lb- mentioned this issue Feb 27, 2023
Closed
5 tasks
@lb-
Copy link
Contributor

lb- commented Aug 20, 2023

Additional links and implementations for reference.

We could use $mod to differentiate between this and others being 'plain JS'. Similar to how Tinykeys does it. It also paves the way for other custom modifier keys in the future, prefixed with $.

This may make it harder to use that symbol for some other seperator in the future though.

Alpine.js

Interestingly, Alpine.js does not have this feature - https://alpinejs.dev/directives/on#keyboard-events

Hotkey

Not implemented, but has a PR up for this capability.
github/hotkey#66

Hotkey-js

https://github.com/jaywcjlove/hotkeys-js
Not supported, but can be added with registration it seems.
https://github.com/jaywcjlove/hotkeys-js/issues/390

Mousetrap

Mousetrap 1.4 introduced a generic mod helper which lets you set cross platform shortcuts.
Mousetrap.bind('mod+s', _saveDraft);
On Mac this ends up mapping to command+s whereas on Windows and Linux it maps to ctrl+s.

https://github.com/ccampbell/mousetrap/blob/2f9a476ba6158ba69763e4fcf914966cc72ef433/mousetrap.js#L135

https://craig.is/killing/mice

Tinykeys

There is also a special $mod modifier that makes it easy to support cross platform keybindings:
Mac: $mod = Meta (⌘)
Windows/Linux: $mod = Control

https://github.com/jamiebuilds/tinykeys/blob/111955cb6604fb5b8c4f152cb75b7f2cb63da913/src/tinykeys.ts#L53-57

https://github.com/jamiebuilds/tinykeys#keybinding-syntax

lb- added a commit to lb-/stimulus that referenced this issue Aug 20, 2023
@lb-
Add support for mod key to be dynamic based on Mac/Windows
cd03c7e 
- Adds `mod` to the `defaultSchema` which will resolve to `Meta` on a MacOS like device and `Control` on Windows like
- Allows `mod` to be overridden at the schema keyMappings level if needed and used as a standalone key
- Uses `mod` to be used as a key filter modifier for either `metaKey` or `ctrlKey` based on the resolved value
- Add unit tests and documentation for the `mod` key, and an example to the slideshow page
- Closes hotwired#654
@lb- lb- linked a pull request Aug 20, 2023 that will close this issue
Open
3 tasks
@lb-
Copy link
Contributor

lb- commented Aug 20, 2023

PR up to implement this feature #715

lb- added a commit to lb-/stimulus that referenced this issue Aug 21, 2023
@lb-
Add support for mod key to be dynamic based on Mac/Windows
9f433fb 
- Adds `mod` to the `defaultSchema` which will resolve to `Meta` on a MacOS like device and `Control` on Windows like
- Allows `mod` to be overridden at the schema keyMappings level if needed and used as a standalone key
- Uses `mod` to be used as a key filter modifier for either `metaKey` or `ctrlKey` based on the resolved value
- Add unit tests and documentation for the `mod` key, and an example to the slideshow page
- Closes hotwired#654
lb- added a commit to lb-/stimulus that referenced this issue Aug 21, 2023
@lb-
Add support for mod key to be dynamic based on Mac/Windows
6b3291c 
- Adds `mod` to the `defaultSchema` which will resolve to `Meta` on a MacOS like device and `Control` on Windows like
- Uses `mod` to be used as a key filter modifier for either `metaKey` or `ctrlKey` based on the resolved value
- Add unit tests and documentation for the `mod` key, and an example to the slideshow page
- Closes hotwired#654
lb- added a commit to lb-/stimulus that referenced this issue Aug 21, 2023
@lb-
Add support for mod key to be dynamic based on Mac/Windows
3687a9f 
- Adds `getModKey` to the `defaultSchema` which will resolve to `Meta` on a MacOS like device and `Control` on Windows like
- Uses `mod` to be used as a key filter modifier for either `metaKey` or `ctrlKey` based on the resolved value
- Add unit tests and documentation for the `mod` key, and an example to the slideshow page
- Closes hotwired#654
lb- added a commit to lb-/stimulus that referenced this issue Aug 21, 2023
@lb-
Add support for mod key to be dynamic based on Mac/Windows
9747530 
- Adds `getModKey` to the `defaultSchema` which will resolve to `Meta` on a MacOS like device and `Control` on Windows like
- Uses `mod` to be used as a key filter modifier for either `metaKey` or `ctrlKey` based on the resolved value
- Add unit tests and documentation for the `mod` key, and an example to the slideshow page
- Closes hotwired#654
lb- added a commit to lb-/stimulus that referenced this issue Feb 7, 2024
@lb-
Add support for mod key to be dynamic based on Mac/Windows
1a67215 
- Adds `getModKey` to the `defaultSchema` which will resolve to `Meta` on a MacOS like device and `Control` on Windows like
- Uses `mod` to be used as a key filter modifier for either `metaKey` or `ctrlKey` based on the resolved value
- Add unit tests and documentation for the `mod` key, and an example to the slideshow page
- Closes hotwired#654
lb- added a commit to lb-/stimulus that referenced this issue Feb 7, 2024
@lb-
Add support for mod key to be dynamic based on Mac/Windows
b59ab24 
- Adds `mod` to the `defaultSchema` which will resolve to `Meta` on a MacOS like device and `Control` on Windows like
- Uses `mod` to be used as a key filter modifier for either `metaKey` or `ctrlKey` based on the resolved value
- Add unit tests and documentation for the `mod` key, and an example to the slideshow page
- Closes hotwired#654
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add support for mod key to be dynamic based on Mac/Windows lb-/stimulus
2 participants
@bennadel @lb-