/*
---
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
}
},
initialize: function(user, options){
this.parent(options);
this.options.url = this.options.website + '/api/user/' + user + '/demo/list.json';
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('zalun',{
update: 'fiddle-list'
}).send();
});
<ul id="fiddle-list"></ul>
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;
}