OLD | NEW |
| (Empty) |
1 <!-- | |
2 Copyright (c) 2014 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 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 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 --> | |
9 | |
10 <!-- | |
11 /** | |
12 * @group Polymer Core Elements | |
13 * | |
14 * The `core-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 * `core-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 * <core-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 * </core-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 * `core-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 core-iconset-svg | |
45 * @extends core-meta | |
46 * @homepage github.io | |
47 */ | |
48 --> | |
49 | |
50 <link rel="import" href="../core-iconset/core-iconset.html"> | |
51 | |
52 <polymer-element name="core-iconset-svg" extends="core-meta" attributes="iconSiz
e"> | |
53 | |
54 <script> | |
55 | |
56 Polymer('core-iconset-svg', { | |
57 | |
58 | |
59 /** | |
60 * The size of an individual icon. Note that icons must be square. | |
61 * | |
62 * @attribute iconSize | |
63 * @type number | |
64 * @default 24 | |
65 */ | |
66 iconSize: 24, | |
67 type: 'iconset', | |
68 | |
69 created: function() { | |
70 this._icons = {}; | |
71 }, | |
72 | |
73 ready: function() { | |
74 this.super(); | |
75 this.updateIcons(); | |
76 }, | |
77 | |
78 iconById: function(id) { | |
79 return this._icons[id] || (this._icons[id] = this.querySelector('#' + id
)); | |
80 }, | |
81 | |
82 cloneIcon: function(id) { | |
83 var icon = this.iconById(id); | |
84 if (icon) { | |
85 var content = icon.cloneNode(true); | |
86 content.removeAttribute('id'); | |
87 var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'
); | |
88 svg.setAttribute('viewBox', '0 0 ' + this.iconSize + ' ' + | |
89 this.iconSize); | |
90 // NOTE(dfreedm): work around https://crbug.com/370136 | |
91 svg.style.pointerEvents = 'none'; | |
92 svg.appendChild(content); | |
93 return svg; | |
94 } | |
95 }, | |
96 | |
97 get iconNames() { | |
98 if (!this._iconNames) { | |
99 this._iconNames = this.findIconNames(); | |
100 } | |
101 return this._iconNames; | |
102 }, | |
103 | |
104 findIconNames: function() { | |
105 var icons = this.querySelectorAll('[id]').array(); | |
106 if (icons.length) { | |
107 return icons.map(function(n){ return n.id }); | |
108 } | |
109 }, | |
110 | |
111 /** | |
112 * Applies an icon to the given element. The svg icon is added to the | |
113 * element's shadowRoot if one exists or directly to itself. | |
114 * | |
115 * @method applyIcon | |
116 * @param {Element} element The element to which the icon is | |
117 * applied. | |
118 * @param {String|Number} icon The name the icon to apply. | |
119 * @return {Element} The icon element | |
120 */ | |
121 applyIcon: function(element, icon) { | |
122 var root = element; | |
123 // remove old | |
124 var old = root.querySelector('svg'); | |
125 if (old) { | |
126 old.remove(); | |
127 } | |
128 // install new | |
129 var svg = this.cloneIcon(icon); | |
130 if (!svg) { | |
131 return; | |
132 } | |
133 svg.setAttribute('height', '100%'); | |
134 svg.setAttribute('width', '100%'); | |
135 svg.setAttribute('preserveAspectRatio', 'xMidYMid meet'); | |
136 svg.style.display = 'block'; | |
137 root.insertBefore(svg, root.firstElementChild); | |
138 return svg; | |
139 }, | |
140 | |
141 /** | |
142 * Tell users of the iconset, that the set has loaded. | |
143 * This finds all elements matching the selector argument and calls | |
144 * the method argument on them. | |
145 * @method updateIcons | |
146 * @param selector {string} css selector to identify iconset users, | |
147 * defaults to '[icon]' | |
148 * @param method {string} method to call on found elements, | |
149 * defaults to 'updateIcon' | |
150 */ | |
151 updateIcons: function(selector, method) { | |
152 selector = selector || '[icon]'; | |
153 method = method || 'updateIcon'; | |
154 var deep = window.ShadowDOMPolyfill ? '' : 'html /deep/ '; | |
155 var i$ = document.querySelectorAll(deep + selector); | |
156 for (var i=0, e; e=i$[i]; i++) { | |
157 if (e[method]) { | |
158 e[method].call(e); | |
159 } | |
160 } | |
161 } | |
162 | |
163 | |
164 }); | |
165 | |
166 </script> | |
167 | |
168 </polymer-element> | |
OLD | NEW |