extended keyboard shortcuts

jsanders · July 2005

does anyone here use the keyboard shortcuts in gmail? like j and k to go forward and backwards between messages, g i to go to the inbox, etc? i love the ability to move between tabs with alt-d, but does anyone know how to go about much more involved shortcuts?

lament · July 2005

the Help section is helpful.

jsanders · July 2005

... as a vanilla extension. thanks, tho, lament.

jsanders · July 2005

right, i just re-read my original post, let me rephrase:

i'd like the ability to move between discussions and tabs and options within vanilla with more precision by using keyboard shortcut keys ala gmail.

i've done some research, and it looks like the code as a whole is handled by a <body onkeypress> javascript event, but i'm too out of touch with javascript and dhtml to think much futher than that.

lament · July 2005

other than the Quick Keys extension already bundled with Vanilla?

jsanders · July 2005

oh yes, much, much more

jsanders · July 2005

/* Extension Name: Extended Keyboard Shortcuts Extension Url: http://josh.jab.nu/ Description: Enables keyboard shortcuts for navigating discussions Version: 0.0.1 Author: Josh Sanders Author Url: http://josh.jab.nu/ */ $Head->AddScript("./js/keys.js"); $Head->Context->BodyAttributes=' onKeyPress="keycap(event)"';

jsanders · July 2005

you may download keys.js from http://josh.jab.nu/keys.js please note this is highly beta and extremely rough, but it's midnight here. more forthcoming. mark, did i add the attribute to the body tag correctly?

jsanders · July 2005

oh, and what this does, since it's not immediately obvious: on the discussions page, you can use the j,k and o keys to navigate to and open discussions like gmail's keyboard shortcuts. i expect eventually to make this actually use theme colors rather than my trademark nuclear green, and i also expect to make this useful on other pages somehow. j = next discussion k = prev discussion o = open selected discussion

Mark · July 2005

jsanders - Yeah - it looks correct to me (the bodyattribute assignment).

dom · July 2005

Ideally you'd initialise the onKeyPress thing actually in the script, adding an event to the body. It makes for more degradeable less intrusive javascript...

jsanders · July 2005

thanks mark. dom - i like ideal, could you explain that a little more?

dom · July 2005

Here are a couple of useful resources for it: http://www.onlinetools.org/articles/unobtrusivejavascript/chapter4.html This one talks about the reasons behind unobtrusive javascript (the whole tutorial is worth a read if you have the time) http://www.scottandrew.com/weblog/articles/cbs-events This one gives you the function necessary to add event listeners, such as for onKeyPress (Linked from first url also).

jsanders · July 2005

excellent, thanks dom. does anyone have any suggestions as to how the selected thread should be shown? as of right now, it just shows bright green. i'd like to pull that color out of the css file, but i'm not sure which would be good. i'd say it could use it's own style class, but that kinda seems like a much bigger project

dom · July 2005

Using its own style class would be by far the best approach. That way it remains unobstrusive, and doesn't end up clashing horribly with other themes!

You can simply add a class to the existing classes:

function toggle_discussion (discussion)
{
  var currentClasses = discussion.getAttribute ('class');
  if (currentClasses.match (/\bxksSelected\b/)
  {
    currentClasses.replace (/\bxksSelected\b/, '');
    discussion.setAttribute ('class', currentClasses);
  }
  else
  {
    discussion.setAttribute ('class', currentClasses + ' xksSelected');
  }
}

That's untested, so the regexps will probably need a little tweaking, but it shows it isn't too hard to just add in classes.

lament · July 2005

is this in any way going to conflict with Firefox's "Find as you type" which I use nearly every 10 minutes?

dom · July 2005

@lament:

Yes. If you tried to find a "j" with that feature, you would suddenly find yourself on a different page!

I think it would be wise to advance the script a bit in the following ways:

Allow the user to enable/disable/configure this extension via their account page
Offer a second method for this, by adding empty links with accesskeys (Alt+j, Alt+k, etc)

Any others?

Quick disclaimer: I don't wish to give the impression that what has already been achieved is poor quality or badly thought-out, since it's clearly good work! Rather, I think it'd be nice to continue to improve upon it where possible. Hope the author doesn't mind

jsanders · July 2005

no, i don't mind at all. like i said, though, this is very much beta. i've actually already got the code a little more updated, but just don't have the ability to test or upload it right now. i've got a friend that is a shortcut keys fiend (he *never* uses his mouse), so i'm getting tons of suggestions from him as well. i think i've got the preferences bit figured out, and look forward to trying tonight. and i hope it doesn't bother anyone, but i'm going to have to x-nay on the alt-modifers, especially alt-d. that breaks the address bar access in firefox and ie. j = next discussion k = previous discussion n = next comment p = previous comment r = reply to comment <- i think i might make this use some sort of quoting mechanism c = new discussion u = all disussions and then, g d = go to discussions (same as u? or should u be history -1?) g c = go to categories g s = go to search g e = go to settings (admin/moderator only) g a = go to account prefs in addition to all of this, someone suggested a key that goes to the next unread message.

jsanders · July 2005

oh, and it was also suggested to attempt to code a "killswitch" so you could hit that key - maybe the tilde, heh - and then the shortcut keys would turn off. i've been thinking about this a lot, if you couldn't tell.

dom · July 2005

You can also use F6 to get to the address bar, but that's kind of beside the point. Yes, accesskeys come with a whole host of problems of their own, but, for people who would have issues caused by having the script pick up usual keys (such as lament, above), surely it makes for a good alternative (if they aren't affected by losing alt+d to get to their address bar, say). That's why I suggested making it user configurable, and letting them choose the best option for themselves. Do you have a board that this is installed on so I can see it in action? I'll also dive into the js in a bit to see how you've dealt with avoiding intercepting keypressed at awkward moments (such as when typing a comment!) A killswitch (on/off switch really!) sounds like a good idea to me. Along with a little box sat in the corner indicating the status maybe? Or maybe not, but a little crazy brainstorming can't hurt ;)

jsanders · July 2005

i did some more work on this today. i had originally thought that by some miracle input keystrokes weren't captured when the forms inputs had focus... this is not the case at all. i've been trying to figure out a way to determine in code when an input box of one sort or another gets the focus, but so far, no joy. i also attempted to make it unobtrusive... also no joy. ALSO, i attempted to start the functionality on the actual comments pages, but there are substantial markup impediments to making that work correctly. if you want to see it in action, you can check out my dev forum http://www.thirty5.net/vanilla/ if you want to post or reply, for now, please note that the killswitch is the tilde key.

extended keyboard shortcuts

Comments