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

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

Issue 1162963002: Revert "Rename polymer and cr_elements v0_8 to v1_0" (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: 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
(Empty)
1
2 /**
3 * The `iron-iconset-svg` element allows users to define their own icon sets
4 * that contain svg icons. The svg icon elements should be children of the
5 * `iron-iconset-svg` element. Multiple icons should be given distinct id's.
6 *
7 * Using svg elements to create icons has a few advantages over traditional
8 * bitmap graphics like jpg or png. Icons that use svg are vector based so the y
9 * are resolution independent and should look good on any device. They are
10 * stylable via css. Icons can be themed, colorized, and even animated.
11 *
12 * Example:
13 *
14 * <iron-iconset-svg id="my-svg-icons" iconSize="24">
15 * <svg>
16 * <defs>
17 * <g id="shape">
18 * <rect x="50" y="50" width="50" height="50" />
19 * <circle cx="50" cy="50" r="50" />
20 * </g>
21 * </defs>
22 * </svg>
23 * </iron-iconset-svg>
24 *
25 * This will automatically register the icon set "my-svg-icons" to the iconset
26 * database. To use these icons from within another element, make a
27 * `iron-iconset` element and call the `byId` method
28 * to retrieve a given iconset. To apply a particular icon inside an
29 * element use the `applyIcon` method. For example:
30 *
31 * iconset.applyIcon(iconNode, 'car');
32 *
33 * @element iron-iconset-svg
34 */
35 Polymer({
36
37 is: 'iron-iconset-svg',
38
39 properties: {
40
41 /**
42 * The name of the iconset.
43 *
44 * @attribute name
45 * @type string
46 */
47 name: {
48 type: String,
49 observer: '_nameChanged'
50 },
51
52 /**
53 * Array of fully-qualitifed icon names in the iconset.
54 */
55 iconNames: {
56 type: Array,
57 notify: true
58 },
59
60 /**
61 * The size of an individual icon. Note that icons must be square.
62 *
63 * @attribute iconSize
64 * @type number
65 * @default 24
66 */
67 size: {
68 type: Number,
69 value: 24
70 }
71
72 },
73
74 /**
75 * Applies an icon to the given element.
76 *
77 * An svg icon is prepended to the element's shadowRoot if it exists,
78 * otherwise to the element itself.
79 *
80 * @method applyIcon
81 * @param {Element} element Element to which the icon is applied.
82 * @param {string} iconName Name of the icon to apply.
83 * @return {Element} The svg element which renders the icon.
84 */
85 applyIcon: function(element, iconName) {
86 // insert svg element into shadow root, if it exists
87 element = element.root || element;
88 // Remove old svg element
89 this.removeIcon(element);
90 // install new svg element
91 var svg = this._cloneIcon(iconName);
92 if (svg) {
93 var pde = Polymer.dom(element);
94 pde.insertBefore(svg, pde.childNodes[0]);
95 return element._svgIcon = svg;
96 }
97 return null;
98 },
99
100 /**
101 * Remove an icon from the given element by undoing the changes effected
102 * by `applyIcon`.
103 *
104 * @param {Element} element The element from which the icon is removed.
105 */
106 removeIcon: function(element) {
107 // Remove old svg element
108 if (element._svgIcon) {
109 Polymer.dom(element).removeChild(element._svgIcon);
110 element._svgIcon = null;
111 }
112 },
113
114 /**
115 *
116 * When name is changed, either register a new iconset with the included
117 * icons, or if there are no children, set up a meta-iconset.
118 *
119 */
120 _nameChanged: function() {
121 new Polymer.IronMeta({type: 'iconset', key: this.name, value: this});
122 // icons (descendents) must exist a-priori
123 this._icons = this._createIconMap();
124 this.iconNames = this._getIconNames();
125 },
126
127 /**
128 * Array of all icon names in this iconset.
129 *
130 * @return {!Array} Array of icon names.
131 */
132 _getIconNames: function() {
133 return Object.keys(this._icons).map(function(n) {
134 return this.name + ':' + n;
135 }, this);
136 },
137
138 /**
139 * Create a map of child SVG elements by id.
140 *
141 * @return {Object} Map of id's to SVG elements.
142 */
143 _createIconMap: function() {
144 // Objects chained to Object.prototype (`{}`) have members. Specifically,
145 // on FF there is a `watch` method that confuses the icon map, so we
146 // need to use a null-based object here.
147 var icons = Object.create(null);
148 Polymer.dom(this).querySelectorAll('[id]')
149 .forEach(function(icon) {
150 icons[icon.id] = icon;
151 });
152 return icons;
153 },
154
155 /**
156 * Produce installable clone of the SVG element matching `id` in this
157 * iconset, or `undefined` if there is no matching element.
158 *
159 * @return {Element} Returns an installable clone of the SVG element
160 * matching `id`.
161 */
162 _cloneIcon: function(id) {
163 return this._prepareSvgClone(this._icons[id], this.size);
164 },
165
166 /**
167 * @param {Element} sourceSvg
168 * @param {number} size
169 * @return {Element}
170 */
171 _prepareSvgClone: function(sourceSvg, size) {
172 if (sourceSvg) {
173 var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
174 svg.setAttribute('viewBox', ['0', '0', size, size].join(' '));
175 svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
176 // TODO(dfreedm): `pointer-events: none` works around https://crbug.com/ 370136
177 // TODO(sjmiles): inline style may not be ideal, but avoids requiring a shadow-root
178 svg.style.cssText = 'pointer-events: none; display: block; width: 100%; height: 100%;';
179 svg.appendChild(sourceSvg.cloneNode(true)).removeAttribute('id');
180 return svg;
181 }
182 return null;
183 }
184
185 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698