Download as
Browse Code »

Commit 45521292e555ed5ff3c45c2b58a3cfbe6b153f8d

Authored by Leandro Santos
Committed by Joenio Costa
1 parent fcd6492a
Exists in master and in 28 other branches 1.2+SPB2, 2_split_by_role, add_fields_in_api, api_fixies, api_pagination, api_private_token, api_tasks, article_hit_count, blog_page_bug, checkbox_to_user_can_edit_page, communities_ratings, communities_ratings_moderation, community_ratings_rebase, fix_cloned_article_parent, fix_gallery_image_url, fix_javascript_categories, fix_optional_fields, fix_suggest_article, fix_user_email_validation, highlight_block_fix, notification_plugin, notification_plugin_rebase, script_to_update, split_by_role, stable, temp_ratings, tests, tests_fixies

Adding the javascript colorpicker plugin to application 

The helpers 'colorpicker_field' and 'colorpicker_field_tag' were created to facilitate the usability of the colorpicker

(ActionItem1520)
Showing 10 changed files with 643 additions and 1 deletions   Show diff stats
app/helpers/application_helper.rb
  Diff comments   View file @4552129
... ... @@ -917,6 +917,7 @@ module ApplicationHelper
917 917 'application',
918 918 'thickbox',
919 919 'lightbox',
  920 + 'colorpicker',
920 921 pngfix_stylesheet_path,
921 922 ]
922 923 end
... ... @@ -948,5 +949,12 @@ module ApplicationHelper
948 949 content
949 950 end
950 951  
  952 + def colorpicker_field(object_name, method, options = {})
  953 + text_field(object_name, method, options.merge(:class => 'colorpicker_field'))
  954 + end
  955 +
  956 + def colorpicker_field_tag(name, value = nil, options = {})
  957 + text_field_tag(name, value, options.merge(:class => 'colorpicker_field'))
  958 + end
951 959  
952 960 end
... ...
app/views/layouts/_javascript.rhtml
  Diff comments   View file @4552129
1   -<%= javascript_include_tag :defaults, 'jquery-latest.js', 'jquery.noconflict.js', 'jquery.cycle.all.min.js', 'thickbox.js', 'lightbox', :cache => 'cache-general' %>
  1 +<%= javascript_include_tag :defaults, 'jquery-latest.js', 'jquery.noconflict.js', 'jquery.cycle.all.min.js', 'thickbox.js', 'lightbox', 'colorpicker', 'colorpicker-noosfero', :cache => 'cache-general' %>
... ...
public/images/colorpicker/apply.png 0 → 100644
View file @4552129

955 Bytes
public/images/colorpicker/gradiente.png 0 → 100644
View file @4552129

595 Bytes
public/images/colorpicker/indic.gif 0 → 100644
View file @4552129

86 Bytes
public/images/colorpicker/overlay.png 0 → 100644
View file @4552129

10.1 KB
public/images/colorpicker/select.gif 0 → 100644
View file @4552129

78 Bytes
public/javascripts/colorpicker-noosfero.js 0 → 100644
  Diff comments   View file @4552129
... ... @@ -0,0 +1,19 @@
  1 +(function($) {
  2 +
  3 + $('.colorpicker_field').live('click focus', function() {
  4 + $(this).ColorPicker({
  5 + livePreview: true,
  6 + onSubmit: function(hsb, hex, rgb, el) {
  7 + $(el).val(hex);
  8 + $(el).ColorPickerHide();
  9 + },
  10 + onBeforeShow: function () {
  11 + $(this).ColorPickerSetColor(this.value);
  12 + }
  13 + })
  14 + .bind('keyup', function(){
  15 + $(this).ColorPickerSetColor(this.value);
  16 + });
  17 + });
  18 +
  19 +})(jQuery);
... ...
public/javascripts/colorpicker.js 0 → 100644
  Diff comments   View file @4552129
... ... @@ -0,0 +1,484 @@
  1 +/**
  2 + *
  3 + * Color picker
  4 + * Author: Stefan Petre www.eyecon.ro
  5 + *
  6 + * Dual licensed under the MIT and GPL licenses
  7 + *
  8 + */
  9 +(function ($) {
  10 + var ColorPicker = function () {
  11 + var
  12 + ids = {},
  13 + inAction,
  14 + charMin = 65,
  15 + visible,
  16 + tpl = '<div class="colorpicker"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_submit"></div></div>',
  17 + defaults = {
  18 + eventName: 'click',
  19 + onShow: function () {},
  20 + onBeforeShow: function(){},
  21 + onHide: function () {},
  22 + onChange: function () {},
  23 + onSubmit: function () {},
  24 + color: 'ff0000',
  25 + livePreview: true,
  26 + flat: false
  27 + },
  28 + fillRGBFields = function (hsb, cal) {
  29 + var rgb = HSBToRGB(hsb);
  30 + $(cal).data('colorpicker').fields
  31 + .eq(1).val(rgb.r).end()
  32 + .eq(2).val(rgb.g).end()
  33 + .eq(3).val(rgb.b).end();
  34 + },
  35 + fillHSBFields = function (hsb, cal) {
  36 + $(cal).data('colorpicker').fields
  37 + .eq(4).val(hsb.h).end()
  38 + .eq(5).val(hsb.s).end()
  39 + .eq(6).val(hsb.b).end();
  40 + },
  41 + fillHexFields = function (hsb, cal) {
  42 + $(cal).data('colorpicker').fields
  43 + .eq(0).val(HSBToHex(hsb)).end();
  44 + },
  45 + setSelector = function (hsb, cal) {
  46 + $(cal).data('colorpicker').selector.css('backgroundColor', '#' + HSBToHex({h: hsb.h, s: 100, b: 100}));
  47 + $(cal).data('colorpicker').selectorIndic.css({
  48 + left: parseInt(150 * hsb.s/100, 10),
  49 + top: parseInt(150 * (100-hsb.b)/100, 10)
  50 + });
  51 + },
  52 + setHue = function (hsb, cal) {
  53 + $(cal).data('colorpicker').hue.css('top', parseInt(150 - 150 * hsb.h/360, 10));
  54 + },
  55 + setCurrentColor = function (hsb, cal) {
  56 + $(cal).data('colorpicker').currentColor.css('backgroundColor', '#' + HSBToHex(hsb));
  57 + },
  58 + setNewColor = function (hsb, cal) {
  59 + $(cal).data('colorpicker').newColor.css('backgroundColor', '#' + HSBToHex(hsb));
  60 + },
  61 + keyDown = function (ev) {
  62 + var pressedKey = ev.charCode || ev.keyCode || -1;
  63 + if ((pressedKey > charMin && pressedKey <= 90) || pressedKey == 32) {
  64 + return false;
  65 + }
  66 + var cal = $(this).parent().parent();
  67 + if (cal.data('colorpicker').livePreview === true) {
  68 + change.apply(this);
  69 + }
  70 + },
  71 + change = function (ev) {
  72 + var cal = $(this).parent().parent(), col;
  73 + if (this.parentNode.className.indexOf('_hex') > 0) {
  74 + cal.data('colorpicker').color = col = HexToHSB(fixHex(this.value));
  75 + } else if (this.parentNode.className.indexOf('_hsb') > 0) {
  76 + cal.data('colorpicker').color = col = fixHSB({
  77 + h: parseInt(cal.data('colorpicker').fields.eq(4).val(), 10),
  78 + s: parseInt(cal.data('colorpicker').fields.eq(5).val(), 10),
  79 + b: parseInt(cal.data('colorpicker').fields.eq(6).val(), 10)
  80 + });
  81 + } else {
  82 + cal.data('colorpicker').color = col = RGBToHSB(fixRGB({
  83 + r: parseInt(cal.data('colorpicker').fields.eq(1).val(), 10),
  84 + g: parseInt(cal.data('colorpicker').fields.eq(2).val(), 10),
  85 + b: parseInt(cal.data('colorpicker').fields.eq(3).val(), 10)
  86 + }));
  87 + }
  88 + if (ev) {
  89 + fillRGBFields(col, cal.get(0));
  90 + fillHexFields(col, cal.get(0));
  91 + fillHSBFields(col, cal.get(0));
  92 + }
  93 + setSelector(col, cal.get(0));
  94 + setHue(col, cal.get(0));
  95 + setNewColor(col, cal.get(0));
  96 + cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col)]);
  97 + },
  98 + blur = function (ev) {
  99 + var cal = $(this).parent().parent();
  100 + cal.data('colorpicker').fields.parent().removeClass('colorpicker_focus');
  101 + },
  102 + focus = function () {
  103 + charMin = this.parentNode.className.indexOf('_hex') > 0 ? 70 : 65;
  104 + $(this).parent().parent().data('colorpicker').fields.parent().removeClass('colorpicker_focus');
  105 + $(this).parent().addClass('colorpicker_focus');
  106 + },
  107 + downIncrement = function (ev) {
  108 + var field = $(this).parent().find('input').focus();
  109 + var current = {
  110 + el: $(this).parent().addClass('colorpicker_slider'),
  111 + max: this.parentNode.className.indexOf('_hsb_h') > 0 ? 360 : (this.parentNode.className.indexOf('_hsb') > 0 ? 100 : 255),
  112 + y: ev.pageY,
  113 + field: field,
  114 + val: parseInt(field.val(), 10),
  115 + preview: $(this).parent().parent().data('colorpicker').livePreview
  116 + };
  117 + $(document).bind('mouseup', current, upIncrement);
  118 + $(document).bind('mousemove', current, moveIncrement);
  119 + },
  120 + moveIncrement = function (ev) {
  121 + ev.data.field.val(Math.max(0, Math.min(ev.data.max, parseInt(ev.data.val + ev.pageY - ev.data.y, 10))));
  122 + if (ev.data.preview) {
  123 + change.apply(ev.data.field.get(0), [true]);
  124 + }
  125 + return false;
  126 + },
  127 + upIncrement = function (ev) {
  128 + change.apply(ev.data.field.get(0), [true]);
  129 + ev.data.el.removeClass('colorpicker_slider').find('input').focus();
  130 + $(document).unbind('mouseup', upIncrement);
  131 + $(document).unbind('mousemove', moveIncrement);
  132 + return false;
  133 + },
  134 + downHue = function (ev) {
  135 + var current = {
  136 + cal: $(this).parent(),
  137 + y: $(this).offset().top
  138 + };
  139 + current.preview = current.cal.data('colorpicker').livePreview;
  140 + $(document).bind('mouseup', current, upHue);
  141 + $(document).bind('mousemove', current, moveHue);
  142 + },
  143 + moveHue = function (ev) {
  144 + change.apply(
  145 + ev.data.cal.data('colorpicker')
  146 + .fields
  147 + .eq(4)
  148 + .val(parseInt(360*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.y))))/150, 10))
  149 + .get(0),
  150 + [ev.data.preview]
  151 + );
  152 + return false;
  153 + },
  154 + upHue = function (ev) {
  155 + fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
  156 + fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
  157 + $(document).unbind('mouseup', upHue);
  158 + $(document).unbind('mousemove', moveHue);
  159 + return false;
  160 + },
  161 + downSelector = function (ev) {
  162 + var current = {
  163 + cal: $(this).parent(),
  164 + pos: $(this).offset()
  165 + };
  166 + current.preview = current.cal.data('colorpicker').livePreview;
  167 + $(document).bind('mouseup', current, upSelector);
  168 + $(document).bind('mousemove', current, moveSelector);
  169 + },
  170 + moveSelector = function (ev) {
  171 + change.apply(
  172 + ev.data.cal.data('colorpicker')
  173 + .fields
  174 + .eq(6)
  175 + .val(parseInt(100*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.pos.top))))/150, 10))
  176 + .end()
  177 + .eq(5)
  178 + .val(parseInt(100*(Math.max(0,Math.min(150,(ev.pageX - ev.data.pos.left))))/150, 10))
  179 + .get(0),
  180 + [ev.data.preview]
  181 + );
  182 + return false;
  183 + },
  184 + upSelector = function (ev) {
  185 + fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
  186 + fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
  187 + $(document).unbind('mouseup', upSelector);
  188 + $(document).unbind('mousemove', moveSelector);
  189 + return false;
  190 + },
  191 + enterSubmit = function (ev) {
  192 + $(this).addClass('colorpicker_focus');
  193 + },
  194 + leaveSubmit = function (ev) {
  195 + $(this).removeClass('colorpicker_focus');
  196 + },
  197 + clickSubmit = function (ev) {
  198 + var cal = $(this).parent();
  199 + var col = cal.data('colorpicker').color;
  200 + cal.data('colorpicker').origColor = col;
  201 + setCurrentColor(col, cal.get(0));
  202 + cal.data('colorpicker').onSubmit(col, HSBToHex(col), HSBToRGB(col), cal.data('colorpicker').el);
  203 + },
  204 + show = function (ev) {
  205 + var cal = $('#' + $(this).data('colorpickerId'));
  206 + cal.data('colorpicker').onBeforeShow.apply(this, [cal.get(0)]);
  207 + var pos = $(this).offset();
  208 + var viewPort = getViewport();
  209 + var top = pos.top + this.offsetHeight;
  210 + var left = pos.left;
  211 + if (top + 176 > viewPort.t + viewPort.h) {
  212 + top -= this.offsetHeight + 176;
  213 + }
  214 + if (left + 356 > viewPort.l + viewPort.w) {
  215 + left -= 356;
  216 + }
  217 + cal.css({left: left + 'px', top: top + 'px'});
  218 + if (cal.data('colorpicker').onShow.apply(this, [cal.get(0)]) != false) {
  219 + cal.show();
  220 + }
  221 + $(document).bind('mousedown', {cal: cal}, hide);
  222 + return false;
  223 + },
  224 + hide = function (ev) {
  225 + if (!isChildOf(ev.data.cal.get(0), ev.target, ev.data.cal.get(0))) {
  226 + if (ev.data.cal.data('colorpicker').onHide.apply(this, [ev.data.cal.get(0)]) != false) {
  227 + ev.data.cal.hide();
  228 + }
  229 + $(document).unbind('mousedown', hide);
  230 + }
  231 + },
  232 + isChildOf = function(parentEl, el, container) {
  233 + if (parentEl == el) {
  234 + return true;
  235 + }
  236 + if (parentEl.contains) {
  237 + return parentEl.contains(el);
  238 + }
  239 + if ( parentEl.compareDocumentPosition ) {
  240 + return !!(parentEl.compareDocumentPosition(el) & 16);
  241 + }
  242 + var prEl = el.parentNode;
  243 + while(prEl && prEl != container) {
  244 + if (prEl == parentEl)
  245 + return true;
  246 + prEl = prEl.parentNode;
  247 + }
  248 + return false;
  249 + },
  250 + getViewport = function () {
  251 + var m = document.compatMode == 'CSS1Compat';
  252 + return {
  253 + l : window.pageXOffset || (m ? document.documentElement.scrollLeft : document.body.scrollLeft),
  254 + t : window.pageYOffset || (m ? document.documentElement.scrollTop : document.body.scrollTop),
  255 + w : window.innerWidth || (m ? document.documentElement.clientWidth : document.body.clientWidth),
  256 + h : window.innerHeight || (m ? document.documentElement.clientHeight : document.body.clientHeight)
  257 + };
  258 + },
  259 + fixHSB = function (hsb) {
  260 + return {
  261 + h: Math.min(360, Math.max(0, hsb.h)),
  262 + s: Math.min(100, Math.max(0, hsb.s)),
  263 + b: Math.min(100, Math.max(0, hsb.b))
  264 + };
  265 + },
  266 + fixRGB = function (rgb) {
  267 + return {
  268 + r: Math.min(255, Math.max(0, rgb.r)),
  269 + g: Math.min(255, Math.max(0, rgb.g)),
  270 + b: Math.min(255, Math.max(0, rgb.b))
  271 + };
  272 + },
  273 + fixHex = function (hex) {
  274 + var len = 6 - hex.length;
  275 + if (len > 0) {
  276 + var o = [];
  277 + for (var i=0; i<len; i++) {
  278 + o.push('0');
  279 + }
  280 + o.push(hex);
  281 + hex = o.join('');
  282 + }
  283 + return hex;
  284 + },
  285 + HexToRGB = function (hex) {
  286 + var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
  287 + return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};
  288 + },
  289 + HexToHSB = function (hex) {
  290 + return RGBToHSB(HexToRGB(hex));
  291 + },
  292 + RGBToHSB = function (rgb) {
  293 + var hsb = {
  294 + h: 0,
  295 + s: 0,
  296 + b: 0
  297 + };
  298 + var min = Math.min(rgb.r, rgb.g, rgb.b);
  299 + var max = Math.max(rgb.r, rgb.g, rgb.b);
  300 + var delta = max - min;
  301 + hsb.b = max;
  302 + if (max != 0) {
  303 +
  304 + }
  305 + hsb.s = max != 0 ? 255 * delta / max : 0;
  306 + if (hsb.s != 0) {
  307 + if (rgb.r == max) {
  308 + hsb.h = (rgb.g - rgb.b) / delta;
  309 + } else if (rgb.g == max) {
  310 + hsb.h = 2 + (rgb.b - rgb.r) / delta;
  311 + } else {
  312 + hsb.h = 4 + (rgb.r - rgb.g) / delta;
  313 + }
  314 + } else {
  315 + hsb.h = -1;
  316 + }
  317 + hsb.h *= 60;
  318 + if (hsb.h < 0) {
  319 + hsb.h += 360;
  320 + }
  321 + hsb.s *= 100/255;
  322 + hsb.b *= 100/255;
  323 + return hsb;
  324 + },
  325 + HSBToRGB = function (hsb) {
  326 + var rgb = {};
  327 + var h = Math.round(hsb.h);
  328 + var s = Math.round(hsb.s*255/100);
  329 + var v = Math.round(hsb.b*255/100);
  330 + if(s == 0) {
  331 + rgb.r = rgb.g = rgb.b = v;
  332 + } else {
  333 + var t1 = v;
  334 + var t2 = (255-s)*v/255;
  335 + var t3 = (t1-t2)*(h%60)/60;
  336 + if(h==360) h = 0;
  337 + if(h<60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3}
  338 + else if(h<120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3}
  339 + else if(h<180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3}
  340 + else if(h<240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3}
  341 + else if(h<300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3}
  342 + else if(h<360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3}
  343 + else {rgb.r=0; rgb.g=0; rgb.b=0}
  344 + }
  345 + return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
  346 + },
  347 + RGBToHex = function (rgb) {
  348 + var hex = [
  349 + rgb.r.toString(16),
  350 + rgb.g.toString(16),
  351 + rgb.b.toString(16)
  352 + ];
  353 + $.each(hex, function (nr, val) {
  354 + if (val.length == 1) {
  355 + hex[nr] = '0' + val;
  356 + }
  357 + });
  358 + return hex.join('');
  359 + },
  360 + HSBToHex = function (hsb) {
  361 + return RGBToHex(HSBToRGB(hsb));
  362 + },
  363 + restoreOriginal = function () {
  364 + var cal = $(this).parent();
  365 + var col = cal.data('colorpicker').origColor;
  366 + cal.data('colorpicker').color = col;
  367 + fillRGBFields(col, cal.get(0));
  368 + fillHexFields(col, cal.get(0));
  369 + fillHSBFields(col, cal.get(0));
  370 + setSelector(col, cal.get(0));
  371 + setHue(col, cal.get(0));
  372 + setNewColor(col, cal.get(0));
  373 + };
  374 + return {
  375 + init: function (opt) {
  376 + opt = $.extend({}, defaults, opt||{});
  377 + if (typeof opt.color == 'string') {
  378 + opt.color = HexToHSB(opt.color);
  379 + } else if (opt.color.r != undefined && opt.color.g != undefined && opt.color.b != undefined) {
  380 + opt.color = RGBToHSB(opt.color);
  381 + } else if (opt.color.h != undefined && opt.color.s != undefined && opt.color.b != undefined) {
  382 + opt.color = fixHSB(opt.color);
  383 + } else {
  384 + return this;
  385 + }
  386 + return this.each(function () {
  387 + if (!$(this).data('colorpickerId')) {
  388 + var options = $.extend({}, opt);
  389 + options.origColor = opt.color;
  390 + var id = 'collorpicker_' + parseInt(Math.random() * 1000);
  391 + $(this).data('colorpickerId', id);
  392 + var cal = $(tpl).attr('id', id);
  393 + if (options.flat) {
  394 + cal.appendTo(this).show();
  395 + } else {
  396 + cal.appendTo(document.body);
  397 + }
  398 + options.fields = cal
  399 + .find('input')
  400 + .bind('keyup', keyDown)
  401 + .bind('change', change)
  402 + .bind('blur', blur)
  403 + .bind('focus', focus);
  404 + cal
  405 + .find('span').bind('mousedown', downIncrement).end()
  406 + .find('>div.colorpicker_current_color').bind('click', restoreOriginal);
  407 + options.selector = cal.find('div.colorpicker_color').bind('mousedown', downSelector);
  408 + options.selectorIndic = options.selector.find('div div');
  409 + options.el = this;
  410 + options.hue = cal.find('div.colorpicker_hue div');
  411 + cal.find('div.colorpicker_hue').bind('mousedown', downHue);
  412 + options.newColor = cal.find('div.colorpicker_new_color');
  413 + options.currentColor = cal.find('div.colorpicker_current_color');
  414 + cal.data('colorpicker', options);
  415 + cal.find('div.colorpicker_submit')
  416 + .bind('mouseenter', enterSubmit)
  417 + .bind('mouseleave', leaveSubmit)
  418 + .bind('click', clickSubmit);
  419 + fillRGBFields(options.color, cal.get(0));
  420 + fillHSBFields(options.color, cal.get(0));
  421 + fillHexFields(options.color, cal.get(0));
  422 + setHue(options.color, cal.get(0));
  423 + setSelector(options.color, cal.get(0));
  424 + setCurrentColor(options.color, cal.get(0));
  425 + setNewColor(options.color, cal.get(0));
  426 + if (options.flat) {
  427 + cal.css({
  428 + position: 'relative',
  429 + display: 'block'
  430 + });
  431 + } else {
  432 + $(this).bind(options.eventName, show);
  433 + }
  434 + }
  435 + });
  436 + },
  437 + showPicker: function() {
  438 + return this.each( function () {
  439 + if ($(this).data('colorpickerId')) {
  440 + show.apply(this);
  441 + }
  442 + });
  443 + },
  444 + hidePicker: function() {
  445 + return this.each( function () {
  446 + if ($(this).data('colorpickerId')) {
  447 + $('#' + $(this).data('colorpickerId')).hide();
  448 + }
  449 + });
  450 + },
  451 + setColor: function(col) {
  452 + if (typeof col == 'string') {
  453 + col = HexToHSB(col);
  454 + } else if (col.r != undefined && col.g != undefined && col.b != undefined) {
  455 + col = RGBToHSB(col);
  456 + } else if (col.h != undefined && col.s != undefined && col.b != undefined) {
  457 + col = fixHSB(col);
  458 + } else {
  459 + return this;
  460 + }
  461 + return this.each(function(){
  462 + if ($(this).data('colorpickerId')) {
  463 + var cal = $('#' + $(this).data('colorpickerId'));
  464 + cal.data('colorpicker').color = col;
  465 + cal.data('colorpicker').origColor = col;
  466 + fillRGBFields(col, cal.get(0));
  467 + fillHSBFields(col, cal.get(0));
  468 + fillHexFields(col, cal.get(0));
  469 + setHue(col, cal.get(0));
  470 + setSelector(col, cal.get(0));
  471 + setCurrentColor(col, cal.get(0));
  472 + setNewColor(col, cal.get(0));
  473 + }
  474 + });
  475 + }
  476 + };
  477 + }();
  478 + $.fn.extend({
  479 + ColorPicker: ColorPicker.init,
  480 + ColorPickerHide: ColorPicker.hidePicker,
  481 + ColorPickerShow: ColorPicker.showPicker,
  482 + ColorPickerSetColor: ColorPicker.setColor
  483 + });
  484 +})(jQuery)
... ...
public/stylesheets/colorpicker.css 0 → 100644
  Diff comments   View file @4552129
... ... @@ -0,0 +1,131 @@
  1 +.colorpicker {
  2 + width: 262px;
  3 + height: 176px;
  4 + z-index: 600;
  5 + overflow: hidden;
  6 + position: absolute;
  7 + background: #f4f4f4 url(../images/colorpicker/gradiente.png) 179px 12px no-repeat;
  8 + border: 1px solid #555;
  9 + font-family: Arial, Helvetica, sans-serif;
  10 + display: none;
  11 +}
  12 +.colorpicker_color {
  13 + width: 150px;
  14 + height: 150px;
  15 + left: 14px;
  16 + top: 13px;
  17 + position: absolute;
  18 + background: #f00;
  19 + overflow: hidden;
  20 + cursor: crosshair;
  21 + border: 1px solid #555;
  22 +}
  23 +.colorpicker_color div {
  24 + position: absolute;
  25 + top: 0;
  26 + left: 0;
  27 + width: 150px;
  28 + height: 150px;
  29 + background: url(../images/colorpicker/overlay.png);
  30 +}
  31 +.colorpicker_color div div {
  32 + position: absolute;
  33 + top: 0;
  34 + left: 0;
  35 + width: 11px;
  36 + height: 11px;
  37 + overflow: hidden;
  38 + background: url(../images/colorpicker/select.gif);
  39 + margin: -5px 0 0 -5px;
  40 +}
  41 +.colorpicker_hue {
  42 + position: absolute;
  43 + top: 13px;
  44 + left: 171px;
  45 + width: 35px;
  46 + height: 150px;
  47 + cursor: n-resize;
  48 +}
  49 +.colorpicker_hue div {
  50 + position: absolute;
  51 + width: 35px;
  52 + height: 9px;
  53 + overflow: hidden;
  54 + background: url(../images/colorpicker/indic.gif) left top;
  55 + margin: -4px 0 0 0;
  56 + left: 0px;
  57 +}
  58 +.colorpicker_current_color {
  59 + position: absolute;
  60 + width: 32px;
  61 + height: 32px;
  62 + left: 213px;
  63 + top: 13px;
  64 + background: #f00;
  65 + border: 1px solid #555;
  66 + -moz-border-radius: 6px;
  67 + border-radius: 6px;
  68 +}
  69 +.colorpicker_new_color {
  70 + position: absolute;
  71 + width: 32px;
  72 + height: 32px;
  73 + left: 213px;
  74 + top: 53px;
  75 + background: #f00;
  76 + border: 1px solid #555;
  77 + -moz-border-radius: 6px;
  78 + border-radius: 6px;
  79 +}
  80 +.colorpicker input {
  81 + background-color: transparent;
  82 + border: 1px solid transparent;
  83 + position: absolute;
  84 + font-size: 10px;
  85 + font-family: Arial, Helvetica, sans-serif;
  86 + color: #898989;
  87 + top: 4px;
  88 + right: 11px;
  89 + text-align: right;
  90 + margin: 0;
  91 + padding: 0;
  92 + height: 11px;
  93 +}
  94 +.colorpicker_field {
  95 + height: 22px;
  96 + width: 62px;
  97 + background-position: top;
  98 +}
  99 +.colorpicker_field span {
  100 + position: absolute;
  101 + width: 12px;
  102 + height: 22px;
  103 + overflow: hidden;
  104 + top: 0;
  105 + right: 0;
  106 + cursor: n-resize;
  107 +}
  108 +.colorpicker_rgb_r, .colorpicker_rgb_g, .colorpicker_rgb_b, .colorpicker_hsb_h, .colorpicker_hsb_s, .colorpicker_hsb_b, .colorpicker_hex {
  109 + display: none;
  110 +}
  111 +.colorpicker_submit {
  112 + position: absolute;
  113 + width: 32px;
  114 + height: 32px;
  115 + background: url(../images/colorpicker/apply.png) top;
  116 + right: 15px;
  117 + bottom: 10px;
  118 + overflow: hidden;
  119 +}
  120 +.colorpicker_focus {
  121 + background-position: center;
  122 +}
  123 +.colorpicker_hex.colorpicker_focus {
  124 + background-position: bottom;
  125 +}
  126 +.colorpicker_submit.colorpicker_focus {
  127 + background-position: bottom;
  128 +}
  129 +.colorpicker_slider {
  130 + background-position: bottom;
  131 +}
... ...