Replacing speakernotes plugin with a simple postMessage system
This commit is contained in:
Eric J. Duran
parent
558c21e1a3
commit
070a1e3ee5
31
index.html
31
index.html
@ -350,7 +350,36 @@ function linkify( selector ) {
|
||||
{ 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>
|
||||
|
||||
</body>
|
||||
|
||||
@ -27,13 +27,13 @@
|
||||
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);
|
||||
@ -53,7 +53,7 @@
|
||||
width: 1280px;
|
||||
height: 1024px;
|
||||
border: none;
|
||||
|
||||
|
||||
-webkit-transform-origin: 0 0;
|
||||
-moz-transform-origin: 0 0;
|
||||
-ms-transform-origin: 0 0;
|
||||
@ -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);
|
||||
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);
|
||||
});
|
||||
(function (window, undefined) {
|
||||
var notes = document.getElementById('notes');
|
||||
var currentSlide = document.getElementById('current-slide');
|
||||
var nextSlide = document.getElementById('next-slide');
|
||||
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>
|
||||
@ -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);
|
||||
} );
|
||||
}());
|
||||
@ -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" );
|
||||
Loading…
Reference in New Issue
Block a user