src/third_party/polymer/components/core-icon/core-icon.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 The `core-icon` element displays an icon. By default an icon renders as 24px square.
  12
  13 Example using src:
  14
  15     <core-icon src="star.png"></core-icon>
  16
  17 Example setting size to 32px x 32px:
  18
  19     <core-icon class="big" src="big_star.png"></core-icon>
  20
  21     <style>
  22       .big {
  23         height: 32px;
  24         width: 32px;
  25       }
  26     </style>
  27
  28 Example using icon from default iconset:
  29
  30     <core-icon icon="menu"></core-icon>
  31
  32 Example using icon `cherry` from custom iconset `fruit`:
  33
  34     <core-icon icon="fruit:cherry"></core-icon>
  35
  36 See [core-iconset](#core-iconset) and [core-iconset-svg](#core-iconset-svg) for more information about
  37 how to use a custom iconset.
  38
  39 See [core-icons](http://www.polymer-project.org/components/core-icons/demo.html) for the default set of icons. To use the default set of icons you'll need to include an import for `core-icons.html`. To use a different built-in set of icons, you'll need to include an import for `core-icons/iconsets/<iconset>.html`.
  40
  41 @group Polymer Core Elements
  42 @element core-icon
  43 @homepage polymer.github.io
  44 -->
  45 <link rel="import" href="../core-iconset/core-iconset.html">
  46
  47 <link rel="stylesheet" href="core-icon.css" shim-shadowdom>
  48
  49 <polymer-element name="core-icon" attributes="src icon alt">
  50 <script>
  51 (function() {
  52
  53   // mono-state
  54   var meta;
  55
  56   Polymer('core-icon', {
  57
  58     /**
  59      * The URL of an image for the icon. If the src property is specified,
  60      * the icon property should not be.
  61      *
  62      * @attribute src
  63      * @type string
  64      * @default ''
  65      */
  66     src: '',
  67
  68     /**
  69      * Specifies the icon name or index in the set of icons available in
  70      * the icon's icon set. If the icon property is specified,
  71      * the src property should not be.
  72      *
  73      * @attribute icon
  74      * @type string
  75      * @default ''
  76      */
  77     icon: '',
  78
  79     /**
  80      * Alternative text content for accessibility support.
  81      * If alt is present and not empty, it will set the element's role to img and add an aria-label whose content matches alt.
  82      * If alt is present and is an empty string, '', it will hide the element from the accessibility layer
  83      * If alt is not present, it will set the element's role to img and the element will fallback to using the icon attribute for its aria-label.
  84      *
  85      * @attribute alt
  86      * @type string
  87      * @default ''
  88      */
  89     alt: null,
  90
  91     observe: {
  92       'icon': 'updateIcon',
  93       'alt': 'updateAlt'
  94     },
  95
  96     defaultIconset: 'icons',
  97
  98     ready: function() {
  99       if (!meta) {
 100         meta = document.createElement('core-iconset');
 101       }
 102
 103       // Allow user-provided `aria-label` in preference to any other text alternative.
 104       if (this.hasAttribute('aria-label')) {
 105         // Set `role` if it has not been overridden.
 106         if (!this.hasAttribute('role')) {
 107           this.setAttribute('role', 'img');
 108         }
 109         return;
 110       }
 111       this.updateAlt();
 112     },
 113
 114     srcChanged: function() {
 115       var icon = this._icon || document.createElement('div');
 116       icon.textContent = '';
 117       icon.setAttribute('fit', '');
 118       icon.style.backgroundImage = 'url(' + this.src + ')';
 119       icon.style.backgroundPosition = 'center';
 120       icon.style.backgroundSize = '100%';
 121       if (!icon.parentNode) {
 122         this.appendChild(icon);
 123       }
 124       this._icon = icon;
 125     },
 126
 127     getIconset: function(name) {
 128       return meta.byId(name || this.defaultIconset);
 129     },
 130
 131     updateIcon: function(oldVal, newVal) {
 132       if (!this.icon) {
 133         this.updateAlt();
 134         return;
 135       }
 136       var parts = String(this.icon).split(':');
 137       var icon = parts.pop();
 138       if (icon) {
 139         var set = this.getIconset(parts.pop());
 140         if (set) {
 141           this._icon = set.applyIcon(this, icon);
 142           if (this._icon) {
 143             this._icon.setAttribute('fit', '');
 144           }
 145         }
 146       }
 147       // Check to see if we're using the old icon's name for our a11y fallback
 148       if (oldVal) {
 149         if (oldVal.split(':').pop() == this.getAttribute('aria-label')) {
 150           this.updateAlt();
 151         }
 152       }
 153     },
 154
 155     updateAlt: function() {
 156       // Respect the user's decision to remove this element from
 157       // the a11y tree
 158       if (this.getAttribute('aria-hidden')) {
 159         return;
 160       }
 161
 162       // Remove element from a11y tree if `alt` is empty, otherwise
 163       // use `alt` as `aria-label`.
 164       if (this.alt === '') {
 165         this.setAttribute('aria-hidden', 'true');
 166         if (this.hasAttribute('role')) {
 167           this.removeAttribute('role');
 168         }
 169         if (this.hasAttribute('aria-label')) {
 170           this.removeAttribute('aria-label');
 171         }
 172       } else {
 173         this.setAttribute('aria-label', this.alt ||
 174                                         this.icon.split(':').pop());
 175         if (!this.hasAttribute('role')) {
 176           this.setAttribute('role', 'img');
 177         }
 178         if (this.hasAttribute('aria-hidden')) {
 179           this.removeAttribute('aria-hidden');
 180         }
 181       }
 182     }
 183
 184   });
 185
 186 })();
 187 </script>
 188
 189 </polymer-element>