fragment sorting tweaks, sort attribute is now called data-fragment-index (#342)

README.md

@@ -270,6 +270,16 @@ Multiple fragments can be applied to the same element sequentially by wrapping i
 </section>
 ```
 
+The display order of fragments can be controlled using the ```data-fragment-index``` attribute.
+
+```html
+<section>
+	<p class="fragment" data-fragment-index="3">Appears last</p>
+	<p class="fragment" data-fragment-index="1">Appears first</p>
+	<p class="fragment" data-fragment-index="2">Appears second</p>
+</section>
+```
+
 ### Fragment events
 
 When a slide fragment is either shown or hidden reveal.js will dispatch an event.

js/reveal.js

@@ -142,31 +142,6 @@ var Reveal = (function(){
 			threshold: 80
 		};
 
-    /**
-     * Return a sorted fragments list, ordered by an increasing "fragment-pos" attribute.
-     *
-     * Fragments will be revealed in the order that they are returned by
-     * this function, so you can use "fragment-pos" attributes to control
-     * the order of fragment appearance.
-     *
-     * To maintain a sensible default fragment order, fragments are presumed
-     * to be passed in document order. This function adds a "fragment-pos"
-     * attribute to each node if such an attribute is not already present,
-     * and sets that attribute to an integer value which is the position of
-     * the fragment within the fragments list.
-     *
-     */
-    function sort_fragments( fragments ) {
-        var a = toArray(fragments)
-        a.forEach( function (el, idx) {
-                if (!el.hasAttribute('fragment-pos')) {
-                    el.setAttribute('fragment-pos', idx) }})
-        a.sort(function(l, r) {
-                return l.getAttribute( 'fragment-pos' )
-                       - r.getAttribute( 'fragment-pos') })
-        return a
-    }
-
 	/**
 	 * Starts up the presentation if the client is capable.
 	 */
@@ -597,6 +572,38 @@ var Reveal = (function(){
 
 	}
 
+	/**
+	 * Return a sorted fragments list, ordered by an increasing
+	 * "data-fragment-index" attribute.
+	 *
+	 * Fragments will be revealed in the order that they are returned by
+	 * this function, so you can use the index attributes to control the 
+	 * order of fragment appearance.
+	 *
+	 * To maintain a sensible default fragment order, fragments are presumed
+	 * to be passed in document order. This function adds a "fragment-index"
+	 * attribute to each node if such an attribute is not already present,
+	 * and sets that attribute to an integer value which is the position of
+	 * the fragment within the fragments list.
+	 */
+	function sortFragments( fragments ) {
+
+		var a = toArray( fragments );
+
+		a.forEach( function( el, idx ) {
+			if( !el.hasAttribute( 'data-fragment-index' ) ) {
+				el.setAttribute( 'data-fragment-index', idx );
+			}
+		} );
+
+		a.sort( function( l, r ) {
+			return l.getAttribute( 'data-fragment-index' ) - r.getAttribute( 'data-fragment-index');
+		} );
+
+		return a
+
+	}
+
 	/**
 	 * Applies JavaScript-controlled layout rules to the
 	 * presentation.
@@ -1046,8 +1053,7 @@ var Reveal = (function(){
 
 		// Show fragment, if specified
 		if( typeof f !== 'undefined' ) {
-			var fragments = currentSlide.querySelectorAll( '.fragment' );
+			var fragments = sortFragments( currentSlide.querySelectorAll( '.fragment' ) );
-                        fragments = sort_fragments(fragments)
 
 			toArray( fragments ).forEach( function( fragment, indexf ) {
 				if( indexf < f ) {
@@ -1418,8 +1424,8 @@ var Reveal = (function(){
 
 		// Vertical slides:
 		if( document.querySelector( VERTICAL_SLIDES_SELECTOR + '.present' ) ) {
-			var verticalFragments = document.querySelectorAll( VERTICAL_SLIDES_SELECTOR + '.present .fragment:not(.visible)' );
+			var verticalFragments = sortFragments( document.querySelectorAll( VERTICAL_SLIDES_SELECTOR + '.present .fragment:not(.visible)' ) );
-                        verticalFragments = sort_fragments(verticalFragments)
+
 			if( verticalFragments.length ) {
 				verticalFragments[0].classList.add( 'visible' );
 
@@ -1430,8 +1436,8 @@ var Reveal = (function(){
 		}
 		// Horizontal slides:
 		else {
-			var horizontalFragments = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR + '.present .fragment:not(.visible)' );
+			var horizontalFragments = sortFragments( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR + '.present .fragment:not(.visible)' ) );
-                        horizontalFragments = sort_fragments(horizontalFragments)
+
 			if( horizontalFragments.length ) {
 				horizontalFragments[0].classList.add( 'visible' );
 
@@ -1455,8 +1461,8 @@ var Reveal = (function(){
 
 		// Vertical slides:
 		if( document.querySelector( VERTICAL_SLIDES_SELECTOR + '.present' ) ) {
-			var verticalFragments = document.querySelectorAll( VERTICAL_SLIDES_SELECTOR + '.present .fragment.visible' );
+			var verticalFragments = sortFragments( document.querySelectorAll( VERTICAL_SLIDES_SELECTOR + '.present .fragment.visible' ) );
-                        verticalFragments = sort_fragments(verticalFragments)
+
 			if( verticalFragments.length ) {
 				verticalFragments[ verticalFragments.length - 1 ].classList.remove( 'visible' );
 
@@ -1467,8 +1473,8 @@ var Reveal = (function(){
 		}
 		// Horizontal slides:
 		else {
-			var horizontalFragments = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR + '.present .fragment.visible' );
+			var horizontalFragments = sortFragments( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR + '.present .fragment.visible' ) );
-                        horizontalFragments = sort_fragments(horizontalFragments)
+
 			if( horizontalFragments.length ) {
 				horizontalFragments[ horizontalFragments.length - 1 ].classList.remove( 'visible' );