config and WIP with custom form item example

Author: anthonykoerber

src/mm-form/index.html

@@ -87,12 +87,12 @@
 					<mm-input 
 						id="width"
 						placeholder="Width" 
-						validation="int" 
+						validation="int"
 						on-changed="_widthChanged"></mm-input>
 					<mm-input 
 						id="height"
 						placeholder="Height" 
-						validation="int" 
+						validation="int"
 						on-changed="_heightChanged"></mm-input>
 				</mm-group>
 			</template>
@@ -154,6 +154,7 @@
 				label="Select a Dimension"
 				error-message="You need to select dimensions"></special-snowflake>
 		</mm-form>
+				<!-- value='{"width":"300", "height":"250"}' -->
 
 		<script>
 			// special form component to validate assumptions: 
@@ -173,12 +174,6 @@
 							type: Boolean
 						}
 					},
-					_valueChanged: function(oldVal, newVal) {
-						// must fire a changed event:
-						if (newVal) {
-							this.fire('changed', { value: newVal });
-						}
-					},
 					_handleRadioSelected: function(e) {
 						switch (e.detail.item.id) {
 							case 'standardSize':
@@ -191,22 +186,50 @@
 								return;	
 						}
 					},
+					_valueChanged: function(newVal, oldVal) {
+						if (newVal) {
+							this.fire('changed', { value: newVal });
+
+							// set the dropdown if needed
+							if (!this.nonStandardSize) {
+								if (!this.$.standardSizeDdl.value) {
+									this.$.standardSizeDdl.value = String(
+										this.value.width + 'x' + this.value.height
+									);
+								} 
+							} else {
+								this.$.width.value = this.value.width;
+								this.$.height.value = this.value.height;
+							}
+						}
+					},
+
 					_standardSizeChanged: function(e) {
-						// split the dimension and shove into the value Object
-						var dimensions = e.detail.value.split('x');
-						this.value = {
-							width : parseInt(dimensions[0]),
-							height : parseInt(dimensions[1])
-						};
+						var dimensions = e.detail.value.split('x'),
+							width = parseInt(dimensions[0]),
+							height = parseInt(dimensions[1]);
+						this._dimensionsChanged(width, height);
 					},
 					_widthChanged: function(e) {
+						e.preventDefault();
 						if (e.detail.value) {
-							this.value.width = parseInt(e.detail.value);
+							var width = parseInt(e.detail.value),
+								height = this.value ? this.value.height : null;
+							this._dimensionsChanged(width, height);
 						}
 					},
 					_heightChanged: function(e) {
+						e.preventDefault();
 						if (e.detail.value) {
-							this.value.height = parseInt(e.detail.value);
+							var width = this.value ? this.value.width : null,
+								height = parseInt(e.detail.value);
+							this._dimensionsChanged(width, height);
+						}
+					},
+					_dimensionsChanged: function(width, height) {
+						this.value = {
+							width: width,
+							height: height
 						}
 					}
 				});
@@ -216,17 +239,16 @@
 				var testForm = document.querySelector('#testForm');
 				var dimensions = document.querySelector('#dimensions');
 
-				dimensions.value = {
-					width: 300,
-					height: 250
-				};
+				// dimensions.value = {
+				// 	width: 300,
+				// 	height: 250
+				// };
 
 				// add custom validation rules for the dimension component
 				// this would probably be more robust, but this is sufficient
 				testForm.rules.dimensions = function(i) {
-					var isValid = typeof(i.width === 'number') && 
-						typeof(i.height === 'number');
-					return isValid;
+					return i ? typeof(parseInt(i.width) === 'number') && 
+						typeof(parseInt(i.height) === 'number') : false; 
 				}
 
 				testForm.addEventListener('serialize-form', function(e){

src/mm-form/mm-form.html

@@ -26,7 +26,7 @@
 			id="formActions"
 			type="{{footerType}}"
 			message="{{footerMessage}}"
-			message-visible="{{_showFooterMessage}}"
+			message-visible="{{_displayFooterMessage}}"
 			unresolved fitparent semi-transparent>
 
 			<template is="dom-repeat" items="{{actions}}">

src/mm-form/mm-form.js

@@ -51,10 +51,6 @@
 				type: String,
 				notify: true
 			},
-			footerMessage: {
-				type: Boolean,
-				value: true
-			},
 			actions: {
 				type: Array,
 				value: function() {
@@ -77,10 +73,30 @@
 					];
 				}
 			},
+			unsaved: {
+				type: Boolean,
+				value: false,
+				notify: true
+			},
+			showFooterMessages: {
+				type: Boolean,
+				value: true,
+				notify: true
+			},
+			showWarningMessages: {
+				type: Boolean,
+				value: true,
+				notify: true
+			},
 			_showFooterMessage: {
 				type: Boolean,
+				value: false,
 				notify: true
 			},
+			_displayFooterMessage: {
+				type: Boolean,
+				computed: '_displayMessage(_showFooterMessage, showFooterMessages)'
+			}
 		},
 
 		observers: [
@@ -148,6 +164,9 @@
 						errorMsgEle		= null,
 						fieldHeaderEle 	= null,
 						parentEle 		= Polymer.dom(item).parentNode;
+
+					// TODO: multiple property components - how to handle them
+					// is it via a behavior / array, etc.
 
 					// create the label and error message if necessary
 					if (errorMsg) {
@@ -194,33 +213,33 @@
 			e.model.item.callback(e,this);
 		},
 
+		// display footer messaging based on settings
+		_displayMessage: function(_showFooterMessage, showFooterMessages) {
+			return _showFooterMessage && showFooterMessages;
+		},
+
 		// *******************************
 		// handle changes within the form
 		_handleChanged: function(e) {
-			var field = e.target,
-				value = e.detail.value;
+			var name = e.target.getAttribute('name'),
+				item = this.formItems[name];
 
-			// TODO: don't show change warnings flag
-			// check here 
-			if (value) {
-				this._dataUpdate(field, value);
+			if (item && item.field.value) {
+				this._updateData(item.field, item.value);
+				this.unsaved = this._diffData();
 
-				var diff = this._diffData();
-
-				if (diff) {
+				// trigger a warning message in the footer
+				if (this.unsaved && this.showWarningMessages) {
 					this.footerMessage = this.footerMessages.warning;
 					this.footerType = 'warning';
 					this._showFooterMessage = true;
 				}
 			}
 		},
 
-		_dataUpdate: function(field, value) {
+		_updateData: function(field, value) {
 			var name = field.getAttribute('name');
-
-			if (name && this.formData[name]!== undefined) {
-				this.formData[name] = value;
-			}
+			if (name) this.formData[name] = value;
 		},
 
 		_diffData: function() {
@@ -231,7 +250,6 @@
 					diff.push(key);	
 				}
 			}
-
 			return diff.length > 0;
 		},
 
@@ -264,6 +282,9 @@
 					validation		= item.validation,
 					isValid 		= false;
 
+				this._updateData(item.field, value);
+				this.unsaved = this._diffData();
+
 				// validate UI:
 				isValid = this._validateField(validation, value);
 
@@ -282,14 +303,14 @@
 
 			if (invalid.length > 0) {
 				// show messaging in the footer
-				if (this.footerMessage) {
+				if (this.unsaved) {
 					this.footerType = 'error';
 					this.footerMessage = this.footerMessages.error;
 					this._showFooterMessage = true;
 				}
 			} else {
 				// show messaging in the footer
-				if (this.footerMessage) {
+				if (this.unsaved) {
 					this.footerType = 'success';
 					this.footerMessage = this.footerMessages.success;
 					this._showFooterMessage = true;