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 |
(...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
52 Then a themed icon can be applied like this: | 52 Then a themed icon can be applied like this: |
53 | 53 |
54 iconset.applyIcon(iconNode, 'car', 'special'); | 54 iconset.applyIcon(iconNode, 'car', 'special'); |
55 | 55 |
56 @element iron-iconset | 56 @element iron-iconset |
57 @demo demo/index.html | 57 @demo demo/index.html |
58 --> | 58 --> |
59 | 59 |
60 <script> | 60 <script> |
61 | 61 |
| 62 /** |
| 63 * @implements {Polymer.Iconset} |
| 64 */ |
62 Polymer({ | 65 Polymer({ |
63 | 66 |
64 is: 'iron-iconset', | 67 is: 'iron-iconset', |
65 | 68 |
66 properties: { | 69 properties: { |
67 | 70 |
68 /** | 71 /** |
69 * The URL of the iconset image. | 72 * The URL of the iconset image. |
70 * | |
71 * @attribute src | |
72 * @type string | |
73 * @default '' | |
74 */ | 73 */ |
75 src: { | 74 src: { |
76 type: String, | 75 type: String, |
77 observer: '_srcChanged' | 76 observer: '_srcChanged' |
78 }, | 77 }, |
79 | 78 |
80 /** | 79 /** |
81 * The name of the iconset. | 80 * The name of the iconset. |
82 * | |
83 * @attribute name | |
84 * @type string | |
85 * @default 'no-name' | |
86 */ | 81 */ |
87 name: { | 82 name: { |
88 type: String, | 83 type: String, |
89 observer: '_nameChanged' | 84 observer: '_nameChanged' |
90 }, | 85 }, |
91 | 86 |
92 /** | 87 /** |
93 * The width of the iconset image. This must only be specified if the | 88 * The width of the iconset image. This must only be specified if the |
94 * icons are arranged into separate rows inside the image. | 89 * icons are arranged into separate rows inside the image. |
95 * | 90 * |
96 * @attribute width | 91 * @attribute width |
97 * @type number | 92 * @type number |
98 * @default 0 | 93 * @default 0 |
99 */ | 94 */ |
100 width: { | 95 width: { |
101 type: Number, | 96 type: Number, |
102 value: 0 | 97 value: 0 |
103 }, | 98 }, |
104 | 99 |
105 /** | 100 /** |
106 * A space separated list of names corresponding to icons in the iconset | 101 * A space separated list of names corresponding to icons in the iconset |
107 * image file. This list must be ordered the same as the icon images | 102 * image file. This list must be ordered the same as the icon images |
108 * in the image file. | 103 * in the image file. |
109 * | |
110 * @attribute icons | |
111 * @type string | |
112 * @default '' | |
113 */ | 104 */ |
114 icons: { | 105 icons: { |
115 type: String | 106 type: String |
116 }, | 107 }, |
117 | 108 |
118 /** | 109 /** |
119 * The size of an individual icon. Note that icons must be square. | 110 * The size of an individual icon. Note that icons must be square. |
120 * | |
121 * @attribute size | |
122 * @type number | |
123 * @default 24 | |
124 */ | 111 */ |
125 size: { | 112 size: { |
126 type: Number, | 113 type: Number, |
127 value: 24 | 114 value: 24 |
128 }, | 115 }, |
129 | 116 |
130 /** | 117 /** |
131 * The horizontal offset of the icon images in the inconset src image. | 118 * The horizontal offset of the icon images in the inconset src image. |
132 * This is typically used if the image resource contains additional images | 119 * This is typically used if the image resource contains additional images |
133 * beside those intended for the iconset. | 120 * beside those intended for the iconset. |
134 * | |
135 * @attribute offset-x | |
136 * @type number | |
137 * @default 0 | |
138 */ | 121 */ |
139 _offsetX: { | 122 _offsetX: { |
140 type: Number, | 123 type: Number, |
141 value: 0 | 124 value: 0 |
142 }, | 125 }, |
143 | 126 |
144 /** | 127 /** |
145 * The vertical offset of the icon images in the inconset src image. | 128 * The vertical offset of the icon images in the inconset src image. |
146 * This is typically used if the image resource contains additional images | 129 * This is typically used if the image resource contains additional images |
147 * beside those intended for the iconset. | 130 * beside those intended for the iconset. |
148 * | |
149 * @attribute offset-y | |
150 * @type number | |
151 * @default 0 | |
152 */ | 131 */ |
153 _offsetY: { | 132 _offsetY: { |
154 type: Number, | 133 type: Number, |
155 value: 0 | 134 value: 0 |
156 }, | 135 }, |
157 | 136 |
158 /** | 137 /** |
159 * Array of fully-qualified names of icons in this set. | 138 * Array of fully-qualified names of icons in this set. |
160 */ | 139 */ |
161 iconNames: { | 140 iconNames: { |
(...skipping 11 matching lines...) Expand all Loading... |
173 ready: function() { | 152 ready: function() { |
174 // theme data must exist at ready-time | 153 // theme data must exist at ready-time |
175 this._themes = this._mapThemes(); | 154 this._themes = this._mapThemes(); |
176 }, | 155 }, |
177 | 156 |
178 /** | 157 /** |
179 * Applies an icon to the given element as a css background image. This | 158 * Applies an icon to the given element as a css background image. This |
180 * method does not size the element, and it's usually necessary to set | 159 * method does not size the element, and it's usually necessary to set |
181 * the element's height and width so that the background image is visible. | 160 * the element's height and width so that the background image is visible. |
182 * | 161 * |
183 * @method applyIcon | |
184 * @param {Element} element The element to which the icon is applied. | 162 * @param {Element} element The element to which the icon is applied. |
185 * @param {String|Number} icon The name or index of the icon to apply. | 163 * @param {string|number} icon The name or index of the icon to apply. |
186 * @param {String} theme (optional) The name or index of the icon to apply. | 164 * @param {string=} theme (optional) The name or index of the icon to apply. |
187 * @param {Number} scale (optional, defaults to 1) Icon scaling factor. | 165 * @param {number=} scale (optional, defaults to 1) Icon scaling factor. |
188 */ | 166 */ |
189 applyIcon: function(element, icon, theme, scale) { | 167 applyIcon: function(element, icon, theme, scale) { |
190 this._validateIconMap(); | 168 this._validateIconMap(); |
191 var offset = this._getThemedOffset(icon, theme); | 169 var offset = this._getThemedOffset(icon, theme); |
192 if (element && offset) { | 170 if (element && offset) { |
193 this._addIconStyles(element, this._srcUrl, offset, scale || 1, | 171 this._addIconStyles(element, this._srcUrl, offset, scale || 1, |
194 this.size, this.width); | 172 this.size, this.width); |
195 } | 173 } |
196 }, | 174 }, |
197 | 175 |
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
229 ? this.resolveUrl(src) : src; | 207 ? this.resolveUrl(src) : src; |
230 this._prepareIconset(); | 208 this._prepareIconset(); |
231 }, | 209 }, |
232 | 210 |
233 _nameChanged: function(name) { | 211 _nameChanged: function(name) { |
234 this._prepareIconset(); | 212 this._prepareIconset(); |
235 }, | 213 }, |
236 | 214 |
237 _prepareIconset: function() { | 215 _prepareIconset: function() { |
238 new Polymer.IronMeta({type: 'iconset', key: this.name, value: this}); | 216 new Polymer.IronMeta({type: 'iconset', key: this.name, value: this}); |
| 217 this.async(function() { |
| 218 this.fire('iron-iconset-added', this, {node: window}); |
| 219 }); |
239 }, | 220 }, |
240 | 221 |
241 _invalidateIconMap: function() { | 222 _invalidateIconMap: function() { |
242 this._iconMapValid = false; | 223 this._iconMapValid = false; |
243 }, | 224 }, |
244 | 225 |
245 _validateIconMap: function() { | 226 _validateIconMap: function() { |
246 if (!this._iconMapValid) { | 227 if (!this._iconMapValid) { |
247 this._recomputeIconMap(); | 228 this._recomputeIconMap(); |
248 this._iconMapValid = true; | 229 this._iconMapValid = true; |
(...skipping 30 matching lines...) Expand all Loading... |
279 return iconMap; | 260 return iconMap; |
280 }, | 261 }, |
281 | 262 |
282 /** | 263 /** |
283 * Returns an object containing `offsetX` and `offsetY` properties which | 264 * Returns an object containing `offsetX` and `offsetY` properties which |
284 * specify the pixel location in the iconset's src file for the given | 265 * specify the pixel location in the iconset's src file for the given |
285 * `icon` and `theme`. It's uncommon to call this method. It is useful, | 266 * `icon` and `theme`. It's uncommon to call this method. It is useful, |
286 * for example, to manually position a css backgroundImage to the proper | 267 * for example, to manually position a css backgroundImage to the proper |
287 * offset. It's more common to use the `applyIcon` method. | 268 * offset. It's more common to use the `applyIcon` method. |
288 * | 269 * |
289 * @method getThemedOffset | 270 * @param {string|number} identifier The name of the icon or the index of |
290 * @param {String|Number} identifier The name of the icon or the index of | |
291 * the icon within in the icon image. | 271 * the icon within in the icon image. |
292 * @param {String} theme The name of the theme. | 272 * @param {string=} theme The name of the theme. |
293 * @returns {Object} An object specifying the offset of the given icon | 273 * @returns {?{offsetX: number, offsetY: number}} An object specifying the |
294 * within the icon resource file; `offsetX` is the horizontal offset and | 274 * offset of the given icon within the icon resource file; `offsetX` is |
295 * `offsetY` is the vertical offset. Both values are in pixel units. | 275 * the horizontal offset and `offsetY` is the vertical offset. Both |
| 276 * values are in pixel units. |
296 */ | 277 */ |
297 _getThemedOffset: function(identifier, theme) { | 278 _getThemedOffset: function(identifier, theme) { |
298 var iconOffset = this._getIconOffset(identifier); | 279 var iconOffset = this._getIconOffset(identifier); |
299 var themeOffset = this._themes[theme]; | 280 var themeOffset = this._themes[theme]; |
300 if (iconOffset && themeOffset) { | 281 if (iconOffset && themeOffset) { |
301 return { | 282 return { |
302 offsetX: iconOffset.offsetX + themeOffset.offsetX, | 283 offsetX: iconOffset.offsetX + themeOffset.offsetX, |
303 offsetY: iconOffset.offsetY + themeOffset.offsetY | 284 offsetY: iconOffset.offsetY + themeOffset.offsetY |
304 }; | 285 }; |
305 } | 286 } |
(...skipping 21 matching lines...) Expand all Loading... |
327 element.setAttribute('role', 'img'); | 308 element.setAttribute('role', 'img'); |
328 }, | 309 }, |
329 | 310 |
330 _removeIconStyles: function(style) { | 311 _removeIconStyles: function(style) { |
331 style.background = ''; | 312 style.background = ''; |
332 } | 313 } |
333 | 314 |
334 }); | 315 }); |
335 | 316 |
336 </script> | 317 </script> |
OLD | NEW |