further overview refactoring

css/reveal.css

@@ -645,8 +645,8 @@ body {
   outline-offset: 10px; }
 
 .reveal.overview .slides section, .reveal.overview-deactivating .slides section {
-  -webkit-transition: none !important;
+  -webkit-transition: none;
-          transition: none !important; }
+          transition: none; }
 
 .reveal.overview .slides section .fragment {
   opacity: 1; }
@@ -677,10 +677,10 @@ body {
   visibility: visible; }
 
 .reveal.overview .backgrounds .slide-background, .reveal.overview-deactivating .backgrounds .slide-background {
-  -webkit-transition: none !important;
+  -webkit-transition: none;
-          transition: none !important; }
+          transition: none; }
 
-.reveal.overview-animated .slides {
+.reveal.overview-animated .slides, .reveal.overview-animated .slides section {
   -webkit-transition: -webkit-transform 0.4s ease;
           transition: transform 0.4s ease; }
 

css/reveal.scss

@@ -759,7 +759,7 @@ body {
 }
 .reveal.overview .slides section,
 .reveal.overview-deactivating .slides section {
-	transition: none !important;
+	transition: none;
 }
 .reveal.overview .slides section .fragment {
 	opacity: 1;
@@ -793,10 +793,11 @@ body {
 }
 .reveal.overview .backgrounds .slide-background,
 .reveal.overview-deactivating .backgrounds .slide-background {
-	transition: none !important;
+	transition: none;
 }
 
-.reveal.overview-animated .slides {
+.reveal.overview-animated .slides,
+.reveal.overview-animated .slides section {
 	transition: transform 0.4s ease;
 }
 

js/reveal.js

@@ -1636,9 +1636,6 @@
 	/**
 	 * Displays the overview of slides (quick nav) by
 	 * scaling down and arranging all slide elements.
-	 *
-	 * Experimental feature, might be dropped if perf
-	 * can't be improved.
 	 */
 	function activateOverview() {
 
@@ -1657,64 +1654,32 @@
 			// Don't auto-slide while in overview mode
 			cancelAutoSlide();
 
-			var margin = 70;
-			var slideWidth = config.width + margin,
-				slideHeight = config.height + margin;
-
 			// Move the backgrounds element into the slide container to
 			// that the same scaling is applied
 			dom.slides.appendChild( dom.background );
 
-			var horizontalSlides = dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ),
+			// Bind events so that clicking on a slide navigates to it
-				horizontalBackgrounds = dom.background.childNodes;
+			toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( hslide, h ) {
 
-			for( var i = 0, len1 = horizontalSlides.length; i < len1; i++ ) {
+				hslide.setAttribute( 'data-index-h', h );
-				var hslide = horizontalSlides[i],
-					hbackground = horizontalBackgrounds[i],
-					hoffset = config.rtl ? -slideWidth : slideWidth;
-
-				var htransform = 'translateX(' + ( i * hoffset ) + 'px)';
-
-				hslide.setAttribute( 'data-index-h', i );
-
-				// Apply CSS transform
-				transformElement( hslide, htransform );
-				transformElement( hbackground, htransform );
 
 				if( hslide.classList.contains( 'stack' ) ) {
+					toArray( hslide.querySelectorAll( 'section' ) ).forEach( function( vslide, v ) {
 
-					var verticalSlides = hslide.querySelectorAll( 'section' ),
+						vslide.setAttribute( 'data-index-h', h );
-						verticalBackgrounds = hbackground.querySelectorAll( '.slide-background' );
+						vslide.setAttribute( 'data-index-v', v );
-
-					for( var j = 0, len2 = verticalSlides.length; j < len2; j++ ) {
-						var verticalIndex = i === indexh ? indexv : getPreviousVerticalIndex( hslide );
-
-						var vslide = verticalSlides[j],
-							vbackground = verticalBackgrounds[j];
-
-						var vtransform = 'translateY(' + ( j * slideHeight ) + 'px)';
-
-						vslide.setAttribute( 'data-index-h', i );
-						vslide.setAttribute( 'data-index-v', j );
-
-						// Apply CSS transform
-						transformElement( vslide, vtransform );
-						transformElement( vbackground, vtransform );
-
-						// Navigate to this slide on click
 						vslide.addEventListener( 'click', onOverviewSlideClicked, true );
-					}
 
+					} );
 				}
 				else {
-
-					// Navigate to this slide on click
 					hslide.addEventListener( 'click', onOverviewSlideClicked, true );
-
 				}
-			}
+
+			} );
 
 			updateSlidesVisibility();
+			layoutOverview();
 			updateOverview();
 
 			layout();
@@ -1730,17 +1695,64 @@
 
 	}
 
-	function updateOverview() {
+	/**
+	 * Moves the slides into a grid for display in the
+	 * overview mode.
+	 */
+	function layoutOverview() {
 
-		var z = window.innerWidth < 400 ? 1000 : 2500;
 		var margin = 70;
 		var slideWidth = config.width + margin,
 			slideHeight = config.height + margin;
 
+		// Reverse in RTL mode
+		if( config.rtl ) {
+			slideWidth = -slideWidth;
+		}
+
+		// Layout slides
+		toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( hslide, h ) {
+			transformElement( hslide, 'translateX(' + ( h * slideWidth ) + 'px)' );
+
+			if( hslide.classList.contains( 'stack' ) ) {
+
+				toArray( hslide.querySelectorAll( 'section' ) ).forEach( function( vslide, v ) {
+					transformElement( vslide, 'translateY(' + ( v * slideHeight ) + 'px)' );
+				} );
+
+			}
+		} );
+
+		// Layout slide backgrounds
+		toArray( dom.background.childNodes ).forEach( function( hbackground, h ) {
+			transformElement( hbackground, 'translateX(' + ( h * slideWidth ) + 'px)' );
+
+			toArray( hbackground.querySelectorAll( '.slide-background' ) ).forEach( function( vbackground, v ) {
+				transformElement( vbackground, 'translateY(' + ( v * slideHeight ) + 'px)' );
+			} );
+		} );
+
+	}
+
+	/**
+	 * Moves the overview viewport to the current slides.
+	 * Called each time the current slide changes.
+	 */
+	function updateOverview() {
+
+		var margin = 70;
+		var slideWidth = config.width + margin,
+			slideHeight = config.height + margin;
+
+		// Reverse in RTL mode
+		if( config.rtl ) {
+			slideWidth = -slideWidth;
+		}
+
 		slidesTransform = [
 			'translateX('+ ( -indexh * slideWidth ) +'px)',
 			'translateY('+ ( -indexv * slideHeight ) +'px)',
-			'translateZ('+ ( -z ) +'px)'
+			'translateZ('+ ( window.innerWidth < 400 ? -1000 : -2500 ) +'px)'
 		].join( ' ' );
 
 		transformSlides();
@@ -1761,10 +1773,6 @@
 			overview = false;
 
 			dom.wrapper.classList.remove( 'overview' );
-
-			// Move the background element back out
-			dom.wrapper.appendChild( dom.background );
-
 			dom.wrapper.classList.remove( 'overview-animated' );
 
 			// Temporarily add a class so that transitions can do different things
@@ -1776,6 +1784,9 @@
 				dom.wrapper.classList.remove( 'overview-deactivating' );
 			}, 1 );
 
+			// Move the background element back out
+			dom.wrapper.appendChild( dom.background );
+
 			// Clean up changes made to slides
 			toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ).forEach( function( slide ) {
 				transformElement( slide, '' );
@@ -2145,6 +2156,10 @@
 
 		formatEmbeddedContent();
 
+		if( isOverview() ) {
+			layoutOverview();
+		}
+
 	}
 
 	/**
@@ -2326,11 +2341,11 @@
 
 			// The number of steps away from the present slide that will
 			// be visible
-			var viewDistance = isOverview() ? 7 : config.viewDistance;
+			var viewDistance = isOverview() ? 10 : config.viewDistance;
 
 			// Limit view distance on weaker devices
 			if( isMobileDevice ) {
-				viewDistance = isOverview() ? 7 : 2;
+				viewDistance = isOverview() ? 6 : 2;
 			}
 
 			// Limit view distance on weaker devices