From dbb2950cfcf3eb8f96e713075a108cd5dd387b43 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Mon, 2 May 2016 13:56:26 +0200
Subject: [PATCH] Add text input property for empty type

---
 src/demo.js                                   |  4 ++++
 .../templates/propertyInput.html              |  4 ++++
 src/style_manager/view/PropertySelectView.js  | 20 ++++++++++---------
 src/style_manager/view/PropertyView.js        | 17 +++++++++++-----
 styles/css/main.css                           |  2 +-
 styles/scss/main.scss                         |  2 +-
 test/specs/style_manager/view/PropertyView.js | 11 ++++++----
 7 files changed, 40 insertions(+), 20 deletions(-)
 create mode 100644 src/style_manager/templates/propertyInput.html

diff --git a/src/demo.js b/src/demo.js
index d0a773ddf..9aa83c1df 100644
--- a/src/demo.js
+++ b/src/demo.js
@@ -317,6 +317,10 @@ require(['src/config/require-config.js'], function() {
 				sectors: [{
 					name: 'General',
 					properties:[{
+							name		: 'Test',
+							property	: 'test',
+							defaults 	: 'testDef',
+						},{
 							name		: 'Alignment',
 							property	: 'float',
 							type		: 'radio',
diff --git a/src/style_manager/templates/propertyInput.html b/src/style_manager/templates/propertyInput.html
new file mode 100644
index 000000000..b07ba910f
--- /dev/null
+++ b/src/style_manager/templates/propertyInput.html
@@ -0,0 +1,4 @@
+<div class="<%= pfx %>field <%= pfx %>input">
+	<span id='<%= pfx %>input-holder'></span>
+</div>
+<div style="clear:both"></div>
\ No newline at end of file
diff --git a/src/style_manager/view/PropertySelectView.js b/src/style_manager/view/PropertySelectView.js
index c37b80518..1305c340c 100644
--- a/src/style_manager/view/PropertySelectView.js
+++ b/src/style_manager/view/PropertySelectView.js
@@ -1,30 +1,32 @@
-define(['backbone','./PropertyView', 'text!./../templates/propertySelect.html'], 
+define(['backbone','./PropertyView', 'text!./../templates/propertySelect.html'],
 	function (Backbone, PropertyView, propertyTemplate) {
-	/** 
+	/**
 	 * @class PropertySelectView
 	 * */
 	return PropertyView.extend({
-		
+
 		template: _.template(propertyTemplate),
-		
+
 		/** @inheritdoc */
 		renderInput: function() {
 			var pfx	= this.pfx;
 			if(!this.$input){
 				if(this.list && this.list.length){
 					this.input = '<select>';
+
 					_.each(this.list,function(el){
-						var name 		= el.name ? el.name : el.value;
-						var style 		= el.style ? el.style.replace(/"/g,'&quot;') : '';  
-						this.input 		+= '<option value="'+el.value.replace(/"/g,'&quot;')+'" style="'+style+'">'+name+'</option>';
+						var name = el.name ? el.name : el.value;
+						var style = el.style ? el.style.replace(/"/g,'&quot;') : '';
+						this.input += '<option value="'+el.value.replace(/"/g,'&quot;')+'" style="'+style+'">'+name+'</option>';
 					},this);
+
 					this.input 	+= '</select>';
 					this.$input = $(this.input);
-					this.$el.find('#'+ pfx +'input-holder').html(this.$input); 
+					this.$el.find('#'+ pfx +'input-holder').html(this.$input);
 				}
 			}
 			this.setValue(this.componentValue, 0);
-		}, 
+		},
 
 	});
 });
diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js
index 292894f2a..c4ed24971 100644
--- a/src/style_manager/view/PropertyView.js
+++ b/src/style_manager/view/PropertyView.js
@@ -1,12 +1,12 @@
-define(['backbone', 'text!./../templates/propertyLabel.html'],
-	function (Backbone, propertyTemplate) {
+define(['backbone', 'text!./../templates/propertyLabel.html', 'text!./../templates/propertyInput.html'],
+	function (Backbone, propertyLabel, propertyTemplate) {
 	/**
 	 * @class PropertyView
 	 * */
 	return Backbone.View.extend({
 
 		template: _.template(propertyTemplate),
-		templateLabel: _.template(propertyTemplate),
+		templateLabel: _.template(propertyLabel),
 
 		events:			{
 				'change' : 'valueChanged',
@@ -30,6 +30,7 @@ define(['backbone', 'text!./../templates/propertyLabel.html'],
 			this.list = this.model.get('list');
 			this.input = this.$input = null;
 			this.className = this.pfx  + 'property';
+			this.inputHolderId = '#' + this.pfx + 'input-holder';
 			this.listenTo( this.propTarget, 'update', this.targetUpdated);
 			this.listenTo( this.model ,'change:value', this.valueChanged);
 		},
@@ -169,7 +170,7 @@ define(['backbone', 'text!./../templates/propertyLabel.html'],
 				icon	: this.model.get('icon'),
 				info	: this.model.get('info'),
 				label	: this.model.get('name'),
-			}) );
+			}));
 		},
 
 		/**
@@ -197,7 +198,13 @@ define(['backbone', 'text!./../templates/propertyLabel.html'],
 		 * Renders input, to override
 		 * */
 		renderInput: function(){
-			console.warn("No render input implemented for '"+this.model.get('type')+"'");
+			if(!this.$input){
+				this.$input = $('<input>', {
+					placeholder: this.defaultValue,
+					type: 'text'
+				});
+				this.$el.find(this.inputHolderId).html(this.$input);
+			}
 		},
 
 		/**
diff --git a/styles/css/main.css b/styles/css/main.css
index a3f96eada..e1faf3a04 100644
--- a/styles/css/main.css
+++ b/styles/css/main.css
@@ -3030,7 +3030,7 @@ ol.example li.placeholder:before {
       bottom: 4px; }
     .wte-sm-sector .wte-sm-field .wte-sm-d-s-arrow, .wte-clm-tags .wte-sm-field .wte-sm-d-s-arrow, .wte-sm-sector .wte-clm-field .wte-sm-d-s-arrow, .wte-clm-tags .wte-clm-field .wte-sm-d-s-arrow, .wte-sm-sector .wte-sm-field .wte-clm-d-s-arrow, .wte-clm-tags .wte-sm-field .wte-clm-d-s-arrow, .wte-sm-sector .wte-clm-field .wte-clm-d-s-arrow, .wte-clm-tags .wte-clm-field .wte-clm-d-s-arrow {
       bottom: 7px; }
-    .wte-sm-sector .wte-sm-field.wte-sm-integer, .wte-clm-tags .wte-sm-field.wte-sm-integer, .wte-sm-sector .wte-sm-integer.wte-clm-field, .wte-clm-tags .wte-sm-integer.wte-clm-field, .wte-clm-tags #wte-clm-tags-field, .wte-sm-sector .wte-sm-field.wte-sm-select, .wte-clm-tags .wte-sm-field.wte-sm-select, .wte-sm-sector .wte-sm-select.wte-clm-field, .wte-clm-tags .wte-sm-select.wte-clm-field, .wte-sm-sector .wte-clm-select, .wte-clm-tags .wte-clm-select, .wte-sm-sector .wte-sm-field.wte-sm-list, .wte-clm-tags .wte-sm-field.wte-sm-list, .wte-sm-sector .wte-sm-list.wte-clm-field, .wte-clm-tags .wte-sm-list.wte-clm-field, .wte-sm-sector .wte-sm-field.wte-sm-color, .wte-clm-tags .wte-sm-field.wte-sm-color, .wte-sm-sector .wte-sm-color.wte-clm-field, .wte-clm-tags .wte-sm-color.wte-clm-field, .wte-sm-sector .wte-sm-field.wte-sm-composite, .wte-clm-tags .wte-sm-field.wte-sm-composite, .wte-sm-sector .wte-sm-composite.wte-clm-field, .wte-clm-tags .wte-sm-composite.wte-clm-field {
+    .wte-sm-sector .wte-sm-field.wte-sm-integer, .wte-clm-tags .wte-sm-field.wte-sm-integer, .wte-sm-sector .wte-sm-integer.wte-clm-field, .wte-clm-tags .wte-sm-integer.wte-clm-field, .wte-clm-tags #wte-clm-tags-field, .wte-sm-sector .wte-sm-field.wte-sm-select, .wte-clm-tags .wte-sm-field.wte-sm-select, .wte-sm-sector .wte-sm-select.wte-clm-field, .wte-clm-tags .wte-sm-select.wte-clm-field, .wte-sm-sector .wte-clm-select, .wte-clm-tags .wte-clm-select, .wte-sm-sector .wte-sm-field.wte-sm-list, .wte-clm-tags .wte-sm-field.wte-sm-list, .wte-sm-sector .wte-sm-list.wte-clm-field, .wte-clm-tags .wte-sm-list.wte-clm-field, .wte-sm-sector .wte-sm-field.wte-sm-color, .wte-clm-tags .wte-sm-field.wte-sm-color, .wte-sm-sector .wte-sm-color.wte-clm-field, .wte-clm-tags .wte-sm-color.wte-clm-field, .wte-sm-sector .wte-sm-field.wte-sm-composite, .wte-clm-tags .wte-sm-field.wte-sm-composite, .wte-sm-sector .wte-sm-composite.wte-clm-field, .wte-clm-tags .wte-sm-composite.wte-clm-field, .wte-sm-sector .wte-sm-field.wte-sm-input, .wte-clm-tags .wte-sm-field.wte-sm-input, .wte-sm-sector .wte-sm-input.wte-clm-field, .wte-clm-tags .wte-sm-input.wte-clm-field {
       background-color: #333333;
       /*353535*/
       border: 1px solid #292929;
diff --git a/styles/scss/main.scss b/styles/scss/main.scss
index be69bfc65..a01c0aea9 100644
--- a/styles/scss/main.scss
+++ b/styles/scss/main.scss
@@ -533,7 +533,7 @@ $arrowColor:		darken($fontColor,24%); /*b1b1b1*/
 		}
 		.#{$sm-prefix}d-s-arrow, .#{$clm-prefix}d-s-arrow{ bottom: 7px; }
 
-	 	&.#{$sm-prefix}integer, &.#{$sm-prefix}select, &.#{$sm-prefix}list, &.#{$sm-prefix}color, &.#{$sm-prefix}composite {
+	 	&.#{$sm-prefix}integer, &.#{$sm-prefix}select, &.#{$sm-prefix}list, &.#{$sm-prefix}color, &.#{$sm-prefix}composite, &.#{$sm-prefix}input {
 		  background-color: darken($mainDkColor, 2.5%);/*353535*/
 		  border: 1px solid darken($mainDkColor, 6.5%);/*292929*/
 		  box-shadow: 1px 1px 0 lighten($mainDkColor, 11.5%);/*575757*/
diff --git a/test/specs/style_manager/view/PropertyView.js b/test/specs/style_manager/view/PropertyView.js
index 02093aaba..7ce713512 100644
--- a/test/specs/style_manager/view/PropertyView.js
+++ b/test/specs/style_manager/view/PropertyView.js
@@ -41,10 +41,13 @@ define([path + 'PropertyView', 'StyleManager/model/Property', 'DomComponents/mod
               prop.querySelector('.label').should.be.ok;
             });
 
-            it('Rendered correctly', function() {
-              var prop = view.el;
-              $fixture.get(0).querySelector('.property').should.be.ok;
-              prop.querySelector('.label').should.be.ok;
+            it.skip('Update target on value change', function() {
+            });
+
+            it.skip('Update value on target swap', function() {
+            });
+
+            it.skip('Get target style', function() {
             });
 
         });