123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105 |
- /**
- * Creates a visual progress bar for the presentation.
- */
- export default class Progress {
- constructor( Reveal ) {
- this.Reveal = Reveal;
- this.onProgressClicked = this.onProgressClicked.bind( this );
- }
- render() {
- this.element = document.createElement( 'div' );
- this.element.className = 'progress';
- this.Reveal.getRevealElement().appendChild( this.element );
- this.bar = document.createElement( 'span' );
- this.element.appendChild( this.bar );
- }
- /**
- * Called when the reveal.js config is updated.
- */
- configure( config, oldConfig ) {
- this.element.style.display = config.progress ? 'block' : 'none';
- }
- bind() {
- if( this.Reveal.getConfig().progress && this.element ) {
- this.element.addEventListener( 'click', this.onProgressClicked, false );
- }
- }
- unbind() {
- if ( this.Reveal.getConfig().progress && this.element ) {
- this.element.removeEventListener( 'click', this.onProgressClicked, false );
- }
- }
- /**
- * Updates the progress bar to reflect the current slide.
- */
- update() {
- // Update progress if enabled
- if( this.Reveal.getConfig().progress && this.bar ) {
- let scale = this.Reveal.getProgress();
- // Don't fill the progress bar if there's only one slide
- if( this.Reveal.getTotalSlides() < 2 ) {
- scale = 0;
- }
- this.bar.style.transform = 'scaleX('+ scale +')';
- }
- }
- getMaxWidth() {
- return this.Reveal.getRevealElement().offsetWidth;
- }
- /**
- * Clicking on the progress bar results in a navigation to the
- * closest approximate horizontal slide using this equation:
- *
- * ( clickX / presentationWidth ) * numberOfSlides
- *
- * @param {object} event
- */
- onProgressClicked( event ) {
- this.Reveal.onUserInput( event );
- event.preventDefault();
- let slides = this.Reveal.getSlides();
- let slidesTotal = slides.length;
- let slideIndex = Math.floor( ( event.clientX / this.getMaxWidth() ) * slidesTotal );
- if( this.Reveal.getConfig().rtl ) {
- slideIndex = slidesTotal - slideIndex;
- }
- let targetIndices = this.Reveal.getIndices(slides[slideIndex]);
- this.Reveal.slide( targetIndices.h, targetIndices.v );
- }
- }
|