notes.js 4.6 KB

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