API Index on Docs

[quangv]

Hey Alex,

I'm not sure how often you look at the reference docs, I can't imagine it being that often ;)

But us newbs to Spine, look at it quite a lot, I was wondering if you'd be open to a couple of ideas....

High-Level view of commands

This does two things,

1. ability for people new to Spine.js to grok all the available options. If you haven't memorized all the class' methods, it's slow to dig through the docs to see what's where. This way I could see at a glance what's available, and for people just glancing to see the full power of Spine. :)
2. quickly navigate to the command you're looking for help with.

   Better distinguish command names in doc.

If you haven't memorized the API yet, and want to browse, it's currently rather difficult to distinguish what's an api method, and what is just text... a simple change in font-size or weight would help us browse the docs better. :p

[quangv]

Created a TamperMonkey/GreaseMonkey script.

(script is in TamperMonkey, might need some work for GreaseMonkey)

// ==UserScript==
// @name       Spine.js Better Reference
// @namespace  http://quangvan.com/
// @version    0.8
// @description  Shows the API in more of a toggle list style.
// @match      http://spinejs.com/api/*
// @copyright  2012 Quang Van
// ==/UserScript==

var $ = unsafeWindow.$;

$(function(){

    // Methods Toggling

    $('h3').each(function() {
        $(this).nextUntil('h3', 'p, pre, div, ul').wrapAll('<div class="info" />');
    });

    $('.info').hide().css('padding-left', '1em');

    $('h3').css({'cursor':'pointer'}).click(function() {
        $(this).next().toggle();
    });

    // Stronger h2

    $('h2').css('font-weight', 'bold');

});

It displays the API methods in a clickable list, so you can see what's on the palette at a glance...