diff options
author | Hakim El Hattab <hakim.elhattab@gmail.com> | 2020-02-03 11:13:47 +0100 |
---|---|---|
committer | Hakim El Hattab <hakim.elhattab@gmail.com> | 2020-02-03 11:13:47 +0100 |
commit | 452f62286b5d61f0f8ddb7e5e59b9bc351a5fcc7 (patch) | |
tree | 5cd45577bdf1f14bc3c9ae0c845fc550a590a5c8 | |
parent | 3bfd06c06da6e3f7fa03959f498ef3ba001d180c (diff) | |
download | fosdem-2021-minimalism-presentation-452f62286b5d61f0f8ddb7e5e59b9bc351a5fcc7.tar fosdem-2021-minimalism-presentation-452f62286b5d61f0f8ddb7e5e59b9bc351a5fcc7.tar.gz |
auto-match animatable targets by their contents
-rw-r--r-- | js/reveal.js | 88 | ||||
-rw-r--r-- | test/examples/auto-animate.html | 28 |
2 files changed, 92 insertions, 24 deletions
diff --git a/js/reveal.js b/js/reveal.js index 087d9ca..7eb8f50 100644 --- a/js/reveal.js +++ b/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 ); } ); } @@ -3948,6 +3939,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. * diff --git a/test/examples/auto-animate.html b/test/examples/auto-animate.html index 3b5a96b..a3a21e3 100644 --- a/test/examples/auto-animate.html +++ b/test/examples/auto-animate.html @@ -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> |