jan/revproxy-presentation
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

auto-matching for animated media and code html elements

Browse source
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

42
js/reveal.js
View file

@ -3970,20 +3970,42 @@
*/ */
function findImplicitAutoAnimatePairs( fromSlide, toSlide ) { function findImplicitAutoAnimatePairs( fromSlide, toSlide ) {
var textSelector = 'h1, h2, h3, h4, h5, h6, p, li, span';
var pairs = []; var pairs = [];
var fromHash = {};
toArray( fromSlide.querySelectorAll( textSelector ) ).forEach( function( element ) { var findMatches = function( selector, serializer, transformer ) {
fromHash[ element.nodeName+':::'+element.textContent ] = element;
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 ) { // Media
var fromElement = fromHash[ element.nodeName+':::'+element.textContent ]; findMatches( 'img, video, iframe', function( node ) {
if( fromElement ) { return node.nodeName + ':::' + ( node.getAttribute( 'src' ) || node.getAttribute( 'data-src' ) );
pairs.push([ fromElement, element ]); } );
}
// Code
findMatches( 'pre>code', function( node ) {
return node.nodeName + ':::' + node.innerText;
}, function( element ) {
return element.parentNode;
} ); } );
return pairs; 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/reveal.css">
<link rel="stylesheet" href="../../css/theme/black.css" id="theme"> <link rel="stylesheet" href="../../css/theme/black.css" id="theme">
<link rel="stylesheet" href="../../lib/css/monokai.css">
</head> </head>
<body> <body>
@ -21,12 +22,22 @@
<section data-auto-animate> <section data-auto-animate>
<h3>Auto-Matched Content (no IDs)</h3> <h3>Auto-Matched Content (no IDs)</h3>
<h3>This will fade out</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>
<section data-auto-animate> <section data-auto-animate>
<h3>Auto-Matched Content (no IDs)</h3> <h3>Auto-Matched Content (no IDs)</h3>
<h3 style="opacity: 0.2; margin-top: 200px;">This will fade out</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>
<section data-auto-animate> <section data-auto-animate>
@ -110,7 +121,11 @@
// https://github.com/hakimel/reveal.js#configuration // https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({ Reveal.initialize({
center: true, center: true,
hash: true hash: true,
dependencies: [
{ src: '../../plugin/highlight/highlight.js', async: true }
]
}); });
</script> </script>