From e29c706533c227682cfde1ac0b187e90738b9bbc Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 27 Jan 2015 09:21:49 +0100 Subject: [PATCH] further overview refactoring --- css/reveal.css | 10 ++-- css/reveal.scss | 7 +-- js/reveal.js | 123 +++++++++++++++++++++++++++--------------------- 3 files changed, 78 insertions(+), 62 deletions(-) diff --git a/css/reveal.css b/css/reveal.css index b198486..69b7cf9 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -645,8 +645,8 @@ body { outline-offset: 10px; } .reveal.overview .slides section, .reveal.overview-deactivating .slides section { - -webkit-transition: none !important; - transition: none !important; } + -webkit-transition: none; + transition: none; } .reveal.overview .slides section .fragment { opacity: 1; } @@ -677,10 +677,10 @@ body { visibility: visible; } .reveal.overview .backgrounds .slide-background, .reveal.overview-deactivating .backgrounds .slide-background { - -webkit-transition: none !important; - transition: none !important; } + -webkit-transition: none; + transition: none; } -.reveal.overview-animated .slides { +.reveal.overview-animated .slides, .reveal.overview-animated .slides section { -webkit-transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; } diff --git a/css/reveal.scss b/css/reveal.scss index 02587fb..b3f3bdc 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -759,7 +759,7 @@ body { } .reveal.overview .slides section, .reveal.overview-deactivating .slides section { - transition: none !important; + transition: none; } .reveal.overview .slides section .fragment { opacity: 1; @@ -793,10 +793,11 @@ body { } .reveal.overview .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; } diff --git a/js/reveal.js b/js/reveal.js index 74fcf5f..ddbe800 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -1636,9 +1636,6 @@ /** * Displays the overview of slides (quick nav) by * scaling down and arranging all slide elements. - * - * Experimental feature, might be dropped if perf - * can't be improved. */ function activateOverview() { @@ -1657,64 +1654,32 @@ // Don't auto-slide while in overview mode cancelAutoSlide(); - var margin = 70; - var slideWidth = config.width + margin, - slideHeight = config.height + margin; - // Move the backgrounds element into the slide container to // that the same scaling is applied dom.slides.appendChild( dom.background ); - var horizontalSlides = dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ), - horizontalBackgrounds = dom.background.childNodes; + // Bind events so that clicking on a slide navigates to it + toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( hslide, h ) { - for( var i = 0, len1 = horizontalSlides.length; i < len1; i++ ) { - 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 ); + hslide.setAttribute( 'data-index-h', h ); if( hslide.classList.contains( 'stack' ) ) { + toArray( hslide.querySelectorAll( 'section' ) ).forEach( function( vslide, v ) { - var verticalSlides = hslide.querySelectorAll( 'section' ), - verticalBackgrounds = hbackground.querySelectorAll( '.slide-background' ); - - 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.setAttribute( 'data-index-h', h ); + vslide.setAttribute( 'data-index-v', v ); vslide.addEventListener( 'click', onOverviewSlideClicked, true ); - } + } ); } else { - - // Navigate to this slide on click hslide.addEventListener( 'click', onOverviewSlideClicked, true ); - } - } + + } ); updateSlidesVisibility(); + layoutOverview(); updateOverview(); 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 slideWidth = config.width + 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 = [ 'translateX('+ ( -indexh * slideWidth ) +'px)', 'translateY('+ ( -indexv * slideHeight ) +'px)', - 'translateZ('+ ( -z ) +'px)' + 'translateZ('+ ( window.innerWidth < 400 ? -1000 : -2500 ) +'px)' ].join( ' ' ); transformSlides(); @@ -1761,10 +1773,6 @@ overview = false; dom.wrapper.classList.remove( 'overview' ); - - // Move the background element back out - dom.wrapper.appendChild( dom.background ); - dom.wrapper.classList.remove( 'overview-animated' ); // Temporarily add a class so that transitions can do different things @@ -1776,6 +1784,9 @@ dom.wrapper.classList.remove( 'overview-deactivating' ); }, 1 ); + // Move the background element back out + dom.wrapper.appendChild( dom.background ); + // Clean up changes made to slides toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ).forEach( function( slide ) { transformElement( slide, '' ); @@ -2145,6 +2156,10 @@ formatEmbeddedContent(); + if( isOverview() ) { + layoutOverview(); + } + } /** @@ -2326,11 +2341,11 @@ // The number of steps away from the present slide that will // be visible - var viewDistance = isOverview() ? 7 : config.viewDistance; + var viewDistance = isOverview() ? 10 : config.viewDistance; // Limit view distance on weaker devices if( isMobileDevice ) { - viewDistance = isOverview() ? 7 : 2; + viewDistance = isOverview() ? 6 : 2; } // Limit view distance on weaker devices