Request.Fiddles

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

by Darby Rathbone

HTML

<iframe src="" id='i' frameborder="0"></iframe>Darby Rathbone's fiddles
<div>
    <ul id="fiddle-list"></ul>
</div>

CSS

iframe {
    position:fixed;
    top:0px;
    right:0px;
    bottom:0px;
    left:50%;
    width:50%;
    height:100%;
   
}
body {
    width:50%;
    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-top: solid 1px #aaaaaa;
    border-bottom: solid 1px #aaaaaa;
}
div {
    padding:10px;
}
p {
    font-size: .9em;
    color: #000000;
    padding: 5px 0 0;
    transition:all 1s linear;
}
li {
    padding:10px;
    cursor:pointer;
}

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> ' +
            '<span>{description}</span>',
        callbackKey: 'jsoncallback',
        website: 'http://jsfiddle.net',
        data: {
            // if not specified the ones specified in API doc will be used           
        }
    },

    initialize: function (user, options) {
        this.parent(options);
        this.options.url = this.options.website + '/api/user/' + user + '/demo/list.json?callback=Api&sort=alphabetical&start=0&limit=300';
        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);
        }
        var selected = null;
        var p = [].splice.call(document.querySelectorAll('a'), 0);
        p.forEach(function (e) {
            e.href += "/show/light/";
            e.addEventListener('click', function (event) {
                event.preventDefault();
                document.getElementsByTagName('iframe')[0].src = e.href;
                if (selected)
                    selected.parentElement.style.backgroundColor = 'rgba(255,255,255,0)';
                selected = e;
               ...