OLD | NEW |
| (Empty) |
1 | |
2 | |
3 Polymer('core-iconset', { | |
4 | |
5 /** | |
6 * The URL of the iconset image. | |
7 * | |
8 * @attribute src | |
9 * @type string | |
10 * @default '' | |
11 */ | |
12 src: '', | |
13 | |
14 /** | |
15 * The width of the iconset image. This must only be specified if the | |
16 * icons are arranged into separate rows inside the image. | |
17 * | |
18 * @attribute width | |
19 * @type number | |
20 * @default 0 | |
21 */ | |
22 width: 0, | |
23 | |
24 /** | |
25 * A space separated list of names corresponding to icons in the iconset | |
26 * image file. This list must be ordered the same as the icon images | |
27 * in the image file. | |
28 * | |
29 * @attribute icons | |
30 * @type string | |
31 * @default '' | |
32 */ | |
33 icons: '', | |
34 | |
35 /** | |
36 * The size of an individual icon. Note that icons must be square. | |
37 * | |
38 * @attribute iconSize | |
39 * @type number | |
40 * @default 24 | |
41 */ | |
42 iconSize: 24, | |
43 | |
44 /** | |
45 * The horizontal offset of the icon images in the inconset src image. | |
46 * This is typically used if the image resource contains additional images | |
47 * beside those intended for the iconset. | |
48 * | |
49 * @attribute offsetX | |
50 * @type number | |
51 * @default 0 | |
52 */ | |
53 offsetX: 0, | |
54 /** | |
55 * The vertical offset of the icon images in the inconset src image. | |
56 * This is typically used if the image resource contains additional images | |
57 * beside those intended for the iconset. | |
58 * | |
59 * @attribute offsetY | |
60 * @type number | |
61 * @default 0 | |
62 */ | |
63 offsetY: 0, | |
64 type: 'iconset', | |
65 | |
66 created: function() { | |
67 this.iconMap = {}; | |
68 this.iconNames = []; | |
69 this.themes = {}; | |
70 }, | |
71 | |
72 ready: function() { | |
73 // TODO(sorvell): ensure iconset's src is always relative to the main | |
74 // document | |
75 if (this.src && (this.ownerDocument !== document)) { | |
76 this.src = this.resolvePath(this.src, this.ownerDocument.baseURI); | |
77 } | |
78 this.super(); | |
79 this.updateThemes(); | |
80 }, | |
81 | |
82 iconsChanged: function() { | |
83 var ox = this.offsetX; | |
84 var oy = this.offsetY; | |
85 this.icons && this.icons.split(/\s+/g).forEach(function(name, i) { | |
86 this.iconNames.push(name); | |
87 this.iconMap[name] = { | |
88 offsetX: ox, | |
89 offsetY: oy | |
90 } | |
91 if (ox + this.iconSize < this.width) { | |
92 ox += this.iconSize; | |
93 } else { | |
94 ox = this.offsetX; | |
95 oy += this.iconSize; | |
96 } | |
97 }, this); | |
98 }, | |
99 | |
100 updateThemes: function() { | |
101 var ts = this.querySelectorAll('property[theme]'); | |
102 ts && ts.array().forEach(function(t) { | |
103 this.themes[t.getAttribute('theme')] = { | |
104 offsetX: parseInt(t.getAttribute('offsetX')) || 0, | |
105 offsetY: parseInt(t.getAttribute('offsetY')) || 0 | |
106 }; | |
107 }, this); | |
108 }, | |
109 | |
110 // TODO(ffu): support retrived by index e.g. getOffset(10); | |
111 /** | |
112 * Returns an object containing `offsetX` and `offsetY` properties which | |
113 * specify the pixel locaion in the iconset's src file for the given | |
114 * `icon` and `theme`. It's uncommon to call this method. It is useful, | |
115 * for example, to manually position a css backgroundImage to the proper | |
116 * offset. It's more common to use the `applyIcon` method. | |
117 * | |
118 * @method getOffset | |
119 * @param {String|Number} icon The name of the icon or the index of the | |
120 * icon within in the icon image. | |
121 * @param {String} theme The name of the theme. | |
122 * @returns {Object} An object specifying the offset of the given icon | |
123 * within the icon resource file; `offsetX` is the horizontal offset and | |
124 * `offsetY` is the vertical offset. Both values are in pixel units. | |
125 */ | |
126 getOffset: function(icon, theme) { | |
127 var i = this.iconMap[icon]; | |
128 if (!i) { | |
129 var n = this.iconNames[Number(icon)]; | |
130 i = this.iconMap[n]; | |
131 } | |
132 var t = this.themes[theme]; | |
133 if (i && t) { | |
134 return { | |
135 offsetX: i.offsetX + t.offsetX, | |
136 offsetY: i.offsetY + t.offsetY | |
137 } | |
138 } | |
139 return i; | |
140 }, | |
141 | |
142 /** | |
143 * Applies an icon to the given element as a css background image. This | |
144 * method does not size the element, and it's often necessary to set | |
145 * the element's height and width so that the background image is visible. | |
146 * | |
147 * @method applyIcon | |
148 * @param {Element} element The element to which the background is | |
149 * applied. | |
150 * @param {String|Number} icon The name or index of the icon to apply. | |
151 * @param {Number} scale (optional, defaults to 1) A scaling factor | |
152 * with which the icon can be magnified. | |
153 * @return {Element} The icon element. | |
154 */ | |
155 applyIcon: function(element, icon, scale) { | |
156 var offset = this.getOffset(icon); | |
157 scale = scale || 1; | |
158 if (element && offset) { | |
159 var icon = element._icon || document.createElement('div'); | |
160 var style = icon.style; | |
161 style.backgroundImage = 'url(' + this.src + ')'; | |
162 style.backgroundPosition = (-offset.offsetX * scale + 'px') + | |
163 ' ' + (-offset.offsetY * scale + 'px'); | |
164 style.backgroundSize = scale === 1 ? 'auto' : | |
165 this.width * scale + 'px'; | |
166 if (icon.parentNode !== element) { | |
167 element.appendChild(icon); | |
168 } | |
169 return icon; | |
170 } | |
171 } | |
172 | |
173 }); | |
174 | |
175 | |
OLD | NEW |