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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
|
<link rel="import" href="../../bower_components/polymer/polymer.html">
<!--
hydrogen-set is a plumber component that is driven by events
and produces data in the form of an upward-bindable set.
It provides event handler functions like event-add and
event-del, which may be attached elsewhere as event listeners.
The hydrogen-set then captures those events and adds or
removes their details to an internal set, which it
publishes as out-value.
As an example, you may have a list of input widgets that
generate strings by firing an event. If you attach
the hydrogen-set `event-add` function as the handler
for the input widgets' input event, then the hydrogen-set
will collect and deduplicate all of the strings the
user generated.
Thus, hydrogen-set is useful for capturing semantic
events from across an application, and organizing
the data generated into a single store.
Example:
<hydrogen-set
event-add="{{add}}
event-delete="{{del}}
out-value="{{selected}}"
></hydrogen-set>
<element-one
selected="{{selected}}"
on-select="add"
on-deselect="del"
></element-one>
<element-two
selected="{{selected}}"
on-select="add"
on-deselect="del"
></element-two>
@demo demo/index.html
-->
<script>
Polymer({
is: 'hydrogen-set',
properties: {
/**
* A function to bind to event callback where
* the detail value is the item to add.
*
* @property eventAdd
* @type Function
*/
eventAdd: {
readOnly: true,
notify: true,
type: Function,
value: function() {
return function(e) {
this.add(e.detail);
}.bind(this);
}
},
/**
* A function to bind to event callback where
* the detail value is the item to remove.
*
* @property eventDelete
* @type Function
*/
eventDelete: {
readOnly: true,
notify: true,
type: Function,
value: function() {
return function(e) {
this.delete(e.detail);
}.bind(this);
}
},
/**
* A function to bind to event callback where
* the detail value is the list of items that should
* replace the current set.
*
* @property eventUpdate
* @type Function
*/
eventUpdate: {
readOnly: true,
notify: true,
type: Function,
value: function() {
return function(e) {
this.update(e.detail);
}.bind(this);
}
},
/**
* A function to bind to event callback
* which when called reset the set to the
* empty set ([]).
*
* @property eventClear
* @type Function
*/
eventClear: {
readOnly: true,
notify: true,
type: Function,
value: function() {
return function(e) {
this.clear(e.detail);
}.bind(this);
}
},
/**
* The read-only array representing the set of
* items in this set.
*
* @property outValue
* @type Array
* @default []
*/
outValue: {
type: Array,
readOnly: true,
notify: true,
value: function() {
return [];
}
}
},
/**
* Adds an item to the set.
*/
add: function(value) {
if (this.outValue.indexOf(value) >= 0) { return; }
this.push('outValue', value);
},
/**
* Removes an item from the set.
*/
delete: function(value) {
var i = this.outValue.indexOf(value);
if (i < 0) { return; }
this.splice('outValue', i, 1);
},
/**
* Sets the set to a specific array of items.
*/
update: function(value) {
if (value.constructor === Array) {
var uniq = {};
var list = [];
for (var i=0, l = value.length; i < l; ++i) {
var item = value[i];
if (uniq.hasOwnProperty(item)) {
continue;
}
list.push(item);
uniq[item] = true;
}
this._setOutValue(list)
}
},
/**
* Resets the set to the empty set.
*/
clear: function() {
this.update([]);
}
});
</script>
|
