[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:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user