move progress bar to new module

gulpfile.js

@@ -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')))

js/controllers/controls.js

@@ -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 {
 

js/controllers/fragments.js

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

js/controllers/progress.js

@@ -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 );
+
+	}
+
+
+}

js/reveal.js

@@ -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();
-
+		progress.bind();
-		if( config.progress && dom.progress ) {
-			dom.progress.addEventListener( 'click', onProgressClicked, false );
-		}
 
 		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,