Colorrrs

application.js

/*  Application.js - 
* This could be improved 10 fold but I'll upt it up on here anyway :)
* 
* @require jQuery hashchange plugin by Ben Alman http://benalman.com/projects/jquery-hashchange-plugin
*
* @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.
*
*/
$(function(){ 
    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" http://dribbble.com/colors/+color
      var yql = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fdribbble.com%2Fcolors%2F" + 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.
      $(".error").remove();

      // 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 ???
      $('.container').load('http://google.com'); 
      
      // "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...

        $(data.query.results.li).each(function(){                           // 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: "http://dribbble.com"+shot.a[0].href,                              // Drill down to get the shot's source URL
            src: 'http://dribbble.com/'+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('{{url}}',data.url)
              .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
          $(tmpl).appendTo(".dribbbles");
          
        });
      } 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
    })

    $("form").submit(function(){
      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;
    });
    
    $("#random").click(function(){
      // @var color - generates random hex color http://paulirish.com/2009/random-hex-color-code-snippets/
      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 || window.location.search || 'EA4C89').replace(/\#|\?color\=|\%23/g, ''));

});