Lists user Fiddles (new API)

Lists user Fiddles (new API). Using JSONP.

by Reusablecode

HTML

<!-- Your fiddle needs a title for the API to list it -->

<ul id="fiddle-list"></ul>

CSS

body {
    font-family: 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', 'Myriad', Tahoma, Verdana, Arial;
    font-size: .8em;
    color: #4D5860;
}

h1 {
    margin: 0 0 15px;
    font-size: 1.2em;
}

a {
    color: #478CDE;
    text-decoration: none;
    font-weight: bold;
}

span {
    font-size: .8em;
    color: #7F7F7F;
}

ul {}

li {
    margin: 0 0 5px;
    padding: 0 0 5px;
    border-bottom: solid 1px #E9EDF0;
}

p {
    font-size: .9em;
    color: #7F7F7F;
    padding: 5px 0 0;
}

JavaScript

var ListFiddles = new Class({
    
    initialize: function(user, limit){
        this.user = user;
        this.limit = limit || 5;
        
        // create some HTML with placeholders
        this.itemHtml = 
            '<a href="{url}{version}" target="_blank">{title}</a> ' +
            '<span>rev{version}</span>' +
            '<p>{description}</p>';
        
        // make request
        this.request();
    },

    request: function(){
        new Request.JSONP({
            url: 'http://jsfiddle.net/api/user/' + this.user + '/demo/list.json',
            onComplete: this.fetchFiddles.bind(this),
            callbackKey: 'jsoncallback',
            data: {
                limit: this.limit
            }
        }).send();
    },
        
    fetchFiddles: function(response){
        if (response.status === 'ok'){
            response.list.each(function(fiddle){
                
                // create a new list item and fill it with data
                new Element('li', {
                    html: this.itemHtml.substitute(fiddle)
                }).inject($('fiddle-list'));
            }, this);
        }
    }
});

new ListFiddles('desandro', 40);