spectrum-rails 1.1.3 → 1.1.4

data/lib/spectrum-rails/version.rb

@@ -1,5 +1,5 @@
 module Spectrum
   module Rails
-    VERSION = "1.1.3"
+    VERSION = "1.1.4"
   end
 end

data/vendor/assets/javascripts/spectrum.js

@@ -1,4 +1,4 @@
-// Spectrum Colorpicker v1.1.1
+// Spectrum Colorpicker v1.1.2+
 // https://github.com/bgrins/spectrum
 // Author: Brian Grinstead
 // License: MIT
@@ -6,110 +6,119 @@
 (function (window, $, undefined) {
     var defaultOpts = {
 
-        // Callbacks
-        beforeShow: noop,
-        move: noop,
-        change: noop,
-        show: noop,
-        hide: noop,
-
-        // Options
-        color: false,
-        flat: false,
-        showInput: false,
-        showButtons: true,
-        clickoutFiresChange: false,
-        showInitial: false,
-        showPalette: false,
-        showPaletteOnly: false,
-        showSelectionPalette: true,
-        localStorageKey: false,
-        appendTo: "body",
-        maxSelectionSize: 7,
-        cancelText: "cancel",
-        chooseText: "choose",
-        preferredFormat: false,
-        className: "",
-        showAlpha: false,
-        theme: "sp-light",
-        palette: ['fff', '000'],
-        selectionPalette: [],
-        disabled: false
-    },
-    spectrums = [],
-    IE = !!/msie/i.exec( window.navigator.userAgent ),
-    rgbaSupport = (function() {
-        function contains( str, substr ) {
-            return !!~('' + str).indexOf(substr);
-        }
-
-        var elem = document.createElement('div');
-        var style = elem.style;
-        style.cssText = 'background-color:rgba(0,0,0,.5)';
-        return contains(style.backgroundColor, 'rgba') || contains(style.backgroundColor, 'hsla');
-    })(),
-    replaceInput = [
-        "<div class='sp-replacer'>",
+            // Callbacks
+            beforeShow: noop,
+            move: noop,
+            change: noop,
+            show: noop,
+            hide: noop,
+
+            // Options
+            color: false,
+            flat: false,
+            showInput: false,
+            allowEmpty: false,
+            showButtons: true,
+            clickoutFiresChange: false,
+            showInitial: false,
+            showPalette: false,
+            showPaletteOnly: false,
+            showSelectionPalette: true,
+            localStorageKey: false,
+            appendTo: "body",
+            maxSelectionSize: 7,
+            cancelText: "cancel",
+            chooseText: "choose",
+            preferredFormat: false,
+            className: "",
+            showAlpha: false,
+            theme: "sp-light",
+            palette: ['fff', '000'],
+            selectionPalette: [],
+            disabled: false
+        },
+        spectrums = [],
+        IE = !!/msie/i.exec( window.navigator.userAgent ),
+        rgbaSupport = (function() {
+            function contains( str, substr ) {
+                return !!~('' + str).indexOf(substr);
+            }
+
+            var elem = document.createElement('div');
+            var style = elem.style;
+            style.cssText = 'background-color:rgba(0,0,0,.5)';
+            return contains(style.backgroundColor, 'rgba') || contains(style.backgroundColor, 'hsla');
+        })(),
+        replaceInput = [
+            "<div class='sp-replacer'>",
             "<div class='sp-preview'><div class='sp-preview-inner'></div></div>",
             "<div class='sp-dd'>&#9660;</div>",
-        "</div>"
-    ].join(''),
-    markup = (function () {
+            "</div>"
+        ].join(''),
+        markup = (function () {
 
-        // IE does not support gradients with multiple stops, so we need to simulate
-        //  that for the rainbow slider with 8 divs that each have a single gradient
-        var gradientFix = "";
-        if (IE) {
-            for (var i = 1; i <= 6; i++) {
-                gradientFix += "<div class='sp-" + i + "'></div>";
+            // IE does not support gradients with multiple stops, so we need to simulate
+            //  that for the rainbow slider with 8 divs that each have a single gradient
+            var gradientFix = "";
+            if (IE) {
+                for (var i = 1; i <= 6; i++) {
+                    gradientFix += "<div class='sp-" + i + "'></div>";
+                }
             }
-        }
 
-        return [
-            "<div class='sp-container sp-hidden'>",
+            return [
+                "<div class='sp-container sp-hidden'>",
                 "<div class='sp-palette-container'>",
-                    "<div class='sp-palette sp-thumb sp-cf'></div>",
+                "<div class='sp-palette sp-thumb sp-cf'></div>",
                 "</div>",
                 "<div class='sp-picker-container'>",
-                    "<div class='sp-top sp-cf'>",
-                        "<div class='sp-fill'></div>",
-                        "<div class='sp-top-inner'>",
-                            "<div class='sp-color'>",
-                                "<div class='sp-sat'>",
-                                    "<div class='sp-val'>",
-                                        "<div class='sp-dragger'></div>",
-                                    "</div>",
-                                "</div>",
-                            "</div>",
-                            "<div class='sp-hue'>",
-                                "<div class='sp-slider'></div>",
-                                gradientFix,
-                            "</div>",
-                        "</div>",
-                        "<div class='sp-alpha'><div class='sp-alpha-inner'><div class='sp-alpha-handle'></div></div></div>",
-                    "</div>",
-                    "<div class='sp-input-container sp-cf'>",
-                        "<input class='sp-input' type='text' spellcheck='false'  />",
-                    "</div>",
-                    "<div class='sp-initial sp-thumb sp-cf'></div>",
-                    "<div class='sp-button-container sp-cf'>",
-                        "<a class='sp-cancel' href='#'></a>",
-                        "<button class='sp-choose'></button>",
-                    "</div>",
+                "<div class='sp-top sp-cf'>",
+                "<div class='sp-fill'></div>",
+                "<div class='sp-top-inner'>",
+                "<div class='sp-color'>",
+                "<div class='sp-sat'>",
+                "<div class='sp-val'>",
+                "<div class='sp-dragger'></div>",
                 "</div>",
-            "</div>"
-        ].join("");
-    })();
+                "</div>",
+                "</div>",
+                "<div class='sp-clear sp-clear-display' title='Clear Color Selection'>",
+                "</div>",
+                "<div class='sp-hue'>",
+                "<div class='sp-slider'></div>",
+                gradientFix,
+                "</div>",
+                "</div>",
+                "<div class='sp-alpha'><div class='sp-alpha-inner'><div class='sp-alpha-handle'></div></div></div>",
+                "</div>",
+                "<div class='sp-input-container sp-cf'>",
+                "<input class='sp-input' type='text' spellcheck='false'  />",
+                "</div>",
+                "<div class='sp-initial sp-thumb sp-cf'></div>",
+                "<div class='sp-button-container sp-cf'>",
+                "<a class='sp-cancel' href='#'></a>",
+                "<button class='sp-choose'></button>",
+                "</div>",
+                "</div>",
+                "</div>"
+            ].join("");
+        })();
 
     function paletteTemplate (p, color, className) {
         var html = [];
         for (var i = 0; i < p.length; i++) {
-            var tiny = tinycolor(p[i]);
-            var c = tiny.toHsl().l < 0.5 ? "sp-thumb-el sp-thumb-dark" : "sp-thumb-el sp-thumb-light";
-            c += (tinycolor.equals(color, p[i])) ? " sp-thumb-active" : "";
-
-            var swatchStyle = rgbaSupport ? ("background-color:" + tiny.toRgbString()) : "filter:" + tiny.toFilter();
-            html.push('<span title="' + tiny.toRgbString() + '" data-color="' + tiny.toRgbString() + '" class="' + c + '"><span class="sp-thumb-inner" style="' + swatchStyle + ';" /></span>');
+            var current = p[i];
+            if(current) {
+                var tiny = tinycolor(current);
+                var c = tiny.toHsl().l < 0.5 ? "sp-thumb-el sp-thumb-dark" : "sp-thumb-el sp-thumb-light";
+                c += (tinycolor.equals(color, current)) ? " sp-thumb-active" : "";
+
+                var swatchStyle = rgbaSupport ? ("background-color:" + tiny.toRgbString()) : "filter:" + tiny.toFilter();
+                html.push('<span title="' + tiny.toRgbString() + '" data-color="' + tiny.toRgbString() + '" class="' + c + '"><span class="sp-thumb-inner" style="' + swatchStyle + ';" /></span>');
+            } else {
+                var cls = 'sp-clear-display';
+                html.push('<span title="No Color Selected" data-color="" style="background-color:transparent;" class="' + cls + '"></span>');
+            }
         }
         return "<div class='sp-cf " + className + "'>" + html.join('') + "</div>";
     }
@@ -180,6 +189,7 @@
             paletteContainer = container.find(".sp-palette"),
             initialColorContainer = container.find(".sp-initial"),
             cancelButton = container.find(".sp-cancel"),
+            clearButton = container.find(".sp-clear"),
             chooseButton = container.find(".sp-choose"),
             isInput = boundElement.is("input"),
             shouldReplace = isInput && !flat,
@@ -190,14 +200,21 @@
             colorOnShow = false,
             preferredFormat = opts.preferredFormat,
             currentPreferredFormat = preferredFormat,
-            clickoutFiresChange = !opts.showButtons || opts.clickoutFiresChange;
+            clickoutFiresChange = !opts.showButtons || opts.clickoutFiresChange,
+            isEmpty = !initialColor,
+            allowEmpty = opts.allowEmpty;
 
 
         function applyOptions() {
 
+            if (opts.showPaletteOnly) {
+                opts.showPalette = true;
+            }
+
             container.toggleClass("sp-flat", flat);
             container.toggleClass("sp-input-disabled", !opts.showInput);
             container.toggleClass("sp-alpha-enabled", opts.showAlpha);
+            container.toggleClass("sp-clear-enabled", opts.allowEmpty);
             container.toggleClass("sp-buttons-disabled", !opts.showButtons);
             container.toggleClass("sp-palette-disabled", !opts.showPalette);
             container.toggleClass("sp-palette-only", opts.showPaletteOnly);
@@ -219,6 +236,10 @@
                 boundElement.after(replacer).hide();
             }
 
+            if (!allowEmpty) {
+                clearButton.hide();
+            }
+
             if (flat) {
                 boundElement.after(container).hide();
             }
@@ -240,7 +261,7 @@
                     if (oldPalette.length > 1) {
                         delete window.localStorage[localStorageKey];
                         $.each(oldPalette, function(i, c) {
-                             addColorToSelectionPalette(c);
+                            addColorToSelectionPalette(c);
                         });
                     }
                 }
@@ -285,6 +306,21 @@
                 hide("cancel");
             });
 
+
+            clearButton.bind("click.spectrum", function (e) {
+                e.stopPropagation();
+                e.preventDefault();
+
+                isEmpty = true;
+
+                move();
+                if(flat) {
+                    //for the flat style, this is a change event
+                    updateOriginalInput(true);
+                }
+            });
+
+
             chooseButton.text(opts.chooseText);
             chooseButton.bind("click.spectrum", function (e) {
                 e.stopPropagation();
@@ -298,6 +334,7 @@
 
             draggable(alphaSlider, function (dragX, dragY, e) {
                 currentAlpha = (dragX / alphaWidth);
+                isEmpty = false;
                 if (e.shiftKey) {
                     currentAlpha = Math.round(currentAlpha * 10) / 10;
                 }
@@ -307,6 +344,7 @@
 
             draggable(slider, function (dragX, dragY) {
                 currentHue = parseFloat(dragY / slideHeight);
+                isEmpty = false;
                 move();
             }, dragStart, dragStop);
 
@@ -334,6 +372,8 @@
                     currentValue = parseFloat((dragHeight - dragY) / dragHeight);
                 }
 
+                isEmpty = false;
+
                 move();
 
             }, dragStart, dragStop);
@@ -459,12 +499,20 @@
         }
 
         function setFromTextInput() {
-            var tiny = tinycolor(textInput.val());
-            if (tiny.ok) {
-                set(tiny);
+
+            var value = textInput.val();
+
+            if ((value === null || value === "") && allowEmpty) {
+                set(null);
             }
             else {
-                textInput.addClass("sp-validation-error");
+                var tiny = tinycolor(value);
+                if (tiny.ok) {
+                    set(tiny);
+                }
+                else {
+                    textInput.addClass("sp-validation-error");
+                }
             }
         }
 
@@ -551,23 +599,33 @@
                 return;
             }
 
-            var newColor = tinycolor(color);
-            var newHsv = newColor.toHsv();
-
-            currentHue = (newHsv.h % 360) / 360;
-            currentSaturation = newHsv.s;
-            currentValue = newHsv.v;
-            currentAlpha = newHsv.a;
+            var newColor;
+            if (!color && allowEmpty) {
+                isEmpty = true;
+            } else {
+                isEmpty = false;
+                newColor = tinycolor(color);
+                var newHsv = newColor.toHsv();
 
+                currentHue = (newHsv.h % 360) / 360;
+                currentSaturation = newHsv.s;
+                currentValue = newHsv.v;
+                currentAlpha = newHsv.a;
+            }
             updateUI();
 
-            if (newColor.ok && !ignoreFormatChange) {
+            if (newColor && newColor.ok && !ignoreFormatChange) {
                 currentPreferredFormat = preferredFormat || newColor.format;
             }
         }
 
         function get(opts) {
             opts = opts || { };
+
+            if (allowEmpty && isEmpty) {
+                return null;
+            }
+
             return tinycolor.fromRatio({
                 h: currentHue,
                 s: currentSaturation,
@@ -606,39 +664,51 @@
             }
 
             var realColor = get({ format: format }),
-                realHex = realColor.toHexString(),
-                realRgb = realColor.toRgbString();
+                displayColor = '';
+
+            //reset background info for preview element
+            previewElement.removeClass("sp-clear-display");
+            previewElement.css('background-color', 'transparent');
 
-            // Update the replaced elements background color (with actual selected color)
-            if (rgbaSupport || realColor.alpha === 1) {
-                previewElement.css("background-color", realRgb);
+            if (!realColor && allowEmpty) {
+                // Update the replaced elements background with icon indicating no color selection
+                previewElement.addClass("sp-clear-display");
             }
             else {
-                previewElement.css("background-color", "transparent");
-                previewElement.css("filter", realColor.toFilter());
-            }
-
-            if (opts.showAlpha) {
-                var rgb = realColor.toRgb();
-                rgb.a = 0;
-                var realAlpha = tinycolor(rgb).toRgbString();
-                var gradient = "linear-gradient(left, " + realAlpha + ", " + realHex + ")";
+                var realHex = realColor.toHexString(),
+                    realRgb = realColor.toRgbString();
 
-                if (IE) {
-                    alphaSliderInner.css("filter", tinycolor(realAlpha).toFilter({ gradientType: 1 }, realHex));
+                // Update the replaced elements background color (with actual selected color)
+                if (rgbaSupport || realColor.alpha === 1) {
+                    previewElement.css("background-color", realRgb);
                 }
                 else {
-                    alphaSliderInner.css("background", "-webkit-" + gradient);
-                    alphaSliderInner.css("background", "-moz-" + gradient);
-                    alphaSliderInner.css("background", "-ms-" + gradient);
-                    alphaSliderInner.css("background", gradient);
+                    previewElement.css("background-color", "transparent");
+                    previewElement.css("filter", realColor.toFilter());
                 }
-            }
 
+                if (opts.showAlpha) {
+                    var rgb = realColor.toRgb();
+                    rgb.a = 0;
+                    var realAlpha = tinycolor(rgb).toRgbString();
+                    var gradient = "linear-gradient(left, " + realAlpha + ", " + realHex + ")";
+
+                    if (IE) {
+                        alphaSliderInner.css("filter", tinycolor(realAlpha).toFilter({ gradientType: 1 }, realHex));
+                    }
+                    else {
+                        alphaSliderInner.css("background", "-webkit-" + gradient);
+                        alphaSliderInner.css("background", "-moz-" + gradient);
+                        alphaSliderInner.css("background", "-ms-" + gradient);
+                        alphaSliderInner.css("background", gradient);
+                    }
+                }
 
+                displayColor = realColor.toString(format);
+            }
             // Update the text entry input as it changes happen
             if (opts.showInput) {
-                textInput.val(realColor.toString(format));
+                textInput.val(displayColor);
             }
 
             if (opts.showPalette) {
@@ -652,49 +722,67 @@
             var s = currentSaturation;
             var v = currentValue;
 
-            // Where to show the little circle in that displays your current selected color
-            var dragX = s * dragWidth;
-            var dragY = dragHeight - (v * dragHeight);
-            dragX = Math.max(
-                -dragHelperHeight,
-                Math.min(dragWidth - dragHelperHeight, dragX - dragHelperHeight)
-            );
-            dragY = Math.max(
-                -dragHelperHeight,
-                Math.min(dragHeight - dragHelperHeight, dragY - dragHelperHeight)
-            );
-            dragHelper.css({
-                "top": dragY,
-                "left": dragX
-            });
-
-            var alphaX = currentAlpha * alphaWidth;
-            alphaSlideHelper.css({
-                "left": alphaX - (alphaSlideHelperWidth / 2)
-            });
-
-            // Where to show the bar that displays your current selected hue
-            var slideY = (currentHue) * slideHeight;
-            slideHelper.css({
-                "top": slideY - slideHelperHeight
-            });
+            if(allowEmpty && isEmpty) {
+                //if selected color is empty, hide the helpers
+                alphaSlideHelper.hide();
+                slideHelper.hide();
+                dragHelper.hide();
+            }
+            else {
+                //make sure helpers are visible
+                alphaSlideHelper.show();
+                slideHelper.show();
+                dragHelper.show();
+
+                // Where to show the little circle in that displays your current selected color
+                var dragX = s * dragWidth;
+                var dragY = dragHeight - (v * dragHeight);
+                dragX = Math.max(
+                    -dragHelperHeight,
+                    Math.min(dragWidth - dragHelperHeight, dragX - dragHelperHeight)
+                );
+                dragY = Math.max(
+                    -dragHelperHeight,
+                    Math.min(dragHeight - dragHelperHeight, dragY - dragHelperHeight)
+                );
+                dragHelper.css({
+                    "top": dragY,
+                    "left": dragX
+                });
+
+                var alphaX = currentAlpha * alphaWidth;
+                alphaSlideHelper.css({
+                    "left": alphaX - (alphaSlideHelperWidth / 2)
+                });
+
+                // Where to show the bar that displays your current selected hue
+                var slideY = (currentHue) * slideHeight;
+                slideHelper.css({
+                    "top": slideY - slideHelperHeight
+                });
+            }
         }
 
         function updateOriginalInput(fireCallback) {
-            var color = get();
+            var color = get(),
+                displayColor = '',
+                hasChanged = !tinycolor.equals(color, colorOnShow);
+
+            if(color) {
+                displayColor = color.toString(currentPreferredFormat);
+                // Update the selection palette with the current color
+                addColorToSelectionPalette(color);
+            }
 
             if (isInput) {
-                boundElement.val(color.toString(currentPreferredFormat)).change();
+                boundElement.val(displayColor);
             }
 
-            var hasChanged = !tinycolor.equals(color, colorOnShow);
             colorOnShow = color;
 
-            // Update the selection palette with the current color
-            addColorToSelectionPalette(color);
             if (fireCallback && hasChanged) {
                 callbacks.change(color);
-                boundElement.trigger('change.spectrum', [ color ]);
+                boundElement.trigger('change', [ color ]);
             }
         }
 
@@ -774,9 +862,9 @@
     }
 
     /**
-    * checkOffset - get the offset below/above and left/right element depending on screen position
-    * Thanks https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.datepicker.js
-    */
+     * checkOffset - get the offset below/above and left/right element depending on screen position
+     * Thanks https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.datepicker.js
+     */
     function getOffset(picker, input) {
         var extraY = 0;
         var dpWidth = picker.outerWidth();
@@ -791,33 +879,33 @@
 
         offset.left -=
             Math.min(offset.left, (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ?
-            Math.abs(offset.left + dpWidth - viewWidth) : 0);
+                Math.abs(offset.left + dpWidth - viewWidth) : 0);
 
         offset.top -=
             Math.min(offset.top, ((offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ?
-            Math.abs(dpHeight + inputHeight - extraY) : extraY));
+                Math.abs(dpHeight + inputHeight - extraY) : extraY));
 
         return offset;
     }
 
     /**
-    * noop - do nothing
-    */
+     * noop - do nothing
+     */
     function noop() {
 
     }
 
     /**
-    * stopPropagation - makes the code only doing this a little easier to read in line
-    */
+     * stopPropagation - makes the code only doing this a little easier to read in line
+     */
     function stopPropagation(e) {
         e.stopPropagation();
     }
 
     /**
-    * Create a function bound to a given object
-    * Thanks to underscore.js
-    */
+     * Create a function bound to a given object
+     * Thanks to underscore.js
+     */
     function bind(func, obj) {
         var slice = Array.prototype.slice;
         var args = slice.call(arguments, 2);
@@ -827,9 +915,9 @@
     }
 
     /**
-    * Lightweight drag helper.  Handles containment within the element, so that
-    * when dragging, the x is within [0,element.width] and y is within [0,element.height]
-    */
+     * Lightweight drag helper.  Handles containment within the element, so that
+     * when dragging, the x is within [0,element.width] and y is within [0,element.height]
+     */
     function draggable(element, onmove, onstart, onstop) {
         onmove = onmove || function () { };
         onstart = onstart || function () { };
@@ -930,8 +1018,8 @@
     function log(){/* jshint -W021 */if(window.console){if(Function.prototype.bind)log=Function.prototype.bind.call(console.log,console);else log=function(){Function.prototype.apply.call(console.log,console,arguments);};log.apply(this,arguments);}}
 
     /**
-    * Define a jQuery plugin
-    */
+     * Define a jQuery plugin
+     */
     var dataID = "spectrum.id";
     $.fn.spectrum = function (opts, extra) {
 
@@ -997,11 +1085,12 @@
             });
         }
     };
-    // TinyColor v0.9.14
+
+    // TinyColor v0.9.16
     // https://github.com/bgrins/TinyColor
-    // 2013-02-24, Brian Grinstead, MIT License
+    // 2013-08-10, Brian Grinstead, MIT License
 
-    (function(root) {
+    (function() {
 
         var trimLeft = /^[\s,#]+/,
             trimRight = /\s+$/,
@@ -1019,8 +1108,9 @@
 
             // If input is already a tinycolor, return itself
             if (typeof color == "object" && color.hasOwnProperty("_tc_id")) {
-               return color;
+                return color;
             }
+
             var rgb = inputToRGB(color);
             var r = rgb.r,
                 g = rgb.g,
@@ -1042,6 +1132,13 @@
                 format: format,
                 _tc_id: tinyCounter++,
                 alpha: a,
+                getAlpha: function() {
+                    return a;
+                },
+                setAlpha: function(value) {
+                    a = boundAlpha(value);
+                    roundA = mathRound(100*a) / 100;
+                },
                 toHsv: function() {
                     var hsv = rgbToHsv(r, g, b);
                     return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: a };
@@ -1050,8 +1147,8 @@
                     var hsv = rgbToHsv(r, g, b);
                     var h = mathRound(hsv.h * 360), s = mathRound(hsv.s * 100), v = mathRound(hsv.v * 100);
                     return (a == 1) ?
-                      "hsv("  + h + ", " + s + "%, " + v + "%)" :
-                      "hsva(" + h + ", " + s + "%, " + v + "%, "+ roundA + ")";
+                        "hsv("  + h + ", " + s + "%, " + v + "%)" :
+                        "hsva(" + h + ", " + s + "%, " + v + "%, "+ roundA + ")";
                 },
                 toHsl: function() {
                     var hsl = rgbToHsl(r, g, b);
@@ -1061,8 +1158,8 @@
                     var hsl = rgbToHsl(r, g, b);
                     var h = mathRound(hsl.h * 360), s = mathRound(hsl.s * 100), l = mathRound(hsl.l * 100);
                     return (a == 1) ?
-                      "hsl("  + h + ", " + s + "%, " + l + "%)" :
-                      "hsla(" + h + ", " + s + "%, " + l + "%, "+ roundA + ")";
+                        "hsl("  + h + ", " + s + "%, " + l + "%)" :
+                        "hsla(" + h + ", " + s + "%, " + l + "%, "+ roundA + ")";
                 },
                 toHex: function(allow3Char) {
                     return rgbToHex(r, g, b, allow3Char);
@@ -1075,18 +1172,22 @@
                 },
                 toRgbString: function() {
                     return (a == 1) ?
-                      "rgb("  + mathRound(r) + ", " + mathRound(g) + ", " + mathRound(b) + ")" :
-                      "rgba(" + mathRound(r) + ", " + mathRound(g) + ", " + mathRound(b) + ", " + roundA + ")";
+                        "rgb("  + mathRound(r) + ", " + mathRound(g) + ", " + mathRound(b) + ")" :
+                        "rgba(" + mathRound(r) + ", " + mathRound(g) + ", " + mathRound(b) + ", " + roundA + ")";
                 },
                 toPercentageRgb: function() {
                     return { r: mathRound(bound01(r, 255) * 100) + "%", g: mathRound(bound01(g, 255) * 100) + "%", b: mathRound(bound01(b, 255) * 100) + "%", a: a };
                 },
                 toPercentageRgbString: function() {
                     return (a == 1) ?
-                      "rgb("  + mathRound(bound01(r, 255) * 100) + "%, " + mathRound(bound01(g, 255) * 100) + "%, " + mathRound(bound01(b, 255) * 100) + "%)" :
-                      "rgba(" + mathRound(bound01(r, 255) * 100) + "%, " + mathRound(bound01(g, 255) * 100) + "%, " + mathRound(bound01(b, 255) * 100) + "%, " + roundA + ")";
+                        "rgb("  + mathRound(bound01(r, 255) * 100) + "%, " + mathRound(bound01(g, 255) * 100) + "%, " + mathRound(bound01(b, 255) * 100) + "%)" :
+                        "rgba(" + mathRound(bound01(r, 255) * 100) + "%, " + mathRound(bound01(g, 255) * 100) + "%, " + mathRound(bound01(b, 255) * 100) + "%, " + roundA + ")";
                 },
                 toName: function() {
+                    if (a === 0) {
+                        return "transparent";
+                    }
+
                     return hexNames[rgbToHex(r, g, b, true)] || false;
                 },
                 toFilter: function(secondColor) {
@@ -1105,8 +1206,13 @@
                     return "progid:DXImageTransform.Microsoft.gradient("+gradientType+"startColorstr=#" + pad2(alphaHex) + hex + ",endColorstr=#" + pad2(secondAlphaHex) + secondHex + ")";
                 },
                 toString: function(format) {
+                    var formatSet = !!format;
                     format = format || this.format;
+
                     var formattedString = false;
+                    var hasAlphaAndFormatNotSet = !formatSet && a < 1 && a > 0;
+                    var formatWithAlpha = hasAlphaAndFormatNotSet && (format === "hex" || format === "hex6" || format === "hex3" || format === "name");
+
                     if (format === "rgb") {
                         formattedString = this.toRgbString();
                     }
@@ -1129,6 +1235,10 @@
                         formattedString = this.toHsvString();
                     }
 
+                    if (formatWithAlpha) {
+                        return this.toRgbString();
+                    }
+
                     return formattedString || this.toHexString();
                 }
             };
@@ -1206,12 +1316,7 @@
                 }
             }
 
-            a = parseFloat(a);
-
-            // Handle invalid alpha characters by setting to 1
-            if (isNaN(a) || a < 0 || a > 1) {
-                a = 1;
-            }
+            a = boundAlpha(a);
 
             return {
                 ok: ok,
@@ -1224,7 +1329,6 @@
         }
 
 
-
         // Conversion Functions
         // --------------------
 
@@ -1343,7 +1447,7 @@
         // Converts an HSV color value to RGB.
         // *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
         // *Returns:* { r, g, b } in the set [0, 255]
-         function hsvToRgb(h, s, v) {
+        function hsvToRgb(h, s, v) {
 
             h = bound01(h, 360) * 6;
             s = bound01(s, 100);
@@ -1402,16 +1506,17 @@
         // Thanks to less.js for some of the basics here
         // <https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js>
 
-
         tinycolor.desaturate = function (color, amount) {
+            amount = (amount === 0) ? 0 : (amount || 10);
             var hsl = tinycolor(color).toHsl();
-            hsl.s -= ((amount || 10) / 100);
+            hsl.s -= amount / 100;
             hsl.s = clamp01(hsl.s);
             return tinycolor(hsl);
         };
         tinycolor.saturate = function (color, amount) {
+            amount = (amount === 0) ? 0 : (amount || 10);
             var hsl = tinycolor(color).toHsl();
-            hsl.s += ((amount || 10) / 100);
+            hsl.s += amount / 100;
             hsl.s = clamp01(hsl.s);
             return tinycolor(hsl);
         };
@@ -1419,14 +1524,16 @@
             return tinycolor.desaturate(color, 100);
         };
         tinycolor.lighten = function(color, amount) {
+            amount = (amount === 0) ? 0 : (amount || 10);
             var hsl = tinycolor(color).toHsl();
-            hsl.l += ((amount || 10) / 100);
+            hsl.l += amount / 100;
             hsl.l = clamp01(hsl.l);
             return tinycolor(hsl);
         };
         tinycolor.darken = function (color, amount) {
+            amount = (amount === 0) ? 0 : (amount || 10);
             var hsl = tinycolor(color).toHsl();
-            hsl.l -= ((amount || 10) / 100);
+            hsl.l -= amount / 100;
             hsl.l = clamp01(hsl.l);
             return tinycolor(hsl);
         };
@@ -1499,6 +1606,7 @@
             return ret;
         };
 
+
         // Readability Functions
         // ---------------------
         // <http://www.w3.org/TR/AERT#color-contrast>
@@ -1514,9 +1622,9 @@
             var brightnessB = (b.r * 299 + b.g * 587 + b.b * 114) / 1000;
             var colorDiff = (
                 Math.max(a.r, b.r) - Math.min(a.r, b.r) +
-                Math.max(a.g, b.g) - Math.min(a.g, b.g) +
-                Math.max(a.b, b.b) - Math.min(a.b, b.b)
-            );
+                    Math.max(a.g, b.g) - Math.min(a.g, b.g) +
+                    Math.max(a.b, b.b) - Math.min(a.b, b.b)
+                );
 
             return {
                 brightness: Math.abs(brightnessA - brightnessB),
@@ -1736,6 +1844,17 @@
             return flipped;
         }
 
+        // Return a valid alpha value [0,1] with all invalid values being set to 1
+        function boundAlpha(a) {
+            a = parseFloat(a);
+
+            if (isNaN(a) || a < 0 || a > 1) {
+                a = 1;
+            }
+
+            return a;
+        }
+
         // Take input from [0, n] and return it as [0, 1]
         function bound01(n, max) {
             if (isOnePointZero(n)) { n = "100%"; }
@@ -1832,7 +1951,7 @@
                 named = true;
             }
             else if (color == 'transparent') {
-                return { r: 0, g: 0, b: 0, a: 0 };
+                return { r: 0, g: 0, b: 0, a: 0, format: "name" };
             }
 
             // Try to match string input using regular expressions.
@@ -1875,9 +1994,11 @@
             return false;
         }
 
-        root.tinycolor = tinycolor;
+        // Expose tinycolor to window, does not need to run in non-browser context.
+        window.tinycolor = tinycolor;
+
+    })();
 
-    })(this);
 
     $(function () {
         if ($.fn.spectrum.load) {

data/vendor/assets/stylesheets/spectrum.css

@@ -1,5 +1,5 @@
 /***
-Spectrum Colorpicker v1.1.1
+Spectrum Colorpicker v1.1.2+
 https://github.com/bgrins/spectrum
 Author: Brian Grinstead
 License: MIT
@@ -12,7 +12,8 @@ License: MIT
     display:inline-block;
     *display: inline;
     *zoom: 1;
-    z-index: 2147483647;
+    /* https://github.com/bgrins/spectrum/issues/40 */
+    z-index: 9999994;
     overflow: hidden;
 }
 .sp-container.sp-flat {
@@ -21,16 +22,16 @@ License: MIT
 
 /* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
 .sp-top {
-  position:relative;
-  width: 100%;
-  display:inline-block;
+    position:relative;
+    width: 100%;
+    display:inline-block;
 }
 .sp-top-inner {
-   position:absolute;
-   top:0;
-   left:0;
-   bottom:0;
-   right:0;
+    position:absolute;
+    top:0;
+    left:0;
+    bottom:0;
+    right:0;
 }
 .sp-color {
     position: absolute;
@@ -47,6 +48,12 @@ License: MIT
     left:84%;
     height: 100%;
 }
+
+.sp-clear-enabled .sp-hue {
+    top:33px;
+    height: 77.5%;
+}
+
 .sp-fill {
     padding-top: 80%;
 }
@@ -58,17 +65,13 @@ License: MIT
     bottom:0;
 }
 
-.sp-alpha-enabled .sp-top
-{
+.sp-alpha-enabled .sp-top {
     margin-bottom: 18px;
 }
-.sp-alpha-enabled .sp-alpha
-{
+.sp-alpha-enabled .sp-alpha {
     display: block;
 }
-
-.sp-alpha-handle
-{
+.sp-alpha-handle {
     position:absolute;
     top:-4px;
     bottom: -4px;
@@ -79,9 +82,7 @@ License: MIT
     background: white;
     opacity: .8;
 }
-
-.sp-alpha
-{
+.sp-alpha {
     display: none;
     position: absolute;
     bottom: -14px;
@@ -89,12 +90,30 @@ License: MIT
     left: 0;
     height: 8px;
 }
-.sp-alpha-inner{
+.sp-alpha-inner {
     border: solid 1px #333;
 }
 
+.sp-clear {
+    display: none;
+}
+
+.sp-clear.sp-clear-display {
+    background-position: center;
+}
+
+.sp-clear-enabled .sp-clear {
+    display: block;
+    position:absolute;
+    top:0px;
+    right:0;
+    bottom:0;
+    left:84%;
+    height: 28px;
+}
+
 /* Don't allow text selection */
-.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button  {
+.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button  {
     -webkit-user-select:none;
     -moz-user-select: -moz-none;
     -o-user-select:none;
@@ -153,7 +172,6 @@ License: MIT
    Generate 6 divs, line them up, and do two color gradients for each.
    Yes, really.
  */
-
 .sp-1 {
     height:17%;
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
@@ -194,17 +212,16 @@ License: MIT
     .sp-hue { left: 63%; }
     .sp-fill { padding-top: 60%; }
 }
-
 .sp-dragger {
-   border-radius: 5px;
-   height: 5px;
-   width: 5px;
-   border: 1px solid #fff;
-   background: #000;
-   cursor: pointer;
-   position:absolute;
-   top:0;
-   left: 0;
+    border-radius: 5px;
+    height: 5px;
+    width: 5px;
+    border: 1px solid #fff;
+    background: #000;
+    cursor: pointer;
+    position:absolute;
+    top:0;
+    left: 0;
 }
 .sp-slider {
     position: absolute;
@@ -218,14 +235,19 @@ License: MIT
     opacity: .8;
 }
 
-/* Basic display options (colors, fonts, global widths) */
+/*
+Theme authors:
+Here are the basic themeable display options (colors, fonts, global widths).
+See http://bgrins.github.io/spectrum/themes/ for instructions.
+*/
+
 .sp-container {
     border-radius: 0;
     background-color: #ECECEC;
     border: solid 1px #f0c49B;
     padding: 0;
 }
-.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue
+.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear
 {
     font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
     -webkit-box-sizing: border-box;
@@ -237,7 +259,7 @@ License: MIT
 {
     margin-bottom: 3px;
 }
-.sp-color, .sp-hue
+.sp-color, .sp-hue, .sp-clear
 {
     border: solid 1px #666;
 }
@@ -252,14 +274,14 @@ License: MIT
     width: 100%;
 }
 .sp-input {
-   font-size: 12px !important;
-   border: 1px inset;
-   padding: 4px 5px;
-   margin: 0;
-   width: 100%;
-   background:transparent;
-   border-radius: 3px;
-   color: #222;
+    font-size: 12px !important;
+    border: 1px inset;
+    padding: 4px 5px;
+    margin: 0;
+    width: 100%;
+    background:transparent;
+    border-radius: 3px;
+    color: #222;
 }
 .sp-input:focus  {
     border: 1px solid orange;
@@ -322,6 +344,10 @@ License: MIT
     margin:0;
 }
 
+.sp-initial .sp-clear-display {
+    background-position: center;
+}
+
 /* Buttons */
 .sp-button-container {
     float: right;
@@ -389,23 +415,22 @@ License: MIT
 
 /* Buttons: http://hellohappy.org/css3-buttons/ */
 .sp-container button {
-  background-color: #eeeeee;
-  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
-  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
-  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
-  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
-  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
-  background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
-  border: 1px solid #ccc;
-  border-bottom: 1px solid #bbb;
-  border-radius: 3px;
-  color: #333;
-  font-size: 14px;
-  line-height: 1;
-  padding: 5px 4px;
-  text-align: center;
-  text-shadow: 0 1px 0 #eee;
-  vertical-align: middle;
+    background-color: #eeeeee;
+    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
+    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
+    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
+    background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
+    background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
+    border: 1px solid #ccc;
+    border-bottom: 1px solid #bbb;
+    border-radius: 3px;
+    color: #333;
+    font-size: 14px;
+    line-height: 1;
+    padding: 5px 4px;
+    text-align: center;
+    text-shadow: 0 1px 0 #eee;
+    vertical-align: middle;
 }
 .sp-container button:hover {
     background-color: #dddddd;
@@ -413,7 +438,6 @@ License: MIT
     background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
     background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
     background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
-    background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
     background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
     border: 1px solid #bbb;
     border-bottom: 1px solid #999;
@@ -478,4 +502,10 @@ License: MIT
 .sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner
 {
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
+}
+
+.sp-clear-display {
+    background-repeat:no-repeat;
+    background-position: center;
+    background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);
 }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: spectrum-rails
 version: !ruby/object:Gem::Version
-  version: 1.1.3
+  version: 1.1.4
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-08-07 00:00:00.000000000 Z
+date: 2013-11-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties