jquery-simplecolorpicker-rails 0.0.3 → 0.1.0

data/README.md

@@ -27,31 +27,39 @@ Add the following stylesheet file to `app/assets/stylesheets/application.css`:
 
     *= require jquery.simplecolorpicker.css
 
-If you use [simple_form](https://github.com/plataformatec/simple_form) then write this inside your form:
+If you use [simple_form](https://github.com/plataformatec/simple_form) write this inside your form:
 
     <%= f.input :color, collection: MY_COLORS, selected: my_default_color %>
 
-With `MY_COLORS` being:
+And then inside your JavaScript:
 
-    # Colors from Google Calendar
-    MY_COLORS = {
-      'Green'       => '#7bd148',
-      'Bold blue'   => '#5484ed',
-      'Blue'        => '#a4bdfc',
-      'Turquoise'   => '#46d6db',
-      'Light green' => '#7ae7bf',
-      'Bold green'  => '#51b749',
-      'Yellow'      => '#fbd75b',
-      'Orange'      => '#ffb878',
-      'Red'         => '#ff887c',
-      'Bold red'    => '#dc2127',
-      'Purple'      => '#dbadff',
-      'Gray'        => '#e1e1e1',
-    }
+```JavaScript
+$('#color').simplecolorpicker();
+```
 
-And `my_default_color` being:
+With `MY_COLORS` being:
+```ruby
+# Colors from Google Calendar
+MY_COLORS = {
+  green:       '#7bd148',
+  bold_blue:   '#5484ed',
+  blue:        '#a4bdfc',
+  turquoise:   '#46d6db',
+  light_green: '#7ae7bf',
+  bold_green:  '#51b749',
+  yellow:      '#fbd75b',
+  orange:      '#ffb878',
+  red:         '#ff887c',
+  bold_red:    '#dc2127',
+  purple:      '#dbadff',
+  gray:        '#e1e1e1'
+}
+```
 
-    my_default_color = MY_COLORS['Yellow']
+And `my_default_color` being:
+```ruby
+my_default_color = MY_COLORS[:green]
+```
 
 ## License
 

data/lib/jquery-simplecolorpicker-rails/version.rb

@@ -1,7 +1,7 @@
 module Jquery
   module Simplecolorpicker
     module Rails
-      VERSION = "0.0.3"
+      VERSION = "0.1.0"
     end
   end
 end

data/vendor/assets/javascripts/jquery.simplecolorpicker.js

@@ -7,57 +7,13 @@
  */
 
 (function($) {
-  "use strict";
+  'use strict';
 
   /**
    * Constructor.
    */
-  var SimpleColorPicker = function(element, options) {
-    this.select = $(element);
-    this.options = $.extend({}, $.fn.simplecolorpicker.defaults, options);
-
-    this.select.hide();
-
-    // Trick: fix span alignment
-    // When a span does not contain any text, its alignment is not correct
-    var fakeText = '    ';
-
-    // Build the list of colors
-    // <div class="selected" title="Green" style="background-color: #7bd148;" role="button"></div>
-    var colorList = '';
-    $('option', this.select).each(function() {
-      var option = $(this);
-      var color = option.val();
-      var title = option.text();
-      var selected = '';
-      if (option.attr('selected')) {
-        selected = 'class="selected"';
-      }
-      colorList += '<div ' + selected + ' title="' + title + '" style="background-color: ' + color + ';" role="button" tabindex="0">'
-                   + fakeText
-                   + '</div>';
-    });
-
-    if (this.options.picker) {
-      var selectText = this.select.find('option:selected').text();
-      var selectValue = this.select.val();
-      this.icon = $('<span class="simplecolorpicker icon" title="' + selectText + '" style="background-color: ' + selectValue + ';" role="button" tabindex="0">'
-                    + fakeText
-                    + '</span>').insertAfter(this.select);
-      this.icon.on('click', $.proxy(this.show, this));
-
-      this.picker = $('<span class="simplecolorpicker picker"></span>').appendTo(document.body);
-      this.picker.html(colorList);
-      this.picker.on('click', $.proxy(this.click, this));
-
-      // Hide picker when clicking outside
-      $(document).on('mousedown', $.proxy(this.hide, this));
-      this.picker.on('mousedown', $.proxy(this.mousedown, this));
-    } else {
-      this.inline = $('<span class="simplecolorpicker inline"></span>').insertAfter(this.select);
-      this.inline.html(colorList);
-      this.inline.on('click', $.proxy(this.click, this));
-    }
+  var SimpleColorPicker = function(select, options) {
+    this.init('simplecolorpicker', select, options);
   };
 
   /**
@@ -66,19 +22,69 @@
   SimpleColorPicker.prototype = {
     constructor: SimpleColorPicker,
 
-    show: function() {
+    init: function(type, select, options) {
+      this.type = type;
+
+      this.$select = $(select);
+      this.options = $.extend({}, $.fn.simplecolorpicker.defaults, options);
+
+      this.$select.hide();
+
+      // Trick: fix span alignment
+      // When a span does not contain any text, its alignment is not correct
+      var fakeText = '&nbsp;&nbsp;&nbsp;&nbsp;';
+
+      // Build the list of colors
+      // <div class="selected" title="Green" style="background-color: #7bd148;" role="button"></div>
+      var colorList = '';
+      $('option', this.$select).each(function() {
+        var option = $(this);
+        var color = option.val();
+        var title = option.text();
+        var selected = '';
+        if (option.attr('selected')) {
+          selected = 'class="selected"';
+        }
+        colorList += '<div ' + selected + ' title="' + title + '" style="background-color: ' + color + ';" role="button" tabindex="0">'
+                     + fakeText
+                     + '</div>';
+      });
+
+      if (this.options.picker) {
+        var selectText = this.$select.find('option:selected').text();
+        var selectValue = this.$select.val();
+        this.$icon = $('<span class="simplecolorpicker icon" title="' + selectText + '" style="background-color: ' + selectValue + ';" role="button" tabindex="0">'
+                      + fakeText
+                      + '</span>').insertAfter(this.$select);
+        this.$icon.on('click.' + this.type, $.proxy(this.showPicker, this));
+
+        this.$picker = $('<span class="simplecolorpicker picker"></span>').appendTo(document.body);
+        this.$picker.html(colorList);
+        this.$picker.on('click.' + this.type, $.proxy(this.click, this));
+
+        // Hide picker when clicking outside
+        $(document).on('mousedown.' + this.type, $.proxy(this.hidePicker, this));
+        this.$picker.on('mousedown.' + this.type, $.proxy(this.mousedown, this));
+      } else {
+        this.$inline = $('<span class="simplecolorpicker inline"></span>').insertAfter(this.$select);
+        this.$inline.html(colorList);
+        this.$inline.on('click.' + this.type, $.proxy(this.click, this));
+      }
+    },
+
+    showPicker: function() {
       var bootstrapArrowWidth = 16; // Empirical value
-      var pos = this.icon.offset();
-      this.picker.css({
-        left: pos.left + this.icon.width() / 2 - bootstrapArrowWidth, // Middle of the icon
-        top: pos.top + this.icon.outerHeight()
+      var pos = this.$icon.offset();
+      this.$picker.css({
+        left: pos.left + this.$icon.width() / 2 - bootstrapArrowWidth, // Middle of the icon
+        top: pos.top + this.$icon.outerHeight()
       });
 
-      this.picker.show(this.options.delay);
+      this.$picker.show(this.options.delay);
     },
 
-    hide: function() {
-      this.picker.hide(this.options.delay);
+    hidePicker: function() {
+      this.$picker.hide(this.options.delay);
     },
 
     click: function(e) {
@@ -95,15 +101,13 @@
           target.addClass('selected');
 
           if (this.options.picker) {
-            this.icon.css('background-color', color);
-            this.icon.attr('title', title);
-
-            // Hide the picker
-            this.hide();
+            this.$icon.css('background-color', color);
+            this.$icon.attr('title', title);
+            this.hidePicker();
           }
 
-          // Change select value
-          this.select.val(this.rgb2hex(color)).change();
+          // Change HTML select value
+          this.$select.val(this.rgb2hex(color)).change();
         }
       }
     },
@@ -123,7 +127,7 @@
      */
     rgb2hex: function(rgb) {
       function hex(x) {
-        return ("0" + parseInt(x, 10).toString(16)).slice(-2);
+        return ('0' + parseInt(x, 10).toString(16)).slice(-2);
       }
 
       var matches = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
@@ -132,13 +136,30 @@
         // Variable rgb is already a hexadecimal value
         return rgb;
       } else {
-        return "#" + hex(matches[1]) + hex(matches[2]) + hex(matches[3]);
+        return '#' + hex(matches[1]) + hex(matches[2]) + hex(matches[3]);
       }
+    },
+
+    destroy: function() {
+      if (this.options.picker) {
+        this.$icon.off('.' + this.type);
+        this.$icon.remove();
+        this.$picker.off('.' + this.type);
+        this.$picker.remove();
+        $(document).off('.' + this.type);
+      } else {
+        this.$inline.off('.' + this.type);
+        this.$inline.remove();
+      }
+
+      this.$select.removeData(this.type);
+      this.$select.show();
     }
   };
 
   /**
    * Plugin definition.
+   * How to use: $('#id').simplecolorpicker()
    */
   $.fn.simplecolorpicker = function(option) {
     // For HTML element passed to the plugin
@@ -146,7 +167,7 @@
       var $this = $(this),
         data = $this.data('simplecolorpicker'),
         options = typeof option === 'object' && option;
-      if (!data) {
+      if (data === undefined) {
         $this.data('simplecolorpicker', (data = new SimpleColorPicker(this, options)));
       }
       if (typeof option === 'string') {
@@ -155,8 +176,6 @@
     });
   };
 
-  $.fn.simplecolorpicker.Constructor = SimpleColorPicker;
-
   /**
    * Default options.
    */

data/vendor/assets/stylesheets/jquery.simplecolorpicker.css

@@ -10,7 +10,7 @@
  * See http://twitter.github.com/bootstrap/assets/css/bootstrap.css
  */
 
-.simplecolorpicker:before {
+.simplecolorpicker.picker:before {
   position: absolute;
   top: -7px;
   left: 9px;
@@ -22,7 +22,7 @@
   content: '';
 }
 
-.simplecolorpicker:after {
+.simplecolorpicker.picker:after {
   position: absolute;
   top: -6px;
   left: 10px;
@@ -37,7 +37,7 @@
   position: absolute;
   top: 100%;
   left: 0;
-  z-index: 1000;
+  z-index: 1051; /* Above Bootstrap modal (z-index of 1050) */
   display: none;
   float: left;
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jquery-simplecolorpicker-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.1.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,11 +9,11 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-06-25 00:00:00.000000000 Z
+date: 2012-12-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
-  requirement: &21522120 !ruby/object:Gem::Requirement
+  requirement: &70176716718180 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -21,7 +21,7 @@ dependencies:
         version: 3.1.0
   type: :runtime
   prerelease: false
-  version_requirements: *21522120
+  version_requirements: *70176716718180
 description: simplecolorpicker jQuery plugin
 email:
 - tkrotoff@gmail.com
@@ -59,7 +59,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 1.8.16
+rubygems_version: 1.8.15
 signing_key: 
 specification_version: 3
 summary: simplecolorpicker packaged for the Rails 3.1+ asset pipeline