import speakerViewHTML from './speaker-view.html' import { marked } from 'marked'; /** * Handles opening of and synchronization with the reveal.js * notes window. * * Handshake process: * 1. This window posts 'connect' to notes window * - Includes URL of presentation to show * 2. Notes window responds with 'connected' when it is available * 3. This window proceeds to send the current presentation state * to the notes window */ const Plugin = () => { let connectInterval; let speakerWindow = null; let deck; /** * Opens a new speaker view window. */ function openSpeakerWindow() { // If a window is already open, focus it if( speakerWindow && !speakerWindow.closed ) { speakerWindow.focus(); } else { speakerWindow = window.open( 'about:blank', 'reveal.js - Notes', 'width=1100,height=700' ); speakerWindow.marked = marked; speakerWindow.document.write( speakerViewHTML ); if( !speakerWindow ) { alert( 'Speaker view popup failed to open. Please make sure popups are allowed and reopen the speaker view.' ); return; } connect(); } } /** * Reconnect with an existing speaker view window. */ function reconnectSpeakerWindow( reconnectWindow ) { if( speakerWindow && !speakerWindow.closed ) { speakerWindow.focus(); } else { speakerWindow = reconnectWindow; window.addEventListener( 'message', onPostMessage ); onConnected(); } } /** * Connect to the notes window through a postmessage handshake. * Using postmessage enables us to work in situations where the * origins differ, such as a presentation being opened from the * file system. */ function connect() { const presentationURL = deck.getConfig().url; const url = typeof presentationURL === 'string' ? presentationURL : window.location.protocol + '//' + window.location.host + window.location.pathname + window.location.search; // Keep trying to connect until we get a 'connected' message back connectInterval = setInterval( function() { speakerWindow.postMessage( JSON.stringify( { namespace: 'reveal-notes', type: 'connect', state: deck.getState(), url } ), '*' ); }, 500 ); window.addEventListener( 'message', onPostMessage ); } /** * Calls the specified Reveal.js method with the provided argument * and then pushes the result to the notes frame. */ function callRevealApi( methodName, methodArguments, callId ) { let result = deck[methodName].apply( deck, methodArguments ); speakerWindow.postMessage( JSON.stringify( { namespace: 'reveal-notes', type: 'return', result, callId } ), '*' ); } /** * Posts the current slide data to the notes window. */ function post( event ) { let slideElement = deck.getCurrentSlide(), notesElements = slideElement.querySelectorAll( 'aside.notes' ), fragmentElement = slideElement.querySelector( '.current-fragment' ); let messageData = { namespace: 'reveal-notes', type: 'state', notes: '', markdown: false, whitespace: 'normal', state: deck.getState() }; // Look for notes defined in a slide attribute if( slideElement.hasAttribute( 'data-notes' ) ) { messageData.notes = slideElement.getAttribute( 'data-notes' ); messageData.whitespace = 'pre-wrap'; } // Look for notes defined in a fragment if( fragmentElement ) { let fragmentNotes = fragmentElement.querySelector( 'aside.notes' ); if( fragmentNotes ) { messageData.notes = fragmentNotes.innerHTML; messageData.markdown = typeof fragmentNotes.getAttribute( 'data-markdown' ) === 'string'; // Ignore other slide notes notesElements = null; } else if( fragmentElement.hasAttribute( 'data-notes' ) ) { messageData.notes = fragmentElement.getAttribute( 'data-notes' ); messageData.whitespace = 'pre-wrap'; // In case there are slide notes notesElements = null; } } // Look for notes defined in an aside element if( notesElements ) { messageData.notes = Array.from(notesElements).map( notesElement => notesElement.innerHTML ).join( '\n' ); messageData.markdown = notesElements[0] && typeof notesElements[0].getAttribute( 'data-markdown' ) === 'string'; } speakerWindow.postMessage( JSON.stringify( messageData ), '*' ); } /** * Check if the given event is from the same origin as the * current window. */ function isSameOriginEvent( event ) { try { return window.location.origin === event.source.location.origin; } catch ( error ) { return false; } } function onPostMessage( event ) { // Only allow same-origin messages // (added 12/5/22 as a XSS safeguard) if( isSameOriginEvent( event ) ) { let data = JSON.parse( event.data ); if( data && data.namespace === 'reveal-notes' && data.type === 'connected' ) { clearInterval( connectInterval ); onConnected(); } else if( data && data.namespace === 'reveal-notes' && data.type === 'call' ) { callRevealApi( data.methodName, data.arguments, data.callId ); } } } /** * Called once we have established a connection to the notes * window. */ function onConnected() { // Monitor events that trigger a change in state deck.on( 'slidechanged', post ); deck.on( 'fragmentshown', post ); deck.on( 'fragmenthidden', post ); deck.on( 'overviewhidden', post ); deck.on( 'overviewshown', post ); deck.on( 'paused', post ); deck.on( 'resumed', post ); // Post the initial state post(); } return { id: 'notes', init: function( reveal ) { deck = reveal; if( !/receiver/i.test( window.location.search ) ) { // If the there's a 'notes' query set, open directly if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) { openSpeakerWindow(); } else { // Keep listening for speaker view hearbeats. If we receive a // heartbeat from an orphaned window, reconnect it. This ensures // that we remain connected to the notes even if the presentation // is reloaded. window.addEventListener( 'message', event => { if( !speakerWindow && typeof event.data === 'string' ) { let data; try { data = JSON.parse( event.data ); } catch( error ) {} if( data && data.namespace === 'reveal-notes' && data.type === 'heartbeat' ) { reconnectSpeakerWindow( event.source ); } } }); } // Open the notes when the 's' key is hit deck.addKeyBinding({keyCode: 83, key: 'S', description: 'Speaker notes view'}, function() { openSpeakerWindow(); } ); } }, open: openSpeakerWindow }; }; export default Plugin;