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 |