diff --git a/src/code_manager/model/CssGenerator.js b/src/code_manager/model/CssGenerator.js index 466a0da0c..02fc6781e 100644 --- a/src/code_manager/model/CssGenerator.js +++ b/src/code_manager/model/CssGenerator.js @@ -15,8 +15,7 @@ module.exports = require('backbone').Model.extend({ buildFromModel(model, opts = {}) { let code = ''; const em = this.em; - const dc = em && em.get('DomComponents'); - const avoidInline = dc && dc.getConfig().avoidInlineStyle; + const avoidInline = em && em.getConfig('avoidInlineStyle'); const style = model.get('style'); const classes = model.get('classes'); const wrappesIsBody = opts.wrappesIsBody; diff --git a/src/dom_components/config/config.js b/src/dom_components/config/config.js index 245800503..470c58a62 100644 --- a/src/dom_components/config/config.js +++ b/src/dom_components/config/config.js @@ -18,13 +18,6 @@ module.exports = { 'background-size'], }, - // Usually when you update the `style` of the component this changes the - // element's `style` attribute. Unfortunately, inline styling doesn't allow - // use of media queries (@media) or even pseudo selectors (eg. :hover). - // When `avoidInlineStyle` is true all the styles are inserted inside the - // relative css rule - avoidInlineStyle: 0, - // Could be used for default components components: [], diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js index c23a7ca5f..04dba0dba 100644 --- a/src/dom_components/model/Component.js +++ b/src/dom_components/model/Component.js @@ -187,9 +187,11 @@ module.exports = Backbone.Model.extend(Styleable).extend({ getStyle() { - if (this.config.avoidInlineStyle) { + const em = this.em; + + if (em.getConfig('avoidInlineStyle')) { const state = this.get('state'); - const cc = this.em.get('CssComposer'); + const cc = em.get('CssComposer'); const rule = cc.getIdRule(this.getId(), { state }); this.rule = rule; @@ -203,10 +205,12 @@ module.exports = Backbone.Model.extend(Styleable).extend({ setStyle(prop = {}, opts = {}) { - if (this.config.avoidInlineStyle) { + const em = this.em; + + if (em.getConfig('avoidInlineStyle')) { prop = Styleable.setStyle.call(this, prop, {silent: 1, avoidStore: 1}); const state = this.get('state'); - const cc = this.em.get('CssComposer'); + const cc = em.get('CssComposer'); this.rule = cc.setIdRule(this.getId(), prop, { ...opts, state }); } else { prop = Styleable.setStyle.apply(this, arguments); diff --git a/src/dom_components/view/ComponentView.js b/src/dom_components/view/ComponentView.js index 66e41060f..77a7b403d 100644 --- a/src/dom_components/view/ComponentView.js +++ b/src/dom_components/view/ComponentView.js @@ -153,7 +153,8 @@ module.exports = Backbone.View.extend({ * @private * */ updateStyle() { - if (this.config.avoidInlineStyle) { + const em = this.em; + if (em.get('avoidInlineStyle')) { const model = this.model; this.el.id = model.getId(); model.setStyle(model.getStyle()); diff --git a/src/editor/config/config.js b/src/editor/config/config.js index 1f31fd496..1980756c3 100644 --- a/src/editor/config/config.js +++ b/src/editor/config/config.js @@ -71,6 +71,12 @@ module.exports = { // The wrapper, if visible, will be shown as a `` wrappesIsBody: 1, + // Usually when you update the `style` of the component this changes the + // element's `style` attribute. Unfortunately, inline styling doesn't allow + // use of media queries (@media) or even pseudo selectors (eg. :hover). + // When `avoidInlineStyle` is true all styles are inserted inside the css rule + avoidInlineStyle: 0, + // Dom element el: '', diff --git a/src/editor/index.js b/src/editor/index.js index a8635e8b2..b7c8dc865 100644 --- a/src/editor/index.js +++ b/src/editor/index.js @@ -238,10 +238,12 @@ module.exports = config => { /** * Returns configuration object - * @return {Object} + * @param {string} [prop] Property name + * @return {any} Returns the configuration object or + * the value of the specified property */ - getConfig() { - return c; + getConfig(prop) { + return em.getConfig(prop); }, /** diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index 114dc594a..7ed65e548 100644 --- a/src/editor/model/Editor.js +++ b/src/editor/model/Editor.js @@ -66,6 +66,19 @@ module.exports = Backbone.Model.extend({ this.on('change:changesCount', this.updateChanges, this); }, + + /** + * Get configurations + * @param {string} [prop] Property name + * @return {any} Returns the configuration object or + * the value of the specified property + */ + getConfig(prop) { + const config = this.config; + return isUndefined(prop) ? config : config[prop]; + }, + + /** * Should be called after all modules and plugins are loaded * @param {Function} clb diff --git a/src/selector_manager/view/ClassTagsView.js b/src/selector_manager/view/ClassTagsView.js index ffe1404d5..0524cfbde 100644 --- a/src/selector_manager/view/ClassTagsView.js +++ b/src/selector_manager/view/ClassTagsView.js @@ -33,7 +33,7 @@ module.exports = Backbone.View.extend({ events: {}, - initialize(o) { + initialize(o = {}) { this.config = o.config || {}; this.pfx = this.config.stylePrefix || ''; this.ppfx = this.config.pStylePrefix || ''; @@ -48,7 +48,8 @@ module.exports = Backbone.View.extend({ this.events['keyup #' + this.newInputId] = 'onInputKeyUp'; this.events['change #' + this.stateInputId] = 'stateChanged'; - this.target = this.config.em; + this.target = this.config.em; + this.em = this.target; this.listenTo(this.target ,'change:selectedComponent',this.componentChanged); this.listenTo(this.target, 'targetClassUpdated', this.updateSelector); @@ -148,7 +149,10 @@ module.exports = Backbone.View.extend({ * @private */ updateStateVis() { - if(this.collection.length) + 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'); diff --git a/test/specs/code_manager/model/CodeModels.js b/test/specs/code_manager/model/CodeModels.js index a5a1560c6..92b0692ca 100644 --- a/test/specs/code_manager/model/CodeModels.js +++ b/test/specs/code_manager/model/CodeModels.js @@ -62,7 +62,7 @@ module.exports = { }); }); - describe.only('CssGenerator', () => { + describe('CssGenerator', () => { var newCssComp = () => new CssComposer().init(); beforeEach(() => { em = new Editor({}); @@ -221,17 +221,27 @@ module.exports = { expect(obj.build(comp, {cssc})).toEqual(''); }); - it('Render correctly a rule with avoidInlineStyle option and not', () => { - em.get('DomComponents').getConfig().avoidInlineStyle = 1; + it('Render correctly a rule without avoidInlineStyle option', () => { comp.setStyle({color: 'red'}); const id = comp.getId(); const result = `#${id}{color:red;}`; expect(obj.build(comp, {cssc: cc})).toEqual(result); - expect(obj.build(comp, {cssc: cc, em})).toEqual(''); + }); + + it('Render correctly a rule with avoidInlineStyle option', () => { + em.getConfig().avoidInlineStyle = 1; + comp = new Component({}, { + em, + componentTypes: dcomp.componentTypes, + }); + comp.setStyle({color: 'red'}); + const id = comp.getId(); + const result = `#${id}{color:red;}`; + expect(obj.build(comp, {cssc: cc, em})).toEqual(result); }); it('Render correctly a rule with avoidInlineStyle and state', () => { - em.get('DomComponents').getConfig().avoidInlineStyle = 1; + em.getConfig().avoidInlineStyle = 1; const state = 'hover'; comp.config.avoidInlineStyle = 1; comp.set('state', state); @@ -242,7 +252,7 @@ module.exports = { }); it('Render correctly a rule with avoidInlineStyle and w/o state', () => { - em.get('DomComponents').getConfig().avoidInlineStyle = 1; + em.getConfig().avoidInlineStyle = 1; const state = 'hover'; comp.config.avoidInlineStyle = 1; comp.setStyle({color: 'blue'});