src/third_party/polymer/components-chromium/core-iconset-svg/core-iconset-svg-extracted.js

   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