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 |