jquery.ba-selectcolorize.js

/*!
* jQuery selectColorize - v0.2 - 3/8/2010
* http://benalman.com/projects/jquery-misc-plugins/
*
* Copyright (c) 2010 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
*/

(function($,undefined){
  '$:nomunge'; // Used by YUI compressor.
  
  // Some reused strings.
  var selectColorize = 'selectColorize',
    event_name = 'change.' + selectColorize,
    style = 'style',
    color = 'color',
    backgroundColor = 'backgroundColor';
  
  $.fn[ selectColorize ] = function( destroy ) {
    // Unbind event.
    var that = this.unbind( event_name );
    
    // Initialize or destroy.
    that.each(function(){
      var select = $(this),
        
        // These colors may need to be set on options.
        select_color = select.css( color ),
        select_backgroundColor = select.css( backgroundColor );
      
      if ( destroy !== undefined ) {
        
        // Cleanup select and all options.
        select.find('option').andSelf().each(function(){
          var elem = $(this),
            data = elem.data( selectColorize );
          
          // Revert the element style attribute back to its original state.
          data && elem[ data[ style ] ? 'attr' : 'removeAttr' ]( style, data[ style ] );
          
          // Remove any stored data.
          elem.removeData( selectColorize );
        });
        
      } else if ( !select.data( selectColorize ) ) {
        
        // Store select style attribute for later cleanup.
        select.data( selectColorize, { style: select.attr( style ) } );
        
        // For each option that doesn't have an inline color or backgroundColor,
        // set its color and backgroundColor to the select's.
        select.find('option').each(function(){
          var option = $(this),
            opt_style = this.style;
          
          // Store option style attribute for later cleanup.
          option.data( selectColorize, { style: option.attr( style ) } );
          
          // Update the option's color and backgroundColor with that of the
          // select's if they are unspecified.
          opt_style[ color ] || option.css( color, select_color );
          opt_style[ backgroundColor ] || option.css( backgroundColor, select_backgroundColor );
        });
      }
    });
    
    if ( destroy === undefined ) {
      
      // Bind event.
      that
        .bind( event_name, function(){
          var select = $(this),
            
            // Get the selected option.
            option = select.find( 'option:selected' ),
            
            // This object will hold the CSS properties.
            css = {},
            
            bg_color;
          
          // Change the select's color to that of its selected option. If the
          // option has no inline style color set, use the default color.
          if ( option.length ) {
            css[ color ] = option.css( color );
            
            // WebKit won't colorize a select if the background is solid white,
            // go figure.
            bg_color = option.css( backgroundColor );
            css[ backgroundColor ] = bg_color === 'rgb(255, 255, 255)' ? '#fffffe' : bg_color;
            
            select.css( css );
          }
        })
        .triggerHandler( event_name );
    }
    
    return that;
  };
  
})(jQuery);