Use the current fragment's notes when showNotes: true

* js/controllers/notes.js: Use only the current fragment's notes if
showing a fragment.
* js/reveal.js: Update notes whenever fragments are shown or hidden.

Related to:

- hakimel@f496613
- hakimel#1636

js/controllers/notes.js

@@ -101,10 +101,27 @@ export default class Notes {
 			return slide.getAttribute( 'data-notes' );
 		}
 
+		if ( Reveal.getConfig().fragments ) {
+			let fragmentElement = slide.querySelector( '.current-fragment' );
+			if( fragmentElement ) {
+				let fragmentNotes = fragmentElement.querySelector( 'aside.notes' );
+				if( fragmentNotes ) {
+					return fragmentNotes.innerHTML;
+				}
+				else if( fragmentElement.hasAttribute( 'data-notes' ) ) {
+					return fragmentElement.getAttribute( 'data-notes' );
+				}
+			}
+		}
 		// ... or using <aside class="notes"> elements
 		let notesElements = slide.querySelectorAll( 'aside.notes' );
 		if( notesElements ) {
-			return Array.from(notesElements).map( notesElement => notesElement.innerHTML ).join( '\n' );
+			// ignore notes inside of fragments since those are shown individually when stepping through fragments
+			let notes = Array.from(notesElements);
+			if ( Reveal.getConfig().fragments ) {
+				notes = notes.filter( notesElement => notesElement.closest( '.fragment' ) === null );
+			}
+			return notes.map( notesElement => notesElement.innerHTML ).join('\n');
 		}
 
 		return null;

js/reveal.js

@@ -148,6 +148,15 @@ export default function( revealElement, options ) {
 		// Register plugins and load dependencies, then move on to #start()
 		plugins.load( config.plugins, config.dependencies ).then( start );
 
+		if ( config.fragments ) {
+			Reveal.on( 'fragmentshown', () => { console.debug('shown'); notes.update(); } );
+			Reveal.on( 'fragmenthidden', () => { console.debug('hidden'); notes.update(); } );
+			Reveal.on( 'slidechanged', () => {
+				fragments.update();
+				notes.update();
+			} );
+		}
+
 		return new Promise( resolve => Reveal.on( 'ready', resolve ) );
 
 	}