[MIG] web_editor_background_color: Migrate to v11

- Better JS framework usage.
- Split readme.
- Update bootstrap-colorpicker lib.
- Remove image, serve it from GitHub CDN.

web_editor_background_color/__manifest__.py

@@ -1,10 +1,9 @@
-# -*- coding: utf-8 -*-
 # Copyright 2017 Jairo Llopis <jairo.llopis@tecnativa.com>
 # 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)",

web_editor_background_color/readme/CONTRIBUTORS.rst

@@ -0,0 +1 @@
+* Jairo Llopis <jairo.llopis@tecnativa.com> - https://www.tecnativa.com

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

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

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.

web_editor_background_color/static/src/css/background_color.less

@@ -1,8 +1,6 @@
 /* Copyright 2017 Jairo Llopis <jairo.llopis@tecnativa.com>
  * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
 
-@colorpicker-img-path: "./";
-
 .colorpicker-element {
     @colorpicker-width: 170px;
     @colorpicker-height: 118px;

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(
+    colorpicker.include({
-        "/web_editor_background_color/static/src/xml/colorpicker.xml",
+        events: _.extend({}, colorpicker.prototype.events, {
-        core.qweb
+            "changeColor [data-name=custom_color]":
-    );
+                "set_inline_background_color",
-
-    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 .o_colorpicker_section button[data-color]":
-                "click",
+                "remove_inline_background_color",
-                $.proxy(this.remove_inline_background_color, this)
+            "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",
+        ]),
+
+        /**
+         * @override
+         */
+        start: function () {
+            this._super();
             // 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);

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') ?
+        (typeof fallbackColor === 'string') ?
-        fallbackColor :
+        this.parse(fallbackColor) :
-        this.value = {
+        fallbackColor
-          h: 0,
-          s: 0,
-          b: 0,
-          a: 1
-        }
       ) :
       null;
 
@@ -345,21 +340,26 @@
         a: a
       };
     },
-    toHex: function(h, s, b, a) {
+    toHex: function(ignoreFormat, h, s, b, a) {
-      if (arguments.length === 0) {
+      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.disabled;
-        return (this.input.prop('disabled') === true);
-      }
-      return false;
     },
     disable: function() {
       if (this.hasInput()) {
         this.input.prop('disabled', true);
+      }
+      this.disabled = true;
       this.element.trigger({
         type: 'disable',
         color: this.color,
         value: this.getValue()
       });
       return true;
-      }
-      return false;
     },
     enable: function() {
       if (this.hasInput()) {
         this.input.prop('disabled', false);
+      }
+      this.disabled = false;
       this.element.trigger({
         type: 'enable',
         color: this.color,
         value: this.getValue()
       });
       return true;
-      }
-      return false;
     },
     currentSlider: null,
     mousePointer: {
@@ -1245,20 +1248,6 @@
       return false;
     },
     change: function(e) {
-      this.keyup(e);
-    },
-    keyup: function(e) {
-      if ((e.keyCode === 38)) {
-        if (this.color.value.a < 1) {
-          this.color.value.a = Math.round((this.color.value.a + 0.01) * 100) / 100;
-        }
-        this.update(true);
-      } else if ((e.keyCode === 40)) {
-        if (this.color.value.a > 0) {
-          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
@@ -1271,7 +1260,26 @@
         this.updateComponent();
         this.updatePicker();
       }
+
+      this.element.trigger({
+        type: 'changeColor',
+        color: this.color,
+        value: this.input.val()
+      });
+    },
+    keyup: function(e) {
+      if ((e.keyCode === 38)) {
+        if (this.color.value.a < 1) {
+          this.color.value.a = Math.round((this.color.value.a + 0.01) * 100) / 100;
         }
+        this.update(true);
+      } else if ((e.keyCode === 40)) {
+        if (this.color.value.a > 0) {
+          this.color.value.a = Math.round((this.color.value.a - 0.01) * 100) / 100;
+        }
+        this.update(true);
+      }
+
       this.element.trigger({
         type: 'changeColor',
         color: this.color,

web_editor_background_color/static/src/lib/bootstrap-colorpicker/colorpicker.less

@@ -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;
-}

web_editor_background_color/templates/assets.xml

@@ -7,7 +7,7 @@
     <template id="assets_editor" inherit_id="web_editor.assets_editor">
         <xpath expr=".">
             <!-- External library bootstrap-colorpicker -->
-            <link rel="stylesheet" href="/web_editor_background_color/static/src/lib/bootstrap-colorpicker/colorpicker.less"/>
+            <link rel="stylesheet" href="/web_editor_background_color/static/src/lib/bootstrap-colorpicker/bootstrap-colorpicker.css"/>
             <script type="text/javascript" src="/web_editor_background_color/static/src/lib/bootstrap-colorpicker/bootstrap-colorpicker.js"/>
             <!-- Internal assets -->
             <link rel="stylesheet" href="/web_editor_background_color/static/src/css/background_color.less"/>