OLD | NEW |
1 // Copyright (c) 2012 The Polymer Authors. All rights reserved. | 1 // Copyright (c) 2012 The Polymer Authors. All rights reserved. |
2 // | 2 // |
3 // Redistribution and use in source and binary forms, with or without | 3 // Redistribution and use in source and binary forms, with or without |
4 // modification, are permitted provided that the following conditions are | 4 // modification, are permitted provided that the following conditions are |
5 // met: | 5 // met: |
6 // | 6 // |
7 // * Redistributions of source code must retain the above copyright | 7 // * Redistributions of source code must retain the above copyright |
8 // notice, this list of conditions and the following disclaimer. | 8 // notice, this list of conditions and the following disclaimer. |
9 // * Redistributions in binary form must reproduce the above | 9 // * Redistributions in binary form must reproduce the above |
10 // copyright notice, this list of conditions and the following disclaimer | 10 // copyright notice, this list of conditions and the following disclaimer |
(...skipping 371 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
382 return i; | 382 return i; |
383 } | 383 } |
384 target = target.parentNode; | 384 target = target.parentNode; |
385 } | 385 } |
386 } | 386 } |
387 }); | 387 }); |
388 ; | 388 ; |
389 | 389 |
390 Polymer('viewer-toolbar', { | 390 Polymer('viewer-toolbar', { |
391 fadingIn: false, | 391 fadingIn: false, |
392 timerId: undefined, | 392 timerId_: undefined, |
| 393 inInitialFadeIn_: false, |
393 ready: function() { | 394 ready: function() { |
394 this.fadingInChanged(); | 395 this.parentNode.addEventListener('mousemove', function(e) { |
| 396 var rect = this.getBoundingClientRect(); |
| 397 if (e.clientX >= rect.left && e.clientX <= rect.right && |
| 398 e.clientY >= rect.top && e.clientY <= rect.bottom) { |
| 399 this.fadingIn = true; |
| 400 // If we hover over the toolbar, cancel the initial fade in. |
| 401 if (this.inInitialFadeIn_) |
| 402 this.inInitialFadeIn_ = false; |
| 403 } else { |
| 404 // Initially we want to keep the toolbar up for a longer period. |
| 405 if (!this.inInitialFadeIn_) |
| 406 this.fadingIn = false; |
| 407 } |
| 408 }.bind(this)); |
395 }, | 409 }, |
396 fadeIn: function() { | 410 initialFadeIn: function() { |
397 this.fadingIn = true; | 411 this.inInitialFadeIn_ = true; |
398 }, | 412 this.fadeIn(); |
399 fadeOut: function() { | 413 this.fadeOutAfterDelay(6000); |
400 this.fadingIn = false; | |
401 }, | 414 }, |
402 fadingInChanged: function() { | 415 fadingInChanged: function() { |
403 if (this.fadingIn) { | 416 if (this.fadingIn) { |
404 this.style.opacity = 1; | 417 this.fadeIn(); |
405 if (this.timerId !== undefined) { | |
406 clearTimeout(this.timerId); | |
407 this.timerId = undefined; | |
408 } | |
409 } else { | 418 } else { |
410 if (this.timerId === undefined) { | 419 if (this.timerId_ === undefined) |
411 this.timerId = setTimeout( | 420 this.fadeOutAfterDelay(3000); |
412 function() { | |
413 this.style.opacity = 0; | |
414 this.timerId = undefined; | |
415 }.bind(this), 3000); | |
416 } | |
417 } | 421 } |
| 422 }, |
| 423 fadeIn: function() { |
| 424 this.style.opacity = 1; |
| 425 clearTimeout(this.timerId_); |
| 426 this.timerId_ = undefined; |
| 427 }, |
| 428 fadeOutAfterDelay: function(delay) { |
| 429 this.timerId_ = setTimeout( |
| 430 function() { |
| 431 this.style.opacity = 0; |
| 432 this.timerId_ = undefined; |
| 433 this.inInitialFadeIn_ = false; |
| 434 }.bind(this), delay); |
418 } | 435 } |
419 }); | 436 }); |
420 ; | 437 ; |
421 | 438 |
422 (function() { | 439 (function() { |
423 var dpi = ''; | 440 var dpi = ''; |
424 | 441 |
425 Polymer('viewer-button', { | 442 Polymer('viewer-button', { |
426 src: '', | 443 src: '', |
427 latchable: false, | 444 latchable: false, |
(...skipping 19 matching lines...) Expand all Loading... |
447 this.classList.remove('latchable'); | 464 this.classList.remove('latchable'); |
448 }, | 465 }, |
449 }); | 466 }); |
450 })(); | 467 })(); |
451 ; | 468 ; |
452 | 469 |
453 Polymer('viewer-page-indicator', { | 470 Polymer('viewer-page-indicator', { |
454 text: '1', | 471 text: '1', |
455 timerId: undefined, | 472 timerId: undefined, |
456 ready: function() { | 473 ready: function() { |
457 var scrollCallback = function() { | 474 var callback = this.fadeIn.bind(this, 2000); |
458 var percent = window.scrollY / | 475 window.addEventListener('scroll', function() { |
459 (document.body.scrollHeight - | 476 requestAnimationFrame(callback); |
460 document.documentElement.clientHeight); | 477 }); |
461 this.style.top = percent * | 478 }, |
462 (document.documentElement.clientHeight - this.offsetHeight) + 'px'; | 479 initialFadeIn: function() { |
463 this.style.opacity = 1; | 480 this.fadeIn(6000); |
464 clearTimeout(this.timerId); | 481 }, |
| 482 fadeIn: function(displayTime) { |
| 483 var percent = window.scrollY / |
| 484 (document.body.scrollHeight - |
| 485 document.documentElement.clientHeight); |
| 486 this.style.top = percent * |
| 487 (document.documentElement.clientHeight - this.offsetHeight) + 'px'; |
| 488 this.style.opacity = 1; |
| 489 clearTimeout(this.timerId); |
465 | 490 |
466 this.timerId = setTimeout(function() { | 491 this.timerId = setTimeout(function() { |
467 this.style.opacity = 0; | 492 this.style.opacity = 0; |
468 this.timerId = undefined; | 493 this.timerId = undefined; |
469 }.bind(this), 2000); | 494 }.bind(this), displayTime); |
470 }.bind(this); | 495 } |
471 window.addEventListener('scroll', function() { | |
472 requestAnimationFrame(scrollCallback); | |
473 }); | |
474 | |
475 scrollCallback(); | |
476 }, | |
477 }); | 496 }); |
478 ; | 497 ; |
479 | 498 |
480 Polymer('viewer-progress-bar', { | 499 Polymer('viewer-progress-bar', { |
481 progress: 0, | 500 progress: 0, |
482 text: 'Loading', | 501 text: 'Loading', |
483 numSegments: 8, | 502 numSegments: 8, |
484 segments: [], | 503 segments: [], |
485 ready: function() { | 504 ready: function() { |
486 this.numSegmentsChanged(); | 505 this.numSegmentsChanged(); |
(...skipping 25 matching lines...) Expand all Loading... |
512 -1 * (90 - angle) + 'deg)'; | 531 -1 * (90 - angle) + 'deg)'; |
513 segmentsElement.appendChild(segmentCopy); | 532 segmentsElement.appendChild(segmentCopy); |
514 this.segments.push(segmentCopy); | 533 this.segments.push(segmentCopy); |
515 } | 534 } |
516 this.progressChanged(); | 535 this.progressChanged(); |
517 } | 536 } |
518 }); | 537 }); |
519 ; | 538 ; |
520 | 539 |
521 Polymer('viewer-error-screen', {}); | 540 Polymer('viewer-error-screen', {}); |
OLD | NEW |