move progress bar to new module
parent
c50ec00419
commit
6ff4e9306c
File diff suppressed because one or more lines are too long
|
@ -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')))
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -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 );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
68
js/reveal.js
68
js/reveal.js
|
@ -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,
|
||||||
|
|
Loading…
Reference in New Issue