Skip to content

Commit 5392297

Browse files
anthonykoerberanthonykoerber
committed
Footer in form WIP
1 parent 64edf13 commit 5392297

3 files changed

Lines changed: 80 additions & 45 deletions

File tree

‎src/mm-form/index.html‎

Lines changed: 1 addition & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,12 @@
33
<head>
44
<script language="javascript" src="../../bower_components/webcomponentsjs/webcomponents.js"></script>
55
<!-- <link rel="import" href="../../build/strand.html" /> -->
6-
76
<link rel="import" href="../mm-dropdown/mm-dropdown.html" />
87
<link rel="import" href="../mm-input/mm-input.html" />
98
<link rel="import" href="../mm-inline-box/mm-inline-box.html" />
109
<link rel="import" href="../mm-header/mm-header.html" />
1110
<link rel="import" href="../mm-footer/mm-footer.html" />
1211
<link rel="import" href="../mm-button/mm-button.html" />
13-
1412
<link rel="import" href="mm-form.html" />
1513
<style type="text/css">
1614
body, html {
@@ -69,48 +67,12 @@
6967
</mm-inline-box>
7068
</div>
7169

72-
<!-- TODO: Add a footer config, bake the footer into mm-form -->
73-
<mm-footer id="testFormFooter" unresolved fitparent semi-transparent>
74-
<mm-button id="submitBtn">
75-
<label>Save</label>
76-
</mm-button>
77-
</mm-footer>
78-
7970
</mm-form>
8071

8172
<script>
82-
var testForm,
83-
submitBtn,
84-
testFormFooter;
85-
8673
window.addEventListener('WebComponentsReady', function(e) {
87-
88-
testForm = Polymer.dom(document).querySelector('#testForm');
89-
submitBtn = Polymer.dom(document).querySelector('#submitBtn');
90-
testFormFooter = Polymer.dom(document).querySelector('#testFormFooter');
91-
92-
submitBtn.addEventListener('click', submitForm);
93-
94-
// TODO: Add a footer config, bake the footer into mm-form
95-
testForm.addEventListener('form-submit', function(e) {
96-
console.log(e.detail);
97-
if (!e.detail.isValid) {
98-
testFormFooter.type = 'error';
99-
testFormFooter.message = 'This form contains errors';
100-
testFormFooter.showMessage();
101-
} else {
102-
testFormFooter.type = 'success';
103-
testFormFooter.message = 'This form has been submitted';
104-
testFormFooter.showMessage();
105-
}
106-
});
74+
//
10775
});
108-
109-
function submitForm(e) {
110-
e.preventDefault();
111-
testForm.submitForm();
112-
}
113-
11476
</script>
11577

11678
</body>

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

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,40 @@
88
<link rel="import" href="../shared/fonts/fonts.html"/>
99
<link rel="import" href="../shared/behaviors/lightdomgettable.html"/>
1010
<link rel="import" href="../shared/behaviors/resolvable.html"/>
11+
<link rel="import" href="../mm-footer/mm-footer.html"/>
12+
<link rel="import" href="../mm-button/mm-button.html"/>
13+
<link rel="import" href="../mm-action/mm-action.html"/>
1114

1215
<dom-module id="mm-form">
1316
<link rel="import" type="css" href="mm-form.css"/>
1417
<template>
18+
1519
<content></content>
20+
21+
<!-- footer -->
22+
<mm-footer
23+
id="formActions"
24+
type="{{footerType}}"
25+
message="{{footerMessage}}"
26+
message-visible="{{showFooterMessage}}"
27+
unresolved fitparent semi-transparent>
28+
29+
<template is="dom-repeat" items="{{actions}}">
30+
<template is="dom-if" if="{{_validType(item.type)}}">
31+
<mm-button on-tap="_handleClick" type="{{item.type}}">
32+
<label>{{item.label}}</label>
33+
</mm-button>
34+
</template>
35+
<template is="dom-if" if="{{!_validType(item.type)}}">
36+
<mm-action on-tap="_handleClick" underline>
37+
<label>{{item.label}}</label>
38+
</mm-action>
39+
</template>
40+
</template>
41+
</mm-footer>
42+
1643
</template>
1744
</dom-module>
1845

19-
<script src="mm-form.js"></script>
46+
<script src="mm-form.js"></script>
47+

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

Lines changed: 50 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,16 +25,46 @@
2525
value: 10,
2626
reflectToAttribute: true
2727
},
28-
// submitMessage: {
29-
// type: String,
30-
// notify: true
31-
// },
3228
formItems: {
3329
type: Array
3430
},
3531
formData: {
3632
type: Object,
3733
value: function() { return {}; }
34+
},
35+
footerMessage: {
36+
type: String,
37+
notify: true
38+
},
39+
footerType: {
40+
type: String,
41+
notify: true
42+
},
43+
showFooterMessage: {
44+
type: Boolean,
45+
notify: true
46+
},
47+
actions: {
48+
type: Array,
49+
value: function() {
50+
return [
51+
{
52+
label: 'Cancel',
53+
type: 'action',
54+
callback: function(e,host) {
55+
console.log('cancel - e: ', e, 'host: ', host);
56+
}
57+
},
58+
{
59+
label: 'Save',
60+
type: 'primary',
61+
callback: function(e,host) {
62+
console.log('save - e: ', e, 'host: ', host);
63+
host.serializeForm();
64+
}
65+
}
66+
];
67+
}
3868
}
3969
},
4070

@@ -112,6 +142,19 @@
112142
});
113143
},
114144

145+
// *******************************
146+
// footer and footer actions:
147+
_validType: function(type) {
148+
return type === 'primary' || type === 'secondary';
149+
},
150+
151+
_handleClick: function(e) {
152+
e.preventDefault();
153+
e.model.item.callback(e,this);
154+
},
155+
156+
// *******************************
157+
// form validation
115158
// validate per field:
116159
_validateField: function(field) {
117160
// construct the test set based on pipes(?):
@@ -125,7 +168,7 @@
125168
return result.length === testSet.length;
126169
},
127170

128-
submitForm: function() {
171+
serializeForm: function() {
129172
var invalid = [],
130173
valid = [];
131174

@@ -174,6 +217,8 @@
174217
});
175218
},
176219

220+
// *******************************
221+
// TODO: This'll get replaced by Shuwen's system/component
177222
// styling concerns (columns)
178223
_applyStyles: function(columns, spacing) {
179224
var items = this.getLightDOM();

0 commit comments

Comments
 (0)