mirrors/wagtail
mirrors/wagtail
0
0
Fork 0
mirror of https://github.com/wagtail/wagtail.git synced 2024-11-25 05:02:57 +01:00
Code Issues Releases Wiki Activity

Added ability to make keyboard shortcut Global

Browse Source 
Add `w-kbd-scope-value` with support for `global` so that specific keyboard shortcuts (e.g. ctrl+s/cmd+s) can be used consistently even when focused on fields.

Fixes #11844
This commit is contained in:
Neeraj P Yetheendran 2024-04-16 21:16:34 +05:30 committed by LB (Ben Johnston)
parent b8ce8f7739
commit 4bf966537a
13 changed files with 55 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.txt
View File

@ -48,6 +48,7 @@ Changelog
* Fix: Fix timezone handling in the `timesince_last_update` template tag (Matt Westcott)
* Fix: Fix Postgres phrase search to respect the language set in settings (Ihar Marhitych)
* Fix: Retain query parameters when switching between locales in the page chooser (Abdelrahman Hamada, Sage Abdullah)
* Fix: Add `w-kbd-scope-value` with support for `global` so that specific keyboard shortcuts (e.g. ctrl+s/cmd+s) trigger consistently even when focused on fields (Neeraj Yetheendran)
* Docs: Add contributing development documentation on how to work with a fork of Wagtail (Nix Asteri, Dan Braghis)
* Docs: Make sure the settings panel is listed in tabbed interface examples (Tibor Leupold)
* Docs: Update content and page names to their US spelling instead of UK spelling (Victoria Poromon)

30
client/src/controllers/KeyboardController.test.js
View File

@ -126,4 +126,34 @@ describe('KeyboardController', () => {
expect(buttonClickMock).toHaveBeenCalledTimes(1);
});
});
describe('keyboard shortcut with scope value', () => {
it('should fail when the scope value is not global', async () => {
expect(buttonClickMock).not.toHaveBeenCalled();
await setup(`
<button id="btn" data-controller="w-kbd" data-w-kbd-key-value="j">Go</button>
<input type="text" id="input">
`);
// Simulate keydown while target is text input
simulateKey({ key: 'j' }, document.getElementById('input'));
expect(buttonClickMock).not.toHaveBeenCalled();
});
it('should set the scope value to global when specified', async () => {
expect(buttonClickMock).not.toHaveBeenCalled();
await setup(`
<button id="btn" data-controller="w-kbd" data-w-kbd-key-value="j" data-w-kbd-scope-value="global">Go</button>
<input type="text" id="input">
`);
// Simulate keydown while target is text input
simulateKey({ key: 'j' }, document.getElementById('input'));
expect(buttonClickMock).toHaveBeenCalledTimes(1);
});
});
});

16
client/src/controllers/KeyboardController.ts
View File

@ -1,6 +1,9 @@
import { Controller } from '@hotwired/stimulus';
import Mousetrap from 'mousetrap';
// import with side-effect to add global-bind plugin (see https://github.com/ccampbell/mousetrap/tree/master/plugins/global-bind)
import 'mousetrap/plugins/global-bind/mousetrap-global-bind';
/**
* Adds the ability to trigger a button click event using a
* keyboard shortcut declared on the controlled element.
@ -21,10 +24,15 @@ import Mousetrap from 'mousetrap';
export class KeyboardController extends Controller<
HTMLButtonElement | HTMLAnchorElement
> {
static values = { key: { default: '', type: String } };
static values = {
key: { default: '', type: String },
scope: { default: '', type: String },
};
/** Keyboard shortcut string. */
declare keyValue: string;
/** Scope of the keyboard shortcut, defaults to the normal MouseTrap (non-input) scope. */
declare scopeValue: '' | 'global';
initialize() {
this.handleKey = this.handleKey.bind(this);
@ -50,6 +58,10 @@ export class KeyboardController extends Controller<
Mousetrap.unbind(previousKey);
}
Mousetrap.bind(key, this.handleKey);
if (this.scopeValue === 'global') {
Mousetrap.bindGlobal(key, this.handleKey);
} else {
Mousetrap.bind(key, this.handleKey);
}
}
}

1
docs/releases/6.1.md
View File

@ -63,6 +63,7 @@ depth: 1
* Fix timezone handling in the `timesince_last_update` template tag (Matt Westcott)
* Fix Postgres phrase search to respect the language set in settings (Ihar Marhitych)
* Retain query parameters when switching between locales in the page chooser (Abdelrahman Hamada, Sage Abdullah)
* Add `w-kbd-scope-value` with support for `global` so that specific keyboard shortcuts (e.g. ctrl+s/cmd+s) trigger consistently even when focused on fields (Neeraj Yetheendran)
### Documentation

1
wagtail/admin/templates/wagtailadmin/pages/action_menu/save_draft.html
View File

@ -5,6 +5,7 @@
data-controller="w-progress w-kbd"
data-action="w-progress#activate"
data-w-kbd-key-value="mod+s"
data-w-kbd-scope-value="global"
data-w-progress-active-value="{% trans 'Saving…' %}"
>
{% icon name="draft" classname="button-longrunning__icon" %}

1
wagtail/admin/templates/wagtailadmin/panels/publishing/schedule_publishing_panel.html
View File

@ -24,6 +24,7 @@
data-controller="w-progress w-kbd"
data-action="w-progress#activate"
data-w-kbd-key-value="mod+s"
data-w-kbd-scope-value="global"
data-w-progress-active-value="{% trans 'Saving…' %}"
>
<em data-w-progress-target="label">{% trans 'Save schedule' %}</em>

2
wagtail/admin/templates/wagtailadmin/shared/side_panel_toggle.html
View File

@ -6,7 +6,7 @@
aria-expanded="false"
data-controller="w-tooltip{% if toggle.keyboard_shortcut %} w-kbd{% endif %}"
data-side-panel-toggle="{{ panel.name }}"
{% if toggle.keyboard_shortcut %}data-w-kbd-key-value="{{ toggle.keyboard_shortcut }}"{% endif %}
{% if toggle.keyboard_shortcut %}data-w-kbd-key-value="{{ toggle.keyboard_shortcut }}" data-w-kbd-scope-value="global"{% endif %}
data-w-tooltip-content-value="{{ panel.title }}"
data-w-tooltip-offset-value="[0, 0]"
>

1
wagtail/admin/templates/wagtailadmin/workflows/create.html
View File

@ -29,6 +29,7 @@
data-controller="w-progress w-kbd"
data-action="w-progress#activate"
data-w-kbd-key-value="mod+s"
data-w-kbd-scope-value="global"
data-w-progress-active-value="{% trans 'Creating…' %}"
>
{% icon name="spinner" %}

1
wagtail/admin/templates/wagtailadmin/workflows/create_task.html
View File

@ -25,6 +25,7 @@
data-controller="w-progress w-kbd"
data-action="w-progress#activate"
data-w-kbd-key-value="mod+s"
data-w-kbd-scope-value="global"
data-w-progress-active-value="{% trans 'Creating…' %}"
>
{% icon name="spinner" %}

1
wagtail/admin/templates/wagtailadmin/workflows/edit.html
View File

@ -53,6 +53,7 @@
data-controller="w-progress w-kbd"
data-action="w-progress#activate"
data-w-kbd-key-value="mod+s"
data-w-kbd-scope-value="global"
data-w-progress-active-value="{% trans 'Saving…' %}"
>
{% icon name="spinner" %}

1
wagtail/admin/templates/wagtailadmin/workflows/edit_task.html
View File

@ -37,6 +37,7 @@
data-controller="w-progress w-kbd"
data-action="w-progress#activate"
data-w-kbd-key-value="mod+s"
data-w-kbd-scope-value="global"
data-w-progress-active-value="{% trans 'Saving…' %}"
>
{% icon name="spinner" %}

1
wagtail/snippets/templates/wagtailsnippets/snippets/action_menu/publish.html
View File

@ -7,6 +7,7 @@
data-controller="w-progress w-kbd"
data-action="w-progress#activate"
data-w-kbd-key-value="mod+s"
data-w-kbd-scope-value="global"
data-w-progress-active-value="{% trans 'Publishing…' %}"
>
{% icon name=icon_name classname="button-longrunning__icon" %}

1
wagtail/snippets/templates/wagtailsnippets/snippets/action_menu/save.html
View File

@ -5,6 +5,7 @@
data-controller="w-progress w-kbd"
data-action="w-progress#activate"
data-w-kbd-key-value="mod+s"
data-w-kbd-scope-value="global"
data-w-progress-active-value="{% trans 'Saving…' %}"
>
{% if draftstate_enabled %}