OLD | NEW |
1 <polymer-element name="viewer-password-screen" attributes="text active"> | 1 <polymer-element name="viewer-password-screen" attributes="text active"> |
2 <template> | 2 <template> |
3 <link rel="stylesheet" href="viewer-password-screen.css"> | 3 <link rel="stylesheet" href="viewer-password-screen.css"> |
4 <div class="center"> | 4 <div class="center"> |
5 <form class="form"> | 5 <form class="form"> |
6 <div id="message">{{text}}</div> | 6 <div id="message">{{text}}</div> |
7 <input id="password" type="password" size="20"></input> | 7 <input id="password" type="password" size="20"></input> |
8 <input id="submit" type="submit" on-click={{submit}}></input> | 8 <input id="submit" type="submit" on-click={{submit}}></input> |
9 <div id="successMessage">{{successMessage}}</div> | 9 <div id="successMessage">{{successMessage}}</div> |
10 </form> | 10 </form> |
11 </div> | 11 </div> |
12 </template> | 12 </template> |
13 <script> | 13 <script src="viewer-password-screen.js"></script> |
14 Polymer('viewer-password-screen', { | |
15 text: 'This document is password protected. Please enter a password.', | |
16 active: false, | |
17 timerId: undefined, | |
18 ready: function () { | |
19 this.activeChanged(); | |
20 }, | |
21 accept: function() { | |
22 this.successMessage = '✔' // Tick. | |
23 this.$.successMessage.style.color = 'rgb(0,125,0)'; | |
24 this.active = false; | |
25 }, | |
26 deny: function() { | |
27 this.successMessage = '✘'; // Cross. | |
28 this.$.successMessage.style.color = 'rgb(255,0,0)'; | |
29 this.$.password.disabled = false; | |
30 this.$.submit.disabled = false; | |
31 this.$.password.focus(); | |
32 this.$.password.select(); | |
33 }, | |
34 submit: function(e) { | |
35 // Prevent the default form submission behavior. | |
36 e.preventDefault(); | |
37 if (this.$.password.value.length == 0) | |
38 return; | |
39 this.successMessage = '...'; | |
40 this.$.successMessage.style.color = 'rgb(0,0,0)'; | |
41 this.$.password.disabled = true; | |
42 this.$.submit.disabled = true; | |
43 this.fire('password-submitted', {password: this.$.password.value}); | |
44 }, | |
45 activeChanged: function() { | |
46 clearTimeout(this.timerId); | |
47 this.timerId = undefined; | |
48 if (this.active) { | |
49 this.style.visibility = 'visible'; | |
50 this.style.opacity = 1; | |
51 this.successMessage = ''; | |
52 this.$.password.focus(); | |
53 } else { | |
54 this.style.opacity = 0; | |
55 this.timerId = setTimeout(function() { | |
56 this.style.visibility = 'hidden' | |
57 }.bind(this), 400); | |
58 } | |
59 } | |
60 }); | |
61 </script> | |
62 </polymer-element> | 14 </polymer-element> |
OLD | NEW |