From 5ce87fd32251fe481571418aef2e0e4df61a9780 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Tue, 18 Oct 2016 14:43:34 +0200
Subject: [PATCH] Update trait views

---
 src/trait_manager/model/Trait.js          |  2 ++
 src/trait_manager/model/TraitFactory.js   | 11 +++++++++++
 src/trait_manager/view/TraitSelectView.js |  8 ++++++++
 src/trait_manager/view/TraitView.js       |  8 +++++---
 4 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/trait_manager/model/Trait.js b/src/trait_manager/model/Trait.js
index cf972a4e0..acedf1b8a 100644
--- a/src/trait_manager/model/Trait.js
+++ b/src/trait_manager/model/Trait.js
@@ -9,6 +9,8 @@ define(['backbone'],
         name: '',
         value: '',
 				target: '',
+				default: '',
+				placeholder: '',
         options: [],
 			},
 
diff --git a/src/trait_manager/model/TraitFactory.js b/src/trait_manager/model/TraitFactory.js
index 05dbc9bf5..ebbe06e2f 100644
--- a/src/trait_manager/model/TraitFactory.js
+++ b/src/trait_manager/model/TraitFactory.js
@@ -27,6 +27,17 @@ define(['backbone'],
                 break;
             }
 
+            // Define placeholder
+            switch (prop) {
+              case 'title': case 'alt': case 'id':
+                obj.placeholder = 'eg. Text here';
+                break;
+              case 'href':
+                obj.placeholder = 'eg. https://google.com';
+                break;
+            }
+
+
             // Define options
             switch (prop) {
               case 'target':
diff --git a/src/trait_manager/view/TraitSelectView.js b/src/trait_manager/view/TraitSelectView.js
index b76203199..040a1f00a 100644
--- a/src/trait_manager/view/TraitSelectView.js
+++ b/src/trait_manager/view/TraitSelectView.js
@@ -3,6 +3,14 @@ define(['backbone','./TraitView'],
 
 	return TraitView.extend({
 
+		initialize: function(o) {
+			TraitView.prototype.initialize.apply(this, arguments);
+			var ppfx = this.ppfx;
+			this.fieldClass += ' ' + ppfx + 'select';
+			this.tmpl = '<div class="' + this.fieldClass +'"><div class="' + this.inputhClass +'"></div>'+
+			'<div class="' + ppfx + 'sel-arrow"><div class="' + ppfx + 'd-s-arrow"></div></div> </div>';
+		},
+
     /**
 		 * Returns input element
 		 * @return {HTMLElement}
diff --git a/src/trait_manager/view/TraitView.js b/src/trait_manager/view/TraitView.js
index e599467e6..e21f00ea4 100644
--- a/src/trait_manager/view/TraitView.js
+++ b/src/trait_manager/view/TraitView.js
@@ -17,6 +17,7 @@ define(['backbone'], function (Backbone) {
 			this.inputhClass = this.ppfx + 'input-holder';
 			this.model.off('change:value', this.onValueChange);
 			this.listenTo(this.model, 'change:value', this.onValueChange);
+			this.tmpl = '<div class="' + this.fieldClass +'"><div class="' + this.inputhClass +'"></div></div>';
 		},
 
 		/**
@@ -65,10 +66,11 @@ define(['backbone'], function (Backbone) {
 		 */
 		getInputEl: function() {
 			if(!this.$input){
+				var md = this.model;
 				this.$input = $('<input>', {
-					placeholder: this.model.get('defaults'),
+					placeholder: md.get('placeholder') || md.get('default'),
 					type: 'text',
-					value: this.model.get('value')
+					value: md.get('value')
 				});
 			}
 			return this.$input.get(0);
@@ -80,7 +82,7 @@ define(['backbone'], function (Backbone) {
 		 * */
 		renderField: function(){
 			if(!this.$input){
-				this.$el.append('<div class="' + this.fieldClass +'"><div class="' + this.inputhClass +'"></div></div>');
+				this.$el.append(this.tmpl);
 				var el = this.getInputEl();
 				this.$el.find('.' + this.inputhClass).html(el);
 			}