Really Simple Color Picker

'), + swatch : $('

'), + hexLabel: $('Hex'), + hexField: $('') + }, + 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()); + }); + + $('

').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); diff --git a/web_color/static/lib/really-simple-color-picker/jquery.colorPicker.min.js b/web_color/static/lib/really-simple-color-picker/jquery.colorPicker.min.js new file mode 100644 index 00000000..65b3fb33 --- /dev/null +++ b/web_color/static/lib/really-simple-color-picker/jquery.colorPicker.min.js @@ -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('

'),palette:a('

'),swatch:a('

'),hexLabel:a('Hex'),hexField:a('')},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('

').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;b0)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 diff --git a/web_color/static/lib/really-simple-color-picker/screenshot.png b/web_color/static/lib/really-simple-color-picker/screenshot.png new file mode 100644 index 00000000..56637876 Binary files /dev/null and b/web_color/static/lib/really-simple-color-picker/screenshot.png differ diff --git a/web_color/static/lib/really-simple-color-picker/test.html b/web_color/static/lib/really-simple-color-picker/test.html new file mode 100644 index 00000000..22f62ef9 --- /dev/null +++ b/web_color/static/lib/really-simple-color-picker/test.html @@ -0,0 +1,85 @@ + + + + +Really Simple Color Picker + + + + + + + + + + + + + +

+ +

Test Really Simple Color Picker (jQuery)

+ +

More information about this can be found in this blog article.

+ +

+ + + + + diff --git a/web_color/static/src/css/color.css b/web_color/static/src/css/color.css new file mode 100644 index 00000000..74d6f517 --- /dev/null +++ b/web_color/static/src/css/color.css @@ -0,0 +1,9 @@ +div.colorviewer { + display: inline; + float: left; + height: 16px; + width: 16px; + padding: 0 !important; + border: 1px solid #ccc; + line-height: 16px; +} \ No newline at end of file diff --git a/web_color/static/src/img/icon.png b/web_color/static/src/img/icon.png new file mode 100644 index 00000000..540f72db Binary files /dev/null and b/web_color/static/src/img/icon.png differ diff --git a/web_color/static/src/js/lib.js b/web_color/static/src/js/lib.js new file mode 100644 index 00000000..a14e3434 --- /dev/null +++ b/web_color/static/src/js/lib.js @@ -0,0 +1,49 @@ +/*############################################################################ +# +# OpenERP, Open Source Web Color +# Copyright (C) 2012 Savoir-faire Linux (). +# +# This program is free software: you can redistribute it and/or modify +# it under the terms of the GNU General Public License as +# published by the Free Software Foundation, either version 3 of the +# License, or (at your option) any later version. +# +# This program is distributed in the hope that it will be useful, +# but WITHOUT ANY WARRANTY; without even the implied warranty of +# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +# GNU General Public License for more details. +# +# You should have received a copy of the GNU General Public License +# along with this program. If not, see . +# +# @author Étienne Beaudry Auger +# +##############################################################################*/ + +openerp.web_color = function(instance) { + var _t = openerp.web._t; + var QWeb = openerp.web.qweb; + + widget_name = 'color'; + //Add in the widgets list + instance.web.form.widgets.add(widget_name, 'openerp.web_color'); + //Add object in the column list + instance.web.list.columns.add('field.color', 'instance.web.list.Color'); + //instance of the widget itself + instance.web.list.Color = instance.web.list.Column.extend({ + /** + * Return a formatted div colored and display the hexa color code + * from row_data + * + * @private + */ + _format: function (row_data, options) { + return _.template( + '

\ + <%-colorCode%>', { + colorCode: row_data[this.id].value + }); + + } + }); +} \ No newline at end of file diff --git a/web_color/static/src/xml/lib.xml b/web_color/static/src/xml/lib.xml new file mode 100644 index 00000000..b9e48e78 --- /dev/null +++ b/web_color/static/src/xml/lib.xml @@ -0,0 +1,18 @@ + + + + + + + + + + + + + \ No newline at end of file