rough support for vertical centering #70

css/reveal.css

@@ -48,7 +48,6 @@ html,
 body {
 	width: 100%;
 	height: 100%;
-	min-height: 600px;
 	overflow: hidden;
 }
 
@@ -164,11 +163,6 @@ body {
  * DEFAULT ELEMENT STYLES
  *********************************************/
 
-.reveal .slides section {
-	line-height: 1.2em;
-	font-weight: normal;
-}
-
 .reveal img {
 	/* preserve aspect ratio and scale image so it's bound within the section */
 	max-width: 100%;
@@ -495,14 +489,20 @@ body {
  * SLIDES
  *********************************************/
 
+.reveal {
+	width: 100%;
+	height: 100%;
+	min-height: 600px;
+	position: relative;
+}
+
 .reveal .slides {
 	position: absolute;
 	max-width: 900px;
+	min-height: 600px;
 	width: 80%;
-	height: 60%;
 	left: 50%;
 	top: 50%;
-	margin-top: -320px;
 	padding: 20px 0px;
 	overflow: visible;
 	z-index: 1;
@@ -520,41 +520,60 @@ body {
 	    -ms-perspective: 600px;
 	        perspective: 600px;
 
-	-webkit-perspective-origin: 0% 25%;
+	-webkit-perspective-origin: 0% 0%;
-	   -moz-perspective-origin: 0% 25%;
+	   -moz-perspective-origin: 0% 0%;
-	    -ms-perspective-origin: 0% 25%;
+	    -ms-perspective-origin: 0% 0%;
-	        perspective-origin: 0% 25%;
+	        perspective-origin: 0% 0%;
 }
 
 .reveal .slides>section,
 .reveal .slides>section>section {
-	display: none;
+	visibility: hidden;
 	position: absolute;
 	width: 100%;
-	min-height: 600px;
 
 	z-index: 10;
+	line-height: 1.2em;
+	font-weight: normal;
 
 	-webkit-transform-style: preserve-3d;
 	   -moz-transform-style: preserve-3d;
 	    -ms-transform-style: preserve-3d;
 	        transform-style: preserve-3d;
 
-	-webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+	-webkit-transition: -webkit-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
-	   -moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+	                    visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
-	    -ms-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+	                    opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-	     -o-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+	   -moz-transition: -moz-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
-	        transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+	                    visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+	                    opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+	    -ms-transition: -ms-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+	                    visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+	                    opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+	     -o-transition: -o-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+	                    visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+	                    opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+	        transition: transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+	                    visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+	                    opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 }
 
-.reveal .slides>section.present {
+.reveal .slides>section.present,
-	display: block;
+.reveal .slides>section>section.present {
+	visibility: visible;
 	z-index: 11;
 	opacity: 1;
 }
 
 .reveal .slides>section {
 	margin-left: -50%;
+	margin-top: -50%;
+}
+
+.reveal.center,
+.reveal.center .slides {
+	padding: 0;
+	min-height: auto;
 }
 
 
@@ -1113,6 +1132,14 @@ body {
 	        transform: none;
 }
 
+.no-transition {
+	-webkit-transition: none;
+	   -moz-transition: none;
+	    -ms-transition: none;
+	     -o-transition: none;
+	        transition: none;
+}
+
 
 /*********************************************
  * BACKGROUND STATES

js/reveal.js

@@ -29,6 +29,8 @@ var Reveal = (function(){
 			// Enable the slide overview mode
 			overview: true,
 
+			center: false,
+
 			// Loop the presentation
 			loop: false,
 
@@ -264,6 +266,10 @@ var Reveal = (function(){
 		// Updates the presentation to match the current configuration values
 		configure();
 
+		// Force an initial layout, will thereafter be invoked as the window
+		// is resized
+		layout();
+
 		// Read the initial hash
 		readURL();
 
@@ -301,6 +307,10 @@ var Reveal = (function(){
 			dom.wrapper.classList.add( config.transition );
 		}
 
+		if( config.center ) {
+			dom.wrapper.classList.add( 'center' );
+		}
+
 		if( config.mouseWheel ) {
 			document.addEventListener( 'DOMMouseScroll', onDocumentMouseScroll, false ); // FF
 			document.addEventListener( 'mousewheel', onDocumentMouseScroll, false );
@@ -332,6 +342,7 @@ var Reveal = (function(){
 		document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 		document.addEventListener( 'touchend', onDocumentTouchEnd, false );
 		window.addEventListener( 'hashchange', onWindowHashChange, false );
+		window.addEventListener( 'resize', onWindowResize, false );
 
 		if( config.keyboard ) {
 			document.addEventListener( 'keydown', onDocumentKeyDown, false );
@@ -358,6 +369,7 @@ var Reveal = (function(){
 		document.removeEventListener( 'touchmove', onDocumentTouchMove, false );
 		document.removeEventListener( 'touchend', onDocumentTouchEnd, false );
 		window.removeEventListener( 'hashchange', onWindowHashChange, false );
+		window.removeEventListener( 'resize', onWindowResize, false );
 
 		if ( config.progress && dom.progress ) {
 			dom.progress.removeEventListener( 'click', preventAndForward( onProgressClick ), false );
@@ -448,6 +460,33 @@ var Reveal = (function(){
 		}
 	}
 
+	/**
+	 * Applies JavaScript-controlled layout rules to the
+	 * presentation.
+	 */
+	function layout() {
+		if( config.center ) {
+
+			// Select all slides, vertical and horizontal
+			var slides = Array.prototype.slice.call( document.querySelectorAll( '.reveal .slides section' ) );
+
+			// Determine the minimum top offset for slides
+			var minTop = -dom.wrapper.offsetHeight / 2;
+
+			for( var i = 0, len = slides.length; i < len; i++ ) {
+				var slide = slides[ i ];
+
+				if( slide.classList.contains( 'stack' ) ) {
+					slide.style.marginTop = 0;
+				}
+				else {
+					slide.style.marginTop = Math.max( - ( slide.offsetHeight / 2 ) - 20, minTop ) + 'px';
+				}
+			}
+
+		}
+	}
+
 	/**
 	 * Displays the overview of slides (quick nav) by
 	 * scaling down and arranging all slide elements.
@@ -643,6 +682,8 @@ var Reveal = (function(){
 		indexh = updateSlides( HORIZONTAL_SLIDES_SELECTOR, h === undefined ? indexh : h );
 		indexv = updateSlides( VERTICAL_SLIDES_SELECTOR, v === undefined ? indexv : v );
 
+		layout();
+
 		// Apply the new state
 		stateLoop: for( var i = 0, len = state.length; i < len; i++ ) {
 			// Check if this state existed on the previous slide. If it
@@ -1284,13 +1325,18 @@ var Reveal = (function(){
 
 	/**
 	 * Handler for the window level 'hashchange' event.
-	 *
-	 * @param {Object} event
 	 */
 	function onWindowHashChange( event ) {
 		readURL();
 	}
 
+	/**
+	 * Handler for the window level 'resize' event.
+	 */
+	function onWindowResize( event ) {
+		layout();
+	}
+
 	/**
 	 * Invoked when a slide is and we're in the overview.
 	 */