diff options
| author | Hakim El Hattab <hakim.elhattab@gmail.com> | 2012-10-20 20:40:52 -0400 |
|---|---|---|
| committer | Hakim El Hattab <hakim.elhattab@gmail.com> | 2012-10-20 20:40:52 -0400 |
| commit | c6f8a44edf258567bc8324e45adb66036feb00ee (patch) | |
| tree | 9db01a89817a526ffedf0adb19b533aa821ce51f /plugin/notes | |
| parent | 5188951a0f1ed38b2945c5078369508c491c4a8c (diff) | |
| parent | 070a1e3ee5bbe44b6f3cdadedb031f3eee433ac6 (diff) | |
| download | freenode-live-2017-presentation-c6f8a44edf258567bc8324e45adb66036feb00ee.tar freenode-live-2017-presentation-c6f8a44edf258567bc8324e45adb66036feb00ee.tar.gz | |
new postMessage-based notes plugin, moved node-based notes to notes-server (#190)
Diffstat (limited to 'plugin/notes')
| -rw-r--r-- | plugin/notes/notes.html | 157 | ||||
| -rw-r--r-- | plugin/notes/notes.js | 74 |
2 files changed, 231 insertions, 0 deletions
diff --git a/plugin/notes/notes.html b/plugin/notes/notes.html new file mode 100644 index 0000000..485edec --- /dev/null +++ b/plugin/notes/notes.html @@ -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> diff --git a/plugin/notes/notes.js b/plugin/notes/notes.js new file mode 100644 index 0000000..58c26e0 --- /dev/null +++ b/plugin/notes/notes.js @@ -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 } +})();
\ No newline at end of file |