Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(447)

Side by Side Diff: third_party/polymer/v0_8/components/iron-iconset-svg/iron-iconset-svg.html

Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fix a layout import and remove the gzipped webanimation in reproduce.sh Created 5 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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
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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698