rewrite fragment sorting to account for multiple fragments with the same index

js/reveal.js

@@ -1043,27 +1043,48 @@ var Reveal = (function(){
 	 */
 	function sortFragments( fragments ) {
 
-		var a = toArray( fragments );
+		fragments = toArray( fragments );
 
-		// Elements that do not have an explicit `data-fragment-index`
+		var ordered = [],
-		// are given one which matches their order in the DOM
+			unordered = [],
-		a.forEach( function( el, idx ) {
+			sorted = [];
-			if( !el.hasAttribute( 'data-fragment-index' ) ) {
+
-				el.setAttribute( 'data-fragment-index', idx );
+		// Group ordered and unordered elements
+		fragments.forEach( function( fragment, i ) {
+			if( fragment.hasAttribute( 'data-fragment-index' ) ) {
+				var index = parseInt( fragment.getAttribute( 'data-fragment-index' ), 10 );
+
+				if( !ordered[index] ) {
+					ordered[index] = [];
+				}
+
+				ordered[index].push( fragment );
+			}
+			else {
+				unordered.push( [ fragment ] );
 			}
 		} );
 
-		a.sort( function( l, r ) {
+		// Append fragments without explicit indices in their
-			return l.getAttribute( 'data-fragment-index' ) - r.getAttribute( 'data-fragment-index');
+		// DOM order
+		ordered = ordered.concat( unordered );
+
+		// Manually count the index up per group to ensure there
+		// are no gaps
+		var index = 0;
+
+		// Push all fragments in their sorted order to an array,
+		// this flattens the groups
+		ordered.forEach( function( group ) {
+			group.forEach( function( fragment ) {
+				sorted.push( fragment );
+				fragment.setAttribute( 'data-fragment-index', index );
 			} );
 
-		// Set the indices to match the order of the sorted fragments,
+			index ++;
-		// ensures that we're 0-indexed and have no gaps
-		a.forEach( function( el, idx ) {
-			el.setAttribute( 'data-fragment-index', idx );
 		} );
 
-		return a;
+		return sorted;
 
 	}
 
@@ -3173,9 +3194,11 @@ var Reveal = (function(){
 		down: navigateDown,
 		prev: navigatePrev,
 		next: navigateNext,
+
+		// Fragment methods
+		navigateFragment: navigateFragment,
 		prevFragment: previousFragment,
 		nextFragment: nextFragment,
-		navigateFragment: navigateFragment,
 
 		// Deprecated aliases
 		navigateTo: slide,

test/test.html

@@ -35,8 +35,9 @@
 					</section>
 				</section>
 
+				<section id="fragment-slides">
 					<section>
-					<h1>4</h1>
+						<h1>3.1</h1>
 						<ul>
 							<li class="fragment">4.1</li>
 							<li class="fragment">4.2</li>
@@ -44,6 +45,24 @@
 						</ul>
 					</section>
 
+					<section>
+						<h1>3.2</h1>
+						<ul>
+							<li class="fragment" data-fragment-index="0">4.1</li>
+							<li class="fragment" data-fragment-index="0">4.2</li>
+						</ul>
+					</section>
+
+					<section>
+						<h1>3.3</h1>
+						<ul>
+							<li class="fragment" data-fragment-index="1">3.3.1</li>
+							<li class="fragment" data-fragment-index="4">3.3.2</li>
+							<li class="fragment" data-fragment-index="4">3.3.3</li>
+						</ul>
+					</section>
+				</section>
+
 				<section>
 					<h1>4</h1>
 				</section>

test/test.js

@@ -5,6 +5,7 @@
 // 1
 // 2 - Three sub-slides
 // 3 - Three fragment elements
+// 3 - Two fragments with same data-fragment-index
 // 4
 
 
@@ -128,7 +129,7 @@ Reveal.addEventListener( 'ready', function() {
 	test( 'Reveal.next', function() {
 		Reveal.slide( 0, 0 );
 
-		// Step through the vertical child slides
+		// Step through vertical child slides
 		Reveal.next();
 		deepEqual( Reveal.getIndices(), { h: 1, v: 0, f: undefined } );
 
@@ -138,7 +139,7 @@ Reveal.addEventListener( 'ready', function() {
 		Reveal.next();
 		deepEqual( Reveal.getIndices(), { h: 1, v: 2, f: undefined } );
 
-		// There's fragments on this slide
+		// Step through fragments
 		Reveal.next();
 		deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: -1 } );
 
@@ -150,11 +151,15 @@ Reveal.addEventListener( 'ready', function() {
 
 		Reveal.next();
 		deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 2 } );
+	});
 
+	test( 'Reveal.next at end', function() {
+		Reveal.slide( 3 );
+
+		// We're at the end, this should have no effect
 		Reveal.next();
 		deepEqual( Reveal.getIndices(), { h: 3, v: 0, f: undefined } );
 
-		// We're at the end, this should have no effect
 		Reveal.next();
 		deepEqual( Reveal.getIndices(), { h: 3, v: 0, f: undefined } );
 	});
@@ -180,17 +185,17 @@ Reveal.addEventListener( 'ready', function() {
 	});
 
 	test( 'Hiding all fragments', function() {
-		var fragmentSlide = document.querySelector( '.reveal .slides>section:nth-child(3)' );
+		var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(1)' );
 
 		Reveal.slide( 2, 0, 0 );
 		strictEqual( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 1, 'one fragment visible when index is 0' );
 
 		Reveal.slide( 2, 0, -1 );
-		strictEqual( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 0, 'no fragments visible when index 0' );
+		strictEqual( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 0, 'no fragments visible when index is -1' );
 	});
 
 	test( 'Current fragment', function() {
-		var fragmentSlide = document.querySelector( '.reveal .slides>section:nth-child(3)' );
+		var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(1)' );
 
 		Reveal.slide( 2, 0 );
 		strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 0, 'no current fragment at index -1' );
@@ -224,17 +229,17 @@ Reveal.addEventListener( 'ready', function() {
 		// backwards:
 
 		Reveal.prev();
-		deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 }, 'prev() goes to prev fragment' );
+		deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 2 }, 'prev() goes to prev fragment' );
 
 		Reveal.left();
-		deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 }, 'left() goes to prev fragment' );
+		deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 }, 'left() goes to prev fragment' );
 
 		Reveal.up();
-		deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: -1 }, 'up() goes to prev fragment' );
+		deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 }, 'up() goes to prev fragment' );
 	});
 
 	test( 'Stepping past fragments', function() {
-		var fragmentSlide = document.querySelector( '.reveal .slides>section:nth-child(3)' );
+		var fragmentSlide = document.querySelector( '#fragment-slides>section:first-child' );
 
 		Reveal.slide( 0, 0, 0 );
 		equal( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 0, 'no fragments visible when on previous slide' );
@@ -243,6 +248,13 @@ Reveal.addEventListener( 'ready', function() {
 		equal( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 3, 'all fragments visible when on future slide' );
 	});
 
+	test( 'Fragment indices', function() {
+		var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(2)' );
+
+		Reveal.slide( 3, 0, 0 );
+		equal( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 2, 'both fragments of same index are shown' );
+	});
+
 	asyncTest( 'fragmentshown event', function() {
 		expect( 2 );