[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>
```
This commit is contained in:
qsm-odoo
2017-12-20 17:15:08 +01:00
parent 374fa10272
commit 8ca92330b3
@@ -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);