new controller for speaker notes

js/controllers/fragments.js

@@ -13,6 +13,20 @@ export default class Fragments {
 
 	}
 
+	/**
+	 * Called whenever the reveal.js config is updated.
+	 */
+	configure( config, oldConfig ) {
+
+		if( config.fragments === false ) {
+			this.disable();
+		}
+		else if( oldConfig.fragments === false ) {
+			this.enable();
+		}
+
+	}
+
 	/**
 	 * If fragments are disabled in the deck, they should all be
 	 * visible rather than stepped through.

js/controllers/keyboard.js

@@ -21,6 +21,32 @@ export default class Keyboard {
 
 	}
 
+	/**
+	 * Called when the reveal.js config is updated.
+	 */
+	configure( config, oldConfig ) {
+
+		if( config.navigationMode === 'linear' ) {
+			this.shortcuts['→  ,  ↓  ,  SPACE  ,  N  ,  L  ,  J'] = 'Next slide';
+			this.shortcuts['←  ,  ↑  ,  P  ,  H  ,  K']           = 'Previous slide';
+		}
+		else {
+			this.shortcuts['N  ,  SPACE']   = 'Next slide';
+			this.shortcuts['P']             = 'Previous slide';
+			this.shortcuts['←  ,  H'] = 'Navigate left';
+			this.shortcuts['→  ,  L'] = 'Navigate right';
+			this.shortcuts['↑  ,  K'] = 'Navigate up';
+			this.shortcuts['↓  ,  J'] = 'Navigate down';
+		}
+
+		this.shortcuts['Home  ,  Shift ←']        = 'First slide';
+		this.shortcuts['End  ,  Shift →']         = 'Last slide';
+		this.shortcuts['B  ,  .']                       = 'Pause';
+		this.shortcuts['F']                             = 'Fullscreen';
+		this.shortcuts['ESC, O']                        = 'Slide overview';
+
+	}
+
 	/**
 	 * Starts listening for keyboard events.
 	 */
@@ -73,32 +99,6 @@ export default class Keyboard {
 
 	}
 
-	/**
-	 * Updates our keyboard shortcuts based on current settings.
-	 */
-	refreshSortcuts() {
-
-		if( this.Reveal.getConfig().navigationMode === 'linear' ) {
-			this.shortcuts['→  ,  ↓  ,  SPACE  ,  N  ,  L  ,  J'] = 'Next slide';
-			this.shortcuts['←  ,  ↑  ,  P  ,  H  ,  K']           = 'Previous slide';
-		}
-		else {
-			this.shortcuts['N  ,  SPACE']   = 'Next slide';
-			this.shortcuts['P']             = 'Previous slide';
-			this.shortcuts['←  ,  H'] = 'Navigate left';
-			this.shortcuts['→  ,  L'] = 'Navigate right';
-			this.shortcuts['↑  ,  K'] = 'Navigate up';
-			this.shortcuts['↓  ,  J'] = 'Navigate down';
-		}
-
-		this.shortcuts['Home  ,  Shift ←']        = 'First slide';
-		this.shortcuts['End  ,  Shift →']         = 'Last slide';
-		this.shortcuts['B  ,  .']                       = 'Pause';
-		this.shortcuts['F']                             = 'Fullscreen';
-		this.shortcuts['ESC, O']                        = 'Slide overview';
-
-	}
-
 	/**
 	 * Programmatically triggers a keyboard event
 	 *

js/controllers/notes.js

@@ -0,0 +1,116 @@
+import { extend, toArray } from '../utils/util.js'
+
+/**
+ *
+ */
+export default class Notes {
+
+	constructor( Reveal ) {
+
+		this.Reveal = Reveal;
+
+	}
+
+	render() {
+
+		this.element = document.createElement( 'div' );
+		this.element.className = 'speaker-notes';
+		this.element.setAttribute( 'data-prevent-swipe', '' );
+		this.element.setAttribute( 'tabindex', '0' );
+		this.Reveal.getRevealElement().appendChild( this.element );
+
+	}
+
+	/**
+	 * Called when the reveal.js config is updated.
+	 */
+	configure( config, oldConfig ) {
+
+		if( config.showNotes ) {
+			this.element.setAttribute( 'data-layout', typeof config.showNotes === 'string' ? config.showNotes : 'inline' );
+		}
+
+	}
+
+	/**
+	 * Pick up notes from the current slide and display them
+	 * to the viewer.
+	 *
+	 * @see {@link config.showNotes}
+	 */
+	update() {
+
+		if( this.Reveal.getConfig().showNotes && this.element && this.Reveal.getCurrentSlide() && !this.Reveal.print.isPrintingPDF() ) {
+
+			this.element.innerHTML = this.getSlideNotes() || '<span class="notes-placeholder">No notes on this slide.</span>';
+
+		}
+
+	}
+
+	/**
+	 * Updates the visibility of the speaker notes sidebar that
+	 * is used to share annotated slides. The notes sidebar is
+	 * only visible if showNotes is true and there are notes on
+	 * one or more slides in the deck.
+	 */
+	updateVisibility() {
+
+		if( this.Reveal.getConfig().showNotes && this.hasNotes() ) {
+			this.Reveal.getRevealElement().classList.add( 'show-notes' );
+		}
+		else {
+			this.Reveal.getRevealElement().classList.remove( 'show-notes' );
+		}
+
+	}
+
+	/**
+	 * Checks if there are speaker notes for ANY slide in the
+	 * presentation.
+	 */
+	hasNotes() {
+
+		return this.Reveal.getSlidesElement().querySelectorAll( '[data-notes], aside.notes' ).length > 0;
+
+	}
+
+	/**
+	 * Checks if this presentation is running inside of the
+	 * speaker notes window.
+	 *
+	 * @return {boolean}
+	 */
+	isSpeakerNotes() {
+
+		return !!window.location.search.match( /receiver/gi );
+
+	}
+
+	/**
+	 * Retrieves the speaker notes from a slide. Notes can be
+	 * defined in two ways:
+	 * 1. As a data-notes attribute on the slide <section>
+	 * 2. As an <aside class="notes"> inside of the slide
+	 *
+	 * @param {HTMLElement} [slide=currentSlide]
+	 * @return {(string|null)}
+	 */
+	getSlideNotes( slide = this.Reveal.getCurrentSlide() ) {
+
+		// Notes can be specified via the data-notes attribute...
+		if( slide.hasAttribute( 'data-notes' ) ) {
+			return slide.getAttribute( 'data-notes' );
+		}
+
+		// ... or using an <aside class="notes"> element
+		let notesElement = slide.querySelector( 'aside.notes' );
+		if( notesElement ) {
+			return notesElement.innerHTML;
+		}
+
+		return null;
+
+	}
+
+}

js/controllers/slidenumber.js

@@ -9,7 +9,7 @@ export default class SlideNumber {
 
 	}
 
-	createElement() {
+	render() {
 
 		this.element = document.createElement( 'div' );
 		this.element.className = 'slide-number';
@@ -18,12 +18,9 @@ export default class SlideNumber {
 	}
 
 	/**
-	 * Shows or hides the slide number depending on the
-	 * current config and state.
+	 * Called when the reveal.js config is updated.
 	 */
-	refreshVisibility() {
-
-		let config = this.Reveal.getConfig();
+	configure( config, oldConfig ) {
 
 		let slideNumberDisplay = 'none';
 		if( config.slideNumber && !this.Reveal.isPrintingPDF() ) {