notes.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  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() {
  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 slide attribute
  59. if( slideElement.hasAttribute( 'data-notes' ) ) {
  60. messageData.notes = slideElement.getAttribute( 'data-notes' );
  61. messageData.whitespace = 'pre-wrap';
  62. }
  63. // Look for notes defined in an aside element
  64. if( notesElement ) {
  65. messageData.notes = notesElement.innerHTML;
  66. messageData.markdown = typeof notesElement.getAttribute( 'data-markdown' ) === 'string';
  67. }
  68. notesPopup.postMessage( JSON.stringify( messageData ), '*' );
  69. }
  70. /**
  71. * Called once we have established a connection to the notes
  72. * window.
  73. */
  74. function onConnected() {
  75. // Monitor events that trigger a change in state
  76. Reveal.addEventListener( 'slidechanged', post );
  77. Reveal.addEventListener( 'fragmentshown', post );
  78. Reveal.addEventListener( 'fragmenthidden', post );
  79. Reveal.addEventListener( 'overviewhidden', post );
  80. Reveal.addEventListener( 'overviewshown', post );
  81. Reveal.addEventListener( 'paused', post );
  82. Reveal.addEventListener( 'resumed', post );
  83. // Post the initial state
  84. post();
  85. }
  86. connect();
  87. }
  88. if( !/receiver/i.test( window.location.search ) ) {
  89. // If the there's a 'notes' query set, open directly
  90. if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) {
  91. openNotes();
  92. }
  93. // Open the notes when the 's' key is hit
  94. document.addEventListener( 'keydown', function( event ) {
  95. // Disregard the event if the target is editable or a
  96. // modifier is present
  97. if ( document.querySelector( ':focus' ) !== null || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) return;
  98. // Disregard the event if keyboard is disabled
  99. if ( Reveal.getConfig().keyboard === false ) return;
  100. if( event.keyCode === 83 ) {
  101. event.preventDefault();
  102. openNotes();
  103. }
  104. }, false );
  105. // Show our keyboard shortcut in the reveal.js help overlay
  106. if( window.Reveal ) Reveal.registerKeyboardShortcut( 'S', 'Speaker notes view' );
  107. }
  108. return { open: openNotes };
  109. })();