xobs/lca2019-talk
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Replacing speakernotes plugin with a simple postMessage system

Browse Source
This commit is contained in:
Eric J. Duran
2012-10-17 17:46:43 -04:00
parent 558c21e1a3
commit 070a1e3ee5
4 changed files with 52 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
index.html
View File

@@ -351,6 +351,35 @@ function linkify( selector ) {
]
});
// Set up simple postMessage notes system.
var url = window.location.href;
if(url.indexOf('?' + 'notes' + '=') !== 'true') {
var notesPopup = window.open('notes.html');
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,
markdown : notes ? typeof notes.getAttribute('data-markdown') === 'string' : false
};
notesPopup.postMessage(JSON.stringify(slideData), '*');
});
}
</script>
</body>

23
plugin/speakernotes/notes.html → notes.html
View File

@@ -89,40 +89,33 @@
<body>
<div id="wrap-current-slide" class="slides">
<iframe src="/?receiver" width="1280" height="1024" id="current-slide"></iframe>
<iframe src="index.html" 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>
<iframe src="index.html" 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 src="lib/js/showdown.js"></script>
<script>
var socketId = '{{socketId}}';
var socket = io.connect(window.location.origin);
(function (window, undefined) {
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; }
window.addEventListener("message", function(e){
var data = JSON.parse(e.data);
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);
});
}, false);
})(window);
</script>
</body>
</html>

38
plugin/speakernotes/client.js
View File

@@ -1,38 +0,0 @@
(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);
} );
}());

55
plugin/speakernotes/index.js
View File

@@ -1,55 +0,0 @@
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/speakernotes/notes.html', function(err, data) {
res.send(Mustache.to_html(data.toString(), {
socketId : req.params.socketId
}));
});
// fs.createReadStream(opts.baseDir + 'speakernotes/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" );