mm-form wip

MediaMath · Mar 2, 2016 · 25ec4d5 · 25ec4d5
1 parent bebf208
commit 25ec4d5
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 31 deletions.
diff --git a/bower.json b/bower.json
@@ -40,7 +40,7 @@
     "polymer": "Polymer/polymer#1.2.3",
     "webcomponentsjs": "webcomponents/webcomponentsjs#0.7.19",
     "zousan": "~1.3.0",
-	"validator-js" : "~4.4.0"
+    "validator-js" : "~4.4.0"
   },
   "devDependencies": {
     "web-component-tester": "~3.3.22",

diff --git a/src/mm-form/index.html b/src/mm-form/index.html
@@ -147,11 +147,13 @@
 			<!-- row 2 -->
 			<div class="col" span="1">
 			<special-snowflake
+				id="dimensions"
 				unresolved
-				name="snowflake"
+				name="dimensions"
 				validation="dimensions|empty"
 				label="Select a Dimension"
-				error-message="You need to select a dimension"></special-snowflake>
+				value='{"width":"300", "height":"250"}'
+				error-message="You need to select dimensions"></special-snowflake>
 		</mm-form>
 
 		<script>
@@ -168,9 +170,9 @@
 							notify: true,
 							value: function() {
 								return {
-									width: null,
-									height: null
-								}
+									width:null,
+									height:null
+								};
 							},
 							observer: "_valueChanged"
 						},
@@ -223,7 +225,7 @@
 				testForm.rules.dimensions = function(i) {
 					var isValid = typeof(i.width === 'number') && 
 						typeof(i.height === 'number');
-					return i.width !== null && i.height !== null;
+					return isValid;
 				}
 
 				testForm.addEventListener('serialize-form', function(e){

diff --git a/src/mm-form/mm-form.js b/src/mm-form/mm-form.js
@@ -133,10 +133,8 @@
 
 		// *******************************
 		// collect all the things (and data)
-		ready: function() {
+		attached: function() {
 			// build form data object
-			// TODO: consider effective children apis once we get to v1.2.3
-			// https://www.polymer-project.org/1.0/docs/devguide/local-dom.html#effective-children
 			this.async(function() {
 				var formFields = Polymer.dom(this).querySelectorAll('[name]');
 
@@ -148,21 +146,19 @@
 						validation 		= item.getAttribute('validation'),
 						errorMsg 		= item.getAttribute('error-message'),
 						errorMsgEle		= null,
-						fieldHeaderEle 	= null;
+						fieldHeaderEle 	= null,
+						parentEle 		= Polymer.dom(item).parentNode;
 
 					// create the label and error message if necessary
 					if (errorMsg) {
-						var parentEle = Polymer.dom(item).parentNode;
-
 						errorMsgEle = new Strand.FormMessage();
 						errorMsgEle.message = errorMsg;
 						errorMsgEle.type = 'error';
 						Polymer.dom(parentEle).appendChild(errorMsgEle);
 					}
 
 					if (label) {
-						var parentEle = Polymer.dom(item).parentNode,
-							headerTxt = document.createTextNode(label);
+						var headerTxt = document.createTextNode(label);
 
 						fieldHeaderEle = new Strand.Header();
 						fieldHeaderEle.size = 'medium';
@@ -171,7 +167,7 @@
 					}
 
 					// store the form data, hold on to the initial settings
-					// for cross reference diff later 
+					// for cross reference diff later
 					this.formData[key] = this._initialFormData[key] = value;
 
 					// store the form items and related data/elements
@@ -204,6 +200,8 @@
 			var field = e.target,
 				value = e.detail.value;
 
+			// TODO: don't show change warnings flag
+			// check here 
 			if (value) {
 				this._dataUpdate(field, value);
 
@@ -219,9 +217,8 @@
 
 		_dataUpdate: function(field, value) {
 			var name = field.getAttribute('name');
-
-			// can be triggered prior to the 'ready' method, where formData is created
-			if (name && this.formData[name]) {
+
+			if (name && this.formData[name]!== undefined) {
 				this.formData[name] = value;
 			}
 		},
@@ -246,7 +243,6 @@
 			var testSet = validation.replace(/\s/g, '').split("|"),
 				result = [];
 
-			// attempt with validate-js
 			result = testSet.map(function(item) {
 				return this.rules[item](value);
 			}, this).filter(function(item) {
@@ -261,7 +257,7 @@
 				valid = [];
 
 			// UI validation pass:
-			// console.log('submitForm');
+			// console.log('serializeForm');
 			for (var key in this.formData) {
 				var item 			= this.formItems[key]
 					value 			= item.field.value,
@@ -284,24 +280,14 @@
 				item.field.error = !isValid;
 			}
 
-			// TODO:
 			if (invalid.length > 0) {
-
 				// show messaging in the footer
 				if (this.footerMessage) {
 					this.footerType = 'error';
 					this.footerMessage = this.footerMessages.error;
 					this._showFooterMessage = true;
 				}
 			} else {
-
-				// send the data to some endpoint
-				// handle that response
-
-				// reconfigure based on the response - display more error messaging
-				// or change the error messaging, etc - for if backend error wasn't
-				// caught on the UI validation pass				
-
 				// show messaging in the footer
 				if (this.footerMessage) {
 					this.footerType = 'success';
@@ -318,6 +304,14 @@
 				data: this.formData 
 			});
 		},
+
+		// *******************************
+		// TODO: handle the response data object
+		// should be some key value pairs (same)
+
+		// reconfigure based on the response - display more error messaging
+		// or change the error messaging, etc - for if backend error wasn't
+		// caught on the UI validation pass				
 
 		// *******************************
 		// TODO: replace with a behavior/component if this is something