auto-match animatable targets by their contents
This commit is contained in:
parent
3bfd06c06d
commit
452f62286b
2 changed files with 92 additions and 24 deletions
88
js/reveal.js
88
js/reveal.js
|
@ -3836,17 +3836,8 @@
|
|||
options.duration = parseFloat( toSlide.getAttribute( 'data-auto-animate-duration' ) );
|
||||
}
|
||||
|
||||
var fromTargets = {};
|
||||
|
||||
toArray( fromSlide.querySelectorAll( '[data-id]' ) ).forEach( function( fromElement ) {
|
||||
fromTargets[ fromElement.getAttribute( 'data-id' ) ] = fromElement;
|
||||
} );
|
||||
|
||||
toArray( toSlide.querySelectorAll( '[data-id]' ) ).forEach( function( toElement ) {
|
||||
var fromElement = fromTargets[ toElement.getAttribute( 'data-id' ) ];
|
||||
if( fromElement ) {
|
||||
autoAnimateElement( fromElement, toElement, options );
|
||||
}
|
||||
getAutoAnimatableElements( fromSlide, toSlide ).forEach( function( elements ) {
|
||||
autoAnimateElement( elements[0], elements[1], options );
|
||||
} );
|
||||
|
||||
}
|
||||
|
@ -3947,6 +3938,81 @@
|
|||
|
||||
}
|
||||
|
||||
/**
|
||||
* [getAutoAnimatableElements description]
|
||||
* @param {HTMLElement} fromSlide
|
||||
* @param {HTMLElement} toSlide
|
||||
*
|
||||
* @return {Array} Each value is an array where [0] is
|
||||
* the element we're animating from and [1] is the
|
||||
* element we're animating to
|
||||
*/
|
||||
function getAutoAnimatableElements( fromSlide, toSlide ) {
|
||||
|
||||
var pairs = findImplicitAutoAnimatePairs( fromSlide, toSlide )
|
||||
.concat( findExplicitAutoAnimatePairs( fromSlide, toSlide ) );
|
||||
|
||||
// Remove duplicate pairs
|
||||
pairs = pairs.filter( function( pair, index ) {
|
||||
return index === pairs.findIndex( function( comparePair ) {
|
||||
return pair[0] === comparePair[0] && pair[1] === comparePair[1];
|
||||
} );
|
||||
} );
|
||||
|
||||
return pairs;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns an array of auto-animate element pairs
|
||||
* discovered through implicing means such as matching
|
||||
* text content.
|
||||
*/
|
||||
function findImplicitAutoAnimatePairs( fromSlide, toSlide ) {
|
||||
|
||||
var textSelector = 'h1, h2, h3, h4, h5, h6, p, li, span';
|
||||
|
||||
var pairs = [];
|
||||
var fromHash = {};
|
||||
|
||||
toArray( fromSlide.querySelectorAll( textSelector ) ).forEach( function( element ) {
|
||||
fromHash[ element.nodeName+':::'+element.textContent ] = element;
|
||||
} );
|
||||
|
||||
toArray( toSlide.querySelectorAll( textSelector ) ).forEach( function( element ) {
|
||||
var fromElement = fromHash[ element.nodeName+':::'+element.textContent ];
|
||||
if( fromElement ) {
|
||||
pairs.push([ fromElement, element ]);
|
||||
}
|
||||
} );
|
||||
|
||||
return pairs;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns explicitly ID-matched auto-animate elements.
|
||||
*/
|
||||
function findExplicitAutoAnimatePairs( fromSlide, toSlide ) {
|
||||
|
||||
var pairs = [];
|
||||
var fromHash = {};
|
||||
|
||||
toArray( fromSlide.querySelectorAll( '[data-id]' ) ).forEach( function( fromElement ) {
|
||||
fromHash[ fromElement.getAttribute( 'data-id' ) ] = fromElement;
|
||||
} );
|
||||
|
||||
toArray( toSlide.querySelectorAll( '[data-id]' ) ).forEach( function( toElement ) {
|
||||
var fromElement = fromHash[ toElement.getAttribute( 'data-id' ) ];
|
||||
if( fromElement ) {
|
||||
pairs.push([ fromElement, toElement ]);
|
||||
}
|
||||
} );
|
||||
|
||||
return pairs;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Should the given element be preloaded?
|
||||
* Decides based on local element attributes and global config.
|
||||
|
|
|
@ -19,12 +19,14 @@
|
|||
<div class="slides">
|
||||
|
||||
<section data-auto-animate>
|
||||
<h3 data-id="opacity-title">Fade and slide</h3>
|
||||
<h3 data-id="opacity-test">Opacity 1.0</h3>
|
||||
<h3>Auto-Matched Content (no IDs)</h3>
|
||||
<h3>This will fade out</h3>
|
||||
<img src="assets/image1.png">
|
||||
</section>
|
||||
<section data-auto-animate>
|
||||
<h3 data-id="opacity-title">Fade and slide</h3>
|
||||
<h3 data-id="opacity-test" style="opacity: 0.2; margin-top: 200px;">Opacity 0.2</h3>
|
||||
<h3>Auto-Matched Content (no IDs)</h3>
|
||||
<h3 style="opacity: 0.2; margin-top: 200px;">This will fade out</h3>
|
||||
<img src="assets/image1.png">
|
||||
</section>
|
||||
|
||||
<section data-auto-animate>
|
||||
|
@ -37,25 +39,25 @@
|
|||
<section data-auto-animate>
|
||||
<h3>Swapping list items</h3>
|
||||
<ul>
|
||||
<li data-id="li-1">One</li>
|
||||
<li data-id="li-2">Two</li>
|
||||
<li data-id="li-3">Three</li>
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
<li>Three</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section data-auto-animate>
|
||||
<h3>Swapping list items</h3>
|
||||
<ul>
|
||||
<li data-id="li-2">Two</li>
|
||||
<li data-id="li-1">One</li>
|
||||
<li data-id="li-3">Three</li>
|
||||
<li>Two</li>
|
||||
<li>One</li>
|
||||
<li>Three</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section data-auto-animate>
|
||||
<h3>Swapping list items</h3>
|
||||
<ul>
|
||||
<li data-id="li-2">Two</li>
|
||||
<li data-id="li-3">Three</li>
|
||||
<li data-id="li-1">One</li>
|
||||
<li>Two</li>
|
||||
<li>Three</li>
|
||||
<li>One</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
|
|
Loading…
Reference in a new issue