blallo/talk-hm-0x15
1
0
Fork 1
Code Issues Pull requests Releases Wiki Activity

cleaner approach to applying transforms to slides container

Browse source
This commit is contained in:
Hakim El Hattab 2015-01-29 11:59:47 +01:00
parent 64e72781b4
commit 18e29a898a
1 changed files with 33 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
js/reveal.js
View file

@ -168,9 +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 transform that is currently applied to the slides container // CSS transform that is currently applied to the slides container,
slidesTransform = '', // split into two groups
layoutTransform = '', slidesTransform = { layout: '', overview: '' },
// Cached references to DOM elements // Cached references to DOM elements
dom = {}, dom = {},
@ -301,7 +301,7 @@
features.touch = !!( 'ontouchstart' in window ); features.touch = !!( 'ontouchstart' in window );
// Transitions in the overview are disabled in desktop and // 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 ); features.overviewTransitions = !/Version\/[\d\.]+.*Safari/.test( navigator.userAgent );
isMobileDevice = /(iphone|ipod|ipad|android)/gi.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.top = '';
dom.slides.style.bottom = ''; dom.slides.style.bottom = '';
dom.slides.style.right = ''; dom.slides.style.right = '';
layoutTransform = ''; transformSlides( { layout: '' } );
} }
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;
transformSlides( { layout: '' } );
} }
// Apply scale transform as a fallback // Apply scale transform as a fallback
else { else {
@ -1494,12 +1511,10 @@
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';
layoutTransform = 'translate(-50%, -50%) scale('+ scale +')'; transformSlides( { layout: '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 ) );
@ -1746,13 +1761,13 @@
slideWidth = -slideWidth; slideWidth = -slideWidth;
} }
slidesTransform = [ transformSlides( {
overview: [
'translateX('+ ( -indexh * slideWidth ) +'px)', 'translateX('+ ( -indexh * slideWidth ) +'px)',
'translateY('+ ( -indexv * slideHeight ) +'px)', 'translateY('+ ( -indexv * slideHeight ) +'px)',
'translateZ('+ ( window.innerWidth < 400 ? -1000 : -2500 ) +'px)' 'translateZ('+ ( window.innerWidth < 400 ? -1000 : -2500 ) +'px)'
].join( ' ' ); ].join( ' ' )
} );
transformSlides();
} }
@ -1765,7 +1780,7 @@
// Only proceed if enabled in config // Only proceed if enabled in config
if( config.overview ) { if( config.overview ) {
slidesTransform = ''; transformSlides( { overview: '' } );
overview = false; overview = false;