add Reveal.syncSlide

js/reveal.js

@@ -924,6 +924,57 @@
 	 */
 	function createBackground( slide, container ) {
 
+
+		// Main slide background element
+		var element = document.createElement( 'div' );
+		element.className = 'slide-background ' + slide.className.replace( /present|past|future/, '' );
+
+		// Inner background element that wraps images/videos/iframes
+		var contentElement = document.createElement( 'div' );
+		contentElement.className = 'slide-background-content';
+
+		element.appendChild( contentElement );
+		container.appendChild( element );
+
+		slide.slideBackgroundElement = element;
+		slide.slideBackgroundContentElement = contentElement;
+
+		// Syncs the background to reflect all current background settings
+		syncBackground( slide );
+
+		return element;
+
+	}
+
+	/**
+	 * Renders all of the visual properties of a slide background
+	 * based on the various background attributes.
+	 *
+	 * @param {HTMLElement} slide
+	 */
+	function syncBackground( slide ) {
+
+		var element = slide.slideBackgroundElement,
+			contentElement = slide.slideBackgroundContentElement;
+
+		// Reset the prior background state in case this is not the
+		// initial sync
+		slide.classList.remove( 'has-dark-background' );
+		slide.classList.remove( 'has-light-background' );
+
+		element.removeAttribute( 'data-loaded' );
+		element.removeAttribute( 'data-background-hash' );
+		element.removeAttribute( 'data-background-size' );
+		element.removeAttribute( 'data-background-transition' );
+		element.style.backgroundColor = '';
+
+		contentElement.style.backgroundSize = '';
+		contentElement.style.backgroundRepeat = '';
+		contentElement.style.backgroundPosition = '';
+		contentElement.style.backgroundImage = '';
+		contentElement.style.opacity = '';
+		contentElement.innerHTML = '';
+
 		var data = {
 			background: slide.getAttribute( 'data-background' ),
 			backgroundSize: slide.getAttribute( 'data-background-size' ),
@@ -937,14 +988,6 @@
 			backgroundOpacity: slide.getAttribute( 'data-background-opacity' )
 		};
 
-		// Main slide background element
-		var element = document.createElement( 'div' );
-		element.className = 'slide-background ' + slide.className.replace( /present|past|future/, '' );
-
-		// Inner background element that wraps images/videos/iframes
-		var contentElement = document.createElement( 'div' );
-		contentElement.className = 'slide-background-content';
-
 		if( data.background ) {
 			// Auto-wrap image urls in url(...)
 			if( /^(http|file|\/\/)/gi.test( data.background ) || /\.(svg|png|jpg|jpeg|gif|bmp)([?#\s]|$)/gi.test( data.background ) ) {
@@ -982,16 +1025,6 @@
 		if( data.backgroundPosition ) contentElement.style.backgroundPosition = data.backgroundPosition;
 		if( data.backgroundOpacity ) contentElement.style.opacity = data.backgroundOpacity;
 
-		element.appendChild( contentElement );
-		container.appendChild( element );
-
-		// If backgrounds are being recreated, clear old classes
-		slide.classList.remove( 'has-dark-background' );
-		slide.classList.remove( 'has-light-background' );
-
-		slide.slideBackgroundElement = element;
-		slide.slideBackgroundContentElement = contentElement;
-
 		// If this slide has a background color, add a class that
 		// signals if it is light or dark. If the slide has no background
 		// color, no class will be set
@@ -1012,8 +1045,6 @@
 			}
 		}
 
-		return element;
-
 	}
 
 	/**
@@ -2638,6 +2669,29 @@
 
 	}
 
+	/**
+	 * Updates reveal.js to keep in sync with new slide attributes. For
+	 * example, if you add a new `data-background-image` you can call
+	 * this to have reveal.js render the new background image.
+	 *
+	 * Similar to #sync() but more efficient when you only need to
+	 * refresh a specific slide.
+	 *
+	 * @param {HTMLElement} slide
+	 */
+	function syncSlide( slide ) {
+
+		syncBackground( slide );
+
+		sortFragments( slide.querySelectorAll( '.fragment' ) );
+
+		updateBackground();
+		updateNotes();
+
+		loadSlide( slide );
+
+	}
+
 	/**
 	 * Resets all vertical slides so that only the first
 	 * is visible.
@@ -5233,6 +5287,7 @@
 		initialize: initialize,
 		configure: configure,
 		sync: sync,
+		syncSlide: syncSlide,
 
 		// Navigation methods
 		slide: slide,