notes.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  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. } );
  43. }
  44. /**
  45. * Posts the current slide data to the notes window
  46. */
  47. function post(event) {
  48. var slideElement = Reveal.getCurrentSlide(),
  49. notesElement = slideElement.querySelector( 'aside.notes' );
  50. var messageData = {
  51. namespace: 'reveal-notes',
  52. type: 'state',
  53. notes: '',
  54. markdown: false,
  55. whitespace: 'normal',
  56. state: Reveal.getState()
  57. };
  58. // Look for notes defined in a fragment, if it is a fragmentshown event
  59. if (event && event.hasOwnProperty('fragment')) {
  60. var innerNotes = event.fragment.querySelector( 'aside.notes' );
  61. if ( innerNotes) {
  62. notesElement = innerNotes;
  63. }
  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 an aside element
  71. if( notesElement ) {
  72. messageData.notes = notesElement.innerHTML;
  73. messageData.markdown = typeof notesElement.getAttribute( 'data-markdown' ) === 'string';
  74. }
  75. notesPopup.postMessage( JSON.stringify( messageData ), '*' );
  76. }
  77. /**
  78. * Called once we have established a connection to the notes
  79. * window.
  80. */
  81. function onConnected() {
  82. // Monitor events that trigger a change in state
  83. Reveal.addEventListener( 'slidechanged', post );
  84. Reveal.addEventListener( 'fragmentshown', post );
  85. Reveal.addEventListener( 'fragmenthidden', post );
  86. Reveal.addEventListener( 'overviewhidden', post );
  87. Reveal.addEventListener( 'overviewshown', post );
  88. Reveal.addEventListener( 'paused', post );
  89. Reveal.addEventListener( 'resumed', post );
  90. // Post the initial state
  91. post();
  92. }
  93. connect();
  94. }
  95. if( !/receiver/i.test( window.location.search ) ) {
  96. // If the there's a 'notes' query set, open directly
  97. if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) {
  98. openNotes();
  99. }
  100. // Open the notes when the 's' key is hit
  101. document.addEventListener( 'keydown', function( event ) {
  102. // Disregard the event if the target is editable or a
  103. // modifier is present
  104. if ( document.querySelector( ':focus' ) !== null || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) return;
  105. // Disregard the event if keyboard is disabled
  106. if ( Reveal.getConfig().keyboard === false ) return;
  107. if( event.keyCode === 83 ) {
  108. event.preventDefault();
  109. openNotes();
  110. }
  111. }, false );
  112. // Show our keyboard shortcut in the reveal.js help overlay
  113. if( window.Reveal ) Reveal.registerKeyboardShortcut( 'S', 'Speaker notes view' );
  114. }
  115. return { open: openNotes };
  116. })();