Add the possibility to add custom StyleManager Types

src/style_manager/index.js

@@ -7,6 +7,9 @@
  * * [getProperty](#getproperty)
  * * [getProperties](#getproperties)
  * * [getModelToStyle](#getmodeltostyle)
+ * * [addType](#addtype)
+ * * [getType](#gettype)
+ * * [getTypes](#gettypes)
  * * [render](#render)
  *
  * With Style Manager you basically build categories (called sectors) of CSS properties which could
@@ -52,7 +55,9 @@ module.exports = () => {
   var c = {},
   defaults = require('./config/config'),
   Sectors = require('./model/Sectors'),
+  Properties = require('./model/Properties'),
   SectorsView = require('./view/SectorsView');
+  let properties;
   var sectors, SectView;
 
   return {
@@ -88,6 +93,7 @@ module.exports = () => {
       if(ppfx)
         c.stylePrefix = ppfx + c.stylePrefix;
 
+      properties = new Properties();
       sectors = new Sectors(c.sectors);
       SectView   = new SectorsView({
         collection: sectors,
@@ -252,6 +258,44 @@ module.exports = () => {
       return model;
     },
 
+    /**
+     * Add new property type
+     * @param {string} id Type ID
+     * @param {Object} definition Definition of the type. Each definition contains
+     *                            `model` (business logic), `view` (presentation logic)
+     *                            and `isType` function which recognize the type of the
+     *                            passed entity
+     * addType('my-type', {
+     *  model: {},
+     *  view: {},
+     *  isType: (value) => {
+     *    if (value && value.type == 'my-type') {
+     *      return value;
+     *    }
+     *  },
+     * })
+     */
+    addType(id, definition) {
+      properties.addType(id, definition);
+    },
+
+    /**
+     * Get type
+     * @param {string} id Type ID
+     * @return {Object} Type definition
+     */
+    getType(id) {
+      return properties.getType(id);
+    },
+
+    /**
+     * Get all types
+     * @return {Array}
+     */
+    getTypes() {
+      return properties.getTypes();
+    },
+
     /**
      * Render sectors and properties
      * @return  {HTMLElement}

src/style_manager/model/Sectors.js

@@ -1,6 +1,5 @@
-var Backbone = require('backbone');
-var Sector = require('./Sector');
+const Sector = require('./Sector');
 
-module.exports = Backbone.Collection.extend({
+module.exports = require('backbone').Collection.extend({
 	model: Sector,
 });

src/style_manager/view/SectorsView.js

@@ -117,9 +117,8 @@ module.exports = Backbone.View.extend({
    * */
   addToCollection(model, fragmentEl) {
     var fragment = fragmentEl || null;
-    var viewObject = SectorView;
 
-    var view = new viewObject({
+    var view = new SectorView({
       model,
       id: this.pfx + model.get('name').replace(' ','_').toLowerCase(),
       name: model.get('name'),