notes.js 3.7 KB

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