From 5dd90671507f8f56b27fe9d8a2fd25c1adb08d6b Mon Sep 17 00:00:00 2001
From: Hakim El Hattab <hakim.elhattab@gmail.com>
Date: Wed, 13 Apr 2016 15:21:30 +0200
Subject: [PATCH] overview now works with percentage based width/height #1247

---
 css/reveal.css  |  5 +++--
 css/reveal.scss |  3 ++-
 js/reveal.js    | 45 +++++++++++++++++++++------------------------
 3 files changed, 26 insertions(+), 27 deletions(-)

diff --git a/css/reveal.css b/css/reveal.css
index 3a31fa44aee..b20307459aa 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -20,7 +20,7 @@ html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal i
 .reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed,
 .reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup,
 .reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary,
-.reveal time, .reveal mark, .reveal audio, video {
+.reveal time, .reveal mark, .reveal audio, .reveal video {
   margin: 0;
   padding: 0;
   border: 0;
@@ -989,7 +989,8 @@ html:-moz-full-screen-ancestor {
   -webkit-perspective: 700px;
           perspective: 700px; }
   .reveal.overview .slides section {
-    height: 700px;
+    height: 100%;
+    top: 0 !important;
     opacity: 1 !important;
     overflow: hidden;
     visibility: visible !important;
diff --git a/css/reveal.scss b/css/reveal.scss
index 8cf8cdad765..f8d6904b902 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -1022,7 +1022,8 @@ html:-moz-full-screen-ancestor {
 	perspective: 700px;
 
 	.slides section {
-		height: 700px;
+		height: 100%;
+		top: 0 !important;
 		opacity: 1 !important;
 		overflow: hidden;
 		visibility: visible !important;
diff --git a/js/reveal.js b/js/reveal.js
index 0b1cad7e33d..96a63597717 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -166,6 +166,10 @@
 		// Flags if the overview mode is currently active
 		overview = false,
 
+		// Holds the dimensions of our overview slides, including margins
+		overviewSlideWidth = null,
+		overviewSlideHeight = null,
+
 		// The horizontal and vertical index of the currently active slide
 		indexh,
 		indexv,
@@ -1798,6 +1802,17 @@
 				}
 			} );
 
+			// Calculate slide sizes
+			var margin = 70;
+			var slideSize = getComputedSlideSize();
+			overviewSlideWidth = slideSize.width + margin;
+			overviewSlideHeight = slideSize.height + margin;
+
+			// Reverse in RTL mode
+			if( config.rtl ) {
+				overviewSlideWidth = -overviewSlideWidth;
+			}
+
 			updateSlidesVisibility();
 			layoutOverview();
 			updateOverview();
@@ -1821,19 +1836,10 @@
 	 */
 	function layoutOverview() {
 
-		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 ) {
 			hslide.setAttribute( 'data-index-h', h );
-			transformElement( hslide, 'translate3d(' + ( h * slideWidth ) + 'px, 0, 0)' );
+			transformElement( hslide, 'translate3d(' + ( h * overviewSlideWidth ) + 'px, 0, 0)' );
 
 			if( hslide.classList.contains( 'stack' ) ) {
 
@@ -1841,7 +1847,7 @@
 					vslide.setAttribute( 'data-index-h', h );
 					vslide.setAttribute( 'data-index-v', v );
 
-					transformElement( vslide, 'translate3d(0, ' + ( v * slideHeight ) + 'px, 0)' );
+					transformElement( vslide, 'translate3d(0, ' + ( v * overviewSlideHeight ) + 'px, 0)' );
 				} );
 
 			}
@@ -1849,10 +1855,10 @@
 
 		// Layout slide backgrounds
 		toArray( dom.background.childNodes ).forEach( function( hbackground, h ) {
-			transformElement( hbackground, 'translate3d(' + ( h * slideWidth ) + 'px, 0, 0)' );
+			transformElement( hbackground, 'translate3d(' + ( h * overviewSlideWidth ) + 'px, 0, 0)' );
 
 			toArray( hbackground.querySelectorAll( '.slide-background' ) ).forEach( function( vbackground, v ) {
-				transformElement( vbackground, 'translate3d(0, ' + ( v * slideHeight ) + 'px, 0)' );
+				transformElement( vbackground, 'translate3d(0, ' + ( v * overviewSlideHeight ) + 'px, 0)' );
 			} );
 		} );
 
@@ -1864,19 +1870,10 @@
 	 */
 	function updateOverview() {
 
-		var margin = 70;
-		var slideWidth = config.width + margin,
-			slideHeight = config.height + margin;
-
-		// Reverse in RTL mode
-		if( config.rtl ) {
-			slideWidth = -slideWidth;
-		}
-
 		transformSlides( {
 			overview: [
-				'translateX('+ ( -indexh * slideWidth ) +'px)',
-				'translateY('+ ( -indexv * slideHeight ) +'px)',
+				'translateX('+ ( -indexh * overviewSlideWidth ) +'px)',
+				'translateY('+ ( -indexv * overviewSlideHeight ) +'px)',
 				'translateZ('+ ( window.innerWidth < 400 ? -1000 : -2500 ) +'px)'
 			].join( ' ' )
 		} );