ability to share presentation with speaker notes #304
This commit is contained in:
parent
5e3bbdeecf
commit
2ad4065500
|
@ -141,6 +141,9 @@ Reveal.initialize({
|
|||
// key is pressed
|
||||
help: true,
|
||||
|
||||
// Flags if speaker notes should be visible to all viewers
|
||||
showNotes: false,
|
||||
|
||||
// Number of milliseconds between automatically proceeding to the
|
||||
// next slide, disabled when set to 0, this value can be overwritten
|
||||
// by using a data-autoslide attribute on your slides
|
||||
|
|
|
@ -1162,6 +1162,34 @@ body {
|
|||
.reveal aside.notes {
|
||||
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
|
||||
*********************************************/
|
||||
|
|
|
@ -1291,10 +1291,44 @@ body {
|
|||
* SPEAKER NOTES
|
||||
*********************************************/
|
||||
|
||||
// Hide on-page notes
|
||||
.reveal aside.notes {
|
||||
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
|
||||
|
|
46
js/reveal.js
46
js/reveal.js
|
@ -92,6 +92,9 @@
|
|||
// Flags if it should be possible to pause the presentation (blackout)
|
||||
pause: true,
|
||||
|
||||
// Flags if speaker notes should be visible to all viewers
|
||||
showNotes: false,
|
||||
|
||||
// Number of milliseconds between automatically proceeding to the
|
||||
// next slide, disabled when set to 0, this value can be overwritten
|
||||
// by using a data-autoslide attribute on your slides
|
||||
|
@ -465,6 +468,9 @@
|
|||
// 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
|
||||
createSingletonNode( dom.wrapper, 'div', 'pause-overlay', null );
|
||||
|
||||
|
@ -856,6 +862,13 @@
|
|||
resume();
|
||||
}
|
||||
|
||||
if( config.showNotes ) {
|
||||
dom.speakerNotes.classList.add( 'visible' );
|
||||
}
|
||||
else {
|
||||
dom.speakerNotes.classList.remove( 'visible' );
|
||||
}
|
||||
|
||||
if( config.mouseWheel ) {
|
||||
document.addEventListener( 'DOMMouseScroll', onDocumentMouseScroll, false ); // FF
|
||||
document.addEventListener( 'mousewheel', onDocumentMouseScroll, false );
|
||||
|
@ -2161,6 +2174,7 @@
|
|||
updateBackground();
|
||||
updateParallax();
|
||||
updateSlideNumber();
|
||||
updateNotes();
|
||||
|
||||
// Update the URL hash
|
||||
writeURL();
|
||||
|
@ -2202,6 +2216,7 @@
|
|||
updateBackground( true );
|
||||
updateSlideNumber();
|
||||
updateSlidesVisibility();
|
||||
updateNotes();
|
||||
|
||||
formatEmbeddedContent();
|
||||
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.
|
||||
*/
|
||||
|
|
Loading…
Reference in New Issue