pinafore/tests/unit/test-shortcuts.mjs

251 lines
6.5 KiB
JavaScript
Raw Normal View History

feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 18:03:29 +00:00
/* global describe, it, beforeEach, afterEach */
import {
initShortcuts,
addShortcutFallback,
addToShortcutScope,
onKeyDownInShortcutScope,
popShortcutScope,
pushShortcutScope,
2019-08-20 02:08:59 +00:00
removeFromShortcutScope
} from '../../src/routes/_utils/shortcuts.js'
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 18:03:29 +00:00
import assert from 'assert'
function KeyDownEvent (key) {
this.key = key
this.metaKey = false
this.ctrlKey = false
this.shiftKey = false
this.altKey = false
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 18:03:29 +00:00
this.target = null
}
function Component (keyDownFunction) {
this.lastEvent = null
this.eventCount = 0
this.onKeyDown = function (event) {
this.lastEvent = event
this.eventCount++
}
this.pressed = function () {
return this.eventCount > 0
}
this.notPressed = function () {
return this.eventCount === 0
}
}
describe('test-shortcuts.js', function () {
let eventListener
let originalWindow
beforeEach(function () {
originalWindow = global.window
global.window = {
addEventListener: function (eventname, listener) {
assert.strictEqual(eventname, 'keydown')
eventListener = listener
},
removeEventListener: function (eventname, listener) {
assert.strictEqual(eventname, 'keydown')
if (listener === eventListener) {
eventListener = null
}
}
}
initShortcuts()
})
afterEach(function () {
global.window = originalWindow
})
it('sets and unsets event listener', function () {
2019-08-03 20:49:37 +00:00
const component = new Component()
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 18:03:29 +00:00
addToShortcutScope('global', 'k', component)
assert(eventListener != null, 'event listener not set')
removeFromShortcutScope('global', 'k', component)
assert(eventListener == null, 'event listener not reset')
})
it('forwards the right global key event', function () {
2019-08-03 20:49:37 +00:00
const component = new Component()
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 18:03:29 +00:00
addToShortcutScope('global', 'k', component)
eventListener(new KeyDownEvent('l'))
assert.ok(component.notPressed())
2019-08-03 20:49:37 +00:00
const kEvent = new KeyDownEvent('k')
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 18:03:29 +00:00
eventListener(kEvent)
assert.ok(component.pressed())
assert.strictEqual(component.lastEvent, kEvent)
})
it('register multiple keys', function () {
2019-08-03 20:49:37 +00:00
const lmn = new Component()
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 18:03:29 +00:00
addToShortcutScope('global', 'l|m|n', lmn)
eventListener(new KeyDownEvent('x'))
assert.strictEqual(lmn.eventCount, 0)
eventListener(new KeyDownEvent('m'))
assert.strictEqual(lmn.eventCount, 1)
eventListener(new KeyDownEvent('l'))
assert.strictEqual(lmn.eventCount, 2)
eventListener(new KeyDownEvent('n'))
assert.strictEqual(lmn.eventCount, 3)
})
it('skips events with modifiers', function () {
2019-08-03 20:49:37 +00:00
const component = new Component()
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 18:03:29 +00:00
addToShortcutScope('global', 'k', component)
let kEvent = new KeyDownEvent('k')
kEvent.shiftKey = true
eventListener(kEvent)
assert.ok(component.notPressed())
kEvent = new KeyDownEvent('k')
kEvent.ctrlKey = true
eventListener(kEvent)
assert.ok(component.notPressed())
kEvent = new KeyDownEvent('k')
kEvent.metaKey = true
eventListener(kEvent)
assert.ok(component.notPressed())
})
it('does not skip events for ?', function () {
2019-08-03 20:49:37 +00:00
const component = new Component()
addToShortcutScope('global', '?', component)
2019-08-03 20:49:37 +00:00
const qEvent = new KeyDownEvent('?')
qEvent.shiftKey = true
eventListener(qEvent)
assert.ok(component.pressed())
})
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 18:03:29 +00:00
it('skips events for editable elements', function () {
2019-08-03 20:49:37 +00:00
const component = new Component()
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 18:03:29 +00:00
addToShortcutScope('global', 'k', component)
2019-08-03 20:49:37 +00:00
const kEvent = new KeyDownEvent('k')
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 18:03:29 +00:00
kEvent.target = { isContentEditable: true }
eventListener(kEvent)
assert.ok(component.notPressed())
})
it('handles multi-key events', function () {
2019-08-03 20:49:37 +00:00
const a = new Component()
const ga = new Component()
const gb = new Component()
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 18:03:29 +00:00
addToShortcutScope('global', 'a', a)
addToShortcutScope('global', 'g a', ga)
addToShortcutScope('global', 'g b', gb)
eventListener(new KeyDownEvent('g'))
eventListener(new KeyDownEvent('a'))
assert.ok(ga.pressed())
assert.ok(gb.notPressed())
assert.ok(a.notPressed())
})
it('falls back to single-key events if no sequence matches', function () {
2019-08-03 20:49:37 +00:00
const b = new Component()
const ga = new Component()
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 18:03:29 +00:00
addToShortcutScope('global', 'b', b)
addToShortcutScope('global', 'g a', ga)
eventListener(new KeyDownEvent('g'))
eventListener(new KeyDownEvent('b'))
assert.ok(b.pressed())
assert.ok(ga.notPressed())
})
it('sends unhandled events to fallback', function () {
2019-08-03 20:49:37 +00:00
const fallback = new Component()
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 18:03:29 +00:00
addToShortcutScope('global', 'b', new Component())
addShortcutFallback('global', fallback)
eventListener(new KeyDownEvent('x'))
assert.ok(fallback.pressed())
})
it('directs events to appropriate component in arbitrary scope', function () {
2019-08-03 20:49:37 +00:00
const globalB = new Component()
const inScopeB = new Component()
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 18:03:29 +00:00
addToShortcutScope('global', 'b', globalB)
addToShortcutScope('inscope', 'b', inScopeB)
onKeyDownInShortcutScope('inscope', new KeyDownEvent('b'))
assert.ok(inScopeB.pressed())
assert.ok(globalB.notPressed())
})
it('makes shortcuts modal', function () {
2019-08-03 20:49:37 +00:00
const globalA = new Component()
const globalB = new Component()
const modal1A = new Component()
const modal2A = new Component()
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 18:03:29 +00:00
addToShortcutScope('global', 'a', globalA)
addToShortcutScope('global', 'b', globalB)
addToShortcutScope('modal1', 'a', modal1A)
addToShortcutScope('modal2', 'a', modal2A)
pushShortcutScope('modal1')
pushShortcutScope('modal2')
eventListener(new KeyDownEvent('b'))
assert.ok(globalB.notPressed())
eventListener(new KeyDownEvent('a'))
assert.ok(globalA.notPressed())
assert.ok(modal1A.notPressed())
assert.ok(modal2A.pressed())
popShortcutScope('modal2')
eventListener(new KeyDownEvent('a'))
assert.ok(globalA.notPressed())
assert.ok(modal1A.pressed())
popShortcutScope('modal1')
eventListener(new KeyDownEvent('a'))
assert.ok(globalA.pressed())
})
it('ignores alt key', function () {
2019-08-03 20:49:37 +00:00
const component = new Component()
addToShortcutScope('global', '1', component)
2019-08-03 20:49:37 +00:00
const event = new KeyDownEvent('1')
event.altKey = true
eventListener(event)
assert.ok(component.notPressed())
})
it('works with caps lock on', function () {
const lmn = new Component()
addToShortcutScope('global', 'z', lmn)
assert.strictEqual(lmn.eventCount, 0)
eventListener(new KeyDownEvent('z'))
assert.strictEqual(lmn.eventCount, 1)
eventListener(new KeyDownEvent('Z'))
assert.strictEqual(lmn.eventCount, 2)
})
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 18:03:29 +00:00
})