Skip to content

Instantly share code, notes, and snippets.

Created August 5, 2011 19:56
Show Gist options
  • Save davatron5000/1128364 to your computer and use it in GitHub Desktop.
Save davatron5000/1128364 to your computer and use it in GitHub Desktop.
/* Application.js -
* This could be improved 10 fold but I'll upt it up on here anyway :)
* @require jQuery hashchange plugin by Ben Alman
* @var errorTmpl - template for injected error message.
* @var errorHex - verbiage for invalid hex formatting (could be better).
* @var errorNull - verbiage for call with no results.
var errorTmpl = "<p class=error>{{msg}}</p>";
var errorHex = "Oh noes! There's a problem with your color.";
var errorNull = "Bummer, no shots found matching this color.";
$.support.cors = true; // Opera is dertermined to require this.
function getShots(color) {
// Build single YQL query with our supplied color to "scrape"
var yql = "*" + encodeURIComponent(color) + "%22%20and%0A%20%20%20%20%20%20xpath%3D'%2F%2Fdiv%5B%40id%3D%22main%22%5D%2Fol%2Fli'&format=json&diagnostics=true&&callback=?";
// Give access to a premade a "hex" value
var hex = '#'+color;
// If there was an error, kill it.
// Give Opera a hex value since it supports input[type=color] for when it updates the input
$.browser.opera ? $("#color").val(hex) : $("#color").val(color);
// SERIOUSLY! not sure why i have this. but it's supposed to help CORS ???
// "Validate" the color.
if(color.length !== 6) {
// If not valid...
$("#loading").hide(); // Hide the loader.
$(".dribbbles").before(errorTmpl.replace('{{msg}}', errorHex)); // Throw @errorHex msg.
} else {
// If valid...
$(".dribbbles").hide().empty(); // Hide & empty Dribbbles
$("#loading").show(); // Show the loader.
$.support.cors = true; // Well crap. I have this again.
$.getJSON(yql, cbFunc) // Make the YQL Query and go to cbFunc() on success.
.success(function() { // Also on success, do the following...
$("body").css({ 'border-top-color': hex }); // Change the color of the top stripe.
$("a").css({ 'color': hex }); // Change the logo and link colors.
$(".error").css({'background': hex }); // Change the .error color (if errorNull is thrown)
$("#loading").hide(); // Hide the loader, we're done.
$(".dribbbles").fadeIn(); // Fade in the Dribbbles all sexy like.
/* Callback Function
* @var shot - the JSON object correlating to the shot DOM node.
* @var data - the data to be injected into our @tmpl template
* @var tmpl - ghetto faux moustacheJS template that I do a bunch of replaces on.
function cbFunc(data) {
if(data.query.results) {
// If the YQL call returns data,
// it essentially returns a DOM object in JSON form, so...
$({ // Drill down into the results and work on each LI.
var shot = this.div.div; // Set a shot to be LI > DIV > DIV
if(shot.length) { shot = shot[0].div; } else { shot = shot.div; } // Occasionally a shot has a rebound, adjust for this.
// Set up our data to be injected.
var data = {
url: ""+shot.a[0].href, // Drill down to get the shot's source URL
src: ''+shot.a[0].img.src.replace('_teaser.', '.'), // Build the image URL but get the large image instead of the _teaser
alt: shot.a[0].img.alt, // Steal the ALT tag
title: shot.a[1].strong, // Steal the title
username: this.h2.a.content // Get the username from the LI > H2 > A
// Fill the template {{tags}} with the corresponding data.
var tmpl = '<li><div class=shot_img><a href={{url}}><img src={{src}} alt="{{alt}}"/></a></div><div class=shot_desc><h3><a href={{url}}>{{title}}</a></h3><p>by {{username}}</p></div></li>'
.replace('{{src}}', data.src)
.replace('{{alt}}', data.alt)
.replace('{{title}}', data.title)
.replace('{{username}}', data.username);
// .dribbbles should be empty so let's fill it with our new friends
} else {
// If the YQL returns no data, throw the @errorNull msg.
$(".dribbbles").before(errorTmpl.replace('{{msg}}', errorNull));
$(window).hashchange( function(){
getShots(location.hash.replace('#','')); // change the hash with benalman's hashchange
getShots($("#color").val().replace('#','')); // "Santize" form submission and get shots.
history.pushState({}, null, $("#color").val()); // html5 pushState - could be the source of my Chrome 12 error
return false;
// @var color - generates random hex color
var color = (function lol(m,s,c){return s[m.floor(m.random() * s.length)] + (c && lol(m,s,c-1));})(Math,'0123456789ABCDEF',4);
getShots(color); // Get shots.
history.pushState({}, null, "#"+color); // html5 pushState
return false;
/* "Init" Function for first page load.
* Get the window hash (#000000) if it exists, and that's our color.
* Get the search query (?color=000000) if that exists.
* Default to Dribbble Pink #EA4C89.
* Sanitize that data through a regex replace. Matches ('#', '?color=', '%23');
getShots((window.location.hash || || 'EA4C89').replace(/\#|\?color\=|\%23/g, ''));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment