OLD | NEW |
1 /** | 1 /** |
2 * The `iron-iconset-svg` element allows users to define their own icon sets | 2 * The `iron-iconset-svg` element allows users to define their own icon sets |
3 * that contain svg icons. The svg icon elements should be children of the | 3 * that contain svg icons. The svg icon elements should be children of the |
4 * `iron-iconset-svg` element. Multiple icons should be given distinct id's. | 4 * `iron-iconset-svg` element. Multiple icons should be given distinct id's. |
5 * | 5 * |
6 * Using svg elements to create icons has a few advantages over traditional | 6 * Using svg elements to create icons has a few advantages over traditional |
7 * bitmap graphics like jpg or png. Icons that use svg are vector based so | 7 * bitmap graphics like jpg or png. Icons that use svg are vector based so |
8 * they are resolution independent and should look good on any device. They | 8 * they are resolution independent and should look good on any device. They |
9 * are stylable via css. Icons can be themed, colorized, and even animated. | 9 * are stylable via css. Icons can be themed, colorized, and even animated. |
10 * | 10 * |
(...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
45 type: String, | 45 type: String, |
46 observer: '_nameChanged' | 46 observer: '_nameChanged' |
47 }, | 47 }, |
48 | 48 |
49 /** | 49 /** |
50 * The size of an individual icon. Note that icons must be square. | 50 * The size of an individual icon. Note that icons must be square. |
51 */ | 51 */ |
52 size: { | 52 size: { |
53 type: Number, | 53 type: Number, |
54 value: 24 | 54 value: 24 |
| 55 }, |
| 56 |
| 57 /** |
| 58 * Set to true to enable mirroring of icons where specified when they are |
| 59 * stamped. Icons that should be mirrored should be decorated with a |
| 60 * `mirror-in-rtl` attribute. |
| 61 */ |
| 62 rtlMirroring: { |
| 63 type: Boolean, |
| 64 value: false |
| 65 } |
| 66 }, |
| 67 |
| 68 _targetIsRTL: function(target) { |
| 69 if (target && target.nodeType !== Node.ELEMENT_NODE) { |
| 70 target = target.host; |
55 } | 71 } |
56 | 72 |
| 73 return target && window.getComputedStyle(target)['direction'] === 'rtl'; |
57 }, | 74 }, |
58 | 75 |
59 attached: function() { | 76 attached: function() { |
60 this.style.display = 'none'; | 77 this.style.display = 'none'; |
61 }, | 78 }, |
62 | 79 |
63 /** | 80 /** |
64 * Construct an array of all icon names in this iconset. | 81 * Construct an array of all icon names in this iconset. |
65 * | 82 * |
66 * @return {!Array} Array of icon names. | 83 * @return {!Array} Array of icon names. |
(...skipping 15 matching lines...) Expand all Loading... |
82 * @param {Element} element Element to which the icon is applied. | 99 * @param {Element} element Element to which the icon is applied. |
83 * @param {string} iconName Name of the icon to apply. | 100 * @param {string} iconName Name of the icon to apply. |
84 * @return {?Element} The svg element which renders the icon. | 101 * @return {?Element} The svg element which renders the icon. |
85 */ | 102 */ |
86 applyIcon: function(element, iconName) { | 103 applyIcon: function(element, iconName) { |
87 // insert svg element into shadow root, if it exists | 104 // insert svg element into shadow root, if it exists |
88 element = element.root || element; | 105 element = element.root || element; |
89 // Remove old svg element | 106 // Remove old svg element |
90 this.removeIcon(element); | 107 this.removeIcon(element); |
91 // install new svg element | 108 // install new svg element |
92 var svg = this._cloneIcon(iconName); | 109 var svg = this._cloneIcon(iconName, |
| 110 this.rtlMirroring && this._targetIsRTL(element)); |
93 if (svg) { | 111 if (svg) { |
94 var pde = Polymer.dom(element); | 112 var pde = Polymer.dom(element); |
95 pde.insertBefore(svg, pde.childNodes[0]); | 113 pde.insertBefore(svg, pde.childNodes[0]); |
96 return element._svgIcon = svg; | 114 return element._svgIcon = svg; |
97 } | 115 } |
98 return null; | 116 return null; |
99 }, | 117 }, |
100 | 118 |
101 /** | 119 /** |
102 * Remove an icon from the given element by undoing the changes effected | 120 * Remove an icon from the given element by undoing the changes effected |
103 * by `applyIcon`. | 121 * by `applyIcon`. |
104 * | 122 * |
105 * @param {Element} element The element from which the icon is removed. | 123 * @param {Element} element The element from which the icon is removed. |
106 */ | 124 */ |
107 removeIcon: function(element) { | 125 removeIcon: function(element) { |
108 // Remove old svg element | 126 // Remove old svg element |
| 127 element = element.root || element; |
109 if (element._svgIcon) { | 128 if (element._svgIcon) { |
110 Polymer.dom(element).removeChild(element._svgIcon); | 129 Polymer.dom(element).removeChild(element._svgIcon); |
111 element._svgIcon = null; | 130 element._svgIcon = null; |
112 } | 131 } |
113 }, | 132 }, |
114 | 133 |
115 /** | 134 /** |
116 * | 135 * |
117 * When name is changed, register iconset metadata | 136 * When name is changed, register iconset metadata |
118 * | 137 * |
(...skipping 22 matching lines...) Expand all Loading... |
141 return icons; | 160 return icons; |
142 }, | 161 }, |
143 | 162 |
144 /** | 163 /** |
145 * Produce installable clone of the SVG element matching `id` in this | 164 * Produce installable clone of the SVG element matching `id` in this |
146 * iconset, or `undefined` if there is no matching element. | 165 * iconset, or `undefined` if there is no matching element. |
147 * | 166 * |
148 * @return {Element} Returns an installable clone of the SVG element | 167 * @return {Element} Returns an installable clone of the SVG element |
149 * matching `id`. | 168 * matching `id`. |
150 */ | 169 */ |
151 _cloneIcon: function(id) { | 170 _cloneIcon: function(id, mirrorAllowed) { |
152 // create the icon map on-demand, since the iconset itself has no discrete | 171 // create the icon map on-demand, since the iconset itself has no discrete |
153 // signal to know when it's children are fully parsed | 172 // signal to know when it's children are fully parsed |
154 this._icons = this._icons || this._createIconMap(); | 173 this._icons = this._icons || this._createIconMap(); |
155 return this._prepareSvgClone(this._icons[id], this.size); | 174 return this._prepareSvgClone(this._icons[id], this.size, mirrorAllowed); |
156 }, | 175 }, |
157 | 176 |
158 /** | 177 /** |
159 * @param {Element} sourceSvg | 178 * @param {Element} sourceSvg |
160 * @param {number} size | 179 * @param {number} size |
| 180 * @param {Boolean} mirrorAllowed |
161 * @return {Element} | 181 * @return {Element} |
162 */ | 182 */ |
163 _prepareSvgClone: function(sourceSvg, size) { | 183 _prepareSvgClone: function(sourceSvg, size, mirrorAllowed) { |
164 if (sourceSvg) { | 184 if (sourceSvg) { |
165 var content = sourceSvg.cloneNode(true), | 185 var content = sourceSvg.cloneNode(true), |
166 svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'), | 186 svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'), |
167 viewBox = content.getAttribute('viewBox') || '0 0 ' + size + ' ' + s
ize; | 187 viewBox = content.getAttribute('viewBox') || '0 0 ' + size + ' ' + s
ize, |
| 188 cssText = 'pointer-events: none; display: block; width: 100%; height
: 100%;'; |
| 189 |
| 190 if (mirrorAllowed && content.hasAttribute('mirror-in-rtl')) { |
| 191 cssText += '-webkit-transform:scale(-1,1);transform:scale(-1,1);'; |
| 192 } |
| 193 |
168 svg.setAttribute('viewBox', viewBox); | 194 svg.setAttribute('viewBox', viewBox); |
169 svg.setAttribute('preserveAspectRatio', 'xMidYMid meet'); | 195 svg.setAttribute('preserveAspectRatio', 'xMidYMid meet'); |
170 // TODO(dfreedm): `pointer-events: none` works around https://crbug.com/
370136 | 196 // TODO(dfreedm): `pointer-events: none` works around https://crbug.com/
370136 |
171 // TODO(sjmiles): inline style may not be ideal, but avoids requiring a
shadow-root | 197 // TODO(sjmiles): inline style may not be ideal, but avoids requiring a
shadow-root |
172 svg.style.cssText = 'pointer-events: none; display: block; width: 100%;
height: 100%;'; | 198 svg.style.cssText = cssText; |
173 svg.appendChild(content).removeAttribute('id'); | 199 svg.appendChild(content).removeAttribute('id'); |
174 return svg; | 200 return svg; |
175 } | 201 } |
176 return null; | 202 return null; |
177 } | 203 } |
178 | 204 |
179 }); | 205 }); |
OLD | NEW |