[IMP] web_editor: make colorpicker option 'bg-'-independent

Now the colorpicker option can be defined with a `data-color-prefix`
parameter which will allow toggling classes different than "bg-*".
(e.g. if the prefix is set to be "hello-", the colorpicker option will
allow to choose between "hello-primary", "hello-danger", ...).

1 files changed, 11 insertions, 6 deletions

diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 485bea35605..554806454e8 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -669,6 +669,7 @@ registry.colorpicker = SnippetOption.extend({
         'mouseleave .colorpicker button': '_onColorButtonLeave',
         'click .note-color-reset': '_onColorResetButtonClick',
     }),
+    colorPrefix: 'bg-',
 
     /**
      * @override
@@ -677,6 +678,10 @@ registry.colorpicker = SnippetOption.extend({
         var self = this;
         var res = this._super.apply(this, arguments);
 
+        if (this.data.colorPrefix) {
+            this.colorPrefix = this.data.colorPrefix;
+        }
+
         if (!this.$el.find('.colorpicker').length) {
             var $pt = $(qweb.render('web_editor.snippet.option.colorpicker'));
             var $clpicker = $(qweb.render('web_editor.colorpicker'));
@@ -743,14 +748,14 @@ registry.colorpicker = SnippetOption.extend({
         var classes = [];
         this.$el.find('.colorpicker button').each(function () {
             var $color = $(this);
-            if (!$color.data('color')) {
+            var color = $color.data('color');
+            if (!color) {
                 return;
             }
 
-            var className = 'bg-' + $color.data('color');
-            $color.addClass(className);
+            $color.addClass('bg-' + color);
+            var className = self.colorPrefix + color;
             if (self.$target.hasClass(className)) {
-                self.color = className;
                 $color.addClass('selected');
             }
             classes.push(className);
@@ -786,7 +791,7 @@ registry.colorpicker = SnippetOption.extend({
         this.$target.removeClass(this.classes);
         var color = $(ev.currentTarget).data('color');
         if (color) {
-            this.$target.addClass('bg-' + color);
+            this.$target.addClass(this.colorPrefix + color);
         }
         this.$target.trigger('background-color-event', ev.type);
     },
@@ -801,7 +806,7 @@ registry.colorpicker = SnippetOption.extend({
         var $selected = this.$el.find('.colorpicker button.selected');
         var color = $selected.length && $selected.data('color');
         if (color) {
-            this.$target.addClass('bg-' + color);
+            this.$target.addClass(this.colorPrefix + color);
         }
         this.$target.trigger('background-color-event', ev.type);
     },