Skip to content
Permalink
Browse files

[IMP] web_editor: add new way to edit data-* on a target

Now, the editor UI can suggest options the same way as select-class but
for editing a data attribute.
  • Loading branch information...
qsm-odoo committed Nov 8, 2019
1 parent 7998ee8 commit ee8f65399eb239bb87e99a0b24732444d94f1263
Showing with 37 additions and 0 deletions.
  1. +37 −0 addons/web_editor/static/src/js/editor/snippets.options.js
@@ -291,6 +291,27 @@ var SnippetOption = Widget.extend({
this.$target.addClass(value);
}
},
/**
* Default option method which allows to select one and only one value in
* the option values set and set it on the associated snippet as a data
* attribute. The name of the data attribute is given by the closest
* ancestor's data value for 'selectDataAttributeName'.
*
* @param {boolean} previewMode - @see this.selectClass
* @param {Object} value - the data attribute value to set
* @param {jQuery} $opt - the related DOMElement option
*/
selectDataAttribute: function (previewMode, value, $opt) {
const $ancestor = $opt && $opt.closest('[data-select-data-attribute-name]');
if (!$ancestor || !$ancestor.length) {
return;
}
const dataName = $ancestor[0].dataset.selectDataAttributeName;
if (!dataName) {
return;
}
this.$target[0].dataset[dataName] = value || '';
},
/**
* Default option method which allows to select one or multiple classes in
* the option classes set and set it on the associated snippet. The common
@@ -525,6 +546,22 @@ var SnippetOption = Widget.extend({
.addClass('active');
}

// --- SELECT DATA ATTRIBUTE ---

this.$el.find('[data-select-data-attribute]')
.removeClass('active')
.filter((i, el) => {
const ancestorEl = el.closest('[data-select-data-attribute-name]');
if (!ancestorEl) {
return false;
}
const dataName = ancestorEl.dataset.selectDataAttributeName;
const dataValue = el.dataset.selectDataAttribute;
const targetValue = this.$target[0].dataset[dataName];
return (!targetValue && !dataValue) || targetValue === dataValue;
})
.addClass('active');

// --- SET DATA ATTRIBUTE --- (note: important to be done last because of active removal)

this.el.querySelectorAll('[data-set-data-attribute]').forEach(el => {

0 comments on commit ee8f653

Please sign in to comment.
You can’t perform that action at this time.