Request.Fiddles

Extends Request.JSONP to request your jsfiddles. Based on Oskar's example at http://jsfiddle.net/oskar/mwJWb/8/

by Jens Grochtdreis

HTML

<h1>Alle meine 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;
    padding: 40px;
}

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

a {
    color: #a20000;
    text-decoration: underline;
    font-weight: bold;
}
a:hover, a:focus {color: #478CDE; text-decoration: none;}
span {
    color: #7F7F7F;
}

ul {}

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

p {
    color: #3e3e3e;
    padding: 5px 0 0;
}

JavaScript

/*
---
script: Request.Fiddles.js
description: displays user's fiddles using jsFiddle API, http://jsfiddle.tumblr.com/api-doc
license: MIT style license
authors:
  Ryan Florence (http://ryanflorence.com)
  Piotr Zalewa (http://webdev.zalewa.info)
requires:
  core:1.2.4:
  - Request.JSONP
provides: [Request.Fiddles]
...
*/
Request.Fiddles = new Class({
    Extends: Request.JSONP,
    
    options: {
        update: document.body,
        item: 'li',
        itemHtml:
            '<a href="{url}{version}" target="_blank">{title}</a> ' +
            '<p>{description}</p>',
        callbackKey: 'jsoncallback',
        website: 'http://jsfiddle.net',
        data: {
            // if not specified the ones specified in API doc will be used           
        }
    },
    
    // I had to modify the callback-function for retrieving all my fiddles
    initialize: function(user, options){
        this.parent(options);
        this.options.url = this.options.website + '/api/user/' + user + '/demo/list.json?callback=start=0&amp;limit=5000';
        this.update = document.id(this.options.update);
        this.addEvent('complete', this.listFiddles.bind(this));
    },
    
    listFiddles: function(response){
        if (response.status === 'ok'){
            response.list.each(function(fiddle){
                var html = this.options.itemHtml.substitute(fiddle);
                new Element(this.options.item, {html: html}).inject(this.update);
            }, this);
        }    
        return this;
    }    
});

// Example ------------------------------
window.addEvent('domready', function() {
    var request = new Request.Fiddles('Flocke',{
        update: 'fiddle-list'
    }).send();
});