fragment sorting tweaks, sort attribute is now called data-fragment-index (#342)
This commit is contained in:
parent
25f26bdc15
commit
2e8e73a847
10
README.md
10
README.md
@ -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.
|
||||||
|
76
js/reveal.js
76
js/reveal.js
@ -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
4
js/reveal.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user