aboutsummaryrefslogtreecommitdiffhomepage
path: root/js/reveal.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/reveal.js')
-rw-r--r--js/reveal.js149
1 files changed, 137 insertions, 12 deletions
diff --git a/js/reveal.js b/js/reveal.js
index 794911c..9c798f4 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -68,6 +68,9 @@ var Reveal = (function(){
// by using a data-autoslide attribute on your slides
autoSlide: 0,
+ // Stop auto-sliding after user input
+ autoSlideStoppable: false,
+
// Enable slide navigation via mouse wheel
mouseWheel: false,
@@ -80,6 +83,9 @@ var Reveal = (function(){
// Opens links in an iframe preview overlay
previewLinks: false,
+ // Focuses body when page changes visiblity to ensure keyboard shortcuts work
+ focusBodyOnPageVisiblityChange: true,
+
// Theme (see /css/theme)
theme: null,
@@ -92,6 +98,12 @@ var Reveal = (function(){
// Transition style for full page slide backgrounds
backgroundTransition: 'default', // default/linear/none
+ // Parallax background image
+ parallaxBackgroundImage: '', // CSS syntax, e.g. "a.jpg"
+
+ // Parallax background size
+ parallaxBackgroundSize: '', // CSS syntax, e.g. "3000px 2000px"
+
// Number of slides away from the current that are visible
viewDistance: 3,
@@ -470,6 +482,28 @@ var Reveal = (function(){
} );
+ // Add parallax background if specified
+ if( config.parallaxBackgroundImage ) {
+
+ dom.background.style.backgroundImage = 'url("' + config.parallaxBackgroundImage + '")';
+ dom.background.style.backgroundSize = config.parallaxBackgroundSize;
+
+ // Make sure the below properties are set on the element - these properties are
+ // needed for proper transitions to be set on the element via CSS. To remove
+ // annoying background slide-in effect when the presentation starts, apply
+ // these properties after short time delay
+ setTimeout( function() {
+ dom.wrapper.classList.add( 'has-parallax-background' );
+ }, 1 );
+
+ }
+ else {
+
+ dom.background.style.backgroundImage = '';
+ dom.wrapper.classList.remove( 'has-parallax-background' );
+
+ }
+
}
/**
@@ -578,10 +612,28 @@ var Reveal = (function(){
document.addEventListener( 'keydown', onDocumentKeyDown, false );
}
- if ( config.progress && dom.progress ) {
+ if( config.progress && dom.progress ) {
dom.progress.addEventListener( 'click', onProgressClicked, false );
}
+ if( config.focusBodyOnPageVisiblityChange ) {
+ var visibilityChange;
+
+ if( 'hidden' in document ) {
+ visibilityChange = 'visibilitychange';
+ }
+ else if( 'msHidden' in document ) {
+ visibilityChange = 'msvisibilitychange';
+ }
+ else if( 'webkitHidden' in document ) {
+ visibilityChange = 'webkitvisibilitychange';
+ }
+
+ if( visibilityChange ) {
+ document.addEventListener( visibilityChange, onPageVisibilityChange, false );
+ }
+ }
+
[ 'touchstart', 'click' ].forEach( function( eventName ) {
dom.controlsLeft.forEach( function( el ) { el.addEventListener( eventName, onNavigateLeftClicked, false ); } );
dom.controlsRight.forEach( function( el ) { el.addEventListener( eventName, onNavigateRightClicked, false ); } );
@@ -1055,6 +1107,7 @@ var Reveal = (function(){
}
updateProgress();
+ updateParallax();
}
@@ -1471,7 +1524,6 @@ var Reveal = (function(){
// Store references to the previous and current slides
currentSlide = currentVerticalSlides[ indexv ] || currentHorizontalSlide;
-
// Show fragment, if specified
if( typeof f !== 'undefined' ) {
var fragments = sortFragments( currentSlide.querySelectorAll( '.fragment' ) );
@@ -1533,6 +1585,7 @@ var Reveal = (function(){
updateControls();
updateProgress();
updateBackground();
+ updateParallax();
// Update the URL hash
writeURL();
@@ -1825,12 +1878,12 @@ var Reveal = (function(){
}
/**
- * Updates the background elements to reflect the current
+ * Updates the background elements to reflect the current
* slide.
*/
function updateBackground() {
- // Update the classes of all backgrounds to match the
+ // Update the classes of all backgrounds to match the
// states of their slides (past/present/future)
toArray( dom.background.childNodes ).forEach( function( backgroundh, h ) {
@@ -1856,6 +1909,42 @@ var Reveal = (function(){
}
/**
+ * Updates the position of the parallax background based
+ * on the current slide index.
+ */
+ function updateParallax() {
+
+ if( config.parallaxBackgroundImage ) {
+
+ var horizontalSlides = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ),
+ verticalSlides = document.querySelectorAll( VERTICAL_SLIDES_SELECTOR );
+
+ var backgroundSize = dom.background.style.backgroundSize.split( ' ' ),
+ backgroundWidth, backgroundHeight;
+
+ if( backgroundSize.length === 1 ) {
+ backgroundWidth = backgroundHeight = parseInt( backgroundSize[0], 10 );
+ }
+ else {
+ backgroundWidth = parseInt( backgroundSize[0], 10 );
+ backgroundHeight = parseInt( backgroundSize[1], 10 );
+ }
+
+ var slideWidth = dom.background.offsetWidth;
+ var horizontalSlideCount = horizontalSlides.length;
+ var horizontalOffset = -( backgroundWidth - slideWidth ) / ( horizontalSlideCount-1 ) * indexh;
+
+ var slideHeight = dom.background.offsetHeight;
+ var verticalSlideCount = verticalSlides.length;
+ var verticalOffset = verticalSlideCount > 0 ? -( backgroundHeight - slideHeight ) / ( verticalSlideCount-1 ) * indexv : 0;
+
+ dom.background.style.backgroundPosition = horizontalOffset + 'px ' + verticalOffset + 'px';
+
+ }
+
+ }
+
+ /**
* Determine what available routes there are for navigation.
*
* @return {Object} containing four booleans: left/right/up/down
@@ -2263,11 +2352,21 @@ var Reveal = (function(){
// ----------------------------- EVENTS -------------------------------//
// --------------------------------------------------------------------//
+ /**
+ * Called by all event handlers that are based on user
+ * input.
+ */
+ function onUserInput( event ) {
+
+ if( config.autoSlideStoppable ) {
+ config.autoSlide = 0;
+ cancelAutoSlide();
+ }
+
+ }
/**
* Handler for the document level 'keydown' event.
- *
- * @param {Object} event
*/
function onDocumentKeyDown( event ) {
@@ -2367,6 +2466,8 @@ var Reveal = (function(){
// another timeout
cueAutoSlide();
+ onUserInput( event );
+
}
/**
@@ -2391,6 +2492,8 @@ var Reveal = (function(){
} );
}
+ onUserInput( event );
+
}
/**
@@ -2497,6 +2600,8 @@ var Reveal = (function(){
onTouchStart( event );
}
+ onUserInput( event );
+
}
/**
@@ -2560,17 +2665,19 @@ var Reveal = (function(){
slide( slideIndex );
+ onUserInput( event );
+
}
/**
* Event handler for navigation control buttons.
*/
- function onNavigateLeftClicked( event ) { event.preventDefault(); navigateLeft(); }
- function onNavigateRightClicked( event ) { event.preventDefault(); navigateRight(); }
- function onNavigateUpClicked( event ) { event.preventDefault(); navigateUp(); }
- function onNavigateDownClicked( event ) { event.preventDefault(); navigateDown(); }
- function onNavigatePrevClicked( event ) { event.preventDefault(); navigatePrev(); }
- function onNavigateNextClicked( event ) { event.preventDefault(); navigateNext(); }
+ function onNavigateLeftClicked( event ) { event.preventDefault(); navigateLeft(); onUserInput(); }
+ function onNavigateRightClicked( event ) { event.preventDefault(); navigateRight(); onUserInput(); }
+ function onNavigateUpClicked( event ) { event.preventDefault(); navigateUp(); onUserInput(); }
+ function onNavigateDownClicked( event ) { event.preventDefault(); navigateDown(); onUserInput(); }
+ function onNavigatePrevClicked( event ) { event.preventDefault(); navigatePrev(); onUserInput(); }
+ function onNavigateNextClicked( event ) { event.preventDefault(); navigateNext(); onUserInput(); }
/**
* Handler for the window level 'hashchange' event.
@@ -2591,6 +2698,24 @@ var Reveal = (function(){
}
/**
+ * Handle for the window level 'visibilitychange' event.
+ */
+ function onPageVisibilityChange( event ) {
+
+ var isHidden = document.webkitHidden ||
+ document.msHidden ||
+ document.hidden;
+
+ // If, after clicking a link or similar and we're coming back,
+ // focus the document.body to ensure we can use keyboard shortcuts
+ if( isHidden === false && document.activeElement !== document.body ) {
+ document.activeElement.blur();
+ document.body.focus();
+ }
+
+ }
+
+ /**
* Invoked when a slide is and we're in the overview.
*/
function onOverviewSlideClicked( event ) {