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 The `core-icon` element displays an icon. By default an icon renders as 24px squ
are. | |
12 | |
13 Example using src: | |
14 | |
15 <core-icon src="star.png"></core-icon> | |
16 | |
17 Example setting size to 32px x 32px: | |
18 | |
19 <core-icon class="big" src="big_star.png"></core-icon> | |
20 | |
21 <style> | |
22 .big { | |
23 height: 32px; | |
24 width: 32px; | |
25 } | |
26 </style> | |
27 | |
28 Example using icon from default iconset: | |
29 | |
30 <core-icon icon="menu"></core-icon> | |
31 | |
32 Example using icon `cherry` from custom iconset `fruit`: | |
33 | |
34 <core-icon icon="fruit:cherry"></core-icon> | |
35 | |
36 See [core-iconset](#core-iconset) and [core-iconset-svg](#core-iconset-svg) for
more information about | |
37 how to use a custom iconset. | |
38 | |
39 See [core-icons](http://www.polymer-project.org/components/core-icons/demo.html)
for the default set of icons. To use the default set of icons you'll need to in
clude an import for `core-icons.html`. To use a different built-in set of icons,
you'll need to include an import for `core-icons/iconsets/<iconset>.html`. | |
40 | |
41 @group Polymer Core Elements | |
42 @element core-icon | |
43 @homepage polymer.github.io | |
44 --> | |
45 <link rel="import" href="../core-iconset/core-iconset.html"> | |
46 | |
47 <link rel="stylesheet" href="core-icon.css" shim-shadowdom> | |
48 | |
49 <polymer-element name="core-icon" attributes="src icon alt"> | |
50 <script> | |
51 (function() { | |
52 | |
53 // mono-state | |
54 var meta; | |
55 | |
56 Polymer('core-icon', { | |
57 | |
58 /** | |
59 * The URL of an image for the icon. If the src property is specified, | |
60 * the icon property should not be. | |
61 * | |
62 * @attribute src | |
63 * @type string | |
64 * @default '' | |
65 */ | |
66 src: '', | |
67 | |
68 /** | |
69 * Specifies the icon name or index in the set of icons available in | |
70 * the icon's icon set. If the icon property is specified, | |
71 * the src property should not be. | |
72 * | |
73 * @attribute icon | |
74 * @type string | |
75 * @default '' | |
76 */ | |
77 icon: '', | |
78 | |
79 /** | |
80 * Alternative text content for accessibility support. | |
81 * If alt is present and not empty, it will set the element's role to img an
d add an aria-label whose content matches alt. | |
82 * If alt is present and is an empty string, '', it will hide the element fr
om the accessibility layer | |
83 * If alt is not present, it will set the element's role to img and the elem
ent will fallback to using the icon attribute for its aria-label. | |
84 * | |
85 * @attribute alt | |
86 * @type string | |
87 * @default '' | |
88 */ | |
89 alt: null, | |
90 | |
91 observe: { | |
92 'icon': 'updateIcon', | |
93 'alt': 'updateAlt' | |
94 }, | |
95 | |
96 defaultIconset: 'icons', | |
97 | |
98 ready: function() { | |
99 if (!meta) { | |
100 meta = document.createElement('core-iconset'); | |
101 } | |
102 | |
103 // Allow user-provided `aria-label` in preference to any other text altern
ative. | |
104 if (this.hasAttribute('aria-label')) { | |
105 // Set `role` if it has not been overridden. | |
106 if (!this.hasAttribute('role')) { | |
107 this.setAttribute('role', 'img'); | |
108 } | |
109 return; | |
110 } | |
111 this.updateAlt(); | |
112 }, | |
113 | |
114 srcChanged: function() { | |
115 var icon = this._icon || document.createElement('div'); | |
116 icon.textContent = ''; | |
117 icon.setAttribute('fit', ''); | |
118 icon.style.backgroundImage = 'url(' + this.src + ')'; | |
119 icon.style.backgroundPosition = 'center'; | |
120 icon.style.backgroundSize = '100%'; | |
121 if (!icon.parentNode) { | |
122 this.appendChild(icon); | |
123 } | |
124 this._icon = icon; | |
125 }, | |
126 | |
127 getIconset: function(name) { | |
128 return meta.byId(name || this.defaultIconset); | |
129 }, | |
130 | |
131 updateIcon: function(oldVal, newVal) { | |
132 if (!this.icon) { | |
133 this.updateAlt(); | |
134 return; | |
135 } | |
136 var parts = String(this.icon).split(':'); | |
137 var icon = parts.pop(); | |
138 if (icon) { | |
139 var set = this.getIconset(parts.pop()); | |
140 if (set) { | |
141 this._icon = set.applyIcon(this, icon); | |
142 if (this._icon) { | |
143 this._icon.setAttribute('fit', ''); | |
144 } | |
145 } | |
146 } | |
147 // Check to see if we're using the old icon's name for our a11y fallback | |
148 if (oldVal) { | |
149 if (oldVal.split(':').pop() == this.getAttribute('aria-label')) { | |
150 this.updateAlt(); | |
151 } | |
152 } | |
153 }, | |
154 | |
155 updateAlt: function() { | |
156 // Respect the user's decision to remove this element from | |
157 // the a11y tree | |
158 if (this.getAttribute('aria-hidden')) { | |
159 return; | |
160 } | |
161 | |
162 // Remove element from a11y tree if `alt` is empty, otherwise | |
163 // use `alt` as `aria-label`. | |
164 if (this.alt === '') { | |
165 this.setAttribute('aria-hidden', 'true'); | |
166 if (this.hasAttribute('role')) { | |
167 this.removeAttribute('role'); | |
168 } | |
169 if (this.hasAttribute('aria-label')) { | |
170 this.removeAttribute('aria-label'); | |
171 } | |
172 } else { | |
173 this.setAttribute('aria-label', this.alt || | |
174 this.icon.split(':').pop()); | |
175 if (!this.hasAttribute('role')) { | |
176 this.setAttribute('role', 'img'); | |
177 } | |
178 if (this.hasAttribute('aria-hidden')) { | |
179 this.removeAttribute('aria-hidden'); | |
180 } | |
181 } | |
182 } | |
183 | |
184 }); | |
185 | |
186 })(); | |
187 </script> | |
188 | |
189 </polymer-element> | |
OLD | NEW |