dirk
/
why-cant-we-deploy-today
1
0
Fork 0
Code Releases Activity

background images now work in overview mode #1088

This commit is contained in:
Hakim El Hattab 2015-01-16 16:12:54 +01:00
parent 5fb81b1b3c
commit b71705c76f
3 changed files with 40 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
css/reveal.css
View File

@ -669,6 +669,14 @@ body {
background: none;
overflow: visible; }
.reveal.overview .backgrounds .slide-background {
opacity: 1;
visibility: visible; }
.reveal.overview .backgrounds .slide-background, .reveal.overview-deactivating .backgrounds .slide-background {
-webkit-transition: none !important;
transition: none !important; }
/*********************************************
* PAUSED MODE
*********************************************/

10
css/reveal.scss
View File

@ -786,6 +786,16 @@ body {
}
.reveal.overview .backgrounds .slide-background {
opacity: 1;
visibility: visible;
}
.reveal.overview .backgrounds .slide-background,
.reveal.overview-deactivating .backgrounds .slide-background {
transition: none !important;
}
/*********************************************
* PAUSED MODE
*********************************************/

27
js/reveal.js
View File

@ -1642,31 +1642,41 @@
dom.wrapper.classList.add( 'overview' );
dom.wrapper.classList.remove( 'overview-deactivating' );
var horizontalSlides = dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR );
// Move the backgrounds element into the slide container to
// that the same scaling is applied
dom.slides.appendChild( dom.background );
var horizontalSlides = dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ),
horizontalBackgrounds = dom.background.childNodes;
for( var i = 0, len1 = horizontalSlides.length; i < len1; i++ ) {
var hslide = horizontalSlides[i],
hbackground = horizontalBackgrounds[i],
hoffset = config.rtl ? -105 : 105;
hslide.setAttribute( 'data-index-h', i );
// Apply CSS transform
transformElement( hslide, 'translateZ(-'+ depth +'px) translate(' + ( ( i - indexh ) * hoffset ) + '%, 0%)' );
transformElement( hbackground, 'translateZ(-'+ depth +'px) translate(' + ( ( i - indexh ) * hoffset ) + '%, 0%)' );
if( hslide.classList.contains( 'stack' ) ) {
var verticalSlides = hslide.querySelectorAll( 'section' );
var verticalSlides = hslide.querySelectorAll( 'section' ),
verticalBackgrounds = hbackground.querySelectorAll( '.slide-background' );
for( var j = 0, len2 = verticalSlides.length; j < len2; j++ ) {
var verticalIndex = i === indexh ? indexv : getPreviousVerticalIndex( hslide );
var vslide = verticalSlides[j];
var vslide = verticalSlides[j],
vbackground = verticalBackgrounds[j];
vslide.setAttribute( 'data-index-h', i );
vslide.setAttribute( 'data-index-v', j );
// Apply CSS transform
transformElement( vslide, 'translate(0%, ' + ( ( j - verticalIndex ) * 105 ) + '%)' );
transformElement( vbackground, 'translate(0%, ' + ( ( j - verticalIndex ) * 105 ) + '%)' );
// Navigate to this slide on click
vslide.addEventListener( 'click', onOverviewSlideClicked, true );
@ -1709,6 +1719,9 @@
dom.wrapper.classList.remove( 'overview' );
// Move the background element back out
dom.wrapper.appendChild( dom.background );
// Temporarily add a class so that transitions can do different things
// depending on whether they are exiting/entering overview, or just
// moving from slide to slide
@ -1718,14 +1731,18 @@
dom.wrapper.classList.remove( 'overview-deactivating' );
}, 1 );
// Select all slides
// Clean up changes made to slides
toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ).forEach( function( slide ) {
// Resets all transforms to use the external styles
transformElement( slide, '' );
slide.removeEventListener( 'click', onOverviewSlideClicked, true );
} );
// Clean up changes made to backgrounds
toArray( dom.background.querySelectorAll( '.slide-background' ) ).forEach( function( background ) {
transformElement( background, '' );
} );
slide( indexh, indexv );
cueAutoSlide();