dirk
/
why-cant-we-deploy-today
1
0
Fork 0
Code Releases Activity

auto-matching for animated media and code html elements

This commit is contained in:
Hakim El Hattab 2020-02-03 11:35:44 +01:00
parent 452f62286b
commit b6b94739e2
2 changed files with 50 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
js/reveal.js
View File

@ -3970,22 +3970,44 @@
*/
function findImplicitAutoAnimatePairs( fromSlide, toSlide ) {
var textSelector = 'h1, h2, h3, h4, h5, h6, p, li, span';
var pairs = [];
var findMatches = function( selector, serializer, transformer ) {
var fromHash = {};
toArray( fromSlide.querySelectorAll( textSelector ) ).forEach( function( element ) {
fromHash[ element.nodeName+':::'+element.textContent ] = element;
toArray( fromSlide.querySelectorAll( selector ) ).forEach( function( element ) {
if( typeof transformer === 'function' ) element = transformer( element );
fromHash[ serializer( element ) ] = element;
} );
toArray( toSlide.querySelectorAll( textSelector ) ).forEach( function( element ) {
var fromElement = fromHash[ element.nodeName+':::'+element.textContent ];
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;
} );
// 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;
}

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

@ -10,6 +10,7 @@
<link rel="stylesheet" href="../../css/reveal.css">
<link rel="stylesheet" href="../../css/theme/black.css" id="theme">
<link rel="stylesheet" href="../../lib/css/monokai.css">
</head>
<body>
@ -21,12 +22,22 @@
<section data-auto-animate>
<h3>Auto-Matched Content (no IDs)</h3>
<h3>This will fade out</h3>
<img src="assets/image1.png">
<img src="assets/image1.png" style="height: 100px;">
<pre><code class="hljs">
function Example() {
const [count, setCount] = useState(0);
}
</code></pre>
</section>
<section data-auto-animate>
<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">
<img src="assets/image1.png" style="height: 100px;">
<pre><code class="hljs">
function Example() {
const [count, setCount] = useState(0);
}
</code></pre>
</section>
<section data-auto-animate>
@ -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 }
]
});
</script>