OLD | NEW |
| (Empty) |
1 <!-- | |
2 @license | |
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | |
4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | |
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | |
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | |
7 Code distributed by Google as part of the polymer project is also | |
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | |
9 --> | |
10 | |
11 <link rel="import" href="../polymer/polymer.html"> | |
12 | |
13 <!-- | |
14 `iron-meta` is a generic element you can use for sharing information across the
DOM tree. | |
15 It uses [monostate pattern](http://c2.com/cgi/wiki?MonostatePattern) such that a
ny | |
16 instance of iron-meta has access to the shared | |
17 information. You can use `iron-meta` to share whatever you want (or create an ex
tension | |
18 [like x-meta] for enhancements). | |
19 | |
20 The `iron-meta` instances containing your actual data can be loaded in an import
, | |
21 or constructed in any way you see fit. The only requirement is that you create t
hem | |
22 before you try to access them. | |
23 | |
24 Examples: | |
25 | |
26 If I create an instance like this: | |
27 | |
28 <iron-meta key="info" value="foo/bar"></iron-meta> | |
29 | |
30 Note that value="foo/bar" is the metadata I've defined. I could define more | |
31 attributes or use child nodes to define additional metadata. | |
32 | |
33 Now I can access that element (and it's metadata) from any iron-meta instance | |
34 via the byKey method, e.g. | |
35 | |
36 meta.byKey('info').getAttribute('value'). | |
37 | |
38 Pure imperative form would be like: | |
39 | |
40 document.createElement('iron-meta').byKey('info').getAttribute('value'); | |
41 | |
42 Or, in a Polymer element, you can include a meta in your template: | |
43 | |
44 <iron-meta id="meta"></iron-meta> | |
45 ... | |
46 this.$.meta.byKey('info').getAttribute('value'); | |
47 | |
48 @group Iron Elements | |
49 @demo demo/index.html | |
50 @hero hero.svg | |
51 @element iron-meta | |
52 --> | |
53 | |
54 <script> | |
55 | |
56 (function() { | |
57 | |
58 // monostate data | |
59 var metaDatas = {}; | |
60 var metaArrays = {}; | |
61 | |
62 Polymer.IronMeta = Polymer({ | |
63 | |
64 is: 'iron-meta', | |
65 | |
66 properties: { | |
67 | |
68 /** | |
69 * The type of meta-data. All meta-data of the same type is stored | |
70 * together. | |
71 */ | |
72 type: { | |
73 type: String, | |
74 value: 'default', | |
75 observer: '_typeChanged' | |
76 }, | |
77 | |
78 /** | |
79 * The key used to store `value` under the `type` namespace. | |
80 */ | |
81 key: { | |
82 type: String, | |
83 observer: '_keyChanged' | |
84 }, | |
85 | |
86 /** | |
87 * The meta-data to store or retrieve. | |
88 */ | |
89 value: { | |
90 type: Object, | |
91 notify: true, | |
92 observer: '_valueChanged' | |
93 }, | |
94 | |
95 /** | |
96 * If true, `value` is set to the iron-meta instance itself. | |
97 */ | |
98 self: { | |
99 type: Boolean, | |
100 observer: '_selfChanged' | |
101 }, | |
102 | |
103 /** | |
104 * Array of all meta-data values for the given type. | |
105 */ | |
106 list: { | |
107 type: Array, | |
108 notify: true | |
109 } | |
110 | |
111 }, | |
112 | |
113 /** | |
114 * Only runs if someone invokes the factory/constructor directly | |
115 * e.g. `new Polymer.IronMeta()` | |
116 */ | |
117 factoryImpl: function(config) { | |
118 if (config) { | |
119 for (var n in config) { | |
120 switch(n) { | |
121 case 'type': | |
122 case 'key': | |
123 case 'value': | |
124 this[n] = config[n]; | |
125 break; | |
126 } | |
127 } | |
128 } | |
129 }, | |
130 | |
131 created: function() { | |
132 // TODO(sjmiles): good for debugging? | |
133 this._metaDatas = metaDatas; | |
134 this._metaArrays = metaArrays; | |
135 }, | |
136 | |
137 _keyChanged: function(key, old) { | |
138 this._resetRegistration(old); | |
139 }, | |
140 | |
141 _valueChanged: function(value) { | |
142 this._resetRegistration(this.key); | |
143 }, | |
144 | |
145 _selfChanged: function(self) { | |
146 if (self) { | |
147 this.value = this; | |
148 } | |
149 }, | |
150 | |
151 _typeChanged: function(type) { | |
152 this._unregisterKey(this.key); | |
153 if (!metaDatas[type]) { | |
154 metaDatas[type] = {}; | |
155 } | |
156 this._metaData = metaDatas[type]; | |
157 if (!metaArrays[type]) { | |
158 metaArrays[type] = []; | |
159 } | |
160 this.list = metaArrays[type]; | |
161 this._registerKeyValue(this.key, this.value); | |
162 }, | |
163 | |
164 /** | |
165 * Retrieves meta data value by key. | |
166 * | |
167 * @method byKey | |
168 * @param {string} key The key of the meta-data to be returned. | |
169 * @return {*} | |
170 */ | |
171 byKey: function(key) { | |
172 return this._metaData && this._metaData[key]; | |
173 }, | |
174 | |
175 _resetRegistration: function(oldKey) { | |
176 this._unregisterKey(oldKey); | |
177 this._registerKeyValue(this.key, this.value); | |
178 }, | |
179 | |
180 _unregisterKey: function(key) { | |
181 this._unregister(key, this._metaData, this.list); | |
182 }, | |
183 | |
184 _registerKeyValue: function(key, value) { | |
185 this._register(key, value, this._metaData, this.list); | |
186 }, | |
187 | |
188 _register: function(key, value, data, list) { | |
189 if (key && data && value !== undefined) { | |
190 data[key] = value; | |
191 list.push(value); | |
192 } | |
193 }, | |
194 | |
195 _unregister: function(key, data, list) { | |
196 if (key && data) { | |
197 if (key in data) { | |
198 var value = data[key]; | |
199 delete data[key]; | |
200 this.arrayDelete(list, value); | |
201 } | |
202 } | |
203 } | |
204 | |
205 }); | |
206 | |
207 /** | |
208 `iron-meta-query` can be used to access infomation stored in `iron-meta`. | |
209 | |
210 Examples: | |
211 | |
212 If I create an instance like this: | |
213 | |
214 <iron-meta key="info" value="foo/bar"></iron-meta> | |
215 | |
216 Note that value="foo/bar" is the metadata I've defined. I could define more | |
217 attributes or use child nodes to define additional metadata. | |
218 | |
219 Now I can access that element (and it's metadata) from any `iron-meta-query`
instance: | |
220 | |
221 var value = new Polymer.IronMetaQuery({key: 'info'}).value; | |
222 | |
223 @group Polymer Iron Elements | |
224 @element iron-meta-query | |
225 */ | |
226 Polymer.IronMetaQuery = Polymer({ | |
227 | |
228 is: 'iron-meta-query', | |
229 | |
230 properties: { | |
231 | |
232 /** | |
233 * The type of meta-data. All meta-data of the same type is stored | |
234 * together. | |
235 */ | |
236 type: { | |
237 type: String, | |
238 value: 'default', | |
239 observer: '_typeChanged' | |
240 }, | |
241 | |
242 /** | |
243 * Specifies a key to use for retrieving `value` from the `type` | |
244 * namespace. | |
245 */ | |
246 key: { | |
247 type: String, | |
248 observer: '_keyChanged' | |
249 }, | |
250 | |
251 /** | |
252 * The meta-data to store or retrieve. | |
253 */ | |
254 value: { | |
255 type: Object, | |
256 notify: true, | |
257 readOnly: true | |
258 }, | |
259 | |
260 /** | |
261 * Array of all meta-data values for the given type. | |
262 */ | |
263 list: { | |
264 type: Array, | |
265 notify: true | |
266 } | |
267 | |
268 }, | |
269 | |
270 /** | |
271 * Actually a factory method, not a true constructor. Only runs if | |
272 * someone invokes it directly (via `new Polymer.IronMeta()`); | |
273 */ | |
274 factoryImpl: function(config) { | |
275 if (config) { | |
276 for (var n in config) { | |
277 switch(n) { | |
278 case 'type': | |
279 case 'key': | |
280 this[n] = config[n]; | |
281 break; | |
282 } | |
283 } | |
284 } | |
285 }, | |
286 | |
287 created: function() { | |
288 // TODO(sjmiles): good for debugging? | |
289 this._metaDatas = metaDatas; | |
290 this._metaArrays = metaArrays; | |
291 }, | |
292 | |
293 _keyChanged: function(key) { | |
294 this._setValue(this._metaData && this._metaData[key]); | |
295 }, | |
296 | |
297 _typeChanged: function(type) { | |
298 this._metaData = metaDatas[type]; | |
299 this.list = metaArrays[type]; | |
300 if (this.key) { | |
301 this._keyChanged(this.key); | |
302 } | |
303 }, | |
304 | |
305 /** | |
306 * Retrieves meta data value by key. | |
307 * @param {string} key The key of the meta-data to be returned. | |
308 * @return {*} | |
309 */ | |
310 byKey: function(key) { | |
311 return this._metaData && this._metaData[key]; | |
312 } | |
313 | |
314 }); | |
315 | |
316 })(); | |
317 </script> | |
OLD | NEW |