notes.html 20 KB

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