rough support for vertical centering #70
This commit is contained in:
parent
f51067b00e
commit
691099c6a2
@ -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
|
||||||
|
50
js/reveal.js
50
js/reveal.js
@ -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.
|
||||||
*/
|
*/
|
||||||
|
Loading…
Reference in New Issue
Block a user