Lists user Fiddles (new API)

Lists user Fiddles (new API). Using JSONP.

by alirizaadiyahsi

HTML

<!-- Your fiddle needs a title for the API to list it -->
<span id="status"></span>
<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;
    background:#f0f0f0;
}

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

a {
    color: #478CDE;
    text-decoration: none;
    font-weight: bold;
}
a:hover {
    color: #367bcd;
}
span {
    font-size: .8em;
    color: #7F7F7F;
}

ul {}

li {
    margin:5px;
    padding:5px;
    border: solid 1px #e0e0e0;
    border-bottom:1px solid #d0d0d0
}

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>';
        
        if (this.limit == "all") {
            // make request
            this.fetchAll();            
        } else {
            // make request
            this.request();
        }
    },
    
    fetchAll: function() {
        var _self = this;
        new Request.JSONP({
            url: 'http://jsfiddle.net/api/user/' + this.user + '/demo/list.json',
            onComplete: function(response) {
                if (response.status === 'ok') {
                    _self.limit = response.overallResultSetCount;
                    $('fiddle-list').innerHTML = "Displaying <b>" + response.overallResultSetCount + "</b> results:<hr>";
                    _self.request();
                }                                
            },
            callbackKey: 'jsoncallback',
            data: {
                limit: 1
            }
        }).send();
    },

    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);
        }
    }
});

// jlbriggs
//...