| 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 |
| (...skipping 26 matching lines...) Expand all Loading... |
| 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 */ | 48 */ |
| 48 Polymer({ | 49 Polymer({ |
| 49 | 50 |
| 50 is: 'iron-iconset-svg', | 51 is: 'iron-iconset-svg', |
| 51 | 52 |
| 52 properties: { | 53 properties: { |
| 53 | 54 |
| 54 /** | 55 /** |
| 55 * The name of the iconset. | 56 * The name of the iconset. |
| 56 * | 57 * |
| 57 * @attribute name | 58 * @attribute name |
| 58 * @type string | 59 * @type string |
| 59 */ | 60 */ |
| 60 name: { | 61 name: { |
| 61 type: String, | 62 type: String, |
| 62 observer: '_nameChanged' | 63 observer: '_nameChanged' |
| 63 }, | 64 }, |
| 64 | 65 |
| 65 /** | 66 /** |
| 66 * Array of fully-qualitifed icon names in the iconset. | |
| 67 */ | |
| 68 iconNames: { | |
| 69 type: Array, | |
| 70 notify: true | |
| 71 }, | |
| 72 | |
| 73 /** | |
| 74 * The size of an individual icon. Note that icons must be square. | 67 * The size of an individual icon. Note that icons must be square. |
| 75 * | 68 * |
| 76 * @attribute iconSize | 69 * @attribute iconSize |
| 77 * @type number | 70 * @type number |
| 78 * @default 24 | 71 * @default 24 |
| 79 */ | 72 */ |
| 80 size: { | 73 size: { |
| 81 type: Number, | 74 type: Number, |
| 82 value: 24 | 75 value: 24 |
| 83 } | 76 } |
| 84 | 77 |
| 85 }, | 78 }, |
| 86 | 79 |
| 87 /** | 80 /** |
| 81 * Construct an array of all icon names in this iconset. |
| 82 * |
| 83 * @return {!Array} Array of icon names. |
| 84 */ |
| 85 getIconNames: function() { |
| 86 this._icons = this._createIconMap(); |
| 87 return Object.keys(this._icons).map(function(n) { |
| 88 return this.name + ':' + n; |
| 89 }, this); |
| 90 }, |
| 91 |
| 92 /** |
| 88 * Applies an icon to the given element. | 93 * Applies an icon to the given element. |
| 89 * | 94 * |
| 90 * An svg icon is prepended to the element's shadowRoot if it exists, | 95 * An svg icon is prepended to the element's shadowRoot if it exists, |
| 91 * otherwise to the element itself. | 96 * otherwise to the element itself. |
| 92 * | 97 * |
| 93 * @method applyIcon | 98 * @method applyIcon |
| 94 * @param {Element} element Element to which the icon is applied. | 99 * @param {Element} element Element to which the icon is applied. |
| 95 * @param {string} iconName Name of the icon to apply. | 100 * @param {string} iconName Name of the icon to apply. |
| 96 * @return {Element} The svg element which renders the icon. | 101 * @return {Element} The svg element which renders the icon. |
| 97 */ | 102 */ |
| (...skipping 21 matching lines...) Expand all Loading... |
| 119 removeIcon: function(element) { | 124 removeIcon: function(element) { |
| 120 // Remove old svg element | 125 // Remove old svg element |
| 121 if (element._svgIcon) { | 126 if (element._svgIcon) { |
| 122 Polymer.dom(element).removeChild(element._svgIcon); | 127 Polymer.dom(element).removeChild(element._svgIcon); |
| 123 element._svgIcon = null; | 128 element._svgIcon = null; |
| 124 } | 129 } |
| 125 }, | 130 }, |
| 126 | 131 |
| 127 /** | 132 /** |
| 128 * | 133 * |
| 129 * When name is changed, either register a new iconset with the included | 134 * When name is changed, register iconset metadata |
| 130 * icons, or if there are no children, set up a meta-iconset. | |
| 131 * | 135 * |
| 132 */ | 136 */ |
| 133 _nameChanged: function() { | 137 _nameChanged: function() { |
| 134 new Polymer.IronMeta({type: 'iconset', key: this.name, value: this}); | 138 new Polymer.IronMeta({type: 'iconset', key: this.name, value: this}); |
| 135 // icons (descendents) must exist a-priori | |
| 136 this._icons = this._createIconMap(); | |
| 137 this.iconNames = this._getIconNames(); | |
| 138 }, | |
| 139 | |
| 140 /** | |
| 141 * Array of all icon names in this iconset. | |
| 142 * | |
| 143 * @return {!Array} Array of icon names. | |
| 144 */ | |
| 145 _getIconNames: function() { | |
| 146 return Object.keys(this._icons).map(function(n) { | |
| 147 return this.name + ':' + n; | |
| 148 }, this); | |
| 149 }, | 139 }, |
| 150 | 140 |
| 151 /** | 141 /** |
| 152 * Create a map of child SVG elements by id. | 142 * Create a map of child SVG elements by id. |
| 153 * | 143 * |
| 154 * @return {Object} Map of id's to SVG elements. | 144 * @return {!Object} Map of id's to SVG elements. |
| 155 */ | 145 */ |
| 156 _createIconMap: function() { | 146 _createIconMap: function() { |
| 157 // Objects chained to Object.prototype (`{}`) have members. Specifically, | 147 // Objects chained to Object.prototype (`{}`) have members. Specifically, |
| 158 // 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 |
| 159 // need to use a null-based object here. | 149 // need to use a null-based object here. |
| 160 var icons = Object.create(null); | 150 var icons = Object.create(null); |
| 161 Polymer.dom(this).querySelectorAll('[id]') | 151 Polymer.dom(this).querySelectorAll('[id]') |
| 162 .forEach(function(icon) { | 152 .forEach(function(icon) { |
| 163 icons[icon.id] = icon; | 153 icons[icon.id] = icon; |
| 164 }); | 154 }); |
| 165 return icons; | 155 return icons; |
| 166 }, | 156 }, |
| 167 | 157 |
| 168 /** | 158 /** |
| 169 * Produce installable clone of the SVG element matching `id` in this | 159 * Produce installable clone of the SVG element matching `id` in this |
| 170 * iconset, or `undefined` if there is no matching element. | 160 * iconset, or `undefined` if there is no matching element. |
| 171 * | 161 * |
| 172 * @return {Element} Returns an installable clone of the SVG element | 162 * @return {Element} Returns an installable clone of the SVG element |
| 173 * matching `id`. | 163 * matching `id`. |
| 174 */ | 164 */ |
| 175 _cloneIcon: function(id) { | 165 _cloneIcon: function(id) { |
| 166 // create the icon map on-demand, since the iconset itself has no discrete |
| 167 // signal to know when it's children are fully parsed |
| 168 this._icons = this._icons || this._createIconMap(); |
| 176 return this._prepareSvgClone(this._icons[id], this.size); | 169 return this._prepareSvgClone(this._icons[id], this.size); |
| 177 }, | 170 }, |
| 178 | 171 |
| 179 /** | 172 /** |
| 180 * @param {Element} sourceSvg | 173 * @param {Element} sourceSvg |
| 181 * @param {number} size | 174 * @param {number} size |
| 182 * @return {Element} | 175 * @return {Element} |
| 183 */ | 176 */ |
| 184 _prepareSvgClone: function(sourceSvg, size) { | 177 _prepareSvgClone: function(sourceSvg, size) { |
| 185 if (sourceSvg) { | 178 if (sourceSvg) { |
| 186 var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); | 179 var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); |
| 187 svg.setAttribute('viewBox', ['0', '0', size, size].join(' ')); | 180 svg.setAttribute('viewBox', ['0', '0', size, size].join(' ')); |
| 188 svg.setAttribute('preserveAspectRatio', 'xMidYMid meet'); | 181 svg.setAttribute('preserveAspectRatio', 'xMidYMid meet'); |
| 189 // TODO(dfreedm): `pointer-events: none` works around https://crbug.com/
370136 | 182 // TODO(dfreedm): `pointer-events: none` works around https://crbug.com/
370136 |
| 190 // TODO(sjmiles): inline style may not be ideal, but avoids requiring a
shadow-root | 183 // TODO(sjmiles): inline style may not be ideal, but avoids requiring a
shadow-root |
| 191 svg.style.cssText = 'pointer-events: none; display: block; width: 100%;
height: 100%;'; | 184 svg.style.cssText = 'pointer-events: none; display: block; width: 100%;
height: 100%;'; |
| 192 svg.appendChild(sourceSvg.cloneNode(true)).removeAttribute('id'); | 185 svg.appendChild(sourceSvg.cloneNode(true)).removeAttribute('id'); |
| 193 return svg; | 186 return svg; |
| 194 } | 187 } |
| 195 return null; | 188 return null; |
| 196 } | 189 } |
| 197 | 190 |
| 198 }); | 191 }); |
| 199 </script> | 192 </script> |
| OLD | NEW |