-
Notifications
You must be signed in to change notification settings - Fork 0
/
superform.html
92 lines (78 loc) · 2.51 KB
/
superform.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<dom-module id="super-form">
<template>
<div>
<content></content>
</div>
</template>
<script>
Polymer({
is: "super-form",
extends: 'form',
//value property is assigned to the widget
properties: {
value: {
type: Object,
value: {}
}
},
get value() {
//get the name of form tag
var formname = this.getAttribute('name');
//get the childNodes in this form
var child = Polymer.dom(this).children;
//holds the name value pairs
var valueObj = {};
//loop over the childNodes
for (var j = 0; j < child.length; j++) {
var element = child[j],
name = element.getAttribute('name')
//name is mandatory for the element to be considered
if (name) {
//if element has value property then assign it to name
if (element.value) {
valueObj[name] = element.value;
}
//if element has data-value property then assign it to name
else if (element.getAttribute('data-value')) {
valueObj[name] = element.getAttribute('data-value');
}
//if element is checkbox/radio then checked is assigned to name
//Also picks up Elements whose "role" is checkbox or radiobutton
//Like how Polymer's <iron-form> does it.
else if (element.getAttribute('type') == "checkbox" || element.getAttribute('role') == "checkbox" || element.getAttribute('type') == "radiobutton" || element.getAttribute('role') == "radiobutton") {
valueObj[name] = element.value;
}
//if nothing above is found then assign innerHTML of the element to its name
else {
valueObj[name] = element.innerHTML;
}
}
}
return valueObj;
},
set value (valueObject) {
//loop to find the keys in object
for (name in valueObject) {
var value = valueObject[name];
var childElement = this.querySelector('[name="' + name +'"]')
if (childElement){
if (childElement.value){
childElement.value = value;
}
else if (childElement.hasAttribute('data-name')) {
childElement.setAttribute('data-name', value)
}
else {
childElement.innerHTML = value;
}
}
//The form is giving us a key but there's no element
//with that name.
else {
console.warn('No element with name: "', name, '"')
}
}
}
});
</script>
</dom-module>