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 |
11 <link rel="import" href="../polymer/polymer.html"> | 11 <link rel="import" href="../polymer/polymer.html"> |
12 <link rel="import" href="../iron-meta/iron-meta.html"> | 12 <link rel="import" href="../iron-meta/iron-meta.html"> |
13 | 13 |
14 <script> | 14 <script> |
15 /** | 15 /** |
16 * The `iron-iconset-svg` element allows users to define their own icon sets | 16 * The `iron-iconset-svg` element allows users to define their own icon sets |
17 * that contain svg icons. The svg icon elements should be children of the | 17 * that contain svg icons. The svg icon elements should be children of the |
18 * `iron-iconset-svg` element. Multiple icons should be given distinct id's. | 18 * `iron-iconset-svg` element. Multiple icons should be given distinct id's. |
19 * | 19 * |
20 * Using svg elements to create icons has a few advantages over traditional | 20 * Using svg elements to create icons has a few advantages over traditional |
21 * bitmap graphics like jpg or png. Icons that use svg are vector based so the
y | 21 * bitmap graphics like jpg or png. Icons that use svg are vector based so |
22 * are resolution independent and should look good on any device. They are | 22 * they are resolution independent and should look good on any device. They |
23 * stylable via css. Icons can be themed, colorized, and even animated. | 23 * are stylable via css. Icons can be themed, colorized, and even animated. |
24 * | 24 * |
25 * Example: | 25 * Example: |
26 * | 26 * |
27 * <iron-iconset-svg name="my-svg-icons" size="24"> | 27 * <iron-iconset-svg name="my-svg-icons" size="24"> |
28 * <svg> | 28 * <svg> |
29 * <defs> | 29 * <defs> |
30 * <g id="shape"> | 30 * <g id="shape"> |
31 * <rect x="50" y="50" width="50" height="50" /> | 31 * <rect x="12" y="0" width="12" height="24" /> |
32 * <circle cx="50" cy="50" r="50" /> | 32 * <circle cx="12" cy="12" r="12" /> |
33 * </g> | 33 * </g> |
34 * </defs> | 34 * </defs> |
35 * </svg> | 35 * </svg> |
36 * </iron-iconset-svg> | 36 * </iron-iconset-svg> |
37 * | 37 * |
38 * This will automatically register the icon set "my-svg-icons" to the iconset | 38 * This will automatically register the icon set "my-svg-icons" to the iconset |
39 * database. To use these icons from within another element, make a | 39 * database. To use these icons from within another element, make a |
40 * `iron-iconset` element and call the `byId` method | 40 * `iron-iconset` element and call the `byId` method |
41 * to retrieve a given iconset. To apply a particular icon inside an | 41 * to retrieve a given iconset. To apply a particular icon inside an |
42 * element use the `applyIcon` method. For example: | 42 * element use the `applyIcon` method. For example: |
43 * | 43 * |
44 * iconset.applyIcon(iconNode, 'car'); | 44 * iconset.applyIcon(iconNode, 'car'); |
45 * | 45 * |
46 * @element iron-iconset-svg | 46 * @element iron-iconset-svg |
47 * @demo demo/index.html | 47 * @demo demo/index.html |
| 48 * @implements {Polymer.Iconset} |
48 */ | 49 */ |
49 Polymer({ | 50 Polymer({ |
50 | |
51 is: 'iron-iconset-svg', | 51 is: 'iron-iconset-svg', |
52 | 52 |
53 properties: { | 53 properties: { |
54 | 54 |
55 /** | 55 /** |
56 * The name of the iconset. | 56 * The name of the iconset. |
57 * | |
58 * @attribute name | |
59 * @type string | |
60 */ | 57 */ |
61 name: { | 58 name: { |
62 type: String, | 59 type: String, |
63 observer: '_nameChanged' | 60 observer: '_nameChanged' |
64 }, | 61 }, |
65 | 62 |
66 /** | 63 /** |
67 * The size of an individual icon. Note that icons must be square. | 64 * The size of an individual icon. Note that icons must be square. |
68 * | |
69 * @attribute iconSize | |
70 * @type number | |
71 * @default 24 | |
72 */ | 65 */ |
73 size: { | 66 size: { |
74 type: Number, | 67 type: Number, |
75 value: 24 | 68 value: 24 |
76 } | 69 } |
77 | 70 |
78 }, | 71 }, |
79 | 72 |
| 73 attached: function() { |
| 74 this.style.display = 'none'; |
| 75 }, |
| 76 |
80 /** | 77 /** |
81 * Construct an array of all icon names in this iconset. | 78 * Construct an array of all icon names in this iconset. |
82 * | 79 * |
83 * @return {!Array} Array of icon names. | 80 * @return {!Array} Array of icon names. |
84 */ | 81 */ |
85 getIconNames: function() { | 82 getIconNames: function() { |
86 this._icons = this._createIconMap(); | 83 this._icons = this._createIconMap(); |
87 return Object.keys(this._icons).map(function(n) { | 84 return Object.keys(this._icons).map(function(n) { |
88 return this.name + ':' + n; | 85 return this.name + ':' + n; |
89 }, this); | 86 }, this); |
90 }, | 87 }, |
91 | 88 |
92 /** | 89 /** |
93 * Applies an icon to the given element. | 90 * Applies an icon to the given element. |
94 * | 91 * |
95 * An svg icon is prepended to the element's shadowRoot if it exists, | 92 * An svg icon is prepended to the element's shadowRoot if it exists, |
96 * otherwise to the element itself. | 93 * otherwise to the element itself. |
97 * | 94 * |
98 * @method applyIcon | 95 * @method applyIcon |
99 * @param {Element} element Element to which the icon is applied. | 96 * @param {Element} element Element to which the icon is applied. |
100 * @param {string} iconName Name of the icon to apply. | 97 * @param {string} iconName Name of the icon to apply. |
101 * @return {Element} The svg element which renders the icon. | 98 * @return {?Element} The svg element which renders the icon. |
102 */ | 99 */ |
103 applyIcon: function(element, iconName) { | 100 applyIcon: function(element, iconName) { |
104 // insert svg element into shadow root, if it exists | 101 // insert svg element into shadow root, if it exists |
105 element = element.root || element; | 102 element = element.root || element; |
106 // Remove old svg element | 103 // Remove old svg element |
107 this.removeIcon(element); | 104 this.removeIcon(element); |
108 // install new svg element | 105 // install new svg element |
109 var svg = this._cloneIcon(iconName); | 106 var svg = this._cloneIcon(iconName); |
110 if (svg) { | 107 if (svg) { |
111 var pde = Polymer.dom(element); | 108 var pde = Polymer.dom(element); |
(...skipping 17 matching lines...) Expand all Loading... |
129 } | 126 } |
130 }, | 127 }, |
131 | 128 |
132 /** | 129 /** |
133 * | 130 * |
134 * When name is changed, register iconset metadata | 131 * When name is changed, register iconset metadata |
135 * | 132 * |
136 */ | 133 */ |
137 _nameChanged: function() { | 134 _nameChanged: function() { |
138 new Polymer.IronMeta({type: 'iconset', key: this.name, value: this}); | 135 new Polymer.IronMeta({type: 'iconset', key: this.name, value: this}); |
| 136 this.async(function() { |
| 137 this.fire('iron-iconset-added', this, {node: window}); |
| 138 }); |
139 }, | 139 }, |
140 | 140 |
141 /** | 141 /** |
142 * Create a map of child SVG elements by id. | 142 * Create a map of child SVG elements by id. |
143 * | 143 * |
144 * @return {!Object} Map of id's to SVG elements. | 144 * @return {!Object} Map of id's to SVG elements. |
145 */ | 145 */ |
146 _createIconMap: function() { | 146 _createIconMap: function() { |
147 // Objects chained to Object.prototype (`{}`) have members. Specifically, | 147 // Objects chained to Object.prototype (`{}`) have members. Specifically, |
148 // on FF there is a `watch` method that confuses the icon map, so we | 148 // on FF there is a `watch` method that confuses the icon map, so we |
(...skipping 20 matching lines...) Expand all Loading... |
169 return this._prepareSvgClone(this._icons[id], this.size); | 169 return this._prepareSvgClone(this._icons[id], this.size); |
170 }, | 170 }, |
171 | 171 |
172 /** | 172 /** |
173 * @param {Element} sourceSvg | 173 * @param {Element} sourceSvg |
174 * @param {number} size | 174 * @param {number} size |
175 * @return {Element} | 175 * @return {Element} |
176 */ | 176 */ |
177 _prepareSvgClone: function(sourceSvg, size) { | 177 _prepareSvgClone: function(sourceSvg, size) { |
178 if (sourceSvg) { | 178 if (sourceSvg) { |
179 var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); | 179 var content = sourceSvg.cloneNode(true), |
180 svg.setAttribute('viewBox', ['0', '0', size, size].join(' ')); | 180 svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'), |
| 181 viewBox = content.getAttribute('viewBox') || '0 0 ' + size + ' ' + s
ize; |
| 182 svg.setAttribute('viewBox', viewBox); |
181 svg.setAttribute('preserveAspectRatio', 'xMidYMid meet'); | 183 svg.setAttribute('preserveAspectRatio', 'xMidYMid meet'); |
182 // TODO(dfreedm): `pointer-events: none` works around https://crbug.com/
370136 | 184 // TODO(dfreedm): `pointer-events: none` works around https://crbug.com/
370136 |
183 // TODO(sjmiles): inline style may not be ideal, but avoids requiring a
shadow-root | 185 // TODO(sjmiles): inline style may not be ideal, but avoids requiring a
shadow-root |
184 svg.style.cssText = 'pointer-events: none; display: block; width: 100%;
height: 100%;'; | 186 svg.style.cssText = 'pointer-events: none; display: block; width: 100%;
height: 100%;'; |
185 svg.appendChild(sourceSvg.cloneNode(true)).removeAttribute('id'); | 187 svg.appendChild(content).removeAttribute('id'); |
186 return svg; | 188 return svg; |
187 } | 189 } |
188 return null; | 190 return null; |
189 } | 191 } |
190 | 192 |
191 }); | 193 }); |
192 </script> | 194 </script> |
OLD | NEW |