My Fiddles
by SpYk3
HTML
<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
Request.Fiddles = new Class({
Extends: Request.JSONP,
options: {
callbackKey: 'jsoncallback',
data: {},
update: document.body,
website: 'http://jsfiddle.net'
},
initialize: function(user, options) {
if (!options.limit) {
var url = this.options.website + '/api/user/' + user + '/demo/list.json?callback=Api&limit=1';
this.parent(options);
this.options.url = url;
this.addEvent('complete', this.getFiddlesCount.bind(this));
}
else {
var limit = options.limit,
start = options.start,
url = this.options.website + '/api/user/' + user + '/demo/list.json?start='+start+'&limit='+limit+'&sort=date&order=desc';
this.parent(options);
this.options.url = url;
this.update = document.id(this.options.update);
this.addEvent('complete', this.listFiddles.bind(this));
}
},
getFiddlesCount: function(response) {
if (console.log) console.log('opts', [this.options])
if (response.status === 'ok' && response.overallResultSetCount) {
var reqOpts = {
item: 'li',
itemHtml: '<a href="{url}{version}" target="_blank">{title}</a> <span>Created: [{created}] | Ver: [{latest_version}] | Framework: [{framework}]</span><p>{description}</p>',
limit: response.overallResultSetCount,
start: this.options.getStart,
update: 'fiddle-list'
};
if (reqOpts.limit > reqOpts.start + 199) {
reqOpts.limit = reqOpts.getStart = reqOpts.start + 199;
}
else if (reqOpts.limit > 199) reqOpts.limit -= 199;
if (console.log) console.log('reqOpts', reqOpts)
// TODO: following if statement kills it for now. It appears you can't do anything more than 0-199 for now!
if (reqOpts.start >= 199) return this;
var request = new Request.Fiddles('spyk3', reqOpts).send();
}
return 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:...