OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <script src="../webcomponentsjs/webcomponents.js" debug></script> |
| 5 <meta charset="utf-8"> |
| 6 <title>Race condition</title> |
| 7 </head> |
| 8 <body> |
| 9 <link rel="import" href="core-ajax.html"> |
| 10 <link rel="import" href="../paper-progress/paper-progress.html"> |
| 11 <polymer-element name="progress-test"> |
| 12 <template> |
| 13 <core-ajax |
| 14 id="ajax" auto |
| 15 url="http://httpbin.org/drip" |
| 16 params="{{ {numbytes: numbytes, duration:5} }}" |
| 17 response="{{response}}" |
| 18 progress="{{progress}}" |
| 19 loading="{{loading}}" |
| 20 ></core-ajax> |
| 21 |
| 22 <!-- |
| 23 Ordinarily you'd gate on progress.lengthComputable, but we know the |
| 24 length in this case (and httpbin sadly doesn't return a |
| 25 Content-Length header for this requesthere). |
| 26 |
| 27 https://github.com/kennethreitz/httpbin/pull/160 |
| 28 --> |
| 29 <div> |
| 30 <button on-click="{{restart}}">Restart</button> |
| 31 <template if="{{loading}}"> |
| 32 Loading... |
| 33 </template> |
| 34 <template if="{{!loading}}"> |
| 35 Loaded! |
| 36 </template> |
| 37 </div> |
| 38 <template if="{{loading && progress.loaded}}"> |
| 39 <paper-progress |
| 40 value="{{progress.loaded}}" |
| 41 min="0" |
| 42 max="{{numbytes}}"> |
| 43 </paper-progress><br> |
| 44 </template> |
| 45 </template> |
| 46 <script> |
| 47 Polymer('progress-test', { |
| 48 loading: true, |
| 49 i: 0, |
| 50 numbytes: 1000, |
| 51 pretty: function(i) { |
| 52 return JSON.stringify(i, null, 2); |
| 53 }, |
| 54 restart: function() { |
| 55 this.$.ajax.abort(); |
| 56 this.$.ajax.go(); |
| 57 } |
| 58 }); |
| 59 </script> |
| 60 |
| 61 </polymer-element> |
| 62 |
| 63 <progress-test></progress-test> |
| 64 </body> |
| 65 </html> |
OLD | NEW |