diff --git a/src/domain_abstract/model/Styleable.js b/src/domain_abstract/model/Styleable.js
index 14aea295a..108e861da 100644
--- a/src/domain_abstract/model/Styleable.js
+++ b/src/domain_abstract/model/Styleable.js
@@ -99,5 +99,9 @@ export default {
}
return result.join('');
+ },
+
+ getSelectors() {
+ return this.get('selectors') || this.get('classes');
}
};
diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js
index 141392dd3..945b4fc7f 100644
--- a/src/editor/model/Editor.js
+++ b/src/editor/model/Editor.js
@@ -8,12 +8,12 @@ const deps = [
require('storage_manager'),
require('device_manager'),
require('parser'),
+ require('style_manager'),
require('selector_manager'),
require('modal_dialog'),
require('code_manager'),
require('panels'),
require('rich_text_editor'),
- require('style_manager'),
require('asset_manager'),
require('css_composer'),
require('trait_manager'),
diff --git a/src/selector_manager/view/ClassTagsView.js b/src/selector_manager/view/ClassTagsView.js
index 41cd89ed7..50c9994e0 100644
--- a/src/selector_manager/view/ClassTagsView.js
+++ b/src/selector_manager/view/ClassTagsView.js
@@ -1,9 +1,9 @@
-import _ from 'underscore';
+import { template } from 'underscore';
import Backbone from 'backbone';
var ClassTagView = require('./ClassTagView');
module.exports = Backbone.View.extend({
- template: _.template(`
+ template: template(`
<%= label %>
@@ -52,6 +52,7 @@ module.exports = Backbone.View.extend({
this.target = this.config.em;
this.em = this.target;
+ //this.listenTo(this.getStyleEmitter(), 'update', this.componentChanged);
this.listenTo(this.target, 'component:toggled', this.componentChanged);
this.listenTo(this.target, 'component:update:classes', this.updateSelector);
@@ -62,6 +63,13 @@ module.exports = Backbone.View.extend({
this.delegateEvents();
},
+ getStyleEmitter() {
+ const { em } = this;
+ const sm = em && em.get('StyleManager');
+ const emitter = sm && sm.getEmitter();
+ return emitter || {};
+ },
+
/**
* Triggered when a tag is removed from collection
* @param {Object} model Removed model
@@ -134,19 +142,27 @@ module.exports = Backbone.View.extend({
* @private
*/
componentChanged(e) {
- this.compTarget = this.target.getSelected();
+ console.log('componentChanged');
+ this.compTarget = this.getTarget();
const target = this.compTarget;
let validSelectors = [];
if (target) {
- this.getStates().val(target.get('state'));
- validSelectors = target.get('classes').getValid();
+ const state = target.get('state');
+ state && this.getStates().val(state);
+ const selectors = target.getSelectors();
+ validSelectors = selectors.getValid();
}
this.collection.reset(validSelectors);
this.updateStateVis();
},
+ getTarget() {
+ const targetStyle = this.getStyleEmitter().model;
+ return this.target.getSelected();
+ },
+
/**
* Update states visibility. Hides states in case there is no tags
* inside collection
@@ -155,10 +171,8 @@ module.exports = Backbone.View.extend({
updateStateVis() {
const em = this.em;
const avoidInline = em && em.getConfig('avoidInlineStyle');
-
- if (this.collection.length || avoidInline)
- this.getStatesC().css('display', 'block');
- else this.getStatesC().css('display', 'none');
+ const display = this.collection.length || avoidInline ? 'block' : 'none';
+ this.getStatesC().css('display', display);
this.updateSelector();
},
@@ -168,20 +182,21 @@ module.exports = Backbone.View.extend({
* @private
*/
updateSelector() {
- const selected = this.target.getSelected();
+ const { pfx, collection, el } = this;
+ const selected = this.getTarget();
this.compTarget = selected;
-
- if (!selected || !selected.get) {
- return;
- }
+ if (!selected || !selected.get) return;
const state = selected.get('state');
- const coll = this.collection;
+ const coll = collection;
let result = coll.getFullString(coll.getStyleable());
- result = result || `#${selected.getId()}`;
+ result =
+ result ||
+ selected.get('selectorsAdd') ||
+ (selected.getId ? `#${selected.getId()}` : '');
result += state ? `:${state}` : '';
- const el = this.el.querySelector('#' + this.pfx + 'sel');
- el && (el.innerHTML = result);
+ const elSel = el.querySelector(`#${pfx}sel`);
+ elSel && (elSel.innerHTML = result);
},
/**
@@ -211,13 +226,11 @@ module.exports = Backbone.View.extend({
if (target) {
const sm = target.get('SelectorManager');
- var model = sm.add({ label });
+ const model = sm.add({ label });
if (component) {
- var compCls = component.get('classes');
- var lenB = compCls.length;
+ const compCls = component.getSelectors();
compCls.add(model);
- var lenA = compCls.length;
this.collection.add(model);
this.updateStateVis();
}
diff --git a/src/style_manager/index.js b/src/style_manager/index.js
index 3b10eeac3..d9ee38649 100644
--- a/src/style_manager/index.js
+++ b/src/style_manager/index.js
@@ -374,6 +374,10 @@ module.exports = () => {
return SectView.setTarget(target, opts);
},
+ getEmitter() {
+ return SectView.propTarget;
+ },
+
/**
* Render sectors and properties
* @return {HTMLElement}
diff --git a/test/specs/selector_manager/e2e/ClassManager.js b/test/specs/selector_manager/e2e/ClassManager.js
index 99fcea47d..e9b764a4a 100644
--- a/test/specs/selector_manager/e2e/ClassManager.js
+++ b/test/specs/selector_manager/e2e/ClassManager.js
@@ -86,10 +86,10 @@ module.exports = {
gjs.editor.setSelected(model);
tagEl.addNewTag('test');
tagEl.addNewTag('test');
- expect(model.get('classes').length).toEqual(1);
+ expect(model.getSelectors().length).toEqual(1);
expect(
model
- .get('classes')
+ .getSelectors()
.at(0)
.get('name')
).toEqual('test');
diff --git a/test/specs/selector_manager/view/ClassTagsView.js b/test/specs/selector_manager/view/ClassTagsView.js
index c7ade1ab5..4b4ebe549 100644
--- a/test/specs/selector_manager/view/ClassTagsView.js
+++ b/test/specs/selector_manager/view/ClassTagsView.js
@@ -1,5 +1,6 @@
const ClassTagsView = require('selector_manager/view/ClassTagsView');
const Selectors = require('selector_manager/model/Selectors');
+const Component = require('dom_components/model/Component');
const Editor = require('editor/model/Editor');
module.exports = {
@@ -43,11 +44,7 @@ module.exports = {
}
};
- testContext.compTargetStub = {
- get() {
- return { add() {} };
- }
- };
+ testContext.compTargetStub = new Component();
fixtures.innerHTML = '';
fixture.empty().appendTo(fixtures);