adds jump-to-slide, press G to activate

css/reveal.scss

@@ -1796,6 +1796,33 @@ $notesWidthPercent: 25%;
 }
 
 
+/*********************************************
+ * JUMP-TO-SLIDE COMPONENT
+ *********************************************/
+
+ .reveal .jump-to-slide {
+	position: absolute;
+	top: 15px;
+	left: 15px;
+	z-index: 30;
+	transition: all 400ms ease;
+	font-size: 18px;
+	-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
+}
+
+.reveal .jump-to-slide-input {
+	background: transparent;
+	padding: 8px;
+	font-size: inherit;
+	color: currentColor;
+	border: 1px solid currentColor;
+}
+
+.reveal .jump-to-slide-input:focus {
+	outline: none;
+}
+
+
 /*********************************************
  * ZOOM PLUGIN
  *********************************************/

js/config.js

@@ -65,6 +65,9 @@ export default {
 	// Flags if we should monitor the hash and change slides accordingly
 	respondToHashChanges: true,
 
+	// Enable support for jump-to-slide navigation shortcuts
+	jumpToSlide: true,
+
 	// Push each slide change to the browser history.  Implies `hash: true`
 	history: false,
 

js/controllers/jumptoslide.js

@@ -0,0 +1,126 @@
+/**
+ * Makes it possble to jump to a slide by entering its
+ * slide number or id.
+ */
+export default class JumpToSlide {
+
+	constructor( Reveal ) {
+
+		this.Reveal = Reveal;
+
+		this.onInput = this.onInput.bind( this );
+		this.onBlur = this.onBlur.bind( this );
+		this.onKeyDown = this.onKeyDown.bind( this );
+
+	}
+
+	render() {
+
+		this.element = document.createElement( 'div' );
+		this.element.className = 'jump-to-slide';
+
+    this.jumpInput = document.createElement( 'input' );
+    this.jumpInput.type = 'text';
+    this.jumpInput.className = 'jump-to-slide-input';
+    this.jumpInput.placeholder = 'Jump to slide';
+		this.jumpInput.addEventListener( 'input', this.onInput );
+		this.jumpInput.addEventListener( 'keydown', this.onKeyDown );
+		this.jumpInput.addEventListener( 'blur', this.onBlur );
+
+    this.element.appendChild( this.jumpInput );
+
+	}
+
+	show() {
+
+		this.indicesOnShow = this.Reveal.getIndices();
+
+		this.Reveal.getRevealElement().appendChild( this.element );
+		this.jumpInput.focus();
+
+	}
+
+	hide() {
+
+		if( this.isVisible() ) {
+			this.element.remove();
+			this.jumpInput.value = '';
+		}
+
+	}
+
+	isVisible() {
+
+		return !!this.element.parentNode;
+
+	}
+
+	jump() {
+
+		const value = this.jumpInput.value.trim( '' );
+		const indices = this.Reveal.location.getIndicesFromHash( value );
+
+		if( indices && value !== '' ) {
+			this.Reveal.slide( indices.h, indices.v, indices.f );
+			return true;
+		}
+		else {
+			this.Reveal.slide( this.indicesOnShow.h, this.indicesOnShow.v, this.indicesOnShow.f );
+			return false;
+		}
+
+	}
+
+	/**
+	 * Reverts back to the slide we were on when jump to slide was
+	 * invoked.
+	 */
+	cancel() {
+
+		this.Reveal.slide( this.indicesOnShow.h, this.indicesOnShow.v, this.indicesOnShow.f );
+		this.hide();
+
+	}
+
+	confirm() {
+
+		this.hide();
+
+	}
+
+	destroy() {
+
+		this.jumpInput.removeEventListener( 'input', this.onInput );
+		this.jumpInput.removeEventListener( 'keydown', this.onKeyDown );
+		this.jumpInput.removeEventListener( 'blur', this.onBlur );
+
+		this.element.remove();
+
+	}
+
+	onKeyDown( event ) {
+
+		if( event.keyCode === 13 ) {
+			this.confirm();
+		}
+		else if( event.keyCode === 27 ) {
+			this.cancel();
+
+			event.stopImmediatePropagation();
+		}
+
+	}
+
+	onInput( event ) {
+
+		this.jump();
+
+	}
+
+	onBlur() {
+
+		setTimeout( () => this.hide(), 1 );
+
+	}
+
+}

js/controllers/keyboard.js

@@ -363,6 +363,12 @@ export default class Keyboard {
 					this.Reveal.toggleAutoSlide( autoSlideWasPaused );
 				}
 			}
+			// G
+			else if( keyCode === 71 ) {
+				if ( config.jumpToSlide ) {
+					this.Reveal.toggleJumpToSlide();
+				}
+			}
 			else {
 				triggered = false;
 			}

js/reveal.js

@@ -1,5 +1,6 @@
 import SlideContent from './controllers/slidecontent.js'
 import SlideNumber from './controllers/slidenumber.js'
+import JumpToSlide from './controllers/jumptoslide.js'
 import Backgrounds from './controllers/backgrounds.js'
 import AutoAnimate from './controllers/autoanimate.js'
 import Fragments from './controllers/fragments.js'
@@ -101,6 +102,7 @@ export default function( revealElement, options ) {
 		// may be multiple presentations running in parallel.
 		slideContent = new SlideContent( Reveal ),
 		slideNumber = new SlideNumber( Reveal ),
+		jumpToSlide = new JumpToSlide( Reveal ),
 		autoAnimate = new AutoAnimate( Reveal ),
 		backgrounds = new Backgrounds( Reveal ),
 		fragments = new Fragments( Reveal ),
@@ -278,6 +280,7 @@ export default function( revealElement, options ) {
 
 		backgrounds.render();
 		slideNumber.render();
+		jumpToSlide.render();
 		controls.render();
 		progress.render();
 		notes.render();
@@ -571,6 +574,7 @@ export default function( revealElement, options ) {
 		progress.destroy();
 		backgrounds.destroy();
 		slideNumber.destroy();
+		jumpToSlide.destroy();
 
 		// Remove event listeners
 		document.removeEventListener( 'fullscreenchange', onFullscreenChange );
@@ -1190,6 +1194,20 @@ export default function( revealElement, options ) {
 
 	}
 
+	/**
+	 * Toggles visibility of the jump-to-slide UI.
+	 */
+	function toggleJumpToSlide( override ) {
+
+		if( typeof override === 'boolean' ) {
+			override ? jumpToSlide.show() : jumpToSlide.hide();
+		}
+		else {
+			jumpToSlide.isVisible() ? jumpToSlide.hide() : jumpToSlide.show();
+		}
+
+	}
+
 	/**
 	 * Toggles the auto slide mode on and off.
 	 *
@@ -2658,6 +2676,9 @@ export default function( revealElement, options ) {
 		// Toggles the auto slide mode on/off
 		toggleAutoSlide,
 
+		// Toggles visibility of the jump-to-slide UI
+		toggleJumpToSlide,
+
 		// Slide navigation checks
 		isFirstSlide,
 		isLastSlide,