notes.js 4.3 KB

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