Lists user Fiddles (new API)

Lists user Fiddles (new API). Using JSONP.

by jacobdubail

HTML

<!-- Your fiddle needs a title for the API to list it -->
<h1>Jacob Dubail's fiddles:</h1>
<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 {
    -webkit-column-gap: 20px;
    -webkit-column-rule: 1px solid #E9EDF0;
    -webkit-column-width: 300px;
       -moz-column-gap: 20px;
       -moz-column-rule: 1px solid #E9EDF0;
       -moz-column-width: 300px;
            column-gap: 20px;
            column-rule: 1px solid #E9EDF0;
            column-width: 300px;
}
li {
    margin: 0;
    padding: 5px 0 5px;
    border-bottom:  1px solid #E9EDF0;
}
li:hover {
    background: #eee;
}
li:hover a {
    color: #256ABC;
}
p {
    font-size: .9em;
    color: #7F7F7F;
    padding: 5px 0 0;
}

JavaScript

// Replace sl1dr with your jsFiddle username

var Username = 'jacobdubail'

    
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(Username, 9999);