move progress bar to new module

This commit is contained in:
Hakim El Hattab 2020-03-16 14:30:36 +01:00
parent c50ec00419
commit 6ff4e9306c
6 changed files with 125 additions and 63 deletions

2
dist/reveal.min.js vendored

File diff suppressed because one or more lines are too long

View File

@ -26,11 +26,17 @@ const license = `/*!
*/\n` */\n`
const swallowError = function(error) {
console.log(error.toString())
this.emit('end')
}
gulp.task('js', () => gulp.src(['./js/index.js']) gulp.task('js', () => gulp.src(['./js/index.js'])
.pipe(babel({ presets: ['@babel/preset-env'] })) .pipe(babel({ presets: ['@babel/preset-env'] }))
.pipe(webpack({ .pipe(webpack({
mode: 'production' mode: 'production'
})) }))
.on('error', swallowError)
.pipe(header(license, {pkg: pkg})) .pipe(header(license, {pkg: pkg}))
.pipe(rename('reveal.min.js')) .pipe(rename('reveal.min.js'))
.pipe(gulp.dest('./dist'))) .pipe(gulp.dest('./dist')))

View File

@ -1,8 +1,17 @@
import { toArray } from '../utils/util.js' import { toArray } from '../utils/util.js'
import { isMobile, isAndroid } from '../utils/device.js' import { isAndroid } from '../utils/device.js'
/** /**
* * Manages our presentation controls. This includes both
* the built-in control arrows as well as event monitoring
* of any elements within the presentation with either of the
* following helper classes:
* - .navigate-up
* - .navigate-right
* - .navigate-down
* - .navigate-left
* - .navigate-next
* - .navigate-prev
*/ */
export default class Controls { export default class Controls {

View File

@ -332,8 +332,7 @@ export default class Fragments {
} }
this.Reveal.controls.update(); this.Reveal.controls.update();
this.Reveal.progress.update();
this.Reveal.updateProgress();
if( this.Reveal.getConfig().fragmentInURL ) { if( this.Reveal.getConfig().fragmentInURL ) {
this.Reveal.location.writeURL(); this.Reveal.location.writeURL();

View File

@ -0,0 +1,96 @@
/**
* 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 ) {
this.bar.style.width = this.Reveal.getProgress() * this.getMaxWidth() + 'px';
}
}
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 slidesTotal = this.Reveal.getHorizontalSlides().length;
let slideIndex = Math.floor( ( event.clientX / this.getMaxWidth() ) * slidesTotal );
if( this.Reveal.getConfig().rtl ) {
slideIndex = slidesTotal - slideIndex;
}
this.Reveal.slide( slideIndex );
}
}

View File

@ -7,6 +7,7 @@ import Overview from './controllers/overview.js'
import Keyboard from './controllers/keyboard.js' import Keyboard from './controllers/keyboard.js'
import Location from './controllers/location.js' import Location from './controllers/location.js'
import Controls from './controllers/controls.js' import Controls from './controllers/controls.js'
import Progress from './controllers/progress.js'
import Plugins from './controllers/plugins.js' import Plugins from './controllers/plugins.js'
import Print from './controllers/print.js' import Print from './controllers/print.js'
import Touch from './controllers/touch.js' import Touch from './controllers/touch.js'
@ -84,6 +85,7 @@ export default function( revealElement, options ) {
keyboard = new Keyboard( Reveal ), keyboard = new Keyboard( Reveal ),
location = new Location( Reveal ), location = new Location( Reveal ),
controls = new Controls( Reveal ), controls = new Controls( Reveal ),
progress = new Progress( Reveal ),
plugins = new Plugins( Reveal ), plugins = new Plugins( Reveal ),
print = new Print( Reveal ), print = new Print( Reveal ),
touch = new Touch( Reveal ), touch = new Touch( Reveal ),
@ -227,14 +229,10 @@ export default function( revealElement, options ) {
dom.wrapper.classList.remove( 'no-hover' ); dom.wrapper.classList.remove( 'no-hover' );
} }
// Progress bar
dom.progress = createSingletonNode( dom.wrapper, 'div', 'progress', '<span></span>' );
dom.progressbar = dom.progress.querySelector( 'span' );
backgrounds.render(); backgrounds.render();
slideNumber.render(); slideNumber.render();
controls.render(); controls.render();
progress.render();
notes.render(); notes.render();
// Overlay graphic which is displayed during the paused mode // Overlay graphic which is displayed during the paused mode
@ -404,8 +402,6 @@ export default function( revealElement, options ) {
dom.wrapper.setAttribute( 'data-transition-speed', config.transitionSpeed ); dom.wrapper.setAttribute( 'data-transition-speed', config.transitionSpeed );
dom.wrapper.setAttribute( 'data-background-transition', config.backgroundTransition ); dom.wrapper.setAttribute( 'data-background-transition', config.backgroundTransition );
dom.progress.style.display = config.progress ? 'block' : 'none';
if( config.shuffle ) { if( config.shuffle ) {
shuffle(); shuffle();
} }
@ -489,6 +485,7 @@ export default function( revealElement, options ) {
notes.configure( config, oldConfig ); notes.configure( config, oldConfig );
controls.configure( config, oldConfig ); controls.configure( config, oldConfig );
progress.configure( config, oldConfig );
keyboard.configure( config, oldConfig ); keyboard.configure( config, oldConfig );
fragments.configure( config, oldConfig ); fragments.configure( config, oldConfig );
slideNumber.configure( config, oldConfig ); slideNumber.configure( config, oldConfig );
@ -510,10 +507,7 @@ export default function( revealElement, options ) {
if( config.touch ) touch.bind(); if( config.touch ) touch.bind();
if( config.keyboard ) keyboard.bind(); if( config.keyboard ) keyboard.bind();
controls.bind(); controls.bind();
progress.bind();
if( config.progress && dom.progress ) {
dom.progress.addEventListener( 'click', onProgressClicked, false );
}
dom.pauseOverlay.addEventListener( 'click', resume, false ); dom.pauseOverlay.addEventListener( 'click', resume, false );
@ -533,16 +527,13 @@ export default function( revealElement, options ) {
touch.unbind(); touch.unbind();
keyboard.unbind(); keyboard.unbind();
controls.unbind(); controls.unbind();
progress.unbind();
window.removeEventListener( 'hashchange', onWindowHashChange, false ); window.removeEventListener( 'hashchange', onWindowHashChange, false );
window.removeEventListener( 'resize', onWindowResize, false ); window.removeEventListener( 'resize', onWindowResize, false );
dom.pauseOverlay.removeEventListener( 'click', resume, false ); dom.pauseOverlay.removeEventListener( 'click', resume, false );
if ( config.progress && dom.progress ) {
dom.progress.removeEventListener( 'click', onProgressClicked, false );
}
} }
/** /**
@ -911,7 +902,7 @@ export default function( revealElement, options ) {
} }
} }
updateProgress(); progress.update();
backgrounds.updateParallax(); backgrounds.updateParallax();
if( overview.isActive() ) { if( overview.isActive() ) {
@ -1349,8 +1340,8 @@ export default function( revealElement, options ) {
// Announce the current slide contents to screen readers // Announce the current slide contents to screen readers
announceStatus( getStatusText( currentSlide ) ); announceStatus( getStatusText( currentSlide ) );
updateProgress();
progress.update();
controls.update(); controls.update();
notes.update(); notes.update();
backgrounds.update(); backgrounds.update();
@ -1414,8 +1405,8 @@ export default function( revealElement, options ) {
fragments.sortAll(); fragments.sortAll();
controls.update(); controls.update();
progress.update();
updateProgress();
updateSlidesVisibility(); updateSlidesVisibility();
notes.update(); notes.update();
@ -1709,20 +1700,6 @@ export default function( revealElement, options ) {
} }
/**
* Updates the progress bar to reflect the current slide.
*/
function updateProgress() {
// Update progress if enabled
if( config.progress && dom.progressbar ) {
dom.progressbar.style.width = getProgress() * dom.wrapper.offsetWidth + 'px';
}
}
/** /**
* Determine what available routes there are for navigation. * Determine what available routes there are for navigation.
* *
@ -2375,31 +2352,6 @@ export default function( revealElement, options ) {
} }
/**
* Clicking on the progress bar results in a navigation to the
* closest approximate horizontal slide using this equation:
*
* ( clickX / presentationWidth ) * numberOfSlides
*
* @param {object} event
*/
function onProgressClicked( event ) {
onUserInput( event );
event.preventDefault();
let slidesTotal = getHorizontalSlides().length;
let slideIndex = Math.floor( ( event.clientX / dom.wrapper.offsetWidth ) * slidesTotal );
if( config.rtl ) {
slideIndex = slidesTotal - slideIndex;
}
slide( slideIndex );
}
/** /**
* Handler for the window level 'hashchange' event. * Handler for the window level 'hashchange' event.
* *
@ -2668,6 +2620,7 @@ export default function( revealElement, options ) {
getStatusText, getStatusText,
print, print,
progress,
controls, controls,
location, location,
overview, overview,
@ -2677,7 +2630,6 @@ export default function( revealElement, options ) {
onUserInput, onUserInput,
closeOverlay, closeOverlay,
updateProgress,
updateSlidesVisibility, updateSlidesVisibility,
layoutSlideContents, layoutSlideContents,
transformSlides, transformSlides,