Skip to content

Commit f29e4da

Browse files
anthonykoerberanthonykoerber
committed
first pass at config and functionality
1 parent 6e0762f commit f29e4da

4 files changed

Lines changed: 137 additions & 12 deletions

File tree

‎src/mm-form/index.html‎

Lines changed: 57 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,14 @@
33
<head>
44
<script language="javascript" src="../../bower_components/webcomponentsjs/webcomponents.js"></script>
55
<!-- <link rel="import" href="../../build/strand.html" /> -->
6+
67
<link rel="import" href="../mm-dropdown/mm-dropdown.html" />
78
<link rel="import" href="../mm-input/mm-input.html" />
89
<link rel="import" href="../mm-inline-box/mm-inline-box.html" />
910
<link rel="import" href="../mm-header/mm-header.html" />
11+
<link rel="import" href="../mm-footer/mm-footer.html" />
12+
<link rel="import" href="../mm-button/mm-button.html" />
13+
1014
<link rel="import" href="mm-form.html" />
1115
<style type="text/css">
1216
body, html {
@@ -32,34 +36,37 @@
3236
</head>
3337
<body>
3438

35-
<mm-form unresolved>
39+
<mm-form id="testForm" unresolved>
3640

3741
<div class="col" span="1">
38-
<mm-header size="medium">Header</mm-header>
42+
<mm-header size="medium">Type a Number</mm-header>
3943
<mm-input form-id="input"
4044
fitparent
41-
placeholder="Type Here Bro"
45+
validation="int|empty"
46+
placeholder="Type a Number"
4247
error-target="#inputError"></mm-input>
4348
<mm-inline-box id="inputError" type="error" fitparent>
44-
You done messed up, now what?
49+
You need to type a number
4550
</mm-inline-box>
4651
</div>
52+
4753
<div class="col" span="1">
48-
<mm-header size="medium">Header</mm-header>
54+
<mm-header size="medium">Select an Item</mm-header>
4955
<mm-dropdown form-id="dropdown"
5056
fitparent
51-
placeholder="Select Here Bro"
52-
validate="empty"
57+
placeholder="Select an Item"
58+
validation="empty"
5359
error-target="#dropdownError">
5460
<mm-list-item>List Item 1</mm-list-item>
5561
<mm-list-item>List Item 2</mm-list-item>
5662
<mm-list-item>List Item 3</mm-list-item>
5763
<mm-list-item>List Item 4</mm-list-item>
5864
</mm-dropdown>
5965
<mm-inline-box id="dropdownError" type="error" fitparent>
60-
You done messed up, now what?
66+
You need to select an item
6167
</mm-inline-box>
6268
</div>
69+
6370
<!--
6471
<div class="col" span="1">
6572
<mm-header size="medium">Header</mm-header>
@@ -70,7 +77,49 @@
7077
<mm-input fitparent placeholder="Type Here Bro"></mm-input>
7178
</div>
7279
-->
80+
81+
<mm-footer id="testFormFooter" unresolved fitparent semi-transparent>
82+
<mm-button id="submitBtn">
83+
<label>Save</label>
84+
</mm-button>
85+
</mm-footer>
86+
7387
</mm-form>
7488

89+
<script>
90+
var testForm,
91+
submitBtn,
92+
testFormFooter;
93+
94+
window.addEventListener('WebComponentsReady', function(e) {
95+
96+
testForm = Polymer.dom(document).querySelector('#testForm');
97+
submitBtn = Polymer.dom(document).querySelector('#submitBtn');
98+
testFormFooter = Polymer.dom(document).querySelector('#testFormFooter');
99+
100+
submitBtn.addEventListener('click', submitForm);
101+
102+
// TODO: test out in a view - think about architecture
103+
testForm.addEventListener('form-submit', function(e) {
104+
console.log(e.detail);
105+
if (!e.detail.isValid) {
106+
testFormFooter.type = 'error';
107+
testFormFooter.message = 'This form contains errors';
108+
testFormFooter.showMessage();
109+
} else {
110+
testFormFooter.type = 'success';
111+
testFormFooter.message = 'This form has been submitted';
112+
testFormFooter.showMessage();
113+
}
114+
});
115+
});
116+
117+
function submitForm(e) {
118+
e.preventDefault();
119+
testForm.submitForm();
120+
}
121+
122+
</script>
123+
75124
</body>
76125
</html>

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

Lines changed: 69 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,13 @@
2525
value: 10,
2626
reflectToAttribute: true
2727
},
28+
// submitMessage: {
29+
// type: String,
30+
// notify: true
31+
// },
32+
formItems: {
33+
type: Array
34+
},
2835
formData: {
2936
type: Object,
3037
value: function() { return {}; }
@@ -37,7 +44,67 @@
3744

3845
ready: function() {
3946
// build form data object
40-
47+
// TODO: consider effective children apis once we get to v1.2.3
48+
// https://www.polymer-project.org/1.0/docs/devguide/local-dom.html#effective-children
49+
this.async(function() {
50+
this.formItems = Polymer.dom(this).querySelectorAll('[form-id]');
51+
this.formItems.forEach(function(item) {
52+
this.formData[item.formId] = item.value;
53+
}.bind(this));
54+
console.log("this.formData: ", this.formData);
55+
});
56+
},
57+
58+
submitForm: function() {
59+
var invalid = [],
60+
valid = [];
61+
62+
// UI validation pass:
63+
// console.log('submitForm');
64+
this.formItems.forEach(function(item){
65+
// update the form data object:
66+
this.formData[item.formId] = item.value;
67+
68+
// validate UI:
69+
var isValid = item.validate(item.value);
70+
71+
// track invalids
72+
if (!isValid) {
73+
invalid.push(item.formId);
74+
} else {
75+
valid.push(item.formId);
76+
}
77+
78+
// show error state:
79+
item.error = !isValid;
80+
81+
// show target message:
82+
if(item._errorTarget && !isValid) {
83+
// item._errorTarget.display();
84+
item._errorTarget.style.display = 'block';
85+
} else {
86+
// item._errorTarget.hide();
87+
item._errorTarget.style.display = 'none';
88+
}
89+
}.bind(this));
90+
91+
if (invalid.length > 0) {
92+
// there were errors
93+
// show footer error
94+
// console.log('invalids:', invalids);
95+
this.submitMessage = 'This form contains errors';
96+
} else {
97+
// send the data to some endpoint
98+
// handle that response
99+
}
100+
101+
// fire an invalid form event:
102+
this.fire('form-submit', {
103+
isValid: !invalid.length > 0,
104+
invalidFields: invalid,
105+
validFields: valid,
106+
data: this.formData
107+
});
41108
},
42109

43110
// styling concerns (columns)
@@ -60,7 +127,7 @@
60127
item.style.marginBottom = spacing + 'px';
61128
});
62129
}
63-
}
130+
},
64131

65132
});
66133

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,5 +58,15 @@
5858
margin-bottom: 10px;
5959
}
6060

61+
:host ::content mm-inline-box[type='error'] {
62+
display: none;
63+
}
64+
65+
:host ::content mm-footer {
66+
position: fixed;
67+
bottom: 0;
68+
right: 0;
69+
}
70+
6171
// @include flexGrid(4, 20px, 10px, 20px, 10px, 0px, 5px, 5px, 0px);
6272
@include flexGrid();

‎src/shared/behaviors/formable.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,7 @@
4444
_errorTargetChanged: function(target, oldTarget) {
4545
if(typeof target === 'string') {
4646
this.async(function() {
47-
this._errorTarget = this._scope === document ?
48-
document.querySelector(target) : Polymer.dom(this._scope).querySelector(target);
47+
this._errorTarget = Polymer.dom(document).querySelector(target);
4948
});
5049
}
5150
},

0 commit comments

Comments
 (0)