notes.js 4.6 KB

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