aboutsummaryrefslogtreecommitdiff
path: root/plugin/notes-server
diff options
context:
space:
mode:
authorHakim El Hattab <hakim.elhattab@gmail.com>2012-10-20 20:40:52 -0400
committerHakim El Hattab <hakim.elhattab@gmail.com>2012-10-20 20:40:52 -0400
commitc6f8a44edf258567bc8324e45adb66036feb00ee (patch)
tree9db01a89817a526ffedf0adb19b533aa821ce51f /plugin/notes-server
parent5188951a0f1ed38b2945c5078369508c491c4a8c (diff)
parent070a1e3ee5bbe44b6f3cdadedb031f3eee433ac6 (diff)
downloadperl-software-in-gnu-guix-c6f8a44edf258567bc8324e45adb66036feb00ee.tar
perl-software-in-gnu-guix-c6f8a44edf258567bc8324e45adb66036feb00ee.tar.gz
new postMessage-based notes plugin, moved node-based notes to notes-server (#190)
Diffstat (limited to 'plugin/notes-server')
-rw-r--r--plugin/notes-server/client.js38
-rw-r--r--plugin/notes-server/index.js55
-rw-r--r--plugin/notes-server/notes.html128
3 files changed, 221 insertions, 0 deletions
diff --git a/plugin/notes-server/client.js b/plugin/notes-server/client.js
new file mode 100644
index 0000000..d805601
--- /dev/null
+++ b/plugin/notes-server/client.js
@@ -0,0 +1,38 @@
+(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);
+ } );
+}()); \ No newline at end of file
diff --git a/plugin/notes-server/index.js b/plugin/notes-server/index.js
new file mode 100644
index 0000000..1fe5bab
--- /dev/null
+++ b/plugin/notes-server/index.js
@@ -0,0 +1,55 @@
+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', 'images', '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/notes-server/notes.html', function(err, data) {
+ res.send(Mustache.to_html(data.toString(), {
+ socketId : req.params.socketId
+ }));
+ });
+ // fs.createReadStream(opts.baseDir + 'notes-server/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" ); \ No newline at end of file
diff --git a/plugin/notes-server/notes.html b/plugin/notes-server/notes.html
new file mode 100644
index 0000000..548bc12
--- /dev/null
+++ b/plugin/notes-server/notes.html
@@ -0,0 +1,128 @@
+<!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;
+
+ -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);
+ -o-transform: scale(0.5);
+ transform: scale(0.5);
+ }
+
+ #wrap-next-slide {
+ width: 448px;
+ height: 358px;
+ float: left;
+ margin: 0 0 0 10px;
+ overflow: hidden;
+ }
+
+ #next-slide {
+ 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.35);
+ -moz-transform: scale(0.35);
+ -ms-transform: scale(0.35);
+ -o-transform: scale(0.35);
+ transform: scale(0.35);
+ }
+
+ .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 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);
+ });
+ </script>
+
+ </body>
+</html> \ No newline at end of file
generated by cgit v1.2.3 (git 2.45.0) at 2024-11-22 00:39:49 +0000