Bump version to 1.1.2.

README.markdown

@@ -170,6 +170,7 @@ Total time: 2 seconds
 Change history
 -----------
 
+* **Version 1.1.2 (2013-04-06)** : Add onCellEnter, onClose and livePreview options (thanks [jbergen](https://github.com/jbergen)).
 * **Version 1.1.1 (2013-03-29)** : Add callback option (thanks [jbergen](https://github.com/jbergen)).
 * **Version 1.1.0 (2012-10-14)** : Remove select and cancel buttons (thanks [wesnolte](https://github.com/wesnolte)).
 * **Version 1.0.1 (2011-08-15)** : Trigger change() event when a color is selected (thanks [firstclown](https://github.com/firstclown)), and make colored display box clickable to select colors.

VERSION

@@ -1 +1 @@
-1.1.1
+1.1.2

jquery.simple-color.js

@@ -7,7 +7,7 @@
  * Licensed under the MIT license:
  *   http://www.opensource.org/licenses/mit-license.php
  *
- * Version: 1.1.1 (201303290104)
+ * Version: 1.1.2 (201304062015)
  */
  (function($) {
 /**
@@ -56,6 +56,18 @@
  *
  *  callback:           Callback function to call after a color has been chosen.
  *                      Default value: null
+ *                      Returns:       hex value
+ *
+ *  onCellEnter:        Callback function that excecutes when the mouse enters a cell.
+ *                      Default value: null
+ *                      Returns:       hex value
+ *
+ *  onClose:            Callback function that executes when the chooser is closed.
+ *                      Default value: null
+ *
+ *  livePreview:        The color display will change to show the color of the hovered color cell.
+ *                      The display will revert if no color is selected.
+ *                      Default value: false
  */
   $.fn.simpleColor = function(options) {
 
@@ -106,7 +118,10 @@
       displayColorCode: this.attr('displayColorCode') || false,
       colorCodeAlign:   this.attr('colorCodeAlign') || 'center',
       colorCodeColor:   this.attr('colorCodeColor') || '#FFF',
-      callback:         null
+      callback:         null,
+      onCellEnter:      null,
+      onClose:          null,
+      livePreview:      false
     }, options || {});
 
     // Hide the input
@@ -141,26 +156,47 @@
       var display_box = $("<div class='simpleColorDisplay' />");
       display_box.css({
         'backgroundColor': default_color,
-      	'border':          options.border,
-				'width':           options.boxWidth,
-				'height':          options.boxHeight,
-				// Make sure that the code is vertically centered.
-				'line-height':     options.boxHeight,
-				'cursor':          'pointer'
-			});
+        'border':          options.border,
+        'width':           options.boxWidth,
+        'height':          options.boxHeight,
+        // Make sure that the code is vertically centered.
+        'line-height':     options.boxHeight,
+        'cursor':          'pointer'
+      });
       container.append(display_box);
 
       // If 'displayColorCode' is turned on, display the currently selected color code as text inside the button.
       if (options.displayColorCode) {
         display_box.text(this.value);
         display_box.css({
           'color':     options.colorCodeColor,
-        	'textAlign': options.colorCodeAlign
+          'textAlign': options.colorCodeAlign
         });
       }
 
       var select_callback = function (event) {
 
+        // Bind and namespace the click listener only when the chooser is 
+        // displayed. Unbind when the chooser is closed.
+        $('html').bind("click.simpleColorDisplay", function(e) {
+          $('html').unbind("click.simpleColorDisplay");
+          $('.simpleColorChooser').hide();
+
+          // If the user has not selected a new color, then revert the display.
+          // Makes sure the selected cell is within the current color selector.
+          var target = $(e.target);
+          if (target.is('.simpleColorCell') === false || $.contains( $(event.target).closest('.simpleColorContainer')[0], target[0]) === false) {
+            display_box.css('backgroundColor', default_color);
+            if (options.displayColorCode) {
+              display_box.text(default_color);
+            }
+          }
+          // Execute onClose callback whenever the color chooser is closed.
+          if (options.onClose) {
+            options.onClose();
+          }
+        });
+
         // Use an existing chooser if there is one
         if (event.data.container.chooser) {
           event.data.container.chooser.toggle();
@@ -172,13 +208,13 @@
           var chooser = $("<div class='simpleColorChooser'/>");
           chooser.css({
             'border':   options.border,
-			      'margin':   '0 0 0 5px',
-			      'width':    options.totalWidth,
-			      'height':   options.totalHeight,
-						'top':      0,
-						'left':     options.boxWidth,
-						'position': 'absolute'
-					});
+            'margin':   '0 0 0 5px',
+            'width':    options.totalWidth,
+            'height':   options.totalHeight,
+            'top':      0,
+            'left':     options.boxWidth,
+            'position': 'absolute'
+          });
 
           event.data.container.chooser = chooser;
           event.data.container.append(chooser);
@@ -188,16 +224,28 @@
             var cell = $("<div class='simpleColorCell' id='" + options.colors[i] + "'/>");
             cell.css({
               'width':           options.cellWidth + 'px',
-             	'height':          options.cellHeight + 'px',
-			        'margin':          options.cellMargin + 'px',
-			        'cursor':          'pointer',
-			        'lineHeight':      options.cellHeight + 'px',
-			        'fontSize':        '1px',
-			        'float':           'left',
-			        'backgroundColor': '#'+options.colors[i]
-			      });
+              'height':          options.cellHeight + 'px',
+              'margin':          options.cellMargin + 'px',
+              'cursor':          'pointer',
+              'lineHeight':      options.cellHeight + 'px',
+              'fontSize':        '1px',
+              'float':           'left',
+              'backgroundColor': '#'+options.colors[i]
+            });
             chooser.append(cell);
-
+            if (options.onCellEnter || options.livePreview) {
+              cell.bind('mouseenter', function(event) {
+                if (options.onCellEnter) {
+                  options.onCellEnter(this.id);
+                }
+                if (options.livePreview) {
+                  display_box.css('backgroundColor', '#' + this.id);
+                  if (options.displayColorCode) {
+                    display_box.text('#' + this.id);
+                  }
+                }
+              });
+            }
             cell.bind('click', {
               input: event.data.input, 
               chooser: chooser, 
@@ -239,15 +287,11 @@
 
     this.each(buildSelector);
 
-		$('html').click(function() {
-			$('.simpleColorChooser').hide();
-		});
-
-		$('.simpleColorDisplay').each(function() {
-			$(this).click(function(e){
-				e.stopPropagation();
-			});
-		});
+    $('.simpleColorDisplay').each(function() {
+      $(this).click(function(e){
+        e.stopPropagation();
+      });
+    });
 
     return this;
   };