jquery-simplecolorpicker-rails 0.4.0 → 0.5.0

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

@@ -1,7 +1,7 @@
 module Jquery
   module Simplecolorpicker
     module Rails
-      VERSION = "0.4.0"
+      VERSION = "0.5.0"
     end
   end
 end

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

@@ -29,60 +29,79 @@
       self.type = type;
 
       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.options = $.extend({}, $.fn.simplecolorpicker.defaults, options);
 
       self.$colorList = null;
 
-      if (self.options.picker) {
-        var selectText = self.$select.find('option:selected').text();
+      if (self.options.picker === true) {
+        var selectText = self.$select.find('> option:selected').text();
         self.$icon = $('<span class="simplecolorpicker icon"'
                      + ' title="' + selectText + '"'
-                     + ' style="background-color: ' + selectValue + ';"'
+                     + ' style="background-color: ' + self.$select.val() + ';"'
                      + ' 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.$picker = $('<span class="simplecolorpicker picker ' + self.options.theme + '"></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.$inline = $('<span class="simplecolorpicker inline ' + self.options.theme + '"></span>').insertAfter(self.$select);
         self.$colorList = self.$inline;
       }
 
       // Build the list of colors
-      // <span class="selected" title="Green" style="background-color: #7bd148;" role="button"></span>
-      var colors = '';
-      $('option', self.$select).each(function() {
-        var option = $(this);
-        var color = option.val();
-        var title = option.text();
+      // <span class="color selected" title="Green" style="background-color: #7bd148;" role="button"></span>
+      self.$select.find('> option').each(function() {
+        var $option = $(this);
+        var color = $option.val();
+
+        var isSelected = $option.is(':selected');
+        var isDisabled = $option.is(':disabled');
+
         var selected = '';
-        if (option.prop('selected') === true || selectValue === color) {
-          selected = 'class="selected"';
+        if (isSelected === true) {
+          selected = ' data-selected';
+        }
+
+        var disabled = '';
+        if (isDisabled === true) {
+          disabled = ' data-disabled';
         }
-        colors += '<span ' + selected
-                + ' title="' + title + '"'
-                + ' style="background-color: ' + color + ';"'
-                + ' data-color="' + color + '"'
-                + ' role="button" tabindex="0">'
-                + fakeText
-                + '</span>';
-      });
 
-      self.$colorList.html(colors);
-      self.$colorList.on('click.' + self.type, $.proxy(self.click, self));
+        var title = '';
+        if (isDisabled === false) {
+          title = ' title="' + $option.text() + '"';
+        }
+
+        var role = '';
+        if (isDisabled === false) {
+          role = ' role="button" tabindex="0"';
+        }
+
+        var $colorSpan = $('<span class="color"'
+                         + title
+                         + ' style="background-color: ' + color + ';"'
+                         + ' data-color="' + color + '"'
+                         + selected
+                         + disabled
+                         + role + '>'
+                         + '</span>');
+
+        self.$colorList.append($colorSpan);
+        $colorSpan.on('click.' + self.type, $.proxy(self.colorSpanClicked, self));
+
+        var $next = $option.next();
+        if ($next.is('optgroup') === true) {
+          // Vertical break, like hr
+          self.$colorList.append('<span class="vr"></span>');
+        }
+      });
     },
 
     /**
@@ -93,30 +112,30 @@
     selectColor: function(color) {
       var self = this;
 
-      var colorSpan = self.$colorList.find('span').filter(function() {
+      var $colorSpan = self.$colorList.find('> span.color').filter(function() {
         return $(this).data('color').toLowerCase() === color.toLowerCase();
       });
 
-      if (colorSpan.length > 0) {
-        self.selectColorSpan(colorSpan);
+      if ($colorSpan.length > 0) {
+        self.selectColorSpan($colorSpan);
       } else {
         console.error("The given color '" + color + "' could not be found");
       }
     },
 
     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
+        // Remove some pixels to align the picker icon with the icons inside the dropdown
+        left: pos.left - 6,
         top: pos.top + this.$icon.outerHeight()
       });
 
-      this.$picker.show(this.options.delay);
+      this.$picker.show(this.options.pickerDelay);
     },
 
     hidePicker: function() {
-      this.$picker.hide(this.options.delay);
+      this.$picker.hide(this.options.pickerDelay);
     },
 
     /**
@@ -125,15 +144,15 @@
      * The given span becomes the selected one.
      * It also changes the HTML select value, this will emit the 'change' event.
      */
-    selectColorSpan: function(colorSpan) {
-      var color = colorSpan.data('color');
-      var title = colorSpan.prop('title');
+    selectColorSpan: function($colorSpan) {
+      var color = $colorSpan.data('color');
+      var title = $colorSpan.prop('title');
 
       // Mark this span as the selected one
-      colorSpan.siblings().removeClass('selected');
-      colorSpan.addClass('selected');
+      $colorSpan.siblings().removeAttr('data-selected');
+      $colorSpan.attr('data-selected', '');
 
-      if (this.options.picker) {
+      if (this.options.picker === true) {
         this.$icon.css('background-color', color);
         this.$icon.prop('title', title);
         this.hidePicker();
@@ -144,16 +163,13 @@
     },
 
     /**
-     * The user clicked on a span inside $colorList.
+     * The user clicked on a color inside $colorList.
      */
-    click: function(e) {
-      var target = $(e.target);
-      if (target.length === 1) {
-        if (target[0].nodeName.toLowerCase() === 'span') {
-          // When you click on a color, make it the new selected one
-          this.selectColorSpan(target);
-          this.$select.trigger('change');
-        }
+    colorSpanClicked: function(e) {
+      // When a color is clicked, make it the new selected one (unless disabled)
+      if ($(e.target).is('[data-disabled]') === false) {
+        this.selectColorSpan($(e.target));
+        this.$select.trigger('change');
       }
     },
 
@@ -166,7 +182,7 @@
     },
 
     destroy: function() {
-      if (this.options.picker) {
+      if (this.options.picker === true) {
         this.$icon.off('.' + this.type);
         this.$icon.remove();
         $(document).off('.' + this.type);
@@ -206,11 +222,14 @@
    * Default options.
    */
   $.fn.simplecolorpicker.defaults = {
-    // Animation delay
-    delay: 0,
+    // No theme by default
+    theme: '',
 
     // Show the picker or make it inline
-    picker: false
+    picker: false,
+
+    // Animation delay in milliseconds
+    pickerDelay: 0
   };
 
 })(jQuery);

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

@@ -0,0 +1,9 @@
+.simplecolorpicker.fontawesome span.color[data-selected]:after {
+  font-family: 'FontAwesome';
+  -webkit-font-smoothing: antialiased;
+
+  content: '\f00c'; /* Ok/check mark */
+
+  margin-right: 1px;
+  margin-left: 1px;
+}

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

@@ -0,0 +1,13 @@
+.simplecolorpicker.glyphicons span.color[data-selected]:after {
+  /* Taken from glyphicon class. */
+  position: relative;
+  top: 1px;
+  font-family: 'Glyphicons Halflings';
+  line-height: .9;
+  -webkit-font-smoothing: antialiased;
+
+  content: '\e013'; /* Ok/check mark */
+
+  margin-right: 1px;
+  margin-left: 1px;
+}

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

@@ -0,0 +1,6 @@
+.simplecolorpicker.regularfont span.color[data-selected]:after {
+  content: '\2714'; /* Ok/check mark */
+
+  margin-right: 2.2px;
+  margin-left: 2.2px;
+}

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

@@ -9,90 +9,79 @@
 
 /**
  * Inspired by Bootstrap Twitter.
- * See https://github.com/twitter/bootstrap/blob/master/less/dropdowns.less
- * See http://twitter.github.com/bootstrap/assets/css/bootstrap.css
+ * See https://github.com/twbs/bootstrap/blob/master/less/navbar.less
+ * See https://github.com/twbs/bootstrap/blob/master/less/dropdowns.less
  */
 
-.simplecolorpicker.picker:before {
-  position: absolute;
-  top: -7px;
-  left: 9px;
-  display: inline-block;
-  border-right: 7px solid transparent;
-  border-bottom: 7px solid #ccc;
-  border-left: 7px solid transparent;
-  border-bottom-color: rgba(0, 0, 0, 0.2);
-  content: '';
-}
-
-.simplecolorpicker.picker:after {
-  position: absolute;
-  top: -6px;
-  left: 10px;
-  display: inline-block;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #ffffff;
-  border-left: 6px solid transparent;
-  content: '';
-}
-
 .simplecolorpicker.picker {
   position: absolute;
   top: 100%;
   left: 0;
-  z-index: 1051; /* Above Bootstrap modal (z-index of 1050) */
+  z-index: 1051; /* Above Bootstrap modal (@zindex-modal = 1050) */
   display: none;
   float: left;
 
   min-width: 160px;
-  max-width: 264px;
+  max-width: 283px; /* @popover-max-width = 276px + 7 */
 
-  padding: 4px 0 0 4px;
-  margin: 1px 0 0;
+  padding: 5px 0 0 5px;
+  margin: 2px 0 0;
   list-style: none;
-  background-color: #ffffff;
-
-  border: 1px solid #ccc;
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  background-color: #fff; /* @dropdown-bg */
 
-  *border-right-width: 2px;
-  *border-bottom-width: 2px;
+  border: 1px solid #ccc; /* @dropdown-fallback-border */
+  border: 1px solid rgba(0, 0, 0, .15); /* @dropdown-border */
 
-  -webkit-border-radius: 5px;
-     -moz-border-radius: 5px;
-          border-radius: 5px;
+  -webkit-border-radius: 4px; /* @border-radius-base */
+     -moz-border-radius: 4px;
+          border-radius: 4px;
 
-  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+     -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
 
   -webkit-background-clip: padding-box;
      -moz-background-clip: padding;
           background-clip: padding-box;
 }
 
-  .simplecolorpicker.inline {
-    display: inline-block;
-    height: 18px;
-    padding: 4px 0;
-  }
-
-  .simplecolorpicker.icon,
-  .simplecolorpicker span {
-    cursor: pointer;
-    display: inline-block;
-
-    -webkit-border-radius: 3px;
-       -moz-border-radius: 3px;
-            border-radius: 3px;
-
-    border: 1px solid transparent;
-  }
-  .simplecolorpicker span {
-    margin: 0 4px 4px 0;
-  }
-
-  .simplecolorpicker span:hover,
-  .simplecolorpicker span.selected {
-    border: 1px solid black;
-  }
+.simplecolorpicker.inline {
+  display: inline-block;
+  padding: 6px 0;
+}
+
+.simplecolorpicker span {
+  margin: 0 5px 5px 0;
+}
+
+.simplecolorpicker.icon,
+.simplecolorpicker span.color {
+  display: inline-block;
+
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+
+.simplecolorpicker.icon:after,
+.simplecolorpicker span.color:after {
+  content: '\00a0\00a0\00a0\00a0'; /* Spaces */
+}
+
+.simplecolorpicker span.color[data-disabled]:hover {
+  cursor: not-allowed;
+  border: 1px solid transparent;
+}
+
+.simplecolorpicker span.color:hover,
+.simplecolorpicker span.color[data-selected],
+.simplecolorpicker span.color[data-selected]:hover {
+  border: 1px solid #222; /* @gray-dark */
+}
+.simplecolorpicker span.color[data-selected]:after {
+  color: #fff;
+}
+
+/* Vertical separator, replaces optgroup. */
+.simplecolorpicker span.vr {
+  border-left: 1px solid #222; /* @gray-dark */
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jquery-simplecolorpicker-rails
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.5.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-06-01 00:00:00.000000000 Z
+date: 2013-12-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
@@ -43,6 +43,9 @@ files:
 - lib/jquery-simplecolorpicker-rails.rb
 - lib/jquery-simplecolorpicker-rails/version.rb
 - vendor/assets/javascripts/jquery.simplecolorpicker.js
+- vendor/assets/stylesheets/jquery.simplecolorpicker-fontawesome.css
+- vendor/assets/stylesheets/jquery.simplecolorpicker-glyphicons.css
+- vendor/assets/stylesheets/jquery.simplecolorpicker-regularfont.css
 - vendor/assets/stylesheets/jquery.simplecolorpicker.css
 homepage: http://github.com/tkrotoff/jquery-simplecolorpicker-rails
 licenses: []