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

This commit is contained in:
Hakim El Hattab 2013-02-27 13:40:42 -05:00
parent 25f26bdc15
commit 2e8e73a847
3 changed files with 53 additions and 37 deletions

View file

@ -270,6 +270,16 @@ Multiple fragments can be applied to the same element sequentially by wrapping i
</section> </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 ### Fragment events
When a slide fragment is either shown or hidden reveal.js will dispatch an event. When a slide fragment is either shown or hidden reveal.js will dispatch an event.

View file

@ -142,31 +142,6 @@ var Reveal = (function(){
threshold: 80 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. * 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 * Applies JavaScript-controlled layout rules to the
* presentation. * presentation.
@ -1046,8 +1053,7 @@ var Reveal = (function(){
// Show fragment, if specified // Show fragment, if specified
if( typeof f !== 'undefined' ) { 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 ) { toArray( fragments ).forEach( function( fragment, indexf ) {
if( indexf < f ) { if( indexf < f ) {
@ -1418,8 +1424,8 @@ var Reveal = (function(){
// Vertical slides: // Vertical slides:
if( document.querySelector( VERTICAL_SLIDES_SELECTOR + '.present' ) ) { 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 ) { if( verticalFragments.length ) {
verticalFragments[0].classList.add( 'visible' ); verticalFragments[0].classList.add( 'visible' );
@ -1430,8 +1436,8 @@ var Reveal = (function(){
} }
// Horizontal slides: // Horizontal slides:
else { 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 ) { if( horizontalFragments.length ) {
horizontalFragments[0].classList.add( 'visible' ); horizontalFragments[0].classList.add( 'visible' );
@ -1455,8 +1461,8 @@ var Reveal = (function(){
// Vertical slides: // Vertical slides:
if( document.querySelector( VERTICAL_SLIDES_SELECTOR + '.present' ) ) { 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 ) { if( verticalFragments.length ) {
verticalFragments[ verticalFragments.length - 1 ].classList.remove( 'visible' ); verticalFragments[ verticalFragments.length - 1 ].classList.remove( 'visible' );
@ -1467,8 +1473,8 @@ var Reveal = (function(){
} }
// Horizontal slides: // Horizontal slides:
else { 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 ) { if( horizontalFragments.length ) {
horizontalFragments[ horizontalFragments.length - 1 ].classList.remove( 'visible' ); horizontalFragments[ horizontalFragments.length - 1 ].classList.remove( 'visible' );

4
js/reveal.min.js vendored

File diff suppressed because one or more lines are too long