From 4145cbc4037c1a2a63cf5e5a4818741ec6e7faf5 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Wed, 10 Oct 2018 00:44:18 +0200 Subject: [PATCH] Add style emitter in StyleManager --- src/domain_abstract/model/Styleable.js | 4 ++ src/editor/model/Editor.js | 2 +- src/selector_manager/view/ClassTagsView.js | 57 ++++++++++++------- src/style_manager/index.js | 4 ++ .../selector_manager/e2e/ClassManager.js | 4 +- .../selector_manager/view/ClassTagsView.js | 7 +-- 6 files changed, 48 insertions(+), 30 deletions(-) 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);