third_party/polymer/components/core-iconset-svg/core-iconset-svg.html

   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.github.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/CONTRIBUTORS.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/PATENTS.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="iconSize">
  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="' + 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>