xobs
/
fa20-bt
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

cleaner approach to applying transforms to slides container

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

51
js/reveal.js
View File

@ -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;