Start refactoring style manager with TypeableCollection

src/style_manager/model/Properties.js

@@ -1,6 +1,49 @@
+/*
 var Backbone = require('backbone');
 var Property = require('./Property');
 
 module.exports = Backbone.Collection.extend({
   model: Property,
 });
+*/
+import TypeableCollection from 'domain_abstract/model/TypeableCollection';
+
+module.exports = require('backbone').Collection.extend(TypeableCollection).extend({
+  types: [
+    {
+      id: 'select',
+      model: require('./PropertyRadio'),
+      view: require('./../view/PropertySelectView'),
+      isType(value) {
+        if (value && value.type == 'select') {
+          return value;
+        }
+      }
+    },{
+      id: 'radio',
+      model: require('./PropertyRadio'),
+      view: require('./../view/PropertyRadioView'),
+      isType(value) {
+        if (value && value.type == 'radio') {
+          return value;
+        }
+      }
+    },{
+      id: 'integer',
+      model: require('./PropertyInteger'),
+      view: require('./../view/PropertyIntegerView'),
+      isType(value) {
+        if (value && value.type == 'integer') {
+          return value;
+        }
+      }
+    },{
+      id: 'base',
+      model: require('./Property'),
+      view: require('./../view/PropertyView'),
+      isType(value) {
+        return 1;
+      }
+    }
+  ]
+});

src/style_manager/model/PropertyInteger.js

@@ -1,4 +1,4 @@
-const Property = require('./Component');
+const Property = require('./Property');
 
 module.exports = Property.extend({
 

src/style_manager/model/PropertyRadio.js

@@ -0,0 +1,10 @@
+const Property = require('./Property');
+
+module.exports = Property.extend({
+
+  defaults: Object.assign({}, Property.prototype.defaults, {
+    // Array of options, eg. [{name: 'Label ', value: '100'}]
+    options: [],
+  }),
+
+});

src/style_manager/view/PropertiesView.js

@@ -11,13 +11,13 @@ var PropertyStackView = require('./PropertyStackView');
 module.exports = Backbone.View.extend({
 
   initialize(o) {
-    this.config     = o.config || {};
-    this.pfx       = this.config.stylePrefix || '';
-    this.target      = o.target || {};
+    this.config = o.config || {};
+    this.pfx = this.config.stylePrefix || '';
+    this.target = o.target || {};
     this.propTarget = o.propTarget || {};
-    this.onChange    = o.onChange || {};
-    this.onInputRender  = o.onInputRender || {};
-    this.customValue  = o.customValue || {};
+    this.onChange = o.onChange || {};
+    this.onInputRender = o.onInputRender || {};
+    this.customValue = o.customValue || {};
   },
 
   render() {
@@ -26,6 +26,9 @@ module.exports = Backbone.View.extend({
     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;
@@ -42,6 +45,7 @@ module.exports = Backbone.View.extend({
         case 'stack':
           objView  = PropertyStackView;  break;
       }
+      */
 
       var view = new objView({
         model,

src/style_manager/view/PropertyRadioView.js

@@ -11,7 +11,8 @@ module.exports = PropertyView.extend({
 
   initialize(options) {
     PropertyView.prototype.initialize.apply(this, arguments);
-    this.list = this.model.get('list') || [];
+    const model = this.model;
+    this.list = model.get('list') || model.get('options') || [];
     this.className = this.className + ' '+ this.pfx +'list';
   },
 

src/style_manager/view/PropertySelectView.js

@@ -14,7 +14,8 @@ module.exports = PropertyView.extend({
 
   initialize(options) {
     PropertyView.prototype.initialize.apply(this, arguments);
-    this.list = this.model.get('list') || [];
+    const model = this.model;
+    this.list = model.get('list') || model.get('options') || [];
   },
 
   /** @inheritdoc */