array-composer.html

<!--
@license
Copyright (c) 2015 Khaos-Coders. All rights reserved.
This code may only be used under the BSD style license found at http://khaoscoders.github.io/LICENSE.txt
The complete set of authors may be found at http://khaoscoders.github.io/AUTHORS.txt
The complete set of contributors may be found at http://khaoscoders.github.io/CONTRIBUTORS.txt
Code distributed by Khaos-Coders as part of this project is also
subject to an additional IP rights grant found at http://khaoscoders.github.io/PATENTS.txt
-->
<link rel="import" href="../polymer/polymer.html">

<!--
This element helps composing arrays on-the-fly via data-bindings.

Many elements take arrays as parameters, `dom-repeat` for example.
If you can't - or simply don't want to - create the array manually, 
this element is what you need!

Thanks to the nature of data-bindings the array will always contain 
the latest field values.

You can bind up to 10 fields to this element and in return you get 
an one-dimensional array containing all fields values.

Example:
		
		<array-composer array="{{outputArray}}" 
			length="3" 
			f0="[[field0]]" 
			f1="[[field1]]" 
			f2="[[field2]]">
		</array-composer>
 
Use cases:
	
	On the main page, where you can have data-bindings using `dom-bind` 
	template, but can't create arrays to bind to.
	
	Any other case where you're in need of a fast way to compose an array
	from a few fields.
 
@demo
-->

<script>
	
	Polymer({
		
		is: 'array-composer',
		
		properties: {
			
			/**
			 * The output array will be set to this parameter.
			 */
			array: {
				type: Object,
				notify: true,
				readOnly: true
			},
			
			/**
			 * The number of fields in the array.
			 */
			length: {
				value: 0,
				type: Number
			},
			
			/**
			 * First field placed at array index 0
			 */
			f0: {
				type: Object,
				value: null
			},
			
			/**
			 * Second field placed at array index 1
			 */
			f1: {
				type: Object,
				value: null
			},
			
			/**
			 * Third field placed at array index 2
			 */
			f2: {
				type: Object,
				value: null
			},
			
			/**
			 * Fourth field placed at array index 3
			 */
			f3: {
				type: Object,
				value: null
			},
			
			/**
			 * Fifth field placed at array index 4
			 */
			f4: {
				type: Object,
				value: null
			},
			
			/**
			 * Sixth field placed at array index 5
			 */
			f5: {
				type: Object,
				value: null
			},
			
			/**
			 * Seventh field placed at array index 6
			 */
			f6: {
				type: Object,
				value: null
			},
			
			/**
			 * Eighth field placed at array index 7
			 */
			f7: {
				type: Object,
				value: null
			},
			
			/**
			 * Ninth field placed at array index 8
			 */
			f8: {
				type: Object,
				value: null
			},
			
			/**
			 * Tenth field placed at array index 9
			 */
			f9: {
				type: Object,
				value: null
			},
			
			/**
			 * Define the fields which will cause the arrays 
			 * data-binding to be notified on change
			 */
			updateOn: {
				type: String,
				value: 'f0,f1,f2,f3,f4,f5,f6,f7,f8,f9'
			}
		},
		
		observers: [
			'_lengthChanged(length)',
			'_f0Changed(f0)', 
			'_f1Changed(f1)', 
			'_f2Changed(f2)', 
			'_f3Changed(f3)', 
			'_f4Changed(f4)', 
			'_f5Changed(f5)', 
			'_f6Changed(f6)', 
			'_f7Changed(f7)', 
			'_f8Changed(f8)', 
			'_f9Changed(f9)'
		],
		
		_fieldChanged: function(index, value) {
			// Update a field
			if (index<this.length) {
				var arr = new Array(this.length);
			  for(var i=0; i<this.length; i++) {
				  arr[i]=this['f'+i];
			  }
				arr[index]=value;
				if (this.updateOn && this.updateOn.indexOf('f'+index) > -1)
					this._setArray(arr);
			}
		},
		
		_f0Changed: function() { this._fieldChanged(0, this.f0); },
		_f1Changed: function() { this._fieldChanged(1, this.f1); },
		_f2Changed: function() { this._fieldChanged(2, this.f2); },
		_f3Changed: function() { this._fieldChanged(3, this.f3); },
		_f4Changed: function() { this._fieldChanged(4, this.f4); },
		_f5Changed: function() { this._fieldChanged(5, this.f5); },
		_f6Changed: function() { this._fieldChanged(6, this.f6); },
		_f7Changed: function() { this._fieldChanged(7, this.f7); },
		_f8Changed: function() { this._fieldChanged(8, this.f8); },
		_f9Changed: function() { this._fieldChanged(9, this.f9); },
		
		_lengthChanged: function() {
			// Compose fields to array
			var arr = new Array(this.length);
			for(var i=0; i<this.length; i++) {
				arr[i]=this['f'+i];
			}
			// Always update binding
			this._setArray(arr);
		}
	});
	
</script>