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" keyUrl="foo/bar"></iron-meta> | |
29 | |
30 Note that keyUrl="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('keyUrl'). | |
37 | |
38 Pure imperative form would be like: | |
39 | |
40 document.createElement('iron-meta').byKey('info').getAttribute('keyUrl'); | |
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('keyUrl'); | |
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 * @attribute type | |
73 * @type String | |
74 * @default 'default' | |
75 */ | |
76 type: { | |
77 type: String, | |
78 value: 'default', | |
79 observer: '_typeChanged' | |
80 }, | |
81 | |
82 /** | |
83 * The key used to store `value` under the `type` namespace. | |
84 * | |
85 * @attribute key | |
86 * @type String | |
87 * @default '' | |
88 */ | |
89 key: { | |
90 type: String, | |
91 observer: '_keyChanged' | |
92 }, | |
93 | |
94 /** | |
95 * The meta-data to store or retrieve. | |
96 * | |
97 * @attribute value | |
98 * @type * | |
99 * @default this | |
100 */ | |
101 value: { | |
102 type: Object, | |
103 notify: true, | |
104 observer: '_valueChanged' | |
105 }, | |
106 | |
107 /** | |
108 * If true, `value` is set to the iron-meta instance itself. | |
109 * | |
110 * @attribute self | |
111 * @type Boolean | |
112 * @default false | |
113 */ | |
114 self: { | |
115 type: Boolean, | |
116 observer: '_selfChanged' | |
117 }, | |
118 | |
119 /** | |
120 * Array of all meta-data values for the given type. | |
121 * | |
122 * @property list | |
123 * @type Array | |
124 */ | |
125 list: { | |
126 type: Array, | |
127 notify: true | |
128 } | |
129 | |
130 }, | |
131 | |
132 /** | |
133 * Only runs if someone invokes the factory/constructor directly | |
134 * e.g. `new Polymer.IronMeta()` | |
135 */ | |
136 factoryImpl: function(config) { | |
137 if (config) { | |
138 for (var n in config) { | |
139 switch(n) { | |
140 case 'type': | |
141 case 'key': | |
142 case 'value': | |
143 this[n] = config[n]; | |
144 break; | |
145 } | |
146 } | |
147 } | |
148 }, | |
149 | |
150 created: function() { | |
151 // TODO(sjmiles): good for debugging? | |
152 this._metaDatas = metaDatas; | |
153 this._metaArrays = metaArrays; | |
154 }, | |
155 | |
156 _keyChanged: function(key, old) { | |
157 this._resetRegistration(old); | |
158 }, | |
159 | |
160 _valueChanged: function(value) { | |
161 this._resetRegistration(this.key); | |
162 }, | |
163 | |
164 _selfChanged: function(self) { | |
165 if (self) { | |
166 this.value = this; | |
167 } | |
168 }, | |
169 | |
170 _typeChanged: function(type) { | |
171 this._unregisterKey(this.key); | |
172 if (!metaDatas[type]) { | |
173 metaDatas[type] = {}; | |
174 } | |
175 this._metaData = metaDatas[type]; | |
176 if (!metaArrays[type]) { | |
177 metaArrays[type] = []; | |
178 } | |
179 this.list = metaArrays[type]; | |
180 this._registerKeyValue(this.key, this.value); | |
181 }, | |
182 | |
183 /** | |
184 * Retrieves meta data value by key. | |
185 * | |
186 * @method byKey | |
187 * @param {String} key The key of the meta-data to be returned. | |
188 * @returns * | |
189 */ | |
190 byKey: function(key) { | |
191 return this._metaData && this._metaData[key]; | |
192 }, | |
193 | |
194 _resetRegistration: function(oldKey) { | |
195 this._unregisterKey(oldKey); | |
196 this._registerKeyValue(this.key, this.value); | |
197 }, | |
198 | |
199 _unregisterKey: function(key) { | |
200 this._unregister(key, this._metaData, this.list); | |
201 }, | |
202 | |
203 _registerKeyValue: function(key, value) { | |
204 this._register(key, value, this._metaData, this.list); | |
205 }, | |
206 | |
207 _register: function(key, value, data, list) { | |
208 if (key && data && value !== undefined) { | |
209 data[key] = value; | |
210 list.push(value); | |
211 } | |
212 }, | |
213 | |
214 _unregister: function(key, data, list) { | |
215 if (key && data) { | |
216 if (key in data) { | |
217 var value = data[key]; | |
218 delete data[key]; | |
219 this.arrayDelete(list, value); | |
220 } | |
221 } | |
222 } | |
223 | |
224 }); | |
225 | |
226 /** | |
227 `iron-meta-query` can be used to access infomation stored in `iron-meta`. | |
228 | |
229 Examples: | |
230 | |
231 If I create an instance like this: | |
232 | |
233 <iron-meta key="info" value="foo/bar"></iron-meta> | |
234 | |
235 Note that keyUrl="foo/bar" is the metadata I've defined. I could define more | |
236 attributes or use child nodes to define additional metadata. | |
237 | |
238 Now I can access that element (and it's metadata) from any `iron-meta-query`
instance: | |
239 | |
240 var value = new Polymer.IronMetaQuery({key: 'info'}).value; | |
241 | |
242 @group Polymer Iron Elements | |
243 @element iron-meta-query | |
244 */ | |
245 Polymer.IronMetaQuery = Polymer({ | |
246 | |
247 is: 'iron-meta-query', | |
248 | |
249 properties: { | |
250 | |
251 /** | |
252 * The type of meta-data. All meta-data of the same type is stored | |
253 * together. | |
254 * | |
255 * @attribute type | |
256 * @type String | |
257 * @default 'default' | |
258 */ | |
259 type: { | |
260 type: String, | |
261 value: 'default', | |
262 observer: '_typeChanged' | |
263 }, | |
264 | |
265 /** | |
266 * Specifies a key to use for retrieving `value` from the `type` | |
267 * namespace. | |
268 * | |
269 * @attribute key | |
270 * @type String | |
271 */ | |
272 key: { | |
273 type: String, | |
274 observer: '_keyChanged' | |
275 }, | |
276 | |
277 /** | |
278 * The meta-data to store or retrieve. | |
279 * | |
280 * @attribute value | |
281 * @type * | |
282 * @default this | |
283 */ | |
284 value: { | |
285 type: Object, | |
286 notify: true, | |
287 readOnly: true | |
288 }, | |
289 | |
290 /** | |
291 * Array of all meta-data values for the given type. | |
292 * | |
293 * @property list | |
294 * @type Array | |
295 */ | |
296 list: { | |
297 type: Array, | |
298 notify: true | |
299 } | |
300 | |
301 }, | |
302 | |
303 /** | |
304 * Actually a factory method, not a true constructor. Only runs if | |
305 * someone invokes it directly (via `new Polymer.IronMeta()`); | |
306 */ | |
307 constructor: function(config) { | |
308 if (config) { | |
309 for (var n in config) { | |
310 switch(n) { | |
311 case 'type': | |
312 case 'key': | |
313 this[n] = config[n]; | |
314 break; | |
315 } | |
316 } | |
317 } | |
318 }, | |
319 | |
320 created: function() { | |
321 // TODO(sjmiles): good for debugging? | |
322 this._metaDatas = metaDatas; | |
323 this._metaArrays = metaArrays; | |
324 }, | |
325 | |
326 _keyChanged: function(key) { | |
327 this._setValue(this._metaData && this._metaData[key]); | |
328 }, | |
329 | |
330 _typeChanged: function(type) { | |
331 this._metaData = metaDatas[type]; | |
332 this.list = metaArrays[type]; | |
333 if (this.key) { | |
334 this._keyChanged(this.key); | |
335 } | |
336 }, | |
337 | |
338 /** | |
339 * Retrieves meta data value by key. | |
340 * | |
341 * @method byKey | |
342 * @param {String} key The key of the meta-data to be returned. | |
343 * @returns * | |
344 */ | |
345 byKey: function(key) { | |
346 return this._metaData && this._metaData[key]; | |
347 } | |
348 | |
349 }); | |
350 | |
351 })(); | |
352 </script> | |
OLD | NEW |