| 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 |