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