[Mezuro] Added color picker jquery plugin to select range color.

Diego Camarinha · Paulo Meireles
1 parent f735dbc1
Showing 8 changed files with 424 additions and 1 deletions Show diff stats
plugins/mezuro/controllers/mezuro_plugin_myprofile_controller.rb
plugins/mezuro/public/colorPicker.css
plugins/mezuro/public/javascripts/colorPicker/LICENSE
plugins/mezuro/public/javascripts/colorPicker/jquery.colorPicker.js
plugins/mezuro/public/javascripts/colorPicker/jquery.colorPicker.min.js
plugins/mezuro/public/style.css
plugins/mezuro/views/mezuro_plugin_myprofile/_range_form.html.erb
plugins/mezuro/views/mezuro_plugin_myprofile/edit_metric_configuration.html.erb
@@ -113,6 +113,7 @@ class MezuroPluginMyprofileController &lt; ProfileController
     @configuration_content = profile.articles.find(params[:id])
     @metric_name = params[:metric_name]
     @range = Kalibro::Range.new
+    @range_color = "#000000"
   end
  
   def edit_range
@@ -121,6 +122,7 @@ class MezuroPluginMyprofileController &lt; ProfileController
     @beginning_id = params[:beginning_id]
     metric_configuration = Kalibro::MetricConfiguration.find_by_configuration_name_and_metric_name(@configuration_content.name, @metric_name)
     @range = metric_configuration.ranges.find{|range| range.beginning == @beginning_id.to_f || @beginning_id =="-INF" }
+    @range_color = "#" + @range.color.to_s.gsub(/^ff/, "")
   end
  
   def create_range
@@ -0,0 +1,31 @@
+div.colorPicker-picker {
+  height: 16px;
+  width: 16px;
+  padding: 0 !important;
+  border: 1px solid #ccc;
+  background: url(arrow.gif) no-repeat top right;
+  cursor: pointer;
+  line-height: 16px;
+}
+
+div.colorPicker-palette {
+  width: 110px;
+  position: absolute;
+  border: 1px solid #598FEF;
+  background-color: #EFEFEF;
+  padding: 2px;
+  z-index: 9999;
+}
+  div.colorPicker_hexWrap {width: 100%; float:left }
+  div.colorPicker_hexWrap label {font-size: 95%; color: #2F2F2F; margin: 5px 2px; width: 25%}
+  div.colorPicker_hexWrap input {margin: 5px 2px; padding: 0; font-size: 95%; border: 1px solid #000; width: 65%; }
+
+div.colorPicker-swatch {
+  height: 12px;
+  width: 12px;
+  border: 1px solid #000;
+  margin: 2px;
+  float: left;
+  cursor: pointer;
+  line-height: 12px;
+}
@@ -0,0 +1,22 @@
+Copyright (c) 2012 Lakshan Perera
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
@@ -0,0 +1,328 @@
+/**
+ * Really Simple Color Picker in jQuery
+ *
+ * Licensed under the MIT (MIT-LICENSE.txt) licenses.
+ *
+ * Copyright (c) 2008-2012
+ * Lakshan Perera (www.laktek.com) & Daniel Lacy (daniellacy.com)
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+(function ($) {
+    /**
+     * Create a couple private variables.
+    **/
+    var selectorOwner,
+        activePalette,
+        cItterate       = 0,
+        templates       = {
+            control : $('<div class="colorPicker-picker">&nbsp;</div>'),
+            palette : $('<div id="colorPicker_palette" class="colorPicker-palette" />'),
+            swatch  : $('<div class="colorPicker-swatch">&nbsp;</div>'),
+            hexLabel: $('<label for="colorPicker_hex">Hex</label>'),
+            hexField: $('<input type="text" id="colorPicker_hex" />')
+        },
+        transparent     = "transparent",
+        lastColor;
+
+    /**
+     * Create our colorPicker function
+    **/
+    $.fn.colorPicker = function (options) {
+
+        return this.each(function () {
+            // Setup time. Clone new elements from our templates, set some IDs, make shortcuts, jazzercise.
+            var element      = $(this),
+                opts         = $.extend({}, $.fn.colorPicker.defaults, options),
+                defaultColor = $.fn.colorPicker.toHex(
+                        (element.val().length > 0) ? element.val() : opts.pickerDefault
+                    ),
+                newControl   = templates.control.clone(),
+                newPalette   = templates.palette.clone().attr('id', 'colorPicker_palette-' + cItterate),
+                newHexLabel  = templates.hexLabel.clone(),
+                newHexField  = templates.hexField.clone(),
+                paletteId    = newPalette[0].id,
+                swatch;
+
+
+            /**
+             * Build a color palette.
+            **/
+            $.each(opts.colors, function (i) {
+                swatch = templates.swatch.clone();
+
+                if (opts.colors[i] === transparent) {
+                    swatch.addClass(transparent).text('X');
+                    $.fn.colorPicker.bindPalette(newHexField, swatch, transparent);
+                } else {
+                    swatch.css("background-color", "#" + this);
+                    $.fn.colorPicker.bindPalette(newHexField, swatch);
+                }
+                swatch.appendTo(newPalette);
+            });
+
+            newHexLabel.attr('for', 'colorPicker_hex-' + cItterate);
+
+            newHexField.attr({
+                'id'    : 'colorPicker_hex-' + cItterate,
+                'value' : defaultColor
+            });
+
+            newHexField.bind("keydown", function (event) {
+                if (event.keyCode === 13) {
+                    var hexColor = $.fn.colorPicker.toHex($(this).val());
+                    $.fn.colorPicker.changeColor(hexColor ? hexColor : element.val());
+                }
+                if (event.keyCode === 27) {
+                    $.fn.colorPicker.hidePalette();
+                }
+            });
+
+            newHexField.bind("keyup", function (event) {
+              var hexColor = $.fn.colorPicker.toHex($(event.target).val());
+              $.fn.colorPicker.previewColor(hexColor ? hexColor : element.val());
+            });
+
+            $('<div class="colorPicker_hexWrap" />').append(newHexLabel).appendTo(newPalette);
+
+            newPalette.find('.colorPicker_hexWrap').append(newHexField);
+
+            $("body").append(newPalette);
+
+            newPalette.hide();
+
+
+            /**
+             * Build replacement interface for original color input.
+            **/
+            newControl.css("background-color", defaultColor);
+
+            newControl.bind("click", function () {
+                $.fn.colorPicker.togglePalette($('#' + paletteId), $(this));
+            });
+
+            if( options && options.onColorChange ) {
+              newControl.data('onColorChange', options.onColorChange);
+            } else {
+              newControl.data('onColorChange', function() {} );
+            }
+            element.after(newControl);
+
+            element.bind("change", function () {
+                element.next(".colorPicker-picker").css(
+                    "background-color", $.fn.colorPicker.toHex($(this).val())
+                );
+            });
+
+            // Hide the original input.
+            element.val(defaultColor).hide();
+
+            cItterate++;
+        });
+    };
+
+    /**
+     * Extend colorPicker with... all our functionality.
+    **/
+    $.extend(true, $.fn.colorPicker, {
+        /**
+         * Return a Hex color, convert an RGB value and return Hex, or return false.
+         *
+         * Inspired by http://code.google.com/p/jquery-color-utils
+        **/
+        toHex : function (color) {
+            // If we have a standard or shorthand Hex color, return that value.
+            if (color.match(/[0-9A-F]{6}|[0-9A-F]{3}$/i)) {
+                return (color.charAt(0) === "#") ? color : ("#" + color);
+
+            // Alternatively, check for RGB color, then convert and return it as Hex.
+            } else if (color.match(/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/)) {
+                var c = ([parseInt(RegExp.$1, 10), parseInt(RegExp.$2, 10), parseInt(RegExp.$3, 10)]),
+                    pad = function (str) {
+                        if (str.length < 2) {
+                            for (var i = 0, len = 2 - str.length; i < len; i++) {
+                                str = '0' + str;
+                            }
+                        }
+
+                        return str;
+                    };
+
+                if (c.length === 3) {
+                    var r = pad(c[0].toString(16)),
+                        g = pad(c[1].toString(16)),
+                        b = pad(c[2].toString(16));
+
+                    return '#' + r + g + b;
+                }
+
+            // Otherwise we wont do anything.
+            } else {
+                return false;
+
+            }
+        },
+
+        /**
+         * Check whether user clicked on the selector or owner.
+        **/
+        checkMouse : function (event, paletteId) {
+            var selector = activePalette,
+                selectorParent = $(event.target).parents("#" + selector.attr('id')).length;
+
+            if (event.target === $(selector)[0] || event.target === selectorOwner[0] || selectorParent > 0) {
+                return;
+            }
+
+            $.fn.colorPicker.hidePalette();
+        },
+
+        /**
+         * Hide the color palette modal.
+        **/
+        hidePalette : function () {
+            $(document).unbind("mousedown", $.fn.colorPicker.checkMouse);
+
+            $('.colorPicker-palette').hide();
+        },
+
+        /**
+         * Show the color palette modal.
+        **/
+        showPalette : function (palette) {
+            var hexColor = selectorOwner.prev("input").val();
+
+            palette.css({
+                top: selectorOwner.offset().top + (selectorOwner.outerHeight()),
+                left: selectorOwner.offset().left
+            });
+
+            $("#color_value").val(hexColor);
+
+            palette.show();
+
+            $(document).bind("mousedown", $.fn.colorPicker.checkMouse);
+        },
+
+        /**
+         * Toggle visibility of the colorPicker palette.
+        **/
+        togglePalette : function (palette, origin) {
+            // selectorOwner is the clicked .colorPicker-picker.
+            if (origin) {
+                selectorOwner = origin;
+            }
+
+            activePalette = palette;
+
+            if (activePalette.is(':visible')) {
+                $.fn.colorPicker.hidePalette();
+
+            } else {
+                $.fn.colorPicker.showPalette(palette);
+
+            }
+        },
+
+        /**
+         * Update the input with a newly selected color.
+        **/
+        changeColor : function (value) {
+            selectorOwner.css("background-color", value);
+            selectorOwner.prev("input").val(value).change();
+
+            $.fn.colorPicker.hidePalette();
+
+            selectorOwner.data('onColorChange').call(selectorOwner, $(selectorOwner).prev("input").attr("id"), value);
+        },
+
+
+        /**
+         * Preview the input with a newly selected color.
+        **/
+        previewColor : function (value) {
+            selectorOwner.css("background-color", value);
+        },
+
+        /**
+         * Bind events to the color palette swatches.
+        */
+        bindPalette : function (paletteInput, element, color) {
+            color = color ? color : $.fn.colorPicker.toHex(element.css("background-color"));
+
+            element.bind({
+                click : function (ev) {
+                    lastColor = color;
+
+                    $.fn.colorPicker.changeColor(color);
+                },
+                mouseover : function (ev) {
+                    lastColor = paletteInput.val();
+
+                    $(this).css("border-color", "#598FEF");
+
+                    paletteInput.val(color);
+
+                    $.fn.colorPicker.previewColor(color);
+                },
+                mouseout : function (ev) {
+                    $(this).css("border-color", "#000");
+
+                    paletteInput.val(selectorOwner.css("background-color"));
+
+                    paletteInput.val(lastColor);
+
+                    $.fn.colorPicker.previewColor(lastColor);
+                }
+            });
+        }
+    });
+
+    /**
+     * Default colorPicker options.
+     *
+     * These are publibly available for global modification using a setting such as:
+     *
+     * $.fn.colorPicker.defaults.colors = ['151337', '111111']
+     *
+     * They can also be applied on a per-bound element basis like so:
+     *
+     * $('#element1').colorPicker({pickerDefault: 'efefef', transparency: true});
+     * $('#element2').colorPicker({pickerDefault: '333333', colors: ['333333', '111111']});
+     *
+    **/
+    $.fn.colorPicker.defaults = {
+        // colorPicker default selected color.
+        pickerDefault : "FFFFFF",
+
+        // Default color set.
+        colors : [
+            '000000', '993300', '333300', '000080', '333399', '333333', '800000', 'FF6600',
+            '808000', '008000', '008080', '0000FF', '666699', '808080', 'FF0000', 'FF9900',
+            '99CC00', '339966', '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00',
+            'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0', 'FF99CC', 'FFCC99',
+            'FFFF99', 'CCFFFF', '99CCFF', 'FFFFFF'
+        ],
+
+        // If we want to simply add more colors to the default set, use addColors.
+        addColors : []
+    };
+
+})(jQuery);
@@ -0,0 +1,26 @@
+/**
+ * Really Simple Color Picker in jQuery
+ * 
+ * Licensed under the MIT (MIT-LICENSE.txt) licenses.
+ *
+ * Copyright (c) 2008-2012 
+ * Lakshan Perera (www.laktek.com) & Daniel Lacy (daniellacy.com)
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */(function(a){var b,c,d=0,e={control:a('<div class="colorPicker-picker">&nbsp;</div>'),palette:a('<div id="colorPicker_palette" class="colorPicker-palette" />'),swatch:a('<div class="colorPicker-swatch">&nbsp;</div>'),hexLabel:a('<label for="colorPicker_hex">Hex</label>'),hexField:a('<input type="text" id="colorPicker_hex" />')},f="transparent",g;a.fn.colorPicker=function(b){return this.each(function(){var c=a(this),g=a.extend({},a.fn.colorPicker.defaults,b),h=a.fn.colorPicker.toHex(c.val().length>0?c.val():g.pickerDefault),i=e.control.clone(),j=e.palette.clone().attr("id","colorPicker_palette-"+d),k=e.hexLabel.clone(),l=e.hexField.clone(),m=j[0].id,n;a.each(g.colors,function(b){n=e.swatch.clone(),g.colors[b]===f?(n.addClass(f).text("X"),a.fn.colorPicker.bindPalette(l,n,f)):(n.css("background-color","#"+this),a.fn.colorPicker.bindPalette(l,n)),n.appendTo(j)}),k.attr("for","colorPicker_hex-"+d),l.attr({id:"colorPicker_hex-"+d,value:h}),l.bind("keydown",function(b){if(b.keyCode===13){var d=a.fn.colorPicker.toHex(a(this).val());a.fn.colorPicker.changeColor(d?d:c.val())}b.keyCode===27&&a.fn.colorPicker.hidePalette()}),l.bind("keyup",function(b){var d=a.fn.colorPicker.toHex(a(b.target).val());a.fn.colorPicker.previewColor(d?d:c.val())}),a('<div class="colorPicker_hexWrap" />').append(k).appendTo(j),j.find(".colorPicker_hexWrap").append(l),a("body").append(j),j.hide(),i.css("background-color",h),i.bind("click",function(){a.fn.colorPicker.togglePalette(a("#"+m),a(this))}),b&&b.onColorChange?i.data("onColorChange",b.onColorChange):i.data("onColorChange",function(){}),c.after(i),c.bind("change",function(){c.next(".colorPicker-picker").css("background-color",a.fn.colorPicker.toHex(a(this).val()))}),c.val(h).hide(),d++})},a.extend(!0,a.fn.colorPicker,{toHex:function(a){if(a.match(/[0-9A-F]{6}|[0-9A-F]{3}$/i))return a.charAt(0)==="#"?a:"#"+a;if(!a.match(/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/))return!1;var b=[parseInt(RegExp.$1,10),parseInt(RegExp.$2,10),parseInt(RegExp.$3,10)],c=function(a){if(a.length<2)for(var b=0,c=2-a.length;b<c;b++)a="0"+a;return a};if(b.length===3){var d=c(b[0].toString(16)),e=c(b[1].toString(16)),f=c(b[2].toString(16));return"#"+d+e+f}},checkMouse:function(d,e){var f=c,g=a(d.target).parents("#"+f.attr("id")).length;if(d.target===a(f)[0]||d.target===b[0]||g>0)return;a.fn.colorPicker.hidePalette()},hidePalette:function(){a(document).unbind("mousedown",a.fn.colorPicker.checkMouse),a(".colorPicker-palette").hide()},showPalette:function(c){var d=b.prev("input").val();c.css({top:b.offset().top+b.outerHeight(),left:b.offset().left}),a("#color_value").val(d),c.show(),a(document).bind("mousedown",a.fn.colorPicker.checkMouse)},togglePalette:function(d,e){e&&(b=e),c=d,c.is(":visible")?a.fn.colorPicker.hidePalette():a.fn.colorPicker.showPalette(d)},changeColor:function(c){b.css("background-color",c),b.prev("input").val(c).change(),a.fn.colorPicker.hidePalette(),b.data("onColorChange").call(b,a(b).prev("input").attr("id"),c)},previewColor:function(a){b.css("background-color",a)},bindPalette:function(c,d,e){e=e?e:a.fn.colorPicker.toHex(d.css("background-color")),d.bind({click:function(b){g=e,a.fn.colorPicker.changeColor(e)},mouseover:function(b){g=c.val(),a(this).css("border-color","#598FEF"),c.val(e),a.fn.colorPicker.previewColor(e)},mouseout:function(d){a(this).css("border-color","#000"),c.val(b.css("background-color")),c.val(g),a.fn.colorPicker.previewColor(g)}})}}),a.fn.colorPicker.defaults={pickerDefault:"FFFFFF",colors:["000000","993300","333300","000080","333399","333333","800000","FF6600","808000","008000","008080","0000FF","666699","808080","FF0000","FF9900","99CC00","339966","33CCCC","3366FF","800080","999999","FF00FF","FFCC00","FFFF00","00FF00","00FFFF","00CCFF","993366","C0C0C0","FF99CC","FFCC99","FFFF99","CCFFFF","99CCFF","FFFFFF"],addColors:[]}})(jQuery)
 \ No newline at end of file
+@import url('colorPicker.css');
+
 .link {
     cursor: pointer;
 }
@@ -38,7 +38,7 @@
       <%= f.label :color, "(*) Color:" %>
     </td>
     <td>
-      <%= f.text_field :color %>
+      <%= f.text_field(:color, :id => "range_color", :value => @range_color) %>
     </td>
   </tr>
   <tr>
@@ -51,3 +51,12 @@
   </tr>
 </table>
 <%= f.submit "Save Range" %>
+
+<script>jQuery(document).ready(function($) {
+   $('#range_color').colorPicker({ 
+   	onColorChange : function(id, newValue) {
+   		newValue = newValue.replace(/#/gi, "ff");
+   		jQuery('#range_color').val(newValue);
+   	}
+   	});
+});</script>
 <script src="/plugins/mezuro/javascripts/validations.js" type="text/javascript"></script>
+<script src="/plugins/mezuro/javascripts/colorPicker/jquery.colorPicker.min.js" type="text/javascript"></script>
+<script src="/plugins/mezuro/javascripts/colorPicker/jquery.colorPicker.js" type="text/javascript"></script>
  
 <h2><%= @configuration_content.name %> Configuration</h2>
  
@@ -84,3 +86,4 @@
 <%= link_to_remote "New Range", :url => {:action =>"new_range", :controller => "mezuro_plugin_myprofile", :id => @configuration_content.id, :metric_name => @metric.name} %>
 <div id="range_form" style="display:none"></div>
  
+
...	...	@@ -113,6 +113,7 @@ class MezuroPluginMyprofileController < ProfileController
113	113	@configuration_content = profile.articles.find(params[:id])
114	114	@metric_name = params[:metric_name]
115	115	@range = Kalibro::Range.new
	116	+ @range_color = "#000000"
116	117	end
117	118
118	119	def edit_range
...	...	@@ -121,6 +122,7 @@ class MezuroPluginMyprofileController < ProfileController
121	122	@beginning_id = params[:beginning_id]
122	123	metric_configuration = Kalibro::MetricConfiguration.find_by_configuration_name_and_metric_name(@configuration_content.name, @metric_name)
123	124	@range = metric_configuration.ranges.find{\|range\| range.beginning == @beginning_id.to_f \|\| @beginning_id =="-INF" }
	125	+ @range_color = "#" + @range.color.to_s.gsub(/^ff/, "")
124	126	end
125	127
126	128	def create_range
...	...
...	...	@@ -0,0 +1,31 @@
	1	+div.colorPicker-picker {
	2	+ height: 16px;
	3	+ width: 16px;
	4	+ padding: 0 !important;
	5	+ border: 1px solid #ccc;
	6	+ background: url(arrow.gif) no-repeat top right;
	7	+ cursor: pointer;
	8	+ line-height: 16px;
	9	+}
	10	+
	11	+div.colorPicker-palette {
	12	+ width: 110px;
	13	+ position: absolute;
	14	+ border: 1px solid #598FEF;
	15	+ background-color: #EFEFEF;
	16	+ padding: 2px;
	17	+ z-index: 9999;
	18	+}
	19	+ div.colorPicker_hexWrap {width: 100%; float:left }
	20	+ div.colorPicker_hexWrap label {font-size: 95%; color: #2F2F2F; margin: 5px 2px; width: 25%}
	21	+ div.colorPicker_hexWrap input {margin: 5px 2px; padding: 0; font-size: 95%; border: 1px solid #000; width: 65%; }
	22	+
	23	+div.colorPicker-swatch {
	24	+ height: 12px;
	25	+ width: 12px;
	26	+ border: 1px solid #000;
	27	+ margin: 2px;
	28	+ float: left;
	29	+ cursor: pointer;
	30	+ line-height: 12px;
	31	+}
...	...
...	...	@@ -0,0 +1,22 @@
	1	+Copyright (c) 2012 Lakshan Perera
	2	+
	3	+Permission is hereby granted, free of charge, to any person
	4	+obtaining a copy of this software and associated documentation
	5	+files (the "Software"), to deal in the Software without
	6	+restriction, including without limitation the rights to use,
	7	+copy, modify, merge, publish, distribute, sublicense, and/or sell
	8	+copies of the Software, and to permit persons to whom the
	9	+Software is furnished to do so, subject to the following
	10	+conditions:
	11	+
	12	+The above copyright notice and this permission notice shall be
	13	+included in all copies or substantial portions of the Software.
	14	+
	15	+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
	16	+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
	17	+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
	18	+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
	19	+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
	20	+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
	21	+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
	22	+OTHER DEALINGS IN THE SOFTWARE.
...	...
...	...	@@ -0,0 +1,328 @@
	1	+/**
	2	+ * Really Simple Color Picker in jQuery
	3	+ *
	4	+ * Licensed under the MIT (MIT-LICENSE.txt) licenses.
	5	+ *
	6	+ * Copyright (c) 2008-2012
	7	+ * Lakshan Perera (www.laktek.com) & Daniel Lacy (daniellacy.com)
	8	+ *
	9	+ * Permission is hereby granted, free of charge, to any person obtaining a copy
	10	+ * of this software and associated documentation files (the "Software"), to
	11	+ * deal in the Software without restriction, including without limitation the
	12	+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
	13	+ * sell copies of the Software, and to permit persons to whom the Software is
	14	+ * furnished to do so, subject to the following conditions:
	15	+ *
	16	+ * The above copyright notice and this permission notice shall be included in
	17	+ * all copies or substantial portions of the Software.
	18	+ *
	19	+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
	20	+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
	21	+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
	22	+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
	23	+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
	24	+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
	25	+ * IN THE SOFTWARE.
	26	+ */
	27	+
	28	+(function ($) {
	29	+ /**
	30	+ * Create a couple private variables.
	31	+ **/
	32	+ var selectorOwner,
	33	+ activePalette,
	34	+ cItterate = 0,
	35	+ templates = {
	36	+ control : $('<div class="colorPicker-picker"> </div>'),
	37	+ palette : $('<div id="colorPicker_palette" class="colorPicker-palette" />'),
	38	+ swatch : $('<div class="colorPicker-swatch"> </div>'),
	39	+ hexLabel: $('<label for="colorPicker_hex">Hex</label>'),
	40	+ hexField: $('<input type="text" id="colorPicker_hex" />')
	41	+ },
	42	+ transparent = "transparent",
	43	+ lastColor;
	44	+
	45	+ /**
	46	+ * Create our colorPicker function
	47	+ **/
	48	+ $.fn.colorPicker = function (options) {
	49	+
	50	+ return this.each(function () {
	51	+ // Setup time. Clone new elements from our templates, set some IDs, make shortcuts, jazzercise.
	52	+ var element = $(this),
	53	+ opts = $.extend({}, $.fn.colorPicker.defaults, options),
	54	+ defaultColor = $.fn.colorPicker.toHex(
	55	+ (element.val().length > 0) ? element.val() : opts.pickerDefault
	56	+ ),
	57	+ newControl = templates.control.clone(),
	58	+ newPalette = templates.palette.clone().attr('id', 'colorPicker_palette-' + cItterate),
	59	+ newHexLabel = templates.hexLabel.clone(),
	60	+ newHexField = templates.hexField.clone(),
	61	+ paletteId = newPalette[0].id,
	62	+ swatch;
	63	+
	64	+
	65	+ /**
	66	+ * Build a color palette.
	67	+ **/
	68	+ $.each(opts.colors, function (i) {
	69	+ swatch = templates.swatch.clone();
	70	+
	71	+ if (opts.colors[i] === transparent) {
	72	+ swatch.addClass(transparent).text('X');
	73	+ $.fn.colorPicker.bindPalette(newHexField, swatch, transparent);
	74	+ } else {
	75	+ swatch.css("background-color", "#" + this);
	76	+ $.fn.colorPicker.bindPalette(newHexField, swatch);
	77	+ }
	78	+ swatch.appendTo(newPalette);
	79	+ });
	80	+
	81	+ newHexLabel.attr('for', 'colorPicker_hex-' + cItterate);
	82	+
	83	+ newHexField.attr({
	84	+ 'id' : 'colorPicker_hex-' + cItterate,
	85	+ 'value' : defaultColor
	86	+ });
	87	+
	88	+ newHexField.bind("keydown", function (event) {
	89	+ if (event.keyCode === 13) {
	90	+ var hexColor = $.fn.colorPicker.toHex($(this).val());
	91	+ $.fn.colorPicker.changeColor(hexColor ? hexColor : element.val());
	92	+ }
	93	+ if (event.keyCode === 27) {
	94	+ $.fn.colorPicker.hidePalette();
	95	+ }
	96	+ });
	97	+
	98	+ newHexField.bind("keyup", function (event) {
	99	+ var hexColor = $.fn.colorPicker.toHex($(event.target).val());
	100	+ $.fn.colorPicker.previewColor(hexColor ? hexColor : element.val());
	101	+ });
	102	+
	103	+ $('<div class="colorPicker_hexWrap" />').append(newHexLabel).appendTo(newPalette);
	104	+
	105	+ newPalette.find('.colorPicker_hexWrap').append(newHexField);
	106	+
	107	+ $("body").append(newPalette);
	108	+
	109	+ newPalette.hide();
	110	+
	111	+
	112	+ /**
	113	+ * Build replacement interface for original color input.
	114	+ **/
	115	+ newControl.css("background-color", defaultColor);
	116	+
	117	+ newControl.bind("click", function () {
	118	+ $.fn.colorPicker.togglePalette($('#' + paletteId), $(this));
	119	+ });
	120	+
	121	+ if( options && options.onColorChange ) {
	122	+ newControl.data('onColorChange', options.onColorChange);
	123	+ } else {
	124	+ newControl.data('onColorChange', function() {} );
	125	+ }
	126	+ element.after(newControl);
	127	+
	128	+ element.bind("change", function () {
	129	+ element.next(".colorPicker-picker").css(
	130	+ "background-color", $.fn.colorPicker.toHex($(this).val())
	131	+ );
	132	+ });
	133	+
	134	+ // Hide the original input.
	135	+ element.val(defaultColor).hide();
	136	+
	137	+ cItterate++;
	138	+ });
	139	+ };
	140	+
	141	+ /**
	142	+ * Extend colorPicker with... all our functionality.
	143	+ **/
	144	+ $.extend(true, $.fn.colorPicker, {
	145	+ /**
	146	+ * Return a Hex color, convert an RGB value and return Hex, or return false.
	147	+ *
	148	+ * Inspired by http://code.google.com/p/jquery-color-utils
	149	+ **/
	150	+ toHex : function (color) {
	151	+ // If we have a standard or shorthand Hex color, return that value.
	152	+ if (color.match(/[0-9A-F]{6}\|[0-9A-F]{3}$/i)) {
	153	+ return (color.charAt(0) === "#") ? color : ("#" + color);
	154	+
	155	+ // Alternatively, check for RGB color, then convert and return it as Hex.
	156	+ } else if (color.match(/^rgb\(\s(\d{1,3})\s,\s(\d{1,3})\s,\s(\d{1,3})\s\)$/)) {
	157	+ var c = ([parseInt(RegExp.$1, 10), parseInt(RegExp.$2, 10), parseInt(RegExp.$3, 10)]),
	158	+ pad = function (str) {
	159	+ if (str.length < 2) {
	160	+ for (var i = 0, len = 2 - str.length; i < len; i++) {
	161	+ str = '0' + str;
	162	+ }
	163	+ }
	164	+
	165	+ return str;
	166	+ };
	167	+
	168	+ if (c.length === 3) {
	169	+ var r = pad(c[0].toString(16)),
	170	+ g = pad(c[1].toString(16)),
	171	+ b = pad(c[2].toString(16));
	172	+
	173	+ return '#' + r + g + b;
	174	+ }
	175	+
	176	+ // Otherwise we wont do anything.
	177	+ } else {
	178	+ return false;
	179	+
	180	+ }
	181	+ },
	182	+
	183	+ /**
	184	+ * Check whether user clicked on the selector or owner.
	185	+ **/
	186	+ checkMouse : function (event, paletteId) {
	187	+ var selector = activePalette,
	188	+ selectorParent = $(event.target).parents("#" + selector.attr('id')).length;
	189	+
	190	+ if (event.target === $(selector)[0] \|\| event.target === selectorOwner[0] \|\| selectorParent > 0) {
	191	+ return;
	192	+ }
	193	+
	194	+ $.fn.colorPicker.hidePalette();
	195	+ },
	196	+
	197	+ /**
	198	+ * Hide the color palette modal.
	199	+ **/
	200	+ hidePalette : function () {
	201	+ $(document).unbind("mousedown", $.fn.colorPicker.checkMouse);
	202	+
	203	+ $('.colorPicker-palette').hide();
	204	+ },
	205	+
	206	+ /**
	207	+ * Show the color palette modal.
	208	+ **/
	209	+ showPalette : function (palette) {
	210	+ var hexColor = selectorOwner.prev("input").val();
	211	+
	212	+ palette.css({
	213	+ top: selectorOwner.offset().top + (selectorOwner.outerHeight()),
	214	+ left: selectorOwner.offset().left
	215	+ });
	216	+
	217	+ $("#color_value").val(hexColor);
	218	+
	219	+ palette.show();
	220	+
	221	+ $(document).bind("mousedown", $.fn.colorPicker.checkMouse);
	222	+ },
	223	+
	224	+ /**
	225	+ * Toggle visibility of the colorPicker palette.
	226	+ **/
	227	+ togglePalette : function (palette, origin) {
	228	+ // selectorOwner is the clicked .colorPicker-picker.
	229	+ if (origin) {
	230	+ selectorOwner = origin;
	231	+ }
	232	+
	233	+ activePalette = palette;
	234	+
	235	+ if (activePalette.is(':visible')) {
	236	+ $.fn.colorPicker.hidePalette();
	237	+
	238	+ } else {
	239	+ $.fn.colorPicker.showPalette(palette);
	240	+
	241	+ }
	242	+ },
	243	+
	244	+ /**
	245	+ * Update the input with a newly selected color.
	246	+ **/
	247	+ changeColor : function (value) {
	248	+ selectorOwner.css("background-color", value);
	249	+ selectorOwner.prev("input").val(value).change();
	250	+
	251	+ $.fn.colorPicker.hidePalette();
	252	+
	253	+ selectorOwner.data('onColorChange').call(selectorOwner, $(selectorOwner).prev("input").attr("id"), value);
	254	+ },
	255	+
	256	+
	257	+ /**
	258	+ * Preview the input with a newly selected color.
	259	+ **/
	260	+ previewColor : function (value) {
	261	+ selectorOwner.css("background-color", value);
	262	+ },
	263	+
	264	+ /**
	265	+ * Bind events to the color palette swatches.
	266	+ */
	267	+ bindPalette : function (paletteInput, element, color) {
	268	+ color = color ? color : $.fn.colorPicker.toHex(element.css("background-color"));
	269	+
	270	+ element.bind({
	271	+ click : function (ev) {
	272	+ lastColor = color;
	273	+
	274	+ $.fn.colorPicker.changeColor(color);
	275	+ },
	276	+ mouseover : function (ev) {
	277	+ lastColor = paletteInput.val();
	278	+
	279	+ $(this).css("border-color", "#598FEF");
	280	+
	281	+ paletteInput.val(color);
	282	+
	283	+ $.fn.colorPicker.previewColor(color);
	284	+ },
	285	+ mouseout : function (ev) {
	286	+ $(this).css("border-color", "#000");
	287	+
	288	+ paletteInput.val(selectorOwner.css("background-color"));
	289	+
	290	+ paletteInput.val(lastColor);
	291	+
	292	+ $.fn.colorPicker.previewColor(lastColor);
	293	+ }
	294	+ });
	295	+ }
	296	+ });
	297	+
	298	+ /**
	299	+ * Default colorPicker options.
	300	+ *
	301	+ * These are publibly available for global modification using a setting such as:
	302	+ *
	303	+ * $.fn.colorPicker.defaults.colors = ['151337', '111111']
	304	+ *
	305	+ * They can also be applied on a per-bound element basis like so:
	306	+ *
	307	+ * $('#element1').colorPicker({pickerDefault: 'efefef', transparency: true});
	308	+ * $('#element2').colorPicker({pickerDefault: '333333', colors: ['333333', '111111']});
	309	+ *
	310	+ **/
	311	+ $.fn.colorPicker.defaults = {
	312	+ // colorPicker default selected color.
	313	+ pickerDefault : "FFFFFF",
	314	+
	315	+ // Default color set.
	316	+ colors : [
	317	+ '000000', '993300', '333300', '000080', '333399', '333333', '800000', 'FF6600',
	318	+ '808000', '008000', '008080', '0000FF', '666699', '808080', 'FF0000', 'FF9900',
	319	+ '99CC00', '339966', '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00',
	320	+ 'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0', 'FF99CC', 'FFCC99',
	321	+ 'FFFF99', 'CCFFFF', '99CCFF', 'FFFFFF'
	322	+ ],
	323	+
	324	+ // If we want to simply add more colors to the default set, use addColors.
	325	+ addColors : []
	326	+ };
	327	+
	328	+})(jQuery);
...	...
...	...	@@ -0,0 +1,26 @@
	1	+/**
	2	+ * Really Simple Color Picker in jQuery
	3	+ *
	4	+ * Licensed under the MIT (MIT-LICENSE.txt) licenses.
	5	+ *
	6	+ * Copyright (c) 2008-2012
	7	+ * Lakshan Perera (www.laktek.com) & Daniel Lacy (daniellacy.com)
	8	+ *
	9	+ * Permission is hereby granted, free of charge, to any person obtaining a copy
	10	+ * of this software and associated documentation files (the "Software"), to
	11	+ * deal in the Software without restriction, including without limitation the
	12	+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
	13	+ * sell copies of the Software, and to permit persons to whom the Software is
	14	+ * furnished to do so, subject to the following conditions:
	15	+ *
	16	+ * The above copyright notice and this permission notice shall be included in
	17	+ * all copies or substantial portions of the Software.
	18	+ *
	19	+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
	20	+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
	21	+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
	22	+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
	23	+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
	24	+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
	25	+ * IN THE SOFTWARE.
	26	+ /(function(a){var b,c,d=0,e={control:a('<div class="colorPicker-picker"> </div>'),palette:a('<div id="colorPicker_palette" class="colorPicker-palette" />'),swatch:a('<div class="colorPicker-swatch"> </div>'),hexLabel:a('<label for="colorPicker_hex">Hex</label>'),hexField:a('<input type="text" id="colorPicker_hex" />')},f="transparent",g;a.fn.colorPicker=function(b){return this.each(function(){var c=a(this),g=a.extend({},a.fn.colorPicker.defaults,b),h=a.fn.colorPicker.toHex(c.val().length>0?c.val():g.pickerDefault),i=e.control.clone(),j=e.palette.clone().attr("id","colorPicker_palette-"+d),k=e.hexLabel.clone(),l=e.hexField.clone(),m=j[0].id,n;a.each(g.colors,function(b){n=e.swatch.clone(),g.colors[b]===f?(n.addClass(f).text("X"),a.fn.colorPicker.bindPalette(l,n,f)):(n.css("background-color","#"+this),a.fn.colorPicker.bindPalette(l,n)),n.appendTo(j)}),k.attr("for","colorPicker_hex-"+d),l.attr({id:"colorPicker_hex-"+d,value:h}),l.bind("keydown",function(b){if(b.keyCode===13){var d=a.fn.colorPicker.toHex(a(this).val());a.fn.colorPicker.changeColor(d?d:c.val())}b.keyCode===27&&a.fn.colorPicker.hidePalette()}),l.bind("keyup",function(b){var d=a.fn.colorPicker.toHex(a(b.target).val());a.fn.colorPicker.previewColor(d?d:c.val())}),a('<div class="colorPicker_hexWrap" />').append(k).appendTo(j),j.find(".colorPicker_hexWrap").append(l),a("body").append(j),j.hide(),i.css("background-color",h),i.bind("click",function(){a.fn.colorPicker.togglePalette(a("#"+m),a(this))}),b&&b.onColorChange?i.data("onColorChange",b.onColorChange):i.data("onColorChange",function(){}),c.after(i),c.bind("change",function(){c.next(".colorPicker-picker").css("background-color",a.fn.colorPicker.toHex(a(this).val()))}),c.val(h).hide(),d++})},a.extend(!0,a.fn.colorPicker,{toHex:function(a){if(a.match(/[0-9A-F]{6}\|[0-9A-F]{3}$/i))return a.charAt(0)==="#"?a:"#"+a;if(!a.match(/^rgb\(\s(\d{1,3})\s,\s(\d{1,3})\s,\s(\d{1,3})\s*\)$/))return!1;var b=[parseInt(RegExp.$1,10),parseInt(RegExp.$2,10),parseInt(RegExp.$3,10)],c=function(a){if(a.length<2)for(var b=0,c=2-a.length;b<c;b++)a="0"+a;return a};if(b.length===3){var d=c(b[0].toString(16)),e=c(b[1].toString(16)),f=c(b[2].toString(16));return"#"+d+e+f}},checkMouse:function(d,e){var f=c,g=a(d.target).parents("#"+f.attr("id")).length;if(d.target===a(f)[0]\|\|d.target===b[0]\|\|g>0)return;a.fn.colorPicker.hidePalette()},hidePalette:function(){a(document).unbind("mousedown",a.fn.colorPicker.checkMouse),a(".colorPicker-palette").hide()},showPalette:function(c){var d=b.prev("input").val();c.css({top:b.offset().top+b.outerHeight(),left:b.offset().left}),a("#color_value").val(d),c.show(),a(document).bind("mousedown",a.fn.colorPicker.checkMouse)},togglePalette:function(d,e){e&&(b=e),c=d,c.is(":visible")?a.fn.colorPicker.hidePalette():a.fn.colorPicker.showPalette(d)},changeColor:function(c){b.css("background-color",c),b.prev("input").val(c).change(),a.fn.colorPicker.hidePalette(),b.data("onColorChange").call(b,a(b).prev("input").attr("id"),c)},previewColor:function(a){b.css("background-color",a)},bindPalette:function(c,d,e){e=e?e:a.fn.colorPicker.toHex(d.css("background-color")),d.bind({click:function(b){g=e,a.fn.colorPicker.changeColor(e)},mouseover:function(b){g=c.val(),a(this).css("border-color","#598FEF"),c.val(e),a.fn.colorPicker.previewColor(e)},mouseout:function(d){a(this).css("border-color","#000"),c.val(b.css("background-color")),c.val(g),a.fn.colorPicker.previewColor(g)}})}}),a.fn.colorPicker.defaults={pickerDefault:"FFFFFF",colors:["000000","993300","333300","000080","333399","333333","800000","FF6600","808000","008000","008080","0000FF","666699","808080","FF0000","FF9900","99CC00","339966","33CCCC","3366FF","800080","999999","FF00FF","FFCC00","FFFF00","00FF00","00FFFF","00CCFF","993366","C0C0C0","FF99CC","FFCC99","FFFF99","CCFFFF","99CCFF","FFFFFF"],addColors:[]}})(jQuery)
0	27	\ No newline at end of file
...	...
	1	+@import url('colorPicker.css');
	2	+
1	3	.link {
2	4	cursor: pointer;
3	5	}
...	...
...	...	@@ -38,7 +38,7 @@
38	38	<%= f.label :color, "(*) Color:" %>
39	39	</td>
40	40	<td>
41		- <%= f.text_field :color %>
	41	+ <%= f.text_field(:color, :id => "range_color", :value => @range_color) %>
42	42	</td>
43	43	</tr>
44	44	<tr>
...	...	@@ -51,3 +51,12 @@
51	51	</tr>
52	52	</table>
53	53	<%= f.submit "Save Range" %>
	54	+
	55	+<script>jQuery(document).ready(function($) {
	56	+ $('#range_color').colorPicker({
	57	+ onColorChange : function(id, newValue) {
	58	+ newValue = newValue.replace(/#/gi, "ff");
	59	+ jQuery('#range_color').val(newValue);
	60	+ }
	61	+ });
	62	+});</script>
...	...
1	1	<script src="/plugins/mezuro/javascripts/validations.js" type="text/javascript"></script>
	2	+<script src="/plugins/mezuro/javascripts/colorPicker/jquery.colorPicker.min.js" type="text/javascript"></script>
	3	+<script src="/plugins/mezuro/javascripts/colorPicker/jquery.colorPicker.js" type="text/javascript"></script>
2	4
3	5	<h2><%= @configuration_content.name %> Configuration</h2>
4	6
...	...	@@ -84,3 +86,4 @@
84	86	<%= link_to_remote "New Range", :url => {:action =>"new_range", :controller => "mezuro_plugin_myprofile", :id => @configuration_content.id, :metric_name => @metric.name} %>
85	87	<div id="range_form" style="display:none"></div>
86	88
	89	+
...	...