Browse Source
[ADD] web_color module provides a widget to display the color of an hexadecimal code
pull/4/head
[ADD] web_color module provides a widget to display the color of an hexadecimal code
pull/4/head
etienne-bauger
12 years ago
committed by
Maxime Chambreuil
commit
d632ccfd51
17 changed files with 839 additions and 0 deletions
-
22web_color/__init__.py
-
45web_color/__openerp__.py
-
10web_color/i18n/fr_CA.po
-
22web_color/static/lib/really-simple-color-picker/LICENSE
-
98web_color/static/lib/really-simple-color-picker/README.md
-
BINweb_color/static/lib/really-simple-color-picker/arrow.gif
-
BINweb_color/static/lib/really-simple-color-picker/arrow.png
-
34web_color/static/lib/really-simple-color-picker/colorPicker.css
-
93web_color/static/lib/really-simple-color-picker/demo.html
-
328web_color/static/lib/really-simple-color-picker/jquery.colorPicker.js
-
26web_color/static/lib/really-simple-color-picker/jquery.colorPicker.min.js
-
BINweb_color/static/lib/really-simple-color-picker/screenshot.png
-
85web_color/static/lib/really-simple-color-picker/test.html
-
9web_color/static/src/css/color.css
-
BINweb_color/static/src/img/icon.png
-
49web_color/static/src/js/lib.js
-
18web_color/static/src/xml/lib.xml
@ -0,0 +1,22 @@ |
|||||
|
# -*- encoding: utf-8 -*- |
||||
|
############################################################################ |
||||
|
# |
||||
|
# OpenERP, Open Source Web Color |
||||
|
# Copyright (C) 2012 Savoir-faire Linux (<http://www.savoirfairelinux.com>). |
||||
|
# |
||||
|
# 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 <http://www.gnu.org/licenses/>. |
||||
|
# |
||||
|
# @author Étienne Beaudry Auger <etienne.b.auger@savoirfairelinux.com> |
||||
|
# |
||||
|
############################################################################## |
@ -0,0 +1,45 @@ |
|||||
|
# -*- encoding: utf-8 -*- |
||||
|
############################################################################ |
||||
|
# |
||||
|
# OpenERP, Open Source Web Color |
||||
|
# Copyright (C) 2012 Savoir-faire Linux (<http://www.savoirfairelinux.com>). |
||||
|
# |
||||
|
# 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 <http://www.gnu.org/licenses/>. |
||||
|
# |
||||
|
# @author Étienne Beaudry Auger <etienne.b.auger@savoirfairelinux.com> |
||||
|
# |
||||
|
############################################################################## |
||||
|
{ |
||||
|
'name': "Web Color", |
||||
|
'author': "Savoir-faire Linux", |
||||
|
'category' : "Hidden", |
||||
|
'description': """ |
||||
|
This module provides a color widget to display the color from |
||||
|
the hexadecimal value of your field. |
||||
|
""", |
||||
|
'version': "1.0", |
||||
|
'depends': ['web'], |
||||
|
'js': [ |
||||
|
'static/src/js/lib.js', |
||||
|
'static/lib/really-simple-color-picker/jquery.colorPicker.js', |
||||
|
], |
||||
|
'css': [ |
||||
|
'static/src/css/color.css', |
||||
|
'static/lib/really-simple-color-picker/colorPicker.css', |
||||
|
], |
||||
|
'qweb' : ['static/src/xml/lib.xml'], |
||||
|
'installable': True, |
||||
|
'auto_install': True, |
||||
|
'web_preload': False, |
||||
|
} |
@ -0,0 +1,10 @@ |
|||||
|
# French (Canada) translation for openerp-web |
||||
|
# Copyright (c) 2012 Rosetta Contributors and Canonical Ltd 2012 |
||||
|
# This file is distributed under the same license as the openerp-web package. |
||||
|
# Etienne Beaudry Auger <etienne.b.auger@savoirfairelinux.com>, 2012. |
||||
|
# |
||||
|
|
||||
|
#. openerp-web |
||||
|
#: addons/web_color/static/src/xml/lib.xml |
||||
|
msgid "Select color" |
||||
|
msgstr "Choix de couleur" |
@ -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,98 @@ |
|||||
|
## Really Simple Color Picker |
||||
|
|
||||
|
This is a very minimal, yet robust Color Picker based on jQuery. |
||||
|
|
||||
|
For more details check the introductory blog post - http://laktek.com/2008/10/27/really-simple-color-picker-in-jquery/ |
||||
|
|
||||
|
### Usage |
||||
|
|
||||
|
You can either clone [this repo](https://github.com/laktek/really-simple-color-picker) or download the latest build as a zip from here - http://github.com/laktek/really-simple-color-picker/zipball/master |
||||
|
|
||||
|
Color Picker requires jQuery 1.2.6 or higher. Make sure to load it before Color Picker (there's no other dependencies!). |
||||
|
For default styles of the color picker load the CSS file that comes with the plugin. |
||||
|
|
||||
|
```html |
||||
|
<script language="javascript" type="text/javascript" src=jquery.min.js"></script> |
||||
|
<script language="javascript" type="text/javascript" src="jquery.colorPicker.min.js"/></script> |
||||
|
|
||||
|
<link rel="stylesheet" href="colorPicker.css" type="text/css" /> |
||||
|
``` |
||||
|
|
||||
|
Add a text field to take the color input. |
||||
|
|
||||
|
```html |
||||
|
<div><label for="color1">Color 1</label> <input id="color1" type="text" name="color1" value="#333399" /></div> |
||||
|
``` |
||||
|
|
||||
|
Then call 'colorPicker' method on the text field when document loads. |
||||
|
|
||||
|
```html |
||||
|
<script language="javascript"> |
||||
|
jQuery(document).ready(function($) { |
||||
|
$('#color1').colorPicker(); |
||||
|
} |
||||
|
</script> |
||||
|
``` |
||||
|
|
||||
|
### Options |
||||
|
|
||||
|
There are several options you can set at the time of binding. |
||||
|
|
||||
|
**Selected color** |
||||
|
|
||||
|
Color Picker will use the value of the input field, which the picker is attached to as the selected color. If not, it will use the color passed with `pickerDefault` property. |
||||
|
|
||||
|
```javascript |
||||
|
$('#color1').colorPicker({pickerDefault: "ffffff"}); |
||||
|
``` |
||||
|
|
||||
|
**Color Palette** |
||||
|
|
||||
|
Overrides the default color palette by passing an array of color values. |
||||
|
|
||||
|
```javascript |
||||
|
$('#color1').colorPicker({colors: ["333333", "111111"]}); |
||||
|
``` |
||||
|
|
||||
|
**Transparency** |
||||
|
|
||||
|
Enable transparency value as an option. |
||||
|
|
||||
|
```javascript |
||||
|
$('#color1').colorPicker({transparency: true}); |
||||
|
``` |
||||
|
|
||||
|
**Color Change Callback** |
||||
|
|
||||
|
Registers a callback that can be used to notify the calling code of a color change. |
||||
|
|
||||
|
```javascript |
||||
|
$('#color1').colorPicker( { onColorChange : function(id, newValue) { console.log("ID: " + id + " has been changed to " + newValue); } } ); |
||||
|
``` |
||||
|
|
||||
|
If you want to set an option gloablly (to apply for all color pickers), use: |
||||
|
|
||||
|
```javascript |
||||
|
$.fn.colorPicker.defaults.colors = ['151337', '111111'] |
||||
|
``` |
||||
|
### Demo |
||||
|
|
||||
|
Demo can be found at http://laktek.github.com/really-simple-color-picker/demo.html |
||||
|
|
||||
|
### Real-world Examples |
||||
|
|
||||
|
* [CurdBee](http://demo.curdbee.com/settings/branding) |
||||
|
* [Readability](https://www.readability.com/publishers/tools) |
||||
|
|
||||
|
Let us know how you are using Really Simple Color Picker... |
||||
|
|
||||
|
### Contributors |
||||
|
|
||||
|
* Lakshan Perera - http://laktek.com |
||||
|
* Daniel Lacy - http://daniellacy.com |
||||
|
|
||||
|
### Issues & Suggestions |
||||
|
|
||||
|
Please report any bugs or feature requests here: |
||||
|
https://github.com/laktek/really-simple-color-picker/issues |
||||
|
|
After Width: 16 | Height: 16 | Size: 111 B |
After Width: 16 | Height: 16 | Size: 27 KiB |
@ -0,0 +1,34 @@ |
|||||
|
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 #ccc; |
||||
|
background-color: #FFFFFF; |
||||
|
padding: 5px; |
||||
|
z-index: 9999; |
||||
|
-moz-border-radius: 3px; |
||||
|
-webkit-border-radius: 3px; |
||||
|
border-radius: 3px; |
||||
|
} |
||||
|
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,93 @@ |
|||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
||||
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
||||
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> |
||||
|
|
||||
|
<head> |
||||
|
<title>Really Simple Color Picker</title> |
||||
|
|
||||
|
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> |
||||
|
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> |
||||
|
<script language="javascript" type="text/javascript" src="jquery.colorPicker.js"/></script> |
||||
|
|
||||
|
<script type="text/javascript"> |
||||
|
//Run the code when document ready |
||||
|
$(function() { |
||||
|
//use this method to add new colors to pallete |
||||
|
//$.fn.colorPicker.addColors(['000', '000', 'fff', 'fff']); |
||||
|
|
||||
|
$('#color1').colorPicker(); |
||||
|
|
||||
|
$('#color2').colorPicker(); |
||||
|
|
||||
|
$('#color3').colorPicker({pickerDefault: "ffffff", colors: ["ffffff", "000000", "111FFF", "C0C0C0", "FFF000"], transparency: true}); |
||||
|
|
||||
|
//fires an event when the color is changed |
||||
|
//$('#color1').change(function(){ |
||||
|
//alert("color changed"); |
||||
|
//}); |
||||
|
|
||||
|
$("#button1").click(function(){ |
||||
|
$("#color1").val("#ffffff"); |
||||
|
$("#color1").change(); |
||||
|
}); |
||||
|
|
||||
|
$("#button2").click(function(){ |
||||
|
$("#color2").val("#000000"); |
||||
|
$("#color2").change(); |
||||
|
}); |
||||
|
|
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style type="text/css"> |
||||
|
/* styles adopted from Nidahas - Forms markup and CSS (http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/) */ |
||||
|
/* General styles */ |
||||
|
body { margin: 0; padding: 0; font: 80%/1.5 Arial,Helvetica,sans-serif; color: #111; background-color: #FFF; } |
||||
|
h2 { margin: 0px; padding: 10px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 200%; font-weight: normal; color: #FFF; background-color: #CCC; border-bottom: #BBB 2px solid; } |
||||
|
p#copyright { margin: 20px 10px; font-size: 90%; color: #999; } |
||||
|
|
||||
|
/* Form styles */ |
||||
|
div.form-container { margin: 10px; padding: 5px; background-color: #FFF; } |
||||
|
|
||||
|
p.legend { margin-bottom: 1em; } |
||||
|
p.legend em { color: #C00; font-style: normal; } |
||||
|
|
||||
|
div.form-container div.controlset {display: block; float:left; width: 100%; padding: 0.25em 0;} |
||||
|
|
||||
|
div.form-container div.controlset label, |
||||
|
div.form-container div.controlset input, |
||||
|
div.form-container div.controlset div { display: inline; float: left; } |
||||
|
|
||||
|
div.form-container div.controlset label { width: 100px;} |
||||
|
</style> |
||||
|
<link rel="stylesheet" href="colorPicker.css" type="text/css" /> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
|
||||
|
<div id="wrapper"> |
||||
|
|
||||
|
<h2>Really Simple Color Picker (jQuery)</h2> |
||||
|
|
||||
|
<p>More information about this can be found in <a href="http://laktek.com/2008/10/27/really-simple-color-picker-in-jquery/" title="Really Simple Color Picker in jQuery">this blog article</a>.</p> |
||||
|
<div class="form-container"> |
||||
|
<form action="#" method="post"> |
||||
|
<fieldset> |
||||
|
<div class="controlset"><label for="color1">Color 1</label> <input id="color1" type="text" name="color1" value="#333399" /></div> |
||||
|
<div class="controlset"><label for="color2">Color 2</label> <input id="color2" type="text" name="color2" value="#FF0000" /></div> |
||||
|
<div class="controlset"><label for="color3">Color 3 (customized with options)</label> <input id="color3" type="text" name="color3" value="#99cc00" /></div> |
||||
|
|
||||
|
</fieldset> |
||||
|
|
||||
|
<div class="buttonrow"> |
||||
|
<div><button type="button" id="button1">Set Color 1 to #FFF</button></div> |
||||
|
<div><button type="button" id="button2">Set Color 2 to #000</button></div> |
||||
|
</div> |
||||
|
|
||||
|
</form> |
||||
|
</div> |
||||
|
|
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
|
|
@ -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"> </div>'), |
||||
|
palette : $('<div id="colorPicker_palette" class="colorPicker-palette" />'), |
||||
|
swatch : $('<div class="colorPicker-swatch"> </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"> </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) |
After Width: 128 | Height: 167 | Size: 2.0 KiB |
@ -0,0 +1,85 @@ |
|||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
||||
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
||||
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> |
||||
|
|
||||
|
<head> |
||||
|
<title>Really Simple Color Picker</title> |
||||
|
|
||||
|
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> |
||||
|
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> |
||||
|
<script language="javascript" type="text/javascript" src="jquery.colorPicker.js"/></script> |
||||
|
|
||||
|
<script type="text/javascript"> |
||||
|
//Run the code when document ready |
||||
|
$(function() { |
||||
|
//use this method to add new colors to pallete |
||||
|
//$.fn.colorPicker.addColors(['000', '000', 'fff', 'fff']); |
||||
|
|
||||
|
$('#color1').colorPicker(); |
||||
|
|
||||
|
$('#color2').colorPicker(); |
||||
|
|
||||
|
$('#color3').colorPicker({pickerDefault: "ffffff", colors: ["ffffff", "000000", "111FFF", "C0C0C0", "FFF000"], transparency: true}); |
||||
|
|
||||
|
//fires an event when the color is changed |
||||
|
$('#color1').change(function(){ |
||||
|
alert("color changed"); |
||||
|
}); |
||||
|
|
||||
|
$("#button1").click(function(){ |
||||
|
$("#color1").val("#ffffff"); |
||||
|
$("#color1").change(); |
||||
|
}); |
||||
|
|
||||
|
$("#button2").click(function(){ |
||||
|
$("#color2").val("#000000"); |
||||
|
$("#color2").change(); |
||||
|
}); |
||||
|
|
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style type="text/css"> |
||||
|
/* styles adopted from Nidahas - Forms markup and CSS (http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/) */ |
||||
|
/* General styles */ |
||||
|
body { margin: 0; padding: 0; font: 80%/1.5 Arial,Helvetica,sans-serif; color: #111; background-color: #FFF; } |
||||
|
h2 { margin: 0px; padding: 10px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 200%; font-weight: normal; color: #FFF; background-color: #CCC; border-bottom: #BBB 2px solid; } |
||||
|
p#copyright { margin: 20px 10px; font-size: 90%; color: #999; } |
||||
|
|
||||
|
/* Form styles */ |
||||
|
div.form-container { margin: 10px; padding: 5px; background-color: #FFF; } |
||||
|
|
||||
|
p.legend { margin-bottom: 1em; } |
||||
|
p.legend em { color: #C00; font-style: normal; } |
||||
|
|
||||
|
div.form-container div.controlset {display: block; float:left; width: 100%; padding: 0.25em 0;} |
||||
|
|
||||
|
div.form-container div.controlset label, |
||||
|
div.form-container div.controlset input, |
||||
|
div.form-container div.controlset div { display: inline; float: left; } |
||||
|
|
||||
|
div.form-container div.controlset label { width: 100px;} |
||||
|
</style> |
||||
|
<link rel="stylesheet" href="colorPicker.css" type="text/css" /> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
|
||||
|
<div id="wrapper"> |
||||
|
|
||||
|
<h2>Test Really Simple Color Picker (jQuery)</h2> |
||||
|
|
||||
|
<p>More information about this can be found in <a href="http://laktek.com/2008/10/27/really-simple-color-picker-in-jquery/" title="Really Simple Color Picker in jQuery">this blog article</a>.</p> |
||||
|
<div class="form-container"> |
||||
|
<form action="#" method="post"> |
||||
|
<fieldset> |
||||
|
<div class="controlset"><label for="color1">Color 1</label> <input id="color1" type="text" name="color1" value="#333399" /></div> |
||||
|
|
||||
|
</fieldset> |
||||
|
</form> |
||||
|
</div> |
||||
|
|
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
|
|
@ -0,0 +1,9 @@ |
|||||
|
div.colorviewer { |
||||
|
display: inline; |
||||
|
float: left; |
||||
|
height: 16px; |
||||
|
width: 16px; |
||||
|
padding: 0 !important; |
||||
|
border: 1px solid #ccc; |
||||
|
line-height: 16px; |
||||
|
} |
After Width: 64 | Height: 64 | Size: 3.4 KiB |
@ -0,0 +1,49 @@ |
|||||
|
/*############################################################################ |
||||
|
# |
||||
|
# OpenERP, Open Source Web Color |
||||
|
# Copyright (C) 2012 Savoir-faire Linux (<http://www.savoirfairelinux.com>).
|
||||
|
# |
||||
|
# 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 <http://www.gnu.org/licenses/>.
|
||||
|
# |
||||
|
# @author Étienne Beaudry Auger <etienne.b.auger@savoirfairelinux.com> |
||||
|
# |
||||
|
##############################################################################*/ |
||||
|
|
||||
|
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( |
||||
|
'<div class="colorviewer" style="background-color: <%-colorCode%>"></div>\ |
||||
|
<label style="padding-left: 5px"><%-colorCode%></label>', { |
||||
|
colorCode: row_data[this.id].value |
||||
|
}); |
||||
|
|
||||
|
} |
||||
|
}); |
||||
|
} |
@ -0,0 +1,18 @@ |
|||||
|
<?xml version="1.0" encoding="UTF-8"?> |
||||
|
<templates id="template" xml:space="preserve"> |
||||
|
<t t-name="FieldColor"> |
||||
|
<span class="oe_form_field oe_colorpicker_root oe_form_field_color" t-att-style="widget.node.attrs.style"/> |
||||
|
</t> |
||||
|
<t t-name="web.colorpicker"> |
||||
|
<span> |
||||
|
<t t-set="placeholder" t-value="widget.getParent().node and widget.getParent().node.attrs.placeholder"/> |
||||
|
<input type="text" class="oe_colorpicker_container" disabled="disabled" style="display: none;"/> |
||||
|
<input type="text" |
||||
|
t-att-name="widget.name" |
||||
|
t-att-placeholder="placeholder" |
||||
|
class="oe_colorpicker_master" |
||||
|
/><img class="oe_input_icon oe_colorpicker_trigger" t-att-src='_s + "/web/static/src/img/icons/color-picker.png"' |
||||
|
title="Select color value" width="16" height="16" border="0"/> |
||||
|
</span> |
||||
|
</t> |
||||
|
</templates> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue