Setup `setIdStyle` in CssComposer

src/css_composer/index.js

@@ -24,12 +24,14 @@
  */
 
 module.exports = () => {
+  let em;
   var c = {},
   defaults = require('./config/config'),
   CssRule = require('./model/CssRule'),
   CssRules = require('./model/CssRules'),
   Selectors = require('./model/Selectors'),
-  CssRulesView = require('./view/CssRulesView');
+  CssRulesView = require('./view/CssRulesView'),
+  Selector = require('selector_manager/model/Selector');
 
   var rules, rulesView;
 
@@ -79,6 +81,7 @@ module.exports = () => {
         c.rules = elStyle || c.rules;
 
         c.sm = c.em;
+        em = c.em;
         rules = new CssRules([], c);
         rulesView = new CssRulesView({
           collection: rules,
@@ -273,22 +276,19 @@ module.exports = () => {
 
 
       /**
-       * Add/update a css rule
-       * @param {string} selector Selector string, eg. '.class1.class2, #id1'
+       * Add/update a css rule with id selector
+       * @param {string} name Id selector name, eg. 'my-id'
        * @param {Object} style  Style properties and values
        */
-      set(selector, style, opts = {}) {
+      setIdStyle(name, style = {}, opts = {}) {
         const state = opts.state || '';
         const media = opts.mediaText || '';
-        // opts.state, opts.media
-        /*
-        1. from selectorString to selectorObjects (using Selectors API)
-          [
-              [{'class1'}, {'class2'}],
-              [{'id1'}, {'class2'}]
-          ]
-        2. add(selectors, state, media)
-         */
+        const sm = em.get('SelectorManager');
+        const selector = sm.add({ name, type: Selector.TYPE_ID });
+        console.log(media);
+        const rule = this.add(selector, state, media);
+        rule.setStyle(style);
+        return rule;
       },
 
 

src/dom_components/view/ComponentView.js

@@ -147,13 +147,12 @@ module.exports = Backbone.View.extend({
   updateStyle() {
     const em = this.em;
     const model = this.model;
-    const selector = `#${model.getId()}`;
     const style = model.getStyle();
     const state = model.get('state');
-    em.get('CssComposer').set(selector, style, { state });
-    //this.setAttribute('style', this.getStyleString());
+    em.get('CssComposer').setIdStyle(model.getId(), style, { state });
   },
 
+
   /**
    * Update classe attribute
    * @private
@@ -207,6 +206,7 @@ module.exports = Backbone.View.extend({
     }
 
     src && (attrs.src = src);
+    attrs.id = model.getId();
     this.$el.attr(attrs);
     this.updateHighlight();
     this.updateStyle();

src/selector_manager/index.js

@@ -133,7 +133,7 @@ module.exports = config => {
       }
 
       const cname = opts.name;
-      const selector = cname ? this.get(cname) : selectors.where(opts)[0];
+      const selector = cname ? this.get(cname, opts.type) : selectors.where(opts)[0];
 
       if (!selector) {
         return selectors.add(opts);
@@ -167,12 +167,13 @@ module.exports = config => {
     /**
      * Get the selector by its name
      * @param {String} name Selector name
+     * @param {String} tyoe Selector type
      * @return {Model|null}
      * @example
      * var selector = selectorManager.get('selectorName');
      * */
-    get(name) {
-      return selectors.where({name})[0];
+    get(name, type = Selector.TYPE_CLASS) {
+      return selectors.where({name, type})[0];
     },
 
     /**