From b6b94739e220bd7a4635b529f9b8827f0356c132 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Mon, 3 Feb 2020 11:35:44 +0100 Subject: [PATCH] auto-matching for animated media and code html elements --- js/reveal.js | 42 +++++++++++++++++++++++++-------- test/examples/auto-animate.html | 21 ++++++++++++++--- 2 files changed, 50 insertions(+), 13 deletions(-) diff --git a/js/reveal.js b/js/reveal.js index 7eb8f50..ca9daa1 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -3970,20 +3970,42 @@ */ 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; + var findMatches = function( selector, serializer, transformer ) { + + var fromHash = {}; + + toArray( fromSlide.querySelectorAll( selector ) ).forEach( function( element ) { + if( typeof transformer === 'function' ) element = transformer( element ); + fromHash[ serializer( element ) ] = element; + } ); + + toArray( toSlide.querySelectorAll( selector ) ).forEach( function( element ) { + if( typeof transformer === 'function' ) element = transformer( element ); + var fromElement = fromHash[ serializer( element ) ]; + if( fromElement ) { + pairs.push([ fromElement, element ]); + } + } ); + + }; + + // Text + findMatches( 'h1, h2, h3, h4, h5, h6, p, li, span', function( node ) { + return node.nodeName + ':::' + node.innerText; } ); - toArray( toSlide.querySelectorAll( textSelector ) ).forEach( function( element ) { - var fromElement = fromHash[ element.nodeName+':::'+element.textContent ]; - if( fromElement ) { - pairs.push([ fromElement, element ]); - } + // Media + findMatches( 'img, video, iframe', function( node ) { + return node.nodeName + ':::' + ( node.getAttribute( 'src' ) || node.getAttribute( 'data-src' ) ); + } ); + + // Code + findMatches( 'pre>code', function( node ) { + return node.nodeName + ':::' + node.innerText; + }, function( element ) { + return element.parentNode; } ); return pairs; diff --git a/test/examples/auto-animate.html b/test/examples/auto-animate.html index a3a21e3..1d4d9a5 100644 --- a/test/examples/auto-animate.html +++ b/test/examples/auto-animate.html @@ -10,6 +10,7 @@ + @@ -21,12 +22,22 @@

Auto-Matched Content (no IDs)

This will fade out

- + + 

+function Example() {
+  const [count, setCount] = useState(0);
+}
+

Auto-Matched Content (no IDs)

This will fade out

- + + 

+function Example() {
+  const [count, setCount] = useState(0);
+}
+
@@ -110,7 +121,11 @@ // https://github.com/hakimel/reveal.js#configuration Reveal.initialize({ center: true, - hash: true + hash: true, + + dependencies: [ + { src: '../../plugin/highlight/highlight.js', async: true } + ] });