Skip to content

Commit 1ac4bed

Browse files
anthonykoerberanthonykoerber
committed
mm-form and mm-repeater integration WIP
1 parent 8601aed commit 1ac4bed

5 files changed

Lines changed: 85 additions & 49 deletions

File tree

‎src/mm-form/index.html‎

Lines changed: 59 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,11 @@
3838
<body>
3939

4040
<mm-form id="testForm" unresolved>
41+
4142
<div class="col" span="1">
4243
<mm-input fitparent name="input" placeholder="Type a Number"></mm-input>
4344
</div>
45+
4446
<div class="col" span="1">
4547
<mm-dropdown fitparent name="dropdown" placeholder="Select an Item">
4648
<mm-list-item>List Item 1</mm-list-item>
@@ -49,6 +51,7 @@
4951
<mm-list-item>List Item 4</mm-list-item>
5052
</mm-dropdown>
5153
</div>
54+
5255
<div class="col" span="2">
5356
<mm-group fitparent unresolved name="radio">
5457
<mm-radio>
@@ -62,6 +65,26 @@
6265
</mm-radio>
6366
</mm-group>
6467
</div>
68+
69+
<div class="col" span="4">
70+
<mm-repeater id="repeater" name="repeater">
71+
<template preserve-content>
72+
<mm-input name="name"></mm-input>
73+
<mm-dropdown name="firstOption">
74+
<mm-list-item>Test Item 1</mm-list-item>
75+
<mm-list-item>Test Item 2</mm-list-item>
76+
<mm-list-item>Test Item 3</mm-list-item>
77+
<mm-list-item>Test Item 4</mm-list-item>
78+
</mm-dropdown>
79+
<mm-group name="secondOption">
80+
<mm-radio><label>Test 1</label></mm-radio>
81+
<mm-radio><label>Test 2</label></mm-radio>
82+
<mm-radio><label>Test 3</label></mm-radio>
83+
</mm-group>
84+
</template>
85+
</mm-repeater>
86+
</div>
87+
6588
</mm-form>
6689

6790
<!-- config via markup -->
@@ -117,30 +140,39 @@
117140

118141
// config/initial data set up this way:
119142
var config = {
120-
'input' : {
121-
validation: 'int|empty',
122-
parentEle: null,
123-
errorMsgEle: null,
124-
errorMsg: 'You need to type a number',
125-
label: 'Type a number'
126-
},
127-
'dropdown' : {
128-
validation: 'empty',
129-
parentEle: null,
130-
errorMsg: 'You need to select an item',
131-
label: 'Select an Item'
132-
},
133-
'radio' : {
134-
validation: function(name, value, data) {
135-
return data[name] === 'Red' && value === 'Red';
143+
'input' : {
144+
validation: 'int|empty',
145+
parentEle: null,
146+
errorMsgEle: null,
147+
errorMsg: 'You need to type a number',
148+
label: 'Type a number'
149+
},
150+
'dropdown' : {
151+
validation: 'empty',
152+
parentEle: null,
153+
errorMsg: 'You need to select an item',
154+
label: 'Select an Item'
136155
},
137-
parentEle: null,
138-
errorMsgEle: null,
139-
errorMsg: 'You need to select \'Red\'',
140-
label: 'Select a Color'
141-
},
142-
// 'empty' : {}
143-
};
156+
'radio' : {
157+
validation: function(name, value, data) {
158+
return data[name] === 'Red' && value === 'Red';
159+
},
160+
parentEle: null,
161+
errorMsgEle: null,
162+
errorMsg: 'You need to select \'Red\'',
163+
label: 'Select a Color'
164+
},
165+
'repeater': {
166+
validation: function(name, value, data, field, view) {
167+
return field.validate();
168+
},
169+
parentEle: null,
170+
errorMsgEle: null,
171+
errorMsg: 'You need to select some stuff',
172+
label: 'Repeat Things'
173+
}
174+
// 'empty' : {}
175+
};
144176

145177
// data that holds any actual values
146178
// var data = {
@@ -158,12 +190,15 @@
158190
// };
159191

160192
window.addEventListener('WebComponentsReady', function(e) {
161-
var testForm = document.querySelector('#testForm');
193+
var testForm = document.querySelector('#testForm'),
194+
repeater = document.querySelector('#repeater');
162195

163196
// Ordering!
164197
testForm.config = config;
165198
// testForm.data = data;
166199

200+
201+
167202
testForm.addEventListener('serialize-form', function(e){
168203
console.log('serialize-form', e.detail);
169204
});

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -368,7 +368,7 @@
368368

369369
valid = result.length === testSet.length;
370370
} else if (typeof(validation) === 'function') {
371-
valid = validation(key, value, this.data, this.view);
371+
valid = validation(key, value, this.data, field, this.view);
372372
}
373373

374374
// show or hide messaging in the ui

‎src/mm-repeater/index.html‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@
9191
</style>
9292
</head>
9393
<body>
94+
9495
<div id='container' class="col c4">
9596
<mm-repeater id="repeater">
9697
<template preserve-content>
@@ -111,27 +112,26 @@
111112

112113
<hr style="margin-bottom: 30px;">
113114

114-
<mm-header>Prepopulated</mm-header>
115-
<mm-repeater id="withData">
116-
<template preserve-content>
117-
<mm-input name="name" validation="alpha"></mm-input>
118-
<mm-dropdown name="firstOption">
119-
<mm-list-item>Test Item 1</mm-list-item>
120-
<mm-list-item>Test Item 2</mm-list-item>
121-
<mm-list-item>Test Item 3</mm-list-item>
122-
<mm-list-item>Test Item 4</mm-list-item>
123-
</mm-dropdown>
124-
<mm-group name="secondOption">
125-
<mm-radio><label>Test 1</label></mm-radio>
126-
<mm-radio><label>Test 2</label></mm-radio>
127-
<mm-radio><label>Test 3</label></mm-radio>
128-
</mm-group>
129-
</template>
130-
</mm-repeater>
131-
132-
133-
134-
<mm-button style="margin: 10px 0;" id="validateBtn"><label>Validate!</label></mm-button>
115+
<mm-header>Prepopulated</mm-header>
116+
<mm-repeater id="withData">
117+
<template preserve-content>
118+
<mm-input name="name" validation="alpha"></mm-input>
119+
<mm-dropdown name="firstOption">
120+
<mm-list-item>Test Item 1</mm-list-item>
121+
<mm-list-item>Test Item 2</mm-list-item>
122+
<mm-list-item>Test Item 3</mm-list-item>
123+
<mm-list-item>Test Item 4</mm-list-item>
124+
</mm-dropdown>
125+
<mm-group name="secondOption">
126+
<mm-radio><label>Test 1</label></mm-radio>
127+
<mm-radio><label>Test 2</label></mm-radio>
128+
<mm-radio><label>Test 3</label></mm-radio>
129+
</mm-group>
130+
</template>
131+
</mm-repeater>
132+
133+
<mm-button style="margin: 10px 0;" id="validateBtn"><label>Validate!</label></mm-button>
134+
135135
</div>
136136

137137
<script>

‎src/mm-repeater/mm-repeater.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,8 +131,8 @@
131131
},
132132

133133
validate: function() {
134-
this.data.forEach(function(item, index) {
135134

135+
this.data.forEach(function(item, index) {
136136
var valid = true;
137137

138138
if(typeof item.validation === 'function') {
@@ -159,6 +159,8 @@
159159
this.set('data.'+index+'.errorMessage', item.errorMessage);
160160

161161
}, this);
162+
163+
return false;
162164
},
163165

164166
validation: this.validate,

‎src/strand.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,5 +42,4 @@
4242
<link rel="import" href="mm-textarea/mm-textarea.html">
4343
<link rel="import" href="mm-tooltip/mm-tooltip.html">
4444
<link rel="import" href="mm-form/mm-form.html">
45-
<!-- TODO: remove before merging mm-form for test/dev only! -->
46-
<link rel="import" href="mm-dimensions/mm-dimensions.html">
45+
<link rel="import" href="mm-repeater/mm-repeater.html">

0 commit comments

Comments
 (0)