summaryrefslogtreecommitdiff
path: root/cardiff2015/slides/plugin/postmessage
diff options
context:
space:
mode:
Diffstat (limited to 'cardiff2015/slides/plugin/postmessage')
-rw-r--r--cardiff2015/slides/plugin/postmessage/example.html39
-rw-r--r--cardiff2015/slides/plugin/postmessage/postmessage.js42
2 files changed, 81 insertions, 0 deletions
diff --git a/cardiff2015/slides/plugin/postmessage/example.html b/cardiff2015/slides/plugin/postmessage/example.html
new file mode 100644
index 0000000..cc57a7b
--- /dev/null
+++ b/cardiff2015/slides/plugin/postmessage/example.html
@@ -0,0 +1,39 @@
+<html>
+ <body>
+
+ <iframe id="reveal" src="../../index.html" style="border: 0;" width="500" height="500"></iframe>
+
+ <div>
+ <input id="back" type="button" value="go back"/>
+ <input id="ahead" type="button" value="go ahead"/>
+ <input id="slideto" type="button" value="slideto 2-2"/>
+ </div>
+
+ <script>
+
+ (function (){
+
+ var back = document.getElementById( 'back' ),
+ ahead = document.getElementById( 'ahead' ),
+ slideto = document.getElementById( 'slideto' ),
+ reveal = window.frames[0];
+
+ back.addEventListener( 'click', function () {
+
+ reveal.postMessage( JSON.stringify({method: 'prev', args: []}), '*' );
+ }, false );
+
+ ahead.addEventListener( 'click', function (){
+ reveal.postMessage( JSON.stringify({method: 'next', args: []}), '*' );
+ }, false );
+
+ slideto.addEventListener( 'click', function (){
+ reveal.postMessage( JSON.stringify({method: 'slide', args: [2,2]}), '*' );
+ }, false );
+
+ }());
+
+ </script>
+
+ </body>
+</html>
diff --git a/cardiff2015/slides/plugin/postmessage/postmessage.js b/cardiff2015/slides/plugin/postmessage/postmessage.js
new file mode 100644
index 0000000..d0f4140
--- /dev/null
+++ b/cardiff2015/slides/plugin/postmessage/postmessage.js
@@ -0,0 +1,42 @@
+/*
+
+ simple postmessage plugin
+
+ Useful when a reveal slideshow is inside an iframe.
+ It allows to call reveal methods from outside.
+
+ Example:
+ var reveal = window.frames[0];
+
+ // Reveal.prev();
+ reveal.postMessage(JSON.stringify({method: 'prev', args: []}), '*');
+ // Reveal.next();
+ reveal.postMessage(JSON.stringify({method: 'next', args: []}), '*');
+ // Reveal.slide(2, 2);
+ reveal.postMessage(JSON.stringify({method: 'slide', args: [2,2]}), '*');
+
+ Add to the slideshow:
+
+ dependencies: [
+ ...
+ { src: 'plugin/postmessage/postmessage.js', async: true, condition: function() { return !!document.body.classList; } }
+ ]
+
+*/
+
+(function (){
+
+ window.addEventListener( "message", function ( event ) {
+ var data = JSON.parse( event.data ),
+ method = data.method,
+ args = data.args;
+
+ if( typeof Reveal[method] === 'function' ) {
+ Reveal[method].apply( Reveal, data.args );
+ }
+ }, false);
+
+}());
+
+
+