LatestDribbbles

LatestDribbbles

HTML

<h1>Latest <a href="http://dribbble.com/">@dribbble</a> uploads</h1>

<form id="switch-player">
    <fieldset>
        <label>Player</label>
        
        <input type="text" name="newPlayer" value="oskar" />
        <input type="submit" value="enters the field" />
    </fieldset>
</form>

<ul id="latest-dribbbles"></ul>

CSS

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #333;
    font-size: .8em;
    background: url(http://dribbble.com/images/tile.gif);
}

h1 {
    margin: 0 0 15px;
    font-size: 1.5em;
}

a {
    color: #478CDE;
    text-decoration: none;
}

span {
    font-size: .8em;
    color: #7F7F7F;
}

img {
    vertical-align: bottom;
}

li {
    margin: 5px;
    padding: 5px;
    display: inline-block;
    vertical-align: top;
    background: rgba(255, 255, 255, 0.8);
    -webkit-transition: all 0.5s ease-out;
    -webkit-transform: scale(0);
}

li.show {
    -webkit-transform: scale(1.0);
}

p {
    font-size: .9em;
    color: #7F7F7F;
    padding: 5px 0 0;
}

input {
    padding: 4px;
}

form {
    margin: 15px 0;
}

JavaScript

// by Oskar Krawczyk (http://nouincolor.com)

var LatestDribbbles = new Class({
    
    Implements: [Options, Events],
    
    options: {
        // onLoad: $empty
    },
    
    initialize: function(cont, options){
        this.setOptions(options);
        this.cont = cont;
        this.request();
    },
    
    request: function(){
        new Request.JSONP({
            url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D'http%3A%2F%2Fdribbble.com%2Fplayers%2F{player}'%20and%20xpath%3D%22%2F%2F*%5Bcontains(%40class%2C'dribbble-link')%5D%22&format=json&diagnostics=true".substitute(this.options),
            onComplete: this.fetchLatestDribbbles.bind(this)
        }).send();
    },
    
    fetchLatestDribbbles: function(response){
        response.query.results.a.slice(0, $pick(this.options.limit, 50)).each(function(dribbble){
            
            dribbble = $merge(dribbble, {
                alt: dribbble.img.alt,
                src: dribbble.img.src
            });
            
            new Element('li', {
                html: '<a href="http://dribbble.com{href}"><img src="http://dribbble.com{src}" /></a>'.substitute(dribbble)
            }).inject(this.cont);
            
        }, this);
        
        this.fireEvent('onLoad');
    }
});

var latestDribbblesEl = $('latest-dribbbles'), switchPlayerEl = $('switch-player');

switchPlayerEl.addEvents({
    submit: function(e){
        if (e) e.stop();

        latestDribbblesEl.empty();

        new LatestDribbbles(latestDribbblesEl, {
            player: this.getElement('input[type=text]').get('value'),
            limit: 7,
            onLoad: function(){
                
                // add some funkyness when dribbbles are loaded
                this.cont.getElements('li').each(function(el, index){
                    (function(){
                        this.addClass('show');
                    }).delay(100 * index, el);
                });
        ...