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

Side by Side Diff: third_party/polymer/v1_0/components-chromium/iron-iconset-svg/iron-iconset-svg-extracted.js

Issue 2413613002: Roll Polymer element iron-iconset-svg, 1.0.9 -> 1.0.11 to pick up: (Closed)
Patch Set: fix Created 4 years, 2 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 * The `iron-iconset-svg` element allows users to define their own icon sets 2 * The `iron-iconset-svg` element allows users to define their own icon sets
3 * that contain svg icons. The svg icon elements should be children of the 3 * that contain svg icons. The svg icon elements should be children of the
4 * `iron-iconset-svg` element. Multiple icons should be given distinct id's. 4 * `iron-iconset-svg` element. Multiple icons should be given distinct id's.
5 * 5 *
6 * Using svg elements to create icons has a few advantages over traditional 6 * Using svg elements to create icons has a few advantages over traditional
7 * bitmap graphics like jpg or png. Icons that use svg are vector based so 7 * bitmap graphics like jpg or png. Icons that use svg are vector based so
8 * they are resolution independent and should look good on any device. They 8 * they are resolution independent and should look good on any device. They
9 * are stylable via css. Icons can be themed, colorized, and even animated. 9 * are stylable via css. Icons can be themed, colorized, and even animated.
10 * 10 *
(...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after
45 type: String, 45 type: String,
46 observer: '_nameChanged' 46 observer: '_nameChanged'
47 }, 47 },
48 48
49 /** 49 /**
50 * The size of an individual icon. Note that icons must be square. 50 * The size of an individual icon. Note that icons must be square.
51 */ 51 */
52 size: { 52 size: {
53 type: Number, 53 type: Number,
54 value: 24 54 value: 24
55 },
56
57 /**
58 * Set to true to enable mirroring of icons where specified when they are
59 * stamped. Icons that should be mirrored should be decorated with a
60 * `mirror-in-rtl` attribute.
61 */
62 rtlMirroring: {
63 type: Boolean,
64 value: false
65 }
66 },
67
68 _targetIsRTL: function(target) {
69 if (target && target.nodeType !== Node.ELEMENT_NODE) {
70 target = target.host;
55 } 71 }
56 72
73 return target && window.getComputedStyle(target)['direction'] === 'rtl';
57 }, 74 },
58 75
59 attached: function() { 76 attached: function() {
60 this.style.display = 'none'; 77 this.style.display = 'none';
61 }, 78 },
62 79
63 /** 80 /**
64 * Construct an array of all icon names in this iconset. 81 * Construct an array of all icon names in this iconset.
65 * 82 *
66 * @return {!Array} Array of icon names. 83 * @return {!Array} Array of icon names.
(...skipping 15 matching lines...) Expand all
82 * @param {Element} element Element to which the icon is applied. 99 * @param {Element} element Element to which the icon is applied.
83 * @param {string} iconName Name of the icon to apply. 100 * @param {string} iconName Name of the icon to apply.
84 * @return {?Element} The svg element which renders the icon. 101 * @return {?Element} The svg element which renders the icon.
85 */ 102 */
86 applyIcon: function(element, iconName) { 103 applyIcon: function(element, iconName) {
87 // insert svg element into shadow root, if it exists 104 // insert svg element into shadow root, if it exists
88 element = element.root || element; 105 element = element.root || element;
89 // Remove old svg element 106 // Remove old svg element
90 this.removeIcon(element); 107 this.removeIcon(element);
91 // install new svg element 108 // install new svg element
92 var svg = this._cloneIcon(iconName); 109 var svg = this._cloneIcon(iconName,
110 this.rtlMirroring && this._targetIsRTL(element));
93 if (svg) { 111 if (svg) {
94 var pde = Polymer.dom(element); 112 var pde = Polymer.dom(element);
95 pde.insertBefore(svg, pde.childNodes[0]); 113 pde.insertBefore(svg, pde.childNodes[0]);
96 return element._svgIcon = svg; 114 return element._svgIcon = svg;
97 } 115 }
98 return null; 116 return null;
99 }, 117 },
100 118
101 /** 119 /**
102 * Remove an icon from the given element by undoing the changes effected 120 * Remove an icon from the given element by undoing the changes effected
103 * by `applyIcon`. 121 * by `applyIcon`.
104 * 122 *
105 * @param {Element} element The element from which the icon is removed. 123 * @param {Element} element The element from which the icon is removed.
106 */ 124 */
107 removeIcon: function(element) { 125 removeIcon: function(element) {
108 // Remove old svg element 126 // Remove old svg element
127 element = element.root || element;
109 if (element._svgIcon) { 128 if (element._svgIcon) {
110 Polymer.dom(element).removeChild(element._svgIcon); 129 Polymer.dom(element).removeChild(element._svgIcon);
111 element._svgIcon = null; 130 element._svgIcon = null;
112 } 131 }
113 }, 132 },
114 133
115 /** 134 /**
116 * 135 *
117 * When name is changed, register iconset metadata 136 * When name is changed, register iconset metadata
118 * 137 *
(...skipping 22 matching lines...) Expand all
141 return icons; 160 return icons;
142 }, 161 },
143 162
144 /** 163 /**
145 * Produce installable clone of the SVG element matching `id` in this 164 * Produce installable clone of the SVG element matching `id` in this
146 * iconset, or `undefined` if there is no matching element. 165 * iconset, or `undefined` if there is no matching element.
147 * 166 *
148 * @return {Element} Returns an installable clone of the SVG element 167 * @return {Element} Returns an installable clone of the SVG element
149 * matching `id`. 168 * matching `id`.
150 */ 169 */
151 _cloneIcon: function(id) { 170 _cloneIcon: function(id, mirrorAllowed) {
152 // create the icon map on-demand, since the iconset itself has no discrete 171 // create the icon map on-demand, since the iconset itself has no discrete
153 // signal to know when it's children are fully parsed 172 // signal to know when it's children are fully parsed
154 this._icons = this._icons || this._createIconMap(); 173 this._icons = this._icons || this._createIconMap();
155 return this._prepareSvgClone(this._icons[id], this.size); 174 return this._prepareSvgClone(this._icons[id], this.size, mirrorAllowed);
156 }, 175 },
157 176
158 /** 177 /**
159 * @param {Element} sourceSvg 178 * @param {Element} sourceSvg
160 * @param {number} size 179 * @param {number} size
180 * @param {Boolean} mirrorAllowed
161 * @return {Element} 181 * @return {Element}
162 */ 182 */
163 _prepareSvgClone: function(sourceSvg, size) { 183 _prepareSvgClone: function(sourceSvg, size, mirrorAllowed) {
164 if (sourceSvg) { 184 if (sourceSvg) {
165 var content = sourceSvg.cloneNode(true), 185 var content = sourceSvg.cloneNode(true),
166 svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'), 186 svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
167 viewBox = content.getAttribute('viewBox') || '0 0 ' + size + ' ' + s ize; 187 viewBox = content.getAttribute('viewBox') || '0 0 ' + size + ' ' + s ize,
188 cssText = 'pointer-events: none; display: block; width: 100%; height : 100%;';
189
190 if (mirrorAllowed && content.hasAttribute('mirror-in-rtl')) {
191 cssText += '-webkit-transform:scale(-1,1);transform:scale(-1,1);';
192 }
193
168 svg.setAttribute('viewBox', viewBox); 194 svg.setAttribute('viewBox', viewBox);
169 svg.setAttribute('preserveAspectRatio', 'xMidYMid meet'); 195 svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
170 // TODO(dfreedm): `pointer-events: none` works around https://crbug.com/ 370136 196 // TODO(dfreedm): `pointer-events: none` works around https://crbug.com/ 370136
171 // TODO(sjmiles): inline style may not be ideal, but avoids requiring a shadow-root 197 // TODO(sjmiles): inline style may not be ideal, but avoids requiring a shadow-root
172 svg.style.cssText = 'pointer-events: none; display: block; width: 100%; height: 100%;'; 198 svg.style.cssText = cssText;
173 svg.appendChild(content).removeAttribute('id'); 199 svg.appendChild(content).removeAttribute('id');
174 return svg; 200 return svg;
175 } 201 }
176 return null; 202 return null;
177 } 203 }
178 204
179 }); 205 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698