phyks/reveal-js-base-theme
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add util method for applying css transforms

Browse Source
This commit is contained in:
Hakim El Hattab 2013-08-13 09:27:19 -04:00
parent b17e285164
commit 6c0dc635a1
2 changed files with 25 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
js/reveal.js
View File

@ -664,6 +664,19 @@ var Reveal = (function(){
} }
/**
* Applies a CSS transform to the target element.
*/
function transformElement( element, transform ) {
element.style.WebkitTransform = transform;
element.style.MozTransform = transform;
element.style.msTransform = transform;
element.style.OTransform = transform;
element.style.transform = transform;
}
/** /**
* Retrieves the height of the given element by looking * Retrieves the height of the given element by looking
* at the position and height of its immediate children. * at the position and height of its immediate children.
@ -949,13 +962,7 @@ var Reveal = (function(){
} }
// Apply scale transform as a fallback // Apply scale transform as a fallback
else { else {
var transform = 'translate(-50%, -50%) scale('+ scale +') translate(50%, 50%)'; transformElement( dom.slides, 'translate(-50%, -50%) scale('+ scale +') translate(50%, 50%)' );
dom.slides.style.WebkitTransform = transform;
dom.slides.style.MozTransform = transform;
dom.slides.style.msTransform = transform;
dom.slides.style.OTransform = transform;
dom.slides.style.transform = transform;
} }
// Select all slides, vertical and horizontal // Select all slides, vertical and horizontal
@ -1062,15 +1069,12 @@ var Reveal = (function(){
for( var i = 0, len1 = horizontalSlides.length; i < len1; i++ ) { for( var i = 0, len1 = horizontalSlides.length; i < len1; i++ ) {
var hslide = horizontalSlides[i], var hslide = horizontalSlides[i],
hoffset = config.rtl ? -105 : 105, hoffset = config.rtl ? -105 : 105;
htransform = 'translateZ(-'+ depth +'px) translate(' + ( ( i - indexh ) * hoffset ) + '%, 0%)';
hslide.setAttribute( 'data-index-h', i ); hslide.setAttribute( 'data-index-h', i );
hslide.style.WebkitTransform = htransform;
hslide.style.MozTransform = htransform; // Apply CSS transform
hslide.style.msTransform = htransform; transformElement( hslide, 'translateZ(-'+ depth +'px) translate(' + ( ( i - indexh ) * hoffset ) + '%, 0%)' );
hslide.style.OTransform = htransform;
hslide.style.transform = htransform;
if( hslide.classList.contains( 'stack' ) ) { if( hslide.classList.contains( 'stack' ) ) {
@ -1079,16 +1083,13 @@ var Reveal = (function(){
for( var j = 0, len2 = verticalSlides.length; j < len2; j++ ) { for( var j = 0, len2 = verticalSlides.length; j < len2; j++ ) {
var verticalIndex = i === indexh ? indexv : getPreviousVerticalIndex( hslide ); var verticalIndex = i === indexh ? indexv : getPreviousVerticalIndex( hslide );
var vslide = verticalSlides[j], var vslide = verticalSlides[j];
vtransform = 'translate(0%, ' + ( ( j - verticalIndex ) * 105 ) + '%)';
vslide.setAttribute( 'data-index-h', i ); vslide.setAttribute( 'data-index-h', i );
vslide.setAttribute( 'data-index-v', j ); vslide.setAttribute( 'data-index-v', j );
vslide.style.WebkitTransform = vtransform;
vslide.style.MozTransform = vtransform; // Apply CSS transform
vslide.style.msTransform = vtransform; transformElement( vslide, 'translate(0%, ' + ( ( j - verticalIndex ) * 105 ) + '%)' );
vslide.style.OTransform = vtransform;
vslide.style.transform = vtransform;
// Navigate to this slide on click // Navigate to this slide on click
vslide.addEventListener( 'click', onOverviewSlideClicked, true ); vslide.addEventListener( 'click', onOverviewSlideClicked, true );
@ -1154,11 +1155,7 @@ var Reveal = (function(){
element.style.display = ''; element.style.display = '';
// Resets all transforms to use the external styles // Resets all transforms to use the external styles
element.style.WebkitTransform = ''; transformElement( element, '' );
element.style.MozTransform = '';
element.style.msTransform = '';
element.style.OTransform = '';
element.style.transform = '';
element.removeEventListener( 'click', onOverviewSlideClicked, true ); element.removeEventListener( 'click', onOverviewSlideClicked, true );
} }

4
js/reveal.min.js vendored
View File

File diff suppressed because one or more lines are too long