Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place. Commercial Alternative to JupyterHub.

1
/**
2
 * Handles opening of and synchronization with the reveal.js
3
 * notes window.
4
 *
5
 * Handshake process:
6
 * 1. This window posts 'connect' to notes window
7
 *    - Includes URL of presentation to show
8
 * 2. Notes window responds with 'connected' when it is available
9
 * 3. This window proceeds to send the current presentation state
10
 *    to the notes window
11
 */
12
var RevealNotes = (function() {
13

14
	function openNotes( notesFilePath ) {
15

16
		if( !notesFilePath ) {
17
			var jsFileLocation = document.querySelector('script[src$="notes.js"]').src;  // this js file path
18
			jsFileLocation = jsFileLocation.replace(/notes\.js(\?.*)?$/, '');   // the js folder path
19
			notesFilePath = jsFileLocation + 'notes.html';
20
		}
21

22
		var notesPopup = window.open( notesFilePath, 'reveal.js - Notes', 'width=1100,height=700' );
23

24
		// Allow popup window access to Reveal API
25
		notesPopup.Reveal = this.Reveal;
26

27
		/**
28
		 * Connect to the notes window through a postmessage handshake.
29
		 * Using postmessage enables us to work in situations where the
30
		 * origins differ, such as a presentation being opened from the
31
		 * file system.
32
		 */
33
		function connect() {
34
			// Keep trying to connect until we get a 'connected' message back
35
			var connectInterval = setInterval( function() {
36
				notesPopup.postMessage( JSON.stringify( {
37
					namespace: 'reveal-notes',
38
					type: 'connect',
39
					url: window.location.protocol + '//' + window.location.host + window.location.pathname + window.location.search,
40
					state: Reveal.getState()
41
				} ), '*' );
42
			}, 500 );
43

44
			window.addEventListener( 'message', function( event ) {
45
				var data = JSON.parse( event.data );
46
				if( data && data.namespace === 'reveal-notes' && data.type === 'connected' ) {
47
					clearInterval( connectInterval );
48
					onConnected();
49
				}
50
			} );
51
		}
52

53
		/**
54
		 * Posts the current slide data to the notes window
55
		 */
56
		function post( event ) {
57

58
			var slideElement = Reveal.getCurrentSlide(),
59
				notesElement = slideElement.querySelector( 'aside.notes' ),
60
				fragmentElement = slideElement.querySelector( '.current-fragment' );
61

62
			var messageData = {
63
				namespace: 'reveal-notes',
64
				type: 'state',
65
				notes: '',
66
				markdown: false,
67
				whitespace: 'normal',
68
				state: Reveal.getState()
69
			};
70

71
			// Look for notes defined in a slide attribute
72
			if( slideElement.hasAttribute( 'data-notes' ) ) {
73
				messageData.notes = slideElement.getAttribute( 'data-notes' );
74
				messageData.whitespace = 'pre-wrap';
75
			}
76

77
			// Look for notes defined in a fragment
78
			if( fragmentElement ) {
79
				var fragmentNotes = fragmentElement.querySelector( 'aside.notes' );
80
				if( fragmentNotes ) {
81
					notesElement = fragmentNotes;
82
				}
83
				else if( fragmentElement.hasAttribute( 'data-notes' ) ) {
84
					messageData.notes = fragmentElement.getAttribute( 'data-notes' );
85
					messageData.whitespace = 'pre-wrap';
86

87
					// In case there are slide notes
88
					notesElement = null;
89
				}
90
			}
91

92
			// Look for notes defined in an aside element
93
			if( notesElement ) {
94
				messageData.notes = notesElement.innerHTML;
95
				messageData.markdown = typeof notesElement.getAttribute( 'data-markdown' ) === 'string';
96
			}
97

98
			notesPopup.postMessage( JSON.stringify( messageData ), '*' );
99

100
		}
101

102
		/**
103
		 * Called once we have established a connection to the notes
104
		 * window.
105
		 */
106
		function onConnected() {
107

108
			// Monitor events that trigger a change in state
109
			Reveal.addEventListener( 'slidechanged', post );
110
			Reveal.addEventListener( 'fragmentshown', post );
111
			Reveal.addEventListener( 'fragmenthidden', post );
112
			Reveal.addEventListener( 'overviewhidden', post );
113
			Reveal.addEventListener( 'overviewshown', post );
114
			Reveal.addEventListener( 'paused', post );
115
			Reveal.addEventListener( 'resumed', post );
116

117
			// Post the initial state
118
			post();
119

120
		}
121

122
		connect();
123

124
	}
125

126
	if( !/receiver/i.test( window.location.search ) ) {
127

128
		// If the there's a 'notes' query set, open directly
129
		if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) {
130
			openNotes();
131
		}
132

133
		// Open the notes when the 's' key is hit
134
		document.addEventListener( 'keydown', function( event ) {
135
			// Disregard the event if the target is editable or a
136
			// modifier is present
137
			if ( document.querySelector( ':focus' ) !== null || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) return;
138

139
			// Disregard the event if keyboard is disabled
140
			if ( Reveal.getConfig().keyboard === false ) return;
141

142
			if( event.keyCode === 83 ) {
143
				event.preventDefault();
144
				openNotes();
145
			}
146
		}, false );
147

148
		// Show our keyboard shortcut in the reveal.js help overlay
149
		if( window.Reveal ) Reveal.registerKeyboardShortcut( 'S', 'Speaker notes view' );
150

151
	}
152

153
	return { open: openNotes };
154

155
})();
156

157