notes.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  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. function openNotes( notesFilePath ) {
  14. if( !notesFilePath ) {
  15. var jsFileLocation = document.querySelector('script[src$="notes.js"]').src; // this js file path
  16. jsFileLocation = jsFileLocation.replace(/notes\.js(\?.*)?$/, ''); // the js folder path
  17. notesFilePath = jsFileLocation + 'notes.html';
  18. }
  19. var notesPopup = window.open( notesFilePath, 'reveal.js - Notes', 'width=1100,height=700' );
  20. if( !notesPopup ) {
  21. alert( 'Speaker view popup failed to open. Please make sure popups are allowed and reopen the speaker view.' );
  22. return;
  23. }
  24. /**
  25. * Connect to the notes window through a postmessage handshake.
  26. * Using postmessage enables us to work in situations where the
  27. * origins differ, such as a presentation being opened from the
  28. * file system.
  29. */
  30. function connect() {
  31. // Keep trying to connect until we get a 'connected' message back
  32. var connectInterval = setInterval( function() {
  33. notesPopup.postMessage( JSON.stringify( {
  34. namespace: 'reveal-notes',
  35. type: 'connect',
  36. url: window.location.protocol + '//' + window.location.host + window.location.pathname + window.location.search,
  37. state: Reveal.getState()
  38. } ), '*' );
  39. }, 500 );
  40. window.addEventListener( 'message', function( event ) {
  41. var data = JSON.parse( event.data );
  42. if( data && data.namespace === 'reveal-notes' && data.type === 'connected' ) {
  43. clearInterval( connectInterval );
  44. onConnected();
  45. }
  46. if( data && data.namespace === 'reveal-notes' && data.type === 'call' ) {
  47. callRevealApi( data.methodName, data.arguments, data.callId );
  48. }
  49. } );
  50. }
  51. /**
  52. * Calls the specified Reveal.js method with the provided argument
  53. * and then pushes the result to the notes frame.
  54. */
  55. function callRevealApi( methodName, methodArguments, callId ) {
  56. var result = Reveal[methodName].call( Reveal, methodArguments );
  57. notesPopup.postMessage( JSON.stringify( {
  58. namespace: 'reveal-notes',
  59. type: 'return',
  60. result: result,
  61. callId: callId
  62. } ), '*' );
  63. }
  64. /**
  65. * Posts the current slide data to the notes window
  66. */
  67. function post( event ) {
  68. var slideElement = Reveal.getCurrentSlide(),
  69. notesElement = slideElement.querySelector( 'aside.notes' ),
  70. fragmentElement = slideElement.querySelector( '.current-fragment' );
  71. var messageData = {
  72. namespace: 'reveal-notes',
  73. type: 'state',
  74. notes: '',
  75. markdown: false,
  76. whitespace: 'normal',
  77. state: Reveal.getState()
  78. };
  79. // Look for notes defined in a slide attribute
  80. if( slideElement.hasAttribute( 'data-notes' ) ) {
  81. messageData.notes = slideElement.getAttribute( 'data-notes' );
  82. messageData.whitespace = 'pre-wrap';
  83. }
  84. // Look for notes defined in a fragment
  85. if( fragmentElement ) {
  86. var fragmentNotes = fragmentElement.querySelector( 'aside.notes' );
  87. if( fragmentNotes ) {
  88. notesElement = fragmentNotes;
  89. }
  90. else if( fragmentElement.hasAttribute( 'data-notes' ) ) {
  91. messageData.notes = fragmentElement.getAttribute( 'data-notes' );
  92. messageData.whitespace = 'pre-wrap';
  93. // In case there are slide notes
  94. notesElement = null;
  95. }
  96. }
  97. // Look for notes defined in an aside element
  98. if( notesElement ) {
  99. messageData.notes = notesElement.innerHTML;
  100. messageData.markdown = typeof notesElement.getAttribute( 'data-markdown' ) === 'string';
  101. }
  102. notesPopup.postMessage( JSON.stringify( messageData ), '*' );
  103. }
  104. /**
  105. * Called once we have established a connection to the notes
  106. * window.
  107. */
  108. function onConnected() {
  109. // Monitor events that trigger a change in state
  110. Reveal.addEventListener( 'slidechanged', post );
  111. Reveal.addEventListener( 'fragmentshown', post );
  112. Reveal.addEventListener( 'fragmenthidden', post );
  113. Reveal.addEventListener( 'overviewhidden', post );
  114. Reveal.addEventListener( 'overviewshown', post );
  115. Reveal.addEventListener( 'paused', post );
  116. Reveal.addEventListener( 'resumed', post );
  117. // Post the initial state
  118. post();
  119. }
  120. connect();
  121. }
  122. if( !/receiver/i.test( window.location.search ) ) {
  123. // If the there's a 'notes' query set, open directly
  124. if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) {
  125. openNotes();
  126. }
  127. // Open the notes when the 's' key is hit
  128. Reveal.addKeyBinding({keyCode: 83, key: 'S', description: 'Speaker notes view'}, function() {
  129. openNotes();
  130. } );
  131. }
  132. return { open: openNotes };
  133. })();