notes.html 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793
  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. connected = false;
  298. var SPEAKER_LAYOUTS = {
  299. 'default': 'Default',
  300. 'wide': 'Wide',
  301. 'tall': 'Tall',
  302. 'notes-only': 'Notes only'
  303. };
  304. setupLayout();
  305. var connectionStatus = document.querySelector( '#connection-status' );
  306. var connectionTimeout = setTimeout( function() {
  307. connectionStatus.innerHTML = 'Error connecting to main window.<br>Please try closing and reopening the speaker view.';
  308. }, 5000 );
  309. window.addEventListener( 'message', function( event ) {
  310. clearTimeout( connectionTimeout );
  311. connectionStatus.style.display = 'none';
  312. var data = JSON.parse( event.data );
  313. // The overview mode is only useful to the reveal.js instance
  314. // where navigation occurs so we don't sync it
  315. if( data.state ) delete data.state.overview;
  316. // Messages sent by the notes plugin inside of the main window
  317. if( data && data.namespace === 'reveal-notes' ) {
  318. if( data.type === 'connect' ) {
  319. handleConnectMessage( data );
  320. }
  321. else if( data.type === 'state' ) {
  322. handleStateMessage( data );
  323. }
  324. }
  325. // Messages sent by the reveal.js inside of the current slide preview
  326. else if( data && data.namespace === 'reveal' ) {
  327. if( /ready/.test( data.eventName ) ) {
  328. // Send a message back to notify that the handshake is complete
  329. window.opener.postMessage( JSON.stringify({ namespace: 'reveal-notes', type: 'connected'} ), '*' );
  330. }
  331. else if( /slidechanged|fragmentshown|fragmenthidden|paused|resumed/.test( data.eventName ) && currentState !== JSON.stringify( data.state ) ) {
  332. window.opener.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ]} ), '*' );
  333. }
  334. }
  335. } );
  336. /**
  337. * Called when the main window is trying to establish a
  338. * connection.
  339. */
  340. function handleConnectMessage( data ) {
  341. if( connected === false ) {
  342. connected = true;
  343. setupIframes( data );
  344. setupKeyboard();
  345. setupNotes();
  346. setupTimer();
  347. }
  348. }
  349. /**
  350. * Called when the main window sends an updated state.
  351. */
  352. function handleStateMessage( data ) {
  353. // Store the most recently set state to avoid circular loops
  354. // applying the same state
  355. currentState = JSON.stringify( data.state );
  356. // No need for updating the notes in case of fragment changes
  357. if ( data.notes ) {
  358. notes.classList.remove( 'hidden' );
  359. notesValue.style.whiteSpace = data.whitespace;
  360. if( data.markdown ) {
  361. notesValue.innerHTML = marked( data.notes );
  362. }
  363. else {
  364. notesValue.innerHTML = data.notes;
  365. }
  366. }
  367. else {
  368. notes.classList.add( 'hidden' );
  369. }
  370. // Update the note slides
  371. currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ] }), '*' );
  372. upcomingSlide.contentWindow.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ] }), '*' );
  373. upcomingSlide.contentWindow.postMessage( JSON.stringify({ method: 'next' }), '*' );
  374. }
  375. // Limit to max one state update per X ms
  376. handleStateMessage = debounce( handleStateMessage, 200 );
  377. /**
  378. * Forward keyboard events to the current slide window.
  379. * This enables keyboard events to work even if focus
  380. * isn't set on the current slide iframe.
  381. *
  382. * Block F5 default handling, it reloads and disconnects
  383. * the speaker notes window.
  384. */
  385. function setupKeyboard() {
  386. document.addEventListener( 'keydown', function( event ) {
  387. if( event.keyCode === 116 || ( event.metaKey && event.keyCode === 82 ) ) {
  388. event.preventDefault();
  389. return false;
  390. }
  391. currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'triggerKey', args: [ event.keyCode ] }), '*' );
  392. } );
  393. }
  394. /**
  395. * Creates the preview iframes.
  396. */
  397. function setupIframes( data ) {
  398. var params = [
  399. 'receiver',
  400. 'progress=false',
  401. 'history=false',
  402. 'transition=none',
  403. 'autoSlide=0',
  404. 'backgroundTransition=none'
  405. ].join( '&' );
  406. var urlSeparator = /\?/.test(data.url) ? '&' : '?';
  407. var hash = '#/' + data.state.indexh + '/' + data.state.indexv;
  408. var currentURL = data.url + urlSeparator + params + '&postMessageEvents=true' + hash;
  409. var upcomingURL = data.url + urlSeparator + params + '&controls=false' + hash;
  410. currentSlide = document.createElement( 'iframe' );
  411. currentSlide.setAttribute( 'width', 1280 );
  412. currentSlide.setAttribute( 'height', 1024 );
  413. currentSlide.setAttribute( 'src', currentURL );
  414. document.querySelector( '#current-slide' ).appendChild( currentSlide );
  415. upcomingSlide = document.createElement( 'iframe' );
  416. upcomingSlide.setAttribute( 'width', 640 );
  417. upcomingSlide.setAttribute( 'height', 512 );
  418. upcomingSlide.setAttribute( 'src', upcomingURL );
  419. document.querySelector( '#upcoming-slide' ).appendChild( upcomingSlide );
  420. }
  421. /**
  422. * Setup the notes UI.
  423. */
  424. function setupNotes() {
  425. notes = document.querySelector( '.speaker-controls-notes' );
  426. notesValue = document.querySelector( '.speaker-controls-notes .value' );
  427. }
  428. function getTimings() {
  429. var slides = Reveal.getSlides();
  430. var defaultTiming = Reveal.getConfig().defaultTiming;
  431. if (defaultTiming == null) {
  432. return null;
  433. }
  434. var timings = [];
  435. for ( var i in slides ) {
  436. var slide = slides[i];
  437. var timing = defaultTiming;
  438. if( slide.hasAttribute( 'data-timing' )) {
  439. var t = slide.getAttribute( 'data-timing' );
  440. timing = parseInt(t);
  441. if( isNaN(timing) ) {
  442. console.warn("Could not parse timing '" + t + "' of slide " + i + "; using default of " + defaultTiming);
  443. timing = defaultTiming;
  444. }
  445. }
  446. timings.push(timing);
  447. }
  448. return timings;
  449. }
  450. /**
  451. * Return the number of seconds allocated for presenting
  452. * all slides up to and including this one.
  453. */
  454. function getTimeAllocated(timings) {
  455. var slides = Reveal.getSlides();
  456. var allocated = 0;
  457. var currentSlide = Reveal.getSlidePastCount();
  458. for (var i in slides.slice(0, currentSlide + 1)) {
  459. allocated += timings[i];
  460. }
  461. return allocated;
  462. }
  463. /**
  464. * Create the timer and clock and start updating them
  465. * at an interval.
  466. */
  467. function setupTimer() {
  468. var start = new Date(),
  469. timeEl = document.querySelector( '.speaker-controls-time' ),
  470. clockEl = timeEl.querySelector( '.clock-value' ),
  471. hoursEl = timeEl.querySelector( '.hours-value' ),
  472. minutesEl = timeEl.querySelector( '.minutes-value' ),
  473. secondsEl = timeEl.querySelector( '.seconds-value' ),
  474. pacingTitleEl = timeEl.querySelector( '.pacing-title' ),
  475. pacingEl = timeEl.querySelector( '.pacing' ),
  476. pacingHoursEl = pacingEl.querySelector( '.hours-value' ),
  477. pacingMinutesEl = pacingEl.querySelector( '.minutes-value' ),
  478. pacingSecondsEl = pacingEl.querySelector( '.seconds-value' );
  479. var timings = getTimings();
  480. if (timings !== null) {
  481. pacingTitleEl.style.removeProperty('display');
  482. pacingEl.style.removeProperty('display');
  483. }
  484. function _displayTime( hrEl, minEl, secEl, time) {
  485. var sign = Math.sign(time) == -1 ? "-" : "";
  486. time = Math.abs(Math.round(time / 1000));
  487. var seconds = time % 60;
  488. var minutes = Math.floor( time / 60 ) % 60 ;
  489. var hours = Math.floor( time / ( 60 * 60 )) ;
  490. hrEl.innerHTML = sign + zeroPadInteger( hours );
  491. if (hours == 0) {
  492. hrEl.classList.add( 'mute' );
  493. }
  494. else {
  495. hrEl.classList.remove( 'mute' );
  496. }
  497. minEl.innerHTML = ':' + zeroPadInteger( minutes );
  498. if (hours == 0 && minutes == 0) {
  499. minEl.classList.add( 'mute' );
  500. }
  501. else {
  502. minEl.classList.remove( 'mute' );
  503. }
  504. secEl.innerHTML = ':' + zeroPadInteger( seconds );
  505. }
  506. function _updateTimer() {
  507. var diff, hours, minutes, seconds,
  508. now = new Date();
  509. diff = now.getTime() - start.getTime();
  510. clockEl.innerHTML = now.toLocaleTimeString( 'en-US', { hour12: true, hour: '2-digit', minute:'2-digit' } );
  511. _displayTime( hoursEl, minutesEl, secondsEl, diff );
  512. if (timings !== null) {
  513. _updatePacing(diff);
  514. }
  515. }
  516. function _updatePacing(diff) {
  517. var slideEndTiming = getTimeAllocated(timings) * 1000;
  518. var currentSlide = Reveal.getSlidePastCount();
  519. var currentSlideTiming = timings[currentSlide] * 1000;
  520. var timeLeftCurrentSlide = slideEndTiming - diff;
  521. if (timeLeftCurrentSlide < 0) {
  522. pacingEl.className = 'pacing behind';
  523. }
  524. else if (timeLeftCurrentSlide < currentSlideTiming) {
  525. pacingEl.className = 'pacing on-track';
  526. }
  527. else {
  528. pacingEl.className = 'pacing ahead';
  529. }
  530. _displayTime( pacingHoursEl, pacingMinutesEl, pacingSecondsEl, timeLeftCurrentSlide );
  531. }
  532. // Update once directly
  533. _updateTimer();
  534. // Then update every second
  535. setInterval( _updateTimer, 1000 );
  536. function _resetTimer() {
  537. if (timings == null) {
  538. start = new Date();
  539. }
  540. else {
  541. // Reset timer to beginning of current slide
  542. var slideEndTiming = getTimeAllocated(timings) * 1000;
  543. var currentSlide = Reveal.getSlidePastCount();
  544. var currentSlideTiming = timings[currentSlide] * 1000;
  545. var previousSlidesTiming = slideEndTiming - currentSlideTiming;
  546. var now = new Date();
  547. start = new Date(now.getTime() - previousSlidesTiming);
  548. }
  549. _updateTimer();
  550. }
  551. timeEl.addEventListener( 'click', function() {
  552. _resetTimer();
  553. return false;
  554. } );
  555. }
  556. /**
  557. * Sets up the speaker view layout and layout selector.
  558. */
  559. function setupLayout() {
  560. layoutDropdown = document.querySelector( '.speaker-layout-dropdown' );
  561. layoutLabel = document.querySelector( '.speaker-layout-label' );
  562. // Render the list of available layouts
  563. for( var id in SPEAKER_LAYOUTS ) {
  564. var option = document.createElement( 'option' );
  565. option.setAttribute( 'value', id );
  566. option.textContent = SPEAKER_LAYOUTS[ id ];
  567. layoutDropdown.appendChild( option );
  568. }
  569. // Monitor the dropdown for changes
  570. layoutDropdown.addEventListener( 'change', function( event ) {
  571. setLayout( layoutDropdown.value );
  572. }, false );
  573. // Restore any currently persisted layout
  574. setLayout( getLayout() );
  575. }
  576. /**
  577. * Sets a new speaker view layout. The layout is persisted
  578. * in local storage.
  579. */
  580. function setLayout( value ) {
  581. var title = SPEAKER_LAYOUTS[ value ];
  582. layoutLabel.innerHTML = 'Layout' + ( title ? ( ': ' + title ) : '' );
  583. layoutDropdown.value = value;
  584. document.body.setAttribute( 'data-speaker-layout', value );
  585. // Persist locally
  586. if( supportsLocalStorage() ) {
  587. window.localStorage.setItem( 'reveal-speaker-layout', value );
  588. }
  589. }
  590. /**
  591. * Returns the ID of the most recently set speaker layout
  592. * or our default layout if none has been set.
  593. */
  594. function getLayout() {
  595. if( supportsLocalStorage() ) {
  596. var layout = window.localStorage.getItem( 'reveal-speaker-layout' );
  597. if( layout ) {
  598. return layout;
  599. }
  600. }
  601. // Default to the first record in the layouts hash
  602. for( var id in SPEAKER_LAYOUTS ) {
  603. return id;
  604. }
  605. }
  606. function supportsLocalStorage() {
  607. try {
  608. localStorage.setItem('test', 'test');
  609. localStorage.removeItem('test');
  610. return true;
  611. }
  612. catch( e ) {
  613. return false;
  614. }
  615. }
  616. function zeroPadInteger( num ) {
  617. var str = '00' + parseInt( num );
  618. return str.substring( str.length - 2 );
  619. }
  620. /**
  621. * Limits the frequency at which a function can be called.
  622. */
  623. function debounce( fn, ms ) {
  624. var lastTime = 0,
  625. timeout;
  626. return function() {
  627. var args = arguments;
  628. var context = this;
  629. clearTimeout( timeout );
  630. var timeSinceLastCall = Date.now() - lastTime;
  631. if( timeSinceLastCall > ms ) {
  632. fn.apply( context, args );
  633. lastTime = Date.now();
  634. }
  635. else {
  636. timeout = setTimeout( function() {
  637. fn.apply( context, args );
  638. lastTime = Date.now();
  639. }, ms - timeSinceLastCall );
  640. }
  641. }
  642. }
  643. })();
  644. </script>
  645. </body>
  646. </html>