| OLD | NEW |
| (Empty) |
| 1 | |
| 2 | |
| 3 Polymer({ | |
| 4 | |
| 5 is: 'iron-iconset', | |
| 6 | |
| 7 properties: { | |
| 8 | |
| 9 /** | |
| 10 * The URL of the iconset image. | |
| 11 * | |
| 12 * @attribute src | |
| 13 * @type string | |
| 14 * @default '' | |
| 15 */ | |
| 16 src: { | |
| 17 type: String, | |
| 18 observer: '_srcChanged' | |
| 19 }, | |
| 20 | |
| 21 /** | |
| 22 * The name of the iconset. | |
| 23 * | |
| 24 * @attribute name | |
| 25 * @type string | |
| 26 * @default 'no-name' | |
| 27 */ | |
| 28 name: { | |
| 29 type: String, | |
| 30 observer: '_nameChanged' | |
| 31 }, | |
| 32 | |
| 33 /** | |
| 34 * The width of the iconset image. This must only be specified if the | |
| 35 * icons are arranged into separate rows inside the image. | |
| 36 * | |
| 37 * @attribute width | |
| 38 * @type number | |
| 39 * @default 0 | |
| 40 */ | |
| 41 width: { | |
| 42 type: Number, | |
| 43 value: 0 | |
| 44 }, | |
| 45 | |
| 46 /** | |
| 47 * A space separated list of names corresponding to icons in the iconset | |
| 48 * image file. This list must be ordered the same as the icon images | |
| 49 * in the image file. | |
| 50 * | |
| 51 * @attribute icons | |
| 52 * @type string | |
| 53 * @default '' | |
| 54 */ | |
| 55 icons: { | |
| 56 type: String | |
| 57 }, | |
| 58 | |
| 59 /** | |
| 60 * The size of an individual icon. Note that icons must be square. | |
| 61 * | |
| 62 * @attribute size | |
| 63 * @type number | |
| 64 * @default 24 | |
| 65 */ | |
| 66 size: { | |
| 67 type: Number, | |
| 68 value: 24 | |
| 69 }, | |
| 70 | |
| 71 /** | |
| 72 * The horizontal offset of the icon images in the inconset src image. | |
| 73 * This is typically used if the image resource contains additional images | |
| 74 * beside those intended for the iconset. | |
| 75 * | |
| 76 * @attribute offset-x | |
| 77 * @type number | |
| 78 * @default 0 | |
| 79 */ | |
| 80 _offsetX: { | |
| 81 type: Number, | |
| 82 value: 0 | |
| 83 }, | |
| 84 | |
| 85 /** | |
| 86 * The vertical offset of the icon images in the inconset src image. | |
| 87 * This is typically used if the image resource contains additional images | |
| 88 * beside those intended for the iconset. | |
| 89 * | |
| 90 * @attribute offset-y | |
| 91 * @type number | |
| 92 * @default 0 | |
| 93 */ | |
| 94 _offsetY: { | |
| 95 type: Number, | |
| 96 value: 0 | |
| 97 }, | |
| 98 | |
| 99 /** | |
| 100 * Array of fully-qualified names of icons in this set. | |
| 101 */ | |
| 102 iconNames: { | |
| 103 type: Array, | |
| 104 notify: true | |
| 105 } | |
| 106 | |
| 107 }, | |
| 108 | |
| 109 hostAttributes: { | |
| 110 // non-visual | |
| 111 style: 'display: none;' | |
| 112 }, | |
| 113 | |
| 114 ready: function() { | |
| 115 // theme data must exist at ready-time | |
| 116 this._themes = this._mapThemes(); | |
| 117 }, | |
| 118 | |
| 119 /** | |
| 120 * Applies an icon to the given element as a css background image. This | |
| 121 * method does not size the element, and it's usually necessary to set | |
| 122 * the element's height and width so that the background image is visible. | |
| 123 * | |
| 124 * @method applyIcon | |
| 125 * @param {Element} element The element to which the icon is applied. | |
| 126 * @param {String|Number} icon The name or index of the icon to apply. | |
| 127 * @param {String} theme (optional) The name or index of the icon to apply. | |
| 128 * @param {Number} scale (optional, defaults to 1) Icon scaling factor. | |
| 129 * @return {Element} The applied icon element. | |
| 130 */ | |
| 131 applyIcon: function(element, icon, theme, scale) { | |
| 132 this._validateIconMap(); | |
| 133 var offset = this._getThemedOffset(icon, theme); | |
| 134 if (element && offset) { | |
| 135 this._addIconStyles(element, this._srcUrl, offset, scale || 1, | |
| 136 this.size, this.width); | |
| 137 } | |
| 138 }, | |
| 139 | |
| 140 /** | |
| 141 * Remove an icon from the given element by undoing the changes effected | |
| 142 * by `applyIcon`. | |
| 143 * | |
| 144 * @param {Element} element The element from which the icon is removed. | |
| 145 */ | |
| 146 removeIcon: function(element) { | |
| 147 this._removeIconStyles(element.style); | |
| 148 }, | |
| 149 | |
| 150 _mapThemes: function() { | |
| 151 var themes = Object.create(null); | |
| 152 Polymer.dom(this).querySelectorAll('property[theme]') | |
| 153 .forEach(function(property) { | |
| 154 var offsetX = window.parseInt( | |
| 155 property.getAttribute('offset-x'), 10 | |
| 156 ) || 0; | |
| 157 var offsetY = window.parseInt( | |
| 158 property.getAttribute('offset-y'), 10 | |
| 159 ) || 0; | |
| 160 themes[property.getAttribute('theme')] = { | |
| 161 offsetX: offsetX, | |
| 162 offsetY: offsetY | |
| 163 }; | |
| 164 }); | |
| 165 return themes; | |
| 166 }, | |
| 167 | |
| 168 _srcChanged: function(src) { | |
| 169 // ensure `srcUrl` is always relative to the main document | |
| 170 this._srcUrl = this.ownerDocument !== document | |
| 171 ? this.resolveUrl(src) : src; | |
| 172 this._prepareIconset(); | |
| 173 }, | |
| 174 | |
| 175 _nameChanged: function(name) { | |
| 176 this._prepareIconset(); | |
| 177 }, | |
| 178 | |
| 179 _prepareIconset: function() { | |
| 180 new Polymer.IronMeta({type: 'iconset', key: this.name, value: this}); | |
| 181 }, | |
| 182 | |
| 183 _invalidateIconMap: function() { | |
| 184 this._iconMapValid = false; | |
| 185 }, | |
| 186 | |
| 187 _validateIconMap: function() { | |
| 188 if (!this._iconMapValid) { | |
| 189 this._recomputeIconMap(); | |
| 190 this._iconMapValid = true; | |
| 191 } | |
| 192 }, | |
| 193 | |
| 194 _recomputeIconMap: function() { | |
| 195 this.iconNames = this._computeIconNames(this.icons); | |
| 196 this.iconMap = this._computeIconMap(this._offsetX, this._offsetY, | |
| 197 this.size, this.width, this.iconNames); | |
| 198 }, | |
| 199 | |
| 200 _computeIconNames: function(icons) { | |
| 201 return icons.split(/\s+/g); | |
| 202 }, | |
| 203 | |
| 204 _computeIconMap: function(offsetX, offsetY, size, width, iconNames) { | |
| 205 var iconMap = {}; | |
| 206 if (offsetX !== undefined && offsetY !== undefined) { | |
| 207 var x0 = offsetX; | |
| 208 iconNames.forEach(function(iconName) { | |
| 209 iconMap[iconName] = { | |
| 210 offsetX: offsetX, | |
| 211 offsetY: offsetY | |
| 212 }; | |
| 213 if ((offsetX + size) < width) { | |
| 214 offsetX += size; | |
| 215 } else { | |
| 216 offsetX = x0; | |
| 217 offsetY += size; | |
| 218 } | |
| 219 }, this); | |
| 220 } | |
| 221 return iconMap; | |
| 222 }, | |
| 223 | |
| 224 /** | |
| 225 * Returns an object containing `offsetX` and `offsetY` properties which | |
| 226 * specify the pixel location in the iconset's src file for the given | |
| 227 * `icon` and `theme`. It's uncommon to call this method. It is useful, | |
| 228 * for example, to manually position a css backgroundImage to the proper | |
| 229 * offset. It's more common to use the `applyIcon` method. | |
| 230 * | |
| 231 * @method getThemedOffset | |
| 232 * @param {String|Number} identifier The name of the icon or the index of | |
| 233 * the icon within in the icon image. | |
| 234 * @param {String} theme The name of the theme. | |
| 235 * @returns {Object} An object specifying the offset of the given icon | |
| 236 * within the icon resource file; `offsetX` is the horizontal offset and | |
| 237 * `offsetY` is the vertical offset. Both values are in pixel units. | |
| 238 */ | |
| 239 _getThemedOffset: function(identifier, theme) { | |
| 240 var iconOffset = this._getIconOffset(identifier); | |
| 241 var themeOffset = this._themes[theme]; | |
| 242 if (iconOffset && themeOffset) { | |
| 243 return { | |
| 244 offsetX: iconOffset.offsetX + themeOffset.offsetX, | |
| 245 offsetY: iconOffset.offsetY + themeOffset.offsetY | |
| 246 }; | |
| 247 } | |
| 248 return iconOffset; | |
| 249 }, | |
| 250 | |
| 251 _getIconOffset: function(identifier) { | |
| 252 // TODO(sjmiles): consider creating offsetArray (indexed by Number) | |
| 253 // and having iconMap map names to indices, then and index is just | |
| 254 // iconMap[identifier] || identifier (be careful of zero, store indices | |
| 255 // as 1-based) | |
| 256 return this.iconMap[identifier] || | |
| 257 this.iconMap[this.iconNames[Number(identifier)]]; | |
| 258 }, | |
| 259 | |
| 260 _addIconStyles: function(element, url, offset, scale, size, width) { | |
| 261 var style = element.style; | |
| 262 style.backgroundImage = 'url(' + url + ')'; | |
| 263 style.backgroundPosition = | |
| 264 (-offset.offsetX * scale + 'px') + ' ' + | |
| 265 (-offset.offsetY * scale + 'px'); | |
| 266 style.backgroundSize = (scale === 1) ? 'auto' : width * scale + 'px'; | |
| 267 style.width = size + 'px'; | |
| 268 style.height = size + 'px'; | |
| 269 element.setAttribute('role', 'img'); | |
| 270 }, | |
| 271 | |
| 272 _removeIconStyles: function(style) { | |
| 273 style.background = ''; | |
| 274 } | |
| 275 | |
| 276 }); | |
| 277 | |
| OLD | NEW |