diff --git a/web_editor_background_color/__manifest__.py b/web_editor_background_color/__manifest__.py index 05668139..29fda211 100644 --- a/web_editor_background_color/__manifest__.py +++ b/web_editor_background_color/__manifest__.py @@ -1,10 +1,9 @@ -# -*- 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", + "version": "11.0.1.0.0", "category": "Website", "website": "https://www.tecnativa.com", "author": "Tecnativa, Odoo Community Association (OCA)", diff --git a/web_editor_background_color/readme/CONTRIBUTORS.rst b/web_editor_background_color/readme/CONTRIBUTORS.rst new file mode 100644 index 00000000..bf93c78d --- /dev/null +++ b/web_editor_background_color/readme/CONTRIBUTORS.rst @@ -0,0 +1 @@ +* Jairo Llopis - https://www.tecnativa.com diff --git a/web_editor_background_color/readme/CREDITS.rst b/web_editor_background_color/readme/CREDITS.rst new file mode 100644 index 00000000..7c81b130 --- /dev/null +++ b/web_editor_background_color/readme/CREDITS.rst @@ -0,0 +1,3 @@ +* This addon includes code copied from bootstrap-colorpicker_ + +.. _bootstrap-colorpicker: https://github.com/itsjavi/bootstrap-colorpicker/tree/2.5.3 diff --git a/web_editor_background_color/readme/DESCRIPTION.rst b/web_editor_background_color/readme/DESCRIPTION.rst new file mode 100644 index 00000000..76576d15 --- /dev/null +++ b/web_editor_background_color/readme/DESCRIPTION.rst @@ -0,0 +1,5 @@ +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:: https://user-images.githubusercontent.com/973709/46802401-1c915180-cd55-11e8-9397-f198548a690c.gif + :alt: Screenshot of color picker in mass mailing editor diff --git a/web_editor_background_color/readme/USAGE.rst b/web_editor_background_color/readme/USAGE.rst new file mode 100644 index 00000000..6046c99f --- /dev/null +++ b/web_editor_background_color/readme/USAGE.rst @@ -0,0 +1,10 @@ +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. diff --git a/web_editor_background_color/static/description/mass_mailing_editor.png b/web_editor_background_color/static/description/mass_mailing_editor.png deleted file mode 100644 index ac8324a8..00000000 Binary files a/web_editor_background_color/static/description/mass_mailing_editor.png and /dev/null 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 index 52629bdf..52680a2d 100644 --- a/web_editor_background_color/static/src/css/background_color.less +++ b/web_editor_background_color/static/src/css/background_color.less @@ -1,8 +1,6 @@ /* 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; diff --git a/web_editor_background_color/static/src/js/background_color.js b/web_editor_background_color/static/src/js/background_color.js index 7516560b..8b33cc64 100644 --- a/web_editor_background_color/static/src/js/background_color.js +++ b/web_editor_background_color/static/src/js/background_color.js @@ -3,23 +3,31 @@ 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"); + var colorpicker = options.registry.colorpicker; - ajax.loadXML( - "/web_editor_background_color/static/src/xml/colorpicker.xml", - core.qweb - ); + colorpicker.include({ + events: _.extend({}, colorpicker.prototype.events, { + "changeColor [data-name=custom_color]": + "set_inline_background_color", + // Remove inline background-color for normal class-based buttons + "click .o_colorpicker_section button[data-color]": + "remove_inline_background_color", + "click [data-name=custom_color] input": "input_select", + "click [data-name=custom_color]": "custom_abort_event", + "keydown [data-name=custom_color]": "custom_abort_event", + "keypress [data-name=custom_color]": "custom_abort_event", + "keyup [data-name=custom_color]": "custom_abort_event", + }), + xmlDependencies: colorpicker.prototype.xmlDependencies.concat([ + "/web_editor_background_color/static/src/xml/colorpicker.xml", + ]), - return options.registry.colorpicker.include({ - bind_events: function () { + /** + * @override + */ + start: 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({ @@ -39,38 +47,50 @@ odoo.define("web_editor_background_color.colorpicker", function (require) { }, }, }); - 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"]; }, + + /** + * A HACK to avoid dropdown disappearing when picking colors + * + * @param {Event} event + */ custom_abort_event: function (event) { - // HACK Avoid dropdown disappearing when picking colors event.stopPropagation(); }, + + /** + * Select the color picker input + * + * @param {Event} event + */ input_select: function (event) { $(event.target).focus().select(); }, - remove_inline_background_color: function (event) { + + /** + * Undo the inline background color, besides upstream color classes + * + * @override + */ + _onColorResetButtonClick: function (event) { + this._super.apply(this, arguments); this.$target.css("background-color", ""); if (this.change_border) { this.$target.css("border-color", ""); } this.$target.trigger("background-color-event", event.type); }, + + /** + * Apply the chosen color as an inline style + * + * @param {Event} event + */ set_inline_background_color: function (event) { var color = String(event.color); this.$target.css("background-color", color); 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 deleted file mode 100644 index f8318895..00000000 Binary files a/web_editor_background_color/static/src/lib/bootstrap-colorpicker/alpha-horizontal.png and /dev/null 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 deleted file mode 100644 index 2e53a30e..00000000 Binary files a/web_editor_background_color/static/src/lib/bootstrap-colorpicker/alpha.png and /dev/null differ diff --git a/web_editor_background_color/static/src/lib/bootstrap-colorpicker/bootstrap-colorpicker.css b/web_editor_background_color/static/src/lib/bootstrap-colorpicker/bootstrap-colorpicker.css new file mode 100644 index 00000000..359676d5 --- /dev/null +++ b/web_editor_background_color/static/src/lib/bootstrap-colorpicker/bootstrap-colorpicker.css @@ -0,0 +1,230 @@ +/*! + * Bootstrap Colorpicker v2.5.2 + * 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 + * + */ +.colorpicker-saturation { + width: 100px; + height: 100px; + background-image: url("data:image/png;base64,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"); + cursor: crosshair; + float: left; +} +.colorpicker-saturation i { + display: block; + height: 5px; + width: 5px; + border: 1px solid #000; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + position: absolute; + top: 0; + left: 0; + margin: -4px 0 0 -4px; +} +.colorpicker-saturation i b { + display: block; + height: 5px; + width: 5px; + border: 1px solid #fff; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} +.colorpicker-hue, +.colorpicker-alpha { + width: 15px; + height: 100px; + float: left; + cursor: row-resize; + margin-left: 4px; + margin-bottom: 4px; +} +.colorpicker-hue i, +.colorpicker-alpha i { + display: block; + height: 1px; + background: #000; + border-top: 1px solid #fff; + position: absolute; + top: 0; + left: 0; + width: 100%; + margin-top: -1px; +} +.colorpicker-hue { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAMAAABw8qpSAAABLFBMVEXqFBb/ABH/ACL/ADH/AEH/AFD/AGD/AG7/AH7/AI3/AJ3/AKz/ALz/AMr/ANv/AOr/APr2AP/mAP/XAP/HAP+4AP+oAP+aAP+JAP97AP9rAP9cAP9MAP8+AP8tAP8fAP8PAP8BAv8AEP8AH/8AL/8APv8ATv8AXP8Abf8Ae/8Ai/8Amv8Aqv8AuP8Ayf8A1/8A5/8A9/8A//gA/+kA/9kA/8oA/7oA/6wA/5sA/40A/30A/24A/14A/1AA/z8A/zEA/yEA/xEB/wMN/wAd/wAs/wA8/wBK/wBb/wBp/wB5/wCI/wCY/wCm/wC3/wDF/wDV/wDk/wD1/wD/+gD/7AD/3AD/zAD/vgD/rQD/nwD/jgD/gAD/cAD/YgD/UQD/QwD/MgD/JAD/FAD4Eg42qAedAAAAh0lEQVR4XgXAg3EDAAAAwI9to7Zt27a1/w49BASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTS1tHXo1KVbj159+g0YNGTYiFFjxk2YNGXajFlz5i1YtGTZilVr1m3YtGXbjl179h04dOTYiVNnzl24dOXajVt37j149OTZi1dv3n349OXbj19//wOxE1dQ8reGAAAAAElFTkSuQmCC"); +} +.colorpicker-alpha { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAABkCAQAAAAVxWkcAAABr0lEQVR4Xo2VwU0DQQxF7dmRuNIFlzlSAR3QAaXQQdIBJVABFXDcOVAAd67cjJLR07dkhcSrkZKfb/t7bG88rFo3B5gZPMNycItu2xloGV7MWHzM9zuzFWCkmA0nK6AszCUJDW6+mG6R03ncw5v8EMTEvZ2O3AliYjpslblc0RF9LmZYWxURU6aKytWZYsoWCAe+xwOZp1GsEukGiIkYxcQCHck99+gRgB7JncyIB5SGEhP3Yh5P6JwX+u6AnYot104d8DJT7uH7M9JH6OZbimj0vfMVaYnJIZFJDBW9kHlerL2C6JV4mSt7uuo2N57RxnZ+usQjn0R1jwBJBrNO3evJpVYUWsJ/E3UiXRlv24/7YZ04xmEdWlzcKS+B/eapeyMvFd2k0+hRk/T0AmTW8h69s2sjYMsdPntECiILhAeIMZAeH4QvUwfn6ijC0tTV+fT9ky8jM9nK2g7Ly1VjSpKYq6IvsAm7MtNu1orEqa/K3KNvgMFdhfquPfJmp2dbh0/8Gzb6Y22ViaNr6n5410zXdngVhbu6XqdOtWOuin5hjABGp4a2uotZ71MVCfwDBt2/v37yo6AAAAAASUVORK5CYII="); + display: none; +} +.colorpicker-saturation, +.colorpicker-hue, +.colorpicker-alpha { + background-size: contain; +} +.colorpicker { + padding: 4px; + min-width: 130px; + margin-top: 1px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + z-index: 2500; +} +.colorpicker:before, +.colorpicker:after { + display: table; + content: ""; + line-height: 0; +} +.colorpicker:after { + clear: both; +} +.colorpicker:before { + content: ''; + display: inline-block; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-bottom: 7px solid #ccc; + border-bottom-color: rgba(0, 0, 0, 0.2); + position: absolute; + top: -7px; + left: 6px; +} +.colorpicker:after { + content: ''; + display: inline-block; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-bottom: 6px solid #ffffff; + position: absolute; + top: -6px; + left: 7px; +} +.colorpicker div { + position: relative; +} +.colorpicker.colorpicker-with-alpha { + min-width: 140px; +} +.colorpicker.colorpicker-with-alpha .colorpicker-alpha { + display: block; +} +.colorpicker-color { + height: 10px; + margin-top: 5px; + clear: both; + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAABkCAQAAAAVxWkcAAABr0lEQVR4Xo2VwU0DQQxF7dmRuNIFlzlSAR3QAaXQQdIBJVABFXDcOVAAd67cjJLR07dkhcSrkZKfb/t7bG88rFo3B5gZPMNycItu2xloGV7MWHzM9zuzFWCkmA0nK6AszCUJDW6+mG6R03ncw5v8EMTEvZ2O3AliYjpslblc0RF9LmZYWxURU6aKytWZYsoWCAe+xwOZp1GsEukGiIkYxcQCHck99+gRgB7JncyIB5SGEhP3Yh5P6JwX+u6AnYot104d8DJT7uH7M9JH6OZbimj0vfMVaYnJIZFJDBW9kHlerL2C6JV4mSt7uuo2N57RxnZ+usQjn0R1jwBJBrNO3evJpVYUWsJ/E3UiXRlv24/7YZ04xmEdWlzcKS+B/eapeyMvFd2k0+hRk/T0AmTW8h69s2sjYMsdPntECiILhAeIMZAeH4QvUwfn6ijC0tTV+fT9ky8jM9nK2g7Ly1VjSpKYq6IvsAm7MtNu1orEqa/K3KNvgMFdhfquPfJmp2dbh0/8Gzb6Y22ViaNr6n5410zXdngVhbu6XqdOtWOuin5hjABGp4a2uotZ71MVCfwDBt2/v37yo6AAAAAASUVORK5CYII="); + background-position: 0 100%; +} +.colorpicker-color div { + height: 10px; +} +.colorpicker-selectors { + display: none; + height: 10px; + margin-top: 5px; + clear: both; +} +.colorpicker-selectors i { + cursor: pointer; + float: left; + height: 10px; + width: 10px; +} +.colorpicker-selectors i + i { + margin-left: 3px; +} +.colorpicker-element .input-group-addon i, +.colorpicker-element .add-on i { + display: inline-block; + cursor: pointer; + height: 16px; + vertical-align: text-top; + width: 16px; +} +.colorpicker.colorpicker-inline { + position: relative; + display: inline-block; + float: none; + z-index: auto; +} +.colorpicker.colorpicker-horizontal { + width: 110px; + min-width: 110px; + height: auto; +} +.colorpicker.colorpicker-horizontal .colorpicker-saturation { + margin-bottom: 4px; +} +.colorpicker.colorpicker-horizontal .colorpicker-color { + width: 100px; +} +.colorpicker.colorpicker-horizontal .colorpicker-hue, +.colorpicker.colorpicker-horizontal .colorpicker-alpha { + width: 100px; + height: 15px; + float: left; + cursor: col-resize; + margin-left: 0px; + margin-bottom: 4px; +} +.colorpicker.colorpicker-horizontal .colorpicker-hue i, +.colorpicker.colorpicker-horizontal .colorpicker-alpha i { + display: block; + height: 15px; + background: #ffffff; + position: absolute; + top: 0; + left: 0; + width: 1px; + border: none; + margin-top: 0px; +} +.colorpicker.colorpicker-horizontal .colorpicker-hue { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAABCAMAAAAfBfuPAAABLFBMVEXqFBb/ABH/ACL/ADH/AEH/AFD/AGD/AG7/AH7/AI3/AJ3/AKz/ALz/AMr/ANv/AOr/APr2AP/mAP/XAP/HAP+4AP+oAP+aAP+JAP97AP9rAP9cAP9MAP8+AP8tAP8fAP8PAP8BAv8AEP8AH/8AL/8APv8ATv8AXP8Abf8Ae/8Ai/8Amv8Aqv8AuP8Ayf8A1/8A5/8A9/8A//gA/+kA/9kA/8oA/7oA/6wA/5sA/40A/30A/24A/14A/1AA/z8A/zEA/yEA/xEB/wMN/wAd/wAs/wA8/wBK/wBb/wBp/wB5/wCI/wCY/wCm/wC3/wDF/wDV/wDk/wD1/wD/+gD/7AD/3AD/zAD/vgD/rQD/nwD/jgD/gAD/cAD/YgD/UQD/QwD/MgD/JAD/FAD4Eg42qAedAAAAbUlEQVR4XgXAghEDsbxtlrZt27ax/w49ACAYQTGcICmaYTleECVZUTXdMC1Wm93hdLk9Xp8/EAyFI9FYPJFMpTPZXL5QLJUr1Vq90Wy1O91efzAcjSfT2XyxXK03293+cDydL9fb/fF8vT/f3x+LfRNXARMbCAAAAABJRU5ErkJggg=="); +} +.colorpicker.colorpicker-horizontal .colorpicker-alpha { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAKCAQAAADoFTP1AAAB9ElEQVR4XoWTQW4VMRBEu9qWEimL7DhEMp8NF+ASnJJLcAQgE1bcgBUSkYKUuHCrZ9pjeqSU5Yn9LPu7umJQBIIv+k7vIOrtK66L4lmr3pVOrOv3otp619KZ0/KjdNI79L52Uo09FBQWrU0vfe5trezU+hLsoUKd3Repovte+0vbq/7Lj5XbaHECKasR9G4MPlbp+gzZxd6koPEJCkAYC5SjcOTAIIOK90Dja1IfIZ8Z+zAY9jm3b5Ia+MT5sFcqRJrR2AYYA8Kua5BzYRrFPNmD4PQMegGJMOffJJUsWiI3nCHZZjInNdffLWOufzbc3JaboCAVxwmnRHbhLSPwRJ4wU0BRSc6HkECYYVw95nMKgJOcylxrJttE5Ibzf9Xq9GPvP+WX3MiV/MGHfRu/SentRQrfG1GzsIrytdNXucSRKxQNIGHM9YhGFQJcdjNcBZvfJayuYe4Sia1CzwW+19mWOhe37HsxJWKwbu/jluEU15QzAQjAqCEbhMJc78GYV2E0kooHDubUImWkTOhGpgv8PoT8DJG/bzxna4BZ0eOFSOaLADGeSpFsg5AzeaDZIDQQXjZ4y/8ryfzUXBwdELRjTjCNvOeT0rNlrJz90vwy6N9pXXQEluX0inElpPWokSdiLCfiNJJjMKQ8Qsh8GEKQKMo/eiHrNbI9UksAAAAASUVORK5CYII="); +} +.colorpicker-right:before { + left: auto; + right: 6px; +} +.colorpicker-right:after { + left: auto; + right: 7px; +} +.colorpicker-no-arrow:before { + border-right: 0; + border-left: 0; +} +.colorpicker-no-arrow:after { + border-right: 0; + border-left: 0; +} +.colorpicker.colorpicker-visible, +.colorpicker-alpha.colorpicker-visible, +.colorpicker-saturation.colorpicker-visible, +.colorpicker-hue.colorpicker-visible, +.colorpicker-selectors.colorpicker-visible { + display: block; +} +.colorpicker.colorpicker-hidden, +.colorpicker-alpha.colorpicker-hidden, +.colorpicker-saturation.colorpicker-hidden, +.colorpicker-hue.colorpicker-hidden, +.colorpicker-selectors.colorpicker-hidden { + display: none; +} +.colorpicker-inline.colorpicker-visible { + display: inline-block; +} +/*# sourceMappingURL=bootstrap-colorpicker.css.map */ \ No newline at end of file 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 index f923537e..ac22ed52 100644 --- 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 @@ -1,5 +1,5 @@ /*! - * Bootstrap Colorpicker v2.5.1 + * Bootstrap Colorpicker v2.5.2 * https://itsjavi.com/bootstrap-colorpicker/ * * Originally written by (c) 2012 Stefan Petre @@ -38,14 +38,9 @@ val, predefinedColors, fallbackColor, fallbackFormat, hexNumberSignPrefix) { this.fallbackValue = fallbackColor ? ( - fallbackColor && (typeof fallbackColor.h !== 'undefined') ? - fallbackColor : - this.value = { - h: 0, - s: 0, - b: 0, - a: 1 - } + (typeof fallbackColor === 'string') ? + this.parse(fallbackColor) : + fallbackColor ) : null; @@ -345,21 +340,26 @@ a: a }; }, - toHex: function(h, s, b, a) { - if (arguments.length === 0) { + toHex: function(ignoreFormat, h, s, b, a) { + if (arguments.length <= 1) { h = this.value.h; s = this.value.s; b = this.value.b; a = this.value.a; } + var prefix = '#'; var rgb = this.toRGB(h, s, b, a); if (this.rgbaIsTransparent(rgb)) { return 'transparent'; } - var hexStr = (this.hexNumberSignPrefix ? '#' : '') + ( + if (!ignoreFormat) { + prefix = (this.hexNumberSignPrefix ? '#' : ''); + } + + var hexStr = prefix + ( (1 << 24) + (parseInt(rgb.r) << 16) + (parseInt(rgb.g) << 8) + @@ -397,10 +397,10 @@ }; }, toAlias: function(r, g, b, a) { - var c, rgb = (arguments.length === 0) ? this.toHex() : this.toHex(r, g, b, a); + var c, rgb = (arguments.length === 0) ? this.toHex(true) : this.toHex(true, 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); + var original = this.origFormat === 'alias' ? rgb : this.toString(false, this.origFormat); for (var alias in this.colors) { c = this.colors[alias].toLowerCase().trim(); @@ -475,6 +475,9 @@ * @returns {Object} Object containing h,s,b,a,format properties or FALSE if failed to parse */ parse: function(strVal) { + if (typeof strVal !== 'string') { + return this.fallbackValue; + } if (arguments.length === 0) { return false; } @@ -525,9 +528,10 @@ * * @param {string} [format] (default: rgba) * @param {boolean} [translateAlias] Return real color for pre-defined (non-standard) aliases (default: false) + * @param {boolean} [forceRawValue] Forces hashtag prefix when getting hex color (default: false) * @returns {String} */ - toString: function(format, translateAlias) { + toString: function(forceRawValue, format, translateAlias) { format = format || this.origFormat || this.fallbackFormat; translateAlias = translateAlias || false; @@ -563,7 +567,7 @@ break; case 'hex': { - return this.toHex(); + return this.toHex(forceRawValue); } break; case 'alias': @@ -571,7 +575,7 @@ c = this.toAlias(); if (c === false) { - return this.toString(this.getValidFallbackFormat()); + return this.toString(forceRawValue, this.getValidFallbackFormat()); } if (translateAlias && !(c in Color.webColors) && (c in this.predefinedColors)) { @@ -787,6 +791,8 @@ this.updateData(this.color); } + this.disabled = false; + // Setup picker var $picker = this.picker = $(this.options.template); if (this.options.customClass) { @@ -855,7 +861,7 @@ 'keyup.colorpicker': $.proxy(this.keyup, this) }); this.input.on({ - 'change.colorpicker': $.proxy(this.change, this) + 'input.colorpicker': $.proxy(this.change, this) }); if (this.component === false) { this.element.on({ @@ -975,12 +981,12 @@ }); }, updateData: function(val) { - val = val || this.color.toString(this.format, false); + val = val || this.color.toString(false, this.format); this.element.data('color', val); return val; }, updateInput: function(val) { - val = val || this.color.toString(this.format, false); + val = val || this.color.toString(false, this.format); if (this.input !== false) { this.input.prop('value', val); this.input.trigger('change'); @@ -1011,13 +1017,13 @@ }); this.picker.find('.colorpicker-saturation') - .css('backgroundColor', (this.options.hexNumberSignPrefix ? '' : '#') + this.color.toHex(this.color.value.h, 1, 1, 1)); + .css('backgroundColor', this.color.toHex(true, this.color.value.h, 1, 1, 1)); this.picker.find('.colorpicker-alpha') - .css('backgroundColor', (this.options.hexNumberSignPrefix ? '' : '#') + this.color.toHex()); + .css('backgroundColor', this.color.toHex(true)); this.picker.find('.colorpicker-color, .colorpicker-color div') - .css('backgroundColor', this.color.toString(this.format, true)); + .css('backgroundColor', this.color.toString(true, this.format)); return val; }, @@ -1034,16 +1040,16 @@ var icn = this.component.find('i').eq(0); if (icn.length > 0) { icn.css({ - 'backgroundColor': color.toString(this.format, true) + 'backgroundColor': color.toString(true, this.format) }); } else { this.component.css({ - 'backgroundColor': color.toString(this.format, true) + 'backgroundColor': color.toString(true, this.format) }); } } - return color.toString(this.format, false); + return color.toString(false, this.format); }, update: function(force) { var val; @@ -1099,34 +1105,31 @@ return (this.input !== false); }, isDisabled: function() { - if (this.hasInput()) { - return (this.input.prop('disabled') === true); - } - return false; + return this.disabled; }, disable: function() { if (this.hasInput()) { this.input.prop('disabled', true); - this.element.trigger({ - type: 'disable', - color: this.color, - value: this.getValue() - }); - return true; } - return false; + this.disabled = true; + this.element.trigger({ + type: 'disable', + color: this.color, + value: this.getValue() + }); + return true; }, enable: function() { if (this.hasInput()) { this.input.prop('disabled', false); - this.element.trigger({ - type: 'enable', - color: this.color, - value: this.getValue() - }); - return true; } - return false; + this.disabled = false; + this.element.trigger({ + type: 'enable', + color: this.color, + value: this.getValue() + }); + return true; }, currentSlider: null, mousePointer: { @@ -1245,7 +1248,24 @@ return false; }, change: function(e) { - this.keyup(e); + this.color = this.createColor(this.input.val()); + // Change format dynamically + // Only occurs if user choose the dynamic format by + // setting option format to false + if (this.color.origFormat && this.options.format === false) { + this.format = this.color.origFormat; + } + if (this.getValue(false) !== false) { + this.updateData(); + this.updateComponent(); + this.updatePicker(); + } + + this.element.trigger({ + type: 'changeColor', + color: this.color, + value: this.input.val() + }); }, keyup: function(e) { if ((e.keyCode === 38)) { @@ -1258,20 +1278,8 @@ this.color.value.a = Math.round((this.color.value.a - 0.01) * 100) / 100; } this.update(true); - } else { - this.color = this.createColor(this.input.val()); - // Change format dynamically - // Only occurs if user choose the dynamic format by - // setting option format to false - if (this.color.origFormat && this.options.format === false) { - this.format = this.color.origFormat; - } - if (this.getValue(false) !== false) { - this.updateData(); - this.updateComponent(); - this.updatePicker(); - } } + this.element.trigger({ type: 'changeColor', color: this.color, diff --git a/web_editor_background_color/static/src/lib/bootstrap-colorpicker/colorpicker.less b/web_editor_background_color/static/src/lib/bootstrap-colorpicker/colorpicker.less deleted file mode 100644 index 072865b7..00000000 --- a/web_editor_background_color/static/src/lib/bootstrap-colorpicker/colorpicker.less +++ /dev/null @@ -1,273 +0,0 @@ -/*! - * 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 - * - */ -@colorpicker-img-path: "../img/bootstrap-colorpicker/"; - -.bgImg(@imgFilename) { - background-image: url("@{colorpicker-img-path}@{imgFilename}"); -} - -.borderRadius(@size) { - -webkit-border-radius: @size; - -moz-border-radius: @size; - border-radius: @size; -} - -.colorpicker-saturation { - width: 100px; - height: 100px; - .bgImg('saturation.png'); - cursor: crosshair; - float: left; - i { - display: block; - height: 5px; - width: 5px; - border: 1px solid #000; - .borderRadius(5px); - position: absolute; - top: 0; - left: 0; - margin: -4px 0 0 -4px; - b { - display: block; - height: 5px; - width: 5px; - border: 1px solid #fff; - .borderRadius(5px); - } - } -} - -.colorpicker-hue, -.colorpicker-alpha { - width: 15px; - height: 100px; - float: left; - cursor: row-resize; - margin-left: 4px; - margin-bottom: 4px; -} - -.colorpicker-hue i, -.colorpicker-alpha i { - display: block; - height: 1px; - background: #000; - border-top: 1px solid #fff; - position: absolute; - top: 0; - left: 0; - width: 100%; - margin-top: -1px; -} - -.colorpicker-hue { - .bgImg('hue.png'); -} - -.colorpicker-alpha { - .bgImg('alpha.png'); - display: none; -} - -.colorpicker-saturation, -.colorpicker-hue, -.colorpicker-alpha { - background-size: contain; -} - -.colorpicker { - padding: 4px; - min-width: 130px; - margin-top: 1px; - .borderRadius(4px); - z-index: 2500; -} - -.colorpicker:before, -.colorpicker:after { - display: table; - content: ""; - line-height: 0; -} - -.colorpicker:after { - clear: both; -} - -.colorpicker:before { - content: ''; - display: inline-block; - border-left: 7px solid transparent; - border-right: 7px solid transparent; - border-bottom: 7px solid #ccc; - border-bottom-color: rgba(0, 0, 0, 0.2); - position: absolute; - top: -7px; - left: 6px; -} - -.colorpicker:after { - content: ''; - display: inline-block; - border-left: 6px solid transparent; - border-right: 6px solid transparent; - border-bottom: 6px solid #ffffff; - position: absolute; - top: -6px; - left: 7px; -} - -.colorpicker div { - position: relative; -} - -.colorpicker.colorpicker-with-alpha { - min-width: 140px; -} - -.colorpicker.colorpicker-with-alpha .colorpicker-alpha { - display: block; -} - -.colorpicker-color { - height: 10px; - margin-top: 5px; - clear: both; - .bgImg('alpha.png'); - background-position: 0 100%; -} - -.colorpicker-color div { - height: 10px; -} - -.colorpicker-selectors { - display: none; - height: 10px; - margin-top: 5px; - clear: both; -} - -.colorpicker-selectors i { - cursor: pointer; - float: left; - height: 10px; - width: 10px; -} - -.colorpicker-selectors i + i { - margin-left: 3px; -} - -.colorpicker-element .input-group-addon i, -.colorpicker-element .add-on i { - display: inline-block; - cursor: pointer; - height: 16px; - vertical-align: text-top; - width: 16px; -} - -.colorpicker.colorpicker-inline { - position: relative; - display: inline-block; - float: none; - z-index: auto; -} - -.colorpicker.colorpicker-horizontal { - width: 110px; - min-width: 110px; - height: auto; -} - -.colorpicker.colorpicker-horizontal .colorpicker-saturation { - margin-bottom: 4px; -} - -.colorpicker.colorpicker-horizontal .colorpicker-color { - width: 100px; -} - -.colorpicker.colorpicker-horizontal .colorpicker-hue, -.colorpicker.colorpicker-horizontal .colorpicker-alpha { - width: 100px; - height: 15px; - float: left; - cursor: col-resize; - margin-left: 0px; - margin-bottom: 4px; -} - -.colorpicker.colorpicker-horizontal .colorpicker-hue i, -.colorpicker.colorpicker-horizontal .colorpicker-alpha i { - display: block; - height: 15px; - background: #ffffff; - position: absolute; - top: 0; - left: 0; - width: 1px; - border: none; - margin-top: 0px; -} - -.colorpicker.colorpicker-horizontal .colorpicker-hue { - .bgImg('hue-horizontal.png'); -} - -.colorpicker.colorpicker-horizontal .colorpicker-alpha { - .bgImg('alpha-horizontal.png'); -} - -.colorpicker-right:before { - left: auto; - right: 6px; -} - -.colorpicker-right:after { - left: auto; - right: 7px; -} - -.colorpicker-no-arrow:before { - border-right: 0; - border-left: 0; -} - -.colorpicker-no-arrow:after { - border-right: 0; - border-left: 0; -} - -.colorpicker, -.colorpicker-alpha, -.colorpicker-saturation, -.colorpicker-hue, -.colorpicker-selectors { - &.colorpicker-visible { - display: block; - } -} - -.colorpicker, -.colorpicker-alpha, -.colorpicker-saturation, -.colorpicker-hue, -.colorpicker-selectors { - &.colorpicker-hidden { - display: none; - } -} - -.colorpicker-inline.colorpicker-visible { - display: inline-block; -} diff --git a/web_editor_background_color/static/src/lib/bootstrap-colorpicker/hue-horizontal.png b/web_editor_background_color/static/src/lib/bootstrap-colorpicker/hue-horizontal.png deleted file mode 100644 index 3dcd5946..00000000 Binary files a/web_editor_background_color/static/src/lib/bootstrap-colorpicker/hue-horizontal.png and /dev/null differ diff --git a/web_editor_background_color/static/src/lib/bootstrap-colorpicker/hue.png b/web_editor_background_color/static/src/lib/bootstrap-colorpicker/hue.png deleted file mode 100644 index 6f5ec2e5..00000000 Binary files a/web_editor_background_color/static/src/lib/bootstrap-colorpicker/hue.png and /dev/null differ diff --git a/web_editor_background_color/static/src/lib/bootstrap-colorpicker/saturation.png b/web_editor_background_color/static/src/lib/bootstrap-colorpicker/saturation.png deleted file mode 100644 index 170841cb..00000000 Binary files a/web_editor_background_color/static/src/lib/bootstrap-colorpicker/saturation.png and /dev/null differ diff --git a/web_editor_background_color/templates/assets.xml b/web_editor_background_color/templates/assets.xml index a850fcde..12644ab0 100644 --- a/web_editor_background_color/templates/assets.xml +++ b/web_editor_background_color/templates/assets.xml @@ -7,7 +7,7 @@