custom form item WIP

MediaMath · Mar 2, 2016 · 32c9623 · 32c9623
1 parent ad82e07
commit 32c9623
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 77 deletions.
diff --git a/src/mm-form/index.html b/src/mm-form/index.html
@@ -1,18 +1,18 @@
 <!DOCTYPE html>
 <html>
-  <head>
+	<head>
 	<script language="javascript" src="../../bower_components/webcomponentsjs/webcomponents.js"></script>
-	<!-- <link rel="import" href="../../build/strand.html" /> -->
+	<link rel="import" href="../../build/strand.html" />
+	<!-- 
 	<link rel="import" href="../mm-dropdown/mm-dropdown.html" />
 	<link rel="import" href="../mm-input/mm-input.html" />
 	<link rel="import" href="../mm-inline-box/mm-inline-box.html" />
-	<!-- <link rel="import" href="../mm-header/mm-header.html" /> -->
 	<link rel="import" href="../mm-footer/mm-footer.html" />
 	<link rel="import" href="../mm-button/mm-button.html" />
-	<link rel="import" href="../mm-button/mm-button.html" />
 	<link rel="import" href="../mm-radio/mm-radio.html" />
-	<link rel="import" href="../mm-group/mm-group.html" />
-	<link rel="import" href="mm-form.html" />
+	<link rel="import" href="../mm-group/mm-group.html" /> 
+	-->
+	<!-- <link rel="import" href="mm-form.html" /> -->
 	<style type="text/css">
 		body, html {
 			height: 100%;
@@ -41,35 +41,56 @@
 		.col {
 			box-sizing: border-box;
 			padding: 10px 0 0 10px; 
- 		}
+		}
 
 		mm-form[unresolved] {
 			display: none;
 		}
 	</style>
-  </head>
-  <body>
+	</head>
+	<body>
+
+	<dom-module id="special-snowflake">
+		<style type="text/css">
+			:host {
+				position: relative;
+				display: flex;
+				align-items: center;
+				font-size: 0; 
+			}
+			mm-dropdown {
+				margin-right: 15px;
+			}
+		</style>
+		<template>
+				<mm-radio id="standardSize" checked></mm-radio>
+				<mm-dropdown placeholder="Select One">
+					<mm-list-item>300x250</mm-list-item>
+					<mm-list-item>300x250</mm-list-item>
+					<mm-list-item>300x250</mm-list-item>
+					<mm-list-item>300x250</mm-list-item>
+				</mm-dropdown>
+				<mm-radio id="nonStandardSize"></mm-radio>
+				<mm-group disabled>
+					<mm-input placeholder="Width" validation="int"></mm-input>
+					<mm-input placeholder="Height" validation="int"></mm-input>
+				</mm-group>
+		</template>
+	</dom-module>
 
 	<mm-form id="testForm" unresolved>
 
 		<!-- row 1 -->
 		<div class="col" span="1">
-			<!-- <mm-header size="medium">Type a Number</mm-header> -->
 			<mm-input 
 				fitparent 
 				name="input"
 				validation="int|empty"
 				placeholder="Type a Number"
 				label="Type a Number"
 				error-message="You need to type a number"></mm-input>
-			<!-- 
-			<mm-inline-box id="inputError" type="error" fitparent>
-				You need to type a number
-			</mm-inline-box>
-			 -->
 		</div>
 		<div class="col" span="1">
-			<!-- <mm-header size="medium">Select an Item</mm-header> -->
 			<mm-dropdown 
 				fitparent 
 				name="dropdown"
@@ -82,14 +103,8 @@
 				<mm-list-item>List Item 3</mm-list-item>
 				<mm-list-item>List Item 4</mm-list-item>
 			</mm-dropdown>
-			<!-- 
-			<mm-inline-box id="dropdownError" type="error" fitparent>
-				You need to select an item
-			</mm-inline-box>
-			 -->
 		</div>
 		<div class="col" span="1">
-			<!-- <mm-header size="medium">Select a Color</mm-header> -->
 			<mm-group 
 				fitparent 
 				unresolved
@@ -108,23 +123,49 @@
 					<label>Blue</label>
 				</mm-radio>			
 			</mm-group>
-			<!--
-			<mm-inline-box id="radioError" type="error" fitparent>
-				You need to select a color
-			</mm-inline-box>
-			-->
 		</div>
 
+		<!-- row 2 -->
+		<div class="col" span="1">
+		<special-snowflake
+			unresolved
+			name="snowflake"
+			validation="dimension"
+			label="Select a Dimension"
+			error-message="You need to select a dimension"></special-snowflake>
+
 	</mm-form>
 
 	<script>
+
+		HTMLImports.whenReady(function() {
+			Polymer({
+					is: "special-snowflake",
+
+					properties: {
+						value: {
+							type:String,
+							notify: true,
+							observer: "_valueChanged"
+						},
+					},
+
+					_valueChanged: function(oldVal, newVal) {
+						// must fire a changed event:
+						this.fire('changed', { value: newVal });
+					}
+
+			});
+		});
+
 		window.addEventListener('WebComponentsReady', function(e) {
 			var testForm = document.querySelector('#testForm');
 			testForm.addEventListener('serialize-form', function(e){
 				console.log('serialize-form', e.detail);
 			});
 		});
+
 	</script>
 
-  </body>
+	</body>
 </html>
diff --git a/src/mm-form/mm-form.js b/src/mm-form/mm-form.js
@@ -245,7 +245,6 @@
 				result = [];
 
 			// attempt with validate-js
-
 			result = testSet.map(function(item) {
 				return this.rules[item](value);
 			}, this).filter(function(item) {

diff --git a/src/mm-form/mm-form.scss b/src/mm-form/mm-form.scss
@@ -6,56 +6,15 @@
 */
 @import "_bourbon";
 
-@mixin flexGrid(
-	// $count:4,
-
-	// $paddingTop:0px,
-	// $paddingRight:0px,
-	// $paddingBottom:0px,
-	// $paddingLeft:0px,
-
-	// $marginTop:0px, 
-	// $marginRight:0px,
-	// $marginBottom:0px,
-	// $marginLeft:0px
-){
-	:host ::content .col {
-		box-sizing: border-box;
-		// padding-top: $paddingTop;
-		// padding-right: $paddingRight;
-		// padding-bottom: $paddingBottom;
-		// padding-left: $paddingLeft;
-	}
-
-	// The loop that creates all of span[n] columns classes
-	// @for $i from 1 through $count {
-	// 	:host ::content [span='#{$i}'] {
-	// 		$pct: percentage(1/$count * $i);
-	// 		$marginTotal: $marginRight + $marginLeft;
-
-	// 		width: calc(#{$pct} - #{$marginTotal});
-	// 		min-width: calc(#{$pct} - #{$marginTotal});
-
-	// 		margin-top: $marginTop;
-	// 		margin-right: $marginRight;
-	// 		margin-bottom: $marginBottom;
-	// 		margin-left: $marginLeft;
-	// 	}
-	// }
-}
-
-// Defining Your Grid
 :host {
 	display: flex;
 	flex-wrap: wrap;
 	position: relative;
 }
 
-// :host ::content mm-header, 
-// :host ::content mm-input, 
-// :host ::content mm-dropdown { 
-// 	margin-bottom: 10px;
-// }
+:host ::content .col {
+	box-sizing: border-box;
+}
 
 :host ::content mm-form-message {
 	margin-top: 10px;
@@ -70,9 +29,6 @@
 	margin-bottom: 10px;
 }
 
-// @include flexGrid(4, 20px, 10px, 20px, 10px, 0px, 5px, 5px, 0px);
-@include flexGrid();
-
 mm-footer {
 	position: fixed;
 	bottom: 0;

diff --git a/src/strand.html b/src/strand.html
@@ -40,4 +40,5 @@
 <link rel="import" href="mm-sync/mm-sync.html">
 <link rel="import" href="mm-tabs/mm-tabs.html">
 <link rel="import" href="mm-textarea/mm-textarea.html">
-<link rel="import" href="mm-tooltip/mm-tooltip.html">
+<link rel="import" href="mm-tooltip/mm-tooltip.html">
+<link rel="import" href="mm-form/mm-form.html">