<commit_before># Acunote's Javascript Keyboard Shortcuts Framework


## Overview

Acunote Shortcuts is a JavaScript library providing everything you need to make add rich keyboard shortcut functionality to a web application.  With a few lines of code you can have Gmail-like single and multi-key keyboard shortcuts covering the essential functionality.

Acunote Shortcuts was extracted from Acunote, an <a href="http://www.acunote.com">online project management application</a> for Scrum, XP, Agile and common sense.


## Try It
Firefox extension and Greasemonkey script to add keyboard shortcuts to hacker news (news.ycombinator.com), reddit and digg:
* [Mozilla Firefox Extension](https://github.com/acunote/acunote-shortcuts/raw/master/extension/acunote-shortcuts.xpi)
* [Greasemonkey Script](https://github.com/acunote/acunote-shortcuts/raw/master/greasemonkey/acunote-shortcuts.user.js)


## Features

*   Simple to use: just declare a keymap defining what key sequences to
    bind to what functions and the library does the rest.
*   Supports single key (e.g. "j") and compound key sequence shortcuts
    (e.g. "g i") of any length.
*   Supports binding of any letter, number, symbol, punctuation keys.
    &lt;Shift&gt; modifier is also supported. (e.g. "?").
*   Works in Mozilla Firefox 1+, Internet Explorer 6+,
    Opera 8+, Safari.</li>
*   Lightweight, does not depend on any other JavaScript library.
*   Visual feedback in the echo area.
*   Optional Ruby on Rails helper provides convenient way to define
    shortcuts from Ruby. Global and page-specific keymap are supported
    and are merged at the runtime.
*   Greasemonkey userscript with an examples of using adding shortcuts
    to News.YC, Reddit and Digg. Includes code to add Gmail-style cursor.
*   Open Source, MIT license.


## Four Simple Steps To Use Shortcuts from Pure Javascript

1. <a href="https://github.com/acunote/acunote-shortcuts/tarball/master">Download</a> the archive and unpack it to your web site or application directory.
2. Include shortcuts library and styles somewhere inside &lt;head&gt; tag.
```html
<script src="shortcuts.js" type="text/javascript"></script>
<link href="shortcuts.css" type="text/css" media="screen"/>
```
3. Configure shortcuts as a javascript hash.
```javascript
<script type="text/javascript">
var SHORTCUTS = {
    '<strong>h</strong>': function() { alert('Help!'); },
    '<strong>f</strong>': {
        '<strong>o</strong>': {
            '<strong>o</strong>': function() { alert('"foo" has been typed!'); }
        }
    },
    '<strong>b</strong>': {
        '<strong>a</strong>': {
            '<strong>R</strong>': function() { alert('"baR" has been typed!'); },
            '<strong>z</strong>': function() { alert('"baz" has been typed!'); }
        }
    }
}
</script>
4. Initialize keyboard shortcuts listener on page load.<pre>
```html
<body onload="shortcutListener.init();">
```
</pre>


## Four Simple Steps To Use Shortcuts from Ruby&nbsp;on&nbsp;Rails

Rails helper supports global and page-specific keymaps and merges these at runtime.<br/>This way you can define global shortcuts for the whole site in the layout, and modify them as needed for specific pages. This example uses this functionality.

1. Configure global shortcuts in your layout template. 
```javascript
&lt;%
@global_shortcuts = {
    <strong>:h</strong> =&gt;  "alert('Help!');",
    <strong>:f</strong> =&gt; {
        <strong>:o</strong> =&gt; {
            <strong>:o</strong> =&gt; "alert('"foo" has been typed!');"
        }
    }
}
%&gt;
```
2. Add local page shortcuts to the page template.
```javascript
&lt;%
@page_shortcuts = {
    <strong>:b</strong> =&gt; {
        <strong>:a</strong> =&gt; {
            <strong>:R</strong> =&gt; "alert('"bar" has been typed!');",
            <strong>:z</strong> =&gt; "alert('"baz" has been typed!');"
        }
    }
}
%&gt;
```
3. Place <a href="https://github.com/acunote/acunote-shortcuts/raw/master/rails/helper/acunote_shortcuts_helper.rb">acunote_shortcuts_helper.rb</a> into you app/helpers directory and include it into ApplicationHelper class
```ruby
module ApplicationHelper
    include AcunoteShortcutsHelper
end
```
4. Call render_shortcuts where your javascript code is rendered
```html
&lt;script type="text/javascript"&gt;
    &lt;%= render_shortcuts %&gt;
&lt;/script&gt;
```

Then <strong>h</strong> and <strong>foo</strong> will be available for all the pages and one page will have additional <strong>bar</strong> and <strong>baz</strong> shortcuts.

## News.YC, Reddit, Digg Keyboard Shortcuts For Your Browser
This Firefox Extension and Greasemonkey Script add Gmail-style cursor, navigation and post
management shortcuts to <a class="external" href="http://news.ycombinator.com">YCombinator News</a>, <a class="external" href="http://reddit.com">Reddit</a> and <a class="external" href="http://digg.com">Digg</a>. It includes <span class="nowrap">aconote-shortcuts.js</span> library, and site-specific code to setup shortcuts for each of these.</p>

<table style="border-collapse:collapse" border="1px" cellpadding="0" cellspacing="0" width="100%">
<tr>
    <th colspan="2">Cursor Movement</th>
    <th>Notes</th>
</tr>
<tr>
    <td class="shortcut">
        <strong>j</strong>
    </td>
    <td class="action">
        move cursor up
    </td>
    <td>
    </td>
</tr>
<tr>
    <td class="shortcut">
        <strong>k</strong>
    </td>
    <td class="action"><commit_msg>Fix formatting of usage instructions in readme<commit_after># Acunote's Javascript Keyboard Shortcuts Framework


## Overview

Acunote Shortcuts is a JavaScript library providing everything you need to make add rich keyboard shortcut functionality to a web application.  With a few lines of code you can have Gmail-like single and multi-key keyboard shortcuts covering the essential functionality.

Acunote Shortcuts was extracted from Acunote, an <a href="http://www.acunote.com">online project management application</a> for Scrum, XP, Agile and common sense.


## Try It
Firefox extension and Greasemonkey script to add keyboard shortcuts to hacker news (news.ycombinator.com), reddit and digg:
* [Mozilla Firefox Extension](https://github.com/acunote/acunote-shortcuts/raw/master/extension/acunote-shortcuts.xpi)
* [Greasemonkey Script](https://github.com/acunote/acunote-shortcuts/raw/master/greasemonkey/acunote-shortcuts.user.js)


## Features

*   Simple to use: just declare a keymap defining what key sequences to
    bind to what functions and the library does the rest.
*   Supports single key (e.g. "j") and compound key sequence shortcuts
    (e.g. "g i") of any length.
*   Supports binding of any letter, number, symbol, punctuation keys.
    &lt;Shift&gt; modifier is also supported. (e.g. "?").
*   Works in Mozilla Firefox 1+, Internet Explorer 6+,
    Opera 8+, Safari.</li>
*   Lightweight, does not depend on any other JavaScript library.
*   Visual feedback in the echo area.
*   Optional Ruby on Rails helper provides convenient way to define
    shortcuts from Ruby. Global and page-specific keymap are supported
    and are merged at the runtime.
*   Greasemonkey userscript with an examples of using adding shortcuts
    to News.YC, Reddit and Digg. Includes code to add Gmail-style cursor.
*   Open Source, MIT license.


## Four Simple Steps To Use Shortcuts from Pure Javascript

1. <a href="https://github.com/acunote/acunote-shortcuts/tarball/master">Download</a> the archive and unpack it to your web site or application directory.
2. Include shortcuts library and styles somewhere inside &lt;head&gt; tag.<pre>
&lt;script src="shortcuts.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;link href="shortcuts.css" type="text/css" media="screen"/&gt;
</pre>
3. Configure shortcuts as a javascript hash.<pre>
&lt;script type="text/javascript"&gt;
var SHORTCUTS = {
    '<strong>h</strong>': function() { alert('Help!'); },
    '<strong>f</strong>': {
        '<strong>o</strong>': {
            '<strong>o</strong>': function() { alert('"foo" has been typed!'); }
        }
    },
    '<strong>b</strong>': {
        '<strong>a</strong>': {
            '<strong>R</strong>': function() { alert('"baR" has been typed!'); },
            '<strong>z</strong>': function() { alert('"baz" has been typed!'); }
        }
    }
}
&lt;/script&gt;
</pre>
4. Initialize keyboard shortcuts listener on page load.<pre>
&lt;body onload="shortcutListener.init();"&gt;
</pre>


## Four Simple Steps To Use Shortcuts from Ruby&nbsp;on&nbsp;Rails

Rails helper supports global and page-specific keymaps and merges these at runtime.<br/>This way you can define global shortcuts for the whole site in the layout, and modify them as needed for specific pages. This example uses this functionality.

1. Configure global shortcuts in your layout template. <pre>
&lt;%
@global_shortcuts = {
    <strong>:h</strong> =&gt;  "alert('Help!');",
    <strong>:f</strong> =&gt; {
        <strong>:o</strong> =&gt; {
            <strong>:o</strong> =&gt; "alert('"foo" has been typed!');"
        }
    }
}
%&gt;
</pre>
2. Add local page shortcuts to the page template.<pre>
&lt;%
@page_shortcuts = {
    <strong>:b</strong> =&gt; {
        <strong>:a</strong> =&gt; {
            <strong>:R</strong> =&gt; "alert('"bar" has been typed!');",
            <strong>:z</strong> =&gt; "alert('"baz" has been typed!');"
        }
    }
}
%&gt;
</pre>
3. Place <a href="https://github.com/acunote/acunote-shortcuts/raw/master/rails/helper/acunote_shortcuts_helper.rb">acunote_shortcuts_helper.rb</a> into you app/helpers directory and include it into ApplicationHelper class<pre>
module ApplicationHelper
    include AcunoteShortcutsHelper
end
</pre>
4. Call render_shortcuts where your javascript code is rendered<pre>
&lt;script type="text/javascript"&gt;
    &lt;%= render_shortcuts %&gt;
&lt;/script&gt;
</pre>

Then <strong>h</strong> and <strong>foo</strong> will be available for all the pages and one page will have additional <strong>bar</strong> and <strong>baz</strong> shortcuts.

## News.YC, Reddit, Digg Keyboard Shortcuts For Your Browser
This Firefox Extension and Greasemonkey Script add Gmail-style cursor, navigation and post
management shortcuts to <a class="external" href="http://news.ycombinator.com">YCombinator News</a>, <a class="external" href="http://reddit.com">Reddit</a> and <a class="external" href="http://digg.com">Digg</a>. It includes <span class="nowrap">aconote-shortcuts.js</span> library, and site-specific code to setup shortcuts for each of these.</p>

<table style="border-collapse:collapse" border="1px" cellpadding="0" cellspacing="0" width="100%">
<tr>
    <th colspan="2">Cursor Movement</th>
    <th>Notes</th>
</tr>
<tr>
    <td class="shortcut">
        <strong>j</strong>
    </td>
    <td class="action">
        move cursor up
    </td>
    <td>
    </td>
</tr>
<tr>
    <td class="shortcut">
        <strong>k</strong>
    </td>
    <td class="action">
{'fraction_non_alphanumeric': 0.1403268510910253, 'fraction_numerical': 0.003286770747740345, 'mean_word_length': 3.992707383773929, 'pattern_counts': {'":': 0, '<': 185, '<?xml version=': 0, '>': 185, 'https://': 8, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5463414', 'n_tokens_mistral': 3546, 'n_tokens_neox': 3363, 'n_words': 1103}