add slidenumber & location controllers

dist/reveal.min.js

@@ -5,4 +5,4 @@
 *
 * Copyright (C) 2020 Hakim El Hattab, https://hakim.se
 */
-!function(e){var t={};function a(i){if(t[i])return t[i].exports;var n=t[i]={i:i,l:!1,exports:{}};return e[i].call(n.exports,n,n.exports,a),n.l=!0,n.exports}a.m=e,a.c=t,a.d=function(e,t,i){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(a.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)a.d(i,n,function(t){return e[t]}.bind(null,n));return i},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="",a(a.s=0)}([function(e,t,a){"use strict";a.r(t);const i=/registerPlugin|registerKeyboardShortcut|addKeyBinding|addEventListener/,n=(e,t)=>{for(let a in t)e[a]=t[a];return e},r=e=>Array.prototype.slice.call(e),s=e=>{if("string"==typeof e){if("null"===e)return null;if("true"===e)return!0;if("false"===e)return!1;if(e.match(/^-?[\d\.]+$/))return parseFloat(e)}return e},o=(e,t)=>{e.style.transform=t},l=(e,t)=>{let a=e.parentNode;for(;a;){let e=a.matches||a.matchesSelector||a.msMatchesSelector;if(e&&e.call(a,t))return a;a=a.parentNode}return null},d=e=>{let t=document.createElement("style");return t.type="text/css",e&&e.length>0&&(t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e))),document.head.appendChild(t),t},c=()=>{let e={};location.search.replace(/[A-Z0-9]+?=([\w\.%-]*)/gi,t=>{e[t.split("=").shift()]=t.split("=").pop()});for(let t in e){let a=e[t];e[t]=s(unescape(a))}return void 0!==e.dependencies&&delete e.dependencies,e},u=navigator.userAgent,h=document.createElement("div"),p=/(iphone|ipod|ipad|android)/gi.test(u)||"MacIntel"===navigator.platform&&navigator.maxTouchPoints>1,g=/chrome/i.test(u)&&!/edge/i.test(u),f=/android/gi.test(u),v="zoom"in h.style&&!p&&(g||/Version\/[\d\.]+.*Safari/.test(u));class m{constructor(e){this.Reveal=e}shouldPreload(e){let t=this.Reveal.getConfig().preloadIframes;return"boolean"!=typeof t&&(t=e.hasAttribute("data-preload")),t}load(e,t={}){e.style.display=this.Reveal.getConfig().display,r(e.querySelectorAll("img[data-src], video[data-src], audio[data-src], iframe[data-src]")).forEach(e=>{("IFRAME"!==e.tagName||this.shouldPreload(e))&&(e.setAttribute("src",e.getAttribute("data-src")),e.setAttribute("data-lazy-loaded",""),e.removeAttribute("data-src"))}),r(e.querySelectorAll("video, audio")).forEach(e=>{let t=0;r(e.querySelectorAll("source[data-src]")).forEach(e=>{e.setAttribute("src",e.getAttribute("data-src")),e.removeAttribute("data-src"),e.setAttribute("data-lazy-loaded",""),t+=1}),t>0&&e.load()});let a=e.slideBackgroundElement;if(a){a.style.display="block";let i=e.slideBackgroundContentElement,n=e.getAttribute("data-background-iframe");if(!1===a.hasAttribute("data-loaded")){a.setAttribute("data-loaded","true");let r=e.getAttribute("data-background-image"),s=e.getAttribute("data-background-video"),o=e.hasAttribute("data-background-video-loop"),l=e.hasAttribute("data-background-video-muted");if(r)i.style.backgroundImage="url("+encodeURI(r)+")";else if(s&&!this.Reveal.isSpeakerNotes()){let e=document.createElement("video");o&&e.setAttribute("loop",""),l&&(e.muted=!0),p&&(e.muted=!0,e.autoplay=!0,e.setAttribute("playsinline","")),s.split(",").forEach(t=>{e.innerHTML+='<source src="'+t+'">'}),i.appendChild(e)}else if(n&&!0!==t.excludeIframes){let e=document.createElement("iframe");e.setAttribute("allowfullscreen",""),e.setAttribute("mozallowfullscreen",""),e.setAttribute("webkitallowfullscreen",""),e.setAttribute("allow","autoplay"),e.setAttribute("data-src",n),e.style.width="100%",e.style.height="100%",e.style.maxHeight="100%",e.style.maxWidth="100%",i.appendChild(e)}}let r=i.querySelector("iframe[data-src]");r&&this.shouldPreload(a)&&!/autoplay=(1|true|yes)/gi.test(n)&&r.getAttribute("src")!==n&&r.setAttribute("src",n)}}unload(e){e.style.display="none";let t=this.Reveal.getSlideBackground(e);t&&(t.style.display="none",r(t.querySelectorAll("iframe[src]")).forEach(e=>{e.removeAttribute("src")})),r(e.querySelectorAll("video[data-lazy-loaded][src], audio[data-lazy-loaded][src], iframe[data-lazy-loaded][src]")).forEach(e=>{e.setAttribute("data-src",e.getAttribute("src")),e.removeAttribute("src")}),r(e.querySelectorAll("video[data-lazy-loaded] source[src], audio source[src]")).forEach(e=>{e.setAttribute("data-src",e.getAttribute("src")),e.removeAttribute("src")})}formatEmbeddedContent(){let e=(e,t,a)=>{r(this.Reveal.getSlidesElement().querySelectorAll("iframe["+e+'*="'+t+'"]')).forEach(t=>{let i=t.getAttribute(e);i&&-1===i.indexOf(a)&&t.setAttribute(e,i+(/\?/.test(i)?"&":"?")+a)})};e("src","youtube.com/embed/","enablejsapi=1"),e("data-src","youtube.com/embed/","enablejsapiLine truncated
+!function(e){var t={};function a(i){if(t[i])return t[i].exports;var n=t[i]={i:i,l:!1,exports:{}};return e[i].call(n.exports,n,n.exports,a),n.l=!0,n.exports}a.m=e,a.c=t,a.d=function(e,t,i){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(a.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)a.d(i,n,function(t){return e[t]}.bind(null,n));return i},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="",a(a.s=0)}([function(e,t,a){"use strict";a.r(t);const i=/registerPlugin|registerKeyboardShortcut|addKeyBinding|addEventListener/,n=(e,t)=>{for(let a in t)e[a]=t[a];return e},r=e=>Array.prototype.slice.call(e),s=e=>{if("string"==typeof e){if("null"===e)return null;if("true"===e)return!0;if("false"===e)return!1;if(e.match(/^-?[\d\.]+$/))return parseFloat(e)}return e},o=(e,t)=>{e.style.transform=t},l=(e,t)=>{let a=e.parentNode;for(;a;){let e=a.matches||a.matchesSelector||a.msMatchesSelector;if(e&&e.call(a,t))return a;a=a.parentNode}return null},d=(e,t,a,i="")=>{let n=e.querySelectorAll("."+a);for(let t=0;t<n.length;t++){let a=n[t];if(a.parentNode===e)return a}let r=document.createElement(t);return r.className=a,r.innerHTML=i,e.appendChild(r),r},c=e=>{let t=document.createElement("style");return t.type="text/css",e&&e.length>0&&(t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e))),document.head.appendChild(t),t},u=()=>{let e={};location.search.replace(/[A-Z0-9]+?=([\w\.%-]*)/gi,t=>{e[t.split("=").shift()]=t.split("=").pop()});for(let t in e){let a=e[t];e[t]=s(unescape(a))}return void 0!==e.dependencies&&delete e.dependencies,e},h=navigator.userAgent,g=document.createElement("div"),p=/(iphone|ipod|ipad|android)/gi.test(h)||"MacIntel"===navigator.platform&&navigator.maxTouchPoints>1,f=/chrome/i.test(h)&&!/edge/i.test(h),v=/android/gi.test(h),m="zoom"in g.style&&!p&&(f||/Version\/[\d\.]+.*Safari/.test(h));class b{constructor(e){this.Reveal=e}shouldPreload(e){let t=this.Reveal.getConfig().preloadIframes;return"boolean"!=typeof t&&(t=e.hasAttribute("data-preload")),t}load(e,t={}){e.style.display=this.Reveal.getConfig().display,r(e.querySelectorAll("img[data-src], video[data-src], audio[data-src], iframe[data-src]")).forEach(e=>{("IFRAME"!==e.tagName||this.shouldPreload(e))&&(e.setAttribute("src",e.getAttribute("data-src")),e.setAttribute("data-lazy-loaded",""),e.removeAttribute("data-src"))}),r(e.querySelectorAll("video, audio")).forEach(e=>{let t=0;r(e.querySelectorAll("source[data-src]")).forEach(e=>{e.setAttribute("src",e.getAttribute("data-src")),e.removeAttribute("data-src"),e.setAttribute("data-lazy-loaded",""),t+=1}),t>0&&e.load()});let a=e.slideBackgroundElement;if(a){a.style.display="block";let i=e.slideBackgroundContentElement,n=e.getAttribute("data-background-iframe");if(!1===a.hasAttribute("data-loaded")){a.setAttribute("data-loaded","true");let r=e.getAttribute("data-background-image"),s=e.getAttribute("data-background-video"),o=e.hasAttribute("data-background-video-loop"),l=e.hasAttribute("data-background-video-muted");if(r)i.style.backgroundImage="url("+encodeURI(r)+")";else if(s&&!this.Reveal.isSpeakerNotes()){let e=document.createElement("video");o&&e.setAttribute("loop",""),l&&(e.muted=!0),p&&(e.muted=!0,e.autoplay=!0,e.setAttribute("playsinline","")),s.split(",").forEach(t=>{e.innerHTML+='<source src="'+t+'">'}),i.appendChild(e)}else if(n&&!0!==t.excludeIframes){let e=document.createElement("iframe");e.setAttribute("allowfullscreen",""),e.setAttribute("mozallowfullscreen",""),e.setAttribute("webkitallowfullscreen",""),e.setAttribute("allow","autoplay"),e.setAttribute("data-src",n),e.style.width="100%",e.style.height="100%",e.style.maxHeight="100%",e.style.maxWidth="100%",i.appendChild(e)}}let r=i.querySelector("iframe[data-src]");r&&this.shouldPreload(a)&&!/autoplay=(1|true|yes)/gi.test(n)&&r.getAttribute("src")!==n&&r.setAttribute("src",n)}}unload(e){e.style.display="none";let t=this.Reveal.getSlideBackground(e);t&&(t.style.display="none",r(t.querySelectorAll("iframe[src]")).forEach(e=>{e.removeAttribute("src")})),r(e.querySelectorAll("video[data-lazy-loaded][src], audio[data-lazy-loaded][src], iframe[data-lazy-loaded][src]")).forEach(e=>{e.setAttribute("data-src",e.getAttribute("src")),e.removeAttribute("src")}),r(e.querySelectorAll("video[data-lazy-loaded] source[src], audio source[src]")).forEach(e=>{e.setAttribute("data-src",e.getAttribute("src")),e.removeAttribute("src")})}formatEmbeddedContent(){let e=(e,t,a)=>{r(this.Reveal.getSlidesElement().querySelectorAll("iframe["+e+'*="'+t+'Line truncated

js/controllers/keyboard.js

@@ -263,7 +263,7 @@ export default class Keyboard {
 			}
 			// N, PAGE DOWN
 			else if( keyCode === 78 || keyCode === 34 ) {
-				this.Review.next();
+				this.Reveal.next();
 			}
 			// H, LEFT
 			else if( keyCode === 72 || keyCode === 37 ) {
@@ -283,7 +283,7 @@ export default class Keyboard {
 					this.Reveal.slide( Number.MAX_VALUE );
 				}
 				else if( !this.Reveal.overview.isActive() && useLinearMode ) {
-					this.Review.next();
+					this.Reveal.next();
 				}
 				else {
 					this.Reveal.right();
@@ -301,7 +301,7 @@ export default class Keyboard {
 			// J, DOWN
 			else if( keyCode === 74 || keyCode === 40 ) {
 				if( !this.Reveal.overview.isActive() && useLinearMode ) {
-					this.Review.next();
+					this.Reveal.next();
 				}
 				else {
 					this.Reveal.down();
@@ -324,7 +324,7 @@ export default class Keyboard {
 					this.Reveal.prev();
 				}
 				else {
-					this.Review.next();
+					this.Reveal.next();
 				}
 			}
 			// TWO-SPOT, SEMICOLON, B, V, PERIOD, LOGITECH PRESENTER TOOLS "BLACK SCREEN" BUTTON

js/controllers/location.js

@@ -0,0 +1,51 @@
+import { enterFullscreen } from '../utils/util.js'
+
+/**
+ * Handles all reveal.js keyboard interactions.
+ */
+export default class Location {
+
+	constructor( Reveal ) {
+
+		this.Reveal = Reveal;
+
+	}
+
+	/**
+	 * Return a hash URL that will resolve to the given slide location.
+	 *
+	 * @param {HTMLElement} [slide=currentSlide] The slide to link to
+	 */
+	getHash( slide = this.Reveal.getCurrentSlide() ) {
+
+		let url = '/';
+
+		// Attempt to create a named link based on the slide's ID
+		let id = slide ? slide.getAttribute( 'id' ) : null;
+		if( id ) {
+			id = encodeURIComponent( id );
+		}
+
+		let index = this.Reveal.getIndices( slide );
+		if( !this.Reveal.getConfig().fragmentInURL ) {
+			index.f = undefined;
+		}
+
+		// If the current slide has an ID, use that as a named link,
+		// but we don't support named links with a fragment index
+		if( typeof id === 'string' && id.length && index.f === undefined ) {
+			url = '/' + id;
+		}
+		// Otherwise use the /h/v index
+		else {
+			let hashIndexBase = this.Reveal.getConfig().hashOneBasedIndex ? 1 : 0;
+			if( index.h > 0 || index.v > 0 || index.f !== undefined ) url += index.h + hashIndexBase;
+			if( index.v > 0 || index.f !== undefined ) url += '/' + (index.v + hashIndexBase );
+			if( index.f !== undefined ) url += '/' + index.f;
+		}
+
+		return url;
+
+	}
+
+}

js/controllers/slidenumber.js

@@ -0,0 +1,128 @@
+import { enterFullscreen } from '../utils/util.js'
+
+/**
+ * Handles all reveal.js keyboard interactions.
+ */
+export default class SlideNumber {
+
+	constructor( Reveal ) {
+
+		this.Reveal = Reveal;
+
+	}
+
+	createElement() {
+
+		this.element = document.createElement( 'div' );
+		this.element.className = 'slide-number';
+		this.Reveal.getRevealElement().appendChild( this.element );
+
+	}
+
+	/**
+	 * Shows or hides the slide number depending on the
+	 * current config and state.
+	 */
+	refreshVisibility() {
+
+		let config = this.Reveal.getConfig();
+
+		let slideNumberDisplay = 'none';
+		if( config.slideNumber && !this.Reveal.isPrintingPDF() ) {
+			if( config.showSlideNumber === 'all' ) {
+				slideNumberDisplay = 'block';
+			}
+			else if( config.showSlideNumber === 'speaker' && this.Reveal.isSpeakerNotes() ) {
+				slideNumberDisplay = 'block';
+			}
+		}
+
+		this.element.style.display = slideNumberDisplay;
+
+	}
+
+	/**
+	 * Updates the slide number to match the current slide.
+	 */
+	update() {
+
+		// Update slide number if enabled
+		if( this.Reveal.getConfig().slideNumber && this.element ) {
+			this.element.innerHTML = this.getSlideNumber();
+		}
+
+	}
+
+	/**
+	 * Returns the HTML string corresponding to the current slide
+	 * number, including formatting.
+	 */
+	getSlideNumber( slide = this.Reveal.getCurrentSlide() ) {
+
+		let config = this.Reveal.getConfig();
+		let value;
+		let format = 'h.v';
+
+		if ( typeof config.slideNumber === 'function' ) {
+			value = config.slideNumber( slide );
+		} else {
+			// Check if a custom number format is available
+			if( typeof config.slideNumber === 'string' ) {
+				format = config.slideNumber;
+			}
+
+			// If there are ONLY vertical slides in this deck, always use
+			// a flattened slide number
+			if( !/c/.test( format ) && this.Reveal.getHorizontalSlides().length === 1 ) {
+				format = 'c';
+			}
+
+			value = [];
+			switch( format ) {
+				case 'c':
+					value.push( this.Reveal.getSlidePastCount( slide ) + 1 );
+					break;
+				case 'c/t':
+					value.push( this.Reveal.getSlidePastCount( slide ) + 1, '/', this.Reveal.getTotalSlides() );
+					break;
+				default:
+					let indices = this.Reveal.getIndices( slide );
+					value.push( indices.h + 1 );
+					let sep = format === 'h/v' ? '/' : '.';
+					if( this.Reveal.isVerticalSlide( slide ) ) value.push( sep, indices.v + 1 );
+			}
+		}
+
+		let url = '#' + this.Reveal.location.getHash( slide );
+		return this.formatNumber( value[0], value[1], value[2], url );
+
+	}
+
+	/**
+	 * Applies HTML formatting to a slide number before it's
+	 * written to the DOM.
+	 *
+	 * @param {number} a Current slide
+	 * @param {string} delimiter Character to separate slide numbers
+	 * @param {(number|*)} b Total slides
+	 * @param {HTMLElement} [url='#'+locationHash()] The url to link to
+	 * @return {string} HTML string fragment
+	 */
+	formatNumber( a, delimiter, b, url = '#' + this.Reveal.location.getHash() ) {
+
+		if( typeof b === 'number' && !isNaN( b ) ) {
+			return  `<a href="${url}">
+					<span class="slide-number-a">${a}</span>
+					<span class="slide-number-delimiter">${delimiter}</span>
+					<span class="slide-number-b">${b}</span>
+					</a>`;
+		}
+		else {
+			return `<a href="${url}">
+					<span class="slide-number-a">${a}</span>
+					</a>`;
+		}
+
+	}
+
+}

js/reveal.js

@@ -1,8 +1,10 @@
 import SlideContent from './controllers/slidecontent.js'
+import SlideNumber from './controllers/slidenumber.js'
 import AutoAnimate from './controllers/autoanimate.js'
 import Fragments from './controllers/fragments.js'
 import Overview from './controllers/overview.js'
 import Keyboard from './controllers/keyboard.js'
+import Location from './controllers/location.js'
 import Plugins from './controllers/plugins.js'
 import Playback from './components/playback.js'
 import defaultConfig from './config.js'
@@ -18,6 +20,7 @@ import {
 	distanceBetween,
 	deserialize,
 	transformElement,
+	createSingletonNode,
 	createStyleSheet,
 	closestParent,
 	enterFullscreen,
@@ -81,6 +84,9 @@ export default function( revealElement, options ) {
 		// Controls loading and playback of slide content
 		slideContent = new SlideContent( Reveal ),
 
+		// Controls the optional slide number display
+		slideNumber = new SlideNumber( Reveal ),
+
 		// Controls auto-animations between slides
 		autoAnimate = new AutoAnimate( Reveal ),
 
@@ -93,6 +99,9 @@ export default function( revealElement, options ) {
 		// Controls all keyboard interactions
 		keyboard = new Keyboard( Reveal ),
 
+		// Controls the current location/URL
+		location = new Location( Reveal ),
+
 		// List of asynchronously loaded reveal.js dependencies
 		asyncDependencies = [],
 
@@ -248,7 +257,7 @@ export default function( revealElement, options ) {
 			<button class="navigate-down" aria-label="below slide"><div class="controls-arrow"></div></button>` );
 
 		// Slide number
-		dom.slideNumber = createSingletonNode( dom.wrapper, 'div', 'slide-number', '' );
+		slideNumber.createElement();
 
 		// Element containing notes that are visible to the audience
 		dom.speakerNotes = createSingletonNode( dom.wrapper, 'div', 'speaker-notes', null );
@@ -377,7 +386,7 @@ export default function( revealElement, options ) {
 		// Compute slide numbers now, before we start duplicating slides
 		let doingSlideNumbers = config.slideNumber && /all|print/i.test( config.showSlideNumber );
 		toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ).forEach( function( slide ) {
-			slide.setAttribute( 'data-slide-number', getSlideNumber( slide ) );
+			slide.setAttribute( 'data-slide-number', slideNumber.getSlideNumber( slide ) );
 		} );
 
 		// Slide and slide background layout
@@ -534,42 +543,6 @@ export default function( revealElement, options ) {
 
 	}
 
-	/**
-	 * Creates an HTML element and returns a reference to it.
-	 * If the element already exists the existing instance will
-	 * be returned.
-	 *
-	 * @param {HTMLElement} container
-	 * @param {string} tagname
-	 * @param {string} classname
-	 * @param {string} innerHTML
-	 *
-	 * @return {HTMLElement}
-	 */
-	function createSingletonNode( container, tagname, classname, innerHTML='' ) {
-
-		// Find all nodes matching the description
-		let nodes = container.querySelectorAll( '.' + classname );
-
-		// Check all matches to find one which is a direct child of
-		// the specified container
-		for( let i = 0; i < nodes.length; i++ ) {
-			let testNode = nodes[i];
-			if( testNode.parentNode === container ) {
-				return testNode;
-			}
-		}
-
-		// If no node was found, create it now
-		let node = document.createElement( tagname );
-		node.className = classname;
-		node.innerHTML = innerHTML;
-		container.appendChild( node );
-
-		return node;
-
-	}
-
 	/**
 	 * Creates the slide background elements and appends them
 	 * to the background container. One element is created per
@@ -831,9 +804,8 @@ export default function( revealElement, options ) {
 
 		const numberOfSlides = dom.wrapper.querySelectorAll( SLIDES_SELECTOR ).length;
 
-		// Remove the previously configured transition class
+		// The transition is added as a class on the .reveal element
 		dom.wrapper.classList.remove( oldTransition );
-
 		dom.wrapper.classList.add( config.transition );
 
 		dom.wrapper.setAttribute( 'data-transition-speed', config.transitionSpeed );
@@ -927,19 +899,6 @@ export default function( revealElement, options ) {
 			fragments.showAll();
 		}
 
-		// Slide numbers
-		let slideNumberDisplay = 'none';
-		if( config.slideNumber && !isPrintingPDF() ) {
-			if( config.showSlideNumber === 'all' ) {
-				slideNumberDisplay = 'block';
-			}
-			else if( config.showSlideNumber === 'speaker' && isSpeakerNotes() ) {
-				slideNumberDisplay = 'block';
-			}
-		}
-
-		dom.slideNumber.style.display = slideNumberDisplay;
-
 		// Add the navigation mode to the DOM so we can adjust styling
 		if( config.navigationMode !== 'default' ) {
 			dom.wrapper.setAttribute( 'data-navigation-mode', config.navigationMode );
@@ -948,6 +907,7 @@ export default function( revealElement, options ) {
 			dom.wrapper.removeAttribute( 'data-navigation-mode' );
 		}
 
+		slideNumber.refreshVisibility();
 		keyboard.refreshSortcuts();
 
 		sync();
@@ -1551,44 +1511,6 @@ export default function( revealElement, options ) {
 
 	}
 
-	/**
-	 * Return a hash URL that will resolve to the given slide location.
-	 *
-	 * @param {HTMLElement} [slide=currentSlide] The slide to link to
-	 */
-	function locationHash( slide ) {
-
-		let url = '/';
-
-		// Attempt to create a named link based on the slide's ID
-		let s = slide || currentSlide;
-		let id = s ? s.getAttribute( 'id' ) : null;
-		if( id ) {
-			id = encodeURIComponent( id );
-		}
-
-		let index = getIndices( slide );
-		if( !config.fragmentInURL ) {
-			index.f = undefined;
-		}
-
-		// If the current slide has an ID, use that as a named link,
-		// but we don't support named links with a fragment index
-		if( typeof id === 'string' && id.length && index.f === undefined ) {
-			url = '/' + id;
-		}
-		// Otherwise use the /h/v index
-		else {
-			let hashIndexBase = config.hashOneBasedIndex ? 1 : 0;
-			if( index.h > 0 || index.v > 0 || index.f !== undefined ) url += index.h + hashIndexBase;
-			if( index.v > 0 || index.f !== undefined ) url += '/' + (index.v + hashIndexBase );
-			if( index.f !== undefined ) url += '/' + index.f;
-		}
-
-		return url;
-
-	}
-
 	/**
 	 * Checks if the current or specified slide is vertical
 	 * (nested within another slide).
@@ -1908,9 +1830,9 @@ export default function( revealElement, options ) {
 		updateProgress();
 		updateBackground();
 		updateParallax();
-		updateSlideNumber();
 		updateNotes();
 
+		slideNumber.update();
 		fragments.update();
 
 		// Update the URL hash
@@ -1970,12 +1892,12 @@ export default function( revealElement, options ) {
 
 		updateControls();
 		updateProgress();
-		updateSlideNumber();
 		updateSlidesVisibility();
 		updateBackground( true );
 		updateNotesVisibility();
 		updateNotes();
 
+		slideNumber.update();
 		slideContent.formatEmbeddedContent();
 
 		// Start or stop embedded content depending on global config
@@ -2322,90 +2244,6 @@ export default function( revealElement, options ) {
 
 	}
 
-
-	/**
-	 * Updates the slide number to match the current slide.
-	 */
-	function updateSlideNumber() {
-
-		// Update slide number if enabled
-		if( config.slideNumber && dom.slideNumber ) {
-			dom.slideNumber.innerHTML = getSlideNumber();
-		}
-
-	}
-
-	/**
-	 * Returns the HTML string corresponding to the current slide number,
-	 * including formatting.
-	 */
-	function getSlideNumber( slide = currentSlide ) {
-
-		let value;
-		let format = 'h.v';
-
-		if ( typeof config.slideNumber === 'function' ) {
-			value = config.slideNumber( slide );
-		} else {
-			// Check if a custom number format is available
-			if( typeof config.slideNumber === 'string' ) {
-				format = config.slideNumber;
-			}
-
-			// If there are ONLY vertical slides in this deck, always use
-			// a flattened slide number
-			if( !/c/.test( format ) && dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ).length === 1 ) {
-				format = 'c';
-			}
-
-			value = [];
-			switch( format ) {
-				case 'c':
-					value.push( getSlidePastCount( slide ) + 1 );
-					break;
-				case 'c/t':
-					value.push( getSlidePastCount( slide ) + 1, '/', getTotalSlides() );
-					break;
-				default:
-					let indices = getIndices( slide );
-					value.push( indices.h + 1 );
-					let sep = format === 'h/v' ? '/' : '.';
-					if( isVerticalSlide( slide ) ) value.push( sep, indices.v + 1 );
-			}
-		}
-
-		let url = '#' + locationHash( slide );
-		return formatSlideNumber( value[0], value[1], value[2], url );
-
-	}
-
-	/**
-	 * Applies HTML formatting to a slide number before it's
-	 * written to the DOM.
-	 *
-	 * @param {number} a Current slide
-	 * @param {string} delimiter Character to separate slide numbers
-	 * @param {(number|*)} b Total slides
-	 * @param {HTMLElement} [url='#'+locationHash()] The url to link to
-	 * @return {string} HTML string fragment
-	 */
-	function formatSlideNumber( a, delimiter, b, url = '#' + locationHash() ) {
-
-		if( typeof b === 'number' && !isNaN( b ) ) {
-			return  `<a href="${url}">
-					<span class="slide-number-a">${a}</span>
-					<span class="slide-number-delimiter">${delimiter}</span>
-					<span class="slide-number-b">${b}</span>
-					</a>`;
-		}
-		else {
-			return `<a href="${url}">
-					<span class="slide-number-a">${a}</span>
-					</a>`;
-		}
-
-	}
-
 	/**
 	 * Updates the state of all control/navigation arrows.
 	 */
@@ -2881,12 +2719,12 @@ export default function( revealElement, options ) {
 			// If we're configured to push to history OR the history
 			// API is not avaialble.
 			if( config.history || !window.history ) {
-				window.location.hash = locationHash();
+				window.location.hash = location.getHash();
 			}
 			// If we're configured to reflect the current slide in the
 			// URL without pushing to history.
 			else if( config.hash ) {
-				window.history.replaceState( null, null, '#' + locationHash() );
+				window.history.replaceState( null, null, '#' + location.getHash() );
 			}
 			// If history and hash are both disabled, a hash may still
 			// be added to the URL by clicking on a href with a hash
@@ -3810,12 +3648,14 @@ export default function( revealElement, options ) {
 		isFirstSlide,
 		isLastSlide,
 		isLastVerticalSlide,
+		isVerticalSlide,
 
 		// State checks
 		isOverview: overview.isActive.bind( overview ),
 		isPaused,
 		isAutoSliding,
 		isSpeakerNotes,
+		isPrintingPDF,
 
 		// Slide preloading
 		loadSlide: slideContent.load.bind( slideContent ),
@@ -3916,6 +3756,7 @@ export default function( revealElement, options ) {
 		announceStatus,
 		getStatusText,
 
+		location,
 		overview,
 		slideContent,
 		onUserInput,

js/utils/util.js

@@ -135,6 +135,42 @@ export const enterFullscreen = () => {
 
 }
 
+/**
+ * Creates an HTML element and returns a reference to it.
+ * If the element already exists the existing instance will
+ * be returned.
+ *
+ * @param {HTMLElement} container
+ * @param {string} tagname
+ * @param {string} classname
+ * @param {string} innerHTML
+ *
+ * @return {HTMLElement}
+ */
+export const createSingletonNode = ( container, tagname, classname, innerHTML='' ) => {
+
+	// Find all nodes matching the description
+	let nodes = container.querySelectorAll( '.' + classname );
+
+	// Check all matches to find one which is a direct child of
+	// the specified container
+	for( let i = 0; i < nodes.length; i++ ) {
+		let testNode = nodes[i];
+		if( testNode.parentNode === container ) {
+			return testNode;
+		}
+	}
+
+	// If no node was found, create it now
+	let node = document.createElement( tagname );
+	node.className = classname;
+	node.innerHTML = innerHTML;
+	container.appendChild( node );
+
+	return node;
+
+}
+
 /**
  * Injects the given CSS styles into the DOM.
  *