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`
-		// are given one which matches their order in the DOM
-		a.forEach( function( el, idx ) {
-			if( !el.hasAttribute( 'data-fragment-index' ) ) {
-				el.setAttribute( 'data-fragment-index', idx );
+		var ordered = [],
+			unordered = [],
+			sorted = [];
+
+		// 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 ) {
-			return l.getAttribute( 'data-fragment-index' ) - r.getAttribute( 'data-fragment-index');
+		// Append fragments without explicit indices in their
+		// 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,
-		// ensures that we're 0-indexed and have no gaps
-		a.forEach( function( el, idx ) {
-			el.setAttribute( 'data-fragment-index', idx );
+			index ++;
 		} );
 
-		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,

js/reveal.min.js

@@ -1,9 +1,9 @@
 /*!
- * reveal.js 2.6.0-dev (2013-11-23, 17:12)
+ * reveal.js 2.6.0-dev (2013-11-25, 14:44)
  * http://lab.hakim.se/reveal-js
  * MIT licensed
  *
  * Copyright (C) 2013 Hakim El Hattab, http://hakim.se
  */
-var Reveal=function(){"use strict";function a(a){if(b(),!dc.transforms2d&&!dc.transforms3d)return document.body.setAttribute("class","no-transforms"),void 0;window.addEventListener("load",C,!1);var d=Reveal.getQueryHash();"undefined"!=typeof d.dependencies&&delete d.dependencies,l($b,a),l($b,d),s(),c()}function b(){dc.transforms3d="WebkitPerspective"in document.body.style||"MozPerspective"in document.body.style||"msPerspective"in document.body.style||"OPerspective"in document.body.style||"perspective"in document.body.style,dc.transforms2d="WebkitTransform"in document.body.style||"MozTransform"in document.body.style||"msTransform"in document.body.style||"OTransform"in document.body.style||"transform"in document.body.style,dc.requestAnimationFrameMethod=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame,dc.requestAnimationFrame="function"==typeof dc.requestAnimationFrameMethod,dc.canvas=!!document.createElement("canvas").getContext,Ub=navigator.userAgent.match(/(iphone|ipod|android)/gi)}function c(){function a(){c.length&&head.js.apply(null,c),d()}for(var b=[],c=[],e=0,f=$b.dependencies.length;f>e;e++){var g=$b.dependencies[e];(!g.condition||g.condition())&&(g.async?c.push(g.src):b.push(g.src),"function"==typeof g.callback&&head.ready(g.src.match(/([\w\d_\-]*)\.?js$|[^\\\/]*$/i)[0],g.callback))}b.length?(head.ready(a),head.js.apply(null,b)):a()}function d(){f(),e(),i(),cb(),X(!0),setTimeout(function(){cc.slides.classList.remove("no-transition"),_b=!0,u("ready",{indexh:Pb,indexv:Qb,currentSlide:Sb})},1)}function e(){var a=m(document.querySelectorAll(Xb));a.forEach(function(a){var b=m(a.querySelectorAll("section"));b.forEach(function(a,b){b>0&&a.classList.add("future")})})}function f(){cc.theme=document.querySelector("#theme"),cc.wrapper=document.querySelector(".reveal"),cc.slides=document.querySelector(".reveal .slides"),cc.slides.classList.add("no-transition"),cc.background=g(cc.wrapper,"div","backgrounds",null),cc.progress=g(cc.wrapper,"div","progress","<span></span>"),cc.progressbar=cc.progress.querySelector("span"),g(cc.wrapper,"aside","controls",'<div class="navigate-left"></div><div class="navigate-right"></div><div class="navigate-up"></div><div class="navigate-down"></div>'),cc.slideNumber=g(cc.wrapper,"div","slide-number",""),g(cc.wrapper,"div","state-background",null),g(cc.wrapper,"div","pause-overlay",null),cc.controls=document.querySelector(".reveal .controls"),cc.controlsLeft=m(document.querySelectorAll(".navigate-left")),cc.controlsRight=m(document.querySelectorAll(".navigate-right")),cc.controlsUp=m(document.querySelectorAll(".navigate-up")),cc.controlsDown=m(document.querySelectorAll(".navigate-down")),cc.controlsPrev=m(document.querySelectorAll(".navigate-prev")),cc.controlsNext=m(document.querySelectorAll(".navigate-next"))}function g(a,b,c,d){var e=a.querySelector("."+c);return e||(e=document.createElement(b),e.classList.add(c),null!==d&&(e.innerHTML=d),a.appendChild(e)),e}function h(){function a(a,b){var c={background:a.getAttribute("data-background"),backgroundSize:a.getAttribute("data-background-size"),backgroundImage:a.getAttribute("data-background-image"),backgroundColor:a.getAttribute("data-background-color"),backgroundRepeat:a.getAttribute("data-background-repeat"),backgroundPosition:a.getAttribute("data-background-position"),backgroundTransition:a.getAttribute("data-background-transition")},d=document.createElement("div");return d.className="slide-background",c.background&&(/^(http|file|\/\/)/gi.test(c.background)||/\.(svg|png|jpg|jpeg|gif|bmp)$/gi.test(c.background)?d.style.backgroundImage="url("+c.background+")":d.style.background=c.background),(c.background||c.backgroundColor||c.backgroundImage)&&d.setAttribute("data-background-hash",c.background+c.backgroundSize+c.backgroundImage+c.backgroundColor+c.backgroundRepeat+c.backgroundPosition+c.backgroundTransition),c.backgroundSize&&(d.style.backgroundSize=c.backgroundSize),c.backgroundImage&&(d.style.backgroundImage='url("'+c.backgroundImage+'")'),c.backgroundColor&&(d.style.backgroundColor=c.backgroundColor),c.backgroundRepeat&&(d.style.backgroundRepeat=c.backgroundRepeat),c.backgroundPosition&&(d.style.backgroundPosition=c.backgroundPosition),c.backgroundTransition&&d.setAttribute("data-background-transition",c.backgroundTransition),b.appendChild(d),d}r()&&document.body.classList.add("print-pdf"),cc.background.innerHTML="",cc.background.classList.add("no-transition"),m(document.querySelectorAll(Xb)).forEach(function(b){var c;c=r()?a(b,b):a(b,cc.background),m(b.querySelectorAll("section")).forEach(function(b){r()?a(b,b):a(b,c)})}),$b.parallaxBackgroundImage?(cc.background.style.backgroundImage='url("'+$b.parallaxBackgroundImage+'")',cc.background.style.backgroundSize=$b.parallaxBackgroundSize,setTimeout(function(){cc.wrapper.classList.add("has-parallax-background")},1)):(cc.background.style.backgroundImage="",cc.wrapper.classList.remove("has-parallax-background"))}function i(a){var b=dLine truncated
+var Reveal=function(){"use strict";function a(a){if(b(),!dc.transforms2d&&!dc.transforms3d)return document.body.setAttribute("class","no-transforms"),void 0;window.addEventListener("load",C,!1);var d=Reveal.getQueryHash();"undefined"!=typeof d.dependencies&&delete d.dependencies,l($b,a),l($b,d),s(),c()}function b(){dc.transforms3d="WebkitPerspective"in document.body.style||"MozPerspective"in document.body.style||"msPerspective"in document.body.style||"OPerspective"in document.body.style||"perspective"in document.body.style,dc.transforms2d="WebkitTransform"in document.body.style||"MozTransform"in document.body.style||"msTransform"in document.body.style||"OTransform"in document.body.style||"transform"in document.body.style,dc.requestAnimationFrameMethod=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame,dc.requestAnimationFrame="function"==typeof dc.requestAnimationFrameMethod,dc.canvas=!!document.createElement("canvas").getContext,Ub=navigator.userAgent.match(/(iphone|ipod|android)/gi)}function c(){function a(){c.length&&head.js.apply(null,c),d()}for(var b=[],c=[],e=0,f=$b.dependencies.length;f>e;e++){var g=$b.dependencies[e];(!g.condition||g.condition())&&(g.async?c.push(g.src):b.push(g.src),"function"==typeof g.callback&&head.ready(g.src.match(/([\w\d_\-]*)\.?js$|[^\\\/]*$/i)[0],g.callback))}b.length?(head.ready(a),head.js.apply(null,b)):a()}function d(){f(),e(),i(),cb(),X(!0),setTimeout(function(){cc.slides.classList.remove("no-transition"),_b=!0,u("ready",{indexh:Pb,indexv:Qb,currentSlide:Sb})},1)}function e(){var a=m(document.querySelectorAll(Xb));a.forEach(function(a){var b=m(a.querySelectorAll("section"));b.forEach(function(a,b){b>0&&a.classList.add("future")})})}function f(){cc.theme=document.querySelector("#theme"),cc.wrapper=document.querySelector(".reveal"),cc.slides=document.querySelector(".reveal .slides"),cc.slides.classList.add("no-transition"),cc.background=g(cc.wrapper,"div","backgrounds",null),cc.progress=g(cc.wrapper,"div","progress","<span></span>"),cc.progressbar=cc.progress.querySelector("span"),g(cc.wrapper,"aside","controls",'<div class="navigate-left"></div><div class="navigate-right"></div><div class="navigate-up"></div><div class="navigate-down"></div>'),cc.slideNumber=g(cc.wrapper,"div","slide-number",""),g(cc.wrapper,"div","state-background",null),g(cc.wrapper,"div","pause-overlay",null),cc.controls=document.querySelector(".reveal .controls"),cc.controlsLeft=m(document.querySelectorAll(".navigate-left")),cc.controlsRight=m(document.querySelectorAll(".navigate-right")),cc.controlsUp=m(document.querySelectorAll(".navigate-up")),cc.controlsDown=m(document.querySelectorAll(".navigate-down")),cc.controlsPrev=m(document.querySelectorAll(".navigate-prev")),cc.controlsNext=m(document.querySelectorAll(".navigate-next"))}function g(a,b,c,d){var e=a.querySelector("."+c);return e||(e=document.createElement(b),e.classList.add(c),null!==d&&(e.innerHTML=d),a.appendChild(e)),e}function h(){function a(a,b){var c={background:a.getAttribute("data-background"),backgroundSize:a.getAttribute("data-background-size"),backgroundImage:a.getAttribute("data-background-image"),backgroundColor:a.getAttribute("data-background-color"),backgroundRepeat:a.getAttribute("data-background-repeat"),backgroundPosition:a.getAttribute("data-background-position"),backgroundTransition:a.getAttribute("data-background-transition")},d=document.createElement("div");return d.className="slide-background",c.background&&(/^(http|file|\/\/)/gi.test(c.background)||/\.(svg|png|jpg|jpeg|gif|bmp)$/gi.test(c.background)?d.style.backgroundImage="url("+c.background+")":d.style.background=c.background),(c.background||c.backgroundColor||c.backgroundImage)&&d.setAttribute("data-background-hash",c.background+c.backgroundSize+c.backgroundImage+c.backgroundColor+c.backgroundRepeat+c.backgroundPosition+c.backgroundTransition),c.backgroundSize&&(d.style.backgroundSize=c.backgroundSize),c.backgroundImage&&(d.style.backgroundImage='url("'+c.backgroundImage+'")'),c.backgroundColor&&(d.style.backgroundColor=c.backgroundColor),c.backgroundRepeat&&(d.style.backgroundRepeat=c.backgroundRepeat),c.backgroundPosition&&(d.style.backgroundPosition=c.backgroundPosition),c.backgroundTransition&&d.setAttribute("data-background-transition",c.backgroundTransition),b.appendChild(d),d}r()&&document.body.classList.add("print-pdf"),cc.background.innerHTML="",cc.background.classList.add("no-transition"),m(document.querySelectorAll(Xb)).forEach(function(b){var c;c=r()?a(b,b):a(b,cc.background),m(b.querySelectorAll("section")).forEach(function(b){r()?a(b,b):a(b,c)})}),$b.parallaxBackgroundImage?(cc.background.style.backgroundImage='url("'+$b.parallaxBackgroundImage+'")',cc.background.style.backgroundSize=$b.parallaxBackgroundSize,setTimeout(function(){cc.wrapper.classList.add("has-parallax-background")},1)):(cc.background.style.backgroundImage="",cc.wrapper.classList.remove("has-parallax-background"))}function i(a){var b=dLine truncated
 });for(var b in a){var c=a[b];"null"===c?a[b]=null:"true"===c?a[b]=!0:"false"===c?a[b]=!1:isNaN(parseFloat(c))||(a[b]=parseFloat(c))}return a},isFirstSlide:function(){return null==document.querySelector(Wb+".past")?!0:!1},isLastSlide:function(){return Sb?Sb.nextElementSibling?!1:K(Sb)&&Sb.parentNode.nextElementSibling?!1:!0:!1},isReady:function(){return _b},addEventListener:function(a,b,c){"addEventListener"in window&&(cc.wrapper||document.querySelector(".reveal")).addEventListener(a,b,c)},removeEventListener:function(a,b,c){"addEventListener"in window&&(cc.wrapper||document.querySelector(".reveal")).removeEventListener(a,b,c)}}}();

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 );