##// END OF EJS Templates
upstream » ipython
RSS

Clone from https://github.com/ipython/ipython.git

Added notes js and template to support speaker notes.
damianavila -
Show More
Show file before | Show file after | Hide comments
@@ -0,0 +1,98 b''
1 /**
2 * Handles opening of and synchronization with the reveal.js
3 * notes window.
4 */
5 var RevealNotes = (function() {
6
7 function openNotes() {
8 var notesPopup = window.open( 'templates/notes.html', 'reveal.js - Notes', 'width=1120,height=850' );
9
10 // Fires when slide is changed
11 Reveal.addEventListener( 'slidechanged', function( event ) {
12 post('slidechanged');
13 } );
14
15 // Fires when a fragment is shown
16 Reveal.addEventListener( 'fragmentshown', function( event ) {
17 post('fragmentshown');
18 } );
19
20 // Fires when a fragment is hidden
21 Reveal.addEventListener( 'fragmenthidden', function( event ) {
22 post('fragmenthidden');
23 } );
24
25 /**
26 * Posts the current slide data to the notes window
27 *
28 * @param {String} eventType Expecting 'slidechanged', 'fragmentshown'
29 * or 'fragmenthidden' set in the events above to define the needed
30 * slideDate.
31 */
32 function post( eventType ) {
33 var slideElement = Reveal.getCurrentSlide(),
34 messageData;
35
36 if( eventType === 'slidechanged' ) {
37 var notes = slideElement.querySelector( 'aside.notes' ),
38 indexh = Reveal.getIndices().h,
39 indexv = Reveal.getIndices().v,
40 nextindexh,
41 nextindexv;
42
43 if( slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION' ) {
44 nextindexh = indexh;
45 nextindexv = indexv + 1;
46 } else {
47 nextindexh = indexh + 1;
48 nextindexv = 0;
49 }
50
51 messageData = {
52 notes : notes ? notes.innerHTML : '',
53 indexh : indexh,
54 indexv : indexv,
55 nextindexh : nextindexh,
56 nextindexv : nextindexv,
57 markdown : notes ? typeof notes.getAttribute( 'data-markdown' ) === 'string' : false
58 };
59 }
60 else if( eventType === 'fragmentshown' ) {
61 messageData = {
62 fragment : 'next'
63 };
64 }
65 else if( eventType === 'fragmenthidden' ) {
66 messageData = {
67 fragment : 'prev'
68 };
69 }
70
71 notesPopup.postMessage( JSON.stringify( messageData ), '*' );
72 }
73
74 // Navigate to the current slide when the notes are loaded
75 notesPopup.addEventListener( 'load', function( event ) {
76 post('slidechanged');
77 }, false );
78 }
79
80 // If the there's a 'notes' query set, open directly
81 if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) {
82 openNotes();
83 }
84
85 // Open the notes when the 's' key is hit
86 document.addEventListener( 'keydown', function( event ) {
87 // Disregard the event if the target is editable or a
88 // modifier is present
89 if ( document.querySelector( ':focus' ) !== null || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) return;
90
91 if( event.keyCode === 83 ) {
92 event.preventDefault();
93 openNotes();
94 }
95 }, false );
96
97 return { open: openNotes };
98 })();
Show file before | Show file after | Hide comments
@@ -0,0 +1,143 b''
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5
6 <title>reveal.js - Slide Notes</title>
7
8 <style>
9 body {
10 font-family: Helvetica;
11 }
12
13 #notes {
14 font-size: 24px;
15 width: 640px;
16 margin-top: 5px;
17 }
18
19 #wrap-current-slide {
20 width: 640px;
21 height: 512px;
22 float: left;
23 overflow: hidden;
24 }
25
26 #current-slide {
27 width: 1280px;
28 height: 1024px;
29 border: none;
30
31 -webkit-transform-origin: 0 0;
32 -moz-transform-origin: 0 0;
33 -ms-transform-origin: 0 0;
34 -o-transform-origin: 0 0;
35 transform-origin: 0 0;
36
37 -webkit-transform: scale(0.5);
38 -moz-transform: scale(0.5);
39 -ms-transform: scale(0.5);
40 -o-transform: scale(0.5);
41 transform: scale(0.5);
42 }
43
44 #wrap-next-slide {
45 width: 448px;
46 height: 358px;
47 float: left;
48 margin: 0 0 0 10px;
49 overflow: hidden;
50 }
51
52 #next-slide {
53 width: 1280px;
54 height: 1024px;
55 border: none;
56
57 -webkit-transform-origin: 0 0;
58 -moz-transform-origin: 0 0;
59 -ms-transform-origin: 0 0;
60 -o-transform-origin: 0 0;
61 transform-origin: 0 0;
62
63 -webkit-transform: scale(0.35);
64 -moz-transform: scale(0.35);
65 -ms-transform: scale(0.35);
66 -o-transform: scale(0.35);
67 transform: scale(0.35);
68 }
69
70 .slides {
71 position: relative;
72 margin-bottom: 10px;
73 border: 1px solid black;
74 border-radius: 2px;
75 background: rgb(28, 30, 32);
76 }
77
78 .slides span {
79 position: absolute;
80 top: 3px;
81 left: 3px;
82 font-weight: bold;
83 font-size: 14px;
84 color: rgba( 255, 255, 255, 0.9 );
85 }
86 </style>
87 </head>
88
89 <body>
90
91 <div id="wrap-current-slide" class="slides">
92 <iframe src="../example_nb_tour_slides.html" width="1280" height="1024" id="current-slide"></iframe>
93 </div>
94
95 <div id="wrap-next-slide" class="slides">
96 <iframe src="../example_nb_tour_slides.html" width="640" height="512" id="next-slide"></iframe>
97 <span>UPCOMING:</span>
98 </div>
99 <div id="notes"></div>
100
101 <script src="../reveal/plugin/markdown/showdown.js"></script>
102 <script>
103 window.addEventListener( 'load', function() {
104
105 (function( window, undefined ) {
106 var notes = document.getElementById( 'notes' ),
107 currentSlide = document.getElementById( 'current-slide' ),
108 nextSlide = document.getElementById( 'next-slide' );
109
110 window.addEventListener( 'message', function( event ) {
111 var data = JSON.parse( event.data );
112 // No need for updating the notes in case of fragment changes
113 if ( data.notes !== undefined) {
114 if( data.markdown ) {
115 notes.innerHTML = (new Showdown.converter()).makeHtml( data.notes );
116 }
117 else {
118 notes.innerHTML = data.notes;
119 }
120 }
121
122 // Showing and hiding fragments
123 if( data.fragment === 'next' ) {
124 currentSlide.contentWindow.Reveal.nextFragment();
125 }
126 else if( data.fragment === 'prev' ) {
127 currentSlide.contentWindow.Reveal.prevFragment();
128 }
129 else {
130 // Update the note slides
131 currentSlide.contentWindow.Reveal.slide( data.indexh, data.indexv );
132 nextSlide.contentWindow.Reveal.slide( data.nextindexh, data.nextindexv );
133 }
134
135 }, false );
136
137 })( window );
138
139 }, false );
140
141 </script>
142 </body>
143 </html>
Show file before | Show file after | Hide comments
@@ -42,7 +42,7 b''
42 42 { src: 'reveal/lib/js/classList.js', condition: function() { return !document.body.classList; } },
43 43 { src: 'reveal/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
44 44 { src: 'reveal/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
45 { src: 'reveal/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } },
45 { src: 'js/notes.js', async: true, condition: function() { return !!document.body.classList; } },
46 46 { src: 'https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS_HTML', async: true },
47 47 { src: 'js/revealmathjax.js', async: true}
48 48 ]
General Comments 0
You need to be logged in to leave comments. Login now