Implemented TypeableCollection in StyleManager

src/style_manager/model/Properties.js

@@ -7,10 +7,47 @@ module.exports = Backbone.Collection.extend({
 });
 */
 import TypeableCollection from 'domain_abstract/model/TypeableCollection';
+const Property = require('./Property');
 
 module.exports = require('backbone').Collection.extend(TypeableCollection).extend({
   types: [
     {
+      id: 'stack',
+      model: require('./PropertyStack'),
+      view: require('./../view/PropertyStackView'),
+      isType(value) {
+        if (value && value.type == 'stack') {
+          return value;
+        }
+      }
+    },{
+      id: 'composite',
+      model: require('./PropertyComposite'),
+      view: require('./../view/PropertyCompositeView'),
+      isType(value) {
+        if (value && value.type == 'composite') {
+          return value;
+        }
+      }
+    },{
+      id: 'file',
+      model: Property,
+      view: require('./../view/PropertyFileView'),
+      isType(value) {
+        if (value && value.type == 'file') {
+          return value;
+        }
+      }
+    },{
+      id: 'color',
+      model: Property,
+      view: require('./../view/PropertyColorView'),
+      isType(value) {
+        if (value && value.type == 'color') {
+          return value;
+        }
+      }
+    },{
       id: 'select',
       model: require('./PropertyRadio'),
       view: require('./../view/PropertySelectView'),
@@ -39,7 +76,7 @@ module.exports = require('backbone').Collection.extend(TypeableCollection).exten
       }
     },{
       id: 'base',
-      model: require('./Property'),
+      model: Property,
       view: require('./../view/PropertyView'),
       isType(value) {
         return 1;

src/style_manager/model/Property.js

@@ -7,20 +7,20 @@ module.exports = Backbone.Model.extend({
     name: '',
     property: '',
     type: '',
-    units: [],
-    unit: '',
+    units: [], // int
+    unit: '', // int
     defaults: '',
     info: '',
     value: '',
     icon: '',
-    preview: false,
-    detached: false,
+    preview: false, // stack
+    detached: false, // composite
     visible: true,
     functionName: '',
     status: '',
-    properties: [],
-    layers: [],
-    list: [],
+    properties: [], // composite
+    layers: [], // stack
+    list: [], // select/radio
     fixedValues: ['initial', 'inherit'],
   },
 

src/style_manager/model/PropertyComposite.js

@@ -0,0 +1,21 @@
+const Property = require('./Property');
+
+module.exports = Property.extend({
+
+  defaults: Object.assign({}, Property.prototype.defaults, {
+    // 'background' is a good example where to make a difference
+    // between detached and not
+    //
+    // - NOT detached (default)
+    // background: url(..) no-repeat center ...;
+    // - Detached
+    // background-image: url();
+    // background-repeat: repeat;
+    // ...
+    detached: 0,
+
+    // Array of sub properties
+    properties: [],
+  }),
+
+});

src/style_manager/model/PropertyStack.js

@@ -0,0 +1,12 @@
+const Property = require('./PropertyComposite');
+
+module.exports = Property.extend({
+
+  defaults: Object.assign({}, Property.prototype.defaults, {
+    // Array of layers (which contain properties)
+    layers: [],
+    // Layer preview
+    preview: 0,
+  }),
+
+});

src/style_manager/view/PropertiesView.js

@@ -23,31 +23,8 @@ module.exports = Backbone.View.extend({
   render() {
     var fragment = document.createDocumentFragment();
 
-    this.collection.each(function(model){
-      var objView  = PropertyView;
-
-      console.log(`property ${model.get('property')}, type:  ${model.get('type')}, ${model.typeView}`);
-      objView = model.typeView;
-      /*
-      switch(model.get('type')){
-        case 'integer':
-          objView  = PropertyIntegerView;   break;
-        case 'radio':
-          objView  = PropertyRadioView;  break;
-        case 'select':
-          objView  = PropertySelectView;  break;
-        case 'color':
-          objView  = PropertyColorView;  break;
-        case 'file':
-          objView  = PropertyFileView;    break;
-        case 'composite':
-          objView  = PropertyCompositeView;break;
-        case 'stack':
-          objView  = PropertyStackView;  break;
-      }
-      */
-
-      var view = new objView({
+    this.collection.each((model) => {
+      var view = new model.typeView({
         model,
         name: model.get('name'),
         id: this.pfx + model.get('property'),
@@ -63,7 +40,7 @@ module.exports = Backbone.View.extend({
       }
 
       fragment.appendChild(view.render().el);
-    },this);
+    });
 
     this.$el.append(fragment);
     this.$el.append($('<div>', {class: "clear"}));