| 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 |