OLD | NEW |
| (Empty) |
1 <!-- | |
2 @license | |
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 | |
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 | |
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 | |
9 --> | |
10 | |
11 <link rel="import" href="../polymer/polymer.html"> | |
12 <link rel="import" href="../iron-meta/iron-meta.html"> | |
13 | |
14 <script> | |
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 name="my-svg-icons" size="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 * @demo demo/index.html | |
48 */ | |
49 Polymer({ | |
50 | |
51 is: 'iron-iconset-svg', | |
52 | |
53 properties: { | |
54 | |
55 /** | |
56 * The name of the iconset. | |
57 * | |
58 * @attribute name | |
59 * @type string | |
60 */ | |
61 name: { | |
62 type: String, | |
63 observer: '_nameChanged' | |
64 }, | |
65 | |
66 /** | |
67 * The size of an individual icon. Note that icons must be square. | |
68 * | |
69 * @attribute iconSize | |
70 * @type number | |
71 * @default 24 | |
72 */ | |
73 size: { | |
74 type: Number, | |
75 value: 24 | |
76 } | |
77 | |
78 }, | |
79 | |
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 /** | |
93 * Applies an icon to the given element. | |
94 * | |
95 * An svg icon is prepended to the element's shadowRoot if it exists, | |
96 * otherwise to the element itself. | |
97 * | |
98 * @method applyIcon | |
99 * @param {Element} element Element to which the icon is applied. | |
100 * @param {string} iconName Name of the icon to apply. | |
101 * @return {Element} The svg element which renders the icon. | |
102 */ | |
103 applyIcon: function(element, iconName) { | |
104 // insert svg element into shadow root, if it exists | |
105 element = element.root || element; | |
106 // Remove old svg element | |
107 this.removeIcon(element); | |
108 // install new svg element | |
109 var svg = this._cloneIcon(iconName); | |
110 if (svg) { | |
111 var pde = Polymer.dom(element); | |
112 pde.insertBefore(svg, pde.childNodes[0]); | |
113 return element._svgIcon = svg; | |
114 } | |
115 return null; | |
116 }, | |
117 | |
118 /** | |
119 * Remove an icon from the given element by undoing the changes effected | |
120 * by `applyIcon`. | |
121 * | |
122 * @param {Element} element The element from which the icon is removed. | |
123 */ | |
124 removeIcon: function(element) { | |
125 // Remove old svg element | |
126 if (element._svgIcon) { | |
127 Polymer.dom(element).removeChild(element._svgIcon); | |
128 element._svgIcon = null; | |
129 } | |
130 }, | |
131 | |
132 /** | |
133 * | |
134 * When name is changed, register iconset metadata | |
135 * | |
136 */ | |
137 _nameChanged: function() { | |
138 new Polymer.IronMeta({type: 'iconset', key: this.name, value: this}); | |
139 }, | |
140 | |
141 /** | |
142 * Create a map of child SVG elements by id. | |
143 * | |
144 * @return {!Object} Map of id's to SVG elements. | |
145 */ | |
146 _createIconMap: function() { | |
147 // Objects chained to Object.prototype (`{}`) have members. Specifically, | |
148 // on FF there is a `watch` method that confuses the icon map, so we | |
149 // need to use a null-based object here. | |
150 var icons = Object.create(null); | |
151 Polymer.dom(this).querySelectorAll('[id]') | |
152 .forEach(function(icon) { | |
153 icons[icon.id] = icon; | |
154 }); | |
155 return icons; | |
156 }, | |
157 | |
158 /** | |
159 * Produce installable clone of the SVG element matching `id` in this | |
160 * iconset, or `undefined` if there is no matching element. | |
161 * | |
162 * @return {Element} Returns an installable clone of the SVG element | |
163 * matching `id`. | |
164 */ | |
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(); | |
169 return this._prepareSvgClone(this._icons[id], this.size); | |
170 }, | |
171 | |
172 /** | |
173 * @param {Element} sourceSvg | |
174 * @param {number} size | |
175 * @return {Element} | |
176 */ | |
177 _prepareSvgClone: function(sourceSvg, size) { | |
178 if (sourceSvg) { | |
179 var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); | |
180 svg.setAttribute('viewBox', ['0', '0', size, size].join(' ')); | |
181 svg.setAttribute('preserveAspectRatio', 'xMidYMid meet'); | |
182 // 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 | |
184 svg.style.cssText = 'pointer-events: none; display: block; width: 100%;
height: 100%;'; | |
185 svg.appendChild(sourceSvg.cloneNode(true)).removeAttribute('id'); | |
186 return svg; | |
187 } | |
188 return null; | |
189 } | |
190 | |
191 }); | |
192 </script> | |
OLD | NEW |