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 |