From 8ca92330b367d54fddf1c02089ee9d0bc3edbfdc Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Wed, 20 Dec 2017 14:14:56 +0100
Subject: [PATCH] [IMP] web_editor: allow to define multiple `select-class`
 groups

Before this commit, when defining two sets of classes to be chosen
independently on a same element you had to define two options:

```
<div data-selector=".myElement">
    <li class="dropdown-submenu">
        <a tabindex="-1" href="#">Classes set 1</a>
        <ul class="dropdown-menu">
            <li data-select-class="a"><a href="#">A</a></li>
            <li data-select-class="b"><a href="#">B</a></li>
            <li data-select-class="c"><a href="#">C</a></li>
        </ul>
    </li>
</div>
<div data-selector=".myElement">
    <li class="dropdown-submenu">
        <a tabindex="-1" href="#">Classes set 2</a>
        <ul class="dropdown-menu">
            <li data-select-class="x"><a href="#">X</a></li>
            <li data-select-class="y"><a href="#">Y</a></li>
            <li data-select-class="z"><a href="#">Z</a></li>
        </ul>
    </li>
</div>
```

Now, an unique option can be used for this, allowing to not duplicate
the `data-selector` and not creating two JS options:

```
<div data-selector=".myElement">
    <li class="dropdown-submenu">
        <a tabindex="-1" href="#">Classes set 1</a>
        <ul class="dropdown-menu">
            <li data-select-class="a"><a href="#">A</a></li>
            <li data-select-class="b"><a href="#">B</a></li>
            <li data-select-class="c"><a href="#">C</a></li>
        </ul>
    </li>
    <li class="dropdown-submenu">
        <a tabindex="-1" href="#">Classes set 2</a>
        <ul class="dropdown-menu">
            <li data-select-class="x"><a href="#">X</a></li>
            <li data-select-class="y"><a href="#">Y</a></li>
            <li data-select-class="z"><a href="#">Z</a></li>
        </ul>
    </li>
</div>
```
---
 addons/web_editor/static/src/js/editor/snippets.options.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

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 4987e9a2d23..485bea35605 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -126,7 +126,11 @@ var SnippetOption = Widget.extend({
      * @param {jQuery} $li - the related DOMElement option
      */
     selectClass: function (previewMode, value, $li) {
-        var $lis = this.$el.find('[data-select-class]').addBack('[data-select-class]');
+        var $group = $li.closest('.dropdown-submenu');
+        if (!$group.length) {
+            $group = this.$el;
+        }
+        var $lis = $group.find('[data-select-class]').addBack('[data-select-class]');
         var classes = $lis.map(function () {return $(this).data('selectClass');}).get().join(' ');
 
         this.$target.removeClass(classes);