reveal.js 17 KB

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