From 18e29a898af3fb2d412320ab0c784dfc46bf2a06 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 29 Jan 2015 11:59:47 +0100 Subject: [PATCH] cleaner approach to applying transforms to slides container --- js/reveal.js | 51 +++++++++++++++++++++++++++++++++------------------ 1 file changed, 33 insertions(+), 18 deletions(-) diff --git a/js/reveal.js b/js/reveal.js index 9ed7b7e..61afab4 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -168,9 +168,9 @@ // The current scale of the presentation (see width/height config) scale = 1, - // The transform that is currently applied to the slides container - slidesTransform = '', - layoutTransform = '', + // CSS transform that is currently applied to the slides container, + // split into two groups + slidesTransform = { layout: '', overview: '' }, // Cached references to DOM elements dom = {}, @@ -301,7 +301,7 @@ features.touch = !!( 'ontouchstart' in window ); // Transitions in the overview are disabled in desktop and - // mobile Safari since they lag terribly + // mobile Safari due to lag features.overviewTransitions = !/Version\/[\d\.]+.*Safari/.test( navigator.userAgent ); isMobileDevice = /(iphone|ipod|ipad|android)/gi.test( navigator.userAgent ); @@ -1066,9 +1066,25 @@ } - function transformSlides() { + /** + * Applies CSS transforms to the slides container. The container + * is transformed from two separate sources: layout and the overview + * mode. + */ + function transformSlides( transforms ) { + + // Pick up new transforms from arguments + if( transforms.layout ) slidesTransform.layout = transforms.layout; + if( transforms.overview ) slidesTransform.overview = transforms.overview; + + // Apply the transforms to the slides container + if( slidesTransform.layout ) { + transformElement( dom.slides, slidesTransform.layout + ' ' + slidesTransform.overview ); + } + else { + transformElement( dom.slides, slidesTransform.overview ); + } - transformElement( dom.slides, layoutTransform ? layoutTransform + ' ' + slidesTransform : slidesTransform ); } @@ -1481,12 +1497,13 @@ dom.slides.style.top = ''; dom.slides.style.bottom = ''; dom.slides.style.right = ''; - layoutTransform = ''; + transformSlides( { layout: '' } ); } else { // Prefer zooming in desktop Chrome so that content remains crisp if( !isMobileDevice && /chrome/i.test( navigator.userAgent ) && typeof dom.slides.style.zoom !== 'undefined' ) { dom.slides.style.zoom = scale; + transformSlides( { layout: '' } ); } // Apply scale transform as a fallback else { @@ -1494,12 +1511,10 @@ dom.slides.style.top = '50%'; dom.slides.style.bottom = 'auto'; dom.slides.style.right = 'auto'; - layoutTransform = 'translate(-50%, -50%) scale('+ scale +')'; + transformSlides( { layout: 'translate(-50%, -50%) scale('+ scale +')' } ); } } - transformSlides(); - // Select all slides, vertical and horizontal var slides = toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ); @@ -1746,13 +1761,13 @@ slideWidth = -slideWidth; } - slidesTransform = [ - 'translateX('+ ( -indexh * slideWidth ) +'px)', - 'translateY('+ ( -indexv * slideHeight ) +'px)', - 'translateZ('+ ( window.innerWidth < 400 ? -1000 : -2500 ) +'px)' - ].join( ' ' ); - - transformSlides(); + transformSlides( { + overview: [ + 'translateX('+ ( -indexh * slideWidth ) +'px)', + 'translateY('+ ( -indexv * slideHeight ) +'px)', + 'translateZ('+ ( window.innerWidth < 400 ? -1000 : -2500 ) +'px)' + ].join( ' ' ) + } ); } @@ -1765,7 +1780,7 @@ // Only proceed if enabled in config if( config.overview ) { - slidesTransform = ''; + transformSlides( { overview: '' } ); overview = false;