ability to share presentation with speaker notes #304

This commit is contained in:
Hakim El Hattab 2015-09-09 14:09:37 +02:00
parent 5e3bbdeecf
commit 2ad4065500
4 changed files with 111 additions and 0 deletions

View file

@ -141,6 +141,9 @@ Reveal.initialize({
// key is pressed // key is pressed
help: true, help: true,
// Flags if speaker notes should be visible to all viewers
showNotes: false,
// Number of milliseconds between automatically proceeding to the // Number of milliseconds between automatically proceeding to the
// next slide, disabled when set to 0, this value can be overwritten // next slide, disabled when set to 0, this value can be overwritten
// by using a data-autoslide attribute on your slides // by using a data-autoslide attribute on your slides

View file

@ -1162,6 +1162,34 @@ body {
.reveal aside.notes { .reveal aside.notes {
display: none; } display: none; }
.reveal .speaker-notes {
display: none;
position: absolute;
width: 70%;
max-height: 15%;
left: 15%;
bottom: 5%;
padding: 10px;
z-index: 1;
font-size: 18px;
line-height: 1.4;
border: 2px solid #fff;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
overflow: auto;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.reveal .speaker-notes.visible:not(:empty) {
display: block; }
@media screen and (max-width: 800px) {
.reveal .speaker-notes {
width: 90%;
left: 5%;
bottom: 5%;
font-size: 14px; } }
/********************************************* /*********************************************
* ZOOM PLUGIN * ZOOM PLUGIN
*********************************************/ *********************************************/

View file

@ -1291,10 +1291,44 @@ body {
* SPEAKER NOTES * SPEAKER NOTES
*********************************************/ *********************************************/
// Hide on-page notes
.reveal aside.notes { .reveal aside.notes {
display: none; display: none;
} }
// An interface element that can optionally be used to show the
// speaker notes to all viewers, on top of the presentation
.reveal .speaker-notes {
display: none;
position: absolute;
width: 70%;
max-height: 15%;
left: 15%;
bottom: 5%;
padding: 10px;
z-index: 1;
font-size: 18px;
line-height: 1.4;
border: 2px solid #fff;
color: #fff;
background-color: rgba(0,0,0,0.5);
overflow: auto;
box-sizing: border-box;
}
.reveal .speaker-notes.visible:not(:empty) {
display: block;
}
@media screen and (max-width: 800px) {
.reveal .speaker-notes {
width: 90%;
left: 5%;
bottom: 5%;
font-size: 14px;
}
}
/********************************************* /*********************************************
* ZOOM PLUGIN * ZOOM PLUGIN

View file

@ -92,6 +92,9 @@
// Flags if it should be possible to pause the presentation (blackout) // Flags if it should be possible to pause the presentation (blackout)
pause: true, pause: true,
// Flags if speaker notes should be visible to all viewers
showNotes: false,
// Number of milliseconds between automatically proceeding to the // Number of milliseconds between automatically proceeding to the
// next slide, disabled when set to 0, this value can be overwritten // next slide, disabled when set to 0, this value can be overwritten
// by using a data-autoslide attribute on your slides // by using a data-autoslide attribute on your slides
@ -465,6 +468,9 @@
// Slide number // Slide number
dom.slideNumber = createSingletonNode( dom.wrapper, 'div', 'slide-number', '' ); dom.slideNumber = createSingletonNode( dom.wrapper, 'div', 'slide-number', '' );
// Element containing notes that are visible to the audience
dom.speakerNotes = createSingletonNode( dom.wrapper, 'div', 'speaker-notes', null );
// Overlay graphic which is displayed during the paused mode // Overlay graphic which is displayed during the paused mode
createSingletonNode( dom.wrapper, 'div', 'pause-overlay', null ); createSingletonNode( dom.wrapper, 'div', 'pause-overlay', null );
@ -856,6 +862,13 @@
resume(); resume();
} }
if( config.showNotes ) {
dom.speakerNotes.classList.add( 'visible' );
}
else {
dom.speakerNotes.classList.remove( 'visible' );
}
if( config.mouseWheel ) { if( config.mouseWheel ) {
document.addEventListener( 'DOMMouseScroll', onDocumentMouseScroll, false ); // FF document.addEventListener( 'DOMMouseScroll', onDocumentMouseScroll, false ); // FF
document.addEventListener( 'mousewheel', onDocumentMouseScroll, false ); document.addEventListener( 'mousewheel', onDocumentMouseScroll, false );
@ -2161,6 +2174,7 @@
updateBackground(); updateBackground();
updateParallax(); updateParallax();
updateSlideNumber(); updateSlideNumber();
updateNotes();
// Update the URL hash // Update the URL hash
writeURL(); writeURL();
@ -2202,6 +2216,7 @@
updateBackground( true ); updateBackground( true );
updateSlideNumber(); updateSlideNumber();
updateSlidesVisibility(); updateSlidesVisibility();
updateNotes();
formatEmbeddedContent(); formatEmbeddedContent();
startEmbeddedContent( currentSlide ); startEmbeddedContent( currentSlide );
@ -2450,6 +2465,37 @@
} }
/**
* Pick up notes from the current slide and display tham
* to the viewer.
*
* @see `showNotes` config value
*/
function updateNotes() {
if( config.showNotes && dom.speakerNotes && currentSlide ) {
var notes = '';
// Notes can be specified via the data-notes attribute...
if( currentSlide.hasAttribute( 'data-notes' ) ) {
notes = currentSlide.getAttribute( 'data-notes' );
}
// ... or using an <aside class="notes"> element
if( !notes ) {
var notesElement = currentSlide.querySelector( 'aside.notes' );
if( notesElement ) {
notes = notesElement.innerHTML;
}
}
dom.speakerNotes.innerHTML = notes;
}
}
/** /**
* Updates the progress bar to reflect the current slide. * Updates the progress bar to reflect the current slide.
*/ */