diff options
| author | Hakim El Hattab <hakim.elhattab@gmail.com> | 2012-07-09 21:00:51 -0400 |
|---|---|---|
| committer | Hakim El Hattab <hakim.elhattab@gmail.com> | 2012-07-09 21:00:51 -0400 |
| commit | f57de200ec32861835c9582090d52c70e73dace9 (patch) | |
| tree | 79830bdec71f7c3dc882c496e785b4348a733390 /plugin | |
| parent | e7c5de23d7dc318babaee0fda69f4246a186f01a (diff) | |
| download | perl-software-in-gnu-guix-f57de200ec32861835c9582090d52c70e73dace9.tar perl-software-in-gnu-guix-f57de200ec32861835c9582090d52c70e73dace9.tar.gz | |
refactored folder structure, added /plugins which is initially only used by #57
Diffstat (limited to 'plugin')
| -rw-r--r-- | plugin/slidenotes/client.js | 35 | ||||
| -rw-r--r-- | plugin/slidenotes/index.js | 47 | ||||
| -rw-r--r-- | plugin/slidenotes/notes.html | 109 |
3 files changed, 191 insertions, 0 deletions
diff --git a/plugin/slidenotes/client.js b/plugin/slidenotes/client.js new file mode 100644 index 0000000..1aba8b8 --- /dev/null +++ b/plugin/slidenotes/client.js @@ -0,0 +1,35 @@ +(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); + + 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 + }; + + socket.emit('slidechanged', slideData); + } ); +}()); diff --git a/plugin/slidenotes/index.js b/plugin/slidenotes/index.js new file mode 100644 index 0000000..41282a3 --- /dev/null +++ b/plugin/slidenotes/index.js @@ -0,0 +1,47 @@ +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', '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/slidenotes/notes.html', function(err, data) { + res.send(Mustache.to_html(data.toString(), { + socketId : req.params.socketId + })); + }); + // fs.createReadStream(opts.baseDir + 'slidenotes/notes.html').pipe(res); +}); + +// Actually listen +app.listen(opts.port || null); + +console.log("Open the slides at http://localhost" + (opts.port ? (':' + opts.port) : '') + " and look for a link to the speaker notes in the console"); +console.log("Advance through your slides and your notes will advance automatically"); diff --git a/plugin/slidenotes/notes.html b/plugin/slidenotes/notes.html new file mode 100644 index 0000000..88924c0 --- /dev/null +++ b/plugin/slidenotes/notes.html @@ -0,0 +1,109 @@ +<!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; + -moz-transform: scale(0.5); + -moz-transform-origin: 0 0; + -o-transform: scale(0.5); + -o-transform-origin: 0 0; + -webkit-transform: scale(0.5); + -webkit-transform-origin: 0 0; + } + + #wrap-next-slide { + width: 320px; + height: 256px; + float: left; + margin: 0 0 0 10px; + overflow: hidden; + } + + #next-slide { + width: 1280px; + height: 1024px; + border: none; + -moz-transform: scale(0.25); + -moz-transform-origin: 0 0; + -o-transform: scale(0.25); + -o-transform-origin: 0 0; + -webkit-transform: scale(0.25); + -webkit-transform-origin: 0 0; + } + + .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> + 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; } + + notes.innerHTML = data.notes; + currentSlide.contentWindow.Reveal.navigateTo(data.indexh, data.indexv); + nextSlide.contentWindow.Reveal.navigateTo(data.nextindexh, data.nextindexv); + }); + </script> + + </body> +</html> |