jquery-simplecolorpicker-rails 0.1.0 → 0.2.0

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

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

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

@@ -23,52 +23,77 @@
     constructor: SimpleColorPicker,
 
     init: function(type, select, options) {
-      this.type = type;
+      var self = this;
 
-      this.$select = $(select);
-      this.options = $.extend({}, $.fn.simplecolorpicker.defaults, options);
+      self.type = type;
 
-      this.$select.hide();
+      self.$select = $(select);
+      var selectValue = self.$select.val();
+      self.options = $.extend({}, $.fn.simplecolorpicker.defaults, options);
+
+      self.$select.hide();
 
       // Trick: fix span alignment
       // When a span does not contain any text, its alignment is not correct
       var fakeText = '    ';
 
+      self.$colorList = null;
+
+      if (self.options.picker) {
+        var selectText = self.$select.find('option:selected').text();
+        self.$icon = $('<span class="simplecolorpicker icon" title="' + selectText + '" style="background-color: ' + selectValue + ';" role="button" tabindex="0">'
+                     + fakeText
+                     + '</span>').insertAfter(self.$select);
+        self.$icon.on('click.' + self.type, $.proxy(self.showPicker, self));
+
+        self.$picker = $('<span class="simplecolorpicker picker"></span>').appendTo(document.body);
+        self.$colorList = self.$picker;
+
+        // Hide picker when clicking outside
+        $(document).on('mousedown.' + self.type, $.proxy(self.hidePicker, self));
+        self.$picker.on('mousedown.' + self.type, $.proxy(self.mousedown, self));
+      } else {
+        self.$inline = $('<span class="simplecolorpicker inline"></span>').insertAfter(self.$select);
+        self.$colorList = self.$inline;
+      }
+
       // 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 colors = '';
+      $('option', self.$select).each(function() {
         var option = $(this);
         var color = option.val();
         var title = option.text();
         var selected = '';
-        if (option.attr('selected')) {
+        if (option.prop('selected') === true || selectValue === color) {
           selected = 'class="selected"';
         }
-        colorList += '<div ' + selected + ' title="' + title + '" style="background-color: ' + color + ';" role="button" tabindex="0">'
-                     + fakeText
-                     + '</div>';
+        colors += '<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));
+      self.$colorList.html(colors);
+      self.$colorList.on('click.' + self.type, $.proxy(self.click, self));
+    },
 
-        this.$picker = $('<span class="simplecolorpicker picker"></span>').appendTo(document.body);
-        this.$picker.html(colorList);
-        this.$picker.on('click.' + this.type, $.proxy(this.click, this));
+    /**
+     * Changes the selected color.
+     *
+     * @param color the hexadecimal color to select, ex: '#fbd75b'
+     */
+    selectColor: function(color) {
+      var self = 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));
+      var colorDiv = self.$colorList.find('div').filter(function() {
+        var col = $(this).css('background-color');
+        return self.rgb2hex(col) === color;
+      });
+
+      if (colorDiv.length > 0) {
+        self.selectColorDiv(colorDiv);
       } 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));
+        console.error("The given color '" + color + "' could not be found");
       }
     },
 
@@ -87,27 +112,39 @@
       this.$picker.hide(this.options.delay);
     },
 
-    click: function(e) {
-      var target = $(e.target);
-      if (target.length === 1) {
-        if (target[0].nodeName.toLowerCase() === 'div') {
-          // When you click on a color
+    /**
+     * Selects the given div inside $colorList.
+     *
+     * The given div becomes the selected one.
+     * It also changes the HTML select value, this will emit the 'change' event.
+     */
+    selectColorDiv: function(colorDiv) {
+      var color = colorDiv.css('background-color');
+      var title = colorDiv.prop('title');
 
-          var color = target.css('background-color');
-          var title = target.attr('title');
+      // Mark this div as the selected one
+      colorDiv.siblings().removeClass('selected');
+      colorDiv.addClass('selected');
 
-          // Mark this div as the selected one
-          target.siblings().removeClass('selected');
-          target.addClass('selected');
+      if (this.options.picker) {
+        this.$icon.css('background-color', color);
+        this.$icon.prop('title', title);
+        this.hidePicker();
+      }
 
-          if (this.options.picker) {
-            this.$icon.css('background-color', color);
-            this.$icon.attr('title', title);
-            this.hidePicker();
-          }
+      // Change HTML select value
+      this.$select.val(this.rgb2hex(color)).change();
+    },
 
-          // Change HTML select value
-          this.$select.val(this.rgb2hex(color)).change();
+    /**
+     * The user clicked on a div inside $colorList.
+     */
+    click: function(e) {
+      var target = $(e.target);
+      if (target.length === 1) {
+        if (target[0].nodeName.toLowerCase() === 'div') {
+          // When you click on a color, make it the new selected one
+          this.selectColorDiv(target);
         }
       }
     },
@@ -144,14 +181,12 @@
       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.$colorList.off('.' + this.type);
+      this.$colorList.remove();
+
       this.$select.removeData(this.type);
       this.$select.show();
     }
@@ -162,6 +197,9 @@
    * How to use: $('#id').simplecolorpicker()
    */
   $.fn.simplecolorpicker = function(option) {
+    var args = $.makeArray(arguments);
+    args.shift();
+
     // For HTML element passed to the plugin
     return this.each(function() {
       var $this = $(this),
@@ -171,7 +209,7 @@
         $this.data('simplecolorpicker', (data = new SimpleColorPicker(this, options)));
       }
       if (typeof option === 'string') {
-        data[option]();
+        data[option].apply(data, args);
       }
     });
   };

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jquery-simplecolorpicker-rails
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,11 +9,11 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-12-06 00:00:00.000000000 Z
+date: 2013-02-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
-  requirement: &70176716718180 !ruby/object:Gem::Requirement
+  requirement: &25882020 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -21,7 +21,7 @@ dependencies:
         version: 3.1.0
   type: :runtime
   prerelease: false
-  version_requirements: *70176716718180
+  version_requirements: *25882020
 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.15
+rubygems_version: 1.8.16
 signing_key: 
 specification_version: 3
 summary: simplecolorpicker packaged for the Rails 3.1+ asset pipeline