Move avoidInlineStyle inside main configuration object

9 years ago · 87ffa7865f
9 changed files with 58 additions and 26 deletions
--- 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;
--- 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: [],

--- 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);
--- 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());
--- 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 `<body>`
  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: '',

--- 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);
    },

    /**
--- 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
--- 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');
--- 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'});