progress.js 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. /**
  2. * Creates a visual progress bar for the presentation.
  3. */
  4. export default class Progress {
  5. constructor( Reveal ) {
  6. this.Reveal = Reveal;
  7. this.onProgressClicked = this.onProgressClicked.bind( this );
  8. }
  9. render() {
  10. this.element = document.createElement( 'div' );
  11. this.element.className = 'progress';
  12. this.Reveal.getRevealElement().appendChild( this.element );
  13. this.bar = document.createElement( 'span' );
  14. this.element.appendChild( this.bar );
  15. }
  16. /**
  17. * Called when the reveal.js config is updated.
  18. */
  19. configure( config, oldConfig ) {
  20. this.element.style.display = config.progress ? 'block' : 'none';
  21. }
  22. bind() {
  23. if( this.Reveal.getConfig().progress && this.element ) {
  24. this.element.addEventListener( 'click', this.onProgressClicked, false );
  25. }
  26. }
  27. unbind() {
  28. if ( this.Reveal.getConfig().progress && this.element ) {
  29. this.element.removeEventListener( 'click', this.onProgressClicked, false );
  30. }
  31. }
  32. /**
  33. * Updates the progress bar to reflect the current slide.
  34. */
  35. update() {
  36. // Update progress if enabled
  37. if( this.Reveal.getConfig().progress && this.bar ) {
  38. let scale = this.Reveal.getProgress();
  39. // Don't fill the progress bar if there's only one slide
  40. if( this.Reveal.getTotalSlides() < 2 ) {
  41. scale = 0;
  42. }
  43. this.bar.style.transform = 'scaleX('+ scale +')';
  44. }
  45. }
  46. getMaxWidth() {
  47. return this.Reveal.getRevealElement().offsetWidth;
  48. }
  49. /**
  50. * Clicking on the progress bar results in a navigation to the
  51. * closest approximate horizontal slide using this equation:
  52. *
  53. * ( clickX / presentationWidth ) * numberOfSlides
  54. *
  55. * @param {object} event
  56. */
  57. onProgressClicked( event ) {
  58. this.Reveal.onUserInput( event );
  59. event.preventDefault();
  60. let slides = this.Reveal.getSlides();
  61. let slidesTotal = slides.length;
  62. let slideIndex = Math.floor( ( event.clientX / this.getMaxWidth() ) * slidesTotal );
  63. if( this.Reveal.getConfig().rtl ) {
  64. slideIndex = slidesTotal - slideIndex;
  65. }
  66. let targetIndices = this.Reveal.getIndices(slides[slideIndex]);
  67. this.Reveal.slide( targetIndices.h, targetIndices.v );
  68. }
  69. }