Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(19)

Side by Side Diff: lib/src/iron-iconset/iron-iconset.html

Issue 1418513006: update elements and fix some bugs (Closed) Base URL: git@github.com:dart-lang/polymer_elements.git@master
Patch Set: code review updates Created 5 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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
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
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
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
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>
OLDNEW
« no previous file with comments | « lib/src/iron-iconset-svg/test/iron-iconset-svg.html ('k') | lib/src/iron-iconset/test/iron-iconset.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698