rough support for vertical centering #70

This commit is contained in:
Hakim El Hattab 2012-11-10 09:41:26 -05:00
parent f51067b00e
commit 691099c6a2
2 changed files with 96 additions and 23 deletions

View file

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

View file

@ -29,6 +29,8 @@ var Reveal = (function(){
// Enable the slide overview mode // Enable the slide overview mode
overview: true, overview: true,
center: false,
// Loop the presentation // Loop the presentation
loop: false, loop: false,
@ -264,6 +266,10 @@ var Reveal = (function(){
// Updates the presentation to match the current configuration values // Updates the presentation to match the current configuration values
configure(); configure();
// Force an initial layout, will thereafter be invoked as the window
// is resized
layout();
// Read the initial hash // Read the initial hash
readURL(); readURL();
@ -301,6 +307,10 @@ var Reveal = (function(){
dom.wrapper.classList.add( config.transition ); dom.wrapper.classList.add( config.transition );
} }
if( config.center ) {
dom.wrapper.classList.add( 'center' );
}
if( config.mouseWheel ) { if( config.mouseWheel ) {
document.addEventListener( 'DOMMouseScroll', onDocumentMouseScroll, false ); // FF document.addEventListener( 'DOMMouseScroll', onDocumentMouseScroll, false ); // FF
document.addEventListener( 'mousewheel', onDocumentMouseScroll, false ); document.addEventListener( 'mousewheel', onDocumentMouseScroll, false );
@ -332,6 +342,7 @@ var Reveal = (function(){
document.addEventListener( 'touchmove', onDocumentTouchMove, false ); document.addEventListener( 'touchmove', onDocumentTouchMove, false );
document.addEventListener( 'touchend', onDocumentTouchEnd, false ); document.addEventListener( 'touchend', onDocumentTouchEnd, false );
window.addEventListener( 'hashchange', onWindowHashChange, false ); window.addEventListener( 'hashchange', onWindowHashChange, false );
window.addEventListener( 'resize', onWindowResize, false );
if( config.keyboard ) { if( config.keyboard ) {
document.addEventListener( 'keydown', onDocumentKeyDown, false ); document.addEventListener( 'keydown', onDocumentKeyDown, false );
@ -358,6 +369,7 @@ var Reveal = (function(){
document.removeEventListener( 'touchmove', onDocumentTouchMove, false ); document.removeEventListener( 'touchmove', onDocumentTouchMove, false );
document.removeEventListener( 'touchend', onDocumentTouchEnd, false ); document.removeEventListener( 'touchend', onDocumentTouchEnd, false );
window.removeEventListener( 'hashchange', onWindowHashChange, false ); window.removeEventListener( 'hashchange', onWindowHashChange, false );
window.removeEventListener( 'resize', onWindowResize, false );
if ( config.progress && dom.progress ) { if ( config.progress && dom.progress ) {
dom.progress.removeEventListener( 'click', preventAndForward( onProgressClick ), false ); 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 * Displays the overview of slides (quick nav) by
* scaling down and arranging all slide elements. * scaling down and arranging all slide elements.
@ -643,6 +682,8 @@ var Reveal = (function(){
indexh = updateSlides( HORIZONTAL_SLIDES_SELECTOR, h === undefined ? indexh : h ); indexh = updateSlides( HORIZONTAL_SLIDES_SELECTOR, h === undefined ? indexh : h );
indexv = updateSlides( VERTICAL_SLIDES_SELECTOR, v === undefined ? indexv : v ); indexv = updateSlides( VERTICAL_SLIDES_SELECTOR, v === undefined ? indexv : v );
layout();
// Apply the new state // Apply the new state
stateLoop: for( var i = 0, len = state.length; i < len; i++ ) { stateLoop: for( var i = 0, len = state.length; i < len; i++ ) {
// Check if this state existed on the previous slide. If it // 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. * Handler for the window level 'hashchange' event.
*
* @param {Object} event
*/ */
function onWindowHashChange( event ) { function onWindowHashChange( event ) {
readURL(); readURL();
} }
/**
* Handler for the window level 'resize' event.
*/
function onWindowResize( event ) {
layout();
}
/** /**
* Invoked when a slide is and we're in the overview. * Invoked when a slide is and we're in the overview.
*/ */