fd-polymer-properties.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../core-icon/core-icon.html">
<link rel="import" href="../core-icons/core-icons.html">

<polymer-element name="fd-properties" attributes="properties">
<template>
	<style>

		:host {
			display: block;
			width: 100%;
		}

		.fd-prop-name{
			background-color: green;
			color: white;
			border-radius: 5px;
			margin: 0px 5px;
			padding: 1px 2px;
		}

		.fd-prop-value{
			background-color: yellow;
			color: #444;
			border-radius: 5px;
			border:none;
			margin: 1px 1px;
		}

		.fd-pm-icon{
			border-radius: 50%;
        border: 2px solid #444;
        color: #444;
		}
	</style>
	<div layout vertical right>
		<div >{{'properties' | translate}}:</div>
		<template repeat="{{item in items}}">
		<div layout horizontal left>
			<div class="fd-prop-name">{{item}}</div>
			 =
			<div class="fd-prop-value">
				<input id="{{item}}" 
					type="text" class="fd-prop-value" 
					value="{{properties[item]}}" size="{{properties[item].length}}" 
					on-blur="{{updatePropValue}}">
				</input>
			</div>
		<core-icon class="fd-pm-icon" icon="delete" on-tap="{{delProp}}" data="{{item}}">             
        </core-icon>
		</div>
		</template>
		<!-- new property -->
		<div layout horizontal left>
			<div class="fd-prop-name">
				<input id="newPropName" 
					type="text" class="fd-prop-name"/>
			</div>
				 =
			<div class="fd-prop-value">
				<input id="newPropValue"
					type="text" class="fd-prop-value"/>
			</div>
			<core-icon class="fd-pm-icon" icon="add" on-tap="{{addProp}}">             
	        </core-icon>
		</div>	
		
	</div>
</template>
<script>
	Polymer("fd-properties",{
    items: undefined,
    updateItems: function(){ 
    	if (!!this.properties){
    		this.items = Object.keys(this.properties);	
    	}
    },
    propertiesChanged: function(){
    	this.updateItems();
    },
    // filter function to use in looping objects
  	delProp: function(e,d,t){
     	toBeRemoved=t.attributes['data'].value;
     	delete this.properties[toBeRemoved];
     	this.updateItems();
  	},
  	addProp: function(){
  		this.properties[this.$.newPropName.value] = this.$.newPropValue.value;
	  	this.updateItems();
	  	this.$.newPropName.value = "";
	  	this.$.newPropValue.value = "";
  	},
  	updatePropValue: function(e,d,target){
		var id = target.attributes['id'].value;
		this.properties[id].value=target.value;
  	}
});
</script>
</polymer-element>