OLD | NEW |
(Empty) | |
| 1 |
| 2 (function() { |
| 3 |
| 4 // mono-state |
| 5 var meta; |
| 6 |
| 7 Polymer('core-icon', { |
| 8 |
| 9 /** |
| 10 * The URL of an image for the icon. If the src property is specified, |
| 11 * the icon property should not be. |
| 12 * |
| 13 * @attribute src |
| 14 * @type string |
| 15 * @default '' |
| 16 */ |
| 17 src: '', |
| 18 |
| 19 /** |
| 20 * Specifies the icon name or index in the set of icons available in |
| 21 * the icon's icon set. If the icon property is specified, |
| 22 * the src property should not be. |
| 23 * |
| 24 * @attribute icon |
| 25 * @type string |
| 26 * @default '' |
| 27 */ |
| 28 icon: '', |
| 29 |
| 30 /** |
| 31 * Alternative text content for accessibility support. |
| 32 * If alt is present and not empty, it will set the element's role to img an
d add an aria-label whose content matches alt. |
| 33 * If alt is present and is an empty string, '', it will hide the element fr
om the accessibility layer |
| 34 * If alt is not present, it will set the element's role to img and the elem
ent will fallback to using the icon attribute for its aria-label. |
| 35 * |
| 36 * @attribute alt |
| 37 * @type string |
| 38 * @default '' |
| 39 */ |
| 40 alt: null, |
| 41 |
| 42 observe: { |
| 43 'icon': 'updateIcon', |
| 44 'alt': 'updateAlt' |
| 45 }, |
| 46 |
| 47 defaultIconset: 'icons', |
| 48 |
| 49 ready: function() { |
| 50 if (!meta) { |
| 51 meta = document.createElement('core-iconset'); |
| 52 } |
| 53 |
| 54 // Allow user-provided `aria-label` in preference to any other text altern
ative. |
| 55 if (this.hasAttribute('aria-label')) { |
| 56 // Set `role` if it has not been overridden. |
| 57 if (!this.hasAttribute('role')) { |
| 58 this.setAttribute('role', 'img'); |
| 59 } |
| 60 return; |
| 61 } |
| 62 this.updateAlt(); |
| 63 }, |
| 64 |
| 65 srcChanged: function() { |
| 66 var icon = this._icon || document.createElement('div'); |
| 67 icon.textContent = ''; |
| 68 icon.setAttribute('fit', ''); |
| 69 icon.style.backgroundImage = 'url(' + this.src + ')'; |
| 70 icon.style.backgroundPosition = 'center'; |
| 71 icon.style.backgroundSize = '100%'; |
| 72 if (!icon.parentNode) { |
| 73 this.appendChild(icon); |
| 74 } |
| 75 this._icon = icon; |
| 76 }, |
| 77 |
| 78 getIconset: function(name) { |
| 79 return meta.byId(name || this.defaultIconset); |
| 80 }, |
| 81 |
| 82 updateIcon: function(oldVal, newVal) { |
| 83 if (!this.icon) { |
| 84 this.updateAlt(); |
| 85 return; |
| 86 } |
| 87 var parts = String(this.icon).split(':'); |
| 88 var icon = parts.pop(); |
| 89 if (icon) { |
| 90 var set = this.getIconset(parts.pop()); |
| 91 if (set) { |
| 92 this._icon = set.applyIcon(this, icon); |
| 93 if (this._icon) { |
| 94 this._icon.setAttribute('fit', ''); |
| 95 } |
| 96 } |
| 97 } |
| 98 // Check to see if we're using the old icon's name for our a11y fallback |
| 99 if (oldVal) { |
| 100 if (oldVal.split(':').pop() == this.getAttribute('aria-label')) { |
| 101 this.updateAlt(); |
| 102 } |
| 103 } |
| 104 }, |
| 105 |
| 106 updateAlt: function() { |
| 107 // Respect the user's decision to remove this element from |
| 108 // the a11y tree |
| 109 if (this.getAttribute('aria-hidden')) { |
| 110 return; |
| 111 } |
| 112 |
| 113 // Remove element from a11y tree if `alt` is empty, otherwise |
| 114 // use `alt` as `aria-label`. |
| 115 if (this.alt === '') { |
| 116 this.setAttribute('aria-hidden', 'true'); |
| 117 if (this.hasAttribute('role')) { |
| 118 this.removeAttribute('role'); |
| 119 } |
| 120 if (this.hasAttribute('aria-label')) { |
| 121 this.removeAttribute('aria-label'); |
| 122 } |
| 123 } else { |
| 124 this.setAttribute('aria-label', this.alt || |
| 125 this.icon.split(':').pop()); |
| 126 if (!this.hasAttribute('role')) { |
| 127 this.setAttribute('role', 'img'); |
| 128 } |
| 129 if (this.hasAttribute('aria-hidden')) { |
| 130 this.removeAttribute('aria-hidden'); |
| 131 } |
| 132 } |
| 133 } |
| 134 |
| 135 }); |
| 136 |
| 137 })(); |
OLD | NEW |