OLD | NEW |
1 <!-- | 1 <!-- |
2 @license | 2 @license |
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 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 | 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 | 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 | 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 | 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 | 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
9 --> | 9 --> |
10 | 10 |
11 <link rel="import" href="../polymer/polymer.html"> | 11 <link rel="import" href="../polymer/polymer.html"> |
12 | 12 |
13 <!-- | 13 <!-- |
14 `iron-meta` is a generic element you can use for sharing information across the
DOM tree. | 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 | 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 | 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 | 17 information. You can use `iron-meta` to share whatever you want (or create an ex
tension |
18 [like x-meta] for enhancements). | 18 [like x-meta] for enhancements). |
19 | 19 |
20 The `iron-meta` instances containing your actual data can be loaded in an import
, | 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 | 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. | 22 before you try to access them. |
23 | 23 |
24 Examples: | 24 Examples: |
25 | 25 |
26 If I create an instance like this: | 26 If I create an instance like this: |
27 | 27 |
28 <iron-meta key="info" keyUrl="foo/bar"></iron-meta> | 28 <iron-meta key="info" value="foo/bar"></iron-meta> |
29 | 29 |
30 Note that keyUrl="foo/bar" is the metadata I've defined. I could define more | 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. | 31 attributes or use child nodes to define additional metadata. |
32 | 32 |
33 Now I can access that element (and it's metadata) from any iron-meta instance | 33 Now I can access that element (and it's metadata) from any iron-meta instance |
34 via the byKey method, e.g. | 34 via the byKey method, e.g. |
35 | 35 |
36 meta.byKey('info').getAttribute('keyUrl'). | 36 meta.byKey('info').getAttribute('value'). |
37 | 37 |
38 Pure imperative form would be like: | 38 Pure imperative form would be like: |
39 | 39 |
40 document.createElement('iron-meta').byKey('info').getAttribute('keyUrl'); | 40 document.createElement('iron-meta').byKey('info').getAttribute('value'); |
41 | 41 |
42 Or, in a Polymer element, you can include a meta in your template: | 42 Or, in a Polymer element, you can include a meta in your template: |
43 | 43 |
44 <iron-meta id="meta"></iron-meta> | 44 <iron-meta id="meta"></iron-meta> |
45 ... | 45 ... |
46 this.$.meta.byKey('info').getAttribute('keyUrl'); | 46 this.$.meta.byKey('info').getAttribute('value'); |
47 | 47 |
48 @group Iron Elements | 48 @group Iron Elements |
49 @demo demo/index.html | 49 @demo demo/index.html |
50 @hero hero.svg | 50 @hero hero.svg |
51 @element iron-meta | 51 @element iron-meta |
52 --> | 52 --> |
53 | 53 |
54 <script> | 54 <script> |
55 | 55 |
56 (function() { | 56 (function() { |
57 | 57 |
58 // monostate data | 58 // monostate data |
59 var metaDatas = {}; | 59 var metaDatas = {}; |
60 var metaArrays = {}; | 60 var metaArrays = {}; |
61 | 61 |
62 Polymer.IronMeta = Polymer({ | 62 Polymer.IronMeta = Polymer({ |
63 | 63 |
64 is: 'iron-meta', | 64 is: 'iron-meta', |
65 | 65 |
66 properties: { | 66 properties: { |
67 | 67 |
68 /** | 68 /** |
69 * The type of meta-data. All meta-data of the same type is stored | 69 * The type of meta-data. All meta-data of the same type is stored |
70 * together. | 70 * together. |
71 * | |
72 * @attribute type | |
73 * @type String | |
74 * @default 'default' | |
75 */ | 71 */ |
76 type: { | 72 type: { |
77 type: String, | 73 type: String, |
78 value: 'default', | 74 value: 'default', |
79 observer: '_typeChanged' | 75 observer: '_typeChanged' |
80 }, | 76 }, |
81 | 77 |
82 /** | 78 /** |
83 * The key used to store `value` under the `type` namespace. | 79 * The key used to store `value` under the `type` namespace. |
84 * | |
85 * @attribute key | |
86 * @type String | |
87 * @default '' | |
88 */ | 80 */ |
89 key: { | 81 key: { |
90 type: String, | 82 type: String, |
91 observer: '_keyChanged' | 83 observer: '_keyChanged' |
92 }, | 84 }, |
93 | 85 |
94 /** | 86 /** |
95 * The meta-data to store or retrieve. | 87 * The meta-data to store or retrieve. |
96 * | |
97 * @attribute value | |
98 * @type * | |
99 * @default this | |
100 */ | 88 */ |
101 value: { | 89 value: { |
102 type: Object, | 90 type: Object, |
103 notify: true, | 91 notify: true, |
104 observer: '_valueChanged' | 92 observer: '_valueChanged' |
105 }, | 93 }, |
106 | 94 |
107 /** | 95 /** |
108 * If true, `value` is set to the iron-meta instance itself. | 96 * If true, `value` is set to the iron-meta instance itself. |
109 * | |
110 * @attribute self | |
111 * @type Boolean | |
112 * @default false | |
113 */ | 97 */ |
114 self: { | 98 self: { |
115 type: Boolean, | 99 type: Boolean, |
116 observer: '_selfChanged' | 100 observer: '_selfChanged' |
117 }, | 101 }, |
118 | 102 |
119 /** | 103 /** |
120 * Array of all meta-data values for the given type. | 104 * Array of all meta-data values for the given type. |
121 * | |
122 * @property list | |
123 * @type Array | |
124 */ | 105 */ |
125 list: { | 106 list: { |
126 type: Array, | 107 type: Array, |
127 notify: true | 108 notify: true |
128 } | 109 } |
129 | 110 |
130 }, | 111 }, |
131 | 112 |
132 /** | 113 /** |
133 * Only runs if someone invokes the factory/constructor directly | 114 * Only runs if someone invokes the factory/constructor directly |
(...skipping 43 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
177 metaArrays[type] = []; | 158 metaArrays[type] = []; |
178 } | 159 } |
179 this.list = metaArrays[type]; | 160 this.list = metaArrays[type]; |
180 this._registerKeyValue(this.key, this.value); | 161 this._registerKeyValue(this.key, this.value); |
181 }, | 162 }, |
182 | 163 |
183 /** | 164 /** |
184 * Retrieves meta data value by key. | 165 * Retrieves meta data value by key. |
185 * | 166 * |
186 * @method byKey | 167 * @method byKey |
187 * @param {String} key The key of the meta-data to be returned. | 168 * @param {string} key The key of the meta-data to be returned. |
188 * @returns * | 169 * @return {*} |
189 */ | 170 */ |
190 byKey: function(key) { | 171 byKey: function(key) { |
191 return this._metaData && this._metaData[key]; | 172 return this._metaData && this._metaData[key]; |
192 }, | 173 }, |
193 | 174 |
194 _resetRegistration: function(oldKey) { | 175 _resetRegistration: function(oldKey) { |
195 this._unregisterKey(oldKey); | 176 this._unregisterKey(oldKey); |
196 this._registerKeyValue(this.key, this.value); | 177 this._registerKeyValue(this.key, this.value); |
197 }, | 178 }, |
198 | 179 |
(...skipping 26 matching lines...) Expand all Loading... |
225 | 206 |
226 /** | 207 /** |
227 `iron-meta-query` can be used to access infomation stored in `iron-meta`. | 208 `iron-meta-query` can be used to access infomation stored in `iron-meta`. |
228 | 209 |
229 Examples: | 210 Examples: |
230 | 211 |
231 If I create an instance like this: | 212 If I create an instance like this: |
232 | 213 |
233 <iron-meta key="info" value="foo/bar"></iron-meta> | 214 <iron-meta key="info" value="foo/bar"></iron-meta> |
234 | 215 |
235 Note that keyUrl="foo/bar" is the metadata I've defined. I could define more | 216 Note that value="foo/bar" is the metadata I've defined. I could define more |
236 attributes or use child nodes to define additional metadata. | 217 attributes or use child nodes to define additional metadata. |
237 | 218 |
238 Now I can access that element (and it's metadata) from any `iron-meta-query`
instance: | 219 Now I can access that element (and it's metadata) from any `iron-meta-query`
instance: |
239 | 220 |
240 var value = new Polymer.IronMetaQuery({key: 'info'}).value; | 221 var value = new Polymer.IronMetaQuery({key: 'info'}).value; |
241 | 222 |
242 @group Polymer Iron Elements | 223 @group Polymer Iron Elements |
243 @element iron-meta-query | 224 @element iron-meta-query |
244 */ | 225 */ |
245 Polymer.IronMetaQuery = Polymer({ | 226 Polymer.IronMetaQuery = Polymer({ |
246 | 227 |
247 is: 'iron-meta-query', | 228 is: 'iron-meta-query', |
248 | 229 |
249 properties: { | 230 properties: { |
250 | 231 |
251 /** | 232 /** |
252 * The type of meta-data. All meta-data of the same type is stored | 233 * The type of meta-data. All meta-data of the same type is stored |
253 * together. | 234 * together. |
254 * | |
255 * @attribute type | |
256 * @type String | |
257 * @default 'default' | |
258 */ | 235 */ |
259 type: { | 236 type: { |
260 type: String, | 237 type: String, |
261 value: 'default', | 238 value: 'default', |
262 observer: '_typeChanged' | 239 observer: '_typeChanged' |
263 }, | 240 }, |
264 | 241 |
265 /** | 242 /** |
266 * Specifies a key to use for retrieving `value` from the `type` | 243 * Specifies a key to use for retrieving `value` from the `type` |
267 * namespace. | 244 * namespace. |
268 * | |
269 * @attribute key | |
270 * @type String | |
271 */ | 245 */ |
272 key: { | 246 key: { |
273 type: String, | 247 type: String, |
274 observer: '_keyChanged' | 248 observer: '_keyChanged' |
275 }, | 249 }, |
276 | 250 |
277 /** | 251 /** |
278 * The meta-data to store or retrieve. | 252 * The meta-data to store or retrieve. |
279 * | |
280 * @attribute value | |
281 * @type * | |
282 * @default this | |
283 */ | 253 */ |
284 value: { | 254 value: { |
285 type: Object, | 255 type: Object, |
286 notify: true, | 256 notify: true, |
287 readOnly: true | 257 readOnly: true |
288 }, | 258 }, |
289 | 259 |
290 /** | 260 /** |
291 * Array of all meta-data values for the given type. | 261 * Array of all meta-data values for the given type. |
292 * | |
293 * @property list | |
294 * @type Array | |
295 */ | 262 */ |
296 list: { | 263 list: { |
297 type: Array, | 264 type: Array, |
298 notify: true | 265 notify: true |
299 } | 266 } |
300 | 267 |
301 }, | 268 }, |
302 | 269 |
303 /** | 270 /** |
304 * Actually a factory method, not a true constructor. Only runs if | 271 * Actually a factory method, not a true constructor. Only runs if |
305 * someone invokes it directly (via `new Polymer.IronMeta()`); | 272 * someone invokes it directly (via `new Polymer.IronMeta()`); |
306 */ | 273 */ |
307 constructor: function(config) { | 274 factoryImpl: function(config) { |
308 if (config) { | 275 if (config) { |
309 for (var n in config) { | 276 for (var n in config) { |
310 switch(n) { | 277 switch(n) { |
311 case 'type': | 278 case 'type': |
312 case 'key': | 279 case 'key': |
313 this[n] = config[n]; | 280 this[n] = config[n]; |
314 break; | 281 break; |
315 } | 282 } |
316 } | 283 } |
317 } | 284 } |
(...skipping 12 matching lines...) Expand all Loading... |
330 _typeChanged: function(type) { | 297 _typeChanged: function(type) { |
331 this._metaData = metaDatas[type]; | 298 this._metaData = metaDatas[type]; |
332 this.list = metaArrays[type]; | 299 this.list = metaArrays[type]; |
333 if (this.key) { | 300 if (this.key) { |
334 this._keyChanged(this.key); | 301 this._keyChanged(this.key); |
335 } | 302 } |
336 }, | 303 }, |
337 | 304 |
338 /** | 305 /** |
339 * Retrieves meta data value by key. | 306 * Retrieves meta data value by key. |
340 * | 307 * @param {string} key The key of the meta-data to be returned. |
341 * @method byKey | 308 * @return {*} |
342 * @param {String} key The key of the meta-data to be returned. | |
343 * @returns * | |
344 */ | 309 */ |
345 byKey: function(key) { | 310 byKey: function(key) { |
346 return this._metaData && this._metaData[key]; | 311 return this._metaData && this._metaData[key]; |
347 } | 312 } |
348 | 313 |
349 }); | 314 }); |
350 | 315 |
351 })(); | 316 })(); |
352 </script> | 317 </script> |
OLD | NEW |