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 {
|
2019-09-23 07:53:29 +01:00
|
|
|
disableHotkeys,
|
|
|
|
getActiveElementAriaLabel,
|
2019-03-18 16:09:24 +00:00
|
|
|
getNthStatus,
|
2019-09-23 07:53:29 +01:00
|
|
|
getUrl, homeNavButton, isNthStatusActive, leftRightChangesFocus, modalDialog,
|
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
|
|
|
modalDialogContents,
|
2019-09-23 07:53:29 +01:00
|
|
|
notificationsNavButton, scrollToStatus, settingsNavButton, sleep
|
2019-03-18 16:09:24 +00:00
|
|
|
} from '../utils'
|
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 { loginAsFoobar } from '../roles'
|
2019-09-23 07:53:29 +01:00
|
|
|
import { Selector as $ } from 'testcafe'
|
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
|
|
|
|
|
|
|
fixture`024-shortcuts-navigation.js`
|
|
|
|
.page`http://localhost:4002`
|
|
|
|
|
|
|
|
test('Shortcut g+l goes to the local timeline', async t => {
|
|
|
|
await loginAsFoobar(t)
|
|
|
|
await t
|
|
|
|
.expect(getUrl()).eql('http://localhost:4002/')
|
|
|
|
.pressKey('g l')
|
|
|
|
.expect(getUrl()).contains('/local')
|
|
|
|
})
|
|
|
|
|
|
|
|
test('Shortcut g+t goes to the federated timeline', async t => {
|
|
|
|
await loginAsFoobar(t)
|
|
|
|
await t
|
|
|
|
.expect(getUrl()).eql('http://localhost:4002/')
|
|
|
|
.pressKey('g t')
|
|
|
|
.expect(getUrl()).contains('/federated')
|
|
|
|
})
|
|
|
|
|
|
|
|
test('Shortcut g+h goes back to the home timeline', async t => {
|
|
|
|
await loginAsFoobar(t)
|
|
|
|
await t
|
|
|
|
.expect(getUrl()).eql('http://localhost:4002/')
|
|
|
|
.click(notificationsNavButton)
|
|
|
|
.pressKey('g h')
|
|
|
|
})
|
|
|
|
|
|
|
|
test('Shortcut g+f goes to the favorites', async t => {
|
|
|
|
await loginAsFoobar(t)
|
|
|
|
await t
|
|
|
|
.expect(getUrl()).eql('http://localhost:4002/')
|
|
|
|
.pressKey('g f')
|
|
|
|
.expect(getUrl()).contains('/favorites')
|
|
|
|
})
|
|
|
|
|
|
|
|
test('Shortcut g+c goes to the community page', async t => {
|
|
|
|
await loginAsFoobar(t)
|
|
|
|
await t
|
|
|
|
.expect(getUrl()).eql('http://localhost:4002/')
|
|
|
|
.pressKey('g c')
|
|
|
|
.expect(getUrl()).contains('/community')
|
|
|
|
})
|
|
|
|
|
|
|
|
test('Shortcut s goes to the search page', async t => {
|
|
|
|
await loginAsFoobar(t)
|
|
|
|
await t
|
|
|
|
.expect(getUrl()).eql('http://localhost:4002/')
|
|
|
|
.pressKey('s')
|
|
|
|
.expect(getUrl()).contains('/search')
|
|
|
|
})
|
|
|
|
|
|
|
|
test('Shortcut backspace goes back from favorites', async t => {
|
|
|
|
await loginAsFoobar(t)
|
|
|
|
await t
|
|
|
|
.expect(getUrl()).eql('http://localhost:4002/')
|
|
|
|
.pressKey('g t')
|
|
|
|
.expect(getUrl()).contains('/federated')
|
|
|
|
.pressKey('g f')
|
|
|
|
.expect(getUrl()).contains('/favorites')
|
2019-02-22 07:50:27 +00:00
|
|
|
.pressKey('backspace')
|
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
|
|
|
.expect(getUrl()).contains('/federated')
|
|
|
|
})
|
|
|
|
|
|
|
|
test('Shortcut h toggles shortcut help dialog', async t => {
|
|
|
|
await loginAsFoobar(t)
|
|
|
|
await t
|
|
|
|
.expect(getUrl()).eql('http://localhost:4002/')
|
|
|
|
.pressKey('h')
|
|
|
|
.expect(modalDialogContents.exists).ok()
|
|
|
|
.expect(modalDialogContents.hasClass('shortcut-help-modal-dialog')).ok()
|
|
|
|
.pressKey('h')
|
|
|
|
.expect(modalDialogContents.exists).notOk()
|
|
|
|
})
|
|
|
|
|
|
|
|
test('Global shortcut has no effects while in modal dialog', async t => {
|
|
|
|
await loginAsFoobar(t)
|
|
|
|
await t
|
|
|
|
.expect(getUrl()).eql('http://localhost:4002/')
|
|
|
|
.pressKey('g f')
|
|
|
|
.expect(getUrl()).contains('/favorites')
|
|
|
|
.pressKey('h')
|
|
|
|
.expect(modalDialogContents.exists).ok()
|
|
|
|
.pressKey('s') // does nothing
|
|
|
|
.expect(getUrl()).contains('/favorites')
|
2019-02-22 07:50:27 +00:00
|
|
|
.pressKey('backspace')
|
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
|
|
|
.expect(modalDialogContents.exists).notOk()
|
|
|
|
.pressKey('s') // now works
|
|
|
|
.expect(getUrl()).contains('/search')
|
|
|
|
})
|
2019-01-13 22:02:08 +00:00
|
|
|
|
|
|
|
test('Shortcut 1 goes to the home timeline', async t => {
|
|
|
|
await loginAsFoobar(t)
|
|
|
|
await t
|
|
|
|
.expect(getUrl()).eql('http://localhost:4002/')
|
|
|
|
.pressKey('1')
|
|
|
|
.expect(getUrl()).contains('/')
|
|
|
|
})
|
|
|
|
|
|
|
|
test('Shortcut 6 goes to the settings', async t => {
|
|
|
|
await loginAsFoobar(t)
|
|
|
|
await t
|
|
|
|
.expect(getUrl()).eql('http://localhost:4002/')
|
|
|
|
.pressKey('6')
|
|
|
|
.expect(getUrl()).contains('/settings')
|
|
|
|
})
|
2019-03-18 16:09:24 +00:00
|
|
|
|
|
|
|
test('Shortcut . scrolls to top and focuses', async t => {
|
|
|
|
await loginAsFoobar(t)
|
|
|
|
await t
|
|
|
|
.expect(getUrl()).eql('http://localhost:4002/')
|
|
|
|
.hover(getNthStatus(1))
|
|
|
|
await scrollToStatus(t, 10)
|
|
|
|
await t
|
|
|
|
.pressKey('.')
|
|
|
|
.expect(isNthStatusActive(1)).ok()
|
|
|
|
})
|
2019-09-23 07:53:29 +01:00
|
|
|
|
|
|
|
test('Shortcut left and right changes columns', async t => {
|
|
|
|
await loginAsFoobar(t)
|
|
|
|
|
|
|
|
const steps = [
|
|
|
|
['right', 'notifications'],
|
|
|
|
['right', 'local'],
|
|
|
|
['right', 'community'],
|
|
|
|
['right', 'search'],
|
|
|
|
['right', 'settings'],
|
|
|
|
['right', 'settings'],
|
|
|
|
['left', 'search'],
|
|
|
|
['left', 'community'],
|
|
|
|
['left', 'local'],
|
|
|
|
['left', 'notifications'],
|
|
|
|
['left', ''],
|
|
|
|
['left', '']
|
|
|
|
]
|
|
|
|
|
|
|
|
await t
|
|
|
|
.expect(getUrl()).eql('http://localhost:4002/')
|
|
|
|
|
|
|
|
for (const [key, page] of steps) {
|
|
|
|
await t.pressKey(key)
|
|
|
|
.expect(getUrl()).eql('http://localhost:4002/' + page)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
test('Shortcut left and right can change focus', async t => {
|
|
|
|
await loginAsFoobar(t)
|
|
|
|
await t
|
|
|
|
.click(settingsNavButton)
|
|
|
|
.click($('a[href="/settings/hotkeys"]'))
|
|
|
|
.click(leftRightChangesFocus)
|
|
|
|
.expect(leftRightChangesFocus.checked).ok()
|
|
|
|
.click(homeNavButton)
|
|
|
|
await sleep(1000)
|
|
|
|
await t
|
|
|
|
.pressKey('right')
|
|
|
|
.expect(getActiveElementAriaLabel()).eql('Home (current page)')
|
|
|
|
.pressKey('right')
|
|
|
|
.expect(getActiveElementAriaLabel()).eql('Notifications')
|
|
|
|
.pressKey('left')
|
|
|
|
.expect(getActiveElementAriaLabel()).eql('Home (current page)')
|
|
|
|
})
|
|
|
|
|
|
|
|
test('Shortcuts can be disabled', async t => {
|
|
|
|
await loginAsFoobar(t)
|
|
|
|
await t
|
|
|
|
.click(settingsNavButton)
|
|
|
|
.click($('a[href="/settings/hotkeys"]'))
|
|
|
|
.click(disableHotkeys)
|
|
|
|
.expect(disableHotkeys.checked).ok()
|
|
|
|
.click(homeNavButton)
|
|
|
|
.pressKey('2')
|
|
|
|
await sleep(500)
|
|
|
|
await t
|
|
|
|
.expect(getUrl()).eql('http://localhost:4002/')
|
|
|
|
.pressKey('h')
|
|
|
|
await sleep(500)
|
|
|
|
await t
|
|
|
|
.expect(modalDialog.exists).false
|
|
|
|
})
|