Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/github/hotkey into theinter…
Browse files Browse the repository at this point in the history
…ned/mod-character
  • Loading branch information
iansan5653 authored Oct 9, 2023
2 parents 9171795 + aa78cee commit 730ed3e
Show file tree
Hide file tree
Showing 19 changed files with 1,429 additions and 194 deletions.
16 changes: 16 additions & 0 deletions .devcontainer/Dockerfile
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.222.0/containers/javascript-node/.devcontainer/base.Dockerfile

# [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 16, 14, 12, 16-bullseye, 14-bullseye, 12-bullseye, 16-buster, 14-buster, 12-buster
ARG VARIANT="16"
FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}

# [Optional] Uncomment this section to install additional OS packages.
# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
# && apt-get -y install --no-install-recommends <your-package-list-here>

# [Optional] Uncomment if you want to install an additional version of node using nvm
# ARG EXTRA_NODE_VERSION=10
# RUN su node -c "source/usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"

# [Optional] Uncomment if you want to install more global node modules
# RUN su node -c "npm install -g <your-package-list-here>"
32 changes: 32 additions & 0 deletions .devcontainer/devcontainer.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.222.0/containers/javascript-node
{
"name": "Node.js",
"build": {
"dockerfile": "Dockerfile",
// Update 'VARIANT' to pick a Node version: 16, 14, 12.
// Append -bullseye or -buster to pin to an OS version.
// Use -bullseye variants on local arm64/Apple Silicon.
"args": { "VARIANT": "16" }
},

// Set *default* container specific settings.json values on container create.
"settings": {},

// Add the IDs of extensions you want installed when the container is created.
"extensions": [
"dbaeumer.vscode-eslint"
],

// Use 'forwardPorts' to make a list of ports inside the container available locally.
// "forwardPorts": [],

// Use 'postCreateCommand' to run commands after the container is created.
// "postCreateCommand": "yarn install",

// Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
"remoteUser": "node",
"features": {
"git": "latest"
}
}
50 changes: 50 additions & 0 deletions .github/workflows/publish-pages.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
name: Publish Pages site

on:
push:
branches:
- master

jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3

- uses: actions/setup-node@v3
with:
node-version: 12.x

- run: npm install

- run: npm run build

- name: Copy files
run: |
mkdir _site
cp -r pages _site
cp -r dist _site
- name: Fix permissions
run: |
chmod -c -R +rX "_site/" | while read line; do
echo "::warning title=Invalid file permissions automatically fixed::$line"
done
- uses: actions/upload-pages-artifact@v2

deploy:
needs: build

permissions:
pages: write
id-token: write

environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}

runs-on: ubuntu-latest
steps:
- id: deployment
uses: actions/deploy-pages@v2
24 changes: 24 additions & 0 deletions .github/workflows/publish.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
name: Publish

on:
release:
types: [created]

jobs:
publish-npm:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 14
registry-url: https://registry.npmjs.org/
cache: npm
- run: npm ci
- run: npm test
- run: npm version ${TAG_NAME} --git-tag-version=false
env:
TAG_NAME: ${{ github.event.release.tag_name }}
- run: npm whoami; npm --ignore-scripts publish
env:
NODE_AUTH_TOKEN: ${{secrets.npm_token}}
75 changes: 0 additions & 75 deletions .github/workflows/release.yml

This file was deleted.

1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
node_modules/
dist/
_site/
31 changes: 30 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,20 @@
<button data-hotkey="Shift+?">Show help dialog</button>
```

Trigger an action on a target element when a key, or sequence of keys, is pressed
Trigger an action on a target element when the hotkey (key or sequence of keys) is pressed
on the keyboard. This triggers a focus event on form fields, or a click event on
other elements.

The hotkey can be scoped to a form field:

```html
<button data-hotkey-scope="text-area" data-hotkey="Meta+d" onclick="alert('clicked')">
press meta+d in text area to click this button
</button>

<textarea id="text-area">text area</textarea>
```

By default, hotkeys are extracted from a target element's `data-hotkey`
attribute, but this can be overridden by passing the hotkey to the registering
function (`install`) as a parameter.
Expand Down Expand Up @@ -70,6 +80,24 @@ for (const el of document.querySelectorAll('[data-hotkey]')) {
}
```

By default form elements (such as `input`,`textarea`,`select`) or elements with `contenteditable` will call `focus()` when the hotkey is triggered. All other elements trigger a `click()`. All elements, regardless of type, will emit a cancellable `hotkey-fire` event, so you can customize the behaviour, if you so choose:

```js
for (const el of document.querySelectorAll('[data-shortcut]')) {
install(el, el.dataset.shortcut)

if (el.matches('.frobber')) {
el.addEventListener('hotkey-fire', event => {
// ensure the default `focus()`/`click()` is prevented:
event.preventDefault()

// Use a custom behaviour instead
frobulateFrobber(event.target)
})
}
}
```

## Hotkey string format

1. Hotkey matches against the `event.key`, and uses standard W3C key names for keys and modifiers as documented in [UI Events KeyboardEvent key Values](https://www.w3.org/TR/uievents-key/).
Expand All @@ -81,6 +109,7 @@ for (const el of document.querySelectorAll('[data-hotkey]')) {
1. `"Mod+"` can appear in any order in a hotkey string. For example: `"Mod+Alt+Shift+KEY"`
2. Neither the `Control` or `Meta` modifiers should appear in a hotkey string with `Mod`.
3. Due to the inconsistent lowercasing of `event.key` on Mac and iOS when `Meta` is pressed along with `Shift`, it is recommended to avoid hotkey strings containing both `Mod` and `Shift`.
7. You can use the comma key `,` as a hotkey, e.g. `a,,` would activate if the user typed `a` or `,`. `Control+,,x` would activate for `Control+,` or `x`.

### Example

Expand Down
61 changes: 0 additions & 61 deletions examples/hotkey_mapper.html

This file was deleted.

33 changes: 0 additions & 33 deletions examples/index.html

This file was deleted.

2 changes: 2 additions & 0 deletions karma.config.cjs
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
process.env.CHROME_BIN = require('chromium').path

module.exports = function (config) {
config.set({
frameworks: ['mocha', 'chai'],
Expand Down
Loading

0 comments on commit 730ed3e

Please sign in to comment.