Add `avoidInlineStyle` configuration option in DomComponents module

src/dom_components/config/config.js

@@ -18,6 +18,13 @@ 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: [],
 

src/dom_components/model/Component.js

@@ -150,7 +150,7 @@ module.exports = Backbone.Model.extend(Styleable).extend({
     this.opt = opt;
     this.sm = em;
     this.em = em;
-    this.config = props;
+    this.config = opt.config || {};
     this.set('attributes', this.get('attributes') || {});
     this.listenTo(this, 'change:script', this.scriptUpdated);
     this.listenTo(this, 'change:traits', this.traitsUpdated);
@@ -185,33 +185,24 @@ module.exports = Backbone.Model.extend(Styleable).extend({
     this.set('attributes', attrs);
   },
 
+
   getStyle() {
     const rule = this.rule;
-    return rule ? rule.getStyle() : Styleable.getStyle.call(this);
+    const avoidInline = this.config.avoidInlineStyle;
+    return rule && avoidInline ? rule.getStyle() : Styleable.getStyle.call(this);
   },
 
-  setStyle(prop = {}, opts = {}) {
-    prop = Styleable.setStyle.call(this, prop, {silent: 1, avoidStore: 1});
-    const state = this.get('state');
-    const cc = this.em.get('CssComposer');
-    this.rule = cc.setIdRule(this.getId(), prop, { ...opts, state });
-  },
-
-  // setStyle / getStyle
-  /*
 
   setStyle(prop = {}, opts = {}) {
-    if (isString(prop)) {
-      prop = parseStyle(prop);
-    }
-
-    this.set('style', { ...prop }, opts);
-
-    for (let pr in prop) {
-      this.trigger(`change:style:${pr}`);
+    if (this.config.avoidInlineStyle) {
+      prop = Styleable.setStyle.call(this, prop, {silent: 1, avoidStore: 1});
+      const state = this.get('state');
+      const cc = this.em.get('CssComposer');
+      this.rule = cc.setIdRule(this.getId(), prop, { ...opts, state });
+    } else {
+      Styleable.setStyle.apply(this, arguments);
     }
   },
-   */
 
 
   /**
@@ -256,7 +247,7 @@ module.exports = Backbone.Model.extend(Styleable).extend({
 
 
   initClasses() {
-    const classes = this.normalizeClasses(this.get('classes') || this.config.classes || []);
+    const classes = this.normalizeClasses(this.get('classes') || []);
     this.set('classes', new Selectors(classes));
     return this;
   },

src/dom_components/view/ComponentView.js

@@ -64,6 +64,7 @@ module.exports = Backbone.View.extend({
     }
   },
 
+
   /**
    * Import, if possible, classes inside main container
    * @private
@@ -78,6 +79,7 @@ module.exports = Backbone.View.extend({
     }
   },
 
+
   /**
    * Fires on state update. If the state is not empty will add a helper class
    * @param  {Event} e
@@ -94,6 +96,7 @@ module.exports = Backbone.View.extend({
     }
   },
 
+
   /**
    * Update item on status change
    * @param  {Event} e
@@ -131,6 +134,7 @@ module.exports = Backbone.View.extend({
     }
   },
 
+
   /**
    * Update highlight attribute
    * @private
@@ -140,14 +144,33 @@ module.exports = Backbone.View.extend({
     this.setAttribute('data-highlightable', hl ? 1 : '');
   },
 
+
   /**
    * Update style attribute
    * @private
    * */
   updateStyle() {
-    //this.setAttribute('style', this.getStyleString());
+    this.setAttribute('style', this.getStyleString());
+  },
+
+
+  /**
+   * Return style string
+   * @return  {string}
+   * @private
+   * */
+  getStyleString() {
+    var style  = '';
+    this.style = this.model.get('style');
+    for(var key in this.style) {
+        if(this.style.hasOwnProperty(key))
+          style += key + ':' + this.style[key] + ';';
+    }
+
+    return style;
   },
 
+
   /**
    * Update classe attribute
    * @private
@@ -201,6 +224,7 @@ module.exports = Backbone.View.extend({
     }
 
     src && (attrs.src = src);
+    //attrs.id = model.getId();
     this.$el.attr(attrs);
     this.updateHighlight();
     this.updateStyle();
@@ -214,31 +238,6 @@ module.exports = Backbone.View.extend({
     this.getChildrenContainer().innerHTML = this.model.get('content');
   },
 
-  /**
-   * Return style string
-   * @return  {string}
-   * @private
-   * */
-  getStyleString() {
-    var style  = '';
-    this.style = this.model.get('style');
-    for(var key in this.style) {
-        if(this.style.hasOwnProperty(key))
-          style += key + ':' + this.style[key] + ';';
-    }
-
-    return style;
-  },
-
-  /**
-   * Reply to event call
-   * @param object Event that generated the request
-   * @private
-   * */
-  eventCall(event) {
-    event.viewResponse = this;
-  },
-
   /**
    * Prevent default helper
    * @param  {Event} e

test/specs/dom_components/view/ComponentV.js

@@ -80,14 +80,6 @@ module.exports = {
           expect(view.el.getAttribute('style')).toEqual(null);
         });
 
-        it('Get style string', () => {
-          model.set('style',  {
-            color: 'red',
-            float: 'left'
-          });
-          expect(view.getStyleString()).toEqual('color:red;float:left;');
-        });
-
         it('Add class', () => {
           model.get('classes').add({name: 'test'});
           expect(view.el.getAttribute('class')).toEqual('test');