xobs/fossasia-22-renode
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add Reveal.syncSlide

Browse Source
This commit is contained in:
Hakim El Hattab 2018-05-03 15:25:54 +02:00
parent 042fbde61b
commit 0bbcc6b594
1 changed files with 75 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
js/reveal.js
View File

@ -924,6 +924,57 @@
*/ */
function createBackground( slide, container ) { 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 = { var data = {
background: slide.getAttribute( 'data-background' ), background: slide.getAttribute( 'data-background' ),
backgroundSize: slide.getAttribute( 'data-background-size' ), backgroundSize: slide.getAttribute( 'data-background-size' ),
@ -937,14 +988,6 @@
backgroundOpacity: slide.getAttribute( 'data-background-opacity' ) 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 ) { if( data.background ) {
// Auto-wrap image urls in url(...) // Auto-wrap image urls in url(...)
if( /^(http|file|\/\/)/gi.test( data.background ) || /\.(svg|png|jpg|jpeg|gif|bmp)([?#\s]|$)/gi.test( data.background ) ) { 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.backgroundPosition ) contentElement.style.backgroundPosition = data.backgroundPosition;
if( data.backgroundOpacity ) contentElement.style.opacity = data.backgroundOpacity; 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 // If this slide has a background color, add a class that
// signals if it is light or dark. If the slide has no background // signals if it is light or dark. If the slide has no background
// color, no class will be set // 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 * Resets all vertical slides so that only the first
* is visible. * is visible.
@ -5233,6 +5287,7 @@
initialize: initialize, initialize: initialize,
configure: configure, configure: configure,
sync: sync, sync: sync,
syncSlide: syncSlide,
// Navigation methods // Navigation methods
slide: slide, slide: slide,