Not signed in (Sign In)

Categories

Vanilla 1.1.5 is a product of Lussumo. More Information: Documentation, Community Support.

Help keep Vanilla free:
Welcome Guest!
Want to take part in these discussions? If you have an account, sign in now.
If you don't have an account, apply for one now.

Add-ons: extended keyboard shortcuts

Bottom of Page

1 to 21 of 21

  1.  
    •  
      CommentAuthorjsanders
    • CommentTimeJul 27th 2005
     # 1
    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?
    •  
      CommentAuthorlament
    • CommentTimeJul 27th 2005
     # 2
    •  
      CommentAuthorjsanders
    • CommentTimeJul 27th 2005
     # 3
    ... as a vanilla extension. thanks, tho, lament.
    •  
      CommentAuthorjsanders
    • CommentTimeJul 27th 2005 edited
     # 4
    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.
    •  
      CommentAuthorlament
    • CommentTimeJul 27th 2005 edited
     # 5
    other than the Quick Keys extension already bundled with Vanilla?
    •  
      CommentAuthorjsanders
    • CommentTimeJul 27th 2005
     # 6
    oh yes, much, much more
    •  
      CommentAuthorjsanders
    • CommentTimeJul 28th 2005 edited
     # 7
    /*
    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)"';
    •  
      CommentAuthorjsanders
    • CommentTimeJul 28th 2005 edited
     # 8
    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?
    •  
      CommentAuthorjsanders
    • CommentTimeJul 28th 2005
     # 9
    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
    •  
      CommentAuthorMark
    • CommentTimeJul 28th 2005
     # 10
    jsanders - Yeah - it looks correct to me (the bodyattribute assignment).
    •  
      CommentAuthordom
    • CommentTimeJul 29th 2005
     # 11
    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...
    •  
      CommentAuthorjsanders
    • CommentTimeJul 29th 2005
     # 12
    thanks mark.

    dom - i like ideal, could you explain that a little more?
    •  
      CommentAuthordom
    • CommentTimeJul 29th 2005
     # 13
    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).
    •  
      CommentAuthorjsanders
    • CommentTimeJul 29th 2005
     # 14
    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
    •  
      CommentAuthordom
    • CommentTimeJul 29th 2005 edited
     # 15
    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.
    •  
      CommentAuthorlament
    • CommentTimeJul 29th 2005
     # 16
    is this in any way going to conflict with Firefox's "Find as you type" which I use nearly every 10 minutes?
    •  
      CommentAuthordom
    • CommentTimeJul 29th 2005 edited
     # 17
    @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 ;)
    •  
      CommentAuthorjsanders
    • CommentTimeJul 29th 2005
     # 18
    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.
    •  
      CommentAuthorjsanders
    • CommentTimeJul 29th 2005
     # 19
    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.
    •  
      CommentAuthordom
    • CommentTimeJul 29th 2005
     # 20
    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 ;)
    •  
      CommentAuthorjsanders
    • CommentTimeJul 30th 2005
     # 21
    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.

1 to 21 of 21

  1.  
Add your comments
    Username Password
  • Format comments as
 
Back to Discussions Top of Page