OLD | NEW |
(Empty) | |
| 1 |
| 2 |
| 3 Polymer('core-iconset-svg', { |
| 4 |
| 5 |
| 6 /** |
| 7 * The size of an individual icon. Note that icons must be square. |
| 8 * |
| 9 * @attribute iconSize |
| 10 * @type number |
| 11 * @default 24 |
| 12 */ |
| 13 iconSize: 24, |
| 14 type: 'iconset', |
| 15 |
| 16 created: function() { |
| 17 this._icons = {}; |
| 18 }, |
| 19 |
| 20 ready: function() { |
| 21 this.super(); |
| 22 this.updateIcons(); |
| 23 }, |
| 24 |
| 25 iconById: function(id) { |
| 26 return this._icons[id] || (this._icons[id] = this.querySelector('#' + id
)); |
| 27 }, |
| 28 |
| 29 cloneIcon: function(id) { |
| 30 var icon = this.iconById(id); |
| 31 if (icon) { |
| 32 var content = icon.cloneNode(true); |
| 33 content.removeAttribute('id'); |
| 34 var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'
); |
| 35 svg.setAttribute('viewBox', '0 0 ' + this.iconSize + ' ' + |
| 36 this.iconSize); |
| 37 // NOTE(dfreedm): work around https://crbug.com/370136 |
| 38 svg.style.pointerEvents = 'none'; |
| 39 svg.appendChild(content); |
| 40 return svg; |
| 41 } |
| 42 }, |
| 43 |
| 44 get iconNames() { |
| 45 if (!this._iconNames) { |
| 46 this._iconNames = this.findIconNames(); |
| 47 } |
| 48 return this._iconNames; |
| 49 }, |
| 50 |
| 51 findIconNames: function() { |
| 52 var icons = this.querySelectorAll('[id]').array(); |
| 53 if (icons.length) { |
| 54 return icons.map(function(n){ return n.id }); |
| 55 } |
| 56 }, |
| 57 |
| 58 /** |
| 59 * Applies an icon to the given element. The svg icon is added to the |
| 60 * element's shadowRoot if one exists or directly to itself. |
| 61 * |
| 62 * @method applyIcon |
| 63 * @param {Element} element The element to which the icon is |
| 64 * applied. |
| 65 * @param {String|Number} icon The name the icon to apply. |
| 66 * @return {Element} The icon element |
| 67 */ |
| 68 applyIcon: function(element, icon) { |
| 69 var root = element; |
| 70 // remove old |
| 71 var old = root.querySelector('svg'); |
| 72 if (old) { |
| 73 old.remove(); |
| 74 } |
| 75 // install new |
| 76 var svg = this.cloneIcon(icon); |
| 77 if (!svg) { |
| 78 return; |
| 79 } |
| 80 svg.setAttribute('height', '100%'); |
| 81 svg.setAttribute('width', '100%'); |
| 82 svg.setAttribute('preserveAspectRatio', 'xMidYMid meet'); |
| 83 svg.style.display = 'block'; |
| 84 root.insertBefore(svg, root.firstElementChild); |
| 85 return svg; |
| 86 }, |
| 87 |
| 88 /** |
| 89 * Tell users of the iconset, that the set has loaded. |
| 90 * This finds all elements matching the selector argument and calls |
| 91 * the method argument on them. |
| 92 * @method updateIcons |
| 93 * @param selector {string} css selector to identify iconset users, |
| 94 * defaults to '[icon]' |
| 95 * @param method {string} method to call on found elements, |
| 96 * defaults to 'updateIcon' |
| 97 */ |
| 98 updateIcons: function(selector, method) { |
| 99 selector = selector || '[icon]'; |
| 100 method = method || 'updateIcon'; |
| 101 var deep = window.ShadowDOMPolyfill ? '' : 'html /deep/ '; |
| 102 var i$ = document.querySelectorAll(deep + selector); |
| 103 for (var i=0, e; e=i$[i]; i++) { |
| 104 if (e[method]) { |
| 105 e[method].call(e); |
| 106 } |
| 107 } |
| 108 } |
| 109 |
| 110 |
| 111 }); |
| 112 |
| 113 |
OLD | NEW |