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