diff --git a/web_editor_background_color/README.rst b/web_editor_background_color/README.rst new file mode 100644 index 00000000..24a2f466 --- /dev/null +++ b/web_editor_background_color/README.rst @@ -0,0 +1,69 @@ +.. image:: https://img.shields.io/badge/licence-LGPL--3-blue.svg + :target: http://www.gnu.org/licenses/lgpl-3.0-standalone.html + :alt: License: LGPL-3 + +================================== +Web Editor Background Color Picker +================================== + +This module extends the functionality of the web editor to support +setting a custom background color to any snippet allowing you to customize it. + +.. figure:: /web_editor_background_color/static/description/mass_mailing_editor.png + :alt: Screenshot of color picker in mass mailing editor + +Usage +===== + +To use this module, you need to: + +#. Install any module that makes use of the web editor, such as + ``mass_mailing`` or ``website``. +#. Use that module's facilities to edit some web content. +#. Drag & drop any snippet into the web editor body. +#. Click on *Customize > Text-Image > Background Color > icon*. +#. Choose a custom color by either: + * Writing any valid HTML color code in the text input. + * Selecting a color from the color picker. + +.. image:: https://odoo-community.org/website/image/ir.attachment/5784_f2813bd/datas + :alt: Try me on Runbot + :target: https://runbot.odoo-community.org/runbot/162/10.0 + +Bug Tracker +=========== + +Bugs are tracked on `GitHub Issues +`_. In case of trouble, please +check there if your issue has already been reported. If you spotted it first, +help us smash it by providing detailed and welcomed feedback. + +Credits +======= + +External libraries +------------------ + +* This addon includes code copied from bootstrap-colorpicker_ + +.. _bootstrap-colorpicker: https://github.com/itsjavi/bootstrap-colorpicker/tree/2.5.1 + +Contributors +------------ + +* Jairo Llopis + +Maintainer +---------- + +.. image:: https://odoo-community.org/logo.png + :alt: Odoo Community Association + :target: https://odoo-community.org + +This module is maintained by the OCA. + +OCA, or the Odoo Community Association, is a nonprofit organization whose +mission is to support the collaborative development of Odoo features and +promote its widespread use. + +To contribute to this module, please visit https://odoo-community.org. diff --git a/web_editor_background_color/__init__.py b/web_editor_background_color/__init__.py new file mode 100644 index 00000000..e69de29b diff --git a/web_editor_background_color/__manifest__.py b/web_editor_background_color/__manifest__.py new file mode 100644 index 00000000..05668139 --- /dev/null +++ b/web_editor_background_color/__manifest__.py @@ -0,0 +1,23 @@ +# -*- coding: utf-8 -*- +# Copyright 2017 Jairo Llopis +# License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html). +{ + "name": "Web Editor Background Color Picker", + "summary": "Set any background color for web editor snippets", + "version": "10.0.1.0.0", + "category": "Website", + "website": "https://www.tecnativa.com", + "author": "Tecnativa, Odoo Community Association (OCA)", + "license": "LGPL-3", + "application": False, + "installable": True, + "images": [ + "static/description/mass_mailing_editor.png", + ], + "depends": [ + "web_editor", + ], + "data": [ + "templates/assets.xml", + ], +} diff --git a/web_editor_background_color/i18n/ca.po b/web_editor_background_color/i18n/ca.po new file mode 100644 index 00000000..18042bfb --- /dev/null +++ b/web_editor_background_color/i18n/ca.po @@ -0,0 +1,24 @@ +# Translation of Odoo Server. +# This file contains the translation of the following modules: +# * web_editor_background_color +# +# Translators: +# Marc Tormo i Bochaca , 2017 +msgid "" +msgstr "" +"Project-Id-Version: Odoo Server 9.0c\n" +"Report-Msgid-Bugs-To: \n" +"POT-Creation-Date: 2017-03-30 08:28+0000\n" +"PO-Revision-Date: 2017-03-30 08:28+0000\n" +"Last-Translator: Marc Tormo i Bochaca , 2017\n" +"Language-Team: Catalan (https://www.transifex.com/oca/teams/23907/ca/)\n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=UTF-8\n" +"Content-Transfer-Encoding: \n" +"Language: ca\n" +"Plural-Forms: nplurals=2; plural=(n != 1);\n" + +#. module: web_editor_background_color +#: model:ir.ui.view,arch_db:web_editor_background_color.snippet_options +msgid "Color" +msgstr "Color" diff --git a/web_editor_background_color/i18n/es.po b/web_editor_background_color/i18n/es.po new file mode 100644 index 00000000..9d82bffe --- /dev/null +++ b/web_editor_background_color/i18n/es.po @@ -0,0 +1,23 @@ +# Translation of Odoo Server. +# This file contains the translation of the following modules: +# * website_mail_snippet_bg_color +# +msgid "" +msgstr "" +"Project-Id-Version: Odoo Server 8.0\n" +"Report-Msgid-Bugs-To: \n" +"POT-Creation-Date: 2016-02-09 16:32+0000\n" +"PO-Revision-Date: 2016-02-09 17:33+0100\n" +"Last-Translator: <>\n" +"Language-Team: \n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=UTF-8\n" +"Content-Transfer-Encoding: 8bit\n" +"Plural-Forms: \n" +"Language: es\n" +"X-Generator: Poedit 1.8.6\n" + +#. module: website_mail_snippet_bg_color +#: view:website:website_mail.email_designer_snippets +msgid "Pick Background Color" +msgstr "Escoger el color de fondo" diff --git a/web_editor_background_color/i18n/fr.po b/web_editor_background_color/i18n/fr.po new file mode 100644 index 00000000..f7272f61 --- /dev/null +++ b/web_editor_background_color/i18n/fr.po @@ -0,0 +1,24 @@ +# Translation of Odoo Server. +# This file contains the translation of the following modules: +# * website_mail_snippet_bg_color +# +# Translators: +# Christophe CHAUVET , 2016 +msgid "" +msgstr "" +"Project-Id-Version: social (8.0)\n" +"Report-Msgid-Bugs-To: \n" +"POT-Creation-Date: 2016-06-30 01:07+0000\n" +"PO-Revision-Date: 2016-06-17 14:52+0000\n" +"Last-Translator: Christophe CHAUVET \n" +"Language-Team: French (http://www.transifex.com/oca/OCA-social-8-0/language/fr/)\n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=UTF-8\n" +"Content-Transfer-Encoding: \n" +"Language: fr\n" +"Plural-Forms: nplurals=2; plural=(n > 1);\n" + +#. module: website_mail_snippet_bg_color +#: view:website:website_mail.email_designer_snippets +msgid "Pick Background Color" +msgstr "Mettre la couleur de fond" diff --git a/web_editor_background_color/i18n/sl.po b/web_editor_background_color/i18n/sl.po new file mode 100644 index 00000000..1bd31b99 --- /dev/null +++ b/web_editor_background_color/i18n/sl.po @@ -0,0 +1,24 @@ +# Translation of Odoo Server. +# This file contains the translation of the following modules: +# * website_mail_snippet_bg_color +# +# Translators: +# Matjaž Mozetič , 2016 +msgid "" +msgstr "" +"Project-Id-Version: social (8.0)\n" +"Report-Msgid-Bugs-To: \n" +"POT-Creation-Date: 2016-02-27 01:40+0000\n" +"PO-Revision-Date: 2016-02-27 16:56+0000\n" +"Last-Translator: Matjaž Mozetič \n" +"Language-Team: Slovenian (http://www.transifex.com/oca/OCA-social-8-0/language/sl/)\n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=UTF-8\n" +"Content-Transfer-Encoding: \n" +"Language: sl\n" +"Plural-Forms: nplurals=4; plural=(n%100==1 ? 0 : n%100==2 ? 1 : n%100==3 || n%100==4 ? 2 : 3);\n" + +#. module: website_mail_snippet_bg_color +#: view:website:website_mail.email_designer_snippets +msgid "Pick Background Color" +msgstr "Izbira barve ozadja" diff --git a/web_editor_background_color/static/description/icon.png b/web_editor_background_color/static/description/icon.png new file mode 100644 index 00000000..794e8ef5 Binary files /dev/null and b/web_editor_background_color/static/description/icon.png differ diff --git a/web_editor_background_color/static/description/mass_mailing_editor.png b/web_editor_background_color/static/description/mass_mailing_editor.png new file mode 100644 index 00000000..ac8324a8 Binary files /dev/null and b/web_editor_background_color/static/description/mass_mailing_editor.png differ diff --git a/web_editor_background_color/static/src/css/background_color.less b/web_editor_background_color/static/src/css/background_color.less new file mode 100644 index 00000000..52629bdf --- /dev/null +++ b/web_editor_background_color/static/src/css/background_color.less @@ -0,0 +1,23 @@ +/* Copyright 2017 Jairo Llopis + * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */ + +@colorpicker-img-path: "./"; + +.colorpicker-element { + @colorpicker-width: 170px; + @colorpicker-height: 118px; + + .colorpicker-inline { + min-width: initial; + display: block; + margin-top: 3px !important; + } + .colorpicker-saturation { + width: @colorpicker-height; + height: @colorpicker-height; + } + .colorpicker-hue, .colorpicker-alpha { + width: (@colorpicker-width - @colorpicker-height) / 2; + height: @colorpicker-height; + } +} diff --git a/web_editor_background_color/static/src/js/background_color.js b/web_editor_background_color/static/src/js/background_color.js new file mode 100644 index 00000000..7516560b --- /dev/null +++ b/web_editor_background_color/static/src/js/background_color.js @@ -0,0 +1,83 @@ +/* Copyright 2016-2017 Jairo Llopis + * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */ + +odoo.define("web_editor_background_color.colorpicker", function (require) { + "use strict"; + var ajax = require("web.ajax"); + var core = require("web.core"); + var options = require("web_editor.snippets.options"); + + ajax.loadXML( + "/web_editor_background_color/static/src/xml/colorpicker.xml", + core.qweb + ); + + return options.registry.colorpicker.include({ + bind_events: function () { + this._super(); + // Remove inline background-color for normal class-based buttons + this.$el.find(".o_colorpicker_section button[data-color]").on( + "click", + $.proxy(this.remove_inline_background_color, this) + ); + // Enable custom color picker + this.$custom = this.$el.find('[data-name="custom_color"]'); + this.$custom.colorpicker({ + color: this.$target.css("background-color"), + container: true, + inline: true, + sliders: { + saturation: { + maxLeft: 118, + maxTop: 118, + }, + hue: { + maxTop: 118, + }, + alpha: { + maxTop: 118, + }, + }, + }); + this.$custom.on( + "changeColor", + $.proxy(this.set_inline_background_color, this)); + this.$custom.on( + "click keypress keyup keydown", + $.proxy(this.custom_abort_event, this)); + this.$custom.on( + "click", "input", + $.proxy(this.input_select, this)); + this.$el.find(".note-color-reset").on( + "click", + $.proxy(this.remove_inline_background_color, this)); + // Activate border color changes if it matches background's + var style = this.$target.prop("style"); + this.change_border = + style["border-color"] && + style["background-color"] === style["border-color"]; + }, + custom_abort_event: function (event) { + // HACK Avoid dropdown disappearing when picking colors + event.stopPropagation(); + }, + input_select: function (event) { + $(event.target).focus().select(); + }, + remove_inline_background_color: function (event) { + this.$target.css("background-color", ""); + if (this.change_border) { + this.$target.css("border-color", ""); + } + this.$target.trigger("background-color-event", event.type); + }, + set_inline_background_color: function (event) { + var color = String(event.color); + this.$target.css("background-color", color); + if (this.change_border) { + this.$target.css("border-color", color); + } + this.$target.trigger("background-color-event", event.type); + }, + }); +}); diff --git a/web_editor_background_color/static/src/lib/bootstrap-colorpicker/alpha-horizontal.png b/web_editor_background_color/static/src/lib/bootstrap-colorpicker/alpha-horizontal.png new file mode 100644 index 00000000..f8318895 Binary files /dev/null and b/web_editor_background_color/static/src/lib/bootstrap-colorpicker/alpha-horizontal.png differ diff --git a/web_editor_background_color/static/src/lib/bootstrap-colorpicker/alpha.png b/web_editor_background_color/static/src/lib/bootstrap-colorpicker/alpha.png new file mode 100644 index 00000000..2e53a30e Binary files /dev/null and b/web_editor_background_color/static/src/lib/bootstrap-colorpicker/alpha.png differ diff --git a/web_editor_background_color/static/src/lib/bootstrap-colorpicker/bootstrap-colorpicker.js b/web_editor_background_color/static/src/lib/bootstrap-colorpicker/bootstrap-colorpicker.js new file mode 100644 index 00000000..f923537e --- /dev/null +++ b/web_editor_background_color/static/src/lib/bootstrap-colorpicker/bootstrap-colorpicker.js @@ -0,0 +1,1319 @@ +/*! + * Bootstrap Colorpicker v2.5.1 + * https://itsjavi.com/bootstrap-colorpicker/ + * + * Originally written by (c) 2012 Stefan Petre + * Licensed under the Apache License v2.0 + * http://www.apache.org/licenses/LICENSE-2.0.txt + * + */ + +(function(root, factory) { + if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module unless amdModuleId is set + define(["jquery"], function(jq) { + return (factory(jq)); + }); + } else if (typeof exports === 'object') { + // Node. Does not work with strict CommonJS, but + // only CommonJS-like environments that support module.exports, + // like Node. + module.exports = factory(require("jquery")); + } else if (jQuery && !jQuery.fn.colorpicker) { + factory(jQuery); + } +}(this, function($) { + 'use strict'; + /** + * Color manipulation helper class + * + * @param {Object|String} [val] + * @param {Object} [predefinedColors] + * @param {String|null} [fallbackColor] + * @param {String|null} [fallbackFormat] + * @param {Boolean} [hexNumberSignPrefix] + * @constructor + */ + var Color = function( + val, predefinedColors, fallbackColor, fallbackFormat, hexNumberSignPrefix) { + this.fallbackValue = fallbackColor ? + ( + fallbackColor && (typeof fallbackColor.h !== 'undefined') ? + fallbackColor : + this.value = { + h: 0, + s: 0, + b: 0, + a: 1 + } + ) : + null; + + this.fallbackFormat = fallbackFormat ? fallbackFormat : 'rgba'; + + this.hexNumberSignPrefix = hexNumberSignPrefix === true; + + this.value = this.fallbackValue; + + this.origFormat = null; // original string format + + this.predefinedColors = predefinedColors ? predefinedColors : {}; + + // We don't want to share aliases across instances so we extend new object + this.colors = $.extend({}, Color.webColors, this.predefinedColors); + + if (val) { + if (typeof val.h !== 'undefined') { + this.value = val; + } else { + this.setColor(String(val)); + } + } + + if (!this.value) { + // Initial value is always black if no arguments are passed or val is empty + this.value = { + h: 0, + s: 0, + b: 0, + a: 1 + }; + } + }; + + Color.webColors = { // 140 predefined colors from the HTML Colors spec + "aliceblue": "f0f8ff", + "antiquewhite": "faebd7", + "aqua": "00ffff", + "aquamarine": "7fffd4", + "azure": "f0ffff", + "beige": "f5f5dc", + "bisque": "ffe4c4", + "black": "000000", + "blanchedalmond": "ffebcd", + "blue": "0000ff", + "blueviolet": "8a2be2", + "brown": "a52a2a", + "burlywood": "deb887", + "cadetblue": "5f9ea0", + "chartreuse": "7fff00", + "chocolate": "d2691e", + "coral": "ff7f50", + "cornflowerblue": "6495ed", + "cornsilk": "fff8dc", + "crimson": "dc143c", + "cyan": "00ffff", + "darkblue": "00008b", + "darkcyan": "008b8b", + "darkgoldenrod": "b8860b", + "darkgray": "a9a9a9", + "darkgreen": "006400", + "darkkhaki": "bdb76b", + "darkmagenta": "8b008b", + "darkolivegreen": "556b2f", + "darkorange": "ff8c00", + "darkorchid": "9932cc", + "darkred": "8b0000", + "darksalmon": "e9967a", + "darkseagreen": "8fbc8f", + "darkslateblue": "483d8b", + "darkslategray": "2f4f4f", + "darkturquoise": "00ced1", + "darkviolet": "9400d3", + "deeppink": "ff1493", + "deepskyblue": "00bfff", + "dimgray": "696969", + "dodgerblue": "1e90ff", + "firebrick": "b22222", + "floralwhite": "fffaf0", + "forestgreen": "228b22", + "fuchsia": "ff00ff", + "gainsboro": "dcdcdc", + "ghostwhite": "f8f8ff", + "gold": "ffd700", + "goldenrod": "daa520", + "gray": "808080", + "green": "008000", + "greenyellow": "adff2f", + "honeydew": "f0fff0", + "hotpink": "ff69b4", + "indianred": "cd5c5c", + "indigo": "4b0082", + "ivory": "fffff0", + "khaki": "f0e68c", + "lavender": "e6e6fa", + "lavenderblush": "fff0f5", + "lawngreen": "7cfc00", + "lemonchiffon": "fffacd", + "lightblue": "add8e6", + "lightcoral": "f08080", + "lightcyan": "e0ffff", + "lightgoldenrodyellow": "fafad2", + "lightgrey": "d3d3d3", + "lightgreen": "90ee90", + "lightpink": "ffb6c1", + "lightsalmon": "ffa07a", + "lightseagreen": "20b2aa", + "lightskyblue": "87cefa", + "lightslategray": "778899", + "lightsteelblue": "b0c4de", + "lightyellow": "ffffe0", + "lime": "00ff00", + "limegreen": "32cd32", + "linen": "faf0e6", + "magenta": "ff00ff", + "maroon": "800000", + "mediumaquamarine": "66cdaa", + "mediumblue": "0000cd", + "mediumorchid": "ba55d3", + "mediumpurple": "9370d8", + "mediumseagreen": "3cb371", + "mediumslateblue": "7b68ee", + "mediumspringgreen": "00fa9a", + "mediumturquoise": "48d1cc", + "mediumvioletred": "c71585", + "midnightblue": "191970", + "mintcream": "f5fffa", + "mistyrose": "ffe4e1", + "moccasin": "ffe4b5", + "navajowhite": "ffdead", + "navy": "000080", + "oldlace": "fdf5e6", + "olive": "808000", + "olivedrab": "6b8e23", + "orange": "ffa500", + "orangered": "ff4500", + "orchid": "da70d6", + "palegoldenrod": "eee8aa", + "palegreen": "98fb98", + "paleturquoise": "afeeee", + "palevioletred": "d87093", + "papayawhip": "ffefd5", + "peachpuff": "ffdab9", + "peru": "cd853f", + "pink": "ffc0cb", + "plum": "dda0dd", + "powderblue": "b0e0e6", + "purple": "800080", + "red": "ff0000", + "rosybrown": "bc8f8f", + "royalblue": "4169e1", + "saddlebrown": "8b4513", + "salmon": "fa8072", + "sandybrown": "f4a460", + "seagreen": "2e8b57", + "seashell": "fff5ee", + "sienna": "a0522d", + "silver": "c0c0c0", + "skyblue": "87ceeb", + "slateblue": "6a5acd", + "slategray": "708090", + "snow": "fffafa", + "springgreen": "00ff7f", + "steelblue": "4682b4", + "tan": "d2b48c", + "teal": "008080", + "thistle": "d8bfd8", + "tomato": "ff6347", + "turquoise": "40e0d0", + "violet": "ee82ee", + "wheat": "f5deb3", + "white": "ffffff", + "whitesmoke": "f5f5f5", + "yellow": "ffff00", + "yellowgreen": "9acd32", + "transparent": "transparent" + }; + + Color.prototype = { + constructor: Color, + colors: {}, // merged web and predefined colors + predefinedColors: {}, + /** + * @return {Object} + */ + getValue: function() { + return this.value; + }, + /** + * @param {Object} val + */ + setValue: function(val) { + this.value = val; + }, + _sanitizeNumber: function(val) { + if (typeof val === 'number') { + return val; + } + if (isNaN(val) || (val === null) || (val === '') || (val === undefined)) { + return 1; + } + if (val === '') { + return 0; + } + if (typeof val.toLowerCase !== 'undefined') { + if (val.match(/^\./)) { + val = "0" + val; + } + return Math.ceil(parseFloat(val) * 100) / 100; + } + return 1; + }, + isTransparent: function(strVal) { + if (!strVal || !(typeof strVal === 'string' || strVal instanceof String)) { + return false; + } + strVal = strVal.toLowerCase().trim(); + return (strVal === 'transparent') || (strVal.match(/#?00000000/)) || (strVal.match(/(rgba|hsla)\(0,0,0,0?\.?0\)/)); + }, + rgbaIsTransparent: function(rgba) { + return ((rgba.r === 0) && (rgba.g === 0) && (rgba.b === 0) && (rgba.a === 0)); + }, + // parse a string to HSB + /** + * @protected + * @param {String} strVal + * @returns {boolean} Returns true if it could be parsed, false otherwise + */ + setColor: function(strVal) { + strVal = strVal.toLowerCase().trim(); + if (strVal) { + if (this.isTransparent(strVal)) { + this.value = { + h: 0, + s: 0, + b: 0, + a: 0 + }; + return true; + } else { + var parsedColor = this.parse(strVal); + if (parsedColor) { + this.value = this.value = { + h: parsedColor.h, + s: parsedColor.s, + b: parsedColor.b, + a: parsedColor.a + }; + if (!this.origFormat) { + this.origFormat = parsedColor.format; + } + } else if (this.fallbackValue) { + // if parser fails, defaults to fallbackValue if defined, otherwise the value won't be changed + this.value = this.fallbackValue; + } + } + } + return false; + }, + setHue: function(h) { + this.value.h = 1 - h; + }, + setSaturation: function(s) { + this.value.s = s; + }, + setBrightness: function(b) { + this.value.b = 1 - b; + }, + setAlpha: function(a) { + this.value.a = Math.round((parseInt((1 - a) * 100, 10) / 100) * 100) / 100; + }, + toRGB: function(h, s, b, a) { + if (arguments.length === 0) { + h = this.value.h; + s = this.value.s; + b = this.value.b; + a = this.value.a; + } + + h *= 360; + var R, G, B, X, C; + h = (h % 360) / 60; + C = b * s; + X = C * (1 - Math.abs(h % 2 - 1)); + R = G = B = b - C; + + h = ~~h; + R += [C, X, 0, 0, X, C][h]; + G += [X, C, C, X, 0, 0][h]; + B += [0, 0, X, C, C, X][h]; + + return { + r: Math.round(R * 255), + g: Math.round(G * 255), + b: Math.round(B * 255), + a: a + }; + }, + toHex: function(h, s, b, a) { + if (arguments.length === 0) { + h = this.value.h; + s = this.value.s; + b = this.value.b; + a = this.value.a; + } + + var rgb = this.toRGB(h, s, b, a); + + if (this.rgbaIsTransparent(rgb)) { + return 'transparent'; + } + + var hexStr = (this.hexNumberSignPrefix ? '#' : '') + ( + (1 << 24) + + (parseInt(rgb.r) << 16) + + (parseInt(rgb.g) << 8) + + parseInt(rgb.b)) + .toString(16) + .slice(1); + + return hexStr; + }, + toHSL: function(h, s, b, a) { + if (arguments.length === 0) { + h = this.value.h; + s = this.value.s; + b = this.value.b; + a = this.value.a; + } + + var H = h, + L = (2 - s) * b, + S = s * b; + if (L > 0 && L <= 1) { + S /= L; + } else { + S /= 2 - L; + } + L /= 2; + if (S > 1) { + S = 1; + } + return { + h: isNaN(H) ? 0 : H, + s: isNaN(S) ? 0 : S, + l: isNaN(L) ? 0 : L, + a: isNaN(a) ? 0 : a + }; + }, + toAlias: function(r, g, b, a) { + var c, rgb = (arguments.length === 0) ? this.toHex() : this.toHex(r, g, b, a); + + // support predef. colors in non-hex format too, as defined in the alias itself + var original = this.origFormat === 'alias' ? rgb : this.toString(this.origFormat, false); + + for (var alias in this.colors) { + c = this.colors[alias].toLowerCase().trim(); + if ((c === rgb) || (c === original)) { + return alias; + } + } + return false; + }, + RGBtoHSB: function(r, g, b, a) { + r /= 255; + g /= 255; + b /= 255; + + var H, S, V, C; + V = Math.max(r, g, b); + C = V - Math.min(r, g, b); + H = (C === 0 ? null : + V === r ? (g - b) / C : + V === g ? (b - r) / C + 2 : + (r - g) / C + 4 + ); + H = ((H + 360) % 6) * 60 / 360; + S = C === 0 ? 0 : C / V; + return { + h: this._sanitizeNumber(H), + s: S, + b: V, + a: this._sanitizeNumber(a) + }; + }, + HueToRGB: function(p, q, h) { + if (h < 0) { + h += 1; + } else if (h > 1) { + h -= 1; + } + if ((h * 6) < 1) { + return p + (q - p) * h * 6; + } else if ((h * 2) < 1) { + return q; + } else if ((h * 3) < 2) { + return p + (q - p) * ((2 / 3) - h) * 6; + } else { + return p; + } + }, + HSLtoRGB: function(h, s, l, a) { + if (s < 0) { + s = 0; + } + var q; + if (l <= 0.5) { + q = l * (1 + s); + } else { + q = l + s - (l * s); + } + + var p = 2 * l - q; + + var tr = h + (1 / 3); + var tg = h; + var tb = h - (1 / 3); + + var r = Math.round(this.HueToRGB(p, q, tr) * 255); + var g = Math.round(this.HueToRGB(p, q, tg) * 255); + var b = Math.round(this.HueToRGB(p, q, tb) * 255); + return [r, g, b, this._sanitizeNumber(a)]; + }, + /** + * @param {String} strVal + * @returns {Object} Object containing h,s,b,a,format properties or FALSE if failed to parse + */ + parse: function(strVal) { + if (arguments.length === 0) { + return false; + } + + var that = this, + result = false, + isAlias = (typeof this.colors[strVal] !== 'undefined'), + values, format; + + if (isAlias) { + strVal = this.colors[strVal].toLowerCase().trim(); + } + + $.each(this.stringParsers, function(i, parser) { + var match = parser.re.exec(strVal); + values = match && parser.parse.apply(that, [match]); + if (values) { + result = {}; + format = (isAlias ? 'alias' : (parser.format ? parser.format : that.getValidFallbackFormat())); + if (format.match(/hsla?/)) { + result = that.RGBtoHSB.apply(that, that.HSLtoRGB.apply(that, values)); + } else { + result = that.RGBtoHSB.apply(that, values); + } + if (result instanceof Object) { + result.format = format; + } + return false; // stop iterating + } + return true; + }); + return result; + }, + getValidFallbackFormat: function() { + var formats = [ + 'rgba', 'rgb', 'hex', 'hsla', 'hsl' + ]; + if (this.origFormat && (formats.indexOf(this.origFormat) !== -1)) { + return this.origFormat; + } + if (this.fallbackFormat && (formats.indexOf(this.fallbackFormat) !== -1)) { + return this.fallbackFormat; + } + + return 'rgba'; // By default, return a format that will not lose the alpha info + }, + /** + * + * @param {string} [format] (default: rgba) + * @param {boolean} [translateAlias] Return real color for pre-defined (non-standard) aliases (default: false) + * @returns {String} + */ + toString: function(format, translateAlias) { + format = format || this.origFormat || this.fallbackFormat; + translateAlias = translateAlias || false; + + var c = false; + + switch (format) { + case 'rgb': + { + c = this.toRGB(); + if (this.rgbaIsTransparent(c)) { + return 'transparent'; + } + return 'rgb(' + c.r + ',' + c.g + ',' + c.b + ')'; + } + break; + case 'rgba': + { + c = this.toRGB(); + return 'rgba(' + c.r + ',' + c.g + ',' + c.b + ',' + c.a + ')'; + } + break; + case 'hsl': + { + c = this.toHSL(); + return 'hsl(' + Math.round(c.h * 360) + ',' + Math.round(c.s * 100) + '%,' + Math.round(c.l * 100) + '%)'; + } + break; + case 'hsla': + { + c = this.toHSL(); + return 'hsla(' + Math.round(c.h * 360) + ',' + Math.round(c.s * 100) + '%,' + Math.round(c.l * 100) + '%,' + c.a + ')'; + } + break; + case 'hex': + { + return this.toHex(); + } + break; + case 'alias': + { + c = this.toAlias(); + + if (c === false) { + return this.toString(this.getValidFallbackFormat()); + } + + if (translateAlias && !(c in Color.webColors) && (c in this.predefinedColors)) { + return this.predefinedColors[c]; + } + + return c; + } + default: + { + return c; + } + break; + } + }, + // a set of RE's that can match strings and generate color tuples. + // from John Resig color plugin + // https://github.com/jquery/jquery-color/ + stringParsers: [{ + re: /rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*?\)/, + format: 'rgb', + parse: function(execResult) { + return [ + execResult[1], + execResult[2], + execResult[3], + 1 + ]; + } + }, { + re: /rgb\(\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*?\)/, + format: 'rgb', + parse: function(execResult) { + return [ + 2.55 * execResult[1], + 2.55 * execResult[2], + 2.55 * execResult[3], + 1 + ]; + } + }, { + re: /rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d*(?:\.\d+)?)\s*)?\)/, + format: 'rgba', + parse: function(execResult) { + return [ + execResult[1], + execResult[2], + execResult[3], + execResult[4] + ]; + } + }, { + re: /rgba\(\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*(?:,\s*(\d*(?:\.\d+)?)\s*)?\)/, + format: 'rgba', + parse: function(execResult) { + return [ + 2.55 * execResult[1], + 2.55 * execResult[2], + 2.55 * execResult[3], + execResult[4] + ]; + } + }, { + re: /hsl\(\s*(\d*(?:\.\d+)?)\s*,\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*?\)/, + format: 'hsl', + parse: function(execResult) { + return [ + execResult[1] / 360, + execResult[2] / 100, + execResult[3] / 100, + execResult[4] + ]; + } + }, { + re: /hsla\(\s*(\d*(?:\.\d+)?)\s*,\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*(?:,\s*(\d*(?:\.\d+)?)\s*)?\)/, + format: 'hsla', + parse: function(execResult) { + return [ + execResult[1] / 360, + execResult[2] / 100, + execResult[3] / 100, + execResult[4] + ]; + } + }, { + re: /#?([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/, + format: 'hex', + parse: function(execResult) { + return [ + parseInt(execResult[1], 16), + parseInt(execResult[2], 16), + parseInt(execResult[3], 16), + 1 + ]; + } + }, { + re: /#?([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/, + format: 'hex', + parse: function(execResult) { + return [ + parseInt(execResult[1] + execResult[1], 16), + parseInt(execResult[2] + execResult[2], 16), + parseInt(execResult[3] + execResult[3], 16), + 1 + ]; + } + }], + colorNameToHex: function(name) { + if (typeof this.colors[name.toLowerCase()] !== 'undefined') { + return this.colors[name.toLowerCase()]; + } + return false; + } + }; + + /* + * Default plugin options + */ + var defaults = { + horizontal: false, // horizontal mode layout ? + inline: false, //forces to show the colorpicker as an inline element + color: false, //forces a color + format: false, //forces a format + input: 'input', // children input selector + container: false, // container selector + component: '.add-on, .input-group-addon', // children component selector + fallbackColor: false, // fallback color value. null = keeps current color. + fallbackFormat: 'hex', // fallback color format + hexNumberSignPrefix: true, // put a '#' (number sign) before hex strings + sliders: { + saturation: { + maxLeft: 100, + maxTop: 100, + callLeft: 'setSaturation', + callTop: 'setBrightness' + }, + hue: { + maxLeft: 0, + maxTop: 100, + callLeft: false, + callTop: 'setHue' + }, + alpha: { + maxLeft: 0, + maxTop: 100, + callLeft: false, + callTop: 'setAlpha' + } + }, + slidersHorz: { + saturation: { + maxLeft: 100, + maxTop: 100, + callLeft: 'setSaturation', + callTop: 'setBrightness' + }, + hue: { + maxLeft: 100, + maxTop: 0, + callLeft: 'setHue', + callTop: false + }, + alpha: { + maxLeft: 100, + maxTop: 0, + callLeft: 'setAlpha', + callTop: false + } + }, + template: '