| 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 |