further overview refactoring

This commit is contained in:
Hakim El Hattab 2015-01-27 09:21:49 +01:00
parent 11293d7c94
commit e29c706533
3 changed files with 78 additions and 62 deletions

View file

@ -645,8 +645,8 @@ body {
outline-offset: 10px; } 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;
transition: none !important; } transition: none; }
.reveal.overview .slides section .fragment { .reveal.overview .slides section .fragment {
opacity: 1; } opacity: 1; }
@ -677,10 +677,10 @@ body {
visibility: visible; } visibility: visible; }
.reveal.overview .backgrounds .slide-background, .reveal.overview-deactivating .backgrounds .slide-background { .reveal.overview .backgrounds .slide-background, .reveal.overview-deactivating .backgrounds .slide-background {
-webkit-transition: none !important; -webkit-transition: none;
transition: none !important; } transition: none; }
.reveal.overview-animated .slides { .reveal.overview-animated .slides, .reveal.overview-animated .slides section {
-webkit-transition: -webkit-transform 0.4s ease; -webkit-transition: -webkit-transform 0.4s ease;
transition: transform 0.4s ease; } transition: transform 0.4s ease; }

View file

@ -759,7 +759,7 @@ body {
} }
.reveal.overview .slides section, .reveal.overview .slides section,
.reveal.overview-deactivating .slides section { .reveal.overview-deactivating .slides section {
transition: none !important; transition: none;
} }
.reveal.overview .slides section .fragment { .reveal.overview .slides section .fragment {
opacity: 1; opacity: 1;
@ -793,10 +793,11 @@ body {
} }
.reveal.overview .backgrounds .slide-background, .reveal.overview .backgrounds .slide-background,
.reveal.overview-deactivating .backgrounds .slide-background { .reveal.overview-deactivating .backgrounds .slide-background {
transition: none !important; transition: none;
} }
.reveal.overview-animated .slides { .reveal.overview-animated .slides,
.reveal.overview-animated .slides section {
transition: transform 0.4s ease; transition: transform 0.4s ease;
} }

View file

@ -1636,9 +1636,6 @@
/** /**
* 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.
*
* Experimental feature, might be dropped if perf
* can't be improved.
*/ */
function activateOverview() { function activateOverview() {
@ -1657,64 +1654,32 @@
// Don't auto-slide while in overview mode // Don't auto-slide while in overview mode
cancelAutoSlide(); cancelAutoSlide();
var margin = 70;
var slideWidth = config.width + margin,
slideHeight = config.height + margin;
// 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
dom.slides.appendChild( dom.background ); dom.slides.appendChild( dom.background );
var horizontalSlides = dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ), // Bind events so that clicking on a slide navigates to it
horizontalBackgrounds = dom.background.childNodes; toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( hslide, h ) {
for( var i = 0, len1 = horizontalSlides.length; i < len1; i++ ) { hslide.setAttribute( 'data-index-h', h );
var hslide = horizontalSlides[i],
hbackground = horizontalBackgrounds[i],
hoffset = config.rtl ? -slideWidth : slideWidth;
var htransform = 'translateX(' + ( i * hoffset ) + 'px)';
hslide.setAttribute( 'data-index-h', i );
// Apply CSS transform
transformElement( hslide, htransform );
transformElement( hbackground, htransform );
if( hslide.classList.contains( 'stack' ) ) { if( hslide.classList.contains( 'stack' ) ) {
toArray( hslide.querySelectorAll( 'section' ) ).forEach( function( vslide, v ) {
var verticalSlides = hslide.querySelectorAll( 'section' ), vslide.setAttribute( 'data-index-h', h );
verticalBackgrounds = hbackground.querySelectorAll( '.slide-background' ); vslide.setAttribute( 'data-index-v', v );
for( var j = 0, len2 = verticalSlides.length; j < len2; j++ ) {
var verticalIndex = i === indexh ? indexv : getPreviousVerticalIndex( hslide );
var vslide = verticalSlides[j],
vbackground = verticalBackgrounds[j];
var vtransform = 'translateY(' + ( j * slideHeight ) + 'px)';
vslide.setAttribute( 'data-index-h', i );
vslide.setAttribute( 'data-index-v', j );
// Apply CSS transform
transformElement( vslide, vtransform );
transformElement( vbackground, vtransform );
// Navigate to this slide on click
vslide.addEventListener( 'click', onOverviewSlideClicked, true ); vslide.addEventListener( 'click', onOverviewSlideClicked, true );
}
} );
} }
else { else {
// Navigate to this slide on click
hslide.addEventListener( 'click', onOverviewSlideClicked, true ); hslide.addEventListener( 'click', onOverviewSlideClicked, true );
}
} } );
}
updateSlidesVisibility(); updateSlidesVisibility();
layoutOverview();
updateOverview(); updateOverview();
layout(); layout();
@ -1730,17 +1695,64 @@
} }
function updateOverview() { /**
* Moves the slides into a grid for display in the
* overview mode.
*/
function layoutOverview() {
var z = window.innerWidth < 400 ? 1000 : 2500;
var margin = 70; var margin = 70;
var slideWidth = config.width + margin, var slideWidth = config.width + margin,
slideHeight = config.height + 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 ) {
transformElement( hslide, 'translateX(' + ( h * slideWidth ) + 'px)' );
if( hslide.classList.contains( 'stack' ) ) {
toArray( hslide.querySelectorAll( 'section' ) ).forEach( function( vslide, v ) {
transformElement( vslide, 'translateY(' + ( v * slideHeight ) + 'px)' );
} );
}
} );
// Layout slide backgrounds
toArray( dom.background.childNodes ).forEach( function( hbackground, h ) {
transformElement( hbackground, 'translateX(' + ( h * slideWidth ) + 'px)' );
toArray( hbackground.querySelectorAll( '.slide-background' ) ).forEach( function( vbackground, v ) {
transformElement( vbackground, 'translateY(' + ( v * slideHeight ) + 'px)' );
} );
} );
}
/**
* Moves the overview viewport to the current slides.
* Called each time the current slide changes.
*/
function updateOverview() {
var margin = 70;
var slideWidth = config.width + margin,
slideHeight = config.height + margin;
// Reverse in RTL mode
if( config.rtl ) {
slideWidth = -slideWidth;
}
slidesTransform = [ slidesTransform = [
'translateX('+ ( -indexh * slideWidth ) +'px)', 'translateX('+ ( -indexh * slideWidth ) +'px)',
'translateY('+ ( -indexv * slideHeight ) +'px)', 'translateY('+ ( -indexv * slideHeight ) +'px)',
'translateZ('+ ( -z ) +'px)' 'translateZ('+ ( window.innerWidth < 400 ? -1000 : -2500 ) +'px)'
].join( ' ' ); ].join( ' ' );
transformSlides(); transformSlides();
@ -1761,10 +1773,6 @@
overview = false; overview = false;
dom.wrapper.classList.remove( 'overview' ); dom.wrapper.classList.remove( 'overview' );
// Move the background element back out
dom.wrapper.appendChild( dom.background );
dom.wrapper.classList.remove( 'overview-animated' ); 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
@ -1776,6 +1784,9 @@
dom.wrapper.classList.remove( 'overview-deactivating' ); dom.wrapper.classList.remove( 'overview-deactivating' );
}, 1 ); }, 1 );
// Move the background element back out
dom.wrapper.appendChild( dom.background );
// Clean up changes made to slides // Clean up changes made to slides
toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ).forEach( function( slide ) { toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ).forEach( function( slide ) {
transformElement( slide, '' ); transformElement( slide, '' );
@ -2145,6 +2156,10 @@
formatEmbeddedContent(); formatEmbeddedContent();
if( isOverview() ) {
layoutOverview();
}
} }
/** /**
@ -2326,11 +2341,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() ? 7 : config.viewDistance; var viewDistance = isOverview() ? 10 : config.viewDistance;
// Limit view distance on weaker devices // Limit view distance on weaker devices
if( isMobileDevice ) { if( isMobileDevice ) {
viewDistance = isOverview() ? 7 : 2; viewDistance = isOverview() ? 6 : 2;
} }
// Limit view distance on weaker devices // Limit view distance on weaker devices