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

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

Issue 1187823002: Update Polymer components and re-run reproduce.sh (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Rebase 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 @license
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 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 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 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 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 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 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 --> 9 -->
10 10
(...skipping 26 matching lines...) Expand all
37 * 37 *
38 * This will automatically register the icon set "my-svg-icons" to the iconset 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 39 * database. To use these icons from within another element, make a
40 * `iron-iconset` element and call the `byId` method 40 * `iron-iconset` element and call the `byId` method
41 * to retrieve a given iconset. To apply a particular icon inside an 41 * to retrieve a given iconset. To apply a particular icon inside an
42 * element use the `applyIcon` method. For example: 42 * element use the `applyIcon` method. For example:
43 * 43 *
44 * iconset.applyIcon(iconNode, 'car'); 44 * iconset.applyIcon(iconNode, 'car');
45 * 45 *
46 * @element iron-iconset-svg 46 * @element iron-iconset-svg
47 * @demo demo/index.html
47 */ 48 */
48 Polymer({ 49 Polymer({
49 50
50 is: 'iron-iconset-svg', 51 is: 'iron-iconset-svg',
51 52
52 properties: { 53 properties: {
53 54
54 /** 55 /**
55 * The name of the iconset. 56 * The name of the iconset.
56 * 57 *
57 * @attribute name 58 * @attribute name
58 * @type string 59 * @type string
59 */ 60 */
60 name: { 61 name: {
61 type: String, 62 type: String,
62 observer: '_nameChanged' 63 observer: '_nameChanged'
63 }, 64 },
64 65
65 /** 66 /**
66 * Array of fully-qualitifed icon names in the iconset.
67 */
68 iconNames: {
69 type: Array,
70 notify: true
71 },
72
73 /**
74 * The size of an individual icon. Note that icons must be square. 67 * The size of an individual icon. Note that icons must be square.
75 * 68 *
76 * @attribute iconSize 69 * @attribute iconSize
77 * @type number 70 * @type number
78 * @default 24 71 * @default 24
79 */ 72 */
80 size: { 73 size: {
81 type: Number, 74 type: Number,
82 value: 24 75 value: 24
83 } 76 }
84 77
85 }, 78 },
86 79
87 /** 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 /**
88 * Applies an icon to the given element. 93 * Applies an icon to the given element.
89 * 94 *
90 * An svg icon is prepended to the element's shadowRoot if it exists, 95 * An svg icon is prepended to the element's shadowRoot if it exists,
91 * otherwise to the element itself. 96 * otherwise to the element itself.
92 * 97 *
93 * @method applyIcon 98 * @method applyIcon
94 * @param {Element} element Element to which the icon is applied. 99 * @param {Element} element Element to which the icon is applied.
95 * @param {string} iconName Name of the icon to apply. 100 * @param {string} iconName Name of the icon to apply.
96 * @return {Element} The svg element which renders the icon. 101 * @return {Element} The svg element which renders the icon.
97 */ 102 */
(...skipping 21 matching lines...) Expand all
119 removeIcon: function(element) { 124 removeIcon: function(element) {
120 // Remove old svg element 125 // Remove old svg element
121 if (element._svgIcon) { 126 if (element._svgIcon) {
122 Polymer.dom(element).removeChild(element._svgIcon); 127 Polymer.dom(element).removeChild(element._svgIcon);
123 element._svgIcon = null; 128 element._svgIcon = null;
124 } 129 }
125 }, 130 },
126 131
127 /** 132 /**
128 * 133 *
129 * When name is changed, either register a new iconset with the included 134 * When name is changed, register iconset metadata
130 * icons, or if there are no children, set up a meta-iconset.
131 * 135 *
132 */ 136 */
133 _nameChanged: function() { 137 _nameChanged: function() {
134 new Polymer.IronMeta({type: 'iconset', key: this.name, value: this}); 138 new Polymer.IronMeta({type: 'iconset', key: this.name, value: this});
135 // icons (descendents) must exist a-priori
136 this._icons = this._createIconMap();
137 this.iconNames = this._getIconNames();
138 },
139
140 /**
141 * Array of all icon names in this iconset.
142 *
143 * @return {!Array} Array of icon names.
144 */
145 _getIconNames: function() {
146 return Object.keys(this._icons).map(function(n) {
147 return this.name + ':' + n;
148 }, this);
149 }, 139 },
150 140
151 /** 141 /**
152 * Create a map of child SVG elements by id. 142 * Create a map of child SVG elements by id.
153 * 143 *
154 * @return {Object} Map of id's to SVG elements. 144 * @return {!Object} Map of id's to SVG elements.
155 */ 145 */
156 _createIconMap: function() { 146 _createIconMap: function() {
157 // Objects chained to Object.prototype (`{}`) have members. Specifically, 147 // Objects chained to Object.prototype (`{}`) have members. Specifically,
158 // on FF there is a `watch` method that confuses the icon map, so we 148 // on FF there is a `watch` method that confuses the icon map, so we
159 // need to use a null-based object here. 149 // need to use a null-based object here.
160 var icons = Object.create(null); 150 var icons = Object.create(null);
161 Polymer.dom(this).querySelectorAll('[id]') 151 Polymer.dom(this).querySelectorAll('[id]')
162 .forEach(function(icon) { 152 .forEach(function(icon) {
163 icons[icon.id] = icon; 153 icons[icon.id] = icon;
164 }); 154 });
165 return icons; 155 return icons;
166 }, 156 },
167 157
168 /** 158 /**
169 * Produce installable clone of the SVG element matching `id` in this 159 * Produce installable clone of the SVG element matching `id` in this
170 * iconset, or `undefined` if there is no matching element. 160 * iconset, or `undefined` if there is no matching element.
171 * 161 *
172 * @return {Element} Returns an installable clone of the SVG element 162 * @return {Element} Returns an installable clone of the SVG element
173 * matching `id`. 163 * matching `id`.
174 */ 164 */
175 _cloneIcon: function(id) { 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();
176 return this._prepareSvgClone(this._icons[id], this.size); 169 return this._prepareSvgClone(this._icons[id], this.size);
177 }, 170 },
178 171
179 /** 172 /**
180 * @param {Element} sourceSvg 173 * @param {Element} sourceSvg
181 * @param {number} size 174 * @param {number} size
182 * @return {Element} 175 * @return {Element}
183 */ 176 */
184 _prepareSvgClone: function(sourceSvg, size) { 177 _prepareSvgClone: function(sourceSvg, size) {
185 if (sourceSvg) { 178 if (sourceSvg) {
186 var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); 179 var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
187 svg.setAttribute('viewBox', ['0', '0', size, size].join(' ')); 180 svg.setAttribute('viewBox', ['0', '0', size, size].join(' '));
188 svg.setAttribute('preserveAspectRatio', 'xMidYMid meet'); 181 svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
189 // TODO(dfreedm): `pointer-events: none` works around https://crbug.com/ 370136 182 // TODO(dfreedm): `pointer-events: none` works around https://crbug.com/ 370136
190 // TODO(sjmiles): inline style may not be ideal, but avoids requiring a shadow-root 183 // TODO(sjmiles): inline style may not be ideal, but avoids requiring a shadow-root
191 svg.style.cssText = 'pointer-events: none; display: block; width: 100%; height: 100%;'; 184 svg.style.cssText = 'pointer-events: none; display: block; width: 100%; height: 100%;';
192 svg.appendChild(sourceSvg.cloneNode(true)).removeAttribute('id'); 185 svg.appendChild(sourceSvg.cloneNode(true)).removeAttribute('id');
193 return svg; 186 return svg;
194 } 187 }
195 return null; 188 return null;
196 } 189 }
197 190
198 }); 191 });
199 </script> 192 </script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698