Strona główna Odkrywaj Pomoc
Zaloguj się
OSInet
/
assets__prague2013_blocks
2
0
Forkuj 0
Pliki Oczekujące zmiany 0
Przeglądaj źródła

Replacing speakernotes plugin with a simple postMessage system

Eric J. Duran 12 lat temu
rodzic
558c21e1a3
commit
070a1e3ee5
4 zmienionych plików z 52 dodań i 123 usunięć
Widok podzielony Pokaż statystyki zmian
  1. 30 1
      index.html
  2. 22 29
      notes.html
  3. 0 38
      plugin/speakernotes/client.js
  4. 0 55
      plugin/speakernotes/index.js

+ 30 - 1
index.html
Wyświetl plik 

@@ -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>

+ 22 - 29
plugin/speakernotes/notes.html → notes.html
Wyświetl plik 

@@ -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>

+ 0 - 38
plugin/speakernotes/client.js
Wyświetl plik 

@@ -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);
 
-	} );
 
-}());

+ 0 - 55
plugin/speakernotes/index.js
Wyświetl plik 

@@ -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" );