reveal.js 20 KB

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