dirk
/
why-cant-we-deploy-today
1
0
Fork 0
Code Releases Activity

Replacing speakernotes plugin with a simple postMessage system

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
index.html
View File

@ -350,7 +350,36 @@ function linkify( selector ) {
{ src: 'plugin/speakernotes/client.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } } { src: 'plugin/speakernotes/client.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } }
] ]
}); });
// 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> </script>
</body> </body>

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

@ -27,13 +27,13 @@
width: 1280px; width: 1280px;
height: 1024px; height: 1024px;
border: none; border: none;
-webkit-transform-origin: 0 0; -webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0; -moz-transform-origin: 0 0;
-ms-transform-origin: 0 0; -ms-transform-origin: 0 0;
-o-transform-origin: 0 0; -o-transform-origin: 0 0;
transform-origin: 0 0; transform-origin: 0 0;
-webkit-transform: scale(0.5); -webkit-transform: scale(0.5);
-moz-transform: scale(0.5); -moz-transform: scale(0.5);
-ms-transform: scale(0.5); -ms-transform: scale(0.5);
@ -53,7 +53,7 @@
width: 1280px; width: 1280px;
height: 1024px; height: 1024px;
border: none; border: none;
-webkit-transform-origin: 0 0; -webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0; -moz-transform-origin: 0 0;
-ms-transform-origin: 0 0; -ms-transform-origin: 0 0;
@ -89,40 +89,33 @@
<body> <body>
<div id="wrap-current-slide" class="slides"> <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>
<div id="wrap-next-slide" class="slides"> <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> <span>UPCOMING:</span>
</div> </div>
<div id="notes"></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> <script>
var socketId = '{{socketId}}'; (function (window, undefined) {
var socket = io.connect(window.location.origin); var notes = document.getElementById('notes');
var notes = document.getElementById('notes'); var currentSlide = document.getElementById('current-slide');
var currentSlide = document.getElementById('current-slide'); var nextSlide = document.getElementById('next-slide');
var nextSlide = document.getElementById('next-slide'); window.addEventListener("message", function(e){
var data = JSON.parse(e.data);
socket.on('slidedata', function(data) { if (data.markdown) {
// ignore data from sockets that aren't ours notes.innerHTML = (new Showdown.converter()).makeHtml(data.notes);
if (data.socketId !== socketId) { return; } }
else {
if (data.markdown) { notes.innerHTML = data.notes;
notes.innerHTML = (new Showdown.converter()).makeHtml(data.notes); }
} currentSlide.contentWindow.Reveal.slide(data.indexh, data.indexv);
else { nextSlide.contentWindow.Reveal.slide(data.nextindexh, data.nextindexv);
notes.innerHTML = data.notes; }, false);
} })(window);
currentSlide.contentWindow.Reveal.slide(data.indexh, data.indexv);
nextSlide.contentWindow.Reveal.slide(data.nextindexh, data.nextindexv);
});
</script> </script>
</body> </body>
</html> </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" );