xobs/fa23-si
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

auto-match animatable targets by their contents

Browse Source
This commit is contained in:
Hakim El Hattab 2020-02-03 11:13:47 +01:00
parent 3bfd06c06d
commit 452f62286b
2 changed files with 92 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
js/reveal.js
View File

@ -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.

28
test/examples/auto-animate.html
View File

@ -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>