OLD | NEW |
1 Polymer({ | 1 Polymer({ |
2 | 2 |
3 is: 'iron-icon', | 3 is: 'iron-icon', |
4 | 4 |
5 properties: { | 5 properties: { |
6 | 6 |
7 /** | 7 /** |
8 * The name of the icon to use. The name should be of the form: | 8 * The name of the icon to use. The name should be of the form: |
9 * `iconset_name:icon_name`. | 9 * `iconset_name:icon_name`. |
10 */ | 10 */ |
(...skipping 18 matching lines...) Expand all Loading... |
29 */ | 29 */ |
30 src: { | 30 src: { |
31 type: String, | 31 type: String, |
32 observer: '_srcChanged' | 32 observer: '_srcChanged' |
33 }, | 33 }, |
34 | 34 |
35 /** | 35 /** |
36 * @type {!Polymer.IronMeta} | 36 * @type {!Polymer.IronMeta} |
37 */ | 37 */ |
38 _meta: { | 38 _meta: { |
39 value: Polymer.Base.create('iron-meta', {type: 'iconset'}) | 39 value: Polymer.Base.create('iron-meta', {type: 'iconset'}), |
| 40 observer: '_updateIcon' |
40 } | 41 } |
41 | 42 |
42 }, | 43 }, |
43 | 44 |
44 _DEFAULT_ICONSET: 'icons', | 45 _DEFAULT_ICONSET: 'icons', |
45 | 46 |
46 _iconChanged: function(icon) { | 47 _iconChanged: function(icon) { |
47 var parts = (icon || '').split(':'); | 48 var parts = (icon || '').split(':'); |
48 this._iconName = parts.pop(); | 49 this._iconName = parts.pop(); |
49 this._iconsetName = parts.pop() || this._DEFAULT_ICONSET; | 50 this._iconsetName = parts.pop() || this._DEFAULT_ICONSET; |
50 this._updateIcon(); | 51 this._updateIcon(); |
51 }, | 52 }, |
52 | 53 |
53 _srcChanged: function(src) { | 54 _srcChanged: function(src) { |
54 this._updateIcon(); | 55 this._updateIcon(); |
55 }, | 56 }, |
56 | 57 |
57 _usesIconset: function() { | 58 _usesIconset: function() { |
58 return this.icon || !this.src; | 59 return this.icon || !this.src; |
59 }, | 60 }, |
60 | 61 |
61 /** @suppress {visibility} */ | 62 /** @suppress {visibility} */ |
62 _updateIcon: function() { | 63 _updateIcon: function() { |
63 if (this._usesIconset()) { | 64 if (this._usesIconset()) { |
64 if (this._iconsetName) { | 65 if (this._img && this._img.parentNode) { |
| 66 Polymer.dom(this.root).removeChild(this._img); |
| 67 } |
| 68 if (this._iconName === "") { |
| 69 if (this._iconset) { |
| 70 this._iconset.removeIcon(this); |
| 71 } |
| 72 } else if (this._iconsetName && this._meta) { |
65 this._iconset = /** @type {?Polymer.Iconset} */ ( | 73 this._iconset = /** @type {?Polymer.Iconset} */ ( |
66 this._meta.byKey(this._iconsetName)); | 74 this._meta.byKey(this._iconsetName)); |
67 if (this._iconset) { | 75 if (this._iconset) { |
68 this._iconset.applyIcon(this, this._iconName, this.theme); | 76 this._iconset.applyIcon(this, this._iconName, this.theme); |
69 this.unlisten(window, 'iron-iconset-added', '_updateIcon'); | 77 this.unlisten(window, 'iron-iconset-added', '_updateIcon'); |
70 } else { | 78 } else { |
71 this.listen(window, 'iron-iconset-added', '_updateIcon'); | 79 this.listen(window, 'iron-iconset-added', '_updateIcon'); |
72 } | 80 } |
73 } | 81 } |
74 } else { | 82 } else { |
| 83 if (this._iconset) { |
| 84 this._iconset.removeIcon(this); |
| 85 } |
75 if (!this._img) { | 86 if (!this._img) { |
76 this._img = document.createElement('img'); | 87 this._img = document.createElement('img'); |
77 this._img.style.width = '100%'; | 88 this._img.style.width = '100%'; |
78 this._img.style.height = '100%'; | 89 this._img.style.height = '100%'; |
79 this._img.draggable = false; | 90 this._img.draggable = false; |
80 } | 91 } |
81 this._img.src = this.src; | 92 this._img.src = this.src; |
82 Polymer.dom(this.root).appendChild(this._img); | 93 Polymer.dom(this.root).appendChild(this._img); |
83 } | 94 } |
84 } | 95 } |
85 | 96 |
86 }); | 97 }); |
OLD | NEW |