List user Fiddles

List user Fiddles using the temporary API

by Rich Costello

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){
        this.user = user;
        this.itemHtml = 
            '<a href="{url}{version}" target="_blank">{title}</a> ' +
            '<span>rev{version}</span>' +
            '<p>{description}</p>';
        this.request();
    },

    request: function(){
        new Request.JSON({
            url: '/api/user_shells/' + this.user + '/',
            onSuccess: this.fetchFiddles.bind(this)
        }).send();
    },
        
    fetchFiddles: function(response){
        response.each(function(fiddle){
            new Element('li', {
                html: this.itemHtml.substitute(fiddle)
            }).inject($('fiddle-list'));
        }, this);
    }
});

new ListFiddles('oskar');