diff options
Diffstat (limited to 'js/reveal.js')
| -rw-r--r-- | js/reveal.js | 186 |
1 files changed, 170 insertions, 16 deletions
diff --git a/js/reveal.js b/js/reveal.js index a4a71db..f1ede50 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -79,6 +79,9 @@ var Reveal = (function(){ // Transition speed transitionSpeed: 'default', // default/fast/slow + // Transition style for full page slide backgrounds + backgroundTransition: 'default', // default/linear + // Script dependencies to load dependencies: [] }, @@ -186,6 +189,13 @@ var Reveal = (function(){ dom.wrapper = document.querySelector( '.reveal' ); 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 if( !dom.wrapper.querySelector( '.progress' ) ) { var progressElement = document.createElement( 'div' ); @@ -205,11 +215,11 @@ var Reveal = (function(){ dom.wrapper.appendChild( controlsElement ); } - // Presentation background element + // State background element [DEPRECATED] if( !dom.wrapper.querySelector( '.state-background' ) ) { - var backgroundElement = document.createElement( 'div' ); - backgroundElement.classList.add( 'state-background' ); - dom.wrapper.appendChild( backgroundElement ); + var stateBackgroundElement = document.createElement( 'div' ); + stateBackgroundElement.classList.add( 'state-background' ); + dom.wrapper.appendChild( stateBackgroundElement ); } // Overlay graphic which is displayed during the paused mode @@ -238,6 +248,86 @@ var Reveal = (function(){ } /** + * Creates the slide background elements and appends them + * to the background container. One element is created per + * slide no matter if the given slide has visible background. + */ + function createBackgrounds() { + + if( isPrintingPDF() ) { + document.body.classList.add( 'print-pdf' ); + } + + // Clear prior backgrounds + dom.background.innerHTML = ''; + dom.background.classList.add( 'no-transition' ); + + // Helper method for creating a background element for the + // given slide + function _createBackground( slide, container ) { + + var data = { + background: slide.getAttribute( 'data-background' ), + backgroundSize: slide.getAttribute( 'data-background-size' ), + backgroundColor: slide.getAttribute( 'data-background-color' ), + backgroundRepeat: slide.getAttribute( 'data-background-repeat' ), + backgroundPosition: slide.getAttribute( 'data-background-position' ) + }; + + var element = document.createElement( 'div' ); + element.className = 'slide-background'; + + if( data.background ) { + // Auto-wrap image urls in url(...) + if( /\.(png|jpg|jpeg|gif|bmp)$/gi.test( data.background ) ) { + element.style.backgroundImage = 'url('+ data.background +')'; + } + else { + element.style.background = data.background; + } + } + + // Additional and optional background properties + if( data.backgroundSize ) element.style.backgroundSize = data.backgroundSize; + if( data.backgroundColor ) element.style.backgroundColor = data.backgroundColor; + if( data.backgroundRepeat ) element.style.backgroundRepeat = data.backgroundRepeat; + if( data.backgroundPosition ) element.style.backgroundPosition = data.backgroundPosition; + + container.appendChild( element ); + + return element; + + } + + // Iterate over all horizontal slides + toArray( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( slideh ) { + + var backgroundStack; + + if( isPrintingPDF() ) { + backgroundStack = _createBackground( slideh, slideh ); + } + else { + backgroundStack = _createBackground( slideh, dom.background ); + } + + // Iterate over all vertical slides + toArray( slideh.querySelectorAll( 'section' ) ).forEach( function( slidev ) { + + if( isPrintingPDF() ) { + _createBackground( slidev, slidev ); + } + else { + _createBackground( slidev, backgroundStack ); + } + + } ); + + } ); + + } + + /** * Hides the address bar if we're on a mobile device. */ function hideAddressBar() { @@ -348,6 +438,7 @@ var Reveal = (function(){ dom.wrapper.classList.add( config.transition ); dom.wrapper.setAttribute( 'data-transition-speed', config.transitionSpeed ); + dom.wrapper.setAttribute( 'data-background-transition', config.backgroundTransition ); if( dom.controls ) { dom.controls.style.display = ( config.controls && dom.controls ) ? 'block' : 'none'; @@ -524,6 +615,15 @@ var Reveal = (function(){ } /** + * Checks if this instance is being used to print a PDF. + */ + function isPrintingPDF() { + + return ( /print-pdf/gi ).test( window.location.search ); + + } + + /** * Causes the address bar to hide on mobile devices, * more vertical space ftw. */ @@ -639,7 +739,7 @@ var Reveal = (function(){ */ function layout() { - if( dom.wrapper ) { + if( dom.wrapper && !isPrintingPDF() ) { // Available space to scale within var availableWidth = dom.wrapper.offsetWidth, @@ -748,7 +848,10 @@ var Reveal = (function(){ function getPreviousVerticalIndex( stack ) { if( typeof stack === 'object' && typeof stack.setAttribute === 'function' && stack.classList.contains( 'stack' ) ) { - return parseInt( stack.getAttribute( 'data-previous-indexv' ) || 0, 10 ); + // Prefer manually defined start-indexv + var attributeName = stack.hasAttribute( 'data-start-indexv' ) ? 'data-start-indexv' : 'data-previous-indexv'; + + return parseInt( stack.getAttribute( attributeName ) || 0, 10 ); } return 0; @@ -1128,7 +1231,8 @@ var Reveal = (function(){ } // Dispatch an event if the slide changed - if( indexh !== indexhBefore || indexv !== indexvBefore ) { + var slideChanged = ( indexh !== indexhBefore || indexv !== indexvBefore ); + if( slideChanged ) { dispatchEvent( 'slidechanged', { 'indexh': indexh, 'indexv': indexv, @@ -1165,11 +1269,14 @@ var Reveal = (function(){ } // Handle embedded content - stopEmbeddedContent( previousSlide ); - startEmbeddedContent( currentSlide ); + if( slideChanged ) { + stopEmbeddedContent( previousSlide ); + startEmbeddedContent( currentSlide ); + } updateControls(); updateProgress(); + updateBackground(); } @@ -1193,8 +1300,12 @@ var Reveal = (function(){ // Start auto-sliding if it's enabled cueAutoSlide(); + // Re-create the slide backgrounds + createBackgrounds(); + updateControls(); updateProgress(); + updateBackground(); } @@ -1400,6 +1511,33 @@ var Reveal = (function(){ } /** + * Updates the background elements to reflect the current + * slide. + */ + function updateBackground() { + + // Update the classes of all backgrounds to match the + // states of their slides (past/present/future) + toArray( dom.background.childNodes ).forEach( function( backgroundh, h ) { + + backgroundh.className = 'slide-background ' + ( h < indexh ? 'past' : h > indexh ? 'future' : 'present' ); + + toArray( backgroundh.childNodes ).forEach( function( backgroundv, v ) { + + backgroundv.className = 'slide-background ' + ( v < indexv ? 'past' : v > indexv ? 'future' : 'present' ); + + } ); + + } ); + + // Allow the first background to apply without transition + setTimeout( function() { + dom.background.classList.remove( 'no-transition' ); + }, 1 ); + + } + + /** * Determine what available routes there are for navigation. * * @return {Object} containing four booleans: left/right/up/down @@ -1629,10 +1767,18 @@ var Reveal = (function(){ var fragments = sortFragments( currentSlide.querySelectorAll( '.fragment:not(.visible)' ) ); if( fragments.length ) { - fragments[0].classList.add( 'visible' ); + // Find the index of the next fragment + var index = fragments[0].getAttribute( 'data-fragment-index' ); - // Notify subscribers of the change - dispatchEvent( 'fragmentshown', { fragment: fragments[0] } ); + // Find all fragments with the same index + fragments = currentSlide.querySelectorAll( '.fragment[data-fragment-index="'+ index +'"]' ); + + toArray( fragments ).forEach( function( element ) { + element.classList.add( 'visible' ); + + // Notify subscribers of the change + dispatchEvent( 'fragmentshown', { fragment: element } ); + } ); updateControls(); return true; @@ -1655,10 +1801,18 @@ var Reveal = (function(){ var fragments = sortFragments( currentSlide.querySelectorAll( '.fragment.visible' ) ); if( fragments.length ) { - fragments[ fragments.length - 1 ].classList.remove( 'visible' ); + // Find the index of the previous fragment + var index = fragments[ fragments.length - 1 ].getAttribute( 'data-fragment-index' ); + + // Find all fragments with the same index + fragments = currentSlide.querySelectorAll( '.fragment[data-fragment-index="'+ index +'"]' ); - // Notify subscribers of the change - dispatchEvent( 'fragmenthidden', { fragment: fragments[ fragments.length - 1 ] } ); + toArray( fragments ).forEach( function( f ) { + f.classList.remove( 'visible' ); + + // Notify subscribers of the change + dispatchEvent( 'fragmenthidden', { fragment: f } ); + } ); updateControls(); return true; @@ -2226,4 +2380,4 @@ var Reveal = (function(){ } }; -})();
\ No newline at end of file +})(); |