Extend Selector properties

index.html

@@ -1328,6 +1328,11 @@
       //console.log('Style of ', model.get('property'), 'Target: ', targetValue, 'Computed:', computedValue, 'Default:', defaultValue);
     });
 
+    editor.on('selector:add', function(model) {
+      if(model.get('name') == 'row')
+        console.log('added .row class', model);
+    });
+
     editor.render();
     </script>
   </body>

src/editor/index.js

@@ -41,6 +41,7 @@
  * styleManager:change:{propertyName} - As above but for a specific style property
  * storage:load - Triggered when something was loaded from the storage, loaded object passed as an argumnet
  * storage:store - Triggered when something is stored to the storage, stored object passed as an argumnet
+ * selector:add - Triggers when a new selector/class is created
  * canvasScroll - Triggered when the canvas is scrolled
  * run:{commandName} - Triggered when some command is called to run (eg. editor.runCommand('preview'))
  * stop:{commandName} - Triggered when some command is called to stop (eg. editor.stopCommand('preview'))

src/selector_manager/config/config.js

@@ -19,4 +19,19 @@ module.exports = {
       { name: 'nth-of-type(2n)', label: 'Even/Odd' }
   ],
 
+  // Associate properties on selector creation
+  // @example
+  // // If 'row' or 'cell' class is added into template, make those selectors
+  // // not visible by the user
+  // propertyMap: {
+  //   '.row, .cell': {
+  //      private: false,
+  //   }
+  // },
+  propertyMap: {
+    '.row, .cell': {
+      private: false,
+    }
+  },
+
 };

src/selector_manager/index.js

@@ -82,23 +82,31 @@ module.exports = config => {
           c[name] = defaults[name];
       }
 
-      var ppfx = c.pStylePrefix;
-      if(ppfx)
+      const em = c.em;
+      const ppfx = c.pStylePrefix;
+
+      if (ppfx) {
         c.stylePrefix = ppfx + c.stylePrefix;
+      }
 
       selectors = new Selectors(c.selectors, {
-        em: c.em,
+        em,
         config: c,
       });
       selectorTags = new ClassTagsView({
         collection: selectors,
         config: c,
       });
+
+      selectors.on('add', (model) => {
+        em.trigger('selector:add', model);
+      });
+
       return this;
     },
 
     /**
-     * Add the new selector to collection if it's not already exists. Class type is a default one
+     * Add a new selector to collection if it's not already exists. Class type is a default one
      * @param {String} name Selector name
      * @param {Object} opts Selector options
      * @param {String} [opts.label=''] Label for the selector, if it's not provided the label will be the same as the name
@@ -112,10 +120,10 @@ module.exports = config => {
      *   label: 'selectorName'
      * });
      * */
-    add(name, opts) {
-      var obj = opts || {};
-      obj.name = name.name || name;
-      return selectors.add(obj);
+    add(name, opts = {}) {
+      const em = c.em;
+      opts.name = name.name || name;
+      return selectors.add(opts);
     },
 
     /**

src/selector_manager/model/Selector.js

@@ -7,8 +7,19 @@ module.exports = Backbone.Model.extend({
   defaults: {
     name: '',
     label: '',
+
+    // Type of the selector
     type: 'class',
+
+    // If not active it's not selectable by the style manager (uncheckboxed)
     active: true,
+
+    // Can't be seen by the style manager, therefore even by the user
+    // Will be rendered only in export code
+    private: false,
+
+    // If true, can't be removed by the user, from the attacched element
+    protected: false,
   },
 
   initialize() {