notes.html 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759
  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-pace .label,
  74. .speaker-controls-notes .label {
  75. text-transform: uppercase;
  76. font-weight: normal;
  77. font-size: 0.66em;
  78. color: #666;
  79. margin: 0;
  80. }
  81. .speaker-controls-time, .speaker-controls-pace {
  82. border-bottom: 1px solid rgba( 200, 200, 200, 0.5 );
  83. margin-bottom: 10px;
  84. padding: 10px 16px;
  85. padding-bottom: 20px;
  86. cursor: pointer;
  87. }
  88. .speaker-controls-time .reset-button {
  89. opacity: 0;
  90. float: right;
  91. color: #666;
  92. text-decoration: none;
  93. }
  94. .speaker-controls-time:hover .reset-button {
  95. opacity: 1;
  96. }
  97. .speaker-controls-time .timer,
  98. .speaker-controls-time .clock {
  99. width: 50%;
  100. }
  101. .speaker-controls-time .timer,
  102. .speaker-controls-time .clock,
  103. .speaker-controls-time .pacing .hours-value,
  104. .speaker-controls-time .pacing .minutes-value,
  105. .speaker-controls-time .pacing .seconds-value {
  106. font-size: 1.9em;
  107. }
  108. .speaker-controls-time .timer {
  109. float: left;
  110. }
  111. .speaker-controls-time .clock {
  112. float: right;
  113. text-align: right;
  114. }
  115. .speaker-controls-time span.mute {
  116. opacity: 0.3;
  117. }
  118. .speaker-controls-time .pacing-title {
  119. margin-top: 5px;
  120. }
  121. .speaker-controls-time .pacing.ahead {
  122. color: blue;
  123. }
  124. .speaker-controls-time .pacing.on-track {
  125. color: green;
  126. }
  127. .speaker-controls-time .pacing.behind {
  128. color: red;
  129. }
  130. .speaker-controls-notes {
  131. padding: 10px 16px;
  132. }
  133. .speaker-controls-notes .value {
  134. margin-top: 5px;
  135. line-height: 1.4;
  136. font-size: 1.2em;
  137. }
  138. /* Layout selector */
  139. #speaker-layout {
  140. position: absolute;
  141. top: 10px;
  142. right: 10px;
  143. color: #222;
  144. z-index: 10;
  145. }
  146. #speaker-layout select {
  147. position: absolute;
  148. width: 100%;
  149. height: 100%;
  150. top: 0;
  151. left: 0;
  152. border: 0;
  153. box-shadow: 0;
  154. cursor: pointer;
  155. opacity: 0;
  156. font-size: 1em;
  157. background-color: transparent;
  158. -moz-appearance: none;
  159. -webkit-appearance: none;
  160. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  161. }
  162. #speaker-layout select:focus {
  163. outline: none;
  164. box-shadow: none;
  165. }
  166. .clear {
  167. clear: both;
  168. }
  169. /* Speaker layout: Wide */
  170. body[data-speaker-layout="wide"] #current-slide,
  171. body[data-speaker-layout="wide"] #upcoming-slide {
  172. width: 50%;
  173. height: 45%;
  174. padding: 6px;
  175. }
  176. body[data-speaker-layout="wide"] #current-slide {
  177. top: 0;
  178. left: 0;
  179. }
  180. body[data-speaker-layout="wide"] #upcoming-slide {
  181. top: 0;
  182. left: 50%;
  183. }
  184. body[data-speaker-layout="wide"] #speaker-controls {
  185. top: 45%;
  186. left: 0;
  187. width: 100%;
  188. height: 50%;
  189. font-size: 1.25em;
  190. }
  191. /* Speaker layout: Tall */
  192. body[data-speaker-layout="tall"] #current-slide,
  193. body[data-speaker-layout="tall"] #upcoming-slide {
  194. width: 45%;
  195. height: 50%;
  196. padding: 6px;
  197. }
  198. body[data-speaker-layout="tall"] #current-slide {
  199. top: 0;
  200. left: 0;
  201. }
  202. body[data-speaker-layout="tall"] #upcoming-slide {
  203. top: 50%;
  204. left: 0;
  205. }
  206. body[data-speaker-layout="tall"] #speaker-controls {
  207. padding-top: 40px;
  208. top: 0;
  209. left: 45%;
  210. width: 55%;
  211. height: 100%;
  212. font-size: 1.25em;
  213. }
  214. /* Speaker layout: Notes only */
  215. body[data-speaker-layout="notes-only"] #current-slide,
  216. body[data-speaker-layout="notes-only"] #upcoming-slide {
  217. display: none;
  218. }
  219. body[data-speaker-layout="notes-only"] #speaker-controls {
  220. padding-top: 40px;
  221. top: 0;
  222. left: 0;
  223. width: 100%;
  224. height: 100%;
  225. font-size: 1.25em;
  226. }
  227. @media screen and (max-width: 1080px) {
  228. body[data-speaker-layout="default"] #speaker-controls {
  229. font-size: 16px;
  230. }
  231. }
  232. @media screen and (max-width: 900px) {
  233. body[data-speaker-layout="default"] #speaker-controls {
  234. font-size: 14px;
  235. }
  236. }
  237. @media screen and (max-width: 800px) {
  238. body[data-speaker-layout="default"] #speaker-controls {
  239. font-size: 12px;
  240. }
  241. }
  242. </style>
  243. </head>
  244. <body>
  245. <div id="current-slide"></div>
  246. <div id="upcoming-slide"><span class="overlay-element label">Upcoming</span></div>
  247. <div id="speaker-controls">
  248. <div class="speaker-controls-time">
  249. <h4 class="label">Time <span class="reset-button">Click to Reset</span></h4>
  250. <div class="clock">
  251. <span class="clock-value">0:00 AM</span>
  252. </div>
  253. <div class="timer">
  254. <span class="hours-value">00</span><span class="minutes-value">:00</span><span class="seconds-value">:00</span>
  255. </div>
  256. <div class="clear"></div>
  257. <h4 class="label pacing-title" style="display: none">Pacing – Time to finish current slide</h4>
  258. <div class="pacing" style="display: none">
  259. <span class="hours-value">00</span><span class="minutes-value">:00</span><span class="seconds-value">:00</span>
  260. </div>
  261. </div>
  262. <div class="speaker-controls-notes hidden">
  263. <h4 class="label">Notes</h4>
  264. <div class="value"></div>
  265. </div>
  266. </div>
  267. <div id="speaker-layout" class="overlay-element interactive">
  268. <span class="speaker-layout-label"></span>
  269. <select class="speaker-layout-dropdown"></select>
  270. </div>
  271. <script src="../../plugin/markdown/marked.js"></script>
  272. <script>
  273. (function() {
  274. var notes,
  275. notesValue,
  276. currentState,
  277. currentSlide,
  278. upcomingSlide,
  279. layoutLabel,
  280. layoutDropdown,
  281. connected = false;
  282. var SPEAKER_LAYOUTS = {
  283. 'default': 'Default',
  284. 'wide': 'Wide',
  285. 'tall': 'Tall',
  286. 'notes-only': 'Notes only'
  287. };
  288. setupLayout();
  289. window.addEventListener( 'message', function( event ) {
  290. var data = JSON.parse( event.data );
  291. // The overview mode is only useful to the reveal.js instance
  292. // where navigation occurs so we don't sync it
  293. if( data.state ) delete data.state.overview;
  294. // Messages sent by the notes plugin inside of the main window
  295. if( data && data.namespace === 'reveal-notes' ) {
  296. if( data.type === 'connect' ) {
  297. handleConnectMessage( data );
  298. }
  299. else if( data.type === 'state' ) {
  300. handleStateMessage( data );
  301. }
  302. }
  303. // Messages sent by the reveal.js inside of the current slide preview
  304. else if( data && data.namespace === 'reveal' ) {
  305. if( /ready/.test( data.eventName ) ) {
  306. // Send a message back to notify that the handshake is complete
  307. window.opener.postMessage( JSON.stringify({ namespace: 'reveal-notes', type: 'connected'} ), '*' );
  308. }
  309. else if( /slidechanged|fragmentshown|fragmenthidden|paused|resumed/.test( data.eventName ) && currentState !== JSON.stringify( data.state ) ) {
  310. window.opener.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ]} ), '*' );
  311. }
  312. }
  313. } );
  314. /**
  315. * Called when the main window is trying to establish a
  316. * connection.
  317. */
  318. function handleConnectMessage( data ) {
  319. if( connected === false ) {
  320. connected = true;
  321. setupIframes( data );
  322. setupKeyboard();
  323. setupNotes();
  324. setupTimer();
  325. }
  326. }
  327. /**
  328. * Called when the main window sends an updated state.
  329. */
  330. function handleStateMessage( data ) {
  331. // Store the most recently set state to avoid circular loops
  332. // applying the same state
  333. currentState = JSON.stringify( data.state );
  334. // No need for updating the notes in case of fragment changes
  335. if ( data.notes ) {
  336. notes.classList.remove( 'hidden' );
  337. notesValue.style.whiteSpace = data.whitespace;
  338. if( data.markdown ) {
  339. notesValue.innerHTML = marked( data.notes );
  340. }
  341. else {
  342. notesValue.innerHTML = data.notes;
  343. }
  344. }
  345. else {
  346. notes.classList.add( 'hidden' );
  347. }
  348. // Update the note slides
  349. currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ] }), '*' );
  350. upcomingSlide.contentWindow.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ] }), '*' );
  351. upcomingSlide.contentWindow.postMessage( JSON.stringify({ method: 'next' }), '*' );
  352. }
  353. // Limit to max one state update per X ms
  354. handleStateMessage = debounce( handleStateMessage, 200 );
  355. /**
  356. * Forward keyboard events to the current slide window.
  357. * This enables keyboard events to work even if focus
  358. * isn't set on the current slide iframe.
  359. */
  360. function setupKeyboard() {
  361. document.addEventListener( 'keydown', function( event ) {
  362. currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'triggerKey', args: [ event.keyCode ] }), '*' );
  363. } );
  364. }
  365. /**
  366. * Creates the preview iframes.
  367. */
  368. function setupIframes( data ) {
  369. var params = [
  370. 'receiver',
  371. 'progress=false',
  372. 'history=false',
  373. 'transition=none',
  374. 'autoSlide=0',
  375. 'backgroundTransition=none'
  376. ].join( '&' );
  377. var urlSeparator = /\?/.test(data.url) ? '&' : '?';
  378. var hash = '#/' + data.state.indexh + '/' + data.state.indexv;
  379. var currentURL = data.url + urlSeparator + params + '&postMessageEvents=true' + hash;
  380. var upcomingURL = data.url + urlSeparator + params + '&controls=false' + hash;
  381. currentSlide = document.createElement( 'iframe' );
  382. currentSlide.setAttribute( 'width', 1280 );
  383. currentSlide.setAttribute( 'height', 1024 );
  384. currentSlide.setAttribute( 'src', currentURL );
  385. document.querySelector( '#current-slide' ).appendChild( currentSlide );
  386. upcomingSlide = document.createElement( 'iframe' );
  387. upcomingSlide.setAttribute( 'width', 640 );
  388. upcomingSlide.setAttribute( 'height', 512 );
  389. upcomingSlide.setAttribute( 'src', upcomingURL );
  390. document.querySelector( '#upcoming-slide' ).appendChild( upcomingSlide );
  391. }
  392. /**
  393. * Setup the notes UI.
  394. */
  395. function setupNotes() {
  396. notes = document.querySelector( '.speaker-controls-notes' );
  397. notesValue = document.querySelector( '.speaker-controls-notes .value' );
  398. }
  399. function getTimings() {
  400. var slides = Reveal.getSlides();
  401. var defaultTiming = Reveal.getConfig().defaultTiming;
  402. if (defaultTiming == null) {
  403. return null;
  404. }
  405. var timings = [];
  406. for ( var i in slides ) {
  407. var slide = slides[i];
  408. var timing = defaultTiming;
  409. if( slide.hasAttribute( 'data-timing' )) {
  410. var t = slide.getAttribute( 'data-timing' );
  411. timing = parseInt(t);
  412. if( isNaN(timing) ) {
  413. console.warn("Could not parse timing '" + t + "' of slide " + i + "; using default of " + defaultTiming);
  414. timing = defaultTiming;
  415. }
  416. }
  417. timings.push(timing);
  418. }
  419. return timings;
  420. }
  421. /**
  422. * Return the number of seconds allocated for presenting
  423. * all slides up to and including this one.
  424. */
  425. function getTimeAllocated(timings) {
  426. var slides = Reveal.getSlides();
  427. var allocated = 0;
  428. var currentSlide = Reveal.getSlidePastCount();
  429. for (var i in slides.slice(0, currentSlide + 1)) {
  430. allocated += timings[i];
  431. }
  432. return allocated;
  433. }
  434. /**
  435. * Create the timer and clock and start updating them
  436. * at an interval.
  437. */
  438. function setupTimer() {
  439. var start = new Date(),
  440. timeEl = document.querySelector( '.speaker-controls-time' ),
  441. clockEl = timeEl.querySelector( '.clock-value' ),
  442. hoursEl = timeEl.querySelector( '.hours-value' ),
  443. minutesEl = timeEl.querySelector( '.minutes-value' ),
  444. secondsEl = timeEl.querySelector( '.seconds-value' ),
  445. pacingTitleEl = timeEl.querySelector( '.pacing-title' ),
  446. pacingEl = timeEl.querySelector( '.pacing' ),
  447. pacingHoursEl = pacingEl.querySelector( '.hours-value' ),
  448. pacingMinutesEl = pacingEl.querySelector( '.minutes-value' ),
  449. pacingSecondsEl = pacingEl.querySelector( '.seconds-value' );
  450. var timings = getTimings();
  451. if (timings !== null) {
  452. pacingTitleEl.style.removeProperty('display');
  453. pacingEl.style.removeProperty('display');
  454. }
  455. function _displayTime( hrEl, minEl, secEl, time) {
  456. var sign = Math.sign(time) == -1 ? "-" : "";
  457. time = Math.abs(Math.round(time / 1000));
  458. var seconds = time % 60;
  459. var minutes = Math.floor( time / 60 ) % 60 ;
  460. var hours = Math.floor( time / ( 60 * 60 )) ;
  461. hrEl.innerHTML = sign + zeroPadInteger( hours );
  462. if (hours == 0) {
  463. hrEl.classList.add( 'mute' );
  464. }
  465. else {
  466. hrEl.classList.remove( 'mute' );
  467. }
  468. minEl.innerHTML = ':' + zeroPadInteger( minutes );
  469. if (hours == 0 && minutes == 0) {
  470. minEl.classList.add( 'mute' );
  471. }
  472. else {
  473. minEl.classList.remove( 'mute' );
  474. }
  475. secEl.innerHTML = ':' + zeroPadInteger( seconds );
  476. }
  477. function _updateTimer() {
  478. var diff, hours, minutes, seconds,
  479. now = new Date();
  480. diff = now.getTime() - start.getTime();
  481. clockEl.innerHTML = now.toLocaleTimeString( 'en-US', { hour12: true, hour: '2-digit', minute:'2-digit' } );
  482. _displayTime( hoursEl, minutesEl, secondsEl, diff );
  483. if (timings !== null) {
  484. _updatePacing(diff);
  485. }
  486. }
  487. function _updatePacing(diff) {
  488. var slideEndTiming = getTimeAllocated(timings) * 1000;
  489. var currentSlide = Reveal.getSlidePastCount();
  490. var currentSlideTiming = timings[currentSlide] * 1000;
  491. var timeLeftCurrentSlide = slideEndTiming - diff;
  492. if (timeLeftCurrentSlide < 0) {
  493. pacingEl.className = 'pacing behind';
  494. }
  495. else if (timeLeftCurrentSlide < currentSlideTiming) {
  496. pacingEl.className = 'pacing on-track';
  497. }
  498. else {
  499. pacingEl.className = 'pacing ahead';
  500. }
  501. _displayTime( pacingHoursEl, pacingMinutesEl, pacingSecondsEl, timeLeftCurrentSlide );
  502. }
  503. // Update once directly
  504. _updateTimer();
  505. // Then update every second
  506. setInterval( _updateTimer, 1000 );
  507. function _resetTimer() {
  508. if (timings == null) {
  509. start = new Date();
  510. }
  511. else {
  512. // Reset timer to beginning of current slide
  513. var slideEndTiming = getTimeAllocated(timings) * 1000;
  514. var currentSlide = Reveal.getSlidePastCount();
  515. var currentSlideTiming = timings[currentSlide] * 1000;
  516. var previousSlidesTiming = slideEndTiming - currentSlideTiming;
  517. var now = new Date();
  518. start = new Date(now.getTime() - previousSlidesTiming);
  519. }
  520. _updateTimer();
  521. }
  522. timeEl.addEventListener( 'click', function() {
  523. _resetTimer();
  524. return false;
  525. } );
  526. }
  527. /**
  528. * Sets up the speaker view layout and layout selector.
  529. */
  530. function setupLayout() {
  531. layoutDropdown = document.querySelector( '.speaker-layout-dropdown' );
  532. layoutLabel = document.querySelector( '.speaker-layout-label' );
  533. // Render the list of available layouts
  534. for( var id in SPEAKER_LAYOUTS ) {
  535. var option = document.createElement( 'option' );
  536. option.setAttribute( 'value', id );
  537. option.textContent = SPEAKER_LAYOUTS[ id ];
  538. layoutDropdown.appendChild( option );
  539. }
  540. // Monitor the dropdown for changes
  541. layoutDropdown.addEventListener( 'change', function( event ) {
  542. setLayout( layoutDropdown.value );
  543. }, false );
  544. // Restore any currently persisted layout
  545. setLayout( getLayout() );
  546. }
  547. /**
  548. * Sets a new speaker view layout. The layout is persisted
  549. * in local storage.
  550. */
  551. function setLayout( value ) {
  552. var title = SPEAKER_LAYOUTS[ value ];
  553. layoutLabel.innerHTML = 'Layout' + ( title ? ( ': ' + title ) : '' );
  554. layoutDropdown.value = value;
  555. document.body.setAttribute( 'data-speaker-layout', value );
  556. // Persist locally
  557. if( supportsLocalStorage() ) {
  558. window.localStorage.setItem( 'reveal-speaker-layout', value );
  559. }
  560. }
  561. /**
  562. * Returns the ID of the most recently set speaker layout
  563. * or our default layout if none has been set.
  564. */
  565. function getLayout() {
  566. if( supportsLocalStorage() ) {
  567. var layout = window.localStorage.getItem( 'reveal-speaker-layout' );
  568. if( layout ) {
  569. return layout;
  570. }
  571. }
  572. // Default to the first record in the layouts hash
  573. for( var id in SPEAKER_LAYOUTS ) {
  574. return id;
  575. }
  576. }
  577. function supportsLocalStorage() {
  578. try {
  579. localStorage.setItem('test', 'test');
  580. localStorage.removeItem('test');
  581. return true;
  582. }
  583. catch( e ) {
  584. return false;
  585. }
  586. }
  587. function zeroPadInteger( num ) {
  588. var str = '00' + parseInt( num );
  589. return str.substring( str.length - 2 );
  590. }
  591. /**
  592. * Limits the frequency at which a function can be called.
  593. */
  594. function debounce( fn, ms ) {
  595. var lastTime = 0,
  596. timeout;
  597. return function() {
  598. var args = arguments;
  599. var context = this;
  600. clearTimeout( timeout );
  601. var timeSinceLastCall = Date.now() - lastTime;
  602. if( timeSinceLastCall > ms ) {
  603. fn.apply( context, args );
  604. lastTime = Date.now();
  605. }
  606. else {
  607. timeout = setTimeout( function() {
  608. fn.apply( context, args );
  609. lastTime = Date.now();
  610. }, ms - timeSinceLastCall );
  611. }
  612. }
  613. }
  614. })();
  615. </script>
  616. </body>
  617. </html>