From 18e29a898af3fb2d412320ab0c784dfc46bf2a06 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab <hakim.elhattab@gmail.com>
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;
--
GitLab