From 7996f37352432ec02cd265fc2c3a6fa6f9c365b8 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Wed, 5 Oct 2016 14:33:37 +0200
Subject: [PATCH] Add traits to components

---
 src/config/require-config.js            |  3 ++-
 src/demo.js                             |  9 ++++++++-
 src/dom_components/model/Component.js   |  5 +++--
 src/trait_manager/main.js               |  2 +-
 src/trait_manager/model/TraitFactory.js |  2 +-
 src/trait_manager/model/Traits.js       | 15 ++++++++++-----
 src/trait_manager/view/TraitView.js     | 12 ++++++++----
 7 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/src/config/require-config.js b/src/config/require-config.js
index c2769fe87..97343826d 100644
--- a/src/config/require-config.js
+++ b/src/config/require-config.js
@@ -37,6 +37,7 @@ require.config({
 								{  name: 'Editor', 					location: 'editor', 					},
 		            {  name: 'AssetManager', 		location: 'asset_manager', 		},
 		            {  name: 'BlockManager', 		location: 'block_manager', 		},
+								{  name: 'TraitManager', 		location: 'trait_manager', 		},
 		            {  name: 'StyleManager', 		location: 'style_manager', 		},
 		            {  name: 'DeviceManager', 	location: 'device_manager', 	},
 		            {  name: 'StorageManager', 	location: 'storage_manager', 	},
@@ -54,4 +55,4 @@ require.config({
 		            {  name: 'Parser',					location: 'parser',						},
 		            {  name: 'Utils', 					location: 'utils', 						}
 	]
-});
\ No newline at end of file
+});
diff --git a/src/demo.js b/src/demo.js
index 08f79d058..6265bf7d3 100644
--- a/src/demo.js
+++ b/src/demo.js
@@ -9,7 +9,14 @@ require(['config/require-config'], function() {
       noticeOnUnload: 0,
 			container	: '#gjs',
 			height: '100%',
-			fromElement: true,
+			//fromElement: true,
+			components: [{
+				style:{
+					width:'100px',
+					height:'100px'
+				},
+				traits: ['title']
+			}],
 			storageManager:{ autoload: 0},
 
 			commands: 		{
diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js
index 9ebcad9e0..462486df6 100644
--- a/src/dom_components/model/Component.js
+++ b/src/dom_components/model/Component.js
@@ -1,5 +1,5 @@
-define(['backbone','./Components', 'SelectorManager/model/Selectors'],
-	function (Backbone, Components, Selectors) {
+define(['backbone','./Components', 'SelectorManager/model/Selectors', 'TraitManager/model/Traits'],
+	function (Backbone, Components, Selectors, Traits) {
 
 		return Backbone.Model.extend({
 
@@ -35,6 +35,7 @@ define(['backbone','./Components', 'SelectorManager/model/Selectors'],
 				this.components	= new Components(this.defaultC, opt);
 				this.set('components', this.components);
 				this.set('classes', new Selectors(this.defaultCl));
+				this.set('traits', new Traits(this.get('traits'), this));
 			},
 
 			/**
diff --git a/src/trait_manager/main.js b/src/trait_manager/main.js
index b8ea3b439..613b821d6 100644
--- a/src/trait_manager/main.js
+++ b/src/trait_manager/main.js
@@ -32,7 +32,7 @@ define(function(require) {
 					c.stylePrefix = ppfx + c.stylePrefix;
 
 				sectors = new Traits(c.traits);
-	  		SectView 	= new SectorsView({
+	  		TraitView = new TraitsView({
 					collection: sectors,
 					target: c.em,
 				  config: c,
diff --git a/src/trait_manager/model/TraitFactory.js b/src/trait_manager/model/TraitFactory.js
index bcb97e698..5c4719017 100644
--- a/src/trait_manager/model/TraitFactory.js
+++ b/src/trait_manager/model/TraitFactory.js
@@ -28,5 +28,5 @@ define(['backbone'],
 
       };
 
-    };
+    }();
 });
diff --git a/src/trait_manager/model/Traits.js b/src/trait_manager/model/Traits.js
index b69610335..6660704de 100644
--- a/src/trait_manager/model/Traits.js
+++ b/src/trait_manager/model/Traits.js
@@ -1,15 +1,20 @@
-define(['backbone','./Trait'],
-  function (Backbone, Trait) {
+define(['backbone','./Trait', './TraitFactory'],
+  function (Backbone, Trait, TraitFactory) {
 
     return Backbone.Collection.extend({
 
       model: Trait,
 
       add: function(models, opt){
-				if(typeof models === 'string'){
-	         //TraitFactory('href')  <-- cache it
+        // Use TraitFactory if necessary
+				if(typeof models === 'string' || models instanceof Array){
+          if(typeof models === 'string')
+            models = [models];
+          for(var i = 0, len = models.length; i < len; i++){
+            var model = models[i];
+            models[i] = TraitFactory.build(model)[0];
+          }
 				}
-
 				return Backbone.Collection.prototype.add.apply(this, [models, opt]);
 			},
 
diff --git a/src/trait_manager/view/TraitView.js b/src/trait_manager/view/TraitView.js
index 0ddda7e62..ebf925de2 100644
--- a/src/trait_manager/view/TraitView.js
+++ b/src/trait_manager/view/TraitView.js
@@ -11,16 +11,20 @@ define(['backbone'], function (Backbone) {
 			this.pfx = this.config.stylePrefix || '';
 		},
 
+		onChange: function() {
+			//change model value
+		},
+
 		/**
 		 * On change callback
-		 * @param {Object} el Test
 		 * @private
 		 */
-		onChange: function(elView) { //<-- TraitRenderer
+		onValuesChange: function() {
 			var m = this.model;
-			var attrs = elView.model.get('attributes');
+			var trg = m.target;
+			var attrs = trg.get('attributes');
 			attrs[m.get('name')] = m.get('value');
-			elView.model.set('attributes', attrs);
+			trg.set('attributes', attrs);
 		},
 
 		/**