Skip to content

Commit 5183534

Browse files
anthonykoerberanthonykoerber
committed
test form view with custom form item WIP
1 parent 14597b6 commit 5183534

6 files changed

Lines changed: 295 additions & 13 deletions

File tree

‎src/mm-form/index.html‎

Lines changed: 43 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -73,17 +73,51 @@
7373
</div>
7474

7575
<!-- row 2 -->
76-
<!--
7776
<div class="col" span="1">
78-
<mm-dimensions
79-
id="dimensions"
80-
unresolved
81-
name="dimensions"
82-
validation="dimensions|empty"
83-
label="Select a Dimension"
84-
error-message="You need to select dimensions"></mm-dimensions>
77+
<!--
78+
<mm-dimensions
79+
id="dimensions"
80+
unresolved
81+
name="dimensions"
82+
validation="dimensions|empty"
83+
label="Select a Dimension"
84+
error-message="You need to select dimensions"></mm-dimensions>
85+
-->
86+
87+
<!--
88+
<mm-radio
89+
id="standardSize"
90+
group="sizes"
91+
checked
92+
on-selected="_handleRadioSelected"></mm-radio>
93+
<mm-dropdown
94+
id="standardSizeDdl"
95+
disabled$="{{!isStandard}}"
96+
on-changed="_standardSizeChanged"
97+
placeholder="Select One">
98+
<mm-list-item>160x600</mm-list-item>
99+
<mm-list-item>728x90</mm-list-item>
100+
<mm-list-item>300x250</mm-list-item>
101+
</mm-dropdown>
102+
<mm-radio
103+
id="nonStandardSize"
104+
group="sizes"
105+
on-selected="_handleRadioSelected"></mm-radio>
106+
<mm-group id="nonStandardSizeGroup" disabled$="{{isStandard}}">
107+
<mm-input
108+
id="width"
109+
placeholder="Width"
110+
validation="int"
111+
on-changed="_widthChanged"></mm-input>
112+
<mm-input
113+
id="height"
114+
placeholder="Height"
115+
validation="int"
116+
on-changed="_heightChanged"></mm-input>
117+
</mm-group>
118+
-->
119+
85120
</div>
86-
-->
87121

88122
</mm-form>
89123

‎src/mm-form/mm-form.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@
107107
},
108108

109109
_dataChanged: function(newVal, oldVal) {
110+
console.log('_dataChanged:', newVal);
110111
this._initForm(newVal);
111112
},
112113

@@ -130,8 +131,8 @@
130131
this.data[key].parentEle = parentEle;
131132

132133
this._updateData(key, value);
133-
this._createErrorMsg(key, parentEle, errorMsg);
134-
this._createLabel(key, parentEle, field, label);
134+
if (errorMsg) this._createErrorMsg(key, parentEle, errorMsg);
135+
if (label) this._createLabel(key, parentEle, field, label);
135136

136137
// Populate the fields if necessary
137138
if (!field.value && value) {
@@ -205,11 +206,14 @@
205206
_handleChanged: function(e) {
206207
var field = e.target,
207208
name = e.target.getAttribute('name'),
208-
value = e.detail.value,
209-
validation = this.data[name].validation,
209+
value = null,
210+
validation = null,
210211
isFormElement = this.data.hasOwnProperty(name);
211212

212213
if (isFormElement) {
214+
value = e.detail.value;
215+
validation = this.data[name].validation;
216+
213217
this._updateData(name, value);
214218
this.unsaved = this._diffData();
215219
this._validateField(name, value);

‎src/mm-test-form-view/index.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<script language="javascript" src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
5+
<link rel="import" href="mm-test-form-view.html"/>
6+
</head>
7+
<body>
8+
<mm-test-form-view></mm-test-form-view>
9+
</body>
10+
</html>

‎src/mm-test-form-view/mm-test-form-view.html‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!--
2+
* @license
3+
* Copyright (c) 2015 MediaMath Inc. All rights reserved.
4+
* This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt
5+
6+
-->
7+
<link rel="import" href="../../bower_components/polymer/polymer.html"/>
8+
<link rel="import" href="../mm-dropdown/mm-dropdown.html"/>
9+
<link rel="import" href="../mm-list-item/mm-list-item.html"/>
10+
<link rel="import" href="../mm-group/mm-group.html"/>
11+
<link rel="import" href="../mm-radio/mm-radio.html"/>
12+
<link rel="import" href="../mm-input/mm-input.html"/>
13+
<link rel="import" href="../mm-form/mm-form.html"/>
14+
15+
<dom-module id="mm-test-form-view">
16+
<link rel="import" type="css" href="mm-test-form-view.css"/>
17+
<template>
18+
<mm-form id="testForm" data="{{formData}}">
19+
<!-- row 1 -->
20+
<div class="col" span="1">
21+
<mm-input fitparent name="input" placeholder="Type a Number"></mm-input>
22+
</div>
23+
24+
<div class="col" span="1">
25+
<mm-dropdown fitparent name="dropdown" placeholder="Select an Item">
26+
<mm-list-item>List Item 1</mm-list-item>
27+
<mm-list-item>List Item 2</mm-list-item>
28+
<mm-list-item>List Item 3</mm-list-item>
29+
<mm-list-item>List Item 4</mm-list-item>
30+
</mm-dropdown>
31+
</div>
32+
33+
<div class="col" span="2">
34+
<mm-group fitparent unresolved name="radio">
35+
<mm-radio>
36+
<label>Red</label>
37+
</mm-radio>
38+
<mm-radio>
39+
<label>Green</label>
40+
</mm-radio>
41+
<mm-radio>
42+
<label>Blue</label>
43+
</mm-radio>
44+
</mm-group>
45+
</div>
46+
47+
<!-- row 2 -->
48+
<div class="col" span="2">
49+
<mm-header size="medium">Dimensions</mm-header>
50+
<div id="customItem">
51+
<mm-radio
52+
id="standardSize"
53+
group="sizes"
54+
checked
55+
on-selected="_handleRadioSelected"></mm-radio>
56+
<mm-dropdown
57+
id="standardSizeDdl"
58+
disabled$="{{!isStandard}}"
59+
on-changed="_standardSizeChanged"
60+
placeholder="Select One">
61+
<mm-list-item>160x600</mm-list-item>
62+
<mm-list-item>728x90</mm-list-item>
63+
<mm-list-item>300x250</mm-list-item>
64+
</mm-dropdown>
65+
<mm-radio
66+
id="nonStandardSize"
67+
group="sizes"
68+
on-selected="_handleRadioSelected"></mm-radio>
69+
<mm-group id="nonStandardSizeGroup" disabled$="{{isStandard}}">
70+
<mm-input
71+
name="width"
72+
placeholder="Width"
73+
value="{{width}}"></mm-input>
74+
<mm-input
75+
name="height"
76+
placeholder="Height"
77+
value="{{height}}"></mm-input>
78+
</mm-group>
79+
</div>
80+
</div>
81+
</mm-form>
82+
</template>
83+
</dom-module>
84+
85+
<script src="mm-test-form-view.js"></script>

‎src/mm-test-form-view/mm-test-form-view.js‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2015 MediaMath Inc. All rights reserved.
4+
* This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt
5+
6+
*/
7+
8+
(function (scope) {
9+
10+
scope.TestFormView = Polymer({
11+
is: "mm-test-form-view",
12+
13+
behaviors: [],
14+
15+
properties: {
16+
// custom form items:
17+
isStandard: {
18+
type: Boolean
19+
},
20+
21+
width: {
22+
type: Number,
23+
observer: '_widthChanged'
24+
},
25+
26+
height: {
27+
type: Number,
28+
observer: '_heightChanged'
29+
},
30+
31+
// form data/config:
32+
formData: {
33+
type: Object,
34+
value: {
35+
'input' : {
36+
validation: 'int|empty',
37+
errorMsg: 'You need to type a number',
38+
label: 'Type a number',
39+
// value: '100'
40+
},
41+
'dropdown' : {
42+
validation: 'empty',
43+
errorMsg: 'You need to select an item',
44+
label: 'Select an Item',
45+
// value: 'List Item 4'
46+
},
47+
'radio' : {
48+
validation: function(name, value, data) {
49+
return data[name] === 'Red' && value === 'Red';
50+
},
51+
errorMsg: 'You need to select \'Red\'',
52+
label: 'Select a Color',
53+
// value: 'Red'
54+
},
55+
'width' : {
56+
validation: function(name, value, data) {
57+
return parseInt(value) >= 0;
58+
},
59+
errorMsg: 'You need to type a number'
60+
},
61+
'height' : {
62+
validation: function(name, value, data) {
63+
return parseInt(value) >= 0;
64+
},
65+
errorMsg: 'You need to type a number'
66+
}
67+
}
68+
},
69+
70+
},
71+
72+
_handleRadioSelected: function(e) {
73+
switch (e.detail.item.id) {
74+
case 'standardSize':
75+
this.isStandard = true;
76+
break;
77+
case 'nonStandardSize':
78+
this.isStandard = false;
79+
break;
80+
default:
81+
return;
82+
}
83+
},
84+
85+
// _valueChanged: function(newVal, oldVal) {
86+
// if (newVal) {
87+
// this.fire('changed', { value: newVal });
88+
89+
// // set the dropdown if needed
90+
// if (!this.nonStandardSize) {
91+
// if (!this.$.standardSizeDdl.value) {
92+
// this.$.standardSizeDdl.value = String(
93+
// this.value.width + 'x' + this.value.height
94+
// );
95+
// }
96+
// } else {
97+
// this.$.width.value = this.value.width;
98+
// this.$.height.value = this.value.height;
99+
// }
100+
// }
101+
// },
102+
103+
_standardSizeChanged: function(e) {
104+
var dimensions = e.detail.value.split('x'),
105+
width = parseInt(dimensions[0]),
106+
height = parseInt(dimensions[1]);
107+
this._dimensionsChanged(width, height);
108+
},
109+
110+
_widthChanged: function(newVal, oldVal) {
111+
console.log('_widthChanged: ', newVal);
112+
},
113+
114+
_heightChanged: function(newVal, oldVal) {
115+
console.log('_heightChanged: ', newVal);
116+
},
117+
118+
_dimensionsChanged: function(width, height) {
119+
this.width = width;
120+
this.height = height;
121+
}
122+
123+
});
124+
125+
})(window.Strand = window.Strand || {});

‎src/mm-test-form-view/mm-test-form-view.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2015 MediaMath Inc. All rights reserved.
4+
* This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt
5+
6+
*/
7+
@import "_bourbon";
8+
9+
:host {
10+
position: relative;
11+
display: block;
12+
}
13+
14+
// custom form items
15+
#customItem {
16+
position: relative;
17+
display: flex;
18+
align-items: center;
19+
font-size: 0;
20+
21+
mm-dropdown {
22+
margin-right: 15px;
23+
}
24+
}

0 commit comments

Comments
 (0)