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`
const swallowError = function(error) {
console.log(error.toString())
this.emit('end')
}
gulp.task('js', () => gulp.src(['./js/index.js'])
.pipe(babel({ presets: ['@babel/preset-env'] }))
.pipe(webpack({
mode: 'production'
}))
.on('error', swallowError)
.pipe(header(license, {pkg: pkg}))
.pipe(rename('reveal.min.js'))
.pipe(gulp.dest('./dist')))

View File

@ -1,8 +1,17 @@
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 {

View File

@ -332,8 +332,7 @@ export default class Fragments {
}
this.Reveal.controls.update();
this.Reveal.updateProgress();
this.Reveal.progress.update();
if( this.Reveal.getConfig().fragmentInURL ) {
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 Location from './controllers/location.js'
import Controls from './controllers/controls.js'
import Progress from './controllers/progress.js'
import Plugins from './controllers/plugins.js'
import Print from './controllers/print.js'
import Touch from './controllers/touch.js'
@ -84,6 +85,7 @@ export default function( revealElement, options ) {
keyboard = new Keyboard( Reveal ),
location = new Location( Reveal ),
controls = new Controls( Reveal ),
progress = new Progress( Reveal ),
plugins = new Plugins( Reveal ),
print = new Print( Reveal ),
touch = new Touch( Reveal ),
@ -227,14 +229,10 @@ export default function( revealElement, options ) {
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();
slideNumber.render();
controls.render();
progress.render();
notes.render();
// 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-background-transition', config.backgroundTransition );
dom.progress.style.display = config.progress ? 'block' : 'none';
if( config.shuffle ) {
shuffle();
}
@ -489,6 +485,7 @@ export default function( revealElement, options ) {
notes.configure( config, oldConfig );
controls.configure( config, oldConfig );
progress.configure( config, oldConfig );
keyboard.configure( config, oldConfig );
fragments.configure( config, oldConfig );
slideNumber.configure( config, oldConfig );
@ -510,10 +507,7 @@ export default function( revealElement, options ) {
if( config.touch ) touch.bind();
if( config.keyboard ) keyboard.bind();
controls.bind();
if( config.progress && dom.progress ) {
dom.progress.addEventListener( 'click', onProgressClicked, false );
}
progress.bind();
dom.pauseOverlay.addEventListener( 'click', resume, false );
@ -533,16 +527,13 @@ export default function( revealElement, options ) {
touch.unbind();
keyboard.unbind();
controls.unbind();
progress.unbind();
window.removeEventListener( 'hashchange', onWindowHashChange, false );
window.removeEventListener( 'resize', onWindowResize, 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();
if( overview.isActive() ) {
@ -1349,8 +1340,8 @@ export default function( revealElement, options ) {
// Announce the current slide contents to screen readers
announceStatus( getStatusText( currentSlide ) );
updateProgress();
progress.update();
controls.update();
notes.update();
backgrounds.update();
@ -1414,8 +1405,8 @@ export default function( revealElement, options ) {
fragments.sortAll();
controls.update();
progress.update();
updateProgress();
updateSlidesVisibility();
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.
*
@ -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.
*
@ -2668,6 +2620,7 @@ export default function( revealElement, options ) {
getStatusText,
print,
progress,
controls,
location,
overview,
@ -2677,7 +2630,6 @@ export default function( revealElement, options ) {
onUserInput,
closeOverlay,
updateProgress,
updateSlidesVisibility,
layoutSlideContents,
transformSlides,