| OLD | NEW |
| 1 <polymer-element name="viewer-button" attributes="src latchable"> | 1 <polymer-element name="viewer-button" attributes="src latchable"> |
| 2 <template> | 2 <template> |
| 3 <link rel="stylesheet" href="viewer-button.css"> | 3 <link rel="stylesheet" href="viewer-button.css"> |
| 4 <div id="icon"></div> | 4 <div id="icon"></div> |
| 5 </template> | 5 </template> |
| 6 <script> | 6 <script> |
| 7 (function() { | 7 (function() { |
| 8 var dpi = ''; | 8 var dpi = ''; |
| 9 | 9 |
| 10 Polymer('viewer-button', { | 10 Polymer('viewer-button', { |
| 11 src: '', | 11 src: '', |
| 12 latchable: false, | 12 latchable: false, |
| 13 ready: function() { | 13 ready: function() { |
| 14 if (!dpi) { | 14 if (!dpi) { |
| 15 var mql = window.matchMedia('(-webkit-min-device-pixel-ratio: 1.3'); | 15 var mql = window.matchMedia('(-webkit-min-device-pixel-ratio: 1.3'); |
| 16 dpi = mql.matches ? 'hi' : 'low'; | 16 dpi = mql.matches ? 'hi' : 'low'; |
| 17 } | 17 } |
| 18 }, | 18 }, |
| 19 srcChanged: function() { | 19 srcChanged: function() { |
| 20 if (this.src) { | 20 if (this.src) { |
| 21 this.$.icon.style.backgroundImage = | 21 this.$.icon.style.backgroundImage = |
| 22 'url(' + this.getAttribute('assetpath') + 'img/' + dpi + | 22 'url(' + this.getAttribute('assetpath') + 'img/' + dpi + |
| 23 'DPI/' + this.src + ')'; | 23 'DPI/' + this.src + ')'; |
| 24 } else { | 24 } else { |
| 25 this.$.icon.style.backgroundImage = ''; | 25 this.$.icon.style.backgroundImage = ''; |
| 26 } | 26 } |
| 27 }, | 27 }, |
| 28 latchableChanged: function() { | 28 latchableChanged: function() { |
| 29 if (this.latchable) | 29 if (this.latchable) |
| 30 this.classList.add('latchable'); | 30 this.classList.add('latchable'); |
| 31 else | 31 else |
| 32 this.classList.remove('latchable'); | 32 this.classList.remove('latchable'); |
| 33 }, | 33 }, |
| 34 }); | 34 }); |
| 35 })(); | 35 })(); |
| 36 </script> | 36 </script> |
| 37 </polymer-element> | 37 </polymer-element> |
| OLD | NEW |