last commit before switching gears

- make columnable behavior
MediaMath · Mar 2, 2016 · 028b876 · 028b876
1 parent a4ba778
commit 028b876
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 56 deletions.
diff --git a/src/mm-form/index.html b/src/mm-form/index.html
@@ -102,7 +102,6 @@
 					validation="int|empty"
 					placeholder="Type a Number"
 					label="Type a Number"
-					value="something"
 					error-message="You need to type a number"></mm-input>
 			</div>
 			<div class="col" span="1">
@@ -119,7 +118,7 @@
 					<mm-list-item>List Item 4</mm-list-item>
 				</mm-dropdown>
 			</div>
-			<div class="col" span="1">
+			<div class="col" span="2">
 				<mm-group 
 					fitparent 
 					unresolved
@@ -155,12 +154,6 @@
 		<script>
 			window.addEventListener('WebComponentsReady', function(e) {
 				var testForm = document.querySelector('#testForm');
-				var dimensions = document.querySelector('#dimensions');
-
-				// dimensions.value = {
-				// 	width: 300,
-				// 	height: 250
-				// };
 
 				// add custom validation rules for the dimension component
 				// this would probably be more robust, but this is sufficient

diff --git a/src/mm-form/mm-form.html b/src/mm-form/mm-form.html
@@ -9,6 +9,7 @@
 <link rel="import" href="../shared/fonts/fonts.html"/>
 <link rel="import" href="../shared/behaviors/lightdomgettable.html"/>
 <link rel="import" href="../shared/behaviors/resolvable.html"/>
+<link rel="import" href="../shared/behaviors/columnable.html"/>
 <link rel="import" href="../mm-footer/mm-footer.html"/>
 <link rel="import" href="../mm-button/mm-button.html"/>
 <link rel="import" href="../mm-action/mm-action.html"/>

diff --git a/src/mm-form/mm-form.js b/src/mm-form/mm-form.js
@@ -11,27 +11,36 @@
 
 		behaviors: [
 			StrandTraits.LightDomGettable,
-			StrandTraits.Resolvable
+			StrandTraits.Resolvable,
+			StrandTraits.Columnable
 		],
 
+
+		/*
+			// TODO: new direction for this
+
+			// data
+			{
+				key: value,
+				key: value,
+				key: value
+			}
+
+			// validation
+			{
+				key: function(name, value, data, validators)
+			}
+
+		*/	
+
 		properties: {
-			columns: {
-				type: Number,
-				value: 4,
-				reflectToAttribute: true
-			},
-			spacing: {
-				type: Number,
-				value: 10,
-				reflectToAttribute: true
-			},
 			formItems: {
 				type: Object,
 				value: function() { return {}; }
 			},
 			formData: {
 				type: Object,
-				value: function() { return {}; }
+				value: function() { return {}; },
 			},
 			footerMessage: {
 				type: String,
@@ -99,10 +108,6 @@
 			}
 		},
 
-		observers: [
-			"_applyStyles(columns, spacing)"
-		],
-
 		listeners: {
 			'changed' : '_handleChanged'
 		},
@@ -202,6 +207,16 @@
 			});
 		},
 
+
+		// _dataChanged: function(newVal, oldVal) {
+
+		// 	newVal.forEach(function(item) {
+
+
+		// 	});
+
+		// },
+
 		// *******************************
 		// footer and footer actions:
 		_validType: function(type) {
@@ -240,7 +255,7 @@
 		},
 
 		_updateData: function(name, value) {
-			if (typeof(value) === 'object') {
+			if (value && typeof(value) === 'object') {
 				for (var subkey in value) {
 					this.formData[subkey] = value[subkey];
 				}
@@ -284,7 +299,7 @@
 			// UI validation pass:
 			// console.log('serializeForm');
 			// TODO: this should be formItems
-			for (var key in this.formData) {
+			for (var key in this.formItems) {
 				var item 			= this.formItems[key]
 					value 			= item.field.value,
 					validation		= item.validation,
@@ -341,32 +356,6 @@
 		// 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
-		// that will be of benefit elsewhere
-		// styling concerns (columns)
-		_applyStyles: function(columns, spacing) {
-			var items = this.getLightDOM();
-
-			if (items.length > 0) {
-				var spanItems = items.filter(function(item){
-						return item.hasAttribute('span');
-					}),
-					columnWidth = 100/columns;
-
-				spanItems.forEach(function(item, index){
-					var span = parseInt(item.getAttribute('span')),
-						colWidth = columnWidth * span,
-						calc = 'calc(' + colWidth + '% - ' + spacing + 'px)';
-
-					item.style.width = calc;
-					item.style.marginRight = spacing + 'px';
-					item.style.marginBottom = spacing + 'px';
-				});
-			}
-		},
-
 	});
 
 })(window.Strand = window.Strand || {});
diff --git a/src/shared/behaviors/columnable.html b/src/shared/behaviors/columnable.html
@@ -0,0 +1,53 @@
+<script>
+/**
+ * @license
+ * Copyright (c) 2015 MediaMath Inc. All rights reserved.
+ * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt
+
+*/
+(function (scope) {
+
+	scope.Columnable = {
+
+		properties: {
+			columns: {
+				type: Number,
+				value: 4,
+				reflectToAttribute: true
+			},
+			spacing: {
+				type: Number,
+				value: 10,
+				reflectToAttribute: true
+			}
+		},
+
+		observers: [
+			"_applyStyles(columns, spacing)"
+		],
+
+		_applyStyles: function(columns, spacing) {
+			var items = this.getLightDOM();
+
+			if (items.length > 0) {
+				var spanItems = items.filter(function(item){
+						return item.hasAttribute('span');
+					}),
+					columnWidth = 100/columns;
+
+				spanItems.forEach(function(item, index){
+					var span = parseInt(item.getAttribute('span')),
+						colWidth = columnWidth * span,
+						calc = 'calc(' + colWidth + '% - ' + spacing + 'px)';
+
+					item.style.width = calc;
+					item.style.marginRight = spacing + 'px';
+					item.style.marginBottom = spacing + 'px';
+				});
+			}
+		}
+
+	};
+
+})(window.StrandTraits = window.StrandTraits || {}); 
+</script>
diff --git a/src/shared/behaviors/formable.html b/src/shared/behaviors/formable.html
@@ -14,10 +14,6 @@
 				type: Object,
 				notify: true,
 				observer: "_valueChanged"
-			},
-			multiValue: {
-				type: Boolean,
-				reflectToAttribute: true
 			}
 		},