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

Side by Side Diff: polymer_1.2.3/bower_components/iron-iconset-svg/iron-iconset-svg.html

Issue 1581713003: [third_party] add polymer 1.2.3 (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: 1.2.3 Created 4 years, 11 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
11 <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"> 12 <link rel="import" href="../iron-meta/iron-meta.html">
13 13
14 <script> 14 <script>
15 /** 15 /**
16 * The `iron-iconset-svg` element allows users to define their own icon sets 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 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. 18 * `iron-iconset-svg` element. Multiple icons should be given distinct id's.
19 * 19 *
20 * Using svg elements to create icons has a few advantages over traditional 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 21 * bitmap graphics like jpg or png. Icons that use svg are vector based so
22 * are resolution independent and should look good on any device. They are 22 * they are resolution independent and should look good on any device. They
23 * stylable via css. Icons can be themed, colorized, and even animated. 23 * are stylable via css. Icons can be themed, colorized, and even animated.
24 * 24 *
25 * Example: 25 * Example:
26 * 26 *
27 * <iron-iconset-svg name="my-svg-icons" size="24"> 27 * <iron-iconset-svg name="my-svg-icons" size="24">
28 * <svg> 28 * <svg>
29 * <defs> 29 * <defs>
30 * <g id="shape"> 30 * <g id="shape">
31 * <rect x="50" y="50" width="50" height="50" /> 31 * <rect x="12" y="0" width="12" height="24" />
32 * <circle cx="50" cy="50" r="50" /> 32 * <circle cx="12" cy="12" r="12" />
33 * </g> 33 * </g>
34 * </defs> 34 * </defs>
35 * </svg> 35 * </svg>
36 * </iron-iconset-svg> 36 * </iron-iconset-svg>
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 * @demo demo/index.html
48 * @implements {Polymer.Iconset}
48 */ 49 */
49 Polymer({ 50 Polymer({
50
51 is: 'iron-iconset-svg', 51 is: 'iron-iconset-svg',
52 52
53 properties: { 53 properties: {
54 54
55 /** 55 /**
56 * The name of the iconset. 56 * The name of the iconset.
57 *
58 * @attribute name
59 * @type string
60 */ 57 */
61 name: { 58 name: {
62 type: String, 59 type: String,
63 observer: '_nameChanged' 60 observer: '_nameChanged'
64 }, 61 },
65 62
66 /** 63 /**
67 * The size of an individual icon. Note that icons must be square. 64 * The size of an individual icon. Note that icons must be square.
68 *
69 * @attribute iconSize
70 * @type number
71 * @default 24
72 */ 65 */
73 size: { 66 size: {
74 type: Number, 67 type: Number,
75 value: 24 68 value: 24
76 } 69 }
77 70
78 }, 71 },
79 72
73 attached: function() {
74 this.style.display = 'none';
75 },
76
80 /** 77 /**
81 * Construct an array of all icon names in this iconset. 78 * Construct an array of all icon names in this iconset.
82 * 79 *
83 * @return {!Array} Array of icon names. 80 * @return {!Array} Array of icon names.
84 */ 81 */
85 getIconNames: function() { 82 getIconNames: function() {
86 this._icons = this._createIconMap(); 83 this._icons = this._createIconMap();
87 return Object.keys(this._icons).map(function(n) { 84 return Object.keys(this._icons).map(function(n) {
88 return this.name + ':' + n; 85 return this.name + ':' + n;
89 }, this); 86 }, this);
90 }, 87 },
91 88
92 /** 89 /**
93 * Applies an icon to the given element. 90 * Applies an icon to the given element.
94 * 91 *
95 * An svg icon is prepended to the element's shadowRoot if it exists, 92 * An svg icon is prepended to the element's shadowRoot if it exists,
96 * otherwise to the element itself. 93 * otherwise to the element itself.
97 * 94 *
98 * @method applyIcon 95 * @method applyIcon
99 * @param {Element} element Element to which the icon is applied. 96 * @param {Element} element Element to which the icon is applied.
100 * @param {string} iconName Name of the icon to apply. 97 * @param {string} iconName Name of the icon to apply.
101 * @return {Element} The svg element which renders the icon. 98 * @return {?Element} The svg element which renders the icon.
102 */ 99 */
103 applyIcon: function(element, iconName) { 100 applyIcon: function(element, iconName) {
104 // insert svg element into shadow root, if it exists 101 // insert svg element into shadow root, if it exists
105 element = element.root || element; 102 element = element.root || element;
106 // Remove old svg element 103 // Remove old svg element
107 this.removeIcon(element); 104 this.removeIcon(element);
108 // install new svg element 105 // install new svg element
109 var svg = this._cloneIcon(iconName); 106 var svg = this._cloneIcon(iconName);
110 if (svg) { 107 if (svg) {
111 var pde = Polymer.dom(element); 108 var pde = Polymer.dom(element);
(...skipping 17 matching lines...) Expand all
129 } 126 }
130 }, 127 },
131 128
132 /** 129 /**
133 * 130 *
134 * When name is changed, register iconset metadata 131 * When name is changed, register iconset metadata
135 * 132 *
136 */ 133 */
137 _nameChanged: function() { 134 _nameChanged: function() {
138 new Polymer.IronMeta({type: 'iconset', key: this.name, value: this}); 135 new Polymer.IronMeta({type: 'iconset', key: this.name, value: this});
136 this.async(function() {
137 this.fire('iron-iconset-added', this, {node: window});
138 });
139 }, 139 },
140 140
141 /** 141 /**
142 * Create a map of child SVG elements by id. 142 * Create a map of child SVG elements by id.
143 * 143 *
144 * @return {!Object} Map of id's to SVG elements. 144 * @return {!Object} Map of id's to SVG elements.
145 */ 145 */
146 _createIconMap: function() { 146 _createIconMap: function() {
147 // Objects chained to Object.prototype (`{}`) have members. Specifically, 147 // Objects chained to Object.prototype (`{}`) have members. Specifically,
148 // 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
(...skipping 20 matching lines...) Expand all
169 return this._prepareSvgClone(this._icons[id], this.size); 169 return this._prepareSvgClone(this._icons[id], this.size);
170 }, 170 },
171 171
172 /** 172 /**
173 * @param {Element} sourceSvg 173 * @param {Element} sourceSvg
174 * @param {number} size 174 * @param {number} size
175 * @return {Element} 175 * @return {Element}
176 */ 176 */
177 _prepareSvgClone: function(sourceSvg, size) { 177 _prepareSvgClone: function(sourceSvg, size) {
178 if (sourceSvg) { 178 if (sourceSvg) {
179 var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); 179 var content = sourceSvg.cloneNode(true),
180 svg.setAttribute('viewBox', ['0', '0', size, size].join(' ')); 180 svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
181 viewBox = content.getAttribute('viewBox') || '0 0 ' + size + ' ' + s ize;
182 svg.setAttribute('viewBox', viewBox);
181 svg.setAttribute('preserveAspectRatio', 'xMidYMid meet'); 183 svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
182 // TODO(dfreedm): `pointer-events: none` works around https://crbug.com/ 370136 184 // TODO(dfreedm): `pointer-events: none` works around https://crbug.com/ 370136
183 // TODO(sjmiles): inline style may not be ideal, but avoids requiring a shadow-root 185 // TODO(sjmiles): inline style may not be ideal, but avoids requiring a shadow-root
184 svg.style.cssText = 'pointer-events: none; display: block; width: 100%; height: 100%;'; 186 svg.style.cssText = 'pointer-events: none; display: block; width: 100%; height: 100%;';
185 svg.appendChild(sourceSvg.cloneNode(true)).removeAttribute('id'); 187 svg.appendChild(content).removeAttribute('id');
186 return svg; 188 return svg;
187 } 189 }
188 return null; 190 return null;
189 } 191 }
190 192
191 }); 193 });
192 </script> 194 </script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698