d2dff6a821
The progress bar shows how many slides have been passed in total. However, when clicking on the progress bar, the target slide is computed among the subset of /horizontal/ slides. Thus, when the new slide is displayed, the progress bar has usually changed to a point that is unrelated to the clicked one, which I find surprising. With this change, the target slide is computed from the number of total slides. Thus, after a click on the progress bar, the resulting progress is close to the clicked point, which seems more natural to me.
105 lines
No EOL
2.1 KiB
JavaScript
105 lines
No EOL
2.1 KiB
JavaScript
/**
|
|
* 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 );
|
|
|
|
}
|
|
|
|
|
|
} |