Christophe Dervieux | e1893ae | 2021-10-07 17:09:02 +0200 | [diff] [blame^] | 1 | /** |
| 2 | * Creates a visual progress bar for the presentation. |
| 3 | */ |
| 4 | export default class Progress { |
| 5 | |
| 6 | constructor( Reveal ) { |
| 7 | |
| 8 | this.Reveal = Reveal; |
| 9 | |
| 10 | this.onProgressClicked = this.onProgressClicked.bind( this ); |
| 11 | |
| 12 | } |
| 13 | |
| 14 | render() { |
| 15 | |
| 16 | this.element = document.createElement( 'div' ); |
| 17 | this.element.className = 'progress'; |
| 18 | this.Reveal.getRevealElement().appendChild( this.element ); |
| 19 | |
| 20 | this.bar = document.createElement( 'span' ); |
| 21 | this.element.appendChild( this.bar ); |
| 22 | |
| 23 | } |
| 24 | |
| 25 | /** |
| 26 | * Called when the reveal.js config is updated. |
| 27 | */ |
| 28 | configure( config, oldConfig ) { |
| 29 | |
| 30 | this.element.style.display = config.progress ? 'block' : 'none'; |
| 31 | |
| 32 | } |
| 33 | |
| 34 | bind() { |
| 35 | |
| 36 | if( this.Reveal.getConfig().progress && this.element ) { |
| 37 | this.element.addEventListener( 'click', this.onProgressClicked, false ); |
| 38 | } |
| 39 | |
| 40 | } |
| 41 | |
| 42 | unbind() { |
| 43 | |
| 44 | if ( this.Reveal.getConfig().progress && this.element ) { |
| 45 | this.element.removeEventListener( 'click', this.onProgressClicked, false ); |
| 46 | } |
| 47 | |
| 48 | } |
| 49 | |
| 50 | /** |
| 51 | * Updates the progress bar to reflect the current slide. |
| 52 | */ |
| 53 | update() { |
| 54 | |
| 55 | // Update progress if enabled |
| 56 | if( this.Reveal.getConfig().progress && this.bar ) { |
| 57 | |
| 58 | let scale = this.Reveal.getProgress(); |
| 59 | |
| 60 | // Don't fill the progress bar if there's only one slide |
| 61 | if( this.Reveal.getTotalSlides() < 2 ) { |
| 62 | scale = 0; |
| 63 | } |
| 64 | |
| 65 | this.bar.style.transform = 'scaleX('+ scale +')'; |
| 66 | |
| 67 | } |
| 68 | |
| 69 | } |
| 70 | |
| 71 | getMaxWidth() { |
| 72 | |
| 73 | return this.Reveal.getRevealElement().offsetWidth; |
| 74 | |
| 75 | } |
| 76 | |
| 77 | /** |
| 78 | * Clicking on the progress bar results in a navigation to the |
| 79 | * closest approximate horizontal slide using this equation: |
| 80 | * |
| 81 | * ( clickX / presentationWidth ) * numberOfSlides |
| 82 | * |
| 83 | * @param {object} event |
| 84 | */ |
| 85 | onProgressClicked( event ) { |
| 86 | |
| 87 | this.Reveal.onUserInput( event ); |
| 88 | |
| 89 | event.preventDefault(); |
| 90 | |
| 91 | let slides = this.Reveal.getSlides(); |
| 92 | let slidesTotal = slides.length; |
| 93 | let slideIndex = Math.floor( ( event.clientX / this.getMaxWidth() ) * slidesTotal ); |
| 94 | |
| 95 | if( this.Reveal.getConfig().rtl ) { |
| 96 | slideIndex = slidesTotal - slideIndex; |
| 97 | } |
| 98 | |
| 99 | let targetIndices = this.Reveal.getIndices(slides[slideIndex]); |
| 100 | this.Reveal.slide( targetIndices.h, targetIndices.v ); |
| 101 | |
| 102 | } |
| 103 | |
| 104 | |
| 105 | } |