Преглед на файлове

auto-matching for animated media and code html elements

Hakim El Hattab преди 5 години
родител
ревизия
b6b94739e2
променени са 2 файла, в които са добавени 50 реда и са изтрити 13 реда
  1. 32 10
      js/reveal.js
  2. 18 3
      test/examples/auto-animate.html

+ 32 - 10
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;

+ 18 - 3
test/examples/auto-animate.html

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