forked from campiaperti/infra
background images now work in overview mode #1088
This commit is contained in:
parent
5fb81b1b3c
commit
b71705c76f
3 changed files with 40 additions and 5 deletions
|
@ -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
|
||||
*********************************************/
|
||||
|
|
|
@ -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
27
js/reveal.js
|
@ -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();
|
||||
|
|
Loading…
Reference in a new issue