WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

Last modified 4 years ago

#7643 closed enhancement (fixed)

Gmail-like comment manipulation keyboard shorcuts

Reported by: nbachiyski Owned by:
Milestone: 2.7 Priority: normal
Severity: normal Version:
Component: General Keywords: js shortcuts has-patch
Focuses: Cc:

Description

j - down
k - up
x - mark (check the checkbox)
a - approve current comment (not checked)
u - unapprove
d - delete
s - spam
r - reply

Implemented as a generic jquery plugin and can be easily used on any table or list. Uses jquery-hotkeys. The main idea is:

jQuery.table_hotkeys(jQuery('table.widefat'), ['a', 'u', 's', 'd', 'r']);
...
<tr class="some-css-class-prefix-current">
    <a class="some-css-class-prefix-u" href="...">Unapprove</a>
</tr>

The plugin cycles through rows of the given table and when one of the keys in the list is pressed, it looks for an element in that row with the proper class and clicks on it. In the example above, if I press u the Unapprove link of the current row will be clicked.

Known limitations and bugs:

  • Bulk actions can't be triggered via the keyboard. If we want the interface to be consistent we have two options:
    1. Sacrifice either bulk shortcuts or single-comment shortcuts. I have chosen to drop bulk actions, because they need more attention (ergo, should be harder). Moreover, comments can be marked via the keyboard and if one wants to delete all comments the only action with the mouse will be to select Delete from the menu and click Apply.
    2. Choose different shortcuts for single-comment and bulk actions. For example Shift+u (aka U) can be bulk Unapprove and so on.
  • Can't edit the comment because it is a normal link and they can't be clicked via JS. There is a workaround and we will work around it if needed.
  • Clicking on an action button, which removes the comment from view, loses the currently selected comment and the user has to press j or k to bring the cursor back.
  • The style for current comment is completely arbitrary (yellow background). Better ideas will be appreciated.

Attachments (9)

table-hotkeys.diff (6.6 KB) - added by nbachiyski 6 years ago.
jquery.hotkeys.js (5.3 KB) - added by nbachiyski 6 years ago.
jquery.table-hotkeys.js (2.7 KB) - added by nbachiyski 6 years ago.
Rev 2: Do not show current before pressing j
table-hotkeys.2.diff (6.6 KB) - added by nbachiyski 6 years ago.
Rev 2: Better hightlight colour
table-hotkeys-move-along-pages.diff (6.9 KB) - added by nbachiyski 6 years ago.
Refactor much of the code and move to next or previous page on pressing next/prev at end of the current page.
table-hotkeys-no-debug.diff (494 bytes) - added by nbachiyski 6 years ago.
A console.log sneaked into the commit
table-hotkeys-edit-bulk-and-strip.diff (4.4 KB) - added by nbachiyski 6 years ago.
Bulk edit with Shift+<action key>, edit key, code reduce
hotkeys-shift-u.diff (1.9 KB) - added by nbachiyski 6 years ago.
Fix unapprove bulk action (Shift+U)
hotkeys-opt-in.diff (4.7 KB) - added by nbachiyski 6 years ago.
Disable shortcuts by default, add a personal option for turning them on

Download all attachments as: .zip

Change History (29)

nbachiyski6 years ago

nbachiyski6 years ago

comment:1 ryan6 years ago

Is it possible to show the highlight on the first row only after 'j' has been pressed? That way those who don't care or know about keyboard shortcuts don't have to see the highlight, especially since they can't move the highlight by clicking on another row. Google Reader doesn't highlight until the first time 'j' is pressed or an item is clicked.

comment:2 ryan6 years ago

The #E4F2FD color we use everywhere might make a good active row color. It would be more distinct from the light yellow of unapproved comments.

nbachiyski6 years ago

Rev 2: Do not show current before pressing j

nbachiyski6 years ago

Rev 2: Better hightlight colour

comment:3 ryan6 years ago

(In [8777]) Comment manipulation keyboard shorcuts from nbachiyski. see #7643

comment:4 ryan6 years ago

I moved vim-current to the color stylesheets. Tested on FF and Safari.

comment:5 ryan6 years ago

Oops, found a bug right after commit. Pressing 'a', 'u', or other actions with no rows highlighted applies the action to all rows. After you press 'j' to make the first row active it behaves properly.

comment:6 ryan6 years ago

On Mac, Cmd+u to view source in Firefox gets overridden and interpreted as Unapprove.

comment:7 ryan6 years ago

(In [8778]) Support Mac meta key. see #7643

comment:8 ryan6 years ago

(In [8779]) Don't process keypress if the current row is null. see #7643

comment:9 follow-up: ryan6 years ago

Please review those commits. Both issues are now fixed for me.

comment:10 azaozz6 years ago

(In [8780]) Add hotkeys.js to all pages that list comments and prevent error if not loaded, see #7643

nbachiyski6 years ago

Refactor much of the code and move to next or previous page on pressing next/prev at end of the current page.

comment:11 nbachiyski6 years ago

Here is a patch, which redirects to the next page if we have reached the page of the current one.

Also, some code duplication was refactored and the visibility checks were unified in a jquery method, which traverses 3 levels up.

comment:12 in reply to: ↑ 9 nbachiyski6 years ago

Replying to ryan:

Please review those commits. Both issues are now fixed for me.

They seem fine. I will send the second one upstream.

comment:13 ryan6 years ago

(In [8789]) Comment hotkey: move to next or previous page on pressing next/prev at end of the current page. Prop nbachiyski. see #7643

nbachiyski6 years ago

A console.log sneaked into the commit

comment:14 azaozz6 years ago

(In [8794]) Comment manipulation keyboard shorcuts: get debug out, props nbachiyski see #7643

nbachiyski6 years ago

Bulk edit with Shift+<action key>, edit key, code reduce

comment:15 nbachiyski6 years ago

A little patch, which implements maps bulk actions (over all checked comments), which are triggered by Shift+<action key> and Shift+x toggles all checkboxes.

The edit key, e, now works.

Also, I removed some unused code.

comment:16 ryan6 years ago

(In [8804]) Bulk action hot keys for comments. Props nbachiyski. see #7643

comment:17 ryan6 years ago

I can't get Shift+u to work. FF3

comment:18 ryan6 years ago

  • Resolution set to fixed
  • Status changed from new to closed

nbachiyski6 years ago

Fix unapprove bulk action (Shift+U)

nbachiyski6 years ago

Disable shortcuts by default, add a personal option for turning them on

comment:19 nbachiyski6 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

comment:20 ryan6 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

(In [9217]) Add opt-in optioon for comment hotkeys. Props nbachiyski. fixes #7643

Note: See TracTickets for help on using tickets.