reveal.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690
  1. /**
  2. * Copyright (C) 2011 Hakim El Hattab, http://hakim.se
  3. *
  4. * Permission is hereby granted, free of charge, to any person obtaining a copy
  5. * of this software and associated documentation files (the "Software"), to deal
  6. * in the Software without restriction, including without limitation the rights
  7. * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  8. * copies of the Software, and to permit persons to whom the Software is
  9. * furnished to do so, subject to the following conditions:
  10. *
  11. * The above copyright notice and this permission notice shall be included in
  12. * all copies or substantial portions of the Software.
  13. *
  14. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  15. * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  16. * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  17. * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  18. * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  19. * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  20. * THE SOFTWARE.
  21. *
  22. *
  23. * #############################################################################
  24. *
  25. *
  26. * Reveal.js is an easy to use HTML based slideshow enhanced by
  27. * sexy CSS 3D transforms.
  28. *
  29. * Slides are given unique hash based URL's so that they can be
  30. * opened directly.
  31. *
  32. * Public facing methods:
  33. * - Reveal.initialize( { ... options ... } );
  34. * - Reveal.navigateTo( indexh, indexv );
  35. * - Reveal.navigateLeft();
  36. * - Reveal.navigateRight();
  37. * - Reveal.navigateUp();
  38. * - Reveal.navigateDown();
  39. *
  40. *
  41. * version 0.1:
  42. * - First release
  43. *
  44. * version 0.2:
  45. * - Refactored code and added inline documentation
  46. * - Slides now have unique URL's
  47. * - A basic API to invoke navigation was added
  48. *
  49. * version 0.3:
  50. * - Added licensing terms
  51. * - Fixed broken links on touch devices
  52. *
  53. * version 1.0:
  54. * - Added controls
  55. * - Added initialization options
  56. * - Reveal views in fragments
  57. * - Revamped, darker, theme
  58. * - Tweaked markup styles (a, em, strong, b, i, blockquote, q, pre, ul, ol)
  59. * - Support for themes at initialization (default/linear/concave)
  60. * - Code highlighting via highlight.js
  61. *
  62. * version 1.1:
  63. * - Optional progress bar UI element
  64. * - Slide overview available via SPACE
  65. * - Added 'transition' option for specifying transition styles
  66. * - Added 'theme' option for specifying UI styles
  67. * - Slides that contain nested-slides are given the 'stack' class
  68. *
  69. * version 1.2:
  70. * - Big changes to DOM structure:
  71. * - Previous #main wrapper is now called #reveal
  72. * - Slides were moved one level deeper, into #reveal .slides
  73. * - Controls and progress bar were moved into #reveal
  74. * - All CSS is now much more explicit, rooted at #reveal, to prevent conflicts
  75. * - Config option for disabling updates to URL, defaults to true
  76. *
  77. *
  78. * @author Hakim El Hattab | http://hakim.se
  79. * @version 1.2
  80. */
  81. var Reveal = (function(){
  82. var HORIZONTAL_SLIDES_SELECTOR = '#reveal .slides>section',
  83. VERTICAL_SLIDES_SELECTOR = '#reveal .slides>section.present>section',
  84. // The horizontal and verical index of the currently active slide
  85. indexh = 0,
  86. indexv = 0,
  87. // Configurations options, can be overridden at initialization time
  88. config = {
  89. controls: false,
  90. progress: false,
  91. history: false,
  92. transition: 'default',
  93. theme: 'default',
  94. rollingLinks: true
  95. },
  96. // Cached references to DOM elements
  97. dom = {},
  98. // Detect support for CSS 3D transforms
  99. supports3DTransforms = document.body.style['perspectiveProperty'] !== undefined ||
  100. document.body.style['WebkitPerspective'] !== undefined ||
  101. document.body.style['MozPerspective'] !== undefined ||
  102. document.body.style['msPerspective'] !== undefined,
  103. supports2DTransforms = document.body.style['transformProperty'] !== undefined ||
  104. document.body.style['WebkitTransform'] !== undefined ||
  105. document.body.style['MozTransform'] !== undefined ||
  106. document.body.style['msTransform'] !== undefined ||
  107. document.body.style['OTransform'] !== undefined;
  108. /**
  109. * Starts up the slideshow by applying configuration
  110. * options and binding various events.
  111. */
  112. function initialize( options ) {
  113. if( !supports2DTransforms && !supports3DTransforms ) {
  114. document.body.setAttribute( 'class', 'no-transforms' );
  115. // If the browser doesn't support transforms we won't be
  116. // using JavaScript to control the presentation
  117. return;
  118. }
  119. // Cache references to DOM elements
  120. dom.wrapper = document.querySelector( '#reveal' );
  121. dom.progress = document.querySelector( '#reveal .progress' );
  122. dom.progressbar = document.querySelector( '#reveal .progress span' );
  123. dom.controls = document.querySelector( '#reveal .controls' );
  124. dom.controlsLeft = document.querySelector( '#reveal .controls .left' );
  125. dom.controlsRight = document.querySelector( '#reveal .controls .right' );
  126. dom.controlsUp = document.querySelector( '#reveal .controls .up' );
  127. dom.controlsDown = document.querySelector( '#reveal .controls .down' );
  128. // Bind all view events
  129. document.addEventListener('keydown', onDocumentKeyDown, false);
  130. document.addEventListener('touchstart', onDocumentTouchStart, false);
  131. window.addEventListener('hashchange', onWindowHashChange, false);
  132. dom.controlsLeft.addEventListener('click', preventAndForward( navigateLeft ), false);
  133. dom.controlsRight.addEventListener('click', preventAndForward( navigateRight ), false);
  134. dom.controlsUp.addEventListener('click', preventAndForward( navigateUp ), false);
  135. dom.controlsDown.addEventListener('click', preventAndForward( navigateDown ), false);
  136. // Copy options over to our config object
  137. extend( config, options );
  138. // Fall back on the 2D transform theme 'linear'
  139. if( supports3DTransforms === false ) {
  140. config.transition = 'linear';
  141. }
  142. if( config.controls ) {
  143. dom.controls.style.display = 'block';
  144. }
  145. if( config.progress ) {
  146. dom.progress.style.display = 'block';
  147. }
  148. if( config.transition !== 'default' ) {
  149. addClass( dom.wrapper, config.transition );
  150. }
  151. if( config.theme !== 'default' ) {
  152. addClass( dom.wrapper, config.theme );
  153. }
  154. if( config.rollingLinks ) {
  155. // Add some 3D magic to our anchors
  156. linkify();
  157. }
  158. // Read the initial hash
  159. readURL();
  160. }
  161. /**
  162. * Extend object a with the properties of object b.
  163. * If there's a conflict, object b takes precedence.
  164. */
  165. function extend( a, b ) {
  166. for( var i in b ) {
  167. a[ i ] = b[ i ];
  168. }
  169. }
  170. /**
  171. * Prevents an events defaults behavior calls the
  172. * specified delegate.
  173. *
  174. * @param {Function} delegate The method to call
  175. * after the wrapper has been executed
  176. */
  177. function preventAndForward( delegate ) {
  178. return function( event ) {
  179. event.preventDefault();
  180. delegate.call();
  181. }
  182. }
  183. /**
  184. * Handler for the document level 'keydown' event.
  185. *
  186. * @param {Object} event
  187. */
  188. function onDocumentKeyDown( event ) {
  189. // FFT: Use document.querySelector( ':focus' ) === null
  190. // instead of checking contentEditable?
  191. if( event.target.contentEditable === 'inherit' ) {
  192. if( event.keyCode >= 37 && event.keyCode <= 40 ) {
  193. switch( event.keyCode ) {
  194. case 37: navigateLeft(); break; // left
  195. case 39: navigateRight(); break; // right
  196. case 38: navigateUp(); break; // up
  197. case 40: navigateDown(); break; // down
  198. }
  199. slide();
  200. event.preventDefault();
  201. }
  202. // Space bar
  203. else if ( event.keyCode === 32 && supports3DTransforms ) {
  204. if( overviewIsActive() ) {
  205. deactivateOverview();
  206. }
  207. else {
  208. activateOverview();
  209. }
  210. event.preventDefault();
  211. }
  212. }
  213. }
  214. /**
  215. * Handler for the document level 'touchstart' event.
  216. *
  217. * This enables very basic tap interaction for touch
  218. * devices. Added mainly for performance testing of 3D
  219. * transforms on iOS but was so happily surprised with
  220. * how smoothly it runs so I left it in here. Apple +1
  221. *
  222. * @param {Object} event
  223. */
  224. function onDocumentTouchStart( event ) {
  225. // We're only interested in one point taps
  226. if (event.touches.length === 1) {
  227. // Never prevent taps on anchors and images
  228. if( event.target.tagName.toLowerCase() === 'a' || event.target.tagName.toLowerCase() === 'img' ) {
  229. return;
  230. }
  231. event.preventDefault();
  232. var point = {
  233. x: event.touches[0].clientX,
  234. y: event.touches[0].clientY
  235. };
  236. // Define the extent of the areas that may be tapped
  237. // to navigate
  238. var wt = window.innerWidth * 0.3;
  239. var ht = window.innerHeight * 0.3;
  240. if( point.x < wt ) {
  241. navigateLeft();
  242. }
  243. else if( point.x > window.innerWidth - wt ) {
  244. navigateRight();
  245. }
  246. else if( point.y < ht ) {
  247. navigateUp();
  248. }
  249. else if( point.y > window.innerHeight - ht ) {
  250. navigateDown();
  251. }
  252. slide();
  253. }
  254. }
  255. /**
  256. * Handler for the window level 'hashchange' event.
  257. *
  258. * @param {Object} event
  259. */
  260. function onWindowHashChange( event ) {
  261. readURL();
  262. }
  263. /**
  264. * Wrap all links in 3D goodness.
  265. */
  266. function linkify() {
  267. if( supports3DTransforms ) {
  268. var nodes = document.querySelectorAll( '#reveal .slides section a:not(.image)' );
  269. for( var i = 0, len = nodes.length; i < len; i++ ) {
  270. var node = nodes[i];
  271. if( node.textContent && ( !node.className || !hasClass( node, 'roll' ) ) ) {
  272. addClass( node, 'roll' );
  273. node.innerHTML = '<span data-title="'+ node.text +'">' + node.innerHTML + '</span>';
  274. }
  275. };
  276. }
  277. }
  278. /**
  279. * Displays the overview of slides (quick nav) by
  280. * scaling down and arranging all slide elements.
  281. *
  282. * Experimental feature, might be dropped if perf
  283. * can't be improved.
  284. */
  285. function activateOverview() {
  286. addClass( dom.wrapper, 'overview' );
  287. var horizontalSlides = Array.prototype.slice.call( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) );
  288. for( var i = 0, len1 = horizontalSlides.length; i < len1; i++ ) {
  289. var hslide = horizontalSlides[i],
  290. htransform = 'translateZ(-2500px) translate(' + ( ( i - indexh ) * 105 ) + '%, 0%)';
  291. hslide.setAttribute( 'data-index-h', i );
  292. hslide.style.display = 'block';
  293. hslide.style.WebkitTransform = htransform;
  294. hslide.style.MozTransform = htransform;
  295. hslide.style.msTransform = htransform;
  296. hslide.style.OTransform = htransform;
  297. hslide.style.transform = htransform;
  298. if( !hasClass( hslide, 'stack' ) ) {
  299. // Navigate to this slide on click
  300. hslide.addEventListener( 'click', onOverviewSlideClicked, true );
  301. }
  302. var verticalSlides = Array.prototype.slice.call( hslide.querySelectorAll( 'section' ) );
  303. for( var j = 0, len2 = verticalSlides.length; j < len2; j++ ) {
  304. var vslide = verticalSlides[j],
  305. vtransform = 'translate(0%, ' + ( ( j - indexv ) * 105 ) + '%)';
  306. vslide.setAttribute( 'data-index-h', i );
  307. vslide.setAttribute( 'data-index-v', j );
  308. vslide.style.display = 'block';
  309. vslide.style.WebkitTransform = vtransform;
  310. vslide.style.MozTransform = vtransform;
  311. vslide.style.msTransform = vtransform;
  312. vslide.style.OTransform = vtransform;
  313. vslide.style.transform = vtransform;
  314. // Navigate to this slide on click
  315. vslide.addEventListener( 'click', onOverviewSlideClicked, true );
  316. }
  317. }
  318. }
  319. /**
  320. * Exits the slide overview and enters the currently
  321. * active slide.
  322. */
  323. function deactivateOverview() {
  324. removeClass( dom.wrapper, 'overview' );
  325. var slides = Array.prototype.slice.call( document.querySelectorAll( '#reveal .slides section' ) );
  326. for( var i = 0, len = slides.length; i < len; i++ ) {
  327. var element = slides[i];
  328. // Resets all transforms to use the external styles
  329. element.style.WebkitTransform = '';
  330. element.style.MozTransform = '';
  331. element.style.msTransform = '';
  332. element.style.OTransform = '';
  333. element.style.transform = '';
  334. element.removeEventListener( 'click', onOverviewSlideClicked );
  335. }
  336. slide();
  337. }
  338. /**
  339. * Checks if the overview is currently active.
  340. *
  341. * @return {Boolean} true if the overview is active,
  342. * false otherwise
  343. */
  344. function overviewIsActive() {
  345. return hasClass( dom.wrapper, 'overview' );
  346. }
  347. /**
  348. * Invoked when a slide is and we're in the overview.
  349. */
  350. function onOverviewSlideClicked( event ) {
  351. // TODO There's a bug here where the event listeners are not
  352. // removed after deactivating the overview.
  353. if( overviewIsActive() ) {
  354. event.preventDefault();
  355. deactivateOverview();
  356. indexh = this.getAttribute( 'data-index-h' );
  357. indexv = this.getAttribute( 'data-index-v' );
  358. slide();
  359. }
  360. }
  361. /**
  362. * Updates one dimension of slides by showing the slide
  363. * with the specified index.
  364. *
  365. * @param {String} selector A CSS selector that will fetch
  366. * the group of slides we are working with
  367. * @param {Number} index The index of the slide that should be
  368. * shown
  369. *
  370. * @return {Number} The index of the slide that is now shown,
  371. * might differ from the passed in index if it was out of
  372. * bounds.
  373. */
  374. function updateSlides( selector, index ) {
  375. // Select all slides and convert the NodeList result to
  376. // an array
  377. var slides = Array.prototype.slice.call( document.querySelectorAll( selector ) );
  378. if( slides.length ) {
  379. // Enforce max and minimum index bounds
  380. index = Math.max(Math.min(index, slides.length - 1), 0);
  381. slides[index].className = 'present';
  382. for( var i = 0; i < slides.length; i++ ) {
  383. var slide = slides[i];
  384. // Optimization; hide all slides that are three or more steps
  385. // away from the present slide
  386. if( overviewIsActive() === false ) {
  387. slide.style.display = Math.abs( index - i ) > 3 ? 'none' : 'block';
  388. }
  389. if( i < index ) {
  390. // Any element previous to index is given the 'past' class
  391. slide.className = 'past';
  392. }
  393. else if( i > index ) {
  394. // Any element subsequent to index is given the 'future' class
  395. slide.className = 'future';
  396. }
  397. // If this element contains vertical slides
  398. if( slide.querySelector( 'section' ) ) {
  399. addClass( slide, 'stack' );
  400. }
  401. }
  402. }
  403. else {
  404. // Since there are no slides we can't be anywhere beyond the
  405. // zeroth index
  406. index = 0;
  407. }
  408. return index;
  409. }
  410. /**
  411. * Updates the visual slides to represent the currently
  412. * set indices.
  413. */
  414. function slide() {
  415. indexh = updateSlides( HORIZONTAL_SLIDES_SELECTOR, indexh );
  416. indexv = updateSlides( VERTICAL_SLIDES_SELECTOR, indexv );
  417. // Update progress if enabled
  418. if( config.progress ) {
  419. dom.progressbar.style.width = ( indexh / ( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ).length - 1 ) ) * window.innerWidth + 'px';
  420. }
  421. // Close the overview if it's active
  422. if( overviewIsActive() ) {
  423. activateOverview();
  424. }
  425. updateControls();
  426. writeURL();
  427. }
  428. /**
  429. * Updates the state and link pointers of the controls.
  430. */
  431. function updateControls() {
  432. var routes = availableRoutes();
  433. // Remove the 'enabled' class from all directions
  434. [ dom.controlsLeft, dom.controlsRight, dom.controlsUp, dom.controlsDown ].forEach( function( node ) {
  435. removeClass( node, 'enabled' );
  436. } )
  437. if( routes.left ) addClass( dom.controlsLeft, 'enabled' );
  438. if( routes.right ) addClass( dom.controlsRight, 'enabled' );
  439. if( routes.up ) addClass( dom.controlsUp, 'enabled' );
  440. if( routes.down ) addClass( dom.controlsDown, 'enabled' );
  441. }
  442. /**
  443. * Determine what available routes there are for navigation.
  444. *
  445. * @return {Object} containing four booleans: left/right/up/down
  446. */
  447. function availableRoutes() {
  448. var horizontalSlides = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR );
  449. var verticalSlides = document.querySelectorAll( VERTICAL_SLIDES_SELECTOR );
  450. return {
  451. left: indexh > 0,
  452. right: indexh < horizontalSlides.length - 1,
  453. up: indexv > 0,
  454. down: indexv < verticalSlides.length - 1
  455. };
  456. }
  457. /**
  458. * Reads the current URL (hash) and navigates accordingly.
  459. */
  460. function readURL() {
  461. // Break the hash down to separate components
  462. var bits = window.location.hash.slice(2).split('/');
  463. // Read the index components of the hash
  464. indexh = bits[0] ? parseInt( bits[0] ) : 0;
  465. indexv = bits[1] ? parseInt( bits[1] ) : 0;
  466. navigateTo( indexh, indexv );
  467. }
  468. /**
  469. * Updates the page URL (hash) to reflect the current
  470. * state.
  471. */
  472. function writeURL() {
  473. if( config.history ) {
  474. var url = '/';
  475. // Only include the minimum possible number of components in
  476. // the URL
  477. if( indexh > 0 || indexv > 0 ) url += indexh;
  478. if( indexv > 0 ) url += '/' + indexv;
  479. window.location.hash = url;
  480. }
  481. }
  482. /**
  483. * Navigate to the next slide fragment.
  484. *
  485. * @return {Boolean} true if there was a next fragment,
  486. * false otherwise
  487. */
  488. function nextFragment() {
  489. // Vertical slides:
  490. if( document.querySelector( VERTICAL_SLIDES_SELECTOR + '.present' ) ) {
  491. var verticalFragments = document.querySelectorAll( VERTICAL_SLIDES_SELECTOR + '.present .fragment:not(.visible)' );
  492. if( verticalFragments.length ) {
  493. addClass( verticalFragments[0], 'visible' );
  494. return true;
  495. }
  496. }
  497. // Horizontal slides:
  498. else {
  499. var horizontalFragments = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR + '.present .fragment:not(.visible)' );
  500. if( horizontalFragments.length ) {
  501. addClass( horizontalFragments[0], 'visible' );
  502. return true;
  503. }
  504. }
  505. return false;
  506. }
  507. /**
  508. * Navigate to the previous slide fragment.
  509. *
  510. * @return {Boolean} true if there was a previous fragment,
  511. * false otherwise
  512. */
  513. function previousFragment() {
  514. // Vertical slides:
  515. if( document.querySelector( VERTICAL_SLIDES_SELECTOR + '.present' ) ) {
  516. var verticalFragments = document.querySelectorAll( VERTICAL_SLIDES_SELECTOR + '.present .fragment.visible' );
  517. if( verticalFragments.length ) {
  518. removeClass( verticalFragments[ verticalFragments.length - 1 ], 'visible' );
  519. return true;
  520. }
  521. }
  522. // Horizontal slides:
  523. else {
  524. var horizontalFragments = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR + '.present .fragment.visible' );
  525. if( horizontalFragments.length ) {
  526. removeClass( horizontalFragments[ horizontalFragments.length - 1 ], 'visible' );
  527. return true;
  528. }
  529. }
  530. return false;
  531. }
  532. function hasClass( node, klass ) {
  533. return !!node.className.match( klass );
  534. }
  535. function addClass( node, klass ) {
  536. if( !hasClass( node, klass ) ) {
  537. node.className += ' ' + klass;
  538. }
  539. }
  540. function removeClass( node, klass ) {
  541. node.className = node.className.replace( klass, '' );
  542. }
  543. /**
  544. * Triggers a navigation to the specified indices.
  545. *
  546. * @param {Number} h The horizontal index of the slide to show
  547. * @param {Number} v The vertical index of the slide to show
  548. */
  549. function navigateTo( h, v ) {
  550. indexh = h === undefined ? indexh : h;
  551. indexv = v === undefined ? indexv : v;
  552. slide();
  553. }
  554. function navigateLeft() {
  555. // Prioritize hiding fragments
  556. if( overviewIsActive() || previousFragment() === false ) {
  557. indexh --;
  558. indexv = 0;
  559. slide();
  560. }
  561. }
  562. function navigateRight() {
  563. // Prioritize revealing fragments
  564. if( overviewIsActive() || nextFragment() === false ) {
  565. indexh ++;
  566. indexv = 0;
  567. slide();
  568. }
  569. }
  570. function navigateUp() {
  571. // Prioritize hiding fragments
  572. if( overviewIsActive() || previousFragment() === false ) {
  573. indexv --;
  574. slide();
  575. }
  576. }
  577. function navigateDown() {
  578. // Prioritize revealing fragments
  579. if( overviewIsActive() || nextFragment() === false ) {
  580. indexv ++;
  581. slide();
  582. }
  583. }
  584. // Expose some methods publicly
  585. return {
  586. initialize: initialize,
  587. navigateTo: navigateTo,
  588. navigateLeft: navigateLeft,
  589. navigateRight: navigateRight,
  590. navigateUp: navigateUp,
  591. navigateDown: navigateDown
  592. };
  593. })();