notes.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>reveal.js - Slide Notes</title>
  6. <style>
  7. body {
  8. font-family: Helvetica;
  9. font-size: 18px;
  10. }
  11. #current-slide,
  12. #upcoming-slide,
  13. #speaker-controls {
  14. padding: 6px;
  15. box-sizing: border-box;
  16. -moz-box-sizing: border-box;
  17. }
  18. #current-slide iframe,
  19. #upcoming-slide iframe {
  20. width: 100%;
  21. height: 100%;
  22. border: 1px solid #ddd;
  23. }
  24. #current-slide .label,
  25. #upcoming-slide .label {
  26. position: absolute;
  27. top: 10px;
  28. left: 10px;
  29. z-index: 2;
  30. }
  31. .overlay-element {
  32. height: 34px;
  33. line-height: 34px;
  34. padding: 0 10px;
  35. text-shadow: none;
  36. background: rgba( 220, 220, 220, 0.8 );
  37. color: #222;
  38. font-size: 14px;
  39. }
  40. .overlay-element.interactive:hover {
  41. background: rgba( 220, 220, 220, 1 );
  42. }
  43. #current-slide {
  44. position: absolute;
  45. width: 60%;
  46. height: 100%;
  47. top: 0;
  48. left: 0;
  49. padding-right: 0;
  50. }
  51. #upcoming-slide {
  52. position: absolute;
  53. width: 40%;
  54. height: 40%;
  55. right: 0;
  56. top: 0;
  57. }
  58. /* Speaker controls */
  59. #speaker-controls {
  60. position: absolute;
  61. top: 40%;
  62. right: 0;
  63. width: 40%;
  64. height: 60%;
  65. overflow: auto;
  66. font-size: 18px;
  67. }
  68. .speaker-controls-time.hidden,
  69. .speaker-controls-notes.hidden {
  70. display: none;
  71. }
  72. .speaker-controls-time .label,
  73. .speaker-controls-notes .label {
  74. text-transform: uppercase;
  75. font-weight: normal;
  76. font-size: 0.66em;
  77. color: #666;
  78. margin: 0;
  79. }
  80. .speaker-controls-time {
  81. border-bottom: 1px solid rgba( 200, 200, 200, 0.5 );
  82. margin-bottom: 10px;
  83. padding: 10px 16px;
  84. padding-bottom: 20px;
  85. cursor: pointer;
  86. }
  87. .speaker-controls-time .reset-button {
  88. opacity: 0;
  89. float: right;
  90. color: #666;
  91. text-decoration: none;
  92. }
  93. .speaker-controls-time:hover .reset-button {
  94. opacity: 1;
  95. }
  96. .speaker-controls-time .timer,
  97. .speaker-controls-time .clock {
  98. width: 50%;
  99. font-size: 1.9em;
  100. }
  101. .speaker-controls-time .timer {
  102. float: left;
  103. }
  104. .speaker-controls-time .clock {
  105. float: right;
  106. text-align: right;
  107. }
  108. .speaker-controls-time span.mute {
  109. color: #bbb;
  110. }
  111. .speaker-controls-notes {
  112. padding: 10px 16px;
  113. }
  114. .speaker-controls-notes .value {
  115. margin-top: 5px;
  116. line-height: 1.4;
  117. font-size: 1.2em;
  118. }
  119. /* Layout selector */
  120. #speaker-layout {
  121. position: absolute;
  122. top: 10px;
  123. right: 10px;
  124. color: #222;
  125. z-index: 10;
  126. }
  127. #speaker-layout select {
  128. position: absolute;
  129. width: 100%;
  130. height: 100%;
  131. top: 0;
  132. left: 0;
  133. border: 0;
  134. box-shadow: 0;
  135. cursor: pointer;
  136. opacity: 0;
  137. font-size: 1em;
  138. background-color: transparent;
  139. -moz-appearance: none;
  140. -webkit-appearance: none;
  141. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  142. }
  143. #speaker-layout select:focus {
  144. outline: none;
  145. box-shadow: none;
  146. }
  147. .clear {
  148. clear: both;
  149. }
  150. /* Speaker layout: Wide */
  151. body[data-speaker-layout="wide"] #current-slide,
  152. body[data-speaker-layout="wide"] #upcoming-slide {
  153. width: 50%;
  154. height: 45%;
  155. padding: 6px;
  156. }
  157. body[data-speaker-layout="wide"] #current-slide {
  158. top: 0;
  159. left: 0;
  160. }
  161. body[data-speaker-layout="wide"] #upcoming-slide {
  162. top: 0;
  163. left: 50%;
  164. }
  165. body[data-speaker-layout="wide"] #speaker-controls {
  166. top: 45%;
  167. left: 0;
  168. width: 100%;
  169. height: 50%;
  170. font-size: 1.25em;
  171. }
  172. /* Speaker layout: Tall */
  173. body[data-speaker-layout="tall"] #current-slide,
  174. body[data-speaker-layout="tall"] #upcoming-slide {
  175. width: 45%;
  176. height: 50%;
  177. padding: 6px;
  178. }
  179. body[data-speaker-layout="tall"] #current-slide {
  180. top: 0;
  181. left: 0;
  182. }
  183. body[data-speaker-layout="tall"] #upcoming-slide {
  184. top: 50%;
  185. left: 0;
  186. }
  187. body[data-speaker-layout="tall"] #speaker-controls {
  188. padding-top: 40px;
  189. top: 0;
  190. left: 45%;
  191. width: 55%;
  192. height: 100%;
  193. font-size: 1.25em;
  194. }
  195. /* Speaker layout: Notes only */
  196. body[data-speaker-layout="notes-only"] #current-slide,
  197. body[data-speaker-layout="notes-only"] #upcoming-slide {
  198. display: none;
  199. }
  200. body[data-speaker-layout="notes-only"] #speaker-controls {
  201. padding-top: 40px;
  202. top: 0;
  203. left: 0;
  204. width: 100%;
  205. height: 100%;
  206. font-size: 1.25em;
  207. }
  208. </style>
  209. </head>
  210. <body>
  211. <div id="current-slide"></div>
  212. <div id="upcoming-slide"><span class="overlay-element label">Upcoming</span></div>
  213. <div id="speaker-controls">
  214. <div class="speaker-controls-time">
  215. <h4 class="label">Time <span class="reset-button">Click to Reset</span></h4>
  216. <div class="clock">
  217. <span class="clock-value">0:00 AM</span>
  218. </div>
  219. <div class="timer">
  220. <span class="hours-value">00</span><span class="minutes-value">:00</span><span class="seconds-value">:00</span>
  221. </div>
  222. <div class="clear"></div>
  223. </div>
  224. <div class="speaker-controls-notes hidden">
  225. <h4 class="label">Notes</h4>
  226. <div class="value"></div>
  227. </div>
  228. </div>
  229. <div id="speaker-layout" class="overlay-element interactive">
  230. <span class="speaker-layout-label"></span>
  231. <select class="speaker-layout-dropdown"></select>
  232. </div>
  233. <script src="/socket.io/socket.io.js"></script>
  234. <script src="/plugin/markdown/marked.js"></script>
  235. <script>
  236. (function() {
  237. var notes,
  238. notesValue,
  239. currentState,
  240. currentSlide,
  241. upcomingSlide,
  242. layoutLabel,
  243. layoutDropdown,
  244. connected = false;
  245. var socket = io.connect( window.location.origin ),
  246. socketId = '{{socketId}}';
  247. var SPEAKER_LAYOUTS = {
  248. 'default': 'Default',
  249. 'wide': 'Wide',
  250. 'tall': 'Tall',
  251. 'notes-only': 'Notes only'
  252. };
  253. socket.on( 'statechanged', function( data ) {
  254. // ignore data from sockets that aren't ours
  255. if( data.socketId !== socketId ) { return; }
  256. if( connected === false ) {
  257. connected = true;
  258. setupKeyboard();
  259. setupNotes();
  260. setupTimer();
  261. }
  262. handleStateMessage( data );
  263. } );
  264. setupLayout();
  265. // Load our presentation iframes
  266. setupIframes();
  267. // Once the iframes have loaded, emit a signal saying there's
  268. // a new subscriber which will trigger a 'statechanged'
  269. // message to be sent back
  270. window.addEventListener( 'message', function( event ) {
  271. var data = JSON.parse( event.data );
  272. if( data && data.namespace === 'reveal' ) {
  273. if( /ready/.test( data.eventName ) ) {
  274. socket.emit( 'new-subscriber', { socketId: socketId } );
  275. }
  276. }
  277. // Messages sent by reveal.js inside of the current slide preview
  278. if( data && data.namespace === 'reveal' ) {
  279. if( /slidechanged|fragmentshown|fragmenthidden|overviewshown|overviewhidden|paused|resumed/.test( data.eventName ) && currentState !== JSON.stringify( data.state ) ) {
  280. socket.emit( 'statechanged-speaker', { state: data.state } );
  281. }
  282. }
  283. } );
  284. /**
  285. * Called when the main window sends an updated state.
  286. */
  287. function handleStateMessage( data ) {
  288. // Store the most recently set state to avoid circular loops
  289. // applying the same state
  290. currentState = JSON.stringify( data.state );
  291. // No need for updating the notes in case of fragment changes
  292. if ( data.notes ) {
  293. notes.classList.remove( 'hidden' );
  294. if( data.markdown ) {
  295. notesValue.innerHTML = marked( data.notes );
  296. }
  297. else {
  298. notesValue.innerHTML = data.notes;
  299. }
  300. }
  301. else {
  302. notes.classList.add( 'hidden' );
  303. }
  304. // Update the note slides
  305. currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ] }), '*' );
  306. upcomingSlide.contentWindow.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ] }), '*' );
  307. upcomingSlide.contentWindow.postMessage( JSON.stringify({ method: 'next' }), '*' );
  308. }
  309. // Limit to max one state update per X ms
  310. handleStateMessage = debounce( handleStateMessage, 200 );
  311. /**
  312. * Forward keyboard events to the current slide window.
  313. * This enables keyboard events to work even if focus
  314. * isn't set on the current slide iframe.
  315. */
  316. function setupKeyboard() {
  317. document.addEventListener( 'keydown', function( event ) {
  318. currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'triggerKey', args: [ event.keyCode ] }), '*' );
  319. } );
  320. }
  321. /**
  322. * Creates the preview iframes.
  323. */
  324. function setupIframes() {
  325. var params = [
  326. 'receiver',
  327. 'progress=false',
  328. 'history=false',
  329. 'transition=none',
  330. 'backgroundTransition=none'
  331. ].join( '&' );
  332. var currentURL = '/?' + params + '&postMessageEvents=true';
  333. var upcomingURL = '/?' + params + '&controls=false';
  334. currentSlide = document.createElement( 'iframe' );
  335. currentSlide.setAttribute( 'width', 1280 );
  336. currentSlide.setAttribute( 'height', 1024 );
  337. currentSlide.setAttribute( 'src', currentURL );
  338. document.querySelector( '#current-slide' ).appendChild( currentSlide );
  339. upcomingSlide = document.createElement( 'iframe' );
  340. upcomingSlide.setAttribute( 'width', 640 );
  341. upcomingSlide.setAttribute( 'height', 512 );
  342. upcomingSlide.setAttribute( 'src', upcomingURL );
  343. document.querySelector( '#upcoming-slide' ).appendChild( upcomingSlide );
  344. }
  345. /**
  346. * Setup the notes UI.
  347. */
  348. function setupNotes() {
  349. notes = document.querySelector( '.speaker-controls-notes' );
  350. notesValue = document.querySelector( '.speaker-controls-notes .value' );
  351. }
  352. /**
  353. * Create the timer and clock and start updating them
  354. * at an interval.
  355. */
  356. function setupTimer() {
  357. var start = new Date(),
  358. timeEl = document.querySelector( '.speaker-controls-time' ),
  359. clockEl = timeEl.querySelector( '.clock-value' ),
  360. hoursEl = timeEl.querySelector( '.hours-value' ),
  361. minutesEl = timeEl.querySelector( '.minutes-value' ),
  362. secondsEl = timeEl.querySelector( '.seconds-value' );
  363. function _updateTimer() {
  364. var diff, hours, minutes, seconds,
  365. now = new Date();
  366. diff = now.getTime() - start.getTime();
  367. hours = Math.floor( diff / ( 1000 * 60 * 60 ) );
  368. minutes = Math.floor( ( diff / ( 1000 * 60 ) ) % 60 );
  369. seconds = Math.floor( ( diff / 1000 ) % 60 );
  370. clockEl.innerHTML = now.toLocaleTimeString( 'en-US', { hour12: true, hour: '2-digit', minute:'2-digit' } );
  371. hoursEl.innerHTML = zeroPadInteger( hours );
  372. hoursEl.className = hours > 0 ? '' : 'mute';
  373. minutesEl.innerHTML = ':' + zeroPadInteger( minutes );
  374. minutesEl.className = minutes > 0 ? '' : 'mute';
  375. secondsEl.innerHTML = ':' + zeroPadInteger( seconds );
  376. }
  377. // Update once directly
  378. _updateTimer();
  379. // Then update every second
  380. setInterval( _updateTimer, 1000 );
  381. timeEl.addEventListener( 'click', function() {
  382. start = new Date();
  383. _updateTimer();
  384. return false;
  385. } );
  386. }
  387. /**
  388. * Sets up the speaker view layout and layout selector.
  389. */
  390. function setupLayout() {
  391. layoutDropdown = document.querySelector( '.speaker-layout-dropdown' );
  392. layoutLabel = document.querySelector( '.speaker-layout-label' );
  393. // Render the list of available layouts
  394. for( var id in SPEAKER_LAYOUTS ) {
  395. var option = document.createElement( 'option' );
  396. option.setAttribute( 'value', id );
  397. option.textContent = SPEAKER_LAYOUTS[ id ];
  398. layoutDropdown.appendChild( option );
  399. }
  400. // Monitor the dropdown for changes
  401. layoutDropdown.addEventListener( 'change', function( event ) {
  402. setLayout( layoutDropdown.value );
  403. }, false );
  404. // Restore any currently persisted layout
  405. setLayout( getLayout() );
  406. }
  407. /**
  408. * Sets a new speaker view layout. The layout is persisted
  409. * in local storage.
  410. */
  411. function setLayout( value ) {
  412. var title = SPEAKER_LAYOUTS[ value ];
  413. layoutLabel.innerHTML = 'Layout' + ( title ? ( ': ' + title ) : '' );
  414. layoutDropdown.value = value;
  415. document.body.setAttribute( 'data-speaker-layout', value );
  416. // Persist locally
  417. if( window.localStorage ) {
  418. window.localStorage.setItem( 'reveal-speaker-layout', value );
  419. }
  420. }
  421. /**
  422. * Returns the ID of the most recently set speaker layout
  423. * or our default layout if none has been set.
  424. */
  425. function getLayout() {
  426. if( window.localStorage ) {
  427. var layout = window.localStorage.getItem( 'reveal-speaker-layout' );
  428. if( layout ) {
  429. return layout;
  430. }
  431. }
  432. // Default to the first record in the layouts hash
  433. for( var id in SPEAKER_LAYOUTS ) {
  434. return id;
  435. }
  436. }
  437. function zeroPadInteger( num ) {
  438. var str = '00' + parseInt( num );
  439. return str.substring( str.length - 2 );
  440. }
  441. /**
  442. * Limits the frequency at which a function can be called.
  443. */
  444. function debounce( fn, ms ) {
  445. var lastTime = 0,
  446. timeout;
  447. return function() {
  448. var args = arguments;
  449. var context = this;
  450. clearTimeout( timeout );
  451. var timeSinceLastCall = Date.now() - lastTime;
  452. if( timeSinceLastCall > ms ) {
  453. fn.apply( context, args );
  454. lastTime = Date.now();
  455. }
  456. else {
  457. timeout = setTimeout( function() {
  458. fn.apply( context, args );
  459. lastTime = Date.now();
  460. }, ms - timeSinceLastCall );
  461. }
  462. }
  463. }
  464. })();
  465. </script>
  466. </body>
  467. </html>