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'; } }
|
{ 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>
|
||||||
|
|||||||
@ -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>
|
||||||
@ -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