aboutsummaryrefslogtreecommitdiffhomepage
path: root/plugin
diff options
context:
space:
mode:
Diffstat (limited to 'plugin')
-rw-r--r--plugin/notes-server/client.js38
-rw-r--r--plugin/notes-server/index.js55
-rw-r--r--plugin/notes-server/notes.html128
-rw-r--r--plugin/notes/notes.html157
-rw-r--r--plugin/notes/notes.js74
5 files changed, 452 insertions, 0 deletions
diff --git a/plugin/notes-server/client.js b/plugin/notes-server/client.js
new file mode 100644
index 0000000..d805601
--- /dev/null
+++ b/plugin/notes-server/client.js
@@ -0,0 +1,38 @@
+(function() {
+ // don't emit events from inside the previews themselves
+ if ( window.location.search.match( /receiver/gi ) ) { return; }
+
+ var socket = io.connect(window.location.origin);
+ var socketId = Math.random().toString().slice(2);
+
+ console.log('View slide notes at ' + window.location.origin + '/notes/' + socketId);
+ window.open(window.location.origin + '/notes/' + socketId, 'notes-' + socketId)
+
+ Reveal.addEventListener( 'slidechanged', function( event ) {
+ var nextindexh;
+ var nextindexv;
+ var slideElement = event.currentSlide;
+
+ if (slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION') {
+ nextindexh = event.indexh;
+ nextindexv = event.indexv + 1;
+ } else {
+ nextindexh = event.indexh + 1;
+ nextindexv = 0;
+ }
+
+ var notes = slideElement.querySelector('aside.notes');
+ var slideData = {
+ notes : notes ? notes.innerHTML : '',
+ indexh : event.indexh,
+ indexv : event.indexv,
+ nextindexh : nextindexh,
+ nextindexv : nextindexv,
+ socketId : socketId,
+ markdown : notes ? typeof notes.getAttribute('data-markdown') === 'string' : false
+
+ };
+
+ socket.emit('slidechanged', slideData);
+ } );
+}()); \ No newline at end of file
diff --git a/plugin/notes-server/index.js b/plugin/notes-server/index.js
new file mode 100644
index 0000000..1fe5bab
--- /dev/null
+++ b/plugin/notes-server/index.js
@@ -0,0 +1,55 @@
+var express = require('express');
+var fs = require('fs');
+var io = require('socket.io');
+var _ = require('underscore');
+var Mustache = require('mustache');
+
+var app = express.createServer();
+var staticDir = express.static;
+
+io = io.listen(app);
+
+var opts = {
+ port : 1947,
+ baseDir : __dirname + '/../../'
+};
+
+io.sockets.on('connection', function(socket) {
+ socket.on('slidechanged', function(slideData) {
+ socket.broadcast.emit('slidedata', slideData);
+ });
+});
+
+app.configure(function() {
+ [ 'css', 'js', 'images', 'plugin', 'lib' ].forEach(function(dir) {
+ app.use('/' + dir, staticDir(opts.baseDir + dir));
+ });
+});
+
+app.get("/", function(req, res) {
+ fs.createReadStream(opts.baseDir + '/index.html').pipe(res);
+});
+
+app.get("/notes/:socketId", function(req, res) {
+
+ fs.readFile(opts.baseDir + 'plugin/notes-server/notes.html', function(err, data) {
+ res.send(Mustache.to_html(data.toString(), {
+ socketId : req.params.socketId
+ }));
+ });
+ // fs.createReadStream(opts.baseDir + 'notes-server/notes.html').pipe(res);
+});
+
+// Actually listen
+app.listen(opts.port || null);
+
+var brown = '\033[33m',
+ green = '\033[32m',
+ reset = '\033[0m';
+
+var slidesLocation = "http://localhost" + ( opts.port ? ( ':' + opts.port ) : '' );
+
+console.log( brown + "reveal.js - Speaker Notes" + reset );
+console.log( "1. Open the slides at " + green + slidesLocation + reset );
+console.log( "2. Click on the link your JS console to go to the notes page" );
+console.log( "3. Advance through your slides and your notes will advance automatically" ); \ No newline at end of file
diff --git a/plugin/notes-server/notes.html b/plugin/notes-server/notes.html
new file mode 100644
index 0000000..548bc12
--- /dev/null
+++ b/plugin/notes-server/notes.html
@@ -0,0 +1,128 @@
+<!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="/?receiver" width="1280" height="1024" id="current-slide"></iframe>
+ </div>
+
+ <div id="wrap-next-slide" class="slides">
+ <iframe src="/?receiver" width="640" height="512" id="next-slide"></iframe>
+ <span>UPCOMING:</span>
+ </div>
+ <div id="notes"></div>
+
+ <script src="/socket.io/socket.io.js"></script>
+ <script src="/lib/js/showdown.js"></script>
+
+ <script>
+ var socketId = '{{socketId}}';
+ var socket = io.connect(window.location.origin);
+ var notes = document.getElementById('notes');
+ var currentSlide = document.getElementById('current-slide');
+ var nextSlide = document.getElementById('next-slide');
+
+ socket.on('slidedata', function(data) {
+ // ignore data from sockets that aren't ours
+ if (data.socketId !== socketId) { return; }
+
+ if (data.markdown) {
+ notes.innerHTML = (new Showdown.converter()).makeHtml(data.notes);
+ }
+ else {
+ notes.innerHTML = data.notes;
+ }
+
+ currentSlide.contentWindow.Reveal.slide(data.indexh, data.indexv);
+ nextSlide.contentWindow.Reveal.slide(data.nextindexh, data.nextindexv);
+ });
+ </script>
+
+ </body>
+</html> \ No newline at end of file
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