Sabtu, 17 September 2011
Update: The KeyBoarder's project website is at http://lsauer.github.com/KeyBoarder
. All resources of this site are freely licensed under CC-BY-SA 3.
Keyboarder automatically converts textual references of keyboard shortcuts into graphical representations. The javascript is fast, small and has no other dependencies (such as jquery). The idea behind KeyBoarder is that updating past or new documents with static markup-clutter is tedious, put mildly. Imagine updating hundreds of blog posts and tens of html-manpages.
Keyboarder provides event binding of individual keys and css-designing. When loaded the user can navigate documents by shortcut simply by pressing the corresponding keys.
KeyBoarder may be ideally suited for blogs, documents and help files which contain lots of keyboard shortcuts. Only two lines of code are required, one for importing the css-file containing the styles, and the other for importing the JavaScript into the HTML document.
< head >
< title>KeyBoarder Demo site - JS Library for dynamic keybord shortcut rendering
< style>
@import url("https://github.com/lsauer/KeyBoarder/raw/master/keyboarder.css");
< /style >
< script type="text/javascript" src="https://github.com/lsauer/KeyBoarder/raw/master/keyboarder.js" charset="utf-8">
< /script >
KeyBoarder takes as configuration arguments the css class-name of the HTML elements holding the main article's or document's content with key shortcuts. (e.g. a blog post). Often such a class is aptly called 'content', and as such is part of the default parameters.
If you press a key which is part of a shortcut, KeyBoarder will highlight and focus the key-shortcut, and upon each further press will go to the next consecutive element that contains the pressed key in the key-shortcut.
This is particularly suited for navigating long texts, like a blog or a help-file / html-manpage. Keys can be bound to other events, and rendered individually based on per-key-type css-rules .
From the design perspective, KeyBoarder features several appealing styles to choose from:
KeyBoarder uses the kbd element of html, which allows device specific native treatment by the browser of the client.
In order to recognize keys, KEYS must conform to certain conventions: They must be written in UPPERCASE or Startcase and concatenated by a symbol e.g. '+' or '-', '~', unless otherwise specified:
A minimum number of consecutive keys can be configured, in order for shortcut rendering to only take place, once that number is met. e.g. rendering ALT+X but not ALT
Keys can be designed with css, and several default design are included.
Examples for writing Key-shortcuts which KeyBoarder recognizes:
Keys can be nested:
STRG - ALT - DEL //Single key reconition mode is set, thus the last key 'Del' is recognized but not the others, as the current concatenator symbol is set to '+'
STRG+ WIN+O
STRG+P+D WIN T , or RETURN X should not be rendered
CTRL+ALT+O
In the following examples, keys will not be rendered due to varrying issues (with KeyBoarder v.7 most are rendered):
This is particularly suited for navigating long texts, like a blog or a help-file / html-manpage. Keys can be bound to other events, and rendered individually based on per-key-type css-rules .
From the design perspective, KeyBoarder features several appealing styles to choose from:
BASE
MODERN
Fancy
Dark
Light
Simple
MODERN
Fancy
Dark
Light
Simple
BASE
MODERN
Fancy
Dark
Light
Simple
MODERN
Fancy
Dark
Light
Simple
KeyBoarder uses the kbd element of html, which allows device specific native treatment by the browser of the client.
In order to recognize keys, KEYS must conform to certain conventions: They must be written in UPPERCASE or Startcase and concatenated by a symbol e.g. '+' or '-', '~', unless otherwise specified:
A minimum number of consecutive keys can be configured, in order for shortcut rendering to only take place, once that number is met. e.g. rendering ALT+X but not ALT
Keys can be designed with css, and several default design are included.
Examples for writing Key-shortcuts which KeyBoarder recognizes:
This is a simple shortcut ALT+WIN+UFor demonstration purposes, provided here is an excerpt of the shortcut key table for Open Office Writer:
ALT + WIN+ P /*this is fine*/!
somewhere in the text, ALT + RETURN - a key shortcut!
...in order to enter the text press, STRG+ ENTER
you can set different styles in preformatted tex
| Shortcut Keys | Effect |
|---|---|
| Ctrl+A | Select All. |
| Ctrl+J | Justify. |
| Ctrl+D | Double Underline. |
| Ctrl+E | Centred. |
| Ctrl+F | Find and Replace. |
| Ctrl+Shift+P | Superscript. |
| Ctrl+L | Align Left. |
| Ctrl+R | Align Right. |
| Ctrl+Shift+B | Subscript. |
| Ctrl+Y | Redo last action. |
| Ctrl+0 (zero) | Apply Default paragraph style. |
| Ctrl+1 | Apply Heading 1 paragraph style. |
| Ctrl+2 | Apply Heading 2 paragraph style. |
| Ctrl+3 | Apply Heading 3 paragraph style. |
| Ctrl+5 | 1.5 Line Spacing. |
| Ctrl+Enter | Manual page break. |
| Ctrl+Shift+Enter | Column break in multi-columnar texts. |
| Alt+Enter | Inserting a new paragraph without numbering. |
| Alt+Enter | Inserting a new paragraph directly before or after a section or a table. |
Keys can be nested:
STRG - ALT - DEL //Single key reconition mode is set, thus the last key 'Del' is recognized but not the others, as the current concatenator symbol is set to '+'
STRG+ WIN+O
STRG+P+D WIN T , or RETURN X should not be rendered
CTRL+ALT+O
In the following examples, keys will not be rendered due to varrying issues (with KeyBoarder v.7 most are rendered):
STG+ALT //missspelling
STRG+OI //missing concatenator
ALT+G�Z //illegal symbol: non recognized concatenator
"ALT + DEL"
CTRL+ALT - DEL
,ALT+DEL",