refactoring and optimization of overview mode

This commit is contained in:
Hakim El Hattab 2015-01-26 20:38:21 +01:00
parent 44548ba357
commit 11293d7c94
3 changed files with 87 additions and 43 deletions

View file

@ -639,9 +639,10 @@ body {
opacity: 1 !important; opacity: 1 !important;
visibility: visible !important; visibility: visible !important;
cursor: pointer; cursor: pointer;
background: rgba(0, 0, 0, 0.1);
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; } box-sizing: border-box;
outline: 10px solid rgba(150, 150, 150, 0.1);
outline-offset: 10px; }
.reveal.overview .slides section, .reveal.overview-deactivating .slides section { .reveal.overview .slides section, .reveal.overview-deactivating .slides section {
-webkit-transition: none !important; -webkit-transition: none !important;
@ -657,16 +658,14 @@ body {
opacity: 1; opacity: 1;
cursor: pointer; } cursor: pointer; }
.reveal.overview .slides section:hover { .reveal.overview .slides section:hover, .reveal.overview .slides section.present {
background: rgba(0, 0, 0, 0.3); } outline: 10px solid rgba(150, 150, 150, 0.5); }
.reveal.overview .slides section.present {
background: rgba(0, 0, 0, 0.3); }
.reveal.overview .slides > section.stack { .reveal.overview .slides > section.stack {
padding: 0; padding: 0;
top: 0 !important; top: 0 !important;
background: none; background: none;
outline: none;
overflow: visible; } overflow: visible; }
.reveal.overview .backgrounds { .reveal.overview .backgrounds {
@ -681,6 +680,10 @@ body {
-webkit-transition: none !important; -webkit-transition: none !important;
transition: none !important; } transition: none !important; }
.reveal.overview-animated .slides {
-webkit-transition: -webkit-transform 0.4s ease;
transition: transform 0.4s ease; }
/********************************************* /*********************************************
* PAUSED MODE * PAUSED MODE
*********************************************/ *********************************************/

View file

@ -753,8 +753,9 @@ body {
opacity: 1 !important; opacity: 1 !important;
visibility: visible !important; visibility: visible !important;
cursor: pointer; cursor: pointer;
background: rgba(0,0,0,0.1);
box-sizing: border-box; box-sizing: border-box;
outline: 10px solid rgba(150,150,150,0.1);
outline-offset: 10px;
} }
.reveal.overview .slides section, .reveal.overview .slides section,
.reveal.overview-deactivating .slides section { .reveal.overview-deactivating .slides section {
@ -771,16 +772,15 @@ body {
opacity: 1; opacity: 1;
cursor: pointer; cursor: pointer;
} }
.reveal.overview .slides section:hover { .reveal.overview .slides section:hover,
background: rgba(0,0,0,0.3);
}
.reveal.overview .slides section.present { .reveal.overview .slides section.present {
background: rgba(0,0,0,0.3); outline: 10px solid rgba(150,150,150,0.5);
} }
.reveal.overview .slides>section.stack { .reveal.overview .slides>section.stack {
padding: 0; padding: 0;
top: 0 !important; top: 0 !important;
background: none; background: none;
outline: none;
overflow: visible; overflow: visible;
} }
@ -796,6 +796,10 @@ body {
transition: none !important; transition: none !important;
} }
.reveal.overview-animated .slides {
transition: transform 0.4s ease;
}
/********************************************* /*********************************************
* PAUSED MODE * PAUSED MODE

View file

@ -147,6 +147,9 @@
// Flags if reveal.js is loaded (has dispatched the 'ready' event) // Flags if reveal.js is loaded (has dispatched the 'ready' event)
loaded = false, loaded = false,
// Flags if the overview mode is currently active
overview = false,
// The horizontal and vertical index of the currently active slide // The horizontal and vertical index of the currently active slide
indexh, indexh,
indexv, indexv,
@ -165,8 +168,9 @@
// The current scale of the presentation (see width/height config) // The current scale of the presentation (see width/height config)
scale = 1, scale = 1,
// The current z position of the presentation container // The transform that is currently applied to the slides container
z = 0, slidesTransform = '',
layoutTransform = '',
// Cached references to DOM elements // Cached references to DOM elements
dom = {}, dom = {},
@ -1058,6 +1062,12 @@
} }
function transformSlides() {
transformElement( dom.slides, layoutTransform ? layoutTransform + ' ' + slidesTransform : slidesTransform );
}
/** /**
* Injects the given CSS styles into the DOM. * Injects the given CSS styles into the DOM.
*/ */
@ -1446,7 +1456,6 @@
var size = getComputedSlideSize(); var size = getComputedSlideSize();
var slidePadding = 20; // TODO Dig this out of DOM var slidePadding = 20; // TODO Dig this out of DOM
var zTransform = z !== 0 ? 'translateZ(-'+ z +'px)' : '';
// Layout the contents of the slides // Layout the contents of the slides
layoutSlideContents( config.width, config.height, slidePadding ); layoutSlideContents( config.width, config.height, slidePadding );
@ -1468,13 +1477,12 @@
dom.slides.style.top = ''; dom.slides.style.top = '';
dom.slides.style.bottom = ''; dom.slides.style.bottom = '';
dom.slides.style.right = ''; dom.slides.style.right = '';
transformElement( dom.slides, zTransform ); layoutTransform = '';
} }
else { else {
// Prefer zooming in desktop Chrome so that content remains crisp // Prefer zooming in desktop Chrome so that content remains crisp
if( !isMobileDevice && /chrome/i.test( navigator.userAgent ) && typeof dom.slides.style.zoom !== 'undefined' ) { if( !isMobileDevice && /chrome/i.test( navigator.userAgent ) && typeof dom.slides.style.zoom !== 'undefined' ) {
dom.slides.style.zoom = scale; dom.slides.style.zoom = scale;
transformElement( dom.slides, zTransform );
} }
// Apply scale transform as a fallback // Apply scale transform as a fallback
else { else {
@ -1482,10 +1490,12 @@
dom.slides.style.top = '50%'; dom.slides.style.top = '50%';
dom.slides.style.bottom = 'auto'; dom.slides.style.bottom = 'auto';
dom.slides.style.right = 'auto'; dom.slides.style.right = 'auto';
transformElement( dom.slides, 'translate(-50%, -50%) scale('+ scale +') ' + zTransform ); layoutTransform = 'translate(-50%, -50%) scale('+ scale +')';
} }
} }
transformSlides();
// Select all slides, vertical and horizontal // Select all slides, vertical and horizontal
var slides = toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ); var slides = toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) );
@ -1633,20 +1643,23 @@
function activateOverview() { function activateOverview() {
// Only proceed if enabled in config // Only proceed if enabled in config
if( config.overview ) { if( config.overview && !isOverview() ) {
overview = true;
dom.wrapper.classList.add( 'overview' );
dom.wrapper.classList.remove( 'overview-deactivating' );
setTimeout( function() {
dom.wrapper.classList.add( 'overview-animated' );
}, 1 );
// Don't auto-slide while in overview mode // Don't auto-slide while in overview mode
cancelAutoSlide(); cancelAutoSlide();
var wasActive = dom.wrapper.classList.contains( 'overview' ); var margin = 70;
var slideWidth = config.width + margin,
// Set the depth of the presentation. This determinse how far we slideHeight = config.height + margin;
// zoom out and varies based on display size. It gets applied at
// the layout step.
z = window.innerWidth < 400 ? 1000 : 2500;
dom.wrapper.classList.add( 'overview' );
dom.wrapper.classList.remove( 'overview-deactivating' );
// Move the backgrounds element into the slide container to // Move the backgrounds element into the slide container to
// that the same scaling is applied // that the same scaling is applied
@ -1658,9 +1671,9 @@
for( var i = 0, len1 = horizontalSlides.length; i < len1; i++ ) { for( var i = 0, len1 = horizontalSlides.length; i < len1; i++ ) {
var hslide = horizontalSlides[i], var hslide = horizontalSlides[i],
hbackground = horizontalBackgrounds[i], hbackground = horizontalBackgrounds[i],
hoffset = config.rtl ? -105 : 105; hoffset = config.rtl ? -slideWidth : slideWidth;
var htransform = 'translate(' + ( ( i - indexh ) * hoffset ) + '%, 0%)'; var htransform = 'translateX(' + ( i * hoffset ) + 'px)';
hslide.setAttribute( 'data-index-h', i ); hslide.setAttribute( 'data-index-h', i );
@ -1679,7 +1692,7 @@
var vslide = verticalSlides[j], var vslide = verticalSlides[j],
vbackground = verticalBackgrounds[j]; vbackground = verticalBackgrounds[j];
var vtransform = 'translate(0%, ' + ( ( j - verticalIndex ) * 105 ) + '%)'; var vtransform = 'translateY(' + ( j * slideHeight ) + 'px)';
vslide.setAttribute( 'data-index-h', i ); vslide.setAttribute( 'data-index-h', i );
vslide.setAttribute( 'data-index-v', j ); vslide.setAttribute( 'data-index-v', j );
@ -1702,22 +1715,38 @@
} }
updateSlidesVisibility(); updateSlidesVisibility();
updateOverview();
layout(); layout();
if( !wasActive ) { // Notify observers of the overview showing
// Notify observers of the overview showing dispatchEvent( 'overviewshown', {
dispatchEvent( 'overviewshown', { 'indexh': indexh,
'indexh': indexh, 'indexv': indexv,
'indexv': indexv, 'currentSlide': currentSlide
'currentSlide': currentSlide } );
} );
}
} }
} }
function updateOverview() {
var z = window.innerWidth < 400 ? 1000 : 2500;
var margin = 70;
var slideWidth = config.width + margin,
slideHeight = config.height + margin;
slidesTransform = [
'translateX('+ ( -indexh * slideWidth ) +'px)',
'translateY('+ ( -indexv * slideHeight ) +'px)',
'translateZ('+ ( -z ) +'px)'
].join( ' ' );
transformSlides();
}
/** /**
* Exits the slide overview and enters the currently * Exits the slide overview and enters the currently
* active slide. * active slide.
@ -1727,11 +1756,17 @@
// Only proceed if enabled in config // Only proceed if enabled in config
if( config.overview ) { if( config.overview ) {
slidesTransform = '';
overview = false;
dom.wrapper.classList.remove( 'overview' ); dom.wrapper.classList.remove( 'overview' );
// Move the background element back out // Move the background element back out
dom.wrapper.appendChild( dom.background ); dom.wrapper.appendChild( dom.background );
dom.wrapper.classList.remove( 'overview-animated' );
// Temporarily add a class so that transitions can do different things // Temporarily add a class so that transitions can do different things
// depending on whether they are exiting/entering overview, or just // depending on whether they are exiting/entering overview, or just
// moving from slide to slide // moving from slide to slide
@ -1755,6 +1790,8 @@
slide( indexh, indexv ); slide( indexh, indexv );
layout();
cueAutoSlide(); cueAutoSlide();
// Notify observers of the overview hiding // Notify observers of the overview hiding
@ -1793,7 +1830,7 @@
*/ */
function isOverview() { function isOverview() {
return dom.wrapper.classList.contains( 'overview' ); return overview;
} }
@ -1995,7 +2032,7 @@
// If the overview is active, re-activate it to update positions // If the overview is active, re-activate it to update positions
if( isOverview() ) { if( isOverview() ) {
activateOverview(); updateOverview();
} }
// Find the current horizontal slide and any possible vertical slides // Find the current horizontal slide and any possible vertical slides
@ -2289,11 +2326,11 @@
// The number of steps away from the present slide that will // The number of steps away from the present slide that will
// be visible // be visible
var viewDistance = isOverview() ? 10 : config.viewDistance; var viewDistance = isOverview() ? 7 : config.viewDistance;
// Limit view distance on weaker devices // Limit view distance on weaker devices
if( isMobileDevice ) { if( isMobileDevice ) {
viewDistance = isOverview() ? 6 : 2; viewDistance = isOverview() ? 7 : 2;
} }
// Limit view distance on weaker devices // Limit view distance on weaker devices