tweaks and tests for #2354
This commit is contained in:
		
							
								
								
									
										37
									
								
								js/reveal.js
									
									
									
									
									
								
							
							
						
						
									
										37
									
								
								js/reveal.js
									
									
									
									
									
								
							| @@ -180,6 +180,13 @@ | |||||||
| 			// - false:  No media will autoplay, regardless of individual setting | 			// - false:  No media will autoplay, regardless of individual setting | ||||||
| 			autoPlayMedia: null, | 			autoPlayMedia: null, | ||||||
|  |  | ||||||
|  | 			// Global override for preloading lazy-loaded iframes | ||||||
|  | 			// - null:   Iframes with data-src AND data-preload will be loaded when within | ||||||
|  | 			//           the viewDistance, iframes with only data-src will be loaded when visible | ||||||
|  | 			// - true:   All iframes with data-src will be loaded when within the viewDistance | ||||||
|  | 			// - false:  All iframes with data-src will be loaded only when visible | ||||||
|  | 			preloadIframes: null, | ||||||
|  |  | ||||||
| 			// Controls automatic progression to the next slide | 			// Controls automatic progression to the next slide | ||||||
| 			// - 0:      Auto-sliding only happens if the data-autoslide HTML attribute | 			// - 0:      Auto-sliding only happens if the data-autoslide HTML attribute | ||||||
| 			//           is present on the current slide or fragment | 			//           is present on the current slide or fragment | ||||||
| @@ -3707,18 +3714,10 @@ | |||||||
|  |  | ||||||
| 		// Media elements with data-src attributes | 		// Media elements with data-src attributes | ||||||
| 		toArray( slide.querySelectorAll( 'img[data-src], video[data-src], audio[data-src], iframe[data-src]' ) ).forEach( function( element ) { | 		toArray( slide.querySelectorAll( 'img[data-src], video[data-src], audio[data-src], iframe[data-src]' ) ).forEach( function( element ) { | ||||||
| 			var load = function( el ) { | 			if( element.tagName !== 'IFRAME' || shouldPreload( element ) ) { | ||||||
| 				el.setAttribute( 'src', el.getAttribute( 'data-src' ) ); | 				element.setAttribute( 'src', element.getAttribute( 'data-src' ) ); | ||||||
| 				el.setAttribute( 'data-lazy-loaded', '' ); | 				element.setAttribute( 'data-lazy-loaded', '' ); | ||||||
| 				el.removeAttribute( 'data-src' ); | 				element.removeAttribute( 'data-src' ); | ||||||
| 			}; |  | ||||||
|  |  | ||||||
| 			if( element.tagName === 'IFRAME') { |  | ||||||
| 				if( shouldPreload(element) ) { |  | ||||||
| 					load(element); |  | ||||||
| 				} |  | ||||||
| 			} else { |  | ||||||
| 				load(element); |  | ||||||
| 			} | 			} | ||||||
| 		} ); | 		} ); | ||||||
|  |  | ||||||
| @@ -3838,18 +3837,8 @@ | |||||||
|  |  | ||||||
| 		// Reset lazy-loaded media elements with src attributes | 		// Reset lazy-loaded media elements with src attributes | ||||||
| 		toArray( slide.querySelectorAll( 'video[data-lazy-loaded][src], audio[data-lazy-loaded][src], iframe[data-lazy-loaded][src]' ) ).forEach( function( element ) { | 		toArray( slide.querySelectorAll( 'video[data-lazy-loaded][src], audio[data-lazy-loaded][src], iframe[data-lazy-loaded][src]' ) ).forEach( function( element ) { | ||||||
| 			var unload = function( el ) { | 			element.setAttribute( 'data-src', element.getAttribute( 'src' ) ); | ||||||
| 				el.setAttribute( 'data-src', el.getAttribute( 'src' ) ); | 			element.removeAttribute( 'src' ); | ||||||
| 				el.removeAttribute( 'src' ); |  | ||||||
| 			}; |  | ||||||
|  |  | ||||||
| 			if( element.tagName === 'IFRAME' ) { |  | ||||||
| 				if( shouldPreload(element) ) { |  | ||||||
| 					unload(element); |  | ||||||
| 				} |  | ||||||
| 			} else { |  | ||||||
| 				unload(element); |  | ||||||
| 			} |  | ||||||
| 		} ); | 		} ); | ||||||
|  |  | ||||||
| 		// Reset lazy-loaded media elements with <source> children | 		// Reset lazy-loaded media elements with <source> children | ||||||
|   | |||||||
							
								
								
									
										108
									
								
								test/test-iframes.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										108
									
								
								test/test-iframes.html
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,108 @@ | |||||||
|  | <!doctype html> | ||||||
|  | <html lang="en"> | ||||||
|  |  | ||||||
|  | 	<head> | ||||||
|  | 		<meta charset="utf-8"> | ||||||
|  |  | ||||||
|  | 		<title>reveal.js - Test Iframes</title> | ||||||
|  |  | ||||||
|  | 		<link rel="stylesheet" href="../css/reveal.css"> | ||||||
|  | 		<link rel="stylesheet" href="qunit-2.5.0.css"> | ||||||
|  | 	</head> | ||||||
|  |  | ||||||
|  | 	<body style="overflow: auto;"> | ||||||
|  |  | ||||||
|  | 		<div id="qunit"></div> | ||||||
|  | 		<div id="qunit-fixture"></div> | ||||||
|  |  | ||||||
|  | 		<div class="reveal" style="display: none;"> | ||||||
|  |  | ||||||
|  | 			<div class="slides"> | ||||||
|  |  | ||||||
|  | 				<section>1</section> | ||||||
|  | 				<section>2</section> | ||||||
|  | 				<section> | ||||||
|  | 					<iframe class="default-iframe" data-src="#"></iframe> | ||||||
|  | 					<iframe class="preload-iframe" data-src="#" data-preload></iframe> | ||||||
|  | 				</section> | ||||||
|  |  | ||||||
|  | 			</div> | ||||||
|  |  | ||||||
|  | 		</div> | ||||||
|  |  | ||||||
|  | 		<script src="../js/reveal.js"></script> | ||||||
|  | 		<script src="qunit-2.5.0.js"></script> | ||||||
|  |  | ||||||
|  | 		<script> | ||||||
|  |  | ||||||
|  |  | ||||||
|  | 			Reveal.addEventListener( 'ready', function() { | ||||||
|  |  | ||||||
|  | 				var defaultIframe = document.querySelector( '.default-iframe' ), | ||||||
|  | 					preloadIframe = document.querySelector( '.preload-iframe' ); | ||||||
|  |  | ||||||
|  | 				QUnit.module( 'Iframe' ); | ||||||
|  |  | ||||||
|  | 				QUnit.test( 'Using default settings', function( assert ) { | ||||||
|  |  | ||||||
|  | 					Reveal.slide(1); | ||||||
|  | 					assert.strictEqual( defaultIframe.hasAttribute( 'src' ), false, 'not preloaded when within viewDistance' ); | ||||||
|  |  | ||||||
|  | 					Reveal.slide(2); | ||||||
|  | 					assert.strictEqual( defaultIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' ); | ||||||
|  |  | ||||||
|  | 					Reveal.slide(1); | ||||||
|  | 					assert.strictEqual( defaultIframe.hasAttribute( 'src' ), false, 'unloaded when slide becomes invisible' ); | ||||||
|  |  | ||||||
|  | 				}); | ||||||
|  |  | ||||||
|  | 				QUnit.test( 'Using data-preload', function( assert ) { | ||||||
|  |  | ||||||
|  | 					Reveal.slide(1); | ||||||
|  | 					assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'preloaded within viewDistance' ); | ||||||
|  |  | ||||||
|  | 					Reveal.slide(2); | ||||||
|  | 					assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'loaded when slide becoems visible' ); | ||||||
|  |  | ||||||
|  | 					Reveal.slide(0); | ||||||
|  | 					assert.strictEqual( preloadIframe.hasAttribute( 'src' ), false, 'unloads outside of viewDistance' ); | ||||||
|  |  | ||||||
|  | 				}); | ||||||
|  |  | ||||||
|  | 				QUnit.test( 'Using preloadIframes: true', function( assert ) { | ||||||
|  |  | ||||||
|  | 					Reveal.configure({ preloadIframes: true }); | ||||||
|  |  | ||||||
|  | 					Reveal.slide(1); | ||||||
|  | 					assert.strictEqual( defaultIframe.hasAttribute( 'src' ), true, 'preloaded within viewDistance' ); | ||||||
|  | 					assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'preloaded within viewDistance' ); | ||||||
|  |  | ||||||
|  | 					Reveal.slide(2); | ||||||
|  | 					assert.strictEqual( defaultIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' ); | ||||||
|  | 					assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' ); | ||||||
|  |  | ||||||
|  | 				}); | ||||||
|  |  | ||||||
|  | 				QUnit.test( 'Using preloadIframes: false', function( assert ) { | ||||||
|  |  | ||||||
|  | 					Reveal.configure({ preloadIframes: false }); | ||||||
|  |  | ||||||
|  | 					Reveal.slide(0); | ||||||
|  | 					assert.strictEqual( defaultIframe.hasAttribute( 'src' ), false, 'not preloaded within viewDistance' ); | ||||||
|  | 					assert.strictEqual( preloadIframe.hasAttribute( 'src' ), false, 'not preloaded within viewDistance' ); | ||||||
|  |  | ||||||
|  | 					Reveal.slide(2); | ||||||
|  | 					assert.strictEqual( defaultIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' ); | ||||||
|  | 					assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' ); | ||||||
|  |  | ||||||
|  | 				}); | ||||||
|  |  | ||||||
|  | 			} ); | ||||||
|  |  | ||||||
|  | 			Reveal.initialize({ | ||||||
|  | 				viewDistance: 2 | ||||||
|  | 			}); | ||||||
|  | 		</script> | ||||||
|  |  | ||||||
|  | 	</body> | ||||||
|  | </html> | ||||||
		Reference in New Issue
	
	Block a user