started the new per-slide background implementation (#453)

This commit is contained in:
Hakim El Hattab 2013-06-04 19:42:33 +02:00
parent b67889049a
commit f3f5d7780a
4 changed files with 135 additions and 8 deletions

View File

@ -1255,7 +1255,7 @@ body {
/********************************************* /*********************************************
* BACKGROUND STATES * BACKGROUND STATES [DEPRECATED]
*********************************************/ *********************************************/
.reveal .state-background { .reveal .state-background {
@ -1299,6 +1299,54 @@ body {
} }
/*********************************************
*
*********************************************/
.reveal>.background {
position: absolute;
width: 100%;
height: 100%;
}
.reveal>.background div {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
background-color: rgba( 0, 0, 0, 0 );
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
-webkit-transition: all 800ms ease;
-moz-transition: all 800ms ease;
-ms-transition: all 800ms ease;
-o-transition: all 800ms ease;
transition: all 800ms ease;
}
.reveal>.background div.present {
opacity: 1;
visibility: visible;
}
/* Global transition speed settings */
.reveal[data-transition-speed="fast"] .background div {
-webkit-transition-duration: 400ms;
-moz-transition-duration: 400ms;
-ms-transition-duration: 400ms;
transition-duration: 400ms;
}
.reveal[data-transition-speed="slow"] .background div {
-webkit-transition-duration: 1200ms;
-moz-transition-duration: 1200ms;
-ms-transition-duration: 1200ms;
transition-duration: 1200ms;
}
/********************************************* /*********************************************
* RTL SUPPORT * RTL SUPPORT
*********************************************/ *********************************************/

2
css/reveal.min.css vendored

File diff suppressed because one or more lines are too long

View File

@ -186,6 +186,13 @@ var Reveal = (function(){
dom.wrapper = document.querySelector( '.reveal' ); dom.wrapper = document.querySelector( '.reveal' );
dom.slides = document.querySelector( '.reveal .slides' ); dom.slides = document.querySelector( '.reveal .slides' );
// Background element
if( !document.querySelector( '.reveal .background' ) ) {
dom.background = document.createElement( 'div' );
dom.background.classList.add( 'background' );
dom.wrapper.appendChild( dom.background );
}
// Progress bar // Progress bar
if( !dom.wrapper.querySelector( '.progress' ) ) { if( !dom.wrapper.querySelector( '.progress' ) ) {
var progressElement = document.createElement( 'div' ); var progressElement = document.createElement( 'div' );
@ -205,11 +212,11 @@ var Reveal = (function(){
dom.wrapper.appendChild( controlsElement ); dom.wrapper.appendChild( controlsElement );
} }
// Presentation background element // State background element [DEPRECATED]
if( !dom.wrapper.querySelector( '.state-background' ) ) { if( !dom.wrapper.querySelector( '.state-background' ) ) {
var backgroundElement = document.createElement( 'div' ); var stateBackgroundElement = document.createElement( 'div' );
backgroundElement.classList.add( 'state-background' ); stateBackgroundElement.classList.add( 'state-background' );
dom.wrapper.appendChild( backgroundElement ); dom.wrapper.appendChild( stateBackgroundElement );
} }
// Overlay graphic which is displayed during the paused mode // Overlay graphic which is displayed during the paused mode
@ -237,6 +244,54 @@ var Reveal = (function(){
} }
/**
* Creates the slide background elements and appends them
* to the background container.
*/
function createBackgrounds() {
// Clear prior backgrounds
dom.background.innerHTML = '';
// Helper method for creating a background element for the
// given slide
function _createBackground( slide, container ) {
var background = slide.getAttribute( 'data-background' );
var element = document.createElement( 'div' );
if( background ) {
// Auto-wrap image urls in url(...)
if( /\.(png|jpg|jpeg|gif|bmp|)$/gi.test( background ) ) {
element.style.backgroundImage = 'url('+ background +')';
}
else {
element.style.background = background;
}
}
container.appendChild( element );
return element;
}
// Iterate over all horizontal slides
toArray( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( slideh ) {
var backgroundStack = _createBackground( slideh, dom.background );
// Iterate over all vertical slides
toArray( slideh.querySelectorAll( 'section' ) ).forEach( function( slidev ) {
_createBackground( slidev, backgroundStack );
} );
} );
}
/** /**
* Hides the address bar if we're on a mobile device. * Hides the address bar if we're on a mobile device.
*/ */
@ -1173,6 +1228,7 @@ var Reveal = (function(){
updateControls(); updateControls();
updateProgress(); updateProgress();
updateBackground();
} }
@ -1196,8 +1252,12 @@ var Reveal = (function(){
// Start auto-sliding if it's enabled // Start auto-sliding if it's enabled
cueAutoSlide(); cueAutoSlide();
// Re-create the slide backgrounds
createBackgrounds();
updateControls(); updateControls();
updateProgress(); updateProgress();
updateBackground();
} }
@ -1402,6 +1462,25 @@ var Reveal = (function(){
} }
/**
*
*/
function updateBackground() {
toArray( dom.background.childNodes ).forEach( function( backgroundh, h ) {
backgroundh.className = ( h < indexh ? 'past' : h > indexh ? 'future' : 'present' );
toArray( backgroundh.childNodes ).forEach( function( backgroundv, v ) {
backgroundv.className = ( v < indexv ? 'past' : v > indexv ? 'future' : 'present' );
} );
} );
}
/** /**
* Determine what available routes there are for navigation. * Determine what available routes there are for navigation.
* *

4
js/reveal.min.js vendored

File diff suppressed because one or more lines are too long