Fork me on GitHub
-->

KeyBoarder dynamically renders navigatable keyboard shortcuts

KeyBoarder automatically converts textual references of keyboard shortcuts into graphical representations. The process is fast, the javascript-codebase small and independent of other libraries (such as jQuery), allowing to keep overhead to minimum when necessary.
The idea behind KeyBoarder is that updating past or upcoming documents with markup just for rendering shortcut-keys is inflexible and tedious. When an update would require editing hundreds of blog articles or dozens of documents, or recompiling documentation libraries, KeyBoarder is the solution.
Additionally, KeyBoarder seeks to enable easy event binding for the dynamically created shortcut keys. A default event-binder enables jumping from shortcut to shortcut by pressing the respective key of the shortcut.

KeyBoarder provides three things:

  • Design:

    choose from a multitude of asthetic design options

  • Interactivity:

    navigate shortcuts by their respective key

  • Dynamic rendering:

    no need to mess up documents with static markup

    • KeyBoarder Details:
     KeyBoarder takes as configuration arguments the className of the HTML elements containing the content to be outlined (e.g. in blog posts this is often 'content'). Several other options are available, and explained within the javascript-file.

    From the design perspective, KeyBoarder features several beautiful styles to choose from. As such KeyBoarder can also be used as a CSS-design library.
    BASE
    MODERN
    Fancy
    Dark
    Light Simple
    BASE
    MODERN
    Fancy
    Dark
    Light Simple

    Interactivity: Upon pressing a key which is part of a rendered shortcut, KeyBoarder will highlight and focus the key-shortcut, and advance with each further press to the next matching shortcut.
    Keys can be bound to other events (e.g. the mousewheel), and/or rendered individually on per key-class basis. Designing is simpe, by assigning CSS-classes (e.g. .kbCTRL {...} ).

    Dynamic Rendering recognizes textual shortcuts and outlines the matched shortcuts in markup code. The process requires shortcuts to conform to certain text conventions: UPPERCASE or Startcase keys, concatenated by a symbol e.g. '+', '-' or '~', 'and'....
    A lower limit can be set on the number of consecutive keys that must be present, in order for shortcut rendering to take place. e.g. rendering ALT+X but not ALT

    • Getting started

    Only two lines of code are required. Load KeyBoarder by including keyboarder.css and for dynamic rendering keyboarder.js

    
    
    1 <head>
2 <title>KeyBoarder Demo site - JS Library for dynamic keybord shortcut rendering</title>
3 <style>
4 @import url("https://github.com/lsauer/KeyBoarder/raw/master/keyboarder.css"); 
5 </style>
6 <script type="text/javascript" src="https://github.com/lsauer/KeyBoarder/raw/master/keyboarder.js" 
   charset="utf-8"></script>
7 </head> .......

    Download

    You can get a copy of KeyBoarder from github or clone the git repository.