Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Options

extended keyboard shortcuts

edited July 2005 in Vanilla 1.0 Help
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?

Comments

  • Options
    ... as a vanilla extension. thanks, tho, lament.
  • Options
    edited 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.
  • Options
    lamentlament
    edited July 2005
    other than the Quick Keys extension already bundled with Vanilla?
  • Options
    oh yes, much, much more
  • Options
    edited 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)"';
  • Options
    edited 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?
  • Options
    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
  • Options
    MarkMark Vanilla Staff
    jsanders - Yeah - it looks correct to me (the bodyattribute assignment).
  • Options
    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...
  • Options
    thanks mark. dom - i like ideal, could you explain that a little more?
  • Options
    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).
  • Options
    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
  • Options
    domdom
    edited 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.
  • Options
    is this in any way going to conflict with Firefox's "Find as you type" which I use nearly every 10 minutes?
  • Options
    domdom
    edited 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:
    1. Allow the user to enable/disable/configure this extension via their account page
    2. 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 ;)
  • Options
    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.
  • Options
    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.
  • Options
    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 ;)
  • Options
    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.
This discussion has been closed.