| OLD | NEW |
| 1 <!-- | 1 <!-- |
| 2 @license |
| 2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| 3 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 |
| 4 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 |
| 5 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 |
| 6 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 |
| 7 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 |
| 8 --> | 9 --> |
| 9 | 10 |
| 10 <!-- | |
| 11 /** | |
| 12 * @group Iron Elements | |
| 13 * | |
| 14 * The `iron-iconset-svg` element allows users to define their own icon sets | |
| 15 * that contain svg icons. The svg icon elements should be children of the | |
| 16 * `iron-iconset-svg` element. Multiple icons should be given distinct id's. | |
| 17 * | |
| 18 * Using svg elements to create icons has a few advantages over traditional | |
| 19 * bitmap graphics like jpg or png. Icons that use svg are vector based so they | |
| 20 * are resolution independent and should look good on any device. They are | |
| 21 * stylable via css. Icons can be themed, colorized, and even animated. | |
| 22 * | |
| 23 * Example: | |
| 24 * | |
| 25 * <iron-iconset-svg id="my-svg-icons" iconSize="24"> | |
| 26 * <svg> | |
| 27 * <defs> | |
| 28 * <g id="shape"> | |
| 29 * <rect x="50" y="50" width="50" height="50" /> | |
| 30 * <circle cx="50" cy="50" r="50" /> | |
| 31 * </g> | |
| 32 * </defs> | |
| 33 * </svg> | |
| 34 * </iron-iconset-svg> | |
| 35 * | |
| 36 * This will automatically register the icon set "my-svg-icons" to the iconset | |
| 37 * database. To use these icons from within another element, make a | |
| 38 * `iron-iconset` element and call the `byId` method | |
| 39 * to retrieve a given iconset. To apply a particular icon inside an | |
| 40 * element use the `applyIcon` method. For example: | |
| 41 * | |
| 42 * iconset.applyIcon(iconNode, 'car'); | |
| 43 * | |
| 44 * @element iron-iconset-svg | |
| 45 */ | |
| 46 --> | |
| 47 | |
| 48 <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"> |
| 49 | 13 |
| 50 <script> | 14 <script> |
| 51 | 15 /** |
| 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 |
| 18 * `iron-iconset-svg` element. Multiple icons should be given distinct id's. |
| 19 * |
| 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 |
| 22 * are resolution independent and should look good on any device. They are |
| 23 * stylable via css. Icons can be themed, colorized, and even animated. |
| 24 * |
| 25 * Example: |
| 26 * |
| 27 * <iron-iconset-svg id="my-svg-icons" iconSize="24"> |
| 28 * <svg> |
| 29 * <defs> |
| 30 * <g id="shape"> |
| 31 * <rect x="50" y="50" width="50" height="50" /> |
| 32 * <circle cx="50" cy="50" r="50" /> |
| 33 * </g> |
| 34 * </defs> |
| 35 * </svg> |
| 36 * </iron-iconset-svg> |
| 37 * |
| 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 |
| 40 * `iron-iconset` element and call the `byId` method |
| 41 * to retrieve a given iconset. To apply a particular icon inside an |
| 42 * element use the `applyIcon` method. For example: |
| 43 * |
| 44 * iconset.applyIcon(iconNode, 'car'); |
| 45 * |
| 46 * @element iron-iconset-svg |
| 47 */ |
| 52 Polymer({ | 48 Polymer({ |
| 53 | 49 |
| 54 is: 'iron-iconset-svg', | 50 is: 'iron-iconset-svg', |
| 55 | 51 |
| 56 properties: { | 52 properties: { |
| 57 | 53 |
| 58 /** | 54 /** |
| 59 * The name of the iconset. | 55 * The name of the iconset. |
| 60 * | 56 * |
| 61 * @attribute name | 57 * @attribute name |
| 62 * @type string | 58 * @type string |
| 63 * @default '' | |
| 64 */ | 59 */ |
| 65 name: { | 60 name: { |
| 66 type: String, | 61 type: String, |
| 67 observer: '_nameChanged' | 62 observer: '_nameChanged' |
| 68 }, | 63 }, |
| 69 | 64 |
| 70 /** | 65 /** |
| 71 * Array of fully-qualitifed icon names in the iconset. | 66 * Array of fully-qualitifed icon names in the iconset. |
| 72 */ | 67 */ |
| 73 iconNames: { | 68 iconNames: { |
| (...skipping 16 matching lines...) Expand all Loading... |
| 90 }, | 85 }, |
| 91 | 86 |
| 92 /** | 87 /** |
| 93 * Applies an icon to the given element. | 88 * Applies an icon to the given element. |
| 94 * | 89 * |
| 95 * An svg icon is prepended to the element's shadowRoot if it exists, | 90 * An svg icon is prepended to the element's shadowRoot if it exists, |
| 96 * otherwise to the element itself. | 91 * otherwise to the element itself. |
| 97 * | 92 * |
| 98 * @method applyIcon | 93 * @method applyIcon |
| 99 * @param {Element} element Element to which the icon is applied. | 94 * @param {Element} element Element to which the icon is applied. |
| 100 * @param {String} icon Name of the icon to apply. | 95 * @param {string} iconName Name of the icon to apply. |
| 101 * @return {Element} The svg element which renders the icon. | 96 * @return {Element} The svg element which renders the icon. |
| 102 */ | 97 */ |
| 103 applyIcon: function(element, iconName) { | 98 applyIcon: function(element, iconName) { |
| 104 // insert svg element into shadow root, if it exists | 99 // insert svg element into shadow root, if it exists |
| 105 element = element.root || element; | 100 element = element.root || element; |
| 106 // Remove old svg element | 101 // Remove old svg element |
| 107 this.removeIcon(element); | 102 this.removeIcon(element); |
| 108 // install new svg element | 103 // install new svg element |
| 109 var svg = this._cloneIcon(iconName); | 104 var svg = this._cloneIcon(iconName); |
| 110 if (svg) { | 105 if (svg) { |
| 111 // TODO(sjmiles): I know, `with` is the devil ... except it isn't | 106 var pde = Polymer.dom(element); |
| 112 with (Polymer.dom(element)) { | 107 pde.insertBefore(svg, pde.childNodes[0]); |
| 113 insertBefore(svg, childNodes[0]); | |
| 114 } | |
| 115 return element._svgIcon = svg; | 108 return element._svgIcon = svg; |
| 116 } | 109 } |
| 110 return null; |
| 117 }, | 111 }, |
| 118 | 112 |
| 119 /** | 113 /** |
| 120 * Remove an icon from the given element by undoing the changes effected | 114 * Remove an icon from the given element by undoing the changes effected |
| 121 * by `applyIcon`. | 115 * by `applyIcon`. |
| 122 * | 116 * |
| 123 * @param {Element} element The element from which the icon is removed. | 117 * @param {Element} element The element from which the icon is removed. |
| 124 */ | 118 */ |
| 125 removeIcon: function(element) { | 119 removeIcon: function(element) { |
| 126 // Remove old svg element | 120 // Remove old svg element |
| (...skipping 12 matching lines...) Expand all Loading... |
| 139 _nameChanged: function() { | 133 _nameChanged: function() { |
| 140 new Polymer.IronMeta({type: 'iconset', key: this.name, value: this}); | 134 new Polymer.IronMeta({type: 'iconset', key: this.name, value: this}); |
| 141 // icons (descendents) must exist a-priori | 135 // icons (descendents) must exist a-priori |
| 142 this._icons = this._createIconMap(); | 136 this._icons = this._createIconMap(); |
| 143 this.iconNames = this._getIconNames(); | 137 this.iconNames = this._getIconNames(); |
| 144 }, | 138 }, |
| 145 | 139 |
| 146 /** | 140 /** |
| 147 * Array of all icon names in this iconset. | 141 * Array of all icon names in this iconset. |
| 148 * | 142 * |
| 149 * @return {Array} Array of icon names. | 143 * @return {!Array} Array of icon names. |
| 150 */ | 144 */ |
| 151 _getIconNames: function() { | 145 _getIconNames: function() { |
| 152 return Object.keys(this._icons).map(function(n) { | 146 return Object.keys(this._icons).map(function(n) { |
| 153 return this.name + ':' + n; | 147 return this.name + ':' + n; |
| 154 }, this); | 148 }, this); |
| 155 }, | 149 }, |
| 156 | 150 |
| 157 /** | 151 /** |
| 158 * Create a map of child SVG elements by id. | 152 * Create a map of child SVG elements by id. |
| 159 * | 153 * |
| 160 * @return {Object} Map of id's to SVG elements. | 154 * @return {Object} Map of id's to SVG elements. |
| 161 */ | 155 */ |
| 162 _createIconMap: function() { | 156 _createIconMap: function() { |
| 163 // Objects chained to Object.prototype (`{}`) have members. Specifically, | 157 // Objects chained to Object.prototype (`{}`) have members. Specifically, |
| 164 // on FF there is a `watch` method that confuses the icon map, so we | 158 // on FF there is a `watch` method that confuses the icon map, so we |
| 165 // need to use a null-based object here. | 159 // need to use a null-based object here. |
| 166 var icons = Object.create(null); | 160 var icons = Object.create(null); |
| 167 Polymer.dom(this).querySelectorAll('[id]') | 161 Polymer.dom(this).querySelectorAll('[id]') |
| 168 .forEach(function(icon) { | 162 .forEach(function(icon) { |
| 169 icons[icon.id] = icon; | 163 icons[icon.id] = icon; |
| 170 }); | 164 }); |
| 171 return icons; | 165 return icons; |
| 172 }, | 166 }, |
| 173 | 167 |
| 174 /** | 168 /** |
| 175 * Produce installable clone of the SVG element matching `id` in this | 169 * Produce installable clone of the SVG element matching `id` in this |
| 176 * iconset, or `undefined` if there is no matching element. | 170 * iconset, or `undefined` if there is no matching element. |
| 177 * | 171 * |
| 178 * @return {Object} Returns an installable clone of the SVG element | 172 * @return {Element} Returns an installable clone of the SVG element |
| 179 * matching `id`. | 173 * matching `id`. |
| 180 */ | 174 */ |
| 181 _cloneIcon: function(id) { | 175 _cloneIcon: function(id) { |
| 182 return this._prepareSvgClone(this._icons[id], this.size); | 176 return this._prepareSvgClone(this._icons[id], this.size); |
| 183 }, | 177 }, |
| 184 | 178 |
| 179 /** |
| 180 * @param {Element} sourceSvg |
| 181 * @param {number} size |
| 182 * @return {Element} |
| 183 */ |
| 185 _prepareSvgClone: function(sourceSvg, size) { | 184 _prepareSvgClone: function(sourceSvg, size) { |
| 186 if (sourceSvg) { | 185 if (sourceSvg) { |
| 187 var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); | 186 var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); |
| 188 svg.setAttribute('viewBox', ['0', '0', size, size].join(' ')); | 187 svg.setAttribute('viewBox', ['0', '0', size, size].join(' ')); |
| 189 svg.setAttribute('preserveAspectRatio', 'xMidYMid meet'); | 188 svg.setAttribute('preserveAspectRatio', 'xMidYMid meet'); |
| 190 // TODO(dfreedm): `pointer-events: none` works around https://crbug.com/
370136 | 189 // TODO(dfreedm): `pointer-events: none` works around https://crbug.com/
370136 |
| 191 // TODO(sjmiles): inline style may not be ideal, but avoids requiring a
shadow-root | 190 // TODO(sjmiles): inline style may not be ideal, but avoids requiring a
shadow-root |
| 192 svg.style.cssText = 'pointer-events: none; display: block; width: 100%;
height: 100%;'; | 191 svg.style.cssText = 'pointer-events: none; display: block; width: 100%;
height: 100%;'; |
| 193 svg.appendChild(sourceSvg.cloneNode(true)).removeAttribute('id'); | 192 svg.appendChild(sourceSvg.cloneNode(true)).removeAttribute('id'); |
| 194 return svg; | 193 return svg; |
| 195 } | 194 } |
| 195 return null; |
| 196 } | 196 } |
| 197 | 197 |
| 198 }); | 198 }); |
| 199 </script> | 199 </script> |
| OLD | NEW |