CoffeeTable, v0.3.0

A drop-in workbench for experimentation, CoffeeTable provides a CoffeeScript-fluent console on a page, with persistent history and auto-suggest. Check it out in the top-right corner of your browser.

Requires

(loaded automatically if not already present)

To use

Load coffeetable-min.js into the page:

<script type="text/javascript" src="http://code.alecperkins.net/coffeetable/coffeetable-min.js"></script>

Click the "CoffeeTable" button in the top-right. Enter CoffeeScript code in the textarea, and press enter to execute it. The output will be listed below. For multiline input, check the "multiline" box, then use shift+enter instead to execute code. log and dir are shortcuts to the console functions. this is the window object. Everything happens in the global context.

If localStorage is supported, CoffeeTable uses it to persist the history, which can then be replayed. By default the history is loaded but not executed; the history entries will show as strings instead of their actual result types. Click on a history item to load the source that generated it. Also, you can indent 4 spaces using tab, and go through the history using the up arrow.

There is basic auto-suggest when in single-line mode that enumerates the properties of the currently 'completed' object. To hide the auto-suggest pane, press escape.

Bookmarklet

Drag this to your bookmarks toolbar for a bookmarklet that will load CoffeeTable onto whatever page you happen to be on:

CoffeeTable

Versions

coffeetable-min.js will always be the latest version. If you need to reference a specific version of CoffeeTable, simply point the script src attribute at the file for that version, eg coffeetable-0.3.0-min.js. Check the repo for versions available.

If you would like to use the development version, use the name coffeetable-dev.js instead. This will always point to the latest compiled development code. Dev bookmarklet: CoffeeTable DEV

Output color coding

Objects displayed in history can be expanded by clicking the + on its left. This will list the immediate properties of that object. Expansion is recursive, so properties that are also objects can be expanded.

API

To prevent automatic initialization, call CoffeeTable.deferInit() before the DOM is ready.

If you want to initialize the widget before the document ready event, or after deferInit, call CoffeeTable.init(options), where options is an optional hash of settings overrides. You can call init any time after CoffeeTable has been loaded onto the page.

Only one widget can exist at a time. Calling init after the widget has loaded will reinitialize it, using the specified options.

Note: the replaying of history, either on widget reload or on demand, can be dependent on the overall state of the page, and may not be idempotent.

To programmatically send entries to the widget, CoffeeTable.log(args...), CoffeeTable.dir(args...), and CoffeeTable.execute(args...) are available. log and dir are similar to the console equivalents. execute will execute strings of CoffeeScript code, in order.

To remove the widget from the DOM and window, call CoffeeTable.unload().

To check the version of the widget, CoffeeTable.version will report the version as an Array, eg 'v0.3.0' reports as [0,3,0]

Default settings:

defaults =
    # Automatically load jQuery and CoffeeScript if not found in page
    autoload_coffee_script  : true
    autoload_jquery         : true

    # URLs of CoffeeScript and jQuery files to load 
    coffeescript_js         : 'http://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.2.0/coffee-script.min.js'
    jquery_js               : 'http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js'

    # Persist the history using localStorage
    local_storage           : true

    # Key to persist data with in localStorage
    ls_key                  : 'coffee-table'

    # Clear the history on load
    clear_on_load           : false

    # Replay the history on load
    replay_on_load          : false

    # Default to multi-line mode
    multi_line              : false

    # Characters to use as indentation when TAB is pressed
    indent                  : '    '

    # Enable auto-suggest panel
    auto_suggest            : true

    # Widget positioning on the screen (CSS values)
    widget_position         : 'fixed'
    widget_top              : '5px'
    widget_right            : '5px'

    # ID attribute of widget div
    widget_id               : "CoffeeTable-#{ (new Date()).getTime() }"

    # Adopt console.log or console.dir if not already present.
    adopt_log               : true
    adopt_dir               : true