Skip to content

Commit

Permalink
more form WIP
Browse files Browse the repository at this point in the history
- flatten values
- add formable behavior
- test form component
  • Loading branch information
anthonykoerber committed Mar 2, 2016
1 parent 5dbed33 commit a4ba778
Show file tree
Hide file tree
Showing 15 changed files with 231 additions and 145 deletions.
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions src/mm-autocomplete/mm-autocomplete.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
<link rel="import" href="../shared/behaviors/stylable.html"/>
<link rel="import" href="../shared/behaviors/windownotifier.html"/>
<link rel="import" href="../shared/behaviors/refable.html"/>
<link rel="import" href="../shared/behaviors/formable.html"/>
<link rel="import" href="../mm-input/mm-input.html"/>
<link rel="import" href="../mm-list-item/mm-list-item.html"/>

Expand Down
3 changes: 2 additions & 1 deletion src/mm-autocomplete/mm-autocomplete.js
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,8 @@
StrandTraits.Stackable,
StrandTraits.Jqueryable,
StrandTraits.PositionableDropdown,
StrandTraits.Refable
StrandTraits.Refable,
StrandTraits.Formable
],

_selectedIndexChangedFlag: false,
Expand Down
10 changes: 10 additions & 0 deletions src/mm-dimensions/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<script language="javascript" src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="mm-dimensions.html"/>
</head>
<body>
<mm-dimensions></mm-dimensions>
</body>
</html>
52 changes: 52 additions & 0 deletions src/mm-dimensions/mm-dimensions.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!--
* @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
-->
<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-radio/mm-radio.html" />
<link rel="import" href="../mm-group/mm-group.html" />

<link rel="import" href="../shared/behaviors/resolvable.html"/>
<link rel="import" href="../shared/behaviors/formable.html"/>

<dom-module id="mm-dimensions">
<link rel="import" type="css" href="mm-dimensions.css"/>
<template>
<mm-radio
id="standardSize"
group="sizes"
checked
on-selected="_handleRadioSelected"></mm-radio>
<mm-dropdown
id="standardSizeDdl"
disabled$="{{!isStandard}}"
on-changed="_standardSizeChanged"
placeholder="Select One">
<mm-list-item>160x600</mm-list-item>
<mm-list-item>728x90</mm-list-item>
<mm-list-item>300x250</mm-list-item>
</mm-dropdown>
<mm-radio
id="nonStandardSize"
group="sizes"
on-selected="_handleRadioSelected"></mm-radio>
<mm-group id="nonStandardSizeGroup" disabled$="{{isStandard}}">
<mm-input
id="width"
placeholder="Width"
validation="int"
on-changed="_widthChanged"></mm-input>
<mm-input
id="height"
placeholder="Height"
validation="int"
on-changed="_heightChanged"></mm-input>
</mm-group>
</template>
</dom-module>

<script src="mm-dimensions.js"></script>
97 changes: 97 additions & 0 deletions src/mm-dimensions/mm-dimensions.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
/**
* @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) {

// special form component to validate assumptions:
scope.Dimensions = Polymer({
is: "mm-dimensions",

behaviors: [
StrandTraits.Resolvable,
StrandTraits.Formable
],

properties: {
value: {
type: Object,
notify: true,
value: function() {
return {
width: null,
height: null
}
},
observer: "_valueChanged"
},
isStandard: {
type: Boolean
}
},

_handleRadioSelected: function(e) {
switch (e.detail.item.id) {
case 'standardSize':
this.isStandard = true;
break;
case 'nonStandardSize':
this.isStandard = false;
break;
default:
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) {
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) {
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) {
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
}
}
});

})(window.Strand = window.Strand || {});
18 changes: 18 additions & 0 deletions src/mm-dimensions/mm-dimensions.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
/**
* @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
*/
@import "_bourbon";

:host {
position: relative;
display: flex;
align-items: center;
font-size: 0;
}

mm-dropdown {
margin-right: 15px;
}
2 changes: 1 addition & 1 deletion src/mm-dropdown/mm-dropdown.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<link rel="import" href="../shared/behaviors/stackable.html">
<link rel="import" href="../shared/behaviors/stylable.html"/>
<link rel="import" href="../shared/behaviors/resolvable.html"/>
<!-- <link rel="import" href="../shared/behaviors/formable.html"/> -->
<link rel="import" href="../shared/behaviors/formable.html"/>
<link rel="import" href="../mm-item-recycler/mm-item-recycler.html">
<link rel="import" href="../mm-icon/mm-icon.html"/>
<link rel="import" href="../mm-list-item/mm-list-item.html"/>
Expand Down
101 changes: 9 additions & 92 deletions src/mm-form/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,11 @@
<html>
<head>
<script language="javascript" src="../../bower_components/webcomponentsjs/webcomponents.js"></script>

<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-footer/mm-footer.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-dimensions/mm-dimensions.html" /> -->
<!-- <link rel="import" href="mm-form.html" /> -->

<style type="text/css">
body, html {
height: 100%;
Expand Down Expand Up @@ -48,10 +42,10 @@
}
</style>
</head>


<body>
<!-- dom module for testing special cases -->
<!--
<dom-module id="special-snowflake">
<style type="text/css">
:host {
Expand Down Expand Up @@ -97,6 +91,7 @@
</mm-group>
</template>
</dom-module>
-->

<mm-form id="testForm" unresolved>
<!-- row 1 -->
Expand All @@ -107,6 +102,7 @@
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">
Expand Down Expand Up @@ -146,95 +142,17 @@

<!-- row 2 -->
<div class="col" span="1">
<special-snowflake
<mm-dimensions
id="dimensions"
unresolved
name="dimensions"
validation="dimensions|empty"
label="Select a Dimension"
error-message="You need to select dimensions"></special-snowflake>
error-message="You need to select dimensions"></mm-dimensions>
</mm-form>
<!-- value='{"width":"300", "height":"250"}' -->
<!-- multi-value -->

<script>
// special form component to validate assumptions:
HTMLImports.whenReady(function() {
Polymer({
is: "special-snowflake",
behaviors: [
StrandTraits.Resolvable
],
properties: {
value: {
type: Object,
notify: true,
observer: "_valueChanged"
},
isStandard: {
type: Boolean
}
},
_handleRadioSelected: function(e) {
switch (e.detail.item.id) {
case 'standardSize':
this.isStandard = true;
break;
case 'nonStandardSize':
this.isStandard = false;
break;
default:
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) {
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) {
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) {
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
}
}
});
});

window.addEventListener('WebComponentsReady', function(e) {
var testForm = document.querySelector('#testForm');
var dimensions = document.querySelector('#dimensions');
Expand All @@ -255,7 +173,6 @@
console.log('serialize-form', e.detail);
});
});

</script>

</body>
Expand Down
Loading

0 comments on commit a4ba778

Please sign in to comment.