notes.js 4.9 KB

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