OLD | NEW |
(Empty) | |
| 1 <!-- |
| 2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 6 Code distributed by Google as part of the polymer project is also |
| 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 8 --> |
| 9 |
| 10 <!-- |
| 11 /** |
| 12 * @group Polymer Core Elements |
| 13 * |
| 14 * The `core-iconset-svg` element allows users to define their own icon sets |
| 15 * that contain svg icons. The svg icon elements should be children of the |
| 16 * `core-iconset-svg` element. Multiple icons should be given distinct id's. |
| 17 * |
| 18 * Using svg elements to create icons has a few advantages over traditional |
| 19 * bitmap graphics like jpg or png. Icons that use svg are vector based so they |
| 20 * are resolution independent and should look good on any device. They are |
| 21 * stylable via css. Icons can be themed, colorized, and even animated. |
| 22 * |
| 23 * Example: |
| 24 * |
| 25 * <core-iconset-svg id="my-svg-icons" iconSize="24"> |
| 26 * <svg> |
| 27 * <defs> |
| 28 * <g id="shape"> |
| 29 * <rect x="50" y="50" width="50" height="50" /> |
| 30 * <circle cx="50" cy="50" r="50" /> |
| 31 * </g> |
| 32 * </defs> |
| 33 * </svg> |
| 34 * </core-iconset-svg> |
| 35 * |
| 36 * This will automatically register the icon set "my-svg-icons" to the iconset |
| 37 * database. To use these icons from within another element, make a |
| 38 * `core-iconset` element and call the `byId` method |
| 39 * to retrieve a given iconset. To apply a particular icon inside an |
| 40 * element use the `applyIcon` method. For example: |
| 41 * |
| 42 * iconset.applyIcon(iconNode, 'car'); |
| 43 * |
| 44 * @element core-iconset-svg |
| 45 * @extends core-meta |
| 46 * @homepage github.io |
| 47 */ |
| 48 --> |
| 49 |
| 50 <link rel="import" href="../core-iconset/core-iconset.html"> |
| 51 |
| 52 <polymer-element name="core-iconset-svg" extends="core-meta" attributes="iconSiz
e"> |
| 53 |
| 54 <script> |
| 55 |
| 56 Polymer('core-iconset-svg', { |
| 57 |
| 58 |
| 59 /** |
| 60 * The size of an individual icon. Note that icons must be square. |
| 61 * |
| 62 * @attribute iconSize |
| 63 * @type number |
| 64 * @default 24 |
| 65 */ |
| 66 iconSize: 24, |
| 67 type: 'iconset', |
| 68 |
| 69 created: function() { |
| 70 this._icons = {}; |
| 71 }, |
| 72 |
| 73 ready: function() { |
| 74 this.super(); |
| 75 this.updateIcons(); |
| 76 }, |
| 77 |
| 78 iconById: function(id) { |
| 79 return this._icons[id] || (this._icons[id] = this.querySelector('#' + id
)); |
| 80 }, |
| 81 |
| 82 cloneIcon: function(id) { |
| 83 var icon = this.iconById(id); |
| 84 if (icon) { |
| 85 var content = icon.cloneNode(true); |
| 86 content.removeAttribute('id'); |
| 87 var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'
); |
| 88 svg.setAttribute('viewBox', '0 0 ' + this.iconSize + ' ' + |
| 89 this.iconSize); |
| 90 // NOTE(dfreedm): work around https://crbug.com/370136 |
| 91 svg.style.pointerEvents = 'none'; |
| 92 svg.appendChild(content); |
| 93 return svg; |
| 94 } |
| 95 }, |
| 96 |
| 97 get iconNames() { |
| 98 if (!this._iconNames) { |
| 99 this._iconNames = this.findIconNames(); |
| 100 } |
| 101 return this._iconNames; |
| 102 }, |
| 103 |
| 104 findIconNames: function() { |
| 105 var icons = this.querySelectorAll('[id]').array(); |
| 106 if (icons.length) { |
| 107 return icons.map(function(n){ return n.id }); |
| 108 } |
| 109 }, |
| 110 |
| 111 /** |
| 112 * Applies an icon to the given element. The svg icon is added to the |
| 113 * element's shadowRoot if one exists or directly to itself. |
| 114 * |
| 115 * @method applyIcon |
| 116 * @param {Element} element The element to which the icon is |
| 117 * applied. |
| 118 * @param {String|Number} icon The name the icon to apply. |
| 119 * @return {Element} The icon element |
| 120 */ |
| 121 applyIcon: function(element, icon) { |
| 122 var root = element; |
| 123 // remove old |
| 124 var old = root.querySelector('svg'); |
| 125 if (old) { |
| 126 old.remove(); |
| 127 } |
| 128 // install new |
| 129 var svg = this.cloneIcon(icon); |
| 130 if (!svg) { |
| 131 return; |
| 132 } |
| 133 svg.setAttribute('height', '100%'); |
| 134 svg.setAttribute('width', '100%'); |
| 135 svg.setAttribute('preserveAspectRatio', 'xMidYMid meet'); |
| 136 svg.style.display = 'block'; |
| 137 root.insertBefore(svg, root.firstElementChild); |
| 138 return svg; |
| 139 }, |
| 140 |
| 141 /** |
| 142 * Tell users of the iconset, that the set has loaded. |
| 143 * This finds all elements matching the selector argument and calls |
| 144 * the method argument on them. |
| 145 * @method updateIcons |
| 146 * @param selector {string} css selector to identify iconset users, |
| 147 * defaults to '[icon]' |
| 148 * @param method {string} method to call on found elements, |
| 149 * defaults to 'updateIcon' |
| 150 */ |
| 151 updateIcons: function(selector, method) { |
| 152 selector = selector || '[icon]'; |
| 153 method = method || 'updateIcon'; |
| 154 var deep = window.ShadowDOMPolyfill ? '' : 'html /deep/ '; |
| 155 var i$ = document.querySelectorAll(deep + selector); |
| 156 for (var i=0, e; e=i$[i]; i++) { |
| 157 if (e[method]) { |
| 158 e[method].call(e); |
| 159 } |
| 160 } |
| 161 } |
| 162 |
| 163 |
| 164 }); |
| 165 |
| 166 </script> |
| 167 |
| 168 </polymer-element> |
OLD | NEW |