Hakim El Hattab
12 years ago
7 changed files with 253 additions and 29 deletions
@ -0,0 +1,157 @@ |
|||
<!doctype html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
|
|||
<title>reveal.js - Slide Notes</title> |
|||
|
|||
<style> |
|||
body { |
|||
font-family: Helvetica; |
|||
} |
|||
|
|||
#notes { |
|||
font-size: 24px; |
|||
width: 640px; |
|||
margin-top: 5px; |
|||
} |
|||
|
|||
#wrap-current-slide { |
|||
width: 640px; |
|||
height: 512px; |
|||
float: left; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
#current-slide { |
|||
width: 1280px; |
|||
height: 1024px; |
|||
border: none; |
|||
|
|||
-webkit-transform-origin: 0 0; |
|||
-moz-transform-origin: 0 0; |
|||
-ms-transform-origin: 0 0; |
|||
-o-transform-origin: 0 0; |
|||
transform-origin: 0 0; |
|||
|
|||
-webkit-transform: scale(0.5); |
|||
-moz-transform: scale(0.5); |
|||
-ms-transform: scale(0.5); |
|||
-o-transform: scale(0.5); |
|||
transform: scale(0.5); |
|||
} |
|||
|
|||
#wrap-next-slide { |
|||
width: 448px; |
|||
height: 358px; |
|||
float: left; |
|||
margin: 0 0 0 10px; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
#next-slide { |
|||
width: 1280px; |
|||
height: 1024px; |
|||
border: none; |
|||
|
|||
-webkit-transform-origin: 0 0; |
|||
-moz-transform-origin: 0 0; |
|||
-ms-transform-origin: 0 0; |
|||
-o-transform-origin: 0 0; |
|||
transform-origin: 0 0; |
|||
|
|||
-webkit-transform: scale(0.35); |
|||
-moz-transform: scale(0.35); |
|||
-ms-transform: scale(0.35); |
|||
-o-transform: scale(0.35); |
|||
transform: scale(0.35); |
|||
} |
|||
|
|||
.slides { |
|||
position: relative; |
|||
margin-bottom: 10px; |
|||
border: 1px solid black; |
|||
border-radius: 2px; |
|||
background: rgb(28, 30, 32); |
|||
} |
|||
|
|||
.slides span { |
|||
position: absolute; |
|||
top: 3px; |
|||
left: 3px; |
|||
font-weight: bold; |
|||
font-size: 14px; |
|||
color: rgba( 255, 255, 255, 0.9 ); |
|||
} |
|||
</style> |
|||
</head> |
|||
|
|||
<body> |
|||
|
|||
<div id="wrap-current-slide" class="slides"> |
|||
<iframe src="../../index.html" width="1280" height="1024" id="current-slide"></iframe> |
|||
</div> |
|||
|
|||
<div id="wrap-next-slide" class="slides"> |
|||
<iframe src="../../index.html" width="640" height="512" id="next-slide"></iframe> |
|||
<span>UPCOMING:</span> |
|||
</div> |
|||
<div id="notes"></div> |
|||
|
|||
<script src="../../lib/js/showdown.js"></script> |
|||
<script> |
|||
window.addEventListener( 'load', function() { |
|||
|
|||
(function( window, undefined ) { |
|||
var notes = document.getElementById( 'notes' ), |
|||
currentSlide = document.getElementById( 'current-slide' ), |
|||
nextSlide = document.getElementById( 'next-slide' ); |
|||
|
|||
window.addEventListener( 'message', function( event ) { |
|||
var data = JSON.parse( event.data ); |
|||
|
|||
if( data.markdown ) { |
|||
notes.innerHTML = (new Showdown.converter()).makeHtml( data.notes ); |
|||
} |
|||
else { |
|||
notes.innerHTML = data.notes; |
|||
} |
|||
|
|||
// Kill the slide listeners while responding to the event |
|||
removeSlideListeners(); |
|||
|
|||
// Update the note slides |
|||
currentSlide.contentWindow.Reveal.slide( data.indexh, data.indexv ); |
|||
nextSlide.contentWindow.Reveal.slide( data.nextindexh, data.nextindexv ); |
|||
|
|||
// Resume listening on the next cycle |
|||
setTimeout( addSlideListeners, 1 ); |
|||
|
|||
}, false ); |
|||
|
|||
function addSlideListeners() { |
|||
currentSlide.contentWindow.Reveal.addEventListener( 'slidechanged', onNotesSlideChange, false ); |
|||
nextSlide.contentWindow.Reveal.addEventListener( 'slidechanged', onNotesSlideChange, false ); |
|||
} |
|||
|
|||
function removeSlideListeners() { |
|||
currentSlide.contentWindow.Reveal.removeEventListener( 'slidechanged', onNotesSlideChange, false ); |
|||
nextSlide.contentWindow.Reveal.removeEventListener( 'slidechanged', onNotesSlideChange, false ); |
|||
} |
|||
|
|||
function onNotesSlideChange( event ) { |
|||
window.opener.postMessage( JSON.stringify({ |
|||
indexh : event.indexh, |
|||
indexv : event.indexv |
|||
}), '*' ); |
|||
} |
|||
|
|||
addSlideListeners(); |
|||
|
|||
})( window ); |
|||
|
|||
}, false ); |
|||
|
|||
</script> |
|||
</body> |
|||
</html> |
@ -0,0 +1,74 @@ |
|||
/** |
|||
* Handles opening of and synchronization with the reveal.js |
|||
* notes window. |
|||
*/ |
|||
var RevealNotes = (function() { |
|||
|
|||
function openNotes() { |
|||
var notesPopup = window.open( 'plugin/notes/notes.html', 'reveal.js - Notes', 'width=1120,height=850' ); |
|||
|
|||
Reveal.addEventListener( 'slidechanged', post ); |
|||
|
|||
// Posts the current slide data to the notes window
|
|||
function post() { |
|||
var slideElement = Reveal.getCurrentSlide(), |
|||
indexh = Reveal.getIndices().h, |
|||
indexv = Reveal.getIndices().v, |
|||
nextindexh, |
|||
nextindexv; |
|||
|
|||
if( slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION' ) { |
|||
nextindexh = indexh; |
|||
nextindexv = indexv + 1; |
|||
} else { |
|||
nextindexh = indexh + 1; |
|||
nextindexv = 0; |
|||
} |
|||
|
|||
var notes = slideElement.querySelector( 'aside.notes' ); |
|||
|
|||
var slideData = { |
|||
notes : notes ? notes.innerHTML : '', |
|||
indexh : indexh, |
|||
indexv : indexv, |
|||
nextindexh : nextindexh, |
|||
nextindexv : nextindexv, |
|||
markdown : notes ? typeof notes.getAttribute( 'data-markdown' ) === 'string' : false |
|||
}; |
|||
|
|||
notesPopup.postMessage( JSON.stringify( slideData ), '*' ); |
|||
} |
|||
|
|||
// The main presentation is kept in sync when navigating the
|
|||
// note slides so that the popup may be used as a remote
|
|||
window.addEventListener( 'message', function( event ) { |
|||
var data = JSON.parse( event.data ); |
|||
|
|||
if( data && typeof data.indexh === 'number' && typeof data.indexv === 'number' ) { |
|||
Reveal.slide( data.indexh, data.indexv ); |
|||
} |
|||
} ); |
|||
|
|||
// Navigate to the current slide when the notes are loaded
|
|||
notesPopup.addEventListener( 'load', post, false ); |
|||
} |
|||
|
|||
// If the there's a 'notes' query set, open directly
|
|||
if( window.location.search.match(/(\?|\&)notes/gi ) !== null ) { |
|||
openNotes(); |
|||
} |
|||
|
|||
// Open the notes when the 's' key is hit
|
|||
document.addEventListener( 'keydown', function( event ) { |
|||
// Disregard the event if the target is editable or a
|
|||
// modifier is present
|
|||
if ( document.querySelector( ':focus' ) !== null || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) return; |
|||
|
|||
if( event.keyCode === 83 ) { |
|||
event.preventDefault(); |
|||
openNotes(); |
|||
} |
|||
}, false ); |
|||
|
|||
return { open: openNotes } |
|||
})(); |
Loading…
Reference in new issue