kornerr
/
2019-08_presentation-teaching-kids-to-program
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Слайды на основе Reveal.js для презентации обучения детей в 2018-м году для конференции eKIDS в августе 2019-го
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
25 Commits
1 Branch
16MB
Tree: 06be38980f
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '06be38980f'
${ noResults }
2019-08_presentation-teachi.../index.html

8131 lines
232KB
Raw Blame History 

  1. <!doctype html>

  2. <html>

  3. 	<head>

  4. 		<meta charset="utf-8">

  5. 		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

  6. 

  7.         <style>

  8. /* reset.css */

  9. 

  10. /* http://meyerweb.com/eric/tools/css/reset/

  11.    v4.0 | 20180602

  12.    License: none (public domain)

  13. */

  14. html, body, div, span, applet, object, iframe,

  15. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  16. a, abbr, acronym, address, big, cite, code,

  17. del, dfn, em, img, ins, kbd, q, s, samp,

  18. small, strike, strong, sub, sup, tt, var,

  19. b, u, i, center,

  20. dl, dt, dd, ol, ul, li,

  21. fieldset, form, label, legend,

  22. table, caption, tbody, tfoot, thead, tr, th, td,

  23. article, aside, canvas, details, embed,

  24. figure, figcaption, footer, header, hgroup,

  25. main, menu, nav, output, ruby, section, summary,

  26. time, mark, audio, video {

  27.   margin: 0;

  28.   padding: 0;

  29.   border: 0;

  30.   font-size: 100%;

  31.   font: inherit;

  32.   vertical-align: baseline;

  33. }

  34. /* HTML5 display-role reset for older browsers */

  35. article, aside, details, figcaption, figure,

  36. footer, header, hgroup, main, menu, nav, section {

  37.   display: block;

  38. }

  39. 

  40. /*!

  41.  * reveal.js

  42.  * http://revealjs.com

  43.  * MIT licensed

  44.  *

  45.  * Copyright (C) 2019 Hakim El Hattab, http://hakim.se

  46.  */

  47. /*********************************************

  48.  * GLOBAL STYLES

  49.  *********************************************/

  50. html {

  51.   width: 100%;

  52.   height: 100%;

  53.   height: 100vh;

  54.   height: calc( var(--vh, 1vh) * 100);

  55.   overflow: hidden; }

  56. 

  57. body {

  58.   height: 100%;

  59.   overflow: hidden;

  60.   position: relative;

  61.   line-height: 1;

  62.   margin: 0;

  63.   background-color: #fff;

  64.   color: #000; }

  65. 

  66. /*********************************************

  67.  * VIEW FRAGMENTS

  68.  *********************************************/

  69. .reveal .slides section .fragment {

  70.   opacity: 0;

  71.   visibility: hidden;

  72.   transition: all .2s ease; }

  73.   .reveal .slides section .fragment.visible {

  74.     opacity: 1;

  75.     visibility: inherit; }

  76. 

  77. .reveal .slides section .fragment.grow {

  78.   opacity: 1;

  79.   visibility: inherit; }

  80.   .reveal .slides section .fragment.grow.visible {

  81.     -webkit-transform: scale(1.3);

  82.             transform: scale(1.3); }

  83. 

  84. .reveal .slides section .fragment.shrink {

  85.   opacity: 1;

  86.   visibility: inherit; }

  87.   .reveal .slides section .fragment.shrink.visible {

  88.     -webkit-transform: scale(0.7);

  89.             transform: scale(0.7); }

  90. 

  91. .reveal .slides section .fragment.zoom-in {

  92.   -webkit-transform: scale(0.1);

  93.           transform: scale(0.1); }

  94.   .reveal .slides section .fragment.zoom-in.visible {

  95.     -webkit-transform: none;

  96.             transform: none; }

  97. 

  98. .reveal .slides section .fragment.fade-out {

  99.   opacity: 1;

  100.   visibility: inherit; }

  101.   .reveal .slides section .fragment.fade-out.visible {

  102.     opacity: 0;

  103.     visibility: hidden; }

  104. 

  105. .reveal .slides section .fragment.semi-fade-out {

  106.   opacity: 1;

  107.   visibility: inherit; }

  108.   .reveal .slides section .fragment.semi-fade-out.visible {

  109.     opacity: 0.5;

  110.     visibility: inherit; }

  111. 

  112. .reveal .slides section .fragment.strike {

  113.   opacity: 1;

  114.   visibility: inherit; }

  115.   .reveal .slides section .fragment.strike.visible {

  116.     text-decoration: line-through; }

  117. 

  118. .reveal .slides section .fragment.fade-up {

  119.   -webkit-transform: translate(0, 20%);

  120.           transform: translate(0, 20%); }

  121.   .reveal .slides section .fragment.fade-up.visible {

  122.     -webkit-transform: translate(0, 0);

  123.             transform: translate(0, 0); }

  124. 

  125. .reveal .slides section .fragment.fade-down {

  126.   -webkit-transform: translate(0, -20%);

  127.           transform: translate(0, -20%); }

  128.   .reveal .slides section .fragment.fade-down.visible {

  129.     -webkit-transform: translate(0, 0);

  130.             transform: translate(0, 0); }

  131. 

  132. .reveal .slides section .fragment.fade-right {

  133.   -webkit-transform: translate(-20%, 0);

  134.           transform: translate(-20%, 0); }

  135.   .reveal .slides section .fragment.fade-right.visible {

  136.     -webkit-transform: translate(0, 0);

  137.             transform: translate(0, 0); }

  138. 

  139. .reveal .slides section .fragment.fade-left {

  140.   -webkit-transform: translate(20%, 0);

  141.           transform: translate(20%, 0); }

  142.   .reveal .slides section .fragment.fade-left.visible {

  143.     -webkit-transform: translate(0, 0);

  144.             transform: translate(0, 0); }

  145. 

  146. .reveal .slides section .fragment.fade-in-then-out,

  147. .reveal .slides section .fragment.current-visible {

  148.   opacity: 0;

  149.   visibility: hidden; }

  150.   .reveal .slides section .fragment.fade-in-then-out.current-fragment,

  151.   .reveal .slides section .fragment.current-visible.current-fragment {

  152.     opacity: 1;

  153.     visibility: inherit; }

  154. 

  155. .reveal .slides section .fragment.fade-in-then-semi-out {

  156.   opacity: 0;

  157.   visibility: hidden; }

  158.   .reveal .slides section .fragment.fade-in-then-semi-out.visible {

  159.     opacity: 0.5;

  160.     visibility: inherit; }

  161.   .reveal .slides section .fragment.fade-in-then-semi-out.current-fragment {

  162.     opacity: 1;

  163.     visibility: inherit; }

  164. 

  165. .reveal .slides section .fragment.highlight-red,

  166. .reveal .slides section .fragment.highlight-current-red,

  167. .reveal .slides section .fragment.highlight-green,

  168. .reveal .slides section .fragment.highlight-current-green,

  169. .reveal .slides section .fragment.highlight-blue,

  170. .reveal .slides section .fragment.highlight-current-blue {

  171.   opacity: 1;

  172.   visibility: inherit; }

  173. 

  174. .reveal .slides section .fragment.highlight-red.visible {

  175.   color: #ff2c2d; }

  176. 

  177. .reveal .slides section .fragment.highlight-green.visible {

  178.   color: #17ff2e; }

  179. 

  180. .reveal .slides section .fragment.highlight-blue.visible {

  181.   color: #1b91ff; }

  182. 

  183. .reveal .slides section .fragment.highlight-current-red.current-fragment {

  184.   color: #ff2c2d; }

  185. 

  186. .reveal .slides section .fragment.highlight-current-green.current-fragment {

  187.   color: #17ff2e; }

  188. 

  189. .reveal .slides section .fragment.highlight-current-blue.current-fragment {

  190.   color: #1b91ff; }

  191. 

  192. /*********************************************

  193.  * DEFAULT ELEMENT STYLES

  194.  *********************************************/

  195. /* Fixes issue in Chrome where italic fonts did not appear when printing to PDF */

  196. .reveal:after {

  197.   content: '';

  198.   font-style: italic; }

  199. 

  200. .reveal iframe {

  201.   z-index: 1; }

  202. 

  203. /** Prevents layering issues in certain browser/transition combinations */

  204. .reveal a {

  205.   position: relative; }

  206. 

  207. .reveal .stretch {

  208.   max-width: none;

  209.   max-height: none; }

  210. 

  211. .reveal pre.stretch code {

  212.   height: 100%;

  213.   max-height: 100%;

  214.   box-sizing: border-box; }

  215. 

  216. /*********************************************

  217.  * CONTROLS

  218.  *********************************************/

  219. @-webkit-keyframes bounce-right {

  220.   0%, 10%, 25%, 40%, 50% {

  221.     -webkit-transform: translateX(0);

  222.             transform: translateX(0); }

  223.   20% {

  224.     -webkit-transform: translateX(10px);

  225.             transform: translateX(10px); }

  226.   30% {

  227.     -webkit-transform: translateX(-5px);

  228.             transform: translateX(-5px); } }

  229. @keyframes bounce-right {

  230.   0%, 10%, 25%, 40%, 50% {

  231.     -webkit-transform: translateX(0);

  232.             transform: translateX(0); }

  233.   20% {

  234.     -webkit-transform: translateX(10px);

  235.             transform: translateX(10px); }

  236.   30% {

  237.     -webkit-transform: translateX(-5px);

  238.             transform: translateX(-5px); } }

  239. 

  240. @-webkit-keyframes bounce-down {

  241.   0%, 10%, 25%, 40%, 50% {

  242.     -webkit-transform: translateY(0);

  243.             transform: translateY(0); }

  244.   20% {

  245.     -webkit-transform: translateY(10px);

  246.             transform: translateY(10px); }

  247.   30% {

  248.     -webkit-transform: translateY(-5px);

  249.             transform: translateY(-5px); } }

  250. 

  251. @keyframes bounce-down {

  252.   0%, 10%, 25%, 40%, 50% {

  253.     -webkit-transform: translateY(0);

  254.             transform: translateY(0); }

  255.   20% {

  256.     -webkit-transform: translateY(10px);

  257.             transform: translateY(10px); }

  258.   30% {

  259.     -webkit-transform: translateY(-5px);

  260.             transform: translateY(-5px); } }

  261. 

  262. .reveal .controls {

  263.   display: none;

  264.   position: absolute;

  265.   top: auto;

  266.   bottom: 12px;

  267.   right: 12px;

  268.   left: auto;

  269.   z-index: 1;

  270.   color: #000;

  271.   pointer-events: none;

  272.   font-size: 10px; }

  273.   .reveal .controls button {

  274.     position: absolute;

  275.     padding: 0;

  276.     background-color: transparent;

  277.     border: 0;

  278.     outline: 0;

  279.     cursor: pointer;

  280.     color: currentColor;

  281.     -webkit-transform: scale(0.9999);

  282.             transform: scale(0.9999);

  283.     transition: color 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease;

  284.     transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;

  285.     z-index: 2;

  286.     pointer-events: auto;

  287.     font-size: inherit;

  288.     visibility: hidden;

  289.     opacity: 0;

  290.     -webkit-appearance: none;

  291.     -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

  292.   .reveal .controls .controls-arrow:before,

  293.   .reveal .controls .controls-arrow:after {

  294.     content: '';

  295.     position: absolute;

  296.     top: 0;

  297.     left: 0;

  298.     width: 2.6em;

  299.     height: 0.5em;

  300.     border-radius: 0.25em;

  301.     background-color: currentColor;

  302.     transition: all 0.15s ease, background-color 0.8s ease;

  303.     -webkit-transform-origin: 0.2em 50%;

  304.             transform-origin: 0.2em 50%;

  305.     will-change: transform; }

  306.   .reveal .controls .controls-arrow {

  307.     position: relative;

  308.     width: 3.6em;

  309.     height: 3.6em; }

  310.     .reveal .controls .controls-arrow:before {

  311.       -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(45deg);

  312.               transform: translateX(0.5em) translateY(1.55em) rotate(45deg); }

  313.     .reveal .controls .controls-arrow:after {

  314.       -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(-45deg);

  315.               transform: translateX(0.5em) translateY(1.55em) rotate(-45deg); }

  316.     .reveal .controls .controls-arrow:hover:before {

  317.       -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(40deg);

  318.               transform: translateX(0.5em) translateY(1.55em) rotate(40deg); }

  319.     .reveal .controls .controls-arrow:hover:after {

  320.       -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(-40deg);

  321.               transform: translateX(0.5em) translateY(1.55em) rotate(-40deg); }

  322.     .reveal .controls .controls-arrow:active:before {

  323.       -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(36deg);

  324.               transform: translateX(0.5em) translateY(1.55em) rotate(36deg); }

  325.     .reveal .controls .controls-arrow:active:after {

  326.       -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(-36deg);

  327.               transform: translateX(0.5em) translateY(1.55em) rotate(-36deg); }

  328.   .reveal .controls .navigate-left {

  329.     right: 6.4em;

  330.     bottom: 3.2em;

  331.     -webkit-transform: translateX(-10px);

  332.             transform: translateX(-10px); }

  333.   .reveal .controls .navigate-right {

  334.     right: 0;

  335.     bottom: 3.2em;

  336.     -webkit-transform: translateX(10px);

  337.             transform: translateX(10px); }

  338.     .reveal .controls .navigate-right .controls-arrow {

  339.       -webkit-transform: rotate(180deg);

  340.               transform: rotate(180deg); }

  341.     .reveal .controls .navigate-right.highlight {

  342.       -webkit-animation: bounce-right 2s 50 both ease-out;

  343.               animation: bounce-right 2s 50 both ease-out; }

  344.   .reveal .controls .navigate-up {

  345.     right: 3.2em;

  346.     bottom: 6.4em;

  347.     -webkit-transform: translateY(-10px);

  348.             transform: translateY(-10px); }

  349.     .reveal .controls .navigate-up .controls-arrow {

  350.       -webkit-transform: rotate(90deg);

  351.               transform: rotate(90deg); }

  352.   .reveal .controls .navigate-down {

  353.     right: 3.2em;

  354.     bottom: 0;

  355.     -webkit-transform: translateY(10px);

  356.             transform: translateY(10px); }

  357.     .reveal .controls .navigate-down .controls-arrow {

  358.       -webkit-transform: rotate(-90deg);

  359.               transform: rotate(-90deg); }

  360.     .reveal .controls .navigate-down.highlight {

  361.       -webkit-animation: bounce-down 2s 50 both ease-out;

  362.               animation: bounce-down 2s 50 both ease-out; }

  363.   .reveal .controls[data-controls-back-arrows="faded"] .navigate-left.enabled,

  364.   .reveal .controls[data-controls-back-arrows="faded"] .navigate-up.enabled {

  365.     opacity: 0.3; }

  366.     .reveal .controls[data-controls-back-arrows="faded"] .navigate-left.enabled:hover,

  367.     .reveal .controls[data-controls-back-arrows="faded"] .navigate-up.enabled:hover {

  368.       opacity: 1; }

  369.   .reveal .controls[data-controls-back-arrows="hidden"] .navigate-left.enabled,

  370.   .reveal .controls[data-controls-back-arrows="hidden"] .navigate-up.enabled {

  371.     opacity: 0;

  372.     visibility: hidden; }

  373.   .reveal .controls .enabled {

  374.     visibility: visible;

  375.     opacity: 0.9;

  376.     cursor: pointer;

  377.     -webkit-transform: none;

  378.             transform: none; }

  379.   .reveal .controls .enabled.fragmented {

  380.     opacity: 0.5; }

  381.   .reveal .controls .enabled:hover,

  382.   .reveal .controls .enabled.fragmented:hover {

  383.     opacity: 1; }

  384. 

  385. .reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-up,

  386. .reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-down {

  387.   display: none; }

  388. 

  389. .reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-left,

  390. .reveal:not(.has-vertical-slides) .controls .navigate-left {

  391.   bottom: 1.4em;

  392.   right: 5.5em; }

  393. 

  394. .reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-right,

  395. .reveal:not(.has-vertical-slides) .controls .navigate-right {

  396.   bottom: 1.4em;

  397.   right: 0.5em; }

  398. 

  399. .reveal:not(.has-horizontal-slides) .controls .navigate-up {

  400.   right: 1.4em;

  401.   bottom: 5em; }

  402. 

  403. .reveal:not(.has-horizontal-slides) .controls .navigate-down {

  404.   right: 1.4em;

  405.   bottom: 0.5em; }

  406. 

  407. .reveal.has-dark-background .controls {

  408.   color: #fff; }

  409. 

  410. .reveal.has-light-background .controls {

  411.   color: #000; }

  412. 

  413. .reveal.no-hover .controls .controls-arrow:hover:before,

  414. .reveal.no-hover .controls .controls-arrow:active:before {

  415.   -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(45deg);

  416.           transform: translateX(0.5em) translateY(1.55em) rotate(45deg); }

  417. 

  418. .reveal.no-hover .controls .controls-arrow:hover:after,

  419. .reveal.no-hover .controls .controls-arrow:active:after {

  420.   -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(-45deg);

  421.           transform: translateX(0.5em) translateY(1.55em) rotate(-45deg); }

  422. 

  423. @media screen and (min-width: 500px) {

  424.   .reveal .controls[data-controls-layout="edges"] {

  425.     top: 0;

  426.     right: 0;

  427.     bottom: 0;

  428.     left: 0; }

  429.   .reveal .controls[data-controls-layout="edges"] .navigate-left,

  430.   .reveal .controls[data-controls-layout="edges"] .navigate-right,

  431.   .reveal .controls[data-controls-layout="edges"] .navigate-up,

  432.   .reveal .controls[data-controls-layout="edges"] .navigate-down {

  433.     bottom: auto;

  434.     right: auto; }

  435.   .reveal .controls[data-controls-layout="edges"] .navigate-left {

  436.     top: 50%;

  437.     left: 8px;

  438.     margin-top: -1.8em; }

  439.   .reveal .controls[data-controls-layout="edges"] .navigate-right {

  440.     top: 50%;

  441.     right: 8px;

  442.     margin-top: -1.8em; }

  443.   .reveal .controls[data-controls-layout="edges"] .navigate-up {

  444.     top: 8px;

  445.     left: 50%;

  446.     margin-left: -1.8em; }

  447.   .reveal .controls[data-controls-layout="edges"] .navigate-down {

  448.     bottom: 8px;

  449.     left: 50%;

  450.     margin-left: -1.8em; } }

  451. 

  452. /*********************************************

  453.  * PROGRESS BAR

  454.  *********************************************/

  455. .reveal .progress {

  456.   position: absolute;

  457.   display: none;

  458.   height: 3px;

  459.   width: 100%;

  460.   bottom: 0;

  461.   left: 0;

  462.   z-index: 10;

  463.   background-color: rgba(0, 0, 0, 0.2);

  464.   color: #fff; }

  465. 

  466. .reveal .progress:after {

  467.   content: '';

  468.   display: block;

  469.   position: absolute;

  470.   height: 10px;

  471.   width: 100%;

  472.   top: -10px; }

  473. 

  474. .reveal .progress span {

  475.   display: block;

  476.   height: 100%;

  477.   width: 0px;

  478.   background-color: currentColor;

  479.   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

  480. 

  481. /*********************************************

  482.  * SLIDE NUMBER

  483.  *********************************************/

  484. .reveal .slide-number {

  485.   position: absolute;

  486.   display: block;

  487.   right: 8px;

  488.   bottom: 8px;

  489.   z-index: 31;

  490.   font-family: Helvetica, sans-serif;

  491.   font-size: 12px;

  492.   line-height: 1;

  493.   color: #fff;

  494.   background-color: rgba(0, 0, 0, 0.4);

  495.   padding: 5px; }

  496. 

  497. .reveal .slide-number a {

  498.   color: currentColor; }

  499. 

  500. .reveal .slide-number-delimiter {

  501.   margin: 0 3px; }

  502. 

  503. /*********************************************

  504.  * SLIDES

  505.  *********************************************/

  506. .reveal {

  507.   position: relative;

  508.   width: 100%;

  509.   height: 100%;

  510.   overflow: hidden;

  511.   -ms-touch-action: pinch-zoom;

  512.       touch-action: pinch-zoom; }

  513. 

  514. .reveal .slides {

  515.   position: absolute;

  516.   width: 100%;

  517.   height: 100%;

  518.   top: 0;

  519.   right: 0;

  520.   bottom: 0;

  521.   left: 0;

  522.   margin: auto;

  523.   pointer-events: none;

  524.   overflow: visible;

  525.   z-index: 1;

  526.   text-align: center;

  527.   -webkit-perspective: 600px;

  528.           perspective: 600px;

  529.   -webkit-perspective-origin: 50% 40%;

  530.           perspective-origin: 50% 40%; }

  531. 

  532. .reveal .slides > section {

  533.   -webkit-perspective: 600px;

  534.           perspective: 600px; }

  535. 

  536. .reveal .slides > section,

  537. .reveal .slides > section > section {

  538.   display: none;

  539.   position: absolute;

  540.   width: 100%;

  541.   padding: 20px 0px;

  542.   pointer-events: auto;

  543.   z-index: 10;

  544.   -webkit-transform-style: flat;

  545.           transform-style: flat;

  546.   transition: -webkit-transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), -webkit-transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);

  547.   transition: transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

  548. 

  549. /* Global transition speed settings */

  550. .reveal[data-transition-speed="fast"] .slides section {

  551.   transition-duration: 400ms; }

  552. 

  553. .reveal[data-transition-speed="slow"] .slides section {

  554.   transition-duration: 1200ms; }

  555. 

  556. /* Slide-specific transition speed overrides */

  557. .reveal .slides section[data-transition-speed="fast"] {

  558.   transition-duration: 400ms; }

  559. 

  560. .reveal .slides section[data-transition-speed="slow"] {

  561.   transition-duration: 1200ms; }

  562. 

  563. .reveal .slides > section.stack {

  564.   padding-top: 0;

  565.   padding-bottom: 0;

  566.   pointer-events: none;

  567.   height: 100%; }

  568. 

  569. .reveal .slides > section.present,

  570. .reveal .slides > section > section.present {

  571.   display: block;

  572.   z-index: 11;

  573.   opacity: 1; }

  574. 

  575. .reveal .slides > section:empty,

  576. .reveal .slides > section > section:empty,

  577. .reveal .slides > section[data-background-interactive],

  578. .reveal .slides > section > section[data-background-interactive] {

  579.   pointer-events: none; }

  580. 

  581. .reveal.center,

  582. .reveal.center .slides,

  583. .reveal.center .slides section {

  584.   min-height: 0 !important; }

  585. 

  586. /* Don't allow interaction with invisible slides */

  587. .reveal .slides > section.future,

  588. .reveal .slides > section > section.future,

  589. .reveal .slides > section.past,

  590. .reveal .slides > section > section.past {

  591.   pointer-events: none; }

  592. 

  593. .reveal.overview .slides > section,

  594. .reveal.overview .slides > section > section {

  595.   pointer-events: auto; }

  596. 

  597. .reveal .slides > section.past,

  598. .reveal .slides > section.future,

  599. .reveal .slides > section > section.past,

  600. .reveal .slides > section > section.future {

  601.   opacity: 0; }

  602. 

  603. /*********************************************

  604.  * Mixins for readability of transitions

  605.  *********************************************/

  606. /*********************************************

  607.  * SLIDE TRANSITION

  608.  * Aliased 'linear' for backwards compatibility

  609.  *********************************************/

  610. .reveal.slide section {

  611.   -webkit-backface-visibility: hidden;

  612.           backface-visibility: hidden; }

  613. 

  614. .reveal .slides > section[data-transition=slide].past,

  615. .reveal .slides > section[data-transition~=slide-out].past,

  616. .reveal.slide .slides > section:not([data-transition]).past {

  617.   -webkit-transform: translate(-150%, 0);

  618.           transform: translate(-150%, 0); }

  619. 

  620. .reveal .slides > section[data-transition=slide].future,

  621. .reveal .slides > section[data-transition~=slide-in].future,

  622. .reveal.slide .slides > section:not([data-transition]).future {

  623.   -webkit-transform: translate(150%, 0);

  624.           transform: translate(150%, 0); }

  625. 

  626. .reveal .slides > section > section[data-transition=slide].past,

  627. .reveal .slides > section > section[data-transition~=slide-out].past,

  628. .reveal.slide .slides > section > section:not([data-transition]).past {

  629.   -webkit-transform: translate(0, -150%);

  630.           transform: translate(0, -150%); }

  631. 

  632. .reveal .slides > section > section[data-transition=slide].future,

  633. .reveal .slides > section > section[data-transition~=slide-in].future,

  634. .reveal.slide .slides > section > section:not([data-transition]).future {

  635.   -webkit-transform: translate(0, 150%);

  636.           transform: translate(0, 150%); }

  637. 

  638. .reveal.linear section {

  639.   -webkit-backface-visibility: hidden;

  640.           backface-visibility: hidden; }

  641. 

  642. .reveal .slides > section[data-transition=linear].past,

  643. .reveal .slides > section[data-transition~=linear-out].past,

  644. .reveal.linear .slides > section:not([data-transition]).past {

  645.   -webkit-transform: translate(-150%, 0);

  646.           transform: translate(-150%, 0); }

  647. 

  648. .reveal .slides > section[data-transition=linear].future,

  649. .reveal .slides > section[data-transition~=linear-in].future,

  650. .reveal.linear .slides > section:not([data-transition]).future {

  651.   -webkit-transform: translate(150%, 0);

  652.           transform: translate(150%, 0); }

  653. 

  654. .reveal .slides > section > section[data-transition=linear].past,

  655. .reveal .slides > section > section[data-transition~=linear-out].past,

  656. .reveal.linear .slides > section > section:not([data-transition]).past {

  657.   -webkit-transform: translate(0, -150%);

  658.           transform: translate(0, -150%); }

  659. 

  660. .reveal .slides > section > section[data-transition=linear].future,

  661. .reveal .slides > section > section[data-transition~=linear-in].future,

  662. .reveal.linear .slides > section > section:not([data-transition]).future {

  663.   -webkit-transform: translate(0, 150%);

  664.           transform: translate(0, 150%); }

  665. 

  666. /*********************************************

  667.  * CONVEX TRANSITION

  668.  * Aliased 'default' for backwards compatibility

  669.  *********************************************/

  670. .reveal .slides section[data-transition=default].stack,

  671. .reveal.default .slides section.stack {

  672.   -webkit-transform-style: preserve-3d;

  673.           transform-style: preserve-3d; }

  674. 

  675. .reveal .slides > section[data-transition=default].past,

  676. .reveal .slides > section[data-transition~=default-out].past,

  677. .reveal.default .slides > section:not([data-transition]).past {

  678.   -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);

  679.           transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); }

  680. 

  681. .reveal .slides > section[data-transition=default].future,

  682. .reveal .slides > section[data-transition~=default-in].future,

  683. .reveal.default .slides > section:not([data-transition]).future {

  684.   -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);

  685.           transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); }

  686. 

  687. .reveal .slides > section > section[data-transition=default].past,

  688. .reveal .slides > section > section[data-transition~=default-out].past,

  689. .reveal.default .slides > section > section:not([data-transition]).past {

  690.   -webkit-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);

  691.           transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); }

  692. 

  693. .reveal .slides > section > section[data-transition=default].future,

  694. .reveal .slides > section > section[data-transition~=default-in].future,

  695. .reveal.default .slides > section > section:not([data-transition]).future {

  696.   -webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);

  697.           transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); }

  698. 

  699. .reveal .slides section[data-transition=convex].stack,

  700. .reveal.convex .slides section.stack {

  701.   -webkit-transform-style: preserve-3d;

  702.           transform-style: preserve-3d; }

  703. 

  704. .reveal .slides > section[data-transition=convex].past,

  705. .reveal .slides > section[data-transition~=convex-out].past,

  706. .reveal.convex .slides > section:not([data-transition]).past {

  707.   -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);

  708.           transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); }

  709. 

  710. .reveal .slides > section[data-transition=convex].future,

  711. .reveal .slides > section[data-transition~=convex-in].future,

  712. .reveal.convex .slides > section:not([data-transition]).future {

  713.   -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);

  714.           transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); }

  715. 

  716. .reveal .slides > section > section[data-transition=convex].past,

  717. .reveal .slides > section > section[data-transition~=convex-out].past,

  718. .reveal.convex .slides > section > section:not([data-transition]).past {

  719.   -webkit-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);

  720.           transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); }

  721. 

  722. .reveal .slides > section > section[data-transition=convex].future,

  723. .reveal .slides > section > section[data-transition~=convex-in].future,

  724. .reveal.convex .slides > section > section:not([data-transition]).future {

  725.   -webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);

  726.           transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); }

  727. 

  728. /*********************************************

  729.  * CONCAVE TRANSITION

  730.  *********************************************/

  731. .reveal .slides section[data-transition=concave].stack,

  732. .reveal.concave .slides section.stack {

  733.   -webkit-transform-style: preserve-3d;

  734.           transform-style: preserve-3d; }

  735. 

  736. .reveal .slides > section[data-transition=concave].past,

  737. .reveal .slides > section[data-transition~=concave-out].past,

  738. .reveal.concave .slides > section:not([data-transition]).past {

  739.   -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);

  740.           transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); }

  741. 

  742. .reveal .slides > section[data-transition=concave].future,

  743. .reveal .slides > section[data-transition~=concave-in].future,

  744. .reveal.concave .slides > section:not([data-transition]).future {

  745.   -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);

  746.           transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); }

  747. 

  748. .reveal .slides > section > section[data-transition=concave].past,

  749. .reveal .slides > section > section[data-transition~=concave-out].past,

  750. .reveal.concave .slides > section > section:not([data-transition]).past {

  751.   -webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);

  752.           transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); }

  753. 

  754. .reveal .slides > section > section[data-transition=concave].future,

  755. .reveal .slides > section > section[data-transition~=concave-in].future,

  756. .reveal.concave .slides > section > section:not([data-transition]).future {

  757.   -webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);

  758.           transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); }

  759. 

  760. /*********************************************

  761.  * ZOOM TRANSITION

  762.  *********************************************/

  763. .reveal .slides section[data-transition=zoom],

  764. .reveal.zoom .slides section:not([data-transition]) {

  765.   transition-timing-function: ease; }

  766. 

  767. .reveal .slides > section[data-transition=zoom].past,

  768. .reveal .slides > section[data-transition~=zoom-out].past,

  769. .reveal.zoom .slides > section:not([data-transition]).past {

  770.   visibility: hidden;

  771.   -webkit-transform: scale(16);

  772.           transform: scale(16); }

  773. 

  774. .reveal .slides > section[data-transition=zoom].future,

  775. .reveal .slides > section[data-transition~=zoom-in].future,

  776. .reveal.zoom .slides > section:not([data-transition]).future {

  777.   visibility: hidden;

  778.   -webkit-transform: scale(0.2);

  779.           transform: scale(0.2); }

  780. 

  781. .reveal .slides > section > section[data-transition=zoom].past,

  782. .reveal .slides > section > section[data-transition~=zoom-out].past,

  783. .reveal.zoom .slides > section > section:not([data-transition]).past {

  784.   -webkit-transform: scale(16);

  785.           transform: scale(16); }

  786. 

  787. .reveal .slides > section > section[data-transition=zoom].future,

  788. .reveal .slides > section > section[data-transition~=zoom-in].future,

  789. .reveal.zoom .slides > section > section:not([data-transition]).future {

  790.   -webkit-transform: scale(0.2);

  791.           transform: scale(0.2); }

  792. 

  793. /*********************************************

  794.  * CUBE TRANSITION

  795.  *

  796.  * WARNING:

  797.  * this is deprecated and will be removed in a

  798.  * future version.

  799.  *********************************************/

  800. .reveal.cube .slides {

  801.   -webkit-perspective: 1300px;

  802.           perspective: 1300px; }

  803. 

  804. .reveal.cube .slides section {

  805.   padding: 30px;

  806.   min-height: 700px;

  807.   -webkit-backface-visibility: hidden;

  808.           backface-visibility: hidden;

  809.   box-sizing: border-box;

  810.   -webkit-transform-style: preserve-3d;

  811.           transform-style: preserve-3d; }

  812. 

  813. .reveal.center.cube .slides section {

  814.   min-height: 0; }

  815. 

  816. .reveal.cube .slides section:not(.stack):before {

  817.   content: '';

  818.   position: absolute;

  819.   display: block;

  820.   width: 100%;

  821.   height: 100%;

  822.   left: 0;

  823.   top: 0;

  824.   background: rgba(0, 0, 0, 0.1);

  825.   border-radius: 4px;

  826.   -webkit-transform: translateZ(-20px);

  827.           transform: translateZ(-20px); }

  828. 

  829. .reveal.cube .slides section:not(.stack):after {

  830.   content: '';

  831.   position: absolute;

  832.   display: block;

  833.   width: 90%;

  834.   height: 30px;

  835.   left: 5%;

  836.   bottom: 0;

  837.   background: none;

  838.   z-index: 1;

  839.   border-radius: 4px;

  840.   box-shadow: 0px 95px 25px rgba(0, 0, 0, 0.2);

  841.   -webkit-transform: translateZ(-90px) rotateX(65deg);

  842.           transform: translateZ(-90px) rotateX(65deg); }

  843. 

  844. .reveal.cube .slides > section.stack {

  845.   padding: 0;

  846.   background: none; }

  847. 

  848. .reveal.cube .slides > section.past {

  849.   -webkit-transform-origin: 100% 0%;

  850.           transform-origin: 100% 0%;

  851.   -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg);

  852.           transform: translate3d(-100%, 0, 0) rotateY(-90deg); }

  853. 

  854. .reveal.cube .slides > section.future {

  855.   -webkit-transform-origin: 0% 0%;

  856.           transform-origin: 0% 0%;

  857.   -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg);

  858.           transform: translate3d(100%, 0, 0) rotateY(90deg); }

  859. 

  860. .reveal.cube .slides > section > section.past {

  861.   -webkit-transform-origin: 0% 100%;

  862.           transform-origin: 0% 100%;

  863.   -webkit-transform: translate3d(0, -100%, 0) rotateX(90deg);

  864.           transform: translate3d(0, -100%, 0) rotateX(90deg); }

  865. 

  866. .reveal.cube .slides > section > section.future {

  867.   -webkit-transform-origin: 0% 0%;

  868.           transform-origin: 0% 0%;

  869.   -webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg);

  870.           transform: translate3d(0, 100%, 0) rotateX(-90deg); }

  871. 

  872. /*********************************************

  873.  * PAGE TRANSITION

  874.  *

  875.  * WARNING:

  876.  * this is deprecated and will be removed in a

  877.  * future version.

  878.  *********************************************/

  879. .reveal.page .slides {

  880.   -webkit-perspective-origin: 0% 50%;

  881.           perspective-origin: 0% 50%;

  882.   -webkit-perspective: 3000px;

  883.           perspective: 3000px; }

  884. 

  885. .reveal.page .slides section {

  886.   padding: 30px;

  887.   min-height: 700px;

  888.   box-sizing: border-box;

  889.   -webkit-transform-style: preserve-3d;

  890.           transform-style: preserve-3d; }

  891. 

  892. .reveal.page .slides section.past {

  893.   z-index: 12; }

  894. 

  895. .reveal.page .slides section:not(.stack):before {

  896.   content: '';

  897.   position: absolute;

  898.   display: block;

  899.   width: 100%;

  900.   height: 100%;

  901.   left: 0;

  902.   top: 0;

  903.   background: rgba(0, 0, 0, 0.1);

  904.   -webkit-transform: translateZ(-20px);

  905.           transform: translateZ(-20px); }

  906. 

  907. .reveal.page .slides section:not(.stack):after {

  908.   content: '';

  909.   position: absolute;

  910.   display: block;

  911.   width: 90%;

  912.   height: 30px;

  913.   left: 5%;

  914.   bottom: 0;

  915.   background: none;

  916.   z-index: 1;

  917.   border-radius: 4px;

  918.   box-shadow: 0px 95px 25px rgba(0, 0, 0, 0.2);

  919.   -webkit-transform: translateZ(-90px) rotateX(65deg); }

  920. 

  921. .reveal.page .slides > section.stack {

  922.   padding: 0;

  923.   background: none; }

  924. 

  925. .reveal.page .slides > section.past {

  926.   -webkit-transform-origin: 0% 0%;

  927.           transform-origin: 0% 0%;

  928.   -webkit-transform: translate3d(-40%, 0, 0) rotateY(-80deg);

  929.           transform: translate3d(-40%, 0, 0) rotateY(-80deg); }

  930. 

  931. .reveal.page .slides > section.future {

  932.   -webkit-transform-origin: 100% 0%;

  933.           transform-origin: 100% 0%;

  934.   -webkit-transform: translate3d(0, 0, 0);

  935.           transform: translate3d(0, 0, 0); }

  936. 

  937. .reveal.page .slides > section > section.past {

  938.   -webkit-transform-origin: 0% 0%;

  939.           transform-origin: 0% 0%;

  940.   -webkit-transform: translate3d(0, -40%, 0) rotateX(80deg);

  941.           transform: translate3d(0, -40%, 0) rotateX(80deg); }

  942. 

  943. .reveal.page .slides > section > section.future {

  944.   -webkit-transform-origin: 0% 100%;

  945.           transform-origin: 0% 100%;

  946.   -webkit-transform: translate3d(0, 0, 0);

  947.           transform: translate3d(0, 0, 0); }

  948. 

  949. /*********************************************

  950.  * FADE TRANSITION

  951.  *********************************************/

  952. .reveal .slides section[data-transition=fade],

  953. .reveal.fade .slides section:not([data-transition]),

  954. .reveal.fade .slides > section > section:not([data-transition]) {

  955.   -webkit-transform: none;

  956.           transform: none;

  957.   transition: opacity 0.5s; }

  958. 

  959. .reveal.fade.overview .slides section,

  960. .reveal.fade.overview .slides > section > section {

  961.   transition: none; }

  962. 

  963. /*********************************************

  964.  * NO TRANSITION

  965.  *********************************************/

  966. .reveal .slides section[data-transition=none],

  967. .reveal.none .slides section:not([data-transition]) {

  968.   -webkit-transform: none;

  969.           transform: none;

  970.   transition: none; }

  971. 

  972. /*********************************************

  973.  * PAUSED MODE

  974.  *********************************************/

  975. .reveal .pause-overlay {

  976.   position: absolute;

  977.   top: 0;

  978.   left: 0;

  979.   width: 100%;

  980.   height: 100%;

  981.   background: black;

  982.   visibility: hidden;

  983.   opacity: 0;

  984.   z-index: 100;

  985.   transition: all 1s ease; }

  986. 

  987. .reveal .pause-overlay .resume-button {

  988.   position: absolute;

  989.   bottom: 20px;

  990.   right: 20px;

  991.   color: #ccc;

  992.   border-radius: 2px;

  993.   padding: 6px 14px;

  994.   border: 2px solid #ccc;

  995.   font-size: 16px;

  996.   background: transparent;

  997.   cursor: pointer; }

  998.   .reveal .pause-overlay .resume-button:hover {

  999.     color: #fff;

  1000.     border-color: #fff; }

  1001. 

  1002. .reveal.paused .pause-overlay {

  1003.   visibility: visible;

  1004.   opacity: 1; }

  1005. 

  1006. /*********************************************

  1007.  * FALLBACK

  1008.  *********************************************/

  1009. .no-transforms {

  1010.   overflow-y: auto; }

  1011. 

  1012. .no-transforms .reveal {

  1013.   overflow: visible; }

  1014. 

  1015. .no-transforms .reveal .slides {

  1016.   position: relative;

  1017.   width: 80%;

  1018.   max-width: 1280px;

  1019.   height: auto;

  1020.   top: 0;

  1021.   margin: 0 auto;

  1022.   text-align: center; }

  1023. 

  1024. .no-transforms .reveal .controls,

  1025. .no-transforms .reveal .progress {

  1026.   display: none; }

  1027. 

  1028. .no-transforms .reveal .slides section {

  1029.   display: block;

  1030.   opacity: 1;

  1031.   position: relative;

  1032.   height: auto;

  1033.   min-height: 0;

  1034.   top: 0;

  1035.   left: 0;

  1036.   margin: 10vh 0;

  1037.   margin: 70px 0;

  1038.   -webkit-transform: none;

  1039.           transform: none; }

  1040. 

  1041. .reveal .no-transition,

  1042. .reveal .no-transition * {

  1043.   transition: none !important; }

  1044. 

  1045. /*********************************************

  1046.  * PER-SLIDE BACKGROUNDS

  1047.  *********************************************/

  1048. .reveal .backgrounds {

  1049.   position: absolute;

  1050.   width: 100%;

  1051.   height: 100%;

  1052.   top: 0;

  1053.   left: 0;

  1054.   -webkit-perspective: 600px;

  1055.           perspective: 600px; }

  1056. 

  1057. .reveal .slide-background {

  1058.   display: none;

  1059.   position: absolute;

  1060.   width: 100%;

  1061.   height: 100%;

  1062.   opacity: 0;

  1063.   visibility: hidden;

  1064.   overflow: hidden;

  1065.   background-color: rgba(0, 0, 0, 0);

  1066.   transition: all 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

  1067. 

  1068. .reveal .slide-background-content {

  1069.   position: absolute;

  1070.   width: 100%;

  1071.   height: 100%;

  1072.   background-position: 50% 50%;

  1073.   background-repeat: no-repeat;

  1074.   background-size: cover; }

  1075. 

  1076. .reveal .slide-background.stack {

  1077.   display: block; }

  1078. 

  1079. .reveal .slide-background.present {

  1080.   opacity: 1;

  1081.   visibility: visible;

  1082.   z-index: 2; }

  1083. 

  1084. .print-pdf .reveal .slide-background {

  1085.   opacity: 1 !important;

  1086.   visibility: visible !important; }

  1087. 

  1088. /* Video backgrounds */

  1089. .reveal .slide-background video {

  1090.   position: absolute;

  1091.   width: 100%;

  1092.   height: 100%;

  1093.   max-width: none;

  1094.   max-height: none;

  1095.   top: 0;

  1096.   left: 0;

  1097.   -o-object-fit: cover;

  1098.      object-fit: cover; }

  1099. 

  1100. .reveal .slide-background[data-background-size="contain"] video {

  1101.   -o-object-fit: contain;

  1102.      object-fit: contain; }

  1103. 

  1104. /* Immediate transition style */

  1105. .reveal[data-background-transition=none] > .backgrounds .slide-background,

  1106. .reveal > .backgrounds .slide-background[data-background-transition=none] {

  1107.   transition: none; }

  1108. 

  1109. /* Slide */

  1110. .reveal[data-background-transition=slide] > .backgrounds .slide-background,

  1111. .reveal > .backgrounds .slide-background[data-background-transition=slide] {

  1112.   opacity: 1;

  1113.   -webkit-backface-visibility: hidden;

  1114.           backface-visibility: hidden; }

  1115. 

  1116. .reveal[data-background-transition=slide] > .backgrounds .slide-background.past,

  1117. .reveal > .backgrounds .slide-background.past[data-background-transition=slide] {

  1118.   -webkit-transform: translate(-100%, 0);

  1119.           transform: translate(-100%, 0); }

  1120. 

  1121. .reveal[data-background-transition=slide] > .backgrounds .slide-background.future,

  1122. .reveal > .backgrounds .slide-background.future[data-background-transition=slide] {

  1123.   -webkit-transform: translate(100%, 0);

  1124.           transform: translate(100%, 0); }

  1125. 

  1126. .reveal[data-background-transition=slide] > .backgrounds .slide-background > .slide-background.past,

  1127. .reveal > .backgrounds .slide-background > .slide-background.past[data-background-transition=slide] {

  1128.   -webkit-transform: translate(0, -100%);

  1129.           transform: translate(0, -100%); }

  1130. 

  1131. .reveal[data-background-transition=slide] > .backgrounds .slide-background > .slide-background.future,

  1132. .reveal > .backgrounds .slide-background > .slide-background.future[data-background-transition=slide] {

  1133.   -webkit-transform: translate(0, 100%);

  1134.           transform: translate(0, 100%); }

  1135. 

  1136. /* Convex */

  1137. .reveal[data-background-transition=convex] > .backgrounds .slide-background.past,

  1138. .reveal > .backgrounds .slide-background.past[data-background-transition=convex] {

  1139.   opacity: 0;

  1140.   -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);

  1141.           transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); }

  1142. 

  1143. .reveal[data-background-transition=convex] > .backgrounds .slide-background.future,

  1144. .reveal > .backgrounds .slide-background.future[data-background-transition=convex] {

  1145.   opacity: 0;

  1146.   -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);

  1147.           transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); }

  1148. 

  1149. .reveal[data-background-transition=convex] > .backgrounds .slide-background > .slide-background.past,

  1150. .reveal > .backgrounds .slide-background > .slide-background.past[data-background-transition=convex] {

  1151.   opacity: 0;

  1152.   -webkit-transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0);

  1153.           transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0); }

  1154. 

  1155. .reveal[data-background-transition=convex] > .backgrounds .slide-background > .slide-background.future,

  1156. .reveal > .backgrounds .slide-background > .slide-background.future[data-background-transition=convex] {

  1157.   opacity: 0;

  1158.   -webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0);

  1159.           transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0); }

  1160. 

  1161. /* Concave */

  1162. .reveal[data-background-transition=concave] > .backgrounds .slide-background.past,

  1163. .reveal > .backgrounds .slide-background.past[data-background-transition=concave] {

  1164.   opacity: 0;

  1165.   -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);

  1166.           transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); }

  1167. 

  1168. .reveal[data-background-transition=concave] > .backgrounds .slide-background.future,

  1169. .reveal > .backgrounds .slide-background.future[data-background-transition=concave] {

  1170.   opacity: 0;

  1171.   -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);

  1172.           transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); }

  1173. 

  1174. .reveal[data-background-transition=concave] > .backgrounds .slide-background > .slide-background.past,

  1175. .reveal > .backgrounds .slide-background > .slide-background.past[data-background-transition=concave] {

  1176.   opacity: 0;

  1177.   -webkit-transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0);

  1178.           transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0); }

  1179. 

  1180. .reveal[data-background-transition=concave] > .backgrounds .slide-background > .slide-background.future,

  1181. .reveal > .backgrounds .slide-background > .slide-background.future[data-background-transition=concave] {

  1182.   opacity: 0;

  1183.   -webkit-transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0);

  1184.           transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0); }

  1185. 

  1186. /* Zoom */

  1187. .reveal[data-background-transition=zoom] > .backgrounds .slide-background,

  1188. .reveal > .backgrounds .slide-background[data-background-transition=zoom] {

  1189.   transition-timing-function: ease; }

  1190. 

  1191. .reveal[data-background-transition=zoom] > .backgrounds .slide-background.past,

  1192. .reveal > .backgrounds .slide-background.past[data-background-transition=zoom] {

  1193.   opacity: 0;

  1194.   visibility: hidden;

  1195.   -webkit-transform: scale(16);

  1196.           transform: scale(16); }

  1197. 

  1198. .reveal[data-background-transition=zoom] > .backgrounds .slide-background.future,

  1199. .reveal > .backgrounds .slide-background.future[data-background-transition=zoom] {

  1200.   opacity: 0;

  1201.   visibility: hidden;

  1202.   -webkit-transform: scale(0.2);

  1203.           transform: scale(0.2); }

  1204. 

  1205. .reveal[data-background-transition=zoom] > .backgrounds .slide-background > .slide-background.past,

  1206. .reveal > .backgrounds .slide-background > .slide-background.past[data-background-transition=zoom] {

  1207.   opacity: 0;

  1208.   visibility: hidden;

  1209.   -webkit-transform: scale(16);

  1210.           transform: scale(16); }

  1211. 

  1212. .reveal[data-background-transition=zoom] > .backgrounds .slide-background > .slide-background.future,

  1213. .reveal > .backgrounds .slide-background > .slide-background.future[data-background-transition=zoom] {

  1214.   opacity: 0;

  1215.   visibility: hidden;

  1216.   -webkit-transform: scale(0.2);

  1217.           transform: scale(0.2); }

  1218. 

  1219. /* Global transition speed settings */

  1220. .reveal[data-transition-speed="fast"] > .backgrounds .slide-background {

  1221.   transition-duration: 400ms; }

  1222. 

  1223. .reveal[data-transition-speed="slow"] > .backgrounds .slide-background {

  1224.   transition-duration: 1200ms; }

  1225. 

  1226. /*********************************************

  1227.  * OVERVIEW

  1228.  *********************************************/

  1229. .reveal.overview {

  1230.   -webkit-perspective-origin: 50% 50%;

  1231.           perspective-origin: 50% 50%;

  1232.   -webkit-perspective: 700px;

  1233.           perspective: 700px; }

  1234.   .reveal.overview .slides {

  1235.     -moz-transform-style: preserve-3d; }

  1236.   .reveal.overview .slides section {

  1237.     height: 100%;

  1238.     top: 0 !important;

  1239.     opacity: 1 !important;

  1240.     overflow: hidden;

  1241.     visibility: visible !important;

  1242.     cursor: pointer;

  1243.     box-sizing: border-box; }

  1244.   .reveal.overview .slides section:hover,

  1245.   .reveal.overview .slides section.present {

  1246.     outline: 10px solid rgba(150, 150, 150, 0.4);

  1247.     outline-offset: 10px; }

  1248.   .reveal.overview .slides section .fragment {

  1249.     opacity: 1;

  1250.     transition: none; }

  1251.   .reveal.overview .slides section:after,

  1252.   .reveal.overview .slides section:before {

  1253.     display: none !important; }

  1254.   .reveal.overview .slides > section.stack {

  1255.     padding: 0;

  1256.     top: 0 !important;

  1257.     background: none;

  1258.     outline: none;

  1259.     overflow: visible; }

  1260.   .reveal.overview .backgrounds {

  1261.     -webkit-perspective: inherit;

  1262.             perspective: inherit;

  1263.     -moz-transform-style: preserve-3d; }

  1264.   .reveal.overview .backgrounds .slide-background {

  1265.     opacity: 1;

  1266.     visibility: visible;

  1267.     outline: 10px solid rgba(150, 150, 150, 0.1);

  1268.     outline-offset: 10px; }

  1269.   .reveal.overview .backgrounds .slide-background.stack {

  1270.     overflow: visible; }

  1271. 

  1272. .reveal.overview .slides section,

  1273. .reveal.overview-deactivating .slides section {

  1274.   transition: none; }

  1275. 

  1276. .reveal.overview .backgrounds .slide-background,

  1277. .reveal.overview-deactivating .backgrounds .slide-background {

  1278.   transition: none; }

  1279. 

  1280. /*********************************************

  1281.  * RTL SUPPORT

  1282.  *********************************************/

  1283. .reveal.rtl .slides,

  1284. .reveal.rtl .slides h1,

  1285. .reveal.rtl .slides h2,

  1286. .reveal.rtl .slides h3,

  1287. .reveal.rtl .slides h4,

  1288. .reveal.rtl .slides h5,

  1289. .reveal.rtl .slides h6 {

  1290.   direction: rtl;

  1291.   font-family: sans-serif; }

  1292. 

  1293. .reveal.rtl pre,

  1294. .reveal.rtl code {

  1295.   direction: ltr; }

  1296. 

  1297. .reveal.rtl ol,

  1298. .reveal.rtl ul {

  1299.   text-align: right; }

  1300. 

  1301. .reveal.rtl .progress span {

  1302.   float: right; }

  1303. 

  1304. /*********************************************

  1305.  * PARALLAX BACKGROUND

  1306.  *********************************************/

  1307. .reveal.has-parallax-background .backgrounds {

  1308.   transition: all 0.8s ease; }

  1309. 

  1310. /* Global transition speed settings */

  1311. .reveal.has-parallax-background[data-transition-speed="fast"] .backgrounds {

  1312.   transition-duration: 400ms; }

  1313. 

  1314. .reveal.has-parallax-background[data-transition-speed="slow"] .backgrounds {

  1315.   transition-duration: 1200ms; }

  1316. 

  1317. /*********************************************

  1318.  * OVERLAY FOR LINK PREVIEWS AND HELP

  1319.  *********************************************/

  1320. .reveal > .overlay {

  1321.   position: absolute;

  1322.   top: 0;

  1323.   left: 0;

  1324.   width: 100%;

  1325.   height: 100%;

  1326.   z-index: 1000;

  1327.   background: rgba(0, 0, 0, 0.9);

  1328.   opacity: 0;

  1329.   visibility: hidden;

  1330.   transition: all 0.3s ease; }

  1331. 

  1332. .reveal > .overlay.visible {

  1333.   opacity: 1;

  1334.   visibility: visible; }

  1335. 

  1336. .reveal > .overlay .spinner {

  1337.   position: absolute;

  1338.   display: block;

  1339.   top: 50%;

  1340.   left: 50%;

  1341.   width: 32px;

  1342.   height: 32px;

  1343.   margin: -16px 0 0 -16px;

  1344.   z-index: 10;

  1345.   background-image: url(data:image/gif;base64,R0lGODlhIAAgAPMAAJmZmf%2F%2F%2F6%2Bvr8nJybW1tcDAwOjo6Nvb26ioqKOjo7Ozs%2FLy8vz8%2FAAAAAAAAAAAACH%2FC05FVFNDQVBFMi4wAwEAAAAh%2FhpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh%2BQQJCgAAACwAAAAAIAAgAAAE5xDISWlhperN52JLhSSdRgwVo1ICQZRUsiwHpTJT4iowNS8vyW2icCF6k8HMMBkCEDskxTBDAZwuAkkqIfxIQyhBQBFvAQSDITM5VDW6XNE4KagNh6Bgwe60smQUB3d4Rz1ZBApnFASDd0hihh12BkE9kjAJVlycXIg7CQIFA6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YJvpJivxNaGmLHT0VnOgSYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ%2FV%2FnmOM82XiHRLYKhKP1oZmADdEAAAh%2BQQJCgAAACwAAAAAIAAgAAAE6hDISWlZpOrNp1lGNRSdRpDUolIGw5RUYhhHukqFu8DsrEyqnWThGvAmhVlteBvojpTDDBUEIFwMFBRAmBkSgOrBFZogCASwBDEY%2FCZSg7GSE0gSCjQBMVG023xWBhklAnoEdhQEfyNqMIcKjhRsjEdnezB%2BA4k8gTwJhFuiW4dokXiloUepBAp5qaKpp6%2BHo7aWW54wl7obvEe0kRuoplCGepwSx2jJvqHEmGt6whJpGpfJCHmOoNHKaHx61WiSR92E4lbFoq%2BB6QDtuetcaBPnW6%2BO7wDHpIiK9SaVK5GgV543tzjgGcghAgAh%2BQQJCgAAACwAAAAAIAAgAAAE7hDISSkxpOrN5zFHNWRdhSiVoVLHspRUMoyUakyEe8PTPCATW9A14E0UvuAKMNAZKYUZCiBMuBakSQKG8G2FzUWox2AUtAQFcBKlVQoLgQReZhQlCIJesQXI5B0CBnUMOxMCenoCfTCEWBsJColTMANldx15BGs8B5wlCZ9Po6OJkwmRpnqkqnuSrayqfKmqpLajoiW5HJq7FL1Gr2mMMcKUMIiJgIemy7xZtJsTmsM4xHiKv5KMCXqfyUCJEonXPN2rAOIAmsfB3uPoAK%2B%2BG%2Bw48edZPK%2BM6hLJpQg484enXIdQFSS1u6UhksENEQAAIfkECQoAAAAsAAAAACAAIAAABOcQyEmpGKLqzWcZRVUQnZYg1aBSh2GUVEIQ2aQOE%2BG%2BcD4ntpWkZQj1JIiZIogDFFyHI0UxQwFugMSOFIPJftfVAEoZLBbcLEFhlQiqGp1Vd140AUklUN3eCA51C1EWMzMCezCBBmkxVIVHBWd3HHl9JQOIJSdSnJ0TDKChCwUJjoWMPaGqDKannasMo6WnM562R5YluZRwur0wpgqZE7NKUm%2BFNRPIhjBJxKZteWuIBMN4zRMIVIhffcgojwCF117i4nlLnY5ztRLsnOk%2BaV%2BoJY7V7m76PdkS4trKcdg0Zc0tTcKkRAAAIfkECQoAAAAsAAAAACAAIAAABO4QyEkpKqjqzScpRaVkXZWQEximw1BSCUEIlDohrft6cpKCk5xid5MNJTaAIkekKGQkWyKHkvhKsR7ARmitkAYDYRIbUQRQjWBwJRzChi9CRlBcY1UN4g0%2FVNB0AlcvcAYHRyZPdEQFYV8ccwR5HWxEJ02YmRMLnJ1xCYp0Y5idpQuhopmmC2KgojKasUQDk5BNAwwMOh2RtRq5uQuPZKGIJQIGwAwGf6I0JXMpC8C7kXWDBINFMxS4DKMAWVWAGYsAdNqW5uaRxkSKJOZKaU3tPOBZ4DuK2LATgJhkPJMgTwKCdFjyPHEnKxFCDhEAACH5BAkKAAAALAAAAAAgACAAAATzEMhJaVKp6s2nIkolIJ2WkBShpkVRWqqQrhLSEu9MZJKK9y1ZrqYK9WiClmvoUaF8gIQSNeF1Er4MNFn4SRSDARWroAIETg1iVwuHjYB1kYc1mwruwXKC9gmsJXliGxc%2BXiUCby9ydh1sOSdMkpMTBpaXBzsfhoc5l58Gm5yToAaZhaOUqjkDgCWNHAULCwOLaTmzswadEqggQwgHuQsHIoZCHQMMQgQGubVEcxOPFAcMDAYUA85eWARmfSRQCdcMe0zeP1AAygwLlJtPNAAL19DARdPzBOWSm1brJBi45soRAWQAAkrQIykShQ9wVhHCwCQCACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiRMDjI0Fd30%2FiI2UA5GSS5UDj2l6NoqgOgN4gksEBgYFf0FDqKgHnyZ9OX8HrgYHdHpcHQULXAS2qKpENRg7eAMLC7kTBaixUYFkKAzWAAnLC7FLVxLWDBLKCwaKTULgEwbLA4hJtOkSBNqITT3xEgfLpBtzE%2FjiuL04RGEBgwWhShRgQExHBAAh%2BQQJCgAAACwAAAAAIAAgAAAE7xDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfZiCqGk5dTESJeaOAlClzsJsqwiJwiqnFrb2nS9kmIcgEsjQydLiIlHehhpejaIjzh9eomSjZR%2BipslWIRLAgMDOR2DOqKogTB9pCUJBagDBXR6XB0EBkIIsaRsGGMMAxoDBgYHTKJiUYEGDAzHC9EACcUGkIgFzgwZ0QsSBcXHiQvOwgDdEwfFs0sDzt4S6BK4xYjkDOzn0unFeBzOBijIm1Dgmg5YFQwsCMjp1oJ8LyIAACH5BAkKAAAALAAAAAAgACAAAATwEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GGl6NoiPOH16iZKNlH6KmyWFOggHhEEvAwwMA0N9GBsEC6amhnVcEwavDAazGwIDaH1ipaYLBUTCGgQDA8NdHz0FpqgTBwsLqAbWAAnIA4FWKdMLGdYGEgraigbT0OITBcg5QwPT4xLrROZL6AuQAPUS7bxLpoWidY0JtxLHKhwwMJBTHgPKdEQAACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GAULDJCRiXo1CpGXDJOUjY%2BYip9DhToJA4RBLwMLCwVDfRgbBAaqqoZ1XBMHswsHtxtFaH1iqaoGNgAIxRpbFAgfPQSqpbgGBqUD1wBXeCYp1AYZ19JJOYgH1KwA4UBvQwXUBxPqVD9L3sbp2BNk2xvvFPJd%2BMFCN6HAAIKgNggY0KtEBAAh%2BQQJCgAAACwAAAAAIAAgAAAE6BDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfYIDMaAFdTESJeaEDAIMxYFqrOUaNW4E4ObYcCXaiBVEgULe0NJaxxtYksjh2NLkZISgDgJhHthkpU4mW6blRiYmZOlh4JWkDqILwUGBnE6TYEbCgevr0N1gH4At7gHiRpFaLNrrq8HNgAJA70AWxQIH1%2BvsYMDAzZQPC9VCNkDWUhGkuE5PxJNwiUK4UfLzOlD4WvzAHaoG9nxPi5d%2BjYUqfAhhykOFwJWiAAAIfkECQoAAAAsAAAAACAAIAAABPAQyElpUqnqzaciSoVkXVUMFaFSwlpOCcMYlErAavhOMnNLNo8KsZsMZItJEIDIFSkLGQoQTNhIsFehRww2CQLKF0tYGKYSg%2BygsZIuNqJksKgbfgIGepNo2cIUB3V1B3IvNiBYNQaDSTtfhhx0CwVPI0UJe0%2Bbm4g5VgcGoqOcnjmjqDSdnhgEoamcsZuXO1aWQy8KAwOAuTYYGwi7w5h%2BKr0SJ8MFihpNbx%2B4Erq7BYBuzsdiH1jCAzoSfl0rVirNbRXlBBlLX%2BBP0XJLAPGzTkAuAOqb0WT5AH7OcdCm5B8TgRwSRKIHQtaLCwg1RAAAOwAAAAAAAAAAAA%3D%3D);

  1346.   visibility: visible;

  1347.   opacity: 0.6;

  1348.   transition: all 0.3s ease; }

  1349. 

  1350. .reveal > .overlay header {

  1351.   position: absolute;

  1352.   left: 0;

  1353.   top: 0;

  1354.   width: 100%;

  1355.   height: 40px;

  1356.   z-index: 2;

  1357.   border-bottom: 1px solid #222; }

  1358. 

  1359. .reveal > .overlay header a {

  1360.   display: inline-block;

  1361.   width: 40px;

  1362.   height: 40px;

  1363.   line-height: 36px;

  1364.   padding: 0 10px;

  1365.   float: right;

  1366.   opacity: 0.6;

  1367.   box-sizing: border-box; }

  1368. 

  1369. .reveal > .overlay header a:hover {

  1370.   opacity: 1; }

  1371. 

  1372. .reveal > .overlay header a .icon {

  1373.   display: inline-block;

  1374.   width: 20px;

  1375.   height: 20px;

  1376.   background-position: 50% 50%;

  1377.   background-size: 100%;

  1378.   background-repeat: no-repeat; }

  1379. 

  1380. .reveal > .overlay header a.close .icon {

  1381.   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC); }

  1382. 

  1383. .reveal > .overlay header a.external .icon {

  1384.   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==); }

  1385. 

  1386. .reveal > .overlay .viewport {

  1387.   position: absolute;

  1388.   display: -webkit-box;

  1389.   display: -ms-flexbox;

  1390.   display: flex;

  1391.   top: 40px;

  1392.   right: 0;

  1393.   bottom: 0;

  1394.   left: 0; }

  1395. 

  1396. .reveal > .overlay.overlay-preview .viewport iframe {

  1397.   width: 100%;

  1398.   height: 100%;

  1399.   max-width: 100%;

  1400.   max-height: 100%;

  1401.   border: 0;

  1402.   opacity: 0;

  1403.   visibility: hidden;

  1404.   transition: all 0.3s ease; }

  1405. 

  1406. .reveal > .overlay.overlay-preview.loaded .viewport iframe {

  1407.   opacity: 1;

  1408.   visibility: visible; }

  1409. 

  1410. .reveal > .overlay.overlay-preview.loaded .viewport-inner {

  1411.   position: absolute;

  1412.   z-index: -1;

  1413.   left: 0;

  1414.   top: 45%;

  1415.   width: 100%;

  1416.   text-align: center;

  1417.   letter-spacing: normal; }

  1418. 

  1419. .reveal > .overlay.overlay-preview .x-frame-error {

  1420.   opacity: 0;

  1421.   transition: opacity 0.3s ease 0.3s; }

  1422. 

  1423. .reveal > .overlay.overlay-preview.loaded .x-frame-error {

  1424.   opacity: 1; }

  1425. 

  1426. .reveal > .overlay.overlay-preview.loaded .spinner {

  1427.   opacity: 0;

  1428.   visibility: hidden;

  1429.   -webkit-transform: scale(0.2);

  1430.           transform: scale(0.2); }

  1431. 

  1432. .reveal > .overlay.overlay-help .viewport {

  1433.   overflow: auto;

  1434.   color: #fff; }

  1435. 

  1436. .reveal > .overlay.overlay-help .viewport .viewport-inner {

  1437.   width: 600px;

  1438.   margin: auto;

  1439.   padding: 20px 20px 80px 20px;

  1440.   text-align: center;

  1441.   letter-spacing: normal; }

  1442. 

  1443. .reveal > .overlay.overlay-help .viewport .viewport-inner .title {

  1444.   font-size: 20px; }

  1445. 

  1446. .reveal > .overlay.overlay-help .viewport .viewport-inner table {

  1447.   border: 1px solid #fff;

  1448.   border-collapse: collapse;

  1449.   font-size: 16px; }

  1450. 

  1451. .reveal > .overlay.overlay-help .viewport .viewport-inner table th,

  1452. .reveal > .overlay.overlay-help .viewport .viewport-inner table td {

  1453.   width: 200px;

  1454.   padding: 14px;

  1455.   border: 1px solid #fff;

  1456.   vertical-align: middle; }

  1457. 

  1458. .reveal > .overlay.overlay-help .viewport .viewport-inner table th {

  1459.   padding-top: 20px;

  1460.   padding-bottom: 20px; }

  1461. 

  1462. /*********************************************

  1463.  * PLAYBACK COMPONENT

  1464.  *********************************************/

  1465. .reveal .playback {

  1466.   position: absolute;

  1467.   left: 15px;

  1468.   bottom: 20px;

  1469.   z-index: 30;

  1470.   cursor: pointer;

  1471.   transition: all 400ms ease;

  1472.   -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

  1473. 

  1474. .reveal.overview .playback {

  1475.   opacity: 0;

  1476.   visibility: hidden; }

  1477. 

  1478. /*********************************************

  1479.  * CODE HIGHLGIHTING

  1480.  *********************************************/

  1481. .reveal .hljs table {

  1482.   margin: initial; }

  1483. 

  1484. .reveal .hljs-ln-code,

  1485. .reveal .hljs-ln-numbers {

  1486.   padding: 0;

  1487.   border: 0; }

  1488. 

  1489. .reveal .hljs-ln-numbers {

  1490.   opacity: 0.6;

  1491.   padding-right: 0.75em;

  1492.   text-align: right;

  1493.   vertical-align: top; }

  1494. 

  1495. .reveal .hljs[data-line-numbers]:not([data-line-numbers=""]) tr:not(.highlight-line) {

  1496.   opacity: 0.4; }

  1497. 

  1498. /*********************************************

  1499.  * ROLLING LINKS

  1500.  *********************************************/

  1501. .reveal .roll {

  1502.   display: inline-block;

  1503.   line-height: 1.2;

  1504.   overflow: hidden;

  1505.   vertical-align: top;

  1506.   -webkit-perspective: 400px;

  1507.           perspective: 400px;

  1508.   -webkit-perspective-origin: 50% 50%;

  1509.           perspective-origin: 50% 50%; }

  1510. 

  1511. .reveal .roll:hover {

  1512.   background: none;

  1513.   text-shadow: none; }

  1514. 

  1515. .reveal .roll span {

  1516.   display: block;

  1517.   position: relative;

  1518.   padding: 0 2px;

  1519.   pointer-events: none;

  1520.   transition: all 400ms ease;

  1521.   -webkit-transform-origin: 50% 0%;

  1522.           transform-origin: 50% 0%;

  1523.   -webkit-transform-style: preserve-3d;

  1524.           transform-style: preserve-3d;

  1525.   -webkit-backface-visibility: hidden;

  1526.           backface-visibility: hidden; }

  1527. 

  1528. .reveal .roll:hover span {

  1529.   background: rgba(0, 0, 0, 0.5);

  1530.   -webkit-transform: translate3d(0px, 0px, -45px) rotateX(90deg);

  1531.           transform: translate3d(0px, 0px, -45px) rotateX(90deg); }

  1532. 

  1533. .reveal .roll span:after {

  1534.   content: attr(data-title);

  1535.   display: block;

  1536.   position: absolute;

  1537.   left: 0;

  1538.   top: 0;

  1539.   padding: 0 2px;

  1540.   -webkit-backface-visibility: hidden;

  1541.           backface-visibility: hidden;

  1542.   -webkit-transform-origin: 50% 0%;

  1543.           transform-origin: 50% 0%;

  1544.   -webkit-transform: translate3d(0px, 110%, 0px) rotateX(-90deg);

  1545.           transform: translate3d(0px, 110%, 0px) rotateX(-90deg); }

  1546. 

  1547. /*********************************************

  1548.  * SPEAKER NOTES

  1549.  *********************************************/

  1550. .reveal aside.notes {

  1551.   display: none; }

  1552. 

  1553. .reveal .speaker-notes {

  1554.   display: none;

  1555.   position: absolute;

  1556.   width: 33.3333333333%;

  1557.   height: 100%;

  1558.   top: 0;

  1559.   left: 100%;

  1560.   padding: 14px 18px 14px 18px;

  1561.   z-index: 1;

  1562.   font-size: 18px;

  1563.   line-height: 1.4;

  1564.   border: 1px solid rgba(0, 0, 0, 0.05);

  1565.   color: #222;

  1566.   background-color: #f5f5f5;

  1567.   overflow: auto;

  1568.   box-sizing: border-box;

  1569.   text-align: left;

  1570.   font-family: Helvetica, sans-serif;

  1571.   -webkit-overflow-scrolling: touch; }

  1572.   .reveal .speaker-notes .notes-placeholder {

  1573.     color: #ccc;

  1574.     font-style: italic; }

  1575.   .reveal .speaker-notes:focus {

  1576.     outline: none; }

  1577.   .reveal .speaker-notes:before {

  1578.     content: 'Speaker notes';

  1579.     display: block;

  1580.     margin-bottom: 10px;

  1581.     opacity: 0.5; }

  1582. 

  1583. .reveal.show-notes {

  1584.   max-width: 75%;

  1585.   overflow: visible; }

  1586. 

  1587. .reveal.show-notes .speaker-notes {

  1588.   display: block; }

  1589. 

  1590. @media screen and (min-width: 1600px) {

  1591.   .reveal .speaker-notes {

  1592.     font-size: 20px; } }

  1593. 

  1594. @media screen and (max-width: 1024px) {

  1595.   .reveal.show-notes {

  1596.     border-left: 0;

  1597.     max-width: none;

  1598.     max-height: 70%;

  1599.     max-height: 70vh;

  1600.     overflow: visible; }

  1601.   .reveal.show-notes .speaker-notes {

  1602.     top: 100%;

  1603.     left: 0;

  1604.     width: 100%;

  1605.     height: 42.8571428571%;

  1606.     height: 30vh;

  1607.     border: 0; } }

  1608. 

  1609. @media screen and (max-width: 600px) {

  1610.   .reveal.show-notes {

  1611.     max-height: 60%;

  1612.     max-height: 60vh; }

  1613.   .reveal.show-notes .speaker-notes {

  1614.     top: 100%;

  1615.     height: 66.6666666667%;

  1616.     height: 40vh; }

  1617.   .reveal .speaker-notes {

  1618.     font-size: 14px; } }

  1619. 

  1620. /*********************************************

  1621.  * ZOOM PLUGIN

  1622.  *********************************************/

  1623. .zoomed .reveal *,

  1624. .zoomed .reveal *:before,

  1625. .zoomed .reveal *:after {

  1626.   -webkit-backface-visibility: visible !important;

  1627.           backface-visibility: visible !important; }

  1628. 

  1629. .zoomed .reveal .progress,

  1630. .zoomed .reveal .controls {

  1631.   opacity: 0; }

  1632. 

  1633. .zoomed .reveal .roll span {

  1634.   background: none; }

  1635. 

  1636. .zoomed .reveal .roll span:after {

  1637.   visibility: hidden; }

  1638. 

  1639. /**

  1640.  * White theme for reveal.js. This is the opposite of the 'black' theme.

  1641.  *

  1642.  * By Hakim El Hattab, http://hakim.se

  1643.  */

  1644. /*@import url(../../lib/font/source-sans-pro/source-sans-pro.css);*/

  1645. section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {

  1646.   color: #fff; }

  1647. 

  1648. /*********************************************

  1649.  * GLOBAL STYLES

  1650.  *********************************************/

  1651. body {

  1652.   background: #fff;

  1653.   background-color: #fff; }

  1654. 

  1655. .reveal {

  1656.   font-family: "Source Sans Pro", Helvetica, sans-serif;

  1657.   font-size: 42px;

  1658.   font-weight: normal;

  1659.   color: #222; }

  1660. 

  1661. ::selection {

  1662.   color: #fff;

  1663.   background: #98bdef;

  1664.   text-shadow: none; }

  1665. 

  1666. ::-moz-selection {

  1667.   color: #fff;

  1668.   background: #98bdef;

  1669.   text-shadow: none; }

  1670. 

  1671. .reveal .slides section,

  1672. .reveal .slides section > section {

  1673.   line-height: 1.3;

  1674.   font-weight: inherit; }

  1675. 

  1676. /*********************************************

  1677.  * HEADERS

  1678.  *********************************************/

  1679. .reveal h1,

  1680. .reveal h2,

  1681. .reveal h3,

  1682. .reveal h4,

  1683. .reveal h5,

  1684. .reveal h6 {

  1685.   margin: 0 0 20px 0;

  1686.   color: #222;

  1687.   font-family: "Source Sans Pro", Helvetica, sans-serif;

  1688.   font-weight: 600;

  1689.   line-height: 1.2;

  1690.   letter-spacing: normal;

  1691.   text-transform: uppercase;

  1692.   text-shadow: none;

  1693.   word-wrap: break-word; }

  1694. 

  1695. .reveal h1 {

  1696.   font-size: 2.5em; }

  1697. 

  1698. .reveal h2 {

  1699.   font-size: 1.6em; }

  1700. 

  1701. .reveal h3 {

  1702.   font-size: 1.3em; }

  1703. 

  1704. .reveal h4 {

  1705.   font-size: 1em; }

  1706. 

  1707. .reveal h1 {

  1708.   text-shadow: none; }

  1709. 

  1710. /*********************************************

  1711.  * OTHER

  1712.  *********************************************/

  1713. .reveal p {

  1714.   margin: 20px 0;

  1715.   line-height: 1.3; }

  1716. 

  1717. /* Ensure certain elements are never larger than the slide itself */

  1718. .reveal img,

  1719. .reveal video,

  1720. .reveal iframe {

  1721.   max-width: 95%;

  1722.   max-height: 95%; }

  1723. 

  1724. .reveal strong,

  1725. .reveal b {

  1726.   font-weight: bold; }

  1727. 

  1728. .reveal em {

  1729.   font-style: italic; }

  1730. 

  1731. .reveal ol,

  1732. .reveal dl,

  1733. .reveal ul {

  1734.   display: inline-block;

  1735.   text-align: left;

  1736.   margin: 0 0 0 1em; }

  1737. 

  1738. .reveal ol {

  1739.   list-style-type: decimal; }

  1740. 

  1741. .reveal ul {

  1742.   list-style-type: disc; }

  1743. 

  1744. .reveal ul ul {

  1745.   list-style-type: square; }

  1746. 

  1747. .reveal ul ul ul {

  1748.   list-style-type: circle; }

  1749. 

  1750. .reveal ul ul,

  1751. .reveal ul ol,

  1752. .reveal ol ol,

  1753. .reveal ol ul {

  1754.   display: block;

  1755.   margin-left: 40px; }

  1756. 

  1757. .reveal dt {

  1758.   font-weight: bold; }

  1759. 

  1760. .reveal dd {

  1761.   margin-left: 40px; }

  1762. 

  1763. .reveal blockquote {

  1764.   display: block;

  1765.   position: relative;

  1766.   width: 70%;

  1767.   margin: 20px auto;

  1768.   padding: 5px;

  1769.   font-style: italic;

  1770.   background: rgba(255, 255, 255, 0.05);

  1771.   box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }

  1772. 

  1773. .reveal blockquote p:first-child,

  1774. .reveal blockquote p:last-child {

  1775.   display: inline-block; }

  1776. 

  1777. .reveal q {

  1778.   font-style: italic; }

  1779. 

  1780. .reveal pre {

  1781.   display: block;

  1782.   position: relative;

  1783.   width: 90%;

  1784.   margin: 20px auto;

  1785.   text-align: left;

  1786.   font-size: 0.55em;

  1787.   font-family: monospace;

  1788.   line-height: 1.2em;

  1789.   word-wrap: break-word;

  1790.   box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }

  1791. 

  1792. .reveal code {

  1793.   font-family: monospace;

  1794.   text-transform: none; }

  1795. 

  1796. .reveal pre code {

  1797.   display: block;

  1798.   padding: 5px;

  1799.   overflow: auto;

  1800.   max-height: 400px;

  1801.   word-wrap: normal; }

  1802. 

  1803. .reveal table {

  1804.   margin: auto;

  1805.   border-collapse: collapse;

  1806.   border-spacing: 0; }

  1807. 

  1808. .reveal table th {

  1809.   font-weight: bold; }

  1810. 

  1811. .reveal table th,

  1812. .reveal table td {

  1813.   text-align: left;

  1814.   padding: 0.2em 0.5em 0.2em 0.5em;

  1815.   border-bottom: 1px solid; }

  1816. 

  1817. .reveal table th[align="center"],

  1818. .reveal table td[align="center"] {

  1819.   text-align: center; }

  1820. 

  1821. .reveal table th[align="right"],

  1822. .reveal table td[align="right"] {

  1823.   text-align: right; }

  1824. 

  1825. .reveal table tbody tr:last-child th,

  1826. .reveal table tbody tr:last-child td {

  1827.   border-bottom: none; }

  1828. 

  1829. .reveal sup {

  1830.   vertical-align: super;

  1831.   font-size: smaller; }

  1832. 

  1833. .reveal sub {

  1834.   vertical-align: sub;

  1835.   font-size: smaller; }

  1836. 

  1837. .reveal small {

  1838.   display: inline-block;

  1839.   font-size: 0.6em;

  1840.   line-height: 1.2em;

  1841.   vertical-align: top; }

  1842. 

  1843. .reveal small * {

  1844.   vertical-align: top; }

  1845. 

  1846. /*********************************************

  1847.  * LINKS

  1848.  *********************************************/

  1849. .reveal a {

  1850.   color: #2a76dd;

  1851.   text-decoration: none;

  1852.   -webkit-transition: color .15s ease;

  1853.   -moz-transition: color .15s ease;

  1854.   transition: color .15s ease; }

  1855. 

  1856. .reveal a:hover {

  1857.   color: #6ca0e8;

  1858.   text-shadow: none;

  1859.   border: none; }

  1860. 

  1861. .reveal .roll span:after {

  1862.   color: #fff;

  1863.   background: #1a53a1; }

  1864. 

  1865. /*********************************************

  1866.  * IMAGES

  1867.  *********************************************/

  1868. .reveal section img {

  1869.   margin: 15px 0px;

  1870.   background: rgba(255, 255, 255, 0.12);

  1871.   border: 4px solid #222;

  1872.   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }

  1873. 

  1874. .reveal section img.plain {

  1875.   border: 0;

  1876.   box-shadow: none; }

  1877. 

  1878. .reveal a img {

  1879.   -webkit-transition: all .15s linear;

  1880.   -moz-transition: all .15s linear;

  1881.   transition: all .15s linear; }

  1882. 

  1883. .reveal a:hover img {

  1884.   background: rgba(255, 255, 255, 0.2);

  1885.   border-color: #2a76dd;

  1886.   box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }

  1887. 

  1888. /*********************************************

  1889.  * NAVIGATION CONTROLS

  1890.  *********************************************/

  1891. .reveal .controls {

  1892.   color: #2a76dd; }

  1893. 

  1894. /*********************************************

  1895.  * PROGRESS BAR

  1896.  *********************************************/

  1897. .reveal .progress {

  1898.   background: rgba(0, 0, 0, 0.2);

  1899.   color: #2a76dd; }

  1900. 

  1901. .reveal .progress span {

  1902.   -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);

  1903.   -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);

  1904.   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

  1905. 

  1906. /*********************************************

  1907.  * PRINT BACKGROUND

  1908.  *********************************************/

  1909. @media print {

  1910.   .backgrounds {

  1911.     background-color: #fff; } }

  1912. 

  1913.         </style>

  1914. 

  1915. 		<title>Обучение детей программированию</title>

  1916. 	</head>

  1917. 	<body>

  1918. 		<div class="reveal">

  1919. 			<div class="slides">

  1920. 

  1921. <section data-background-image="bg-01.png" data-background-opacity="0.3">

  1922. <h2>Обучение детей программированию</h2>

  1923. <br>

  1924. Капелько Михаил

  1925. <br>

  1926. 2019

  1927. </section>

  1928. 

  1929. <section data-background-image="myself.png" data-background-opacity="0.4" data-background-size="50%" data-background-position="left">

  1930. О себе

  1931. </section>

  1932. 

  1933. <section data-background-image="bg-03.jpg" data-background-opacity="0.4">

  1934. Социальная ответственность

  1935. </section>

  1936. 

  1937. <section data-background-image="bg-04.jpg" data-background-opacity="0.4">

  1938. Группы

  1939. </section>

  1940. 

  1941. <section data-background-image="bg-05.jpg" data-background-opacity="0.4">

  1942. По субботам

  1943. </section>

  1944. 

  1945. <section data-background-image="bg-06.jpg" data-background-opacity="0.4">

  1946. Первый раз

  1947. </section>

  1948. 

  1949. <section data-background-image="bg-07.jpg" data-background-opacity="0.4">

  1950. Второй раз

  1951. </section>

  1952. 

  1953. <section data-background-image="bg-08.jpg" data-background-opacity="0.4">

  1954. За 1 час

  1955. </section>

  1956. 

  1957. <section data-background-image="game-01.png" data-background-opacity="0.4">

  1958. 16 карт

  1959. </section>

  1960. 

  1961. <section data-background-image="game-02.png" data-background-opacity="0.4">

  1962. Начало

  1963. </section>

  1964. 

  1965. <section data-background-image="game-03.png" data-background-opacity="0.4">

  1966. Пара

  1967. </section>

  1968. 

  1969. <section data-background-image="game-02.png" data-background-opacity="0.4">

  1970. Разные

  1971. </section>

  1972. 

  1973. <section data-background-image="game-04.png" data-background-opacity="0.4">

  1974. Совпадают

  1975. </section>

  1976. 

  1977. <section data-background-image="game-05.png" data-background-opacity="0.4">

  1978. Убираем

  1979. </section>

  1980. 

  1981. <section data-background-image="goal.png" data-background-opacity="0.4" data-background-size="50%">

  1982. Цель

  1983. </section>

  1984. 

  1985. <section data-background-image="mechanics.jpg" data-background-opacity="0.4">

  1986. Основная механика

  1987. </section>

  1988. 

  1989. <section data-background-image="scratch.gif" data-background-opacity="0.4">

  1990. Инструмент

  1991. </section>

  1992. 

  1993. <section data-background-image="pc-off.jpg" data-background-opacity="0.4">

  1994. Первое занятие

  1995. </section>

  1996. 

  1997. <section data-background-image="welcome-circle.jpg" data-background-opacity="0.4">

  1998. Круг

  1999. </section>

  2000. 

  2001. <section data-background-image="welcome-01.jpg" data-background-opacity="0.4">

  2002. Знакомство

  2003. </section>

  2004. 

  2005. <section data-background-image="welcome-02.jpg" data-background-opacity="0.4">

  2006. Общее пространство

  2007. </section>

  2008. 

  2009. <section data-background-image="welcome-03.png" data-background-opacity="0.4" data-background-size="50%">

  2010. Равенство

  2011. </section>

  2012. 

  2013. <section data-background-image="welcome-04.jpg" data-background-opacity="0.4">

  2014. Внимание

  2015. </section>

  2016. 

  2017. <section data-background-image="welcome-05.jpg" data-background-opacity="0.4">

  2018. Обратная связь

  2019. </section>

  2020. 

  2021. <section data-background-image="welcome-06.png" data-background-opacity="0.4">

  2022. Веселье

  2023. </section>

  2024. 

  2025. <section data-background-image="cards.jpg" data-background-opacity="0.4">

  2026. Игра в карты

  2027. </section>

  2028. 

  2029. <section data-background-image="algorithm.jpg" data-background-opacity="0.4">

  2030. Понятие алгоритма

  2031. </section>

  2032. 

  2033. <section data-background-image="game-01.png" data-background-opacity="0.4">

  2034. Алгоритм игры

  2035. </section>

  2036. 

  2037. <section data-background-image="analysis.jpg" data-background-opacity="0.4">

  2038. Анализ занятия

  2039. </section>

  2040. 

  2041. <section data-background-image="lesson-01.jpg" data-background-opacity="0.4">

  2042. Со второго занятия кто что сделал

  2043. </section>

  2044. 

  2045. <section data-background-image="lesson-02.jpg" data-background-opacity="0.4">

  2046. Составление требований

  2047. </section>

  2048. 

  2049. <section data-background-image="grid-4x4.png" data-background-opacity="0.4">

  2050. На третьем занятии сетка элементов

  2051. </section>

  2052. 

  2053. <section data-background-image="распутье.jpg" data-background-opacity="0.4">

  2054. Распутье

  2055. </section>

  2056. 

  2057. <section data-background-image="путь-практики.jpg" data-background-opacity="0.4">

  2058. Путь практики

  2059. </section>

  2060. 

  2061. <section data-background-image="требования.jpg" data-background-opacity="0.4">

  2062. С четвёртого занятия требования сверху

  2063. </section>

  2064. 

  2065. <section data-background-image="дошли.png" data-background-opacity="0.4">

  2066. На шестом занятии прошли путь до конца первый раз

  2067. </section>

  2068. 

  2069. <section data-background-image="повторение.jpg" data-background-opacity="0.4">

  2070. На последующих занятиях повторение с начала

  2071. </section>

  2072. 

  2073. <section data-background-image="таблица.jpg" data-background-opacity="0.4">

  2074. С восьмого занятия турнирная таблица

  2075. </section>

  2076. 

  2077. <section data-background-image="итоги.png" data-background-opacity="0.4">

  2078. Последнее занятие

  2079. </section>

  2080. 

  2081. <section data-background-image="команда.jpg" data-background-opacity="0.4">

  2082. Команда

  2083. </section>

  2084. 

  2085. <section data-background-image="муром.png" data-background-opacity="0.4">

  2086. Планы

  2087. </section>

  2088. 

  2089. <section data-background-image="статья.png" data-background-opacity="0.2">

  2090. Статья на хабре:

  2091. <br>

  2092. <br>

  2093. http://habr.com/ru/post/438278/

  2094. </section>

  2095. 			</div>

  2096. 		</div>

  2097. 

  2098.         <script>

  2099. /*!

  2100.  * reveal.js

  2101.  * http://revealjs.com

  2102.  * MIT licensed

  2103.  *

  2104.  * Copyright (C) 2019 Hakim El Hattab, http://hakim.se

  2105.  */

  2106. (function( root, factory ) {

  2107. 	if( typeof define === 'function' && define.amd ) {

  2108. 		// AMD. Register as an anonymous module.

  2109. 		define( function() {

  2110. 			root.Reveal = factory();

  2111. 			return root.Reveal;

  2112. 		} );

  2113. 	} else if( typeof exports === 'object' ) {

  2114. 		// Node. Does not work with strict CommonJS.

  2115. 		module.exports = factory();

  2116. 	} else {

  2117. 		// Browser globals.

  2118. 		root.Reveal = factory();

  2119. 	}

  2120. }( this, function() {

  2121. 

  2122. 	'use strict';

  2123. 

  2124. 	var Reveal;

  2125. 

  2126. 	// The reveal.js version

  2127. 	var VERSION = '3.8.0';

  2128. 

  2129. 	var SLIDES_SELECTOR = '.slides section',

  2130. 		HORIZONTAL_SLIDES_SELECTOR = '.slides>section',

  2131. 		VERTICAL_SLIDES_SELECTOR = '.slides>section.present>section',

  2132. 		HOME_SLIDE_SELECTOR = '.slides>section:first-of-type',

  2133. 		UA = navigator.userAgent,

  2134. 

  2135. 		// Configuration defaults, can be overridden at initialization time

  2136. 		config = {

  2137. 

  2138. 			// The "normal" size of the presentation, aspect ratio will be preserved

  2139. 			// when the presentation is scaled to fit different resolutions

  2140. 			width: 960,

  2141. 			height: 700,

  2142. 

  2143. 			// Factor of the display size that should remain empty around the content

  2144. 			margin: 0.04,

  2145. 

  2146. 			// Bounds for smallest/largest possible scale to apply to content

  2147. 			minScale: 0.2,

  2148. 			maxScale: 2.0,

  2149. 

  2150. 			// Display presentation control arrows

  2151. 			controls: true,

  2152. 

  2153. 			// Help the user learn the controls by providing hints, for example by

  2154. 			// bouncing the down arrow when they first encounter a vertical slide

  2155. 			controlsTutorial: true,

  2156. 

  2157. 			// Determines where controls appear, "edges" or "bottom-right"

  2158. 			controlsLayout: 'bottom-right',

  2159. 

  2160. 			// Visibility rule for backwards navigation arrows; "faded", "hidden"

  2161. 			// or "visible"

  2162. 			controlsBackArrows: 'faded',

  2163. 

  2164. 			// Display a presentation progress bar

  2165. 			progress: true,

  2166. 

  2167. 			// Display the page number of the current slide

  2168. 			// - true:    Show slide number

  2169. 			// - false:   Hide slide number

  2170. 			//

  2171. 			// Can optionally be set as a string that specifies the number formatting:

  2172. 			// - "h.v":	  Horizontal . vertical slide number (default)

  2173. 			// - "h/v":	  Horizontal / vertical slide number

  2174. 			// - "c":	  Flattened slide number

  2175. 			// - "c/t":	  Flattened slide number / total slides

  2176. 			//

  2177. 			// Alternatively, you can provide a function that returns the slide

  2178. 			// number for the current slide. The function needs to return an array

  2179. 			// with one string [slideNumber] or three strings [n1,delimiter,n2].

  2180. 			// See #formatSlideNumber().

  2181. 			slideNumber: false,

  2182. 

  2183. 			// Can be used to limit the contexts in which the slide number appears

  2184. 			// - "all":      Always show the slide number

  2185. 			// - "print":    Only when printing to PDF

  2186. 			// - "speaker":  Only in the speaker view

  2187. 			showSlideNumber: 'all',

  2188. 

  2189. 			// Use 1 based indexing for # links to match slide number (default is zero

  2190. 			// based)

  2191. 			hashOneBasedIndex: false,

  2192. 

  2193. 			// Add the current slide number to the URL hash so that reloading the

  2194. 			// page/copying the URL will return you to the same slide

  2195. 			hash: false,

  2196. 

  2197. 			// Push each slide change to the browser history.  Implies `hash: true`

  2198. 			history: false,

  2199. 

  2200. 			// Enable keyboard shortcuts for navigation

  2201. 			keyboard: true,

  2202. 

  2203. 			// Optional function that blocks keyboard events when retuning false

  2204. 			keyboardCondition: null,

  2205. 

  2206. 			// Enable the slide overview mode

  2207. 			overview: true,

  2208. 

  2209. 			// Disables the default reveal.js slide layout so that you can use

  2210. 			// custom CSS layout

  2211. 			disableLayout: false,

  2212. 

  2213. 			// Vertical centering of slides

  2214. 			center: true,

  2215. 

  2216. 			// Enables touch navigation on devices with touch input

  2217. 			touch: true,

  2218. 

  2219. 			// Loop the presentation

  2220. 			loop: false,

  2221. 

  2222. 			// Change the presentation direction to be RTL

  2223. 			rtl: false,

  2224. 

  2225. 			// Changes the behavior of our navigation directions.

  2226. 			//

  2227. 			// "default"

  2228. 			// Left/right arrow keys step between horizontal slides, up/down

  2229. 			// arrow keys step between vertical slides. Space key steps through

  2230. 			// all slides (both horizontal and vertical).

  2231. 			//

  2232. 			// "linear"

  2233. 			// Removes the up/down arrows. Left/right arrows step through all

  2234. 			// slides (both horizontal and vertical).

  2235. 			//

  2236. 			// "grid"

  2237. 			// When this is enabled, stepping left/right from a vertical stack

  2238. 			// to an adjacent vertical stack will land you at the same vertical

  2239. 			// index.

  2240. 			//

  2241. 			// Consider a deck with six slides ordered in two vertical stacks:

  2242. 			// 1.1    2.1

  2243. 			// 1.2    2.2

  2244. 			// 1.3    2.3

  2245. 			//

  2246. 			// If you're on slide 1.3 and navigate right, you will normally move

  2247. 			// from 1.3 -> 2.1. If "grid" is used, the same navigation takes you

  2248. 			// from 1.3 -> 2.3.

  2249. 			navigationMode: 'default',

  2250. 

  2251. 			// Randomizes the order of slides each time the presentation loads

  2252. 			shuffle: false,

  2253. 

  2254. 			// Turns fragments on and off globally

  2255. 			fragments: true,

  2256. 

  2257. 			// Flags whether to include the current fragment in the URL,

  2258. 			// so that reloading brings you to the same fragment position

  2259. 			fragmentInURL: false,

  2260. 

  2261. 			// Flags if the presentation is running in an embedded mode,

  2262. 			// i.e. contained within a limited portion of the screen

  2263. 			embedded: false,

  2264. 

  2265. 			// Flags if we should show a help overlay when the question-mark

  2266. 			// key is pressed

  2267. 			help: true,

  2268. 

  2269. 			// Flags if it should be possible to pause the presentation (blackout)

  2270. 			pause: true,

  2271. 

  2272. 			// Flags if speaker notes should be visible to all viewers

  2273. 			showNotes: false,

  2274. 

  2275. 			// Global override for autolaying embedded media (video/audio/iframe)

  2276. 			// - null:   Media will only autoplay if data-autoplay is present

  2277. 			// - true:   All media will autoplay, regardless of individual setting

  2278. 			// - false:  No media will autoplay, regardless of individual setting

  2279. 			autoPlayMedia: null,

  2280. 

  2281. 			// Global override for preloading lazy-loaded iframes

  2282. 			// - null:   Iframes with data-src AND data-preload will be loaded when within

  2283. 			//           the viewDistance, iframes with only data-src will be loaded when visible

  2284. 			// - true:   All iframes with data-src will be loaded when within the viewDistance

  2285. 			// - false:  All iframes with data-src will be loaded only when visible

  2286. 			preloadIframes: null,

  2287. 

  2288. 			// Controls automatic progression to the next slide

  2289. 			// - 0:      Auto-sliding only happens if the data-autoslide HTML attribute

  2290. 			//           is present on the current slide or fragment

  2291. 			// - 1+:     All slides will progress automatically at the given interval

  2292. 			// - false:  No auto-sliding, even if data-autoslide is present

  2293. 			autoSlide: 0,

  2294. 

  2295. 			// Stop auto-sliding after user input

  2296. 			autoSlideStoppable: true,

  2297. 

  2298. 			// Use this method for navigation when auto-sliding (defaults to navigateNext)

  2299. 			autoSlideMethod: null,

  2300. 

  2301. 			// Specify the average time in seconds that you think you will spend

  2302. 			// presenting each slide. This is used to show a pacing timer in the

  2303. 			// speaker view

  2304. 			defaultTiming: null,

  2305. 

  2306. 			// Enable slide navigation via mouse wheel

  2307. 			mouseWheel: false,

  2308. 

  2309. 			// Apply a 3D roll to links on hover

  2310. 			rollingLinks: false,

  2311. 

  2312. 			// Hides the address bar on mobile devices

  2313. 			hideAddressBar: true,

  2314. 

  2315. 			// Opens links in an iframe preview overlay

  2316. 			// Add `data-preview-link` and `data-preview-link="false"` to customise each link

  2317. 			// individually

  2318. 			previewLinks: false,

  2319. 

  2320. 			// Exposes the reveal.js API through window.postMessage

  2321. 			postMessage: true,

  2322. 

  2323. 			// Dispatches all reveal.js events to the parent window through postMessage

  2324. 			postMessageEvents: false,

  2325. 

  2326. 			// Focuses body when page changes visibility to ensure keyboard shortcuts work

  2327. 			focusBodyOnPageVisibilityChange: true,

  2328. 

  2329. 			// Transition style

  2330. 			transition: 'slide', // none/fade/slide/convex/concave/zoom

  2331. 

  2332. 			// Transition speed

  2333. 			transitionSpeed: 'default', // default/fast/slow

  2334. 

  2335. 			// Transition style for full page slide backgrounds

  2336. 			backgroundTransition: 'fade', // none/fade/slide/convex/concave/zoom

  2337. 

  2338. 			// Parallax background image

  2339. 			parallaxBackgroundImage: '', // CSS syntax, e.g. "a.jpg"

  2340. 

  2341. 			// Parallax background size

  2342. 			parallaxBackgroundSize: '', // CSS syntax, e.g. "3000px 2000px"

  2343. 

  2344. 			// Parallax background repeat

  2345. 			parallaxBackgroundRepeat: '', // repeat/repeat-x/repeat-y/no-repeat/initial/inherit

  2346. 

  2347. 			// Parallax background position

  2348. 			parallaxBackgroundPosition: '', // CSS syntax, e.g. "top left"

  2349. 

  2350. 			// Amount of pixels to move the parallax background per slide step

  2351. 			parallaxBackgroundHorizontal: null,

  2352. 			parallaxBackgroundVertical: null,

  2353. 

  2354. 			// The maximum number of pages a single slide can expand onto when printing

  2355. 			// to PDF, unlimited by default

  2356. 			pdfMaxPagesPerSlide: Number.POSITIVE_INFINITY,

  2357. 

  2358. 			// Prints each fragment on a separate slide

  2359. 			pdfSeparateFragments: true,

  2360. 

  2361. 			// Offset used to reduce the height of content within exported PDF pages.

  2362. 			// This exists to account for environment differences based on how you

  2363. 			// print to PDF. CLI printing options, like phantomjs and wkpdf, can end

  2364. 			// on precisely the total height of the document whereas in-browser

  2365. 			// printing has to end one pixel before.

  2366. 			pdfPageHeightOffset: -1,

  2367. 

  2368. 			// Number of slides away from the current that are visible

  2369. 			viewDistance: 3,

  2370. 

  2371. 			// The display mode that will be used to show slides

  2372. 			display: 'block',

  2373. 

  2374. 			// Hide cursor if inactive

  2375. 			hideInactiveCursor: true,

  2376. 

  2377. 			// Time before the cursor is hidden (in ms)

  2378. 			hideCursorTime: 5000,

  2379. 

  2380. 			// Script dependencies to load

  2381. 			dependencies: []

  2382. 

  2383. 		},

  2384. 

  2385. 		// Flags if Reveal.initialize() has been called

  2386. 		initialized = false,

  2387. 

  2388. 		// Flags if reveal.js is loaded (has dispatched the 'ready' event)

  2389. 		loaded = false,

  2390. 

  2391. 		// Flags if the overview mode is currently active

  2392. 		overview = false,

  2393. 

  2394. 		// Holds the dimensions of our overview slides, including margins

  2395. 		overviewSlideWidth = null,

  2396. 		overviewSlideHeight = null,

  2397. 

  2398. 		// The horizontal and vertical index of the currently active slide

  2399. 		indexh,

  2400. 		indexv,

  2401. 

  2402. 		// The previous and current slide HTML elements

  2403. 		previousSlide,

  2404. 		currentSlide,

  2405. 

  2406. 		previousBackground,

  2407. 

  2408. 		// Remember which directions that the user has navigated towards

  2409. 		hasNavigatedRight = false,

  2410. 		hasNavigatedDown = false,

  2411. 

  2412. 		// Slides may hold a data-state attribute which we pick up and apply

  2413. 		// as a class to the body. This list contains the combined state of

  2414. 		// all current slides.

  2415. 		state = [],

  2416. 

  2417. 		// The current scale of the presentation (see width/height config)

  2418. 		scale = 1,

  2419. 

  2420. 		// CSS transform that is currently applied to the slides container,

  2421. 		// split into two groups

  2422. 		slidesTransform = { layout: '', overview: '' },

  2423. 

  2424. 		// Cached references to DOM elements

  2425. 		dom = {},

  2426. 

  2427. 		// A list of registered reveal.js plugins

  2428. 		plugins = {},

  2429. 

  2430. 		// List of asynchronously loaded reveal.js dependencies

  2431. 		asyncDependencies = [],

  2432. 

  2433. 		// Features supported by the browser, see #checkCapabilities()

  2434. 		features = {},

  2435. 

  2436. 		// Client is a mobile device, see #checkCapabilities()

  2437. 		isMobileDevice,

  2438. 

  2439. 		// Client is a desktop Chrome, see #checkCapabilities()

  2440. 		isChrome,

  2441. 

  2442. 		// Throttles mouse wheel navigation

  2443. 		lastMouseWheelStep = 0,

  2444. 

  2445. 		// Delays updates to the URL due to a Chrome thumbnailer bug

  2446. 		writeURLTimeout = 0,

  2447. 

  2448. 		// Is the mouse pointer currently hidden from view

  2449. 		cursorHidden = false,

  2450. 

  2451. 		// Timeout used to determine when the cursor is inactive

  2452. 		cursorInactiveTimeout = 0,

  2453. 

  2454. 		// Flags if the interaction event listeners are bound

  2455. 		eventsAreBound = false,

  2456. 

  2457. 		// The current auto-slide duration

  2458. 		autoSlide = 0,

  2459. 

  2460. 		// Auto slide properties

  2461. 		autoSlidePlayer,

  2462. 		autoSlideTimeout = 0,

  2463. 		autoSlideStartTime = -1,

  2464. 		autoSlidePaused = false,

  2465. 

  2466. 		// Holds information about the currently ongoing touch input

  2467. 		touch = {

  2468. 			startX: 0,

  2469. 			startY: 0,

  2470. 			startCount: 0,

  2471. 			captured: false,

  2472. 			threshold: 40

  2473. 		},

  2474. 

  2475. 		// A key:value map of shortcut keyboard keys and descriptions of

  2476. 		// the actions they trigger, generated in #configure()

  2477. 		keyboardShortcuts = {},

  2478. 

  2479. 		// Holds custom key code mappings

  2480. 		registeredKeyBindings = {};

  2481. 

  2482. 	/**

  2483. 	 * Starts up the presentation if the client is capable.

  2484. 	 */

  2485. 	function initialize( options ) {

  2486. 

  2487. 		// Make sure we only initialize once

  2488. 		if( initialized === true ) return;

  2489. 

  2490. 		initialized = true;

  2491. 

  2492. 		checkCapabilities();

  2493. 

  2494. 		if( !features.transforms2d && !features.transforms3d ) {

  2495. 			document.body.setAttribute( 'class', 'no-transforms' );

  2496. 

  2497. 			// Since JS won't be running any further, we load all lazy

  2498. 			// loading elements upfront

  2499. 			var images = toArray( document.getElementsByTagName( 'img' ) ),

  2500. 				iframes = toArray( document.getElementsByTagName( 'iframe' ) );

  2501. 

  2502. 			var lazyLoadable = images.concat( iframes );

  2503. 

  2504. 			for( var i = 0, len = lazyLoadable.length; i < len; i++ ) {

  2505. 				var element = lazyLoadable[i];

  2506. 				if( element.getAttribute( 'data-src' ) ) {

  2507. 					element.setAttribute( 'src', element.getAttribute( 'data-src' ) );

  2508. 					element.removeAttribute( 'data-src' );

  2509. 				}

  2510. 			}

  2511. 

  2512. 			// If the browser doesn't support core features we won't be

  2513. 			// using JavaScript to control the presentation

  2514. 			return;

  2515. 		}

  2516. 

  2517. 		// Cache references to key DOM elements

  2518. 		dom.wrapper = document.querySelector( '.reveal' );

  2519. 		dom.slides = document.querySelector( '.reveal .slides' );

  2520. 

  2521. 		// Force a layout when the whole page, incl fonts, has loaded

  2522. 		window.addEventListener( 'load', layout, false );

  2523. 

  2524. 		var query = Reveal.getQueryHash();

  2525. 

  2526. 		// Do not accept new dependencies via query config to avoid

  2527. 		// the potential of malicious script injection

  2528. 		if( typeof query['dependencies'] !== 'undefined' ) delete query['dependencies'];

  2529. 

  2530. 		// Copy options over to our config object

  2531. 		extend( config, options );

  2532. 		extend( config, query );

  2533. 

  2534. 		// Hide the address bar in mobile browsers

  2535. 		hideAddressBar();

  2536. 

  2537. 		// Loads dependencies and continues to #start() once done

  2538. 		load();

  2539. 

  2540. 	}

  2541. 

  2542. 	/**

  2543. 	 * Inspect the client to see what it's capable of, this

  2544. 	 * should only happens once per runtime.

  2545. 	 */

  2546. 	function checkCapabilities() {

  2547. 

  2548. 		isMobileDevice = /(iphone|ipod|ipad|android)/gi.test( UA );

  2549. 		isChrome = /chrome/i.test( UA ) && !/edge/i.test( UA );

  2550. 

  2551. 		var testElement = document.createElement( 'div' );

  2552. 

  2553. 		features.transforms3d = 'WebkitPerspective' in testElement.style ||

  2554. 								'MozPerspective' in testElement.style ||

  2555. 								'msPerspective' in testElement.style ||

  2556. 								'OPerspective' in testElement.style ||

  2557. 								'perspective' in testElement.style;

  2558. 

  2559. 		features.transforms2d = 'WebkitTransform' in testElement.style ||

  2560. 								'MozTransform' in testElement.style ||

  2561. 								'msTransform' in testElement.style ||

  2562. 								'OTransform' in testElement.style ||

  2563. 								'transform' in testElement.style;

  2564. 

  2565. 		features.requestAnimationFrameMethod = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;

  2566. 		features.requestAnimationFrame = typeof features.requestAnimationFrameMethod === 'function';

  2567. 

  2568. 		features.canvas = !!document.createElement( 'canvas' ).getContext;

  2569. 

  2570. 		// Transitions in the overview are disabled in desktop and

  2571. 		// Safari due to lag

  2572. 		features.overviewTransitions = !/Version\/[\d\.]+.*Safari/.test( UA );

  2573. 

  2574. 		// Flags if we should use zoom instead of transform to scale

  2575. 		// up slides. Zoom produces crisper results but has a lot of

  2576. 		// xbrowser quirks so we only use it in whitelsited browsers.

  2577. 		features.zoom = 'zoom' in testElement.style && !isMobileDevice &&

  2578. 						( isChrome || /Version\/[\d\.]+.*Safari/.test( UA ) );

  2579. 

  2580. 	}

  2581. 

  2582. 	/**

  2583. 	 * Loads the dependencies of reveal.js. Dependencies are

  2584. 	 * defined via the configuration option 'dependencies'

  2585. 	 * and will be loaded prior to starting/binding reveal.js.

  2586. 	 * Some dependencies may have an 'async' flag, if so they

  2587. 	 * will load after reveal.js has been started up.

  2588. 	 */

  2589. 	function load() {

  2590. 

  2591. 		var scripts = [],

  2592. 			scriptsToLoad = 0;

  2593. 

  2594. 		config.dependencies.forEach( function( s ) {

  2595. 			// Load if there's no condition or the condition is truthy

  2596. 			if( !s.condition || s.condition() ) {

  2597. 				if( s.async ) {

  2598. 					asyncDependencies.push( s );

  2599. 				}

  2600. 				else {

  2601. 					scripts.push( s );

  2602. 				}

  2603. 			}

  2604. 		} );

  2605. 

  2606. 		if( scripts.length ) {

  2607. 			scriptsToLoad = scripts.length;

  2608. 

  2609. 			// Load synchronous scripts

  2610. 			scripts.forEach( function( s ) {

  2611. 				loadScript( s.src, function() {

  2612. 

  2613. 					if( typeof s.callback === 'function' ) s.callback();

  2614. 

  2615. 					if( --scriptsToLoad === 0 ) {

  2616. 						initPlugins();

  2617. 					}

  2618. 

  2619. 				} );

  2620. 			} );

  2621. 		}

  2622. 		else {

  2623. 			initPlugins();

  2624. 		}

  2625. 

  2626. 	}

  2627. 

  2628. 	/**

  2629. 	 * Initializes our plugins and waits for them to be ready

  2630. 	 * before proceeding.

  2631. 	 */

  2632. 	function initPlugins() {

  2633. 

  2634. 		var pluginsToInitialize = Object.keys( plugins ).length;

  2635. 

  2636. 		// If there are no plugins, skip this step

  2637. 		if( pluginsToInitialize === 0 ) {

  2638. 			loadAsyncDependencies();

  2639. 		}

  2640. 		// ... otherwise initialize plugins

  2641. 		else {

  2642. 

  2643. 			var afterPlugInitialized = function() {

  2644. 				if( --pluginsToInitialize === 0 ) {

  2645. 					loadAsyncDependencies();

  2646. 				}

  2647. 			};

  2648. 

  2649. 			for( var i in plugins ) {

  2650. 

  2651. 				var plugin = plugins[i];

  2652. 

  2653. 				// If the plugin has an 'init' method, invoke it

  2654. 				if( typeof plugin.init === 'function' ) {

  2655. 					var callback = plugin.init();

  2656. 

  2657. 					// If the plugin returned a Promise, wait for it

  2658. 					if( callback && typeof callback.then === 'function' ) {

  2659. 						callback.then( afterPlugInitialized );

  2660. 					}

  2661. 					else {

  2662. 						afterPlugInitialized();

  2663. 					}

  2664. 				}

  2665. 				else {

  2666. 					afterPlugInitialized();

  2667. 				}

  2668. 

  2669. 			}

  2670. 

  2671. 		}

  2672. 

  2673. 	}

  2674. 

  2675. 	/**

  2676. 	 * Loads all async reveal.js dependencies.

  2677. 	 */

  2678. 	function loadAsyncDependencies() {

  2679. 

  2680. 		if( asyncDependencies.length ) {

  2681. 			asyncDependencies.forEach( function( s ) {

  2682. 				loadScript( s.src, s.callback );

  2683. 			} );

  2684. 		}

  2685. 

  2686. 		start();

  2687. 

  2688. 	}

  2689. 

  2690. 	/**

  2691. 	 * Loads a JavaScript file from the given URL and executes it.

  2692. 	 *

  2693. 	 * @param {string} url Address of the .js file to load

  2694. 	 * @param {function} callback Method to invoke when the script

  2695. 	 * has loaded and executed

  2696. 	 */

  2697. 	function loadScript( url, callback ) {

  2698. 

  2699. 		var script = document.createElement( 'script' );

  2700. 		script.type = 'text/javascript';

  2701. 		script.async = false;

  2702. 		script.defer = false;

  2703. 		script.src = url;

  2704. 

  2705. 		if( callback ) {

  2706. 

  2707. 			// Success callback

  2708. 			script.onload = script.onreadystatechange = function( event ) {

  2709. 				if( event.type === "load" || (/loaded|complete/.test( script.readyState ) ) ) {

  2710. 

  2711. 					// Kill event listeners

  2712. 					script.onload = script.onreadystatechange = script.onerror = null;

  2713. 

  2714. 					callback();

  2715. 

  2716. 				}

  2717. 			};

  2718. 

  2719. 			// Error callback

  2720. 			script.onerror = function( err ) {

  2721. 

  2722. 				// Kill event listeners

  2723. 				script.onload = script.onreadystatechange = script.onerror = null;

  2724. 

  2725. 				callback( new Error( 'Failed loading script: ' + script.src + '\n' + err) );

  2726. 

  2727. 			};

  2728. 

  2729. 		}

  2730. 

  2731. 		// Append the script at the end of <head>

  2732. 		var head = document.querySelector( 'head' );

  2733. 		head.insertBefore( script, head.lastChild );

  2734. 

  2735. 	}

  2736. 

  2737. 	/**

  2738. 	 * Starts up reveal.js by binding input events and navigating

  2739. 	 * to the current URL deeplink if there is one.

  2740. 	 */

  2741. 	function start() {

  2742. 

  2743. 		loaded = true;

  2744. 

  2745. 		// Make sure we've got all the DOM elements we need

  2746. 		setupDOM();

  2747. 

  2748. 		// Listen to messages posted to this window

  2749. 		setupPostMessage();

  2750. 

  2751. 		// Prevent the slides from being scrolled out of view

  2752. 		setupScrollPrevention();

  2753. 

  2754. 		// Resets all vertical slides so that only the first is visible

  2755. 		resetVerticalSlides();

  2756. 

  2757. 		// Updates the presentation to match the current configuration values

  2758. 		configure();

  2759. 

  2760. 		// Read the initial hash

  2761. 		readURL();

  2762. 

  2763. 		// Update all backgrounds

  2764. 		updateBackground( true );

  2765. 

  2766. 		// Notify listeners that the presentation is ready but use a 1ms

  2767. 		// timeout to ensure it's not fired synchronously after #initialize()

  2768. 		setTimeout( function() {

  2769. 			// Enable transitions now that we're loaded

  2770. 			dom.slides.classList.remove( 'no-transition' );

  2771. 

  2772. 			dom.wrapper.classList.add( 'ready' );

  2773. 

  2774. 			dispatchEvent( 'ready', {

  2775. 				'indexh': indexh,

  2776. 				'indexv': indexv,

  2777. 				'currentSlide': currentSlide

  2778. 			} );

  2779. 		}, 1 );

  2780. 

  2781. 		// Special setup and config is required when printing to PDF

  2782. 		if( isPrintingPDF() ) {

  2783. 			removeEventListeners();

  2784. 

  2785. 			// The document needs to have loaded for the PDF layout

  2786. 			// measurements to be accurate

  2787. 			if( document.readyState === 'complete' ) {

  2788. 				setupPDF();

  2789. 			}

  2790. 			else {

  2791. 				window.addEventListener( 'load', setupPDF );

  2792. 			}

  2793. 		}

  2794. 

  2795. 	}

  2796. 

  2797. 	/**

  2798. 	 * Finds and stores references to DOM elements which are

  2799. 	 * required by the presentation. If a required element is

  2800. 	 * not found, it is created.

  2801. 	 */

  2802. 	function setupDOM() {

  2803. 

  2804. 		// Prevent transitions while we're loading

  2805. 		dom.slides.classList.add( 'no-transition' );

  2806. 

  2807. 		if( isMobileDevice ) {

  2808. 			dom.wrapper.classList.add( 'no-hover' );

  2809. 		}

  2810. 		else {

  2811. 			dom.wrapper.classList.remove( 'no-hover' );

  2812. 		}

  2813. 

  2814. 		if( /iphone/gi.test( UA ) ) {

  2815. 			dom.wrapper.classList.add( 'ua-iphone' );

  2816. 		}

  2817. 		else {

  2818. 			dom.wrapper.classList.remove( 'ua-iphone' );

  2819. 		}

  2820. 

  2821. 		// Background element

  2822. 		dom.background = createSingletonNode( dom.wrapper, 'div', 'backgrounds', null );

  2823. 

  2824. 		// Progress bar

  2825. 		dom.progress = createSingletonNode( dom.wrapper, 'div', 'progress', '<span></span>' );

  2826. 		dom.progressbar = dom.progress.querySelector( 'span' );

  2827. 

  2828. 		// Arrow controls

  2829. 		dom.controls = createSingletonNode( dom.wrapper, 'aside', 'controls',

  2830. 			'<button class="navigate-left" aria-label="previous slide"><div class="controls-arrow"></div></button>' +

  2831. 			'<button class="navigate-right" aria-label="next slide"><div class="controls-arrow"></div></button>' +

  2832. 			'<button class="navigate-up" aria-label="above slide"><div class="controls-arrow"></div></button>' +

  2833. 			'<button class="navigate-down" aria-label="below slide"><div class="controls-arrow"></div></button>' );

  2834. 

  2835. 		// Slide number

  2836. 		dom.slideNumber = createSingletonNode( dom.wrapper, 'div', 'slide-number', '' );

  2837. 

  2838. 		// Element containing notes that are visible to the audience

  2839. 		dom.speakerNotes = createSingletonNode( dom.wrapper, 'div', 'speaker-notes', null );

  2840. 		dom.speakerNotes.setAttribute( 'data-prevent-swipe', '' );

  2841. 		dom.speakerNotes.setAttribute( 'tabindex', '0' );

  2842. 

  2843. 		// Overlay graphic which is displayed during the paused mode

  2844. 		dom.pauseOverlay = createSingletonNode( dom.wrapper, 'div', 'pause-overlay', config.controls ? '<button class="resume-button">Resume presentation</button>' : null );

  2845. 

  2846. 		dom.wrapper.setAttribute( 'role', 'application' );

  2847. 

  2848. 		// There can be multiple instances of controls throughout the page

  2849. 		dom.controlsLeft = toArray( document.querySelectorAll( '.navigate-left' ) );

  2850. 		dom.controlsRight = toArray( document.querySelectorAll( '.navigate-right' ) );

  2851. 		dom.controlsUp = toArray( document.querySelectorAll( '.navigate-up' ) );

  2852. 		dom.controlsDown = toArray( document.querySelectorAll( '.navigate-down' ) );

  2853. 		dom.controlsPrev = toArray( document.querySelectorAll( '.navigate-prev' ) );

  2854. 		dom.controlsNext = toArray( document.querySelectorAll( '.navigate-next' ) );

  2855. 

  2856. 		// The right and down arrows in the standard reveal.js controls

  2857. 		dom.controlsRightArrow = dom.controls.querySelector( '.navigate-right' );

  2858. 		dom.controlsDownArrow = dom.controls.querySelector( '.navigate-down' );

  2859. 

  2860. 		dom.statusDiv = createStatusDiv();

  2861. 	}

  2862. 

  2863. 	/**

  2864. 	 * Creates a hidden div with role aria-live to announce the

  2865. 	 * current slide content. Hide the div off-screen to make it

  2866. 	 * available only to Assistive Technologies.

  2867. 	 *

  2868. 	 * @return {HTMLElement}

  2869. 	 */

  2870. 	function createStatusDiv() {

  2871. 

  2872. 		var statusDiv = document.getElementById( 'aria-status-div' );

  2873. 		if( !statusDiv ) {

  2874. 			statusDiv = document.createElement( 'div' );

  2875. 			statusDiv.style.position = 'absolute';

  2876. 			statusDiv.style.height = '1px';

  2877. 			statusDiv.style.width = '1px';

  2878. 			statusDiv.style.overflow = 'hidden';

  2879. 			statusDiv.style.clip = 'rect( 1px, 1px, 1px, 1px )';

  2880. 			statusDiv.setAttribute( 'id', 'aria-status-div' );

  2881. 			statusDiv.setAttribute( 'aria-live', 'polite' );

  2882. 			statusDiv.setAttribute( 'aria-atomic','true' );

  2883. 			dom.wrapper.appendChild( statusDiv );

  2884. 		}

  2885. 		return statusDiv;

  2886. 

  2887. 	}

  2888. 

  2889. 	/**

  2890. 	 * Converts the given HTML element into a string of text

  2891. 	 * that can be announced to a screen reader. Hidden

  2892. 	 * elements are excluded.

  2893. 	 */

  2894. 	function getStatusText( node ) {

  2895. 

  2896. 		var text = '';

  2897. 

  2898. 		// Text node

  2899. 		if( node.nodeType === 3 ) {

  2900. 			text += node.textContent;

  2901. 		}

  2902. 		// Element node

  2903. 		else if( node.nodeType === 1 ) {

  2904. 

  2905. 			var isAriaHidden = node.getAttribute( 'aria-hidden' );

  2906. 			var isDisplayHidden = window.getComputedStyle( node )['display'] === 'none';

  2907. 			if( isAriaHidden !== 'true' && !isDisplayHidden ) {

  2908. 

  2909. 				toArray( node.childNodes ).forEach( function( child ) {

  2910. 					text += getStatusText( child );

  2911. 				} );

  2912. 

  2913. 			}

  2914. 

  2915. 		}

  2916. 

  2917. 		return text;

  2918. 

  2919. 	}

  2920. 

  2921. 	/**

  2922. 	 * Configures the presentation for printing to a static

  2923. 	 * PDF.

  2924. 	 */

  2925. 	function setupPDF() {

  2926. 

  2927. 		var slideSize = getComputedSlideSize( window.innerWidth, window.innerHeight );

  2928. 

  2929. 		// Dimensions of the PDF pages

  2930. 		var pageWidth = Math.floor( slideSize.width * ( 1 + config.margin ) ),

  2931. 			pageHeight = Math.floor( slideSize.height * ( 1 + config.margin ) );

  2932. 

  2933. 		// Dimensions of slides within the pages

  2934. 		var slideWidth = slideSize.width,

  2935. 			slideHeight = slideSize.height;

  2936. 

  2937. 		// Let the browser know what page size we want to print

  2938. 		injectStyleSheet( '@page{size:'+ pageWidth +'px '+ pageHeight +'px; margin: 0px;}' );

  2939. 

  2940. 		// Limit the size of certain elements to the dimensions of the slide

  2941. 		injectStyleSheet( '.reveal section>img, .reveal section>video, .reveal section>iframe{max-width: '+ slideWidth +'px; max-height:'+ slideHeight +'px}' );

  2942. 

  2943. 		document.body.classList.add( 'print-pdf' );

  2944. 		document.body.style.width = pageWidth + 'px';

  2945. 		document.body.style.height = pageHeight + 'px';

  2946. 

  2947. 		// Make sure stretch elements fit on slide

  2948. 		layoutSlideContents( slideWidth, slideHeight );

  2949. 

  2950. 		// Add each slide's index as attributes on itself, we need these

  2951. 		// indices to generate slide numbers below

  2952. 		toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( hslide, h ) {

  2953. 			hslide.setAttribute( 'data-index-h', h );

  2954. 

  2955. 			if( hslide.classList.contains( 'stack' ) ) {

  2956. 				toArray( hslide.querySelectorAll( 'section' ) ).forEach( function( vslide, v ) {

  2957. 					vslide.setAttribute( 'data-index-h', h );

  2958. 					vslide.setAttribute( 'data-index-v', v );

  2959. 				} );

  2960. 			}

  2961. 		} );

  2962. 

  2963. 		// Slide and slide background layout

  2964. 		toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ).forEach( function( slide ) {

  2965. 

  2966. 			// Vertical stacks are not centred since their section

  2967. 			// children will be

  2968. 			if( slide.classList.contains( 'stack' ) === false ) {

  2969. 				// Center the slide inside of the page, giving the slide some margin

  2970. 				var left = ( pageWidth - slideWidth ) / 2,

  2971. 					top = ( pageHeight - slideHeight ) / 2;

  2972. 

  2973. 				var contentHeight = slide.scrollHeight;

  2974. 				var numberOfPages = Math.max( Math.ceil( contentHeight / pageHeight ), 1 );

  2975. 

  2976. 				// Adhere to configured pages per slide limit

  2977. 				numberOfPages = Math.min( numberOfPages, config.pdfMaxPagesPerSlide );

  2978. 

  2979. 				// Center slides vertically

  2980. 				if( numberOfPages === 1 && config.center || slide.classList.contains( 'center' ) ) {

  2981. 					top = Math.max( ( pageHeight - contentHeight ) / 2, 0 );

  2982. 				}

  2983. 

  2984. 				// Wrap the slide in a page element and hide its overflow

  2985. 				// so that no page ever flows onto another

  2986. 				var page = document.createElement( 'div' );

  2987. 				page.className = 'pdf-page';

  2988. 				page.style.height = ( ( pageHeight + config.pdfPageHeightOffset ) * numberOfPages ) + 'px';

  2989. 				slide.parentNode.insertBefore( page, slide );

  2990. 				page.appendChild( slide );

  2991. 

  2992. 				// Position the slide inside of the page

  2993. 				slide.style.left = left + 'px';

  2994. 				slide.style.top = top + 'px';

  2995. 				slide.style.width = slideWidth + 'px';

  2996. 

  2997. 				if( slide.slideBackgroundElement ) {

  2998. 					page.insertBefore( slide.slideBackgroundElement, slide );

  2999. 				}

  3000. 

  3001. 				// Inject notes if `showNotes` is enabled

  3002. 				if( config.showNotes ) {

  3003. 

  3004. 					// Are there notes for this slide?

  3005. 					var notes = getSlideNotes( slide );

  3006. 					if( notes ) {

  3007. 

  3008. 						var notesSpacing = 8;

  3009. 						var notesLayout = typeof config.showNotes === 'string' ? config.showNotes : 'inline';

  3010. 						var notesElement = document.createElement( 'div' );

  3011. 						notesElement.classList.add( 'speaker-notes' );

  3012. 						notesElement.classList.add( 'speaker-notes-pdf' );

  3013. 						notesElement.setAttribute( 'data-layout', notesLayout );

  3014. 						notesElement.innerHTML = notes;

  3015. 

  3016. 						if( notesLayout === 'separate-page' ) {

  3017. 							page.parentNode.insertBefore( notesElement, page.nextSibling );

  3018. 						}

  3019. 						else {

  3020. 							notesElement.style.left = notesSpacing + 'px';

  3021. 							notesElement.style.bottom = notesSpacing + 'px';

  3022. 							notesElement.style.width = ( pageWidth - notesSpacing*2 ) + 'px';

  3023. 							page.appendChild( notesElement );

  3024. 						}

  3025. 

  3026. 					}

  3027. 

  3028. 				}

  3029. 

  3030. 				// Inject slide numbers if `slideNumbers` are enabled

  3031. 				if( config.slideNumber && /all|print/i.test( config.showSlideNumber ) ) {

  3032. 					var slideNumberH = parseInt( slide.getAttribute( 'data-index-h' ), 10 ) + 1,

  3033. 						slideNumberV = parseInt( slide.getAttribute( 'data-index-v' ), 10 ) + 1;

  3034. 

  3035. 					var numberElement = document.createElement( 'div' );

  3036. 					numberElement.classList.add( 'slide-number' );

  3037. 					numberElement.classList.add( 'slide-number-pdf' );

  3038. 					numberElement.innerHTML = formatSlideNumber( slideNumberH, '.', slideNumberV );

  3039. 					page.appendChild( numberElement );

  3040. 				}

  3041. 

  3042. 				// Copy page and show fragments one after another

  3043. 				if( config.pdfSeparateFragments ) {

  3044. 

  3045. 					// Each fragment 'group' is an array containing one or more

  3046. 					// fragments. Multiple fragments that appear at the same time

  3047. 					// are part of the same group.

  3048. 					var fragmentGroups = sortFragments( page.querySelectorAll( '.fragment' ), true );

  3049. 

  3050. 					var previousFragmentStep;

  3051. 					var previousPage;

  3052. 

  3053. 					fragmentGroups.forEach( function( fragments ) {

  3054. 

  3055. 						// Remove 'current-fragment' from the previous group

  3056. 						if( previousFragmentStep ) {

  3057. 							previousFragmentStep.forEach( function( fragment ) {

  3058. 								fragment.classList.remove( 'current-fragment' );

  3059. 							} );

  3060. 						}

  3061. 

  3062. 						// Show the fragments for the current index

  3063. 						fragments.forEach( function( fragment ) {

  3064. 							fragment.classList.add( 'visible', 'current-fragment' );

  3065. 						} );

  3066. 

  3067. 						// Create a separate page for the current fragment state

  3068. 						var clonedPage = page.cloneNode( true );

  3069. 						page.parentNode.insertBefore( clonedPage, ( previousPage || page ).nextSibling );

  3070. 

  3071. 						previousFragmentStep = fragments;

  3072. 						previousPage = clonedPage;

  3073. 

  3074. 					} );

  3075. 

  3076. 					// Reset the first/original page so that all fragments are hidden

  3077. 					fragmentGroups.forEach( function( fragments ) {

  3078. 						fragments.forEach( function( fragment ) {

  3079. 							fragment.classList.remove( 'visible', 'current-fragment' );

  3080. 						} );

  3081. 					} );

  3082. 

  3083. 				}

  3084. 				// Show all fragments

  3085. 				else {

  3086. 					toArray( page.querySelectorAll( '.fragment:not(.fade-out)' ) ).forEach( function( fragment ) {

  3087. 						fragment.classList.add( 'visible' );

  3088. 					} );

  3089. 				}

  3090. 

  3091. 			}

  3092. 

  3093. 		} );

  3094. 

  3095. 		// Notify subscribers that the PDF layout is good to go

  3096. 		dispatchEvent( 'pdf-ready' );

  3097. 

  3098. 	}

  3099. 

  3100. 	/**

  3101. 	 * This is an unfortunate necessity. Some actions – such as

  3102. 	 * an input field being focused in an iframe or using the

  3103. 	 * keyboard to expand text selection beyond the bounds of

  3104. 	 * a slide – can trigger our content to be pushed out of view.

  3105. 	 * This scrolling can not be prevented by hiding overflow in

  3106. 	 * CSS (we already do) so we have to resort to repeatedly

  3107. 	 * checking if the slides have been offset :(

  3108. 	 */

  3109. 	function setupScrollPrevention() {

  3110. 

  3111. 		setInterval( function() {

  3112. 			if( dom.wrapper.scrollTop !== 0 || dom.wrapper.scrollLeft !== 0 ) {

  3113. 				dom.wrapper.scrollTop = 0;

  3114. 				dom.wrapper.scrollLeft = 0;

  3115. 			}

  3116. 		}, 1000 );

  3117. 

  3118. 	}

  3119. 

  3120. 	/**

  3121. 	 * Creates an HTML element and returns a reference to it.

  3122. 	 * If the element already exists the existing instance will

  3123. 	 * be returned.

  3124. 	 *

  3125. 	 * @param {HTMLElement} container

  3126. 	 * @param {string} tagname

  3127. 	 * @param {string} classname

  3128. 	 * @param {string} innerHTML

  3129. 	 *

  3130. 	 * @return {HTMLElement}

  3131. 	 */

  3132. 	function createSingletonNode( container, tagname, classname, innerHTML ) {

  3133. 

  3134. 		// Find all nodes matching the description

  3135. 		var nodes = container.querySelectorAll( '.' + classname );

  3136. 

  3137. 		// Check all matches to find one which is a direct child of

  3138. 		// the specified container

  3139. 		for( var i = 0; i < nodes.length; i++ ) {

  3140. 			var testNode = nodes[i];

  3141. 			if( testNode.parentNode === container ) {

  3142. 				return testNode;

  3143. 			}

  3144. 		}

  3145. 

  3146. 		// If no node was found, create it now

  3147. 		var node = document.createElement( tagname );

  3148. 		node.className = classname;

  3149. 		if( typeof innerHTML === 'string' ) {

  3150. 			node.innerHTML = innerHTML;

  3151. 		}

  3152. 		container.appendChild( node );

  3153. 

  3154. 		return node;

  3155. 

  3156. 	}

  3157. 

  3158. 	/**

  3159. 	 * Creates the slide background elements and appends them

  3160. 	 * to the background container. One element is created per

  3161. 	 * slide no matter if the given slide has visible background.

  3162. 	 */

  3163. 	function createBackgrounds() {

  3164. 

  3165. 		var printMode = isPrintingPDF();

  3166. 

  3167. 		// Clear prior backgrounds

  3168. 		dom.background.innerHTML = '';

  3169. 		dom.background.classList.add( 'no-transition' );

  3170. 

  3171. 		// Iterate over all horizontal slides

  3172. 		toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( slideh ) {

  3173. 

  3174. 			var backgroundStack = createBackground( slideh, dom.background );

  3175. 

  3176. 			// Iterate over all vertical slides

  3177. 			toArray( slideh.querySelectorAll( 'section' ) ).forEach( function( slidev ) {

  3178. 

  3179. 				createBackground( slidev, backgroundStack );

  3180. 

  3181. 				backgroundStack.classList.add( 'stack' );

  3182. 

  3183. 			} );

  3184. 

  3185. 		} );

  3186. 

  3187. 		// Add parallax background if specified

  3188. 		if( config.parallaxBackgroundImage ) {

  3189. 

  3190. 			dom.background.style.backgroundImage = 'url("' + config.parallaxBackgroundImage + '")';

  3191. 			dom.background.style.backgroundSize = config.parallaxBackgroundSize;

  3192. 			dom.background.style.backgroundRepeat = config.parallaxBackgroundRepeat;

  3193. 			dom.background.style.backgroundPosition = config.parallaxBackgroundPosition;

  3194. 

  3195. 			// Make sure the below properties are set on the element - these properties are

  3196. 			// needed for proper transitions to be set on the element via CSS. To remove

  3197. 			// annoying background slide-in effect when the presentation starts, apply

  3198. 			// these properties after short time delay

  3199. 			setTimeout( function() {

  3200. 				dom.wrapper.classList.add( 'has-parallax-background' );

  3201. 			}, 1 );

  3202. 

  3203. 		}

  3204. 		else {

  3205. 

  3206. 			dom.background.style.backgroundImage = '';

  3207. 			dom.wrapper.classList.remove( 'has-parallax-background' );

  3208. 

  3209. 		}

  3210. 

  3211. 	}

  3212. 

  3213. 	/**

  3214. 	 * Creates a background for the given slide.

  3215. 	 *

  3216. 	 * @param {HTMLElement} slide

  3217. 	 * @param {HTMLElement} container The element that the background

  3218. 	 * should be appended to

  3219. 	 * @return {HTMLElement} New background div

  3220. 	 */

  3221. 	function createBackground( slide, container ) {

  3222. 

  3223. 

  3224. 		// Main slide background element

  3225. 		var element = document.createElement( 'div' );

  3226. 		element.className = 'slide-background ' + slide.className.replace( /present|past|future/, '' );

  3227. 

  3228. 		// Inner background element that wraps images/videos/iframes

  3229. 		var contentElement = document.createElement( 'div' );

  3230. 		contentElement.className = 'slide-background-content';

  3231. 

  3232. 		element.appendChild( contentElement );

  3233. 		container.appendChild( element );

  3234. 

  3235. 		slide.slideBackgroundElement = element;

  3236. 		slide.slideBackgroundContentElement = contentElement;

  3237. 

  3238. 		// Syncs the background to reflect all current background settings

  3239. 		syncBackground( slide );

  3240. 

  3241. 		return element;

  3242. 

  3243. 	}

  3244. 

  3245. 	/**

  3246. 	 * Renders all of the visual properties of a slide background

  3247. 	 * based on the various background attributes.

  3248. 	 *

  3249. 	 * @param {HTMLElement} slide

  3250. 	 */

  3251. 	function syncBackground( slide ) {

  3252. 

  3253. 		var element = slide.slideBackgroundElement,

  3254. 			contentElement = slide.slideBackgroundContentElement;

  3255. 

  3256. 		// Reset the prior background state in case this is not the

  3257. 		// initial sync

  3258. 		slide.classList.remove( 'has-dark-background' );

  3259. 		slide.classList.remove( 'has-light-background' );

  3260. 

  3261. 		element.removeAttribute( 'data-loaded' );

  3262. 		element.removeAttribute( 'data-background-hash' );

  3263. 		element.removeAttribute( 'data-background-size' );

  3264. 		element.removeAttribute( 'data-background-transition' );

  3265. 		element.style.backgroundColor = '';

  3266. 

  3267. 		contentElement.style.backgroundSize = '';

  3268. 		contentElement.style.backgroundRepeat = '';

  3269. 		contentElement.style.backgroundPosition = '';

  3270. 		contentElement.style.backgroundImage = '';

  3271. 		contentElement.style.opacity = '';

  3272. 		contentElement.innerHTML = '';

  3273. 

  3274. 		var data = {

  3275. 			background: slide.getAttribute( 'data-background' ),

  3276. 			backgroundSize: slide.getAttribute( 'data-background-size' ),

  3277. 			backgroundImage: slide.getAttribute( 'data-background-image' ),

  3278. 			backgroundVideo: slide.getAttribute( 'data-background-video' ),

  3279. 			backgroundIframe: slide.getAttribute( 'data-background-iframe' ),

  3280. 			backgroundColor: slide.getAttribute( 'data-background-color' ),

  3281. 			backgroundRepeat: slide.getAttribute( 'data-background-repeat' ),

  3282. 			backgroundPosition: slide.getAttribute( 'data-background-position' ),

  3283. 			backgroundTransition: slide.getAttribute( 'data-background-transition' ),

  3284. 			backgroundOpacity: slide.getAttribute( 'data-background-opacity' )

  3285. 		};

  3286. 

  3287. 		if( data.background ) {

  3288. 			// Auto-wrap image urls in url(...)

  3289. 			if( /^(http|file|\/\/)/gi.test( data.background ) || /\.(svg|png|jpg|jpeg|gif|bmp)([?#\s]|$)/gi.test( data.background ) ) {

  3290. 				slide.setAttribute( 'data-background-image', data.background );

  3291. 			}

  3292. 			else {

  3293. 				element.style.background = data.background;

  3294. 			}

  3295. 		}

  3296. 

  3297. 		// Create a hash for this combination of background settings.

  3298. 		// This is used to determine when two slide backgrounds are

  3299. 		// the same.

  3300. 		if( data.background || data.backgroundColor || data.backgroundImage || data.backgroundVideo || data.backgroundIframe ) {

  3301. 			element.setAttribute( 'data-background-hash', data.background +

  3302. 															data.backgroundSize +

  3303. 															data.backgroundImage +

  3304. 															data.backgroundVideo +

  3305. 															data.backgroundIframe +

  3306. 															data.backgroundColor +

  3307. 															data.backgroundRepeat +

  3308. 															data.backgroundPosition +

  3309. 															data.backgroundTransition +

  3310. 															data.backgroundOpacity );

  3311. 		}

  3312. 

  3313. 		// Additional and optional background properties

  3314. 		if( data.backgroundSize ) element.setAttribute( 'data-background-size', data.backgroundSize );

  3315. 		if( data.backgroundColor ) element.style.backgroundColor = data.backgroundColor;

  3316. 		if( data.backgroundTransition ) element.setAttribute( 'data-background-transition', data.backgroundTransition );

  3317. 

  3318. 		// Background image options are set on the content wrapper

  3319. 		if( data.backgroundSize ) contentElement.style.backgroundSize = data.backgroundSize;

  3320. 		if( data.backgroundRepeat ) contentElement.style.backgroundRepeat = data.backgroundRepeat;

  3321. 		if( data.backgroundPosition ) contentElement.style.backgroundPosition = data.backgroundPosition;

  3322. 		if( data.backgroundOpacity ) contentElement.style.opacity = data.backgroundOpacity;

  3323. 

  3324. 		// If this slide has a background color, we add a class that

  3325. 		// signals if it is light or dark. If the slide has no background

  3326. 		// color, no class will be added

  3327. 		var contrastColor = data.backgroundColor;

  3328. 

  3329. 		// If no bg color was found, check the computed background

  3330. 		if( !contrastColor ) {

  3331. 			var computedBackgroundStyle = window.getComputedStyle( element );

  3332. 			if( computedBackgroundStyle && computedBackgroundStyle.backgroundColor ) {

  3333. 				contrastColor = computedBackgroundStyle.backgroundColor;

  3334. 			}

  3335. 		}

  3336. 

  3337. 		if( contrastColor ) {

  3338. 			var rgb = colorToRgb( contrastColor );

  3339. 

  3340. 			// Ignore fully transparent backgrounds. Some browsers return

  3341. 			// rgba(0,0,0,0) when reading the computed background color of

  3342. 			// an element with no background

  3343. 			if( rgb && rgb.a !== 0 ) {

  3344. 				if( colorBrightness( contrastColor ) < 128 ) {

  3345. 					slide.classList.add( 'has-dark-background' );

  3346. 				}

  3347. 				else {

  3348. 					slide.classList.add( 'has-light-background' );

  3349. 				}

  3350. 			}

  3351. 		}

  3352. 

  3353. 	}

  3354. 

  3355. 	/**

  3356. 	 * Registers a listener to postMessage events, this makes it

  3357. 	 * possible to call all reveal.js API methods from another

  3358. 	 * window. For example:

  3359. 	 *

  3360. 	 * revealWindow.postMessage( JSON.stringify({

  3361. 	 *   method: 'slide',

  3362. 	 *   args: [ 2 ]

  3363. 	 * }), '*' );

  3364. 	 */

  3365. 	function setupPostMessage() {

  3366. 

  3367. 		if( config.postMessage ) {

  3368. 			window.addEventListener( 'message', function ( event ) {

  3369. 				var data = event.data;

  3370. 

  3371. 				// Make sure we're dealing with JSON

  3372. 				if( typeof data === 'string' && data.charAt( 0 ) === '{' && data.charAt( data.length - 1 ) === '}' ) {

  3373. 					data = JSON.parse( data );

  3374. 

  3375. 					// Check if the requested method can be found

  3376. 					if( data.method && typeof Reveal[data.method] === 'function' ) {

  3377. 						Reveal[data.method].apply( Reveal, data.args );

  3378. 					}

  3379. 				}

  3380. 			}, false );

  3381. 		}

  3382. 

  3383. 	}

  3384. 

  3385. 	/**

  3386. 	 * Applies the configuration settings from the config

  3387. 	 * object. May be called multiple times.

  3388. 	 *

  3389. 	 * @param {object} options

  3390. 	 */

  3391. 	function configure( options ) {

  3392. 

  3393. 		var oldTransition = config.transition;

  3394. 

  3395. 		// New config options may be passed when this method

  3396. 		// is invoked through the API after initialization

  3397. 		if( typeof options === 'object' ) extend( config, options );

  3398. 

  3399. 		// Abort if reveal.js hasn't finished loading, config

  3400. 		// changes will be applied automatically once loading

  3401. 		// finishes

  3402. 		if( loaded === false ) return;

  3403. 

  3404. 		var numberOfSlides = dom.wrapper.querySelectorAll( SLIDES_SELECTOR ).length;

  3405. 

  3406. 		// Remove the previously configured transition class

  3407. 		dom.wrapper.classList.remove( oldTransition );

  3408. 

  3409. 		// Force linear transition based on browser capabilities

  3410. 		if( features.transforms3d === false ) config.transition = 'linear';

  3411. 

  3412. 		dom.wrapper.classList.add( config.transition );

  3413. 

  3414. 		dom.wrapper.setAttribute( 'data-transition-speed', config.transitionSpeed );

  3415. 		dom.wrapper.setAttribute( 'data-background-transition', config.backgroundTransition );

  3416. 

  3417. 		dom.controls.style.display = config.controls ? 'block' : 'none';

  3418. 		dom.progress.style.display = config.progress ? 'block' : 'none';

  3419. 

  3420. 		dom.controls.setAttribute( 'data-controls-layout', config.controlsLayout );

  3421. 		dom.controls.setAttribute( 'data-controls-back-arrows', config.controlsBackArrows );

  3422. 

  3423. 		if( config.shuffle ) {

  3424. 			shuffle();

  3425. 		}

  3426. 

  3427. 		if( config.rtl ) {

  3428. 			dom.wrapper.classList.add( 'rtl' );

  3429. 		}

  3430. 		else {

  3431. 			dom.wrapper.classList.remove( 'rtl' );

  3432. 		}

  3433. 

  3434. 		if( config.center ) {

  3435. 			dom.wrapper.classList.add( 'center' );

  3436. 		}

  3437. 		else {

  3438. 			dom.wrapper.classList.remove( 'center' );

  3439. 		}

  3440. 

  3441. 		// Exit the paused mode if it was configured off

  3442. 		if( config.pause === false ) {

  3443. 			resume();

  3444. 		}

  3445. 

  3446. 		if( config.showNotes ) {

  3447. 			dom.speakerNotes.setAttribute( 'data-layout', typeof config.showNotes === 'string' ? config.showNotes : 'inline' );

  3448. 		}

  3449. 

  3450. 		if( config.mouseWheel ) {

  3451. 			document.addEventListener( 'DOMMouseScroll', onDocumentMouseScroll, false ); // FF

  3452. 			document.addEventListener( 'mousewheel', onDocumentMouseScroll, false );

  3453. 		}

  3454. 		else {

  3455. 			document.removeEventListener( 'DOMMouseScroll', onDocumentMouseScroll, false ); // FF

  3456. 			document.removeEventListener( 'mousewheel', onDocumentMouseScroll, false );

  3457. 		}

  3458. 

  3459. 		// Rolling 3D links

  3460. 		if( config.rollingLinks ) {

  3461. 			enableRollingLinks();

  3462. 		}

  3463. 		else {

  3464. 			disableRollingLinks();

  3465. 		}

  3466. 

  3467. 		// Auto-hide the mouse pointer when its inactive

  3468. 		if( config.hideInactiveCursor ) {

  3469. 			document.addEventListener( 'mousemove', onDocumentCursorActive, false );

  3470. 			document.addEventListener( 'mousedown', onDocumentCursorActive, false );

  3471. 		}

  3472. 		else {

  3473. 			showCursor();

  3474. 

  3475. 			document.removeEventListener( 'mousemove', onDocumentCursorActive, false );

  3476. 			document.removeEventListener( 'mousedown', onDocumentCursorActive, false );

  3477. 		}

  3478. 

  3479. 		// Iframe link previews

  3480. 		if( config.previewLinks ) {

  3481. 			enablePreviewLinks();

  3482. 			disablePreviewLinks( '[data-preview-link=false]' );

  3483. 		}

  3484. 		else {

  3485. 			disablePreviewLinks();

  3486. 			enablePreviewLinks( '[data-preview-link]:not([data-preview-link=false])' );

  3487. 		}

  3488. 

  3489. 		// Remove existing auto-slide controls

  3490. 		if( autoSlidePlayer ) {

  3491. 			autoSlidePlayer.destroy();

  3492. 			autoSlidePlayer = null;

  3493. 		}

  3494. 

  3495. 		// Generate auto-slide controls if needed

  3496. 		if( numberOfSlides > 1 && config.autoSlide && config.autoSlideStoppable && features.canvas && features.requestAnimationFrame ) {

  3497. 			autoSlidePlayer = new Playback( dom.wrapper, function() {

  3498. 				return Math.min( Math.max( ( Date.now() - autoSlideStartTime ) / autoSlide, 0 ), 1 );

  3499. 			} );

  3500. 

  3501. 			autoSlidePlayer.on( 'click', onAutoSlidePlayerClick );

  3502. 			autoSlidePaused = false;

  3503. 		}

  3504. 

  3505. 		// When fragments are turned off they should be visible

  3506. 		if( config.fragments === false ) {

  3507. 			toArray( dom.slides.querySelectorAll( '.fragment' ) ).forEach( function( element ) {

  3508. 				element.classList.add( 'visible' );

  3509. 				element.classList.remove( 'current-fragment' );

  3510. 			} );

  3511. 		}

  3512. 

  3513. 		// Slide numbers

  3514. 		var slideNumberDisplay = 'none';

  3515. 		if( config.slideNumber && !isPrintingPDF() ) {

  3516. 			if( config.showSlideNumber === 'all' ) {

  3517. 				slideNumberDisplay = 'block';

  3518. 			}

  3519. 			else if( config.showSlideNumber === 'speaker' && isSpeakerNotes() ) {

  3520. 				slideNumberDisplay = 'block';

  3521. 			}

  3522. 		}

  3523. 

  3524. 		dom.slideNumber.style.display = slideNumberDisplay;

  3525. 

  3526. 		// Add the navigation mode to the DOM so we can adjust styling

  3527. 		if( config.navigationMode !== 'default' ) {

  3528. 			dom.wrapper.setAttribute( 'data-navigation-mode', config.navigationMode );

  3529. 		}

  3530. 		else {

  3531. 			dom.wrapper.removeAttribute( 'data-navigation-mode' );

  3532. 		}

  3533. 

  3534. 		// Define our contextual list of keyboard shortcuts

  3535. 		if( config.navigationMode === 'linear' ) {

  3536. 			keyboardShortcuts['&#8594;  ,  &#8595;  ,  SPACE  ,  N  ,  L  ,  J'] = 'Next slide';

  3537. 			keyboardShortcuts['&#8592;  ,  &#8593;  ,  P  ,  H  ,  K']           = 'Previous slide';

  3538. 		}

  3539. 		else {

  3540. 			keyboardShortcuts['N  ,  SPACE']   = 'Next slide';

  3541. 			keyboardShortcuts['P']             = 'Previous slide';

  3542. 			keyboardShortcuts['&#8592;  ,  H'] = 'Navigate left';

  3543. 			keyboardShortcuts['&#8594;  ,  L'] = 'Navigate right';

  3544. 			keyboardShortcuts['&#8593;  ,  K'] = 'Navigate up';

  3545. 			keyboardShortcuts['&#8595;  ,  J'] = 'Navigate down';

  3546. 		}

  3547. 

  3548. 		keyboardShortcuts['Home  ,  &#8984;/CTRL &#8592;'] = 'First slide';

  3549. 		keyboardShortcuts['End  ,  &#8984;/CTRL &#8594;']  = 'Last slide';

  3550. 		keyboardShortcuts['B  ,  .']                       = 'Pause';

  3551. 		keyboardShortcuts['F']                             = 'Fullscreen';

  3552. 		keyboardShortcuts['ESC, O']                        = 'Slide overview';

  3553. 

  3554. 		sync();

  3555. 

  3556. 	}

  3557. 

  3558. 	/**

  3559. 	 * Binds all event listeners.

  3560. 	 */

  3561. 	function addEventListeners() {

  3562. 

  3563. 		eventsAreBound = true;

  3564. 

  3565. 		window.addEventListener( 'hashchange', onWindowHashChange, false );

  3566. 		window.addEventListener( 'resize', onWindowResize, false );

  3567. 

  3568. 		if( config.touch ) {

  3569. 			if( 'onpointerdown' in window ) {

  3570. 				// Use W3C pointer events

  3571. 				dom.wrapper.addEventListener( 'pointerdown', onPointerDown, false );

  3572. 				dom.wrapper.addEventListener( 'pointermove', onPointerMove, false );

  3573. 				dom.wrapper.addEventListener( 'pointerup', onPointerUp, false );

  3574. 			}

  3575. 			else if( window.navigator.msPointerEnabled ) {

  3576. 				// IE 10 uses prefixed version of pointer events

  3577. 				dom.wrapper.addEventListener( 'MSPointerDown', onPointerDown, false );

  3578. 				dom.wrapper.addEventListener( 'MSPointerMove', onPointerMove, false );

  3579. 				dom.wrapper.addEventListener( 'MSPointerUp', onPointerUp, false );

  3580. 			}

  3581. 			else {

  3582. 				// Fall back to touch events

  3583. 				dom.wrapper.addEventListener( 'touchstart', onTouchStart, false );

  3584. 				dom.wrapper.addEventListener( 'touchmove', onTouchMove, false );

  3585. 				dom.wrapper.addEventListener( 'touchend', onTouchEnd, false );

  3586. 			}

  3587. 		}

  3588. 

  3589. 		if( config.keyboard ) {

  3590. 			document.addEventListener( 'keydown', onDocumentKeyDown, false );

  3591. 			document.addEventListener( 'keypress', onDocumentKeyPress, false );

  3592. 		}

  3593. 

  3594. 		if( config.progress && dom.progress ) {

  3595. 			dom.progress.addEventListener( 'click', onProgressClicked, false );

  3596. 		}

  3597. 

  3598. 		dom.pauseOverlay.addEventListener( 'click', resume, false );

  3599. 

  3600. 		if( config.focusBodyOnPageVisibilityChange ) {

  3601. 			var visibilityChange;

  3602. 

  3603. 			if( 'hidden' in document ) {

  3604. 				visibilityChange = 'visibilitychange';

  3605. 			}

  3606. 			else if( 'msHidden' in document ) {

  3607. 				visibilityChange = 'msvisibilitychange';

  3608. 			}

  3609. 			else if( 'webkitHidden' in document ) {

  3610. 				visibilityChange = 'webkitvisibilitychange';

  3611. 			}

  3612. 

  3613. 			if( visibilityChange ) {

  3614. 				document.addEventListener( visibilityChange, onPageVisibilityChange, false );

  3615. 			}

  3616. 		}

  3617. 

  3618. 		// Listen to both touch and click events, in case the device

  3619. 		// supports both

  3620. 		var pointerEvents = [ 'touchstart', 'click' ];

  3621. 

  3622. 		// Only support touch for Android, fixes double navigations in

  3623. 		// stock browser

  3624. 		if( UA.match( /android/gi ) ) {

  3625. 			pointerEvents = [ 'touchstart' ];

  3626. 		}

  3627. 

  3628. 		pointerEvents.forEach( function( eventName ) {

  3629. 			dom.controlsLeft.forEach( function( el ) { el.addEventListener( eventName, onNavigateLeftClicked, false ); } );

  3630. 			dom.controlsRight.forEach( function( el ) { el.addEventListener( eventName, onNavigateRightClicked, false ); } );

  3631. 			dom.controlsUp.forEach( function( el ) { el.addEventListener( eventName, onNavigateUpClicked, false ); } );

  3632. 			dom.controlsDown.forEach( function( el ) { el.addEventListener( eventName, onNavigateDownClicked, false ); } );

  3633. 			dom.controlsPrev.forEach( function( el ) { el.addEventListener( eventName, onNavigatePrevClicked, false ); } );

  3634. 			dom.controlsNext.forEach( function( el ) { el.addEventListener( eventName, onNavigateNextClicked, false ); } );

  3635. 		} );

  3636. 

  3637. 	}

  3638. 

  3639. 	/**

  3640. 	 * Unbinds all event listeners.

  3641. 	 */

  3642. 	function removeEventListeners() {

  3643. 

  3644. 		eventsAreBound = false;

  3645. 

  3646. 		document.removeEventListener( 'keydown', onDocumentKeyDown, false );

  3647. 		document.removeEventListener( 'keypress', onDocumentKeyPress, false );

  3648. 		window.removeEventListener( 'hashchange', onWindowHashChange, false );

  3649. 		window.removeEventListener( 'resize', onWindowResize, false );

  3650. 

  3651. 		dom.wrapper.removeEventListener( 'pointerdown', onPointerDown, false );

  3652. 		dom.wrapper.removeEventListener( 'pointermove', onPointerMove, false );

  3653. 		dom.wrapper.removeEventListener( 'pointerup', onPointerUp, false );

  3654. 

  3655. 		dom.wrapper.removeEventListener( 'MSPointerDown', onPointerDown, false );

  3656. 		dom.wrapper.removeEventListener( 'MSPointerMove', onPointerMove, false );

  3657. 		dom.wrapper.removeEventListener( 'MSPointerUp', onPointerUp, false );

  3658. 

  3659. 		dom.wrapper.removeEventListener( 'touchstart', onTouchStart, false );

  3660. 		dom.wrapper.removeEventListener( 'touchmove', onTouchMove, false );

  3661. 		dom.wrapper.removeEventListener( 'touchend', onTouchEnd, false );

  3662. 

  3663. 		dom.pauseOverlay.removeEventListener( 'click', resume, false );

  3664. 

  3665. 		if ( config.progress && dom.progress ) {

  3666. 			dom.progress.removeEventListener( 'click', onProgressClicked, false );

  3667. 		}

  3668. 

  3669. 		[ 'touchstart', 'click' ].forEach( function( eventName ) {

  3670. 			dom.controlsLeft.forEach( function( el ) { el.removeEventListener( eventName, onNavigateLeftClicked, false ); } );

  3671. 			dom.controlsRight.forEach( function( el ) { el.removeEventListener( eventName, onNavigateRightClicked, false ); } );

  3672. 			dom.controlsUp.forEach( function( el ) { el.removeEventListener( eventName, onNavigateUpClicked, false ); } );

  3673. 			dom.controlsDown.forEach( function( el ) { el.removeEventListener( eventName, onNavigateDownClicked, false ); } );

  3674. 			dom.controlsPrev.forEach( function( el ) { el.removeEventListener( eventName, onNavigatePrevClicked, false ); } );

  3675. 			dom.controlsNext.forEach( function( el ) { el.removeEventListener( eventName, onNavigateNextClicked, false ); } );

  3676. 		} );

  3677. 

  3678. 	}

  3679. 

  3680. 	/**

  3681. 	 * Registers a new plugin with this reveal.js instance.

  3682. 	 *

  3683. 	 * reveal.js waits for all regisered plugins to initialize

  3684. 	 * before considering itself ready, as long as the plugin

  3685. 	 * is registered before calling `Reveal.initialize()`.

  3686. 	 */

  3687. 	function registerPlugin( id, plugin ) {

  3688. 

  3689. 		if( plugins[id] === undefined ) {

  3690. 			plugins[id] = plugin;

  3691. 

  3692. 			// If a plugin is registered after reveal.js is loaded,

  3693. 			// initialize it right away

  3694. 			if( loaded && typeof plugin.init === 'function' ) {

  3695. 				plugin.init();

  3696. 			}

  3697. 		}

  3698. 		else {

  3699. 			console.warn( 'reveal.js: "'+ id +'" plugin has already been registered' );

  3700. 		}

  3701. 

  3702. 	}

  3703. 

  3704. 	/**

  3705. 	 * Checks if a specific plugin has been registered.

  3706. 	 *

  3707. 	 * @param {String} id Unique plugin identifier

  3708. 	 */

  3709. 	function hasPlugin( id ) {

  3710. 

  3711. 		return !!plugins[id];

  3712. 

  3713. 	}

  3714. 

  3715. 	/**

  3716. 	 * Returns the specific plugin instance, if a plugin

  3717. 	 * with the given ID has been registered.

  3718. 	 *

  3719. 	 * @param {String} id Unique plugin identifier

  3720. 	 */

  3721. 	function getPlugin( id ) {

  3722. 

  3723. 		return plugins[id];

  3724. 

  3725. 	}

  3726. 

  3727. 	/**

  3728. 	 * Add a custom key binding with optional description to

  3729. 	 * be added to the help screen.

  3730. 	 */

  3731. 	function addKeyBinding( binding, callback ) {

  3732. 

  3733. 		if( typeof binding === 'object' && binding.keyCode ) {

  3734. 			registeredKeyBindings[binding.keyCode] = {

  3735. 				callback: callback,

  3736. 				key: binding.key,

  3737. 				description: binding.description

  3738. 			};

  3739. 		}

  3740. 		else {

  3741. 			registeredKeyBindings[binding] = {

  3742. 				callback: callback,

  3743. 				key: null,

  3744. 				description: null

  3745. 			};

  3746. 		}

  3747. 

  3748. 	}

  3749. 

  3750. 	/**

  3751. 	 * Removes the specified custom key binding.

  3752. 	 */

  3753. 	function removeKeyBinding( keyCode ) {

  3754. 

  3755. 		delete registeredKeyBindings[keyCode];

  3756. 

  3757. 	}

  3758. 

  3759. 	/**

  3760. 	 * Extend object a with the properties of object b.

  3761. 	 * If there's a conflict, object b takes precedence.

  3762. 	 *

  3763. 	 * @param {object} a

  3764. 	 * @param {object} b

  3765. 	 */

  3766. 	function extend( a, b ) {

  3767. 

  3768. 		for( var i in b ) {

  3769. 			a[ i ] = b[ i ];

  3770. 		}

  3771. 

  3772. 		return a;

  3773. 

  3774. 	}

  3775. 

  3776. 	/**

  3777. 	 * Converts the target object to an array.

  3778. 	 *

  3779. 	 * @param {object} o

  3780. 	 * @return {object[]}

  3781. 	 */

  3782. 	function toArray( o ) {

  3783. 

  3784. 		return Array.prototype.slice.call( o );

  3785. 

  3786. 	}

  3787. 

  3788. 	/**

  3789. 	 * Utility for deserializing a value.

  3790. 	 *

  3791. 	 * @param {*} value

  3792. 	 * @return {*}

  3793. 	 */

  3794. 	function deserialize( value ) {

  3795. 

  3796. 		if( typeof value === 'string' ) {

  3797. 			if( value === 'null' ) return null;

  3798. 			else if( value === 'true' ) return true;

  3799. 			else if( value === 'false' ) return false;

  3800. 			else if( value.match( /^-?[\d\.]+$/ ) ) return parseFloat( value );

  3801. 		}

  3802. 

  3803. 		return value;

  3804. 

  3805. 	}

  3806. 

  3807. 	/**

  3808. 	 * Measures the distance in pixels between point a

  3809. 	 * and point b.

  3810. 	 *

  3811. 	 * @param {object} a point with x/y properties

  3812. 	 * @param {object} b point with x/y properties

  3813. 	 *

  3814. 	 * @return {number}

  3815. 	 */

  3816. 	function distanceBetween( a, b ) {

  3817. 

  3818. 		var dx = a.x - b.x,

  3819. 			dy = a.y - b.y;

  3820. 

  3821. 		return Math.sqrt( dx*dx + dy*dy );

  3822. 

  3823. 	}

  3824. 

  3825. 	/**

  3826. 	 * Applies a CSS transform to the target element.

  3827. 	 *

  3828. 	 * @param {HTMLElement} element

  3829. 	 * @param {string} transform

  3830. 	 */

  3831. 	function transformElement( element, transform ) {

  3832. 

  3833. 		element.style.WebkitTransform = transform;

  3834. 		element.style.MozTransform = transform;

  3835. 		element.style.msTransform = transform;

  3836. 		element.style.transform = transform;

  3837. 

  3838. 	}

  3839. 

  3840. 	/**

  3841. 	 * Applies CSS transforms to the slides container. The container

  3842. 	 * is transformed from two separate sources: layout and the overview

  3843. 	 * mode.

  3844. 	 *

  3845. 	 * @param {object} transforms

  3846. 	 */

  3847. 	function transformSlides( transforms ) {

  3848. 

  3849. 		// Pick up new transforms from arguments

  3850. 		if( typeof transforms.layout === 'string' ) slidesTransform.layout = transforms.layout;

  3851. 		if( typeof transforms.overview === 'string' ) slidesTransform.overview = transforms.overview;

  3852. 

  3853. 		// Apply the transforms to the slides container

  3854. 		if( slidesTransform.layout ) {

  3855. 			transformElement( dom.slides, slidesTransform.layout + ' ' + slidesTransform.overview );

  3856. 		}

  3857. 		else {

  3858. 			transformElement( dom.slides, slidesTransform.overview );

  3859. 		}

  3860. 

  3861. 	}

  3862. 

  3863. 	/**

  3864. 	 * Injects the given CSS styles into the DOM.

  3865. 	 *

  3866. 	 * @param {string} value

  3867. 	 */

  3868. 	function injectStyleSheet( value ) {

  3869. 

  3870. 		var tag = document.createElement( 'style' );

  3871. 		tag.type = 'text/css';

  3872. 		if( tag.styleSheet ) {

  3873. 			tag.styleSheet.cssText = value;

  3874. 		}

  3875. 		else {

  3876. 			tag.appendChild( document.createTextNode( value ) );

  3877. 		}

  3878. 		document.getElementsByTagName( 'head' )[0].appendChild( tag );

  3879. 

  3880. 	}

  3881. 

  3882. 	/**

  3883. 	 * Find the closest parent that matches the given

  3884. 	 * selector.

  3885. 	 *

  3886. 	 * @param {HTMLElement} target The child element

  3887. 	 * @param {String} selector The CSS selector to match

  3888. 	 * the parents against

  3889. 	 *

  3890. 	 * @return {HTMLElement} The matched parent or null

  3891. 	 * if no matching parent was found

  3892. 	 */

  3893. 	function closestParent( target, selector ) {

  3894. 

  3895. 		var parent = target.parentNode;

  3896. 

  3897. 		while( parent ) {

  3898. 

  3899. 			// There's some overhead doing this each time, we don't

  3900. 			// want to rewrite the element prototype but should still

  3901. 			// be enough to feature detect once at startup...

  3902. 			var matchesMethod = parent.matches || parent.matchesSelector || parent.msMatchesSelector;

  3903. 

  3904. 			// If we find a match, we're all set

  3905. 			if( matchesMethod && matchesMethod.call( parent, selector ) ) {

  3906. 				return parent;

  3907. 			}

  3908. 

  3909. 			// Keep searching

  3910. 			parent = parent.parentNode;

  3911. 

  3912. 		}

  3913. 

  3914. 		return null;

  3915. 

  3916. 	}

  3917. 

  3918. 	/**

  3919. 	 * Converts various color input formats to an {r:0,g:0,b:0} object.

  3920. 	 *

  3921. 	 * @param {string} color The string representation of a color

  3922. 	 * @example

  3923. 	 * colorToRgb('#000');

  3924. 	 * @example

  3925. 	 * colorToRgb('#000000');

  3926. 	 * @example

  3927. 	 * colorToRgb('rgb(0,0,0)');

  3928. 	 * @example

  3929. 	 * colorToRgb('rgba(0,0,0)');

  3930. 	 *

  3931. 	 * @return {{r: number, g: number, b: number, [a]: number}|null}

  3932. 	 */

  3933. 	function colorToRgb( color ) {

  3934. 

  3935. 		var hex3 = color.match( /^#([0-9a-f]{3})$/i );

  3936. 		if( hex3 && hex3[1] ) {

  3937. 			hex3 = hex3[1];

  3938. 			return {

  3939. 				r: parseInt( hex3.charAt( 0 ), 16 ) * 0x11,

  3940. 				g: parseInt( hex3.charAt( 1 ), 16 ) * 0x11,

  3941. 				b: parseInt( hex3.charAt( 2 ), 16 ) * 0x11

  3942. 			};

  3943. 		}

  3944. 

  3945. 		var hex6 = color.match( /^#([0-9a-f]{6})$/i );

  3946. 		if( hex6 && hex6[1] ) {

  3947. 			hex6 = hex6[1];

  3948. 			return {

  3949. 				r: parseInt( hex6.substr( 0, 2 ), 16 ),

  3950. 				g: parseInt( hex6.substr( 2, 2 ), 16 ),

  3951. 				b: parseInt( hex6.substr( 4, 2 ), 16 )

  3952. 			};

  3953. 		}

  3954. 

  3955. 		var rgb = color.match( /^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i );

  3956. 		if( rgb ) {

  3957. 			return {

  3958. 				r: parseInt( rgb[1], 10 ),

  3959. 				g: parseInt( rgb[2], 10 ),

  3960. 				b: parseInt( rgb[3], 10 )

  3961. 			};

  3962. 		}

  3963. 

  3964. 		var rgba = color.match( /^rgba\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\,\s*([\d]+|[\d]*.[\d]+)\s*\)$/i );

  3965. 		if( rgba ) {

  3966. 			return {

  3967. 				r: parseInt( rgba[1], 10 ),

  3968. 				g: parseInt( rgba[2], 10 ),

  3969. 				b: parseInt( rgba[3], 10 ),

  3970. 				a: parseFloat( rgba[4] )

  3971. 			};

  3972. 		}

  3973. 

  3974. 		return null;

  3975. 

  3976. 	}

  3977. 

  3978. 	/**

  3979. 	 * Calculates brightness on a scale of 0-255.

  3980. 	 *

  3981. 	 * @param {string} color See colorToRgb for supported formats.

  3982. 	 * @see {@link colorToRgb}

  3983. 	 */

  3984. 	function colorBrightness( color ) {

  3985. 

  3986. 		if( typeof color === 'string' ) color = colorToRgb( color );

  3987. 

  3988. 		if( color ) {

  3989. 			return ( color.r * 299 + color.g * 587 + color.b * 114 ) / 1000;

  3990. 		}

  3991. 

  3992. 		return null;

  3993. 

  3994. 	}

  3995. 

  3996. 	/**

  3997. 	 * Returns the remaining height within the parent of the

  3998. 	 * target element.

  3999. 	 *

  4000. 	 * remaining height = [ configured parent height ] - [ current parent height ]

  4001. 	 *

  4002. 	 * @param {HTMLElement} element

  4003. 	 * @param {number} [height]

  4004. 	 */

  4005. 	function getRemainingHeight( element, height ) {

  4006. 

  4007. 		height = height || 0;

  4008. 

  4009. 		if( element ) {

  4010. 			var newHeight, oldHeight = element.style.height;

  4011. 

  4012. 			// Change the .stretch element height to 0 in order find the height of all

  4013. 			// the other elements

  4014. 			element.style.height = '0px';

  4015. 

  4016. 			// In Overview mode, the parent (.slide) height is set of 700px.

  4017. 			// Restore it temporarily to its natural height.

  4018. 			element.parentNode.style.height = 'auto';

  4019. 

  4020. 			newHeight = height - element.parentNode.offsetHeight;

  4021. 

  4022. 			// Restore the old height, just in case

  4023. 			element.style.height = oldHeight + 'px';

  4024. 

  4025. 			// Clear the parent (.slide) height. .removeProperty works in IE9+

  4026. 			element.parentNode.style.removeProperty('height');

  4027. 

  4028. 			return newHeight;

  4029. 		}

  4030. 

  4031. 		return height;

  4032. 

  4033. 	}

  4034. 

  4035. 	/**

  4036. 	 * Checks if this instance is being used to print a PDF.

  4037. 	 */

  4038. 	function isPrintingPDF() {

  4039. 

  4040. 		return ( /print-pdf/gi ).test( window.location.search );

  4041. 

  4042. 	}

  4043. 

  4044. 	/**

  4045. 	 * Hides the address bar if we're on a mobile device.

  4046. 	 */

  4047. 	function hideAddressBar() {

  4048. 

  4049. 		if( config.hideAddressBar && isMobileDevice ) {

  4050. 			// Events that should trigger the address bar to hide

  4051. 			window.addEventListener( 'load', removeAddressBar, false );

  4052. 			window.addEventListener( 'orientationchange', removeAddressBar, false );

  4053. 		}

  4054. 

  4055. 	}

  4056. 

  4057. 	/**

  4058. 	 * Causes the address bar to hide on mobile devices,

  4059. 	 * more vertical space ftw.

  4060. 	 */

  4061. 	function removeAddressBar() {

  4062. 

  4063. 		setTimeout( function() {

  4064. 			window.scrollTo( 0, 1 );

  4065. 		}, 10 );

  4066. 

  4067. 	}

  4068. 

  4069. 	/**

  4070. 	 * Dispatches an event of the specified type from the

  4071. 	 * reveal DOM element.

  4072. 	 */

  4073. 	function dispatchEvent( type, args ) {

  4074. 

  4075. 		var event = document.createEvent( 'HTMLEvents', 1, 2 );

  4076. 		event.initEvent( type, true, true );

  4077. 		extend( event, args );

  4078. 		dom.wrapper.dispatchEvent( event );

  4079. 

  4080. 		// If we're in an iframe, post each reveal.js event to the

  4081. 		// parent window. Used by the notes plugin

  4082. 		if( config.postMessageEvents && window.parent !== window.self ) {

  4083. 			window.parent.postMessage( JSON.stringify({ namespace: 'reveal', eventName: type, state: getState() }), '*' );

  4084. 		}

  4085. 

  4086. 	}

  4087. 

  4088. 	/**

  4089. 	 * Wrap all links in 3D goodness.

  4090. 	 */

  4091. 	function enableRollingLinks() {

  4092. 

  4093. 		if( features.transforms3d && !( 'msPerspective' in document.body.style ) ) {

  4094. 			var anchors = dom.wrapper.querySelectorAll( SLIDES_SELECTOR + ' a' );

  4095. 

  4096. 			for( var i = 0, len = anchors.length; i < len; i++ ) {

  4097. 				var anchor = anchors[i];

  4098. 

  4099. 				if( anchor.textContent && !anchor.querySelector( '*' ) && ( !anchor.className || !anchor.classList.contains( anchor, 'roll' ) ) ) {

  4100. 					var span = document.createElement('span');

  4101. 					span.setAttribute('data-title', anchor.text);

  4102. 					span.innerHTML = anchor.innerHTML;

  4103. 

  4104. 					anchor.classList.add( 'roll' );

  4105. 					anchor.innerHTML = '';

  4106. 					anchor.appendChild(span);

  4107. 				}

  4108. 			}

  4109. 		}

  4110. 

  4111. 	}

  4112. 

  4113. 	/**

  4114. 	 * Unwrap all 3D links.

  4115. 	 */

  4116. 	function disableRollingLinks() {

  4117. 

  4118. 		var anchors = dom.wrapper.querySelectorAll( SLIDES_SELECTOR + ' a.roll' );

  4119. 

  4120. 		for( var i = 0, len = anchors.length; i < len; i++ ) {

  4121. 			var anchor = anchors[i];

  4122. 			var span = anchor.querySelector( 'span' );

  4123. 

  4124. 			if( span ) {

  4125. 				anchor.classList.remove( 'roll' );

  4126. 				anchor.innerHTML = span.innerHTML;

  4127. 			}

  4128. 		}

  4129. 

  4130. 	}

  4131. 

  4132. 	/**

  4133. 	 * Bind preview frame links.

  4134. 	 *

  4135. 	 * @param {string} [selector=a] - selector for anchors

  4136. 	 */

  4137. 	function enablePreviewLinks( selector ) {

  4138. 

  4139. 		var anchors = toArray( document.querySelectorAll( selector ? selector : 'a' ) );

  4140. 

  4141. 		anchors.forEach( function( element ) {

  4142. 			if( /^(http|www)/gi.test( element.getAttribute( 'href' ) ) ) {

  4143. 				element.addEventListener( 'click', onPreviewLinkClicked, false );

  4144. 			}

  4145. 		} );

  4146. 

  4147. 	}

  4148. 

  4149. 	/**

  4150. 	 * Unbind preview frame links.

  4151. 	 */

  4152. 	function disablePreviewLinks( selector ) {

  4153. 

  4154. 		var anchors = toArray( document.querySelectorAll( selector ? selector : 'a' ) );

  4155. 

  4156. 		anchors.forEach( function( element ) {

  4157. 			if( /^(http|www)/gi.test( element.getAttribute( 'href' ) ) ) {

  4158. 				element.removeEventListener( 'click', onPreviewLinkClicked, false );

  4159. 			}

  4160. 		} );

  4161. 

  4162. 	}

  4163. 

  4164. 	/**

  4165. 	 * Opens a preview window for the target URL.

  4166. 	 *

  4167. 	 * @param {string} url - url for preview iframe src

  4168. 	 */

  4169. 	function showPreview( url ) {

  4170. 

  4171. 		closeOverlay();

  4172. 

  4173. 		dom.overlay = document.createElement( 'div' );

  4174. 		dom.overlay.classList.add( 'overlay' );

  4175. 		dom.overlay.classList.add( 'overlay-preview' );

  4176. 		dom.wrapper.appendChild( dom.overlay );

  4177. 

  4178. 		dom.overlay.innerHTML = [

  4179. 			'<header>',

  4180. 				'<a class="close" href="#"><span class="icon"></span></a>',

  4181. 				'<a class="external" href="'+ url +'" target="_blank"><span class="icon"></span></a>',

  4182. 			'</header>',

  4183. 			'<div class="spinner"></div>',

  4184. 			'<div class="viewport">',

  4185. 				'<iframe src="'+ url +'"></iframe>',

  4186. 				'<small class="viewport-inner">',

  4187. 					'<span class="x-frame-error">Unable to load iframe. This is likely due to the site\'s policy (x-frame-options).</span>',

  4188. 				'</small>',

  4189. 			'</div>'

  4190. 		].join('');

  4191. 

  4192. 		dom.overlay.querySelector( 'iframe' ).addEventListener( 'load', function( event ) {

  4193. 			dom.overlay.classList.add( 'loaded' );

  4194. 		}, false );

  4195. 

  4196. 		dom.overlay.querySelector( '.close' ).addEventListener( 'click', function( event ) {

  4197. 			closeOverlay();

  4198. 			event.preventDefault();

  4199. 		}, false );

  4200. 

  4201. 		dom.overlay.querySelector( '.external' ).addEventListener( 'click', function( event ) {

  4202. 			closeOverlay();

  4203. 		}, false );

  4204. 

  4205. 		setTimeout( function() {

  4206. 			dom.overlay.classList.add( 'visible' );

  4207. 		}, 1 );

  4208. 

  4209. 	}

  4210. 

  4211. 	/**

  4212. 	 * Open or close help overlay window.

  4213. 	 *

  4214. 	 * @param {Boolean} [override] Flag which overrides the

  4215. 	 * toggle logic and forcibly sets the desired state. True means

  4216. 	 * help is open, false means it's closed.

  4217. 	 */

  4218. 	function toggleHelp( override ){

  4219. 

  4220. 		if( typeof override === 'boolean' ) {

  4221. 			override ? showHelp() : closeOverlay();

  4222. 		}

  4223. 		else {

  4224. 			if( dom.overlay ) {

  4225. 				closeOverlay();

  4226. 			}

  4227. 			else {

  4228. 				showHelp();

  4229. 			}

  4230. 		}

  4231. 	}

  4232. 

  4233. 	/**

  4234. 	 * Opens an overlay window with help material.

  4235. 	 */

  4236. 	function showHelp() {

  4237. 

  4238. 		if( config.help ) {

  4239. 

  4240. 			closeOverlay();

  4241. 

  4242. 			dom.overlay = document.createElement( 'div' );

  4243. 			dom.overlay.classList.add( 'overlay' );

  4244. 			dom.overlay.classList.add( 'overlay-help' );

  4245. 			dom.wrapper.appendChild( dom.overlay );

  4246. 

  4247. 			var html = '<p class="title">Keyboard Shortcuts</p><br/>';

  4248. 

  4249. 			html += '<table><th>KEY</th><th>ACTION</th>';

  4250. 			for( var key in keyboardShortcuts ) {

  4251. 				html += '<tr><td>' + key + '</td><td>' + keyboardShortcuts[ key ] + '</td></tr>';

  4252. 			}

  4253. 

  4254. 			// Add custom key bindings that have associated descriptions

  4255. 			for( var binding in registeredKeyBindings ) {

  4256. 				if( registeredKeyBindings[binding].key && registeredKeyBindings[binding].description ) {

  4257. 					html += '<tr><td>' + registeredKeyBindings[binding].key + '</td><td>' + registeredKeyBindings[binding].description + '</td></tr>';

  4258. 				}

  4259. 			}

  4260. 

  4261. 			html += '</table>';

  4262. 

  4263. 			dom.overlay.innerHTML = [

  4264. 				'<header>',

  4265. 					'<a class="close" href="#"><span class="icon"></span></a>',

  4266. 				'</header>',

  4267. 				'<div class="viewport">',

  4268. 					'<div class="viewport-inner">'+ html +'</div>',

  4269. 				'</div>'

  4270. 			].join('');

  4271. 

  4272. 			dom.overlay.querySelector( '.close' ).addEventListener( 'click', function( event ) {

  4273. 				closeOverlay();

  4274. 				event.preventDefault();

  4275. 			}, false );

  4276. 

  4277. 			setTimeout( function() {

  4278. 				dom.overlay.classList.add( 'visible' );

  4279. 			}, 1 );

  4280. 

  4281. 		}

  4282. 

  4283. 	}

  4284. 

  4285. 	/**

  4286. 	 * Closes any currently open overlay.

  4287. 	 */

  4288. 	function closeOverlay() {

  4289. 

  4290. 		if( dom.overlay ) {

  4291. 			dom.overlay.parentNode.removeChild( dom.overlay );

  4292. 			dom.overlay = null;

  4293. 		}

  4294. 

  4295. 	}

  4296. 

  4297. 	/**

  4298. 	 * Applies JavaScript-controlled layout rules to the

  4299. 	 * presentation.

  4300. 	 */

  4301. 	function layout() {

  4302. 

  4303. 		if( dom.wrapper && !isPrintingPDF() ) {

  4304. 

  4305. 			if( !config.disableLayout ) {

  4306. 

  4307. 				// On some mobile devices '100vh' is taller than the visible

  4308. 				// viewport which leads to part of the presentation being

  4309. 				// cut off. To work around this we define our own '--vh' custom

  4310. 				// property where 100x adds up to the correct height.

  4311. 				//

  4312. 				// https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

  4313. 				if( isMobileDevice ) {

  4314. 					document.documentElement.style.setProperty( '--vh', ( window.innerHeight * 0.01 ) + 'px' );

  4315. 				}

  4316. 

  4317. 				var size = getComputedSlideSize();

  4318. 

  4319. 				var oldScale = scale;

  4320. 

  4321. 				// Layout the contents of the slides

  4322. 				layoutSlideContents( config.width, config.height );

  4323. 

  4324. 				dom.slides.style.width = size.width + 'px';

  4325. 				dom.slides.style.height = size.height + 'px';

  4326. 

  4327. 				// Determine scale of content to fit within available space

  4328. 				scale = Math.min( size.presentationWidth / size.width, size.presentationHeight / size.height );

  4329. 

  4330. 				// Respect max/min scale settings

  4331. 				scale = Math.max( scale, config.minScale );

  4332. 				scale = Math.min( scale, config.maxScale );

  4333. 

  4334. 				// Don't apply any scaling styles if scale is 1

  4335. 				if( scale === 1 ) {

  4336. 					dom.slides.style.zoom = '';

  4337. 					dom.slides.style.left = '';

  4338. 					dom.slides.style.top = '';

  4339. 					dom.slides.style.bottom = '';

  4340. 					dom.slides.style.right = '';

  4341. 					transformSlides( { layout: '' } );

  4342. 				}

  4343. 				else {

  4344. 					// Prefer zoom for scaling up so that content remains crisp.

  4345. 					// Don't use zoom to scale down since that can lead to shifts

  4346. 					// in text layout/line breaks.

  4347. 					if( scale > 1 && features.zoom ) {

  4348. 						dom.slides.style.zoom = scale;

  4349. 						dom.slides.style.left = '';

  4350. 						dom.slides.style.top = '';

  4351. 						dom.slides.style.bottom = '';

  4352. 						dom.slides.style.right = '';

  4353. 						transformSlides( { layout: '' } );

  4354. 					}

  4355. 					// Apply scale transform as a fallback

  4356. 					else {

  4357. 						dom.slides.style.zoom = '';

  4358. 						dom.slides.style.left = '50%';

  4359. 						dom.slides.style.top = '50%';

  4360. 						dom.slides.style.bottom = 'auto';

  4361. 						dom.slides.style.right = 'auto';

  4362. 						transformSlides( { layout: 'translate(-50%, -50%) scale('+ scale +')' } );

  4363. 					}

  4364. 				}

  4365. 

  4366. 				// Select all slides, vertical and horizontal

  4367. 				var slides = toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) );

  4368. 

  4369. 				for( var i = 0, len = slides.length; i < len; i++ ) {

  4370. 					var slide = slides[ i ];

  4371. 

  4372. 					// Don't bother updating invisible slides

  4373. 					if( slide.style.display === 'none' ) {

  4374. 						continue;

  4375. 					}

  4376. 

  4377. 					if( config.center || slide.classList.contains( 'center' ) ) {

  4378. 						// Vertical stacks are not centred since their section

  4379. 						// children will be

  4380. 						if( slide.classList.contains( 'stack' ) ) {

  4381. 							slide.style.top = 0;

  4382. 						}

  4383. 						else {

  4384. 							slide.style.top = Math.max( ( size.height - slide.scrollHeight ) / 2, 0 ) + 'px';

  4385. 						}

  4386. 					}

  4387. 					else {

  4388. 						slide.style.top = '';

  4389. 					}

  4390. 

  4391. 				}

  4392. 

  4393. 				if( oldScale !== scale ) {

  4394. 					dispatchEvent( 'resize', {

  4395. 						'oldScale': oldScale,

  4396. 						'scale': scale,

  4397. 						'size': size

  4398. 					} );

  4399. 				}

  4400. 			}

  4401. 

  4402. 			updateProgress();

  4403. 			updateParallax();

  4404. 

  4405. 			if( isOverview() ) {

  4406. 				updateOverview();

  4407. 			}

  4408. 

  4409. 		}

  4410. 

  4411. 	}

  4412. 

  4413. 	/**

  4414. 	 * Applies layout logic to the contents of all slides in

  4415. 	 * the presentation.

  4416. 	 *

  4417. 	 * @param {string|number} width

  4418. 	 * @param {string|number} height

  4419. 	 */

  4420. 	function layoutSlideContents( width, height ) {

  4421. 

  4422. 		// Handle sizing of elements with the 'stretch' class

  4423. 		toArray( dom.slides.querySelectorAll( 'section > .stretch' ) ).forEach( function( element ) {

  4424. 

  4425. 			// Determine how much vertical space we can use

  4426. 			var remainingHeight = getRemainingHeight( element, height );

  4427. 

  4428. 			// Consider the aspect ratio of media elements

  4429. 			if( /(img|video)/gi.test( element.nodeName ) ) {

  4430. 				var nw = element.naturalWidth || element.videoWidth,

  4431. 					nh = element.naturalHeight || element.videoHeight;

  4432. 

  4433. 				var es = Math.min( width / nw, remainingHeight / nh );

  4434. 

  4435. 				element.style.width = ( nw * es ) + 'px';

  4436. 				element.style.height = ( nh * es ) + 'px';

  4437. 

  4438. 			}

  4439. 			else {

  4440. 				element.style.width = width + 'px';

  4441. 				element.style.height = remainingHeight + 'px';

  4442. 			}

  4443. 

  4444. 		} );

  4445. 

  4446. 	}

  4447. 

  4448. 	/**

  4449. 	 * Calculates the computed pixel size of our slides. These

  4450. 	 * values are based on the width and height configuration

  4451. 	 * options.

  4452. 	 *

  4453. 	 * @param {number} [presentationWidth=dom.wrapper.offsetWidth]

  4454. 	 * @param {number} [presentationHeight=dom.wrapper.offsetHeight]

  4455. 	 */

  4456. 	function getComputedSlideSize( presentationWidth, presentationHeight ) {

  4457. 

  4458. 		var size = {

  4459. 			// Slide size

  4460. 			width: config.width,

  4461. 			height: config.height,

  4462. 

  4463. 			// Presentation size

  4464. 			presentationWidth: presentationWidth || dom.wrapper.offsetWidth,

  4465. 			presentationHeight: presentationHeight || dom.wrapper.offsetHeight

  4466. 		};

  4467. 

  4468. 		// Reduce available space by margin

  4469. 		size.presentationWidth -= ( size.presentationWidth * config.margin );

  4470. 		size.presentationHeight -= ( size.presentationHeight * config.margin );

  4471. 

  4472. 		// Slide width may be a percentage of available width

  4473. 		if( typeof size.width === 'string' && /%$/.test( size.width ) ) {

  4474. 			size.width = parseInt( size.width, 10 ) / 100 * size.presentationWidth;

  4475. 		}

  4476. 

  4477. 		// Slide height may be a percentage of available height

  4478. 		if( typeof size.height === 'string' && /%$/.test( size.height ) ) {

  4479. 			size.height = parseInt( size.height, 10 ) / 100 * size.presentationHeight;

  4480. 		}

  4481. 

  4482. 		return size;

  4483. 

  4484. 	}

  4485. 

  4486. 	/**

  4487. 	 * Stores the vertical index of a stack so that the same

  4488. 	 * vertical slide can be selected when navigating to and

  4489. 	 * from the stack.

  4490. 	 *

  4491. 	 * @param {HTMLElement} stack The vertical stack element

  4492. 	 * @param {string|number} [v=0] Index to memorize

  4493. 	 */

  4494. 	function setPreviousVerticalIndex( stack, v ) {

  4495. 

  4496. 		if( typeof stack === 'object' && typeof stack.setAttribute === 'function' ) {

  4497. 			stack.setAttribute( 'data-previous-indexv', v || 0 );

  4498. 		}

  4499. 

  4500. 	}

  4501. 

  4502. 	/**

  4503. 	 * Retrieves the vertical index which was stored using

  4504. 	 * #setPreviousVerticalIndex() or 0 if no previous index

  4505. 	 * exists.

  4506. 	 *

  4507. 	 * @param {HTMLElement} stack The vertical stack element

  4508. 	 */

  4509. 	function getPreviousVerticalIndex( stack ) {

  4510. 

  4511. 		if( typeof stack === 'object' && typeof stack.setAttribute === 'function' && stack.classList.contains( 'stack' ) ) {

  4512. 			// Prefer manually defined start-indexv

  4513. 			var attributeName = stack.hasAttribute( 'data-start-indexv' ) ? 'data-start-indexv' : 'data-previous-indexv';

  4514. 

  4515. 			return parseInt( stack.getAttribute( attributeName ) || 0, 10 );

  4516. 		}

  4517. 

  4518. 		return 0;

  4519. 

  4520. 	}

  4521. 

  4522. 	/**

  4523. 	 * Displays the overview of slides (quick nav) by scaling

  4524. 	 * down and arranging all slide elements.

  4525. 	 */

  4526. 	function activateOverview() {

  4527. 

  4528. 		// Only proceed if enabled in config

  4529. 		if( config.overview && !isOverview() ) {

  4530. 

  4531. 			overview = true;

  4532. 

  4533. 			dom.wrapper.classList.add( 'overview' );

  4534. 			dom.wrapper.classList.remove( 'overview-deactivating' );

  4535. 

  4536. 			if( features.overviewTransitions ) {

  4537. 				setTimeout( function() {

  4538. 					dom.wrapper.classList.add( 'overview-animated' );

  4539. 				}, 1 );

  4540. 			}

  4541. 

  4542. 			// Don't auto-slide while in overview mode

  4543. 			cancelAutoSlide();

  4544. 

  4545. 			// Move the backgrounds element into the slide container to

  4546. 			// that the same scaling is applied

  4547. 			dom.slides.appendChild( dom.background );

  4548. 

  4549. 			// Clicking on an overview slide navigates to it

  4550. 			toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ).forEach( function( slide ) {

  4551. 				if( !slide.classList.contains( 'stack' ) ) {

  4552. 					slide.addEventListener( 'click', onOverviewSlideClicked, true );

  4553. 				}

  4554. 			} );

  4555. 

  4556. 			// Calculate slide sizes

  4557. 			var margin = 70;

  4558. 			var slideSize = getComputedSlideSize();

  4559. 			overviewSlideWidth = slideSize.width + margin;

  4560. 			overviewSlideHeight = slideSize.height + margin;

  4561. 

  4562. 			// Reverse in RTL mode

  4563. 			if( config.rtl ) {

  4564. 				overviewSlideWidth = -overviewSlideWidth;

  4565. 			}

  4566. 

  4567. 			updateSlidesVisibility();

  4568. 			layoutOverview();

  4569. 			updateOverview();

  4570. 

  4571. 			layout();

  4572. 

  4573. 			// Notify observers of the overview showing

  4574. 			dispatchEvent( 'overviewshown', {

  4575. 				'indexh': indexh,

  4576. 				'indexv': indexv,

  4577. 				'currentSlide': currentSlide

  4578. 			} );

  4579. 

  4580. 		}

  4581. 

  4582. 	}

  4583. 

  4584. 	/**

  4585. 	 * Uses CSS transforms to position all slides in a grid for

  4586. 	 * display inside of the overview mode.

  4587. 	 */

  4588. 	function layoutOverview() {

  4589. 

  4590. 		// Layout slides

  4591. 		toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( hslide, h ) {

  4592. 			hslide.setAttribute( 'data-index-h', h );

  4593. 			transformElement( hslide, 'translate3d(' + ( h * overviewSlideWidth ) + 'px, 0, 0)' );

  4594. 

  4595. 			if( hslide.classList.contains( 'stack' ) ) {

  4596. 

  4597. 				toArray( hslide.querySelectorAll( 'section' ) ).forEach( function( vslide, v ) {

  4598. 					vslide.setAttribute( 'data-index-h', h );

  4599. 					vslide.setAttribute( 'data-index-v', v );

  4600. 

  4601. 					transformElement( vslide, 'translate3d(0, ' + ( v * overviewSlideHeight ) + 'px, 0)' );

  4602. 				} );

  4603. 

  4604. 			}

  4605. 		} );

  4606. 

  4607. 		// Layout slide backgrounds

  4608. 		toArray( dom.background.childNodes ).forEach( function( hbackground, h ) {

  4609. 			transformElement( hbackground, 'translate3d(' + ( h * overviewSlideWidth ) + 'px, 0, 0)' );

  4610. 

  4611. 			toArray( hbackground.querySelectorAll( '.slide-background' ) ).forEach( function( vbackground, v ) {

  4612. 				transformElement( vbackground, 'translate3d(0, ' + ( v * overviewSlideHeight ) + 'px, 0)' );

  4613. 			} );

  4614. 		} );

  4615. 

  4616. 	}

  4617. 

  4618. 	/**

  4619. 	 * Moves the overview viewport to the current slides.

  4620. 	 * Called each time the current slide changes.

  4621. 	 */

  4622. 	function updateOverview() {

  4623. 

  4624. 		var vmin = Math.min( window.innerWidth, window.innerHeight );

  4625. 		var scale = Math.max( vmin / 5, 150 ) / vmin;

  4626. 

  4627. 		transformSlides( {

  4628. 			overview: [

  4629. 				'scale('+ scale +')',

  4630. 				'translateX('+ ( -indexh * overviewSlideWidth ) +'px)',

  4631. 				'translateY('+ ( -indexv * overviewSlideHeight ) +'px)'

  4632. 			].join( ' ' )

  4633. 		} );

  4634. 

  4635. 	}

  4636. 

  4637. 	/**

  4638. 	 * Exits the slide overview and enters the currently

  4639. 	 * active slide.

  4640. 	 */

  4641. 	function deactivateOverview() {

  4642. 

  4643. 		// Only proceed if enabled in config

  4644. 		if( config.overview ) {

  4645. 

  4646. 			overview = false;

  4647. 

  4648. 			dom.wrapper.classList.remove( 'overview' );

  4649. 			dom.wrapper.classList.remove( 'overview-animated' );

  4650. 

  4651. 			// Temporarily add a class so that transitions can do different things

  4652. 			// depending on whether they are exiting/entering overview, or just

  4653. 			// moving from slide to slide

  4654. 			dom.wrapper.classList.add( 'overview-deactivating' );

  4655. 

  4656. 			setTimeout( function () {

  4657. 				dom.wrapper.classList.remove( 'overview-deactivating' );

  4658. 			}, 1 );

  4659. 

  4660. 			// Move the background element back out

  4661. 			dom.wrapper.appendChild( dom.background );

  4662. 

  4663. 			// Clean up changes made to slides

  4664. 			toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ).forEach( function( slide ) {

  4665. 				transformElement( slide, '' );

  4666. 

  4667. 				slide.removeEventListener( 'click', onOverviewSlideClicked, true );

  4668. 			} );

  4669. 

  4670. 			// Clean up changes made to backgrounds

  4671. 			toArray( dom.background.querySelectorAll( '.slide-background' ) ).forEach( function( background ) {

  4672. 				transformElement( background, '' );

  4673. 			} );

  4674. 

  4675. 			transformSlides( { overview: '' } );

  4676. 

  4677. 			slide( indexh, indexv );

  4678. 

  4679. 			layout();

  4680. 

  4681. 			cueAutoSlide();

  4682. 

  4683. 			// Notify observers of the overview hiding

  4684. 			dispatchEvent( 'overviewhidden', {

  4685. 				'indexh': indexh,

  4686. 				'indexv': indexv,

  4687. 				'currentSlide': currentSlide

  4688. 			} );

  4689. 

  4690. 		}

  4691. 	}

  4692. 

  4693. 	/**

  4694. 	 * Toggles the slide overview mode on and off.

  4695. 	 *

  4696. 	 * @param {Boolean} [override] Flag which overrides the

  4697. 	 * toggle logic and forcibly sets the desired state. True means

  4698. 	 * overview is open, false means it's closed.

  4699. 	 */

  4700. 	function toggleOverview( override ) {

  4701. 

  4702. 		if( typeof override === 'boolean' ) {

  4703. 			override ? activateOverview() : deactivateOverview();

  4704. 		}

  4705. 		else {

  4706. 			isOverview() ? deactivateOverview() : activateOverview();

  4707. 		}

  4708. 

  4709. 	}

  4710. 

  4711. 	/**

  4712. 	 * Checks if the overview is currently active.

  4713. 	 *

  4714. 	 * @return {Boolean} true if the overview is active,

  4715. 	 * false otherwise

  4716. 	 */

  4717. 	function isOverview() {

  4718. 

  4719. 		return overview;

  4720. 

  4721. 	}

  4722. 

  4723. 	/**

  4724. 	 * Return a hash URL that will resolve to the current slide location.

  4725. 	 */

  4726. 	function locationHash() {

  4727. 

  4728. 		var url = '/';

  4729. 

  4730. 		// Attempt to create a named link based on the slide's ID

  4731. 		var id = currentSlide ? currentSlide.getAttribute( 'id' ) : null;

  4732. 		if( id ) {

  4733. 			id = encodeURIComponent( id );

  4734. 		}

  4735. 

  4736. 		var indexf;

  4737. 		if( config.fragmentInURL ) {

  4738. 			indexf = getIndices().f;

  4739. 		}

  4740. 

  4741. 		// If the current slide has an ID, use that as a named link,

  4742. 		// but we don't support named links with a fragment index

  4743. 		if( typeof id === 'string' && id.length && indexf === undefined ) {

  4744. 			url = '/' + id;

  4745. 		}

  4746. 		// Otherwise use the /h/v index

  4747. 		else {

  4748. 			var hashIndexBase = config.hashOneBasedIndex ? 1 : 0;

  4749. 			if( indexh > 0 || indexv > 0 || indexf !== undefined ) url += indexh + hashIndexBase;

  4750. 			if( indexv > 0 || indexf !== undefined ) url += '/' + (indexv + hashIndexBase );

  4751. 			if( indexf !== undefined ) url += '/' + indexf;

  4752. 		}

  4753. 

  4754. 		return url;

  4755. 

  4756. 	}

  4757. 

  4758. 	/**

  4759. 	 * Checks if the current or specified slide is vertical

  4760. 	 * (nested within another slide).

  4761. 	 *

  4762. 	 * @param {HTMLElement} [slide=currentSlide] The slide to check

  4763. 	 * orientation of

  4764. 	 * @return {Boolean}

  4765. 	 */

  4766. 	function isVerticalSlide( slide ) {

  4767. 

  4768. 		// Prefer slide argument, otherwise use current slide

  4769. 		slide = slide ? slide : currentSlide;

  4770. 

  4771. 		return slide && slide.parentNode && !!slide.parentNode.nodeName.match( /section/i );

  4772. 

  4773. 	}

  4774. 

  4775. 	/**

  4776. 	 * Handling the fullscreen functionality via the fullscreen API

  4777. 	 *

  4778. 	 * @see http://fullscreen.spec.whatwg.org/

  4779. 	 * @see https://developer.mozilla.org/en-US/docs/DOM/Using_fullscreen_mode

  4780. 	 */

  4781. 	function enterFullscreen() {

  4782. 

  4783. 		var element = document.documentElement;

  4784. 

  4785. 		// Check which implementation is available

  4786. 		var requestMethod = element.requestFullscreen ||

  4787. 							element.webkitRequestFullscreen ||

  4788. 							element.webkitRequestFullScreen ||

  4789. 							element.mozRequestFullScreen ||

  4790. 							element.msRequestFullscreen;

  4791. 

  4792. 		if( requestMethod ) {

  4793. 			requestMethod.apply( element );

  4794. 		}

  4795. 

  4796. 	}

  4797. 

  4798. 	/**

  4799. 	 * Shows the mouse pointer after it has been hidden with

  4800. 	 * #hideCursor.

  4801. 	 */

  4802. 	function showCursor() {

  4803. 

  4804. 		if( cursorHidden ) {

  4805. 			cursorHidden = false;

  4806. 			dom.wrapper.style.cursor = '';

  4807. 		}

  4808. 

  4809. 	}

  4810. 

  4811. 	/**

  4812. 	 * Hides the mouse pointer when it's on top of the .reveal

  4813. 	 * container.

  4814. 	 */

  4815. 	function hideCursor() {

  4816. 

  4817. 		if( cursorHidden === false ) {

  4818. 			cursorHidden = true;

  4819. 			dom.wrapper.style.cursor = 'none';

  4820. 		}

  4821. 

  4822. 	}

  4823. 

  4824. 	/**

  4825. 	 * Enters the paused mode which fades everything on screen to

  4826. 	 * black.

  4827. 	 */

  4828. 	function pause() {

  4829. 

  4830. 		if( config.pause ) {

  4831. 			var wasPaused = dom.wrapper.classList.contains( 'paused' );

  4832. 

  4833. 			cancelAutoSlide();

  4834. 			dom.wrapper.classList.add( 'paused' );

  4835. 

  4836. 			if( wasPaused === false ) {

  4837. 				dispatchEvent( 'paused' );

  4838. 			}

  4839. 		}

  4840. 

  4841. 	}

  4842. 

  4843. 	/**

  4844. 	 * Exits from the paused mode.

  4845. 	 */

  4846. 	function resume() {

  4847. 

  4848. 		var wasPaused = dom.wrapper.classList.contains( 'paused' );

  4849. 		dom.wrapper.classList.remove( 'paused' );

  4850. 

  4851. 		cueAutoSlide();

  4852. 

  4853. 		if( wasPaused ) {

  4854. 			dispatchEvent( 'resumed' );

  4855. 		}

  4856. 

  4857. 	}

  4858. 

  4859. 	/**

  4860. 	 * Toggles the paused mode on and off.

  4861. 	 */

  4862. 	function togglePause( override ) {

  4863. 

  4864. 		if( typeof override === 'boolean' ) {

  4865. 			override ? pause() : resume();

  4866. 		}

  4867. 		else {

  4868. 			isPaused() ? resume() : pause();

  4869. 		}

  4870. 

  4871. 	}

  4872. 

  4873. 	/**

  4874. 	 * Checks if we are currently in the paused mode.

  4875. 	 *

  4876. 	 * @return {Boolean}

  4877. 	 */

  4878. 	function isPaused() {

  4879. 

  4880. 		return dom.wrapper.classList.contains( 'paused' );

  4881. 

  4882. 	}

  4883. 

  4884. 	/**

  4885. 	 * Toggles the auto slide mode on and off.

  4886. 	 *

  4887. 	 * @param {Boolean} [override] Flag which sets the desired state.

  4888. 	 * True means autoplay starts, false means it stops.

  4889. 	 */

  4890. 

  4891. 	function toggleAutoSlide( override ) {

  4892. 

  4893. 		if( typeof override === 'boolean' ) {

  4894. 			override ? resumeAutoSlide() : pauseAutoSlide();

  4895. 		}

  4896. 

  4897. 		else {

  4898. 			autoSlidePaused ? resumeAutoSlide() : pauseAutoSlide();

  4899. 		}

  4900. 

  4901. 	}

  4902. 

  4903. 	/**

  4904. 	 * Checks if the auto slide mode is currently on.

  4905. 	 *

  4906. 	 * @return {Boolean}

  4907. 	 */

  4908. 	function isAutoSliding() {

  4909. 

  4910. 		return !!( autoSlide && !autoSlidePaused );

  4911. 

  4912. 	}

  4913. 

  4914. 	/**

  4915. 	 * Steps from the current point in the presentation to the

  4916. 	 * slide which matches the specified horizontal and vertical

  4917. 	 * indices.

  4918. 	 *

  4919. 	 * @param {number} [h=indexh] Horizontal index of the target slide

  4920. 	 * @param {number} [v=indexv] Vertical index of the target slide

  4921. 	 * @param {number} [f] Index of a fragment within the

  4922. 	 * target slide to activate

  4923. 	 * @param {number} [o] Origin for use in multimaster environments

  4924. 	 */

  4925. 	function slide( h, v, f, o ) {

  4926. 

  4927. 		// Remember where we were at before

  4928. 		previousSlide = currentSlide;

  4929. 

  4930. 		// Query all horizontal slides in the deck

  4931. 		var horizontalSlides = dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR );

  4932. 

  4933. 		// Abort if there are no slides

  4934. 		if( horizontalSlides.length === 0 ) return;

  4935. 

  4936. 		// If no vertical index is specified and the upcoming slide is a

  4937. 		// stack, resume at its previous vertical index

  4938. 		if( v === undefined && !isOverview() ) {

  4939. 			v = getPreviousVerticalIndex( horizontalSlides[ h ] );

  4940. 		}

  4941. 

  4942. 		// If we were on a vertical stack, remember what vertical index

  4943. 		// it was on so we can resume at the same position when returning

  4944. 		if( previousSlide && previousSlide.parentNode && previousSlide.parentNode.classList.contains( 'stack' ) ) {

  4945. 			setPreviousVerticalIndex( previousSlide.parentNode, indexv );

  4946. 		}

  4947. 

  4948. 		// Remember the state before this slide

  4949. 		var stateBefore = state.concat();

  4950. 

  4951. 		// Reset the state array

  4952. 		state.length = 0;

  4953. 

  4954. 		var indexhBefore = indexh || 0,

  4955. 			indexvBefore = indexv || 0;

  4956. 

  4957. 		// Activate and transition to the new slide

  4958. 		indexh = updateSlides( HORIZONTAL_SLIDES_SELECTOR, h === undefined ? indexh : h );

  4959. 		indexv = updateSlides( VERTICAL_SLIDES_SELECTOR, v === undefined ? indexv : v );

  4960. 

  4961. 		// Update the visibility of slides now that the indices have changed

  4962. 		updateSlidesVisibility();

  4963. 

  4964. 		layout();

  4965. 

  4966. 		// Update the overview if it's currently active

  4967. 		if( isOverview() ) {

  4968. 			updateOverview();

  4969. 		}

  4970. 

  4971. 		// Find the current horizontal slide and any possible vertical slides

  4972. 		// within it

  4973. 		var currentHorizontalSlide = horizontalSlides[ indexh ],

  4974. 			currentVerticalSlides = currentHorizontalSlide.querySelectorAll( 'section' );

  4975. 

  4976. 		// Store references to the previous and current slides

  4977. 		currentSlide = currentVerticalSlides[ indexv ] || currentHorizontalSlide;

  4978. 

  4979. 		// Show fragment, if specified

  4980. 		if( typeof f !== 'undefined' ) {

  4981. 			navigateFragment( f );

  4982. 		}

  4983. 

  4984. 		// Dispatch an event if the slide changed

  4985. 		var slideChanged = ( indexh !== indexhBefore || indexv !== indexvBefore );

  4986. 		if (!slideChanged) {

  4987. 			// Ensure that the previous slide is never the same as the current

  4988. 			previousSlide = null;

  4989. 		}

  4990. 

  4991. 		// Solves an edge case where the previous slide maintains the

  4992. 		// 'present' class when navigating between adjacent vertical

  4993. 		// stacks

  4994. 		if( previousSlide && previousSlide !== currentSlide ) {

  4995. 			previousSlide.classList.remove( 'present' );

  4996. 			previousSlide.setAttribute( 'aria-hidden', 'true' );

  4997. 

  4998. 			// Reset all slides upon navigate to home

  4999. 			// Issue: #285

  5000. 			if ( dom.wrapper.querySelector( HOME_SLIDE_SELECTOR ).classList.contains( 'present' ) ) {

  5001. 				// Launch async task

  5002. 				setTimeout( function () {

  5003. 					var slides = toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR + '.stack') ), i;

  5004. 					for( i in slides ) {

  5005. 						if( slides[i] ) {

  5006. 							// Reset stack

  5007. 							setPreviousVerticalIndex( slides[i], 0 );

  5008. 						}

  5009. 					}

  5010. 				}, 0 );

  5011. 			}

  5012. 		}

  5013. 

  5014. 		// Apply the new state

  5015. 		stateLoop: for( var i = 0, len = state.length; i < len; i++ ) {

  5016. 			// Check if this state existed on the previous slide. If it

  5017. 			// did, we will avoid adding it repeatedly

  5018. 			for( var j = 0; j < stateBefore.length; j++ ) {

  5019. 				if( stateBefore[j] === state[i] ) {

  5020. 					stateBefore.splice( j, 1 );

  5021. 					continue stateLoop;

  5022. 				}

  5023. 			}

  5024. 

  5025. 			document.documentElement.classList.add( state[i] );

  5026. 

  5027. 			// Dispatch custom event matching the state's name

  5028. 			dispatchEvent( state[i] );

  5029. 		}

  5030. 

  5031. 		// Clean up the remains of the previous state

  5032. 		while( stateBefore.length ) {

  5033. 			document.documentElement.classList.remove( stateBefore.pop() );

  5034. 		}

  5035. 

  5036. 		if( slideChanged ) {

  5037. 			dispatchEvent( 'slidechanged', {

  5038. 				'indexh': indexh,

  5039. 				'indexv': indexv,

  5040. 				'previousSlide': previousSlide,

  5041. 				'currentSlide': currentSlide,

  5042. 				'origin': o

  5043. 			} );

  5044. 		}

  5045. 

  5046. 		// Handle embedded content

  5047. 		if( slideChanged || !previousSlide ) {

  5048. 			stopEmbeddedContent( previousSlide );

  5049. 			startEmbeddedContent( currentSlide );

  5050. 		}

  5051. 

  5052. 		// Announce the current slide contents, for screen readers

  5053. 		dom.statusDiv.textContent = getStatusText( currentSlide );

  5054. 

  5055. 		updateControls();

  5056. 		updateProgress();

  5057. 		updateBackground();

  5058. 		updateParallax();

  5059. 		updateSlideNumber();

  5060. 		updateNotes();

  5061. 		updateFragments();

  5062. 

  5063. 		// Update the URL hash

  5064. 		writeURL();

  5065. 

  5066. 		cueAutoSlide();

  5067. 

  5068. 	}

  5069. 

  5070. 	/**

  5071. 	 * Syncs the presentation with the current DOM. Useful

  5072. 	 * when new slides or control elements are added or when

  5073. 	 * the configuration has changed.

  5074. 	 */

  5075. 	function sync() {

  5076. 

  5077. 		// Subscribe to input

  5078. 		removeEventListeners();

  5079. 		addEventListeners();

  5080. 

  5081. 		// Force a layout to make sure the current config is accounted for

  5082. 		layout();

  5083. 

  5084. 		// Reflect the current autoSlide value

  5085. 		autoSlide = config.autoSlide;

  5086. 

  5087. 		// Start auto-sliding if it's enabled

  5088. 		cueAutoSlide();

  5089. 

  5090. 		// Re-create the slide backgrounds

  5091. 		createBackgrounds();

  5092. 

  5093. 		// Write the current hash to the URL

  5094. 		writeURL();

  5095. 

  5096. 		sortAllFragments();

  5097. 

  5098. 		updateControls();

  5099. 		updateProgress();

  5100. 		updateSlideNumber();

  5101. 		updateSlidesVisibility();

  5102. 		updateBackground( true );

  5103. 		updateNotesVisibility();

  5104. 		updateNotes();

  5105. 

  5106. 		formatEmbeddedContent();

  5107. 

  5108. 		// Start or stop embedded content depending on global config

  5109. 		if( config.autoPlayMedia === false ) {

  5110. 			stopEmbeddedContent( currentSlide, { unloadIframes: false } );

  5111. 		}

  5112. 		else {

  5113. 			startEmbeddedContent( currentSlide );

  5114. 		}

  5115. 

  5116. 		if( isOverview() ) {

  5117. 			layoutOverview();

  5118. 		}

  5119. 

  5120. 	}

  5121. 

  5122. 	/**

  5123. 	 * Updates reveal.js to keep in sync with new slide attributes. For

  5124. 	 * example, if you add a new `data-background-image` you can call

  5125. 	 * this to have reveal.js render the new background image.

  5126. 	 *

  5127. 	 * Similar to #sync() but more efficient when you only need to

  5128. 	 * refresh a specific slide.

  5129. 	 *

  5130. 	 * @param {HTMLElement} slide

  5131. 	 */

  5132. 	function syncSlide( slide ) {

  5133. 

  5134. 		// Default to the current slide

  5135. 		slide = slide || currentSlide;

  5136. 

  5137. 		syncBackground( slide );

  5138. 		syncFragments( slide );

  5139. 

  5140. 		updateBackground();

  5141. 		updateNotes();

  5142. 

  5143. 		loadSlide( slide );

  5144. 

  5145. 	}

  5146. 

  5147. 	/**

  5148. 	 * Formats the fragments on the given slide so that they have

  5149. 	 * valid indices. Call this if fragments are changed in the DOM

  5150. 	 * after reveal.js has already initialized.

  5151. 	 *

  5152. 	 * @param {HTMLElement} slide

  5153. 	 * @return {Array} a list of the HTML fragments that were synced

  5154. 	 */

  5155. 	function syncFragments( slide ) {

  5156. 

  5157. 		// Default to the current slide

  5158. 		slide = slide || currentSlide;

  5159. 

  5160. 		return sortFragments( slide.querySelectorAll( '.fragment' ) );

  5161. 

  5162. 	}

  5163. 

  5164. 	/**

  5165. 	 * Resets all vertical slides so that only the first

  5166. 	 * is visible.

  5167. 	 */

  5168. 	function resetVerticalSlides() {

  5169. 

  5170. 		var horizontalSlides = toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) );

  5171. 		horizontalSlides.forEach( function( horizontalSlide ) {

  5172. 

  5173. 			var verticalSlides = toArray( horizontalSlide.querySelectorAll( 'section' ) );

  5174. 			verticalSlides.forEach( function( verticalSlide, y ) {

  5175. 

  5176. 				if( y > 0 ) {

  5177. 					verticalSlide.classList.remove( 'present' );

  5178. 					verticalSlide.classList.remove( 'past' );

  5179. 					verticalSlide.classList.add( 'future' );

  5180. 					verticalSlide.setAttribute( 'aria-hidden', 'true' );

  5181. 				}

  5182. 

  5183. 			} );

  5184. 

  5185. 		} );

  5186. 

  5187. 	}

  5188. 

  5189. 	/**

  5190. 	 * Sorts and formats all of fragments in the

  5191. 	 * presentation.

  5192. 	 */

  5193. 	function sortAllFragments() {

  5194. 

  5195. 		var horizontalSlides = toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) );

  5196. 		horizontalSlides.forEach( function( horizontalSlide ) {

  5197. 

  5198. 			var verticalSlides = toArray( horizontalSlide.querySelectorAll( 'section' ) );

  5199. 			verticalSlides.forEach( function( verticalSlide, y ) {

  5200. 

  5201. 				sortFragments( verticalSlide.querySelectorAll( '.fragment' ) );

  5202. 

  5203. 			} );

  5204. 

  5205. 			if( verticalSlides.length === 0 ) sortFragments( horizontalSlide.querySelectorAll( '.fragment' ) );

  5206. 

  5207. 		} );

  5208. 

  5209. 	}

  5210. 

  5211. 	/**

  5212. 	 * Randomly shuffles all slides in the deck.

  5213. 	 */

  5214. 	function shuffle() {

  5215. 

  5216. 		var slides = toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) );

  5217. 

  5218. 		slides.forEach( function( slide ) {

  5219. 

  5220. 			// Insert this slide next to another random slide. This may

  5221. 			// cause the slide to insert before itself but that's fine.

  5222. 			dom.slides.insertBefore( slide, slides[ Math.floor( Math.random() * slides.length ) ] );

  5223. 

  5224. 		} );

  5225. 

  5226. 	}

  5227. 

  5228. 	/**

  5229. 	 * Updates one dimension of slides by showing the slide

  5230. 	 * with the specified index.

  5231. 	 *

  5232. 	 * @param {string} selector A CSS selector that will fetch

  5233. 	 * the group of slides we are working with

  5234. 	 * @param {number} index The index of the slide that should be

  5235. 	 * shown

  5236. 	 *

  5237. 	 * @return {number} The index of the slide that is now shown,

  5238. 	 * might differ from the passed in index if it was out of

  5239. 	 * bounds.

  5240. 	 */

  5241. 	function updateSlides( selector, index ) {

  5242. 

  5243. 		// Select all slides and convert the NodeList result to

  5244. 		// an array

  5245. 		var slides = toArray( dom.wrapper.querySelectorAll( selector ) ),

  5246. 			slidesLength = slides.length;

  5247. 

  5248. 		var printMode = isPrintingPDF();

  5249. 

  5250. 		if( slidesLength ) {

  5251. 

  5252. 			// Should the index loop?

  5253. 			if( config.loop ) {

  5254. 				index %= slidesLength;

  5255. 

  5256. 				if( index < 0 ) {

  5257. 					index = slidesLength + index;

  5258. 				}

  5259. 			}

  5260. 

  5261. 			// Enforce max and minimum index bounds

  5262. 			index = Math.max( Math.min( index, slidesLength - 1 ), 0 );

  5263. 

  5264. 			for( var i = 0; i < slidesLength; i++ ) {

  5265. 				var element = slides[i];

  5266. 

  5267. 				var reverse = config.rtl && !isVerticalSlide( element );

  5268. 

  5269. 				element.classList.remove( 'past' );

  5270. 				element.classList.remove( 'present' );

  5271. 				element.classList.remove( 'future' );

  5272. 

  5273. 				// http://www.w3.org/html/wg/drafts/html/master/editing.html#the-hidden-attribute

  5274. 				element.setAttribute( 'hidden', '' );

  5275. 				element.setAttribute( 'aria-hidden', 'true' );

  5276. 

  5277. 				// If this element contains vertical slides

  5278. 				if( element.querySelector( 'section' ) ) {

  5279. 					element.classList.add( 'stack' );

  5280. 				}

  5281. 

  5282. 				// If we're printing static slides, all slides are "present"

  5283. 				if( printMode ) {

  5284. 					element.classList.add( 'present' );

  5285. 					continue;

  5286. 				}

  5287. 

  5288. 				if( i < index ) {

  5289. 					// Any element previous to index is given the 'past' class

  5290. 					element.classList.add( reverse ? 'future' : 'past' );

  5291. 

  5292. 					if( config.fragments ) {

  5293. 						// Show all fragments in prior slides

  5294. 						toArray( element.querySelectorAll( '.fragment' ) ).forEach( function( fragment ) {

  5295. 							fragment.classList.add( 'visible' );

  5296. 							fragment.classList.remove( 'current-fragment' );

  5297. 						} );

  5298. 					}

  5299. 				}

  5300. 				else if( i > index ) {

  5301. 					// Any element subsequent to index is given the 'future' class

  5302. 					element.classList.add( reverse ? 'past' : 'future' );

  5303. 

  5304. 					if( config.fragments ) {

  5305. 						// Hide all fragments in future slides

  5306. 						toArray( element.querySelectorAll( '.fragment.visible' ) ).forEach( function( fragment ) {

  5307. 							fragment.classList.remove( 'visible' );

  5308. 							fragment.classList.remove( 'current-fragment' );

  5309. 						} );

  5310. 					}

  5311. 				}

  5312. 			}

  5313. 

  5314. 			// Mark the current slide as present

  5315. 			slides[index].classList.add( 'present' );

  5316. 			slides[index].removeAttribute( 'hidden' );

  5317. 			slides[index].removeAttribute( 'aria-hidden' );

  5318. 

  5319. 			// If this slide has a state associated with it, add it

  5320. 			// onto the current state of the deck

  5321. 			var slideState = slides[index].getAttribute( 'data-state' );

  5322. 			if( slideState ) {

  5323. 				state = state.concat( slideState.split( ' ' ) );

  5324. 			}

  5325. 

  5326. 		}

  5327. 		else {

  5328. 			// Since there are no slides we can't be anywhere beyond the

  5329. 			// zeroth index

  5330. 			index = 0;

  5331. 		}

  5332. 

  5333. 		return index;

  5334. 

  5335. 	}

  5336. 

  5337. 	/**

  5338. 	 * Optimization method; hide all slides that are far away

  5339. 	 * from the present slide.

  5340. 	 */

  5341. 	function updateSlidesVisibility() {

  5342. 

  5343. 		// Select all slides and convert the NodeList result to

  5344. 		// an array

  5345. 		var horizontalSlides = toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ),

  5346. 			horizontalSlidesLength = horizontalSlides.length,

  5347. 			distanceX,

  5348. 			distanceY;

  5349. 

  5350. 		if( horizontalSlidesLength && typeof indexh !== 'undefined' ) {

  5351. 

  5352. 			// The number of steps away from the present slide that will

  5353. 			// be visible

  5354. 			var viewDistance = isOverview() ? 10 : config.viewDistance;

  5355. 

  5356. 			// Limit view distance on weaker devices

  5357. 			if( isMobileDevice ) {

  5358. 				viewDistance = isOverview() ? 6 : 2;

  5359. 			}

  5360. 

  5361. 			// All slides need to be visible when exporting to PDF

  5362. 			if( isPrintingPDF() ) {

  5363. 				viewDistance = Number.MAX_VALUE;

  5364. 			}

  5365. 

  5366. 			for( var x = 0; x < horizontalSlidesLength; x++ ) {

  5367. 				var horizontalSlide = horizontalSlides[x];

  5368. 

  5369. 				var verticalSlides = toArray( horizontalSlide.querySelectorAll( 'section' ) ),

  5370. 					verticalSlidesLength = verticalSlides.length;

  5371. 

  5372. 				// Determine how far away this slide is from the present

  5373. 				distanceX = Math.abs( ( indexh || 0 ) - x ) || 0;

  5374. 

  5375. 				// If the presentation is looped, distance should measure

  5376. 				// 1 between the first and last slides

  5377. 				if( config.loop ) {

  5378. 					distanceX = Math.abs( ( ( indexh || 0 ) - x ) % ( horizontalSlidesLength - viewDistance ) ) || 0;

  5379. 				}

  5380. 

  5381. 				// Show the horizontal slide if it's within the view distance

  5382. 				if( distanceX < viewDistance ) {

  5383. 					loadSlide( horizontalSlide );

  5384. 				}

  5385. 				else {

  5386. 					unloadSlide( horizontalSlide );

  5387. 				}

  5388. 

  5389. 				if( verticalSlidesLength ) {

  5390. 

  5391. 					var oy = getPreviousVerticalIndex( horizontalSlide );

  5392. 

  5393. 					for( var y = 0; y < verticalSlidesLength; y++ ) {

  5394. 						var verticalSlide = verticalSlides[y];

  5395. 

  5396. 						distanceY = x === ( indexh || 0 ) ? Math.abs( ( indexv || 0 ) - y ) : Math.abs( y - oy );

  5397. 

  5398. 						if( distanceX + distanceY < viewDistance ) {

  5399. 							loadSlide( verticalSlide );

  5400. 						}

  5401. 						else {

  5402. 							unloadSlide( verticalSlide );

  5403. 						}

  5404. 					}

  5405. 

  5406. 				}

  5407. 			}

  5408. 

  5409. 			// Flag if there are ANY vertical slides, anywhere in the deck

  5410. 			if( dom.wrapper.querySelectorAll( '.slides>section>section' ).length ) {

  5411. 				dom.wrapper.classList.add( 'has-vertical-slides' );

  5412. 			}

  5413. 			else {

  5414. 				dom.wrapper.classList.remove( 'has-vertical-slides' );

  5415. 			}

  5416. 

  5417. 			// Flag if there are ANY horizontal slides, anywhere in the deck

  5418. 			if( dom.wrapper.querySelectorAll( '.slides>section' ).length > 1 ) {

  5419. 				dom.wrapper.classList.add( 'has-horizontal-slides' );

  5420. 			}

  5421. 			else {

  5422. 				dom.wrapper.classList.remove( 'has-horizontal-slides' );

  5423. 			}

  5424. 

  5425. 		}

  5426. 

  5427. 	}

  5428. 

  5429. 	/**

  5430. 	 * Pick up notes from the current slide and display them

  5431. 	 * to the viewer.

  5432. 	 *

  5433. 	 * @see {@link config.showNotes}

  5434. 	 */

  5435. 	function updateNotes() {

  5436. 

  5437. 		if( config.showNotes && dom.speakerNotes && currentSlide && !isPrintingPDF() ) {

  5438. 

  5439. 			dom.speakerNotes.innerHTML = getSlideNotes() || '<span class="notes-placeholder">No notes on this slide.</span>';

  5440. 

  5441. 		}

  5442. 

  5443. 	}

  5444. 

  5445. 	/**

  5446. 	 * Updates the visibility of the speaker notes sidebar that

  5447. 	 * is used to share annotated slides. The notes sidebar is

  5448. 	 * only visible if showNotes is true and there are notes on

  5449. 	 * one or more slides in the deck.

  5450. 	 */

  5451. 	function updateNotesVisibility() {

  5452. 

  5453. 		if( config.showNotes && hasNotes() ) {

  5454. 			dom.wrapper.classList.add( 'show-notes' );

  5455. 		}

  5456. 		else {

  5457. 			dom.wrapper.classList.remove( 'show-notes' );

  5458. 		}

  5459. 

  5460. 	}

  5461. 

  5462. 	/**

  5463. 	 * Checks if there are speaker notes for ANY slide in the

  5464. 	 * presentation.

  5465. 	 */

  5466. 	function hasNotes() {

  5467. 

  5468. 		return dom.slides.querySelectorAll( '[data-notes], aside.notes' ).length > 0;

  5469. 

  5470. 	}

  5471. 

  5472. 	/**

  5473. 	 * Updates the progress bar to reflect the current slide.

  5474. 	 */

  5475. 	function updateProgress() {

  5476. 

  5477. 		// Update progress if enabled

  5478. 		if( config.progress && dom.progressbar ) {

  5479. 

  5480. 			dom.progressbar.style.width = getProgress() * dom.wrapper.offsetWidth + 'px';

  5481. 

  5482. 		}

  5483. 

  5484. 	}

  5485. 

  5486. 

  5487. 	/**

  5488. 	 * Updates the slide number to match the current slide.

  5489. 	 */

  5490. 	function updateSlideNumber() {

  5491. 

  5492. 		// Update slide number if enabled

  5493. 		if( config.slideNumber && dom.slideNumber ) {

  5494. 

  5495. 			var value;

  5496. 			var format = 'h.v';

  5497. 

  5498. 			if( typeof config.slideNumber === 'function' ) {

  5499. 				value = config.slideNumber();

  5500. 			}

  5501. 			else {

  5502. 				// Check if a custom number format is available

  5503. 				if( typeof config.slideNumber === 'string' ) {

  5504. 					format = config.slideNumber;

  5505. 				}

  5506. 

  5507. 				// If there are ONLY vertical slides in this deck, always use

  5508. 				// a flattened slide number

  5509. 				if( !/c/.test( format ) && dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ).length === 1 ) {

  5510. 					format = 'c';

  5511. 				}

  5512. 

  5513. 				value = [];

  5514. 				switch( format ) {

  5515. 					case 'c':

  5516. 						value.push( getSlidePastCount() + 1 );

  5517. 						break;

  5518. 					case 'c/t':

  5519. 						value.push( getSlidePastCount() + 1, '/', getTotalSlides() );

  5520. 						break;

  5521. 					case 'h/v':

  5522. 						value.push( indexh + 1 );

  5523. 						if( isVerticalSlide() ) value.push( '/', indexv + 1 );

  5524. 						break;

  5525. 					default:

  5526. 						value.push( indexh + 1 );

  5527. 						if( isVerticalSlide() ) value.push( '.', indexv + 1 );

  5528. 				}

  5529. 			}

  5530. 

  5531. 			dom.slideNumber.innerHTML = formatSlideNumber( value[0], value[1], value[2] );

  5532. 		}

  5533. 

  5534. 	}

  5535. 

  5536. 	/**

  5537. 	 * Applies HTML formatting to a slide number before it's

  5538. 	 * written to the DOM.

  5539. 	 *

  5540. 	 * @param {number} a Current slide

  5541. 	 * @param {string} delimiter Character to separate slide numbers

  5542. 	 * @param {(number|*)} b Total slides

  5543. 	 * @return {string} HTML string fragment

  5544. 	 */

  5545. 	function formatSlideNumber( a, delimiter, b ) {

  5546. 

  5547. 		var url = '#' + locationHash();

  5548. 		if( typeof b === 'number' && !isNaN( b ) ) {

  5549. 			return  '<a href="' + url + '">' +

  5550. 					'<span class="slide-number-a">'+ a +'</span>' +

  5551. 					'<span class="slide-number-delimiter">'+ delimiter +'</span>' +

  5552. 					'<span class="slide-number-b">'+ b +'</span>' +

  5553. 					'</a>';

  5554. 		}

  5555. 		else {

  5556. 			return '<a href="' + url + '">' +

  5557. 			       '<span class="slide-number-a">'+ a +'</span>' +

  5558. 			       '</a>';

  5559. 		}

  5560. 

  5561. 	}

  5562. 

  5563. 	/**

  5564. 	 * Updates the state of all control/navigation arrows.

  5565. 	 */

  5566. 	function updateControls() {

  5567. 

  5568. 		var routes = availableRoutes();

  5569. 		var fragments = availableFragments();

  5570. 

  5571. 		// Remove the 'enabled' class from all directions

  5572. 		dom.controlsLeft.concat( dom.controlsRight )

  5573. 						.concat( dom.controlsUp )

  5574. 						.concat( dom.controlsDown )

  5575. 						.concat( dom.controlsPrev )

  5576. 						.concat( dom.controlsNext ).forEach( function( node ) {

  5577. 			node.classList.remove( 'enabled' );

  5578. 			node.classList.remove( 'fragmented' );

  5579. 

  5580. 			// Set 'disabled' attribute on all directions

  5581. 			node.setAttribute( 'disabled', 'disabled' );

  5582. 		} );

  5583. 

  5584. 		// Add the 'enabled' class to the available routes; remove 'disabled' attribute to enable buttons

  5585. 		if( routes.left ) dom.controlsLeft.forEach( function( el ) { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } );

  5586. 		if( routes.right ) dom.controlsRight.forEach( function( el ) { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } );

  5587. 		if( routes.up ) dom.controlsUp.forEach( function( el ) { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } );

  5588. 		if( routes.down ) dom.controlsDown.forEach( function( el ) { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } );

  5589. 

  5590. 		// Prev/next buttons

  5591. 		if( routes.left || routes.up ) dom.controlsPrev.forEach( function( el ) { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } );

  5592. 		if( routes.right || routes.down ) dom.controlsNext.forEach( function( el ) { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } );

  5593. 

  5594. 		// Highlight fragment directions

  5595. 		if( currentSlide ) {

  5596. 

  5597. 			// Always apply fragment decorator to prev/next buttons

  5598. 			if( fragments.prev ) dom.controlsPrev.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );

  5599. 			if( fragments.next ) dom.controlsNext.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );

  5600. 

  5601. 			// Apply fragment decorators to directional buttons based on

  5602. 			// what slide axis they are in

  5603. 			if( isVerticalSlide( currentSlide ) ) {

  5604. 				if( fragments.prev ) dom.controlsUp.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );

  5605. 				if( fragments.next ) dom.controlsDown.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );

  5606. 			}

  5607. 			else {

  5608. 				if( fragments.prev ) dom.controlsLeft.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );

  5609. 				if( fragments.next ) dom.controlsRight.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );

  5610. 			}

  5611. 

  5612. 		}

  5613. 

  5614. 		if( config.controlsTutorial ) {

  5615. 

  5616. 			// Highlight control arrows with an animation to ensure

  5617. 			// that the viewer knows how to navigate

  5618. 			if( !hasNavigatedDown && routes.down ) {

  5619. 				dom.controlsDownArrow.classList.add( 'highlight' );

  5620. 			}

  5621. 			else {

  5622. 				dom.controlsDownArrow.classList.remove( 'highlight' );

  5623. 

  5624. 				if( !hasNavigatedRight && routes.right && indexv === 0 ) {

  5625. 					dom.controlsRightArrow.classList.add( 'highlight' );

  5626. 				}

  5627. 				else {

  5628. 					dom.controlsRightArrow.classList.remove( 'highlight' );

  5629. 				}

  5630. 			}

  5631. 

  5632. 		}

  5633. 

  5634. 	}

  5635. 

  5636. 	/**

  5637. 	 * Updates the background elements to reflect the current

  5638. 	 * slide.

  5639. 	 *

  5640. 	 * @param {boolean} includeAll If true, the backgrounds of

  5641. 	 * all vertical slides (not just the present) will be updated.

  5642. 	 */

  5643. 	function updateBackground( includeAll ) {

  5644. 

  5645. 		var currentBackground = null;

  5646. 

  5647. 		// Reverse past/future classes when in RTL mode

  5648. 		var horizontalPast = config.rtl ? 'future' : 'past',

  5649. 			horizontalFuture = config.rtl ? 'past' : 'future';

  5650. 

  5651. 		// Update the classes of all backgrounds to match the

  5652. 		// states of their slides (past/present/future)

  5653. 		toArray( dom.background.childNodes ).forEach( function( backgroundh, h ) {

  5654. 

  5655. 			backgroundh.classList.remove( 'past' );

  5656. 			backgroundh.classList.remove( 'present' );

  5657. 			backgroundh.classList.remove( 'future' );

  5658. 

  5659. 			if( h < indexh ) {

  5660. 				backgroundh.classList.add( horizontalPast );

  5661. 			}

  5662. 			else if ( h > indexh ) {

  5663. 				backgroundh.classList.add( horizontalFuture );

  5664. 			}

  5665. 			else {

  5666. 				backgroundh.classList.add( 'present' );

  5667. 

  5668. 				// Store a reference to the current background element

  5669. 				currentBackground = backgroundh;

  5670. 			}

  5671. 

  5672. 			if( includeAll || h === indexh ) {

  5673. 				toArray( backgroundh.querySelectorAll( '.slide-background' ) ).forEach( function( backgroundv, v ) {

  5674. 

  5675. 					backgroundv.classList.remove( 'past' );

  5676. 					backgroundv.classList.remove( 'present' );

  5677. 					backgroundv.classList.remove( 'future' );

  5678. 

  5679. 					if( v < indexv ) {

  5680. 						backgroundv.classList.add( 'past' );

  5681. 					}

  5682. 					else if ( v > indexv ) {

  5683. 						backgroundv.classList.add( 'future' );

  5684. 					}

  5685. 					else {

  5686. 						backgroundv.classList.add( 'present' );

  5687. 

  5688. 						// Only if this is the present horizontal and vertical slide

  5689. 						if( h === indexh ) currentBackground = backgroundv;

  5690. 					}

  5691. 

  5692. 				} );

  5693. 			}

  5694. 

  5695. 		} );

  5696. 

  5697. 		// Stop content inside of previous backgrounds

  5698. 		if( previousBackground ) {

  5699. 

  5700. 			stopEmbeddedContent( previousBackground );

  5701. 

  5702. 		}

  5703. 

  5704. 		// Start content in the current background

  5705. 		if( currentBackground ) {

  5706. 

  5707. 			startEmbeddedContent( currentBackground );

  5708. 

  5709. 			var currentBackgroundContent = currentBackground.querySelector( '.slide-background-content' );

  5710. 			if( currentBackgroundContent ) {

  5711. 

  5712. 				var backgroundImageURL = currentBackgroundContent.style.backgroundImage || '';

  5713. 

  5714. 				// Restart GIFs (doesn't work in Firefox)

  5715. 				if( /\.gif/i.test( backgroundImageURL ) ) {

  5716. 					currentBackgroundContent.style.backgroundImage = '';

  5717. 					window.getComputedStyle( currentBackgroundContent ).opacity;

  5718. 					currentBackgroundContent.style.backgroundImage = backgroundImageURL;

  5719. 				}

  5720. 

  5721. 			}

  5722. 

  5723. 			// Don't transition between identical backgrounds. This

  5724. 			// prevents unwanted flicker.

  5725. 			var previousBackgroundHash = previousBackground ? previousBackground.getAttribute( 'data-background-hash' ) : null;

  5726. 			var currentBackgroundHash = currentBackground.getAttribute( 'data-background-hash' );

  5727. 			if( currentBackgroundHash && currentBackgroundHash === previousBackgroundHash && currentBackground !== previousBackground ) {

  5728. 				dom.background.classList.add( 'no-transition' );

  5729. 			}

  5730. 

  5731. 			previousBackground = currentBackground;

  5732. 

  5733. 		}

  5734. 

  5735. 		// If there's a background brightness flag for this slide,

  5736. 		// bubble it to the .reveal container

  5737. 		if( currentSlide ) {

  5738. 			[ 'has-light-background', 'has-dark-background' ].forEach( function( classToBubble ) {

  5739. 				if( currentSlide.classList.contains( classToBubble ) ) {

  5740. 					dom.wrapper.classList.add( classToBubble );

  5741. 				}

  5742. 				else {

  5743. 					dom.wrapper.classList.remove( classToBubble );

  5744. 				}

  5745. 			} );

  5746. 		}

  5747. 

  5748. 		// Allow the first background to apply without transition

  5749. 		setTimeout( function() {

  5750. 			dom.background.classList.remove( 'no-transition' );

  5751. 		}, 1 );

  5752. 

  5753. 	}

  5754. 

  5755. 	/**

  5756. 	 * Updates the position of the parallax background based

  5757. 	 * on the current slide index.

  5758. 	 */

  5759. 	function updateParallax() {

  5760. 

  5761. 		if( config.parallaxBackgroundImage ) {

  5762. 

  5763. 			var horizontalSlides = dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ),

  5764. 				verticalSlides = dom.wrapper.querySelectorAll( VERTICAL_SLIDES_SELECTOR );

  5765. 

  5766. 			var backgroundSize = dom.background.style.backgroundSize.split( ' ' ),

  5767. 				backgroundWidth, backgroundHeight;

  5768. 

  5769. 			if( backgroundSize.length === 1 ) {

  5770. 				backgroundWidth = backgroundHeight = parseInt( backgroundSize[0], 10 );

  5771. 			}

  5772. 			else {

  5773. 				backgroundWidth = parseInt( backgroundSize[0], 10 );

  5774. 				backgroundHeight = parseInt( backgroundSize[1], 10 );

  5775. 			}

  5776. 

  5777. 			var slideWidth = dom.background.offsetWidth,

  5778. 				horizontalSlideCount = horizontalSlides.length,

  5779. 				horizontalOffsetMultiplier,

  5780. 				horizontalOffset;

  5781. 

  5782. 			if( typeof config.parallaxBackgroundHorizontal === 'number' ) {

  5783. 				horizontalOffsetMultiplier = config.parallaxBackgroundHorizontal;

  5784. 			}

  5785. 			else {

  5786. 				horizontalOffsetMultiplier = horizontalSlideCount > 1 ? ( backgroundWidth - slideWidth ) / ( horizontalSlideCount-1 ) : 0;

  5787. 			}

  5788. 

  5789. 			horizontalOffset = horizontalOffsetMultiplier * indexh * -1;

  5790. 

  5791. 			var slideHeight = dom.background.offsetHeight,

  5792. 				verticalSlideCount = verticalSlides.length,

  5793. 				verticalOffsetMultiplier,

  5794. 				verticalOffset;

  5795. 

  5796. 			if( typeof config.parallaxBackgroundVertical === 'number' ) {

  5797. 				verticalOffsetMultiplier = config.parallaxBackgroundVertical;

  5798. 			}

  5799. 			else {

  5800. 				verticalOffsetMultiplier = ( backgroundHeight - slideHeight ) / ( verticalSlideCount-1 );

  5801. 			}

  5802. 

  5803. 			verticalOffset = verticalSlideCount > 0 ?  verticalOffsetMultiplier * indexv : 0;

  5804. 

  5805. 			dom.background.style.backgroundPosition = horizontalOffset + 'px ' + -verticalOffset + 'px';

  5806. 

  5807. 		}

  5808. 

  5809. 	}

  5810. 

  5811. 	/**

  5812. 	 * Should the given element be preloaded?

  5813. 	 * Decides based on local element attributes and global config.

  5814. 	 *

  5815. 	 * @param {HTMLElement} element

  5816. 	 */

  5817. 	function shouldPreload( element ) {

  5818. 

  5819. 		// Prefer an explicit global preload setting

  5820. 		var preload = config.preloadIframes;

  5821. 

  5822. 		// If no global setting is available, fall back on the element's

  5823. 		// own preload setting

  5824. 		if( typeof preload !== 'boolean' ) {

  5825. 			preload = element.hasAttribute( 'data-preload' );

  5826. 		}

  5827. 

  5828. 		return preload;

  5829. 	}

  5830. 

  5831. 	/**

  5832. 	 * Called when the given slide is within the configured view

  5833. 	 * distance. Shows the slide element and loads any content

  5834. 	 * that is set to load lazily (data-src).

  5835. 	 *

  5836. 	 * @param {HTMLElement} slide Slide to show

  5837. 	 */

  5838. 	function loadSlide( slide, options ) {

  5839. 

  5840. 		options = options || {};

  5841. 

  5842. 		// Show the slide element

  5843. 		slide.style.display = config.display;

  5844. 

  5845. 		// Media elements with data-src attributes

  5846. 		toArray( slide.querySelectorAll( 'img[data-src], video[data-src], audio[data-src], iframe[data-src]' ) ).forEach( function( element ) {

  5847. 			if( element.tagName !== 'IFRAME' || shouldPreload( element ) ) {

  5848. 				element.setAttribute( 'src', element.getAttribute( 'data-src' ) );

  5849. 				element.setAttribute( 'data-lazy-loaded', '' );

  5850. 				element.removeAttribute( 'data-src' );

  5851. 			}

  5852. 		} );

  5853. 

  5854. 		// Media elements with <source> children

  5855. 		toArray( slide.querySelectorAll( 'video, audio' ) ).forEach( function( media ) {

  5856. 			var sources = 0;

  5857. 

  5858. 			toArray( media.querySelectorAll( 'source[data-src]' ) ).forEach( function( source ) {

  5859. 				source.setAttribute( 'src', source.getAttribute( 'data-src' ) );

  5860. 				source.removeAttribute( 'data-src' );

  5861. 				source.setAttribute( 'data-lazy-loaded', '' );

  5862. 				sources += 1;

  5863. 			} );

  5864. 

  5865. 			// If we rewrote sources for this video/audio element, we need

  5866. 			// to manually tell it to load from its new origin

  5867. 			if( sources > 0 ) {

  5868. 				media.load();

  5869. 			}

  5870. 		} );

  5871. 

  5872. 

  5873. 		// Show the corresponding background element

  5874. 		var background = slide.slideBackgroundElement;

  5875. 		if( background ) {

  5876. 			background.style.display = 'block';

  5877. 

  5878. 			var backgroundContent = slide.slideBackgroundContentElement;

  5879. 

  5880. 			// If the background contains media, load it

  5881. 			if( background.hasAttribute( 'data-loaded' ) === false ) {

  5882. 				background.setAttribute( 'data-loaded', 'true' );

  5883. 

  5884. 				var backgroundImage = slide.getAttribute( 'data-background-image' ),

  5885. 					backgroundVideo = slide.getAttribute( 'data-background-video' ),

  5886. 					backgroundVideoLoop = slide.hasAttribute( 'data-background-video-loop' ),

  5887. 					backgroundVideoMuted = slide.hasAttribute( 'data-background-video-muted' ),

  5888. 					backgroundIframe = slide.getAttribute( 'data-background-iframe' );

  5889. 

  5890. 				// Images

  5891. 				if( backgroundImage ) {

  5892. 					backgroundContent.style.backgroundImage = 'url('+ encodeURI( backgroundImage ) +')';

  5893. 				}

  5894. 				// Videos

  5895. 				else if ( backgroundVideo && !isSpeakerNotes() ) {

  5896. 					var video = document.createElement( 'video' );

  5897. 

  5898. 					if( backgroundVideoLoop ) {

  5899. 						video.setAttribute( 'loop', '' );

  5900. 					}

  5901. 

  5902. 					if( backgroundVideoMuted ) {

  5903. 						video.muted = true;

  5904. 					}

  5905. 

  5906. 					// Inline video playback works (at least in Mobile Safari) as

  5907. 					// long as the video is muted and the `playsinline` attribute is

  5908. 					// present

  5909. 					if( isMobileDevice ) {

  5910. 						video.muted = true;

  5911. 						video.autoplay = true;

  5912. 						video.setAttribute( 'playsinline', '' );

  5913. 					}

  5914. 

  5915. 					// Support comma separated lists of video sources

  5916. 					backgroundVideo.split( ',' ).forEach( function( source ) {

  5917. 						video.innerHTML += '<source src="'+ source +'">';

  5918. 					} );

  5919. 

  5920. 					backgroundContent.appendChild( video );

  5921. 				}

  5922. 				// Iframes

  5923. 				else if( backgroundIframe && options.excludeIframes !== true ) {

  5924. 					var iframe = document.createElement( 'iframe' );

  5925. 					iframe.setAttribute( 'allowfullscreen', '' );

  5926. 					iframe.setAttribute( 'mozallowfullscreen', '' );

  5927. 					iframe.setAttribute( 'webkitallowfullscreen', '' );

  5928. 

  5929. 					// Only load autoplaying content when the slide is shown to

  5930. 					// avoid having it play in the background

  5931. 					if( /autoplay=(1|true|yes)/gi.test( backgroundIframe ) ) {

  5932. 						iframe.setAttribute( 'data-src', backgroundIframe );

  5933. 					}

  5934. 					else {

  5935. 						iframe.setAttribute( 'src', backgroundIframe );

  5936. 					}

  5937. 

  5938. 					iframe.style.width  = '100%';

  5939. 					iframe.style.height = '100%';

  5940. 					iframe.style.maxHeight = '100%';

  5941. 					iframe.style.maxWidth = '100%';

  5942. 

  5943. 					backgroundContent.appendChild( iframe );

  5944. 				}

  5945. 			}

  5946. 

  5947. 		}

  5948. 

  5949. 	}

  5950. 

  5951. 	/**

  5952. 	 * Unloads and hides the given slide. This is called when the

  5953. 	 * slide is moved outside of the configured view distance.

  5954. 	 *

  5955. 	 * @param {HTMLElement} slide

  5956. 	 */

  5957. 	function unloadSlide( slide ) {

  5958. 

  5959. 		// Hide the slide element

  5960. 		slide.style.display = 'none';

  5961. 

  5962. 		// Hide the corresponding background element

  5963. 		var background = getSlideBackground( slide );

  5964. 		if( background ) {

  5965. 			background.style.display = 'none';

  5966. 		}

  5967. 

  5968. 		// Reset lazy-loaded media elements with src attributes

  5969. 		toArray( slide.querySelectorAll( 'video[data-lazy-loaded][src], audio[data-lazy-loaded][src], iframe[data-lazy-loaded][src]' ) ).forEach( function( element ) {

  5970. 			element.setAttribute( 'data-src', element.getAttribute( 'src' ) );

  5971. 			element.removeAttribute( 'src' );

  5972. 		} );

  5973. 

  5974. 		// Reset lazy-loaded media elements with <source> children

  5975. 		toArray( slide.querySelectorAll( 'video[data-lazy-loaded] source[src], audio source[src]' ) ).forEach( function( source ) {

  5976. 			source.setAttribute( 'data-src', source.getAttribute( 'src' ) );

  5977. 			source.removeAttribute( 'src' );

  5978. 		} );

  5979. 

  5980. 	}

  5981. 

  5982. 	/**

  5983. 	 * Determine what available routes there are for navigation.

  5984. 	 *

  5985. 	 * @return {{left: boolean, right: boolean, up: boolean, down: boolean}}

  5986. 	 */

  5987. 	function availableRoutes() {

  5988. 

  5989. 		var horizontalSlides = dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ),

  5990. 			verticalSlides = dom.wrapper.querySelectorAll( VERTICAL_SLIDES_SELECTOR );

  5991. 

  5992. 		var routes = {

  5993. 			left: indexh > 0,

  5994. 			right: indexh < horizontalSlides.length - 1,

  5995. 			up: indexv > 0,

  5996. 			down: indexv < verticalSlides.length - 1

  5997. 		};

  5998. 

  5999. 		// Looped presentations can always be navigated as long as

  6000. 		// there are slides available

  6001. 		if( config.loop ) {

  6002. 			if( horizontalSlides.length > 1 ) {

  6003. 				routes.left = true;

  6004. 				routes.right = true;

  6005. 			}

  6006. 

  6007. 			if( verticalSlides.length > 1 ) {

  6008. 				routes.up = true;

  6009. 				routes.down = true;

  6010. 			}

  6011. 		}

  6012. 

  6013. 		// Reverse horizontal controls for rtl

  6014. 		if( config.rtl ) {

  6015. 			var left = routes.left;

  6016. 			routes.left = routes.right;

  6017. 			routes.right = left;

  6018. 		}

  6019. 

  6020. 		return routes;

  6021. 

  6022. 	}

  6023. 

  6024. 	/**

  6025. 	 * Returns an object describing the available fragment

  6026. 	 * directions.

  6027. 	 *

  6028. 	 * @return {{prev: boolean, next: boolean}}

  6029. 	 */

  6030. 	function availableFragments() {

  6031. 

  6032. 		if( currentSlide && config.fragments ) {

  6033. 			var fragments = currentSlide.querySelectorAll( '.fragment' );

  6034. 			var hiddenFragments = currentSlide.querySelectorAll( '.fragment:not(.visible)' );

  6035. 

  6036. 			return {

  6037. 				prev: fragments.length - hiddenFragments.length > 0,

  6038. 				next: !!hiddenFragments.length

  6039. 			};

  6040. 		}

  6041. 		else {

  6042. 			return { prev: false, next: false };

  6043. 		}

  6044. 

  6045. 	}

  6046. 

  6047. 	/**

  6048. 	 * Enforces origin-specific format rules for embedded media.

  6049. 	 */

  6050. 	function formatEmbeddedContent() {

  6051. 

  6052. 		var _appendParamToIframeSource = function( sourceAttribute, sourceURL, param ) {

  6053. 			toArray( dom.slides.querySelectorAll( 'iframe['+ sourceAttribute +'*="'+ sourceURL +'"]' ) ).forEach( function( el ) {

  6054. 				var src = el.getAttribute( sourceAttribute );

  6055. 				if( src && src.indexOf( param ) === -1 ) {

  6056. 					el.setAttribute( sourceAttribute, src + ( !/\?/.test( src ) ? '?' : '&' ) + param );

  6057. 				}

  6058. 			});

  6059. 		};

  6060. 

  6061. 		// YouTube frames must include "?enablejsapi=1"

  6062. 		_appendParamToIframeSource( 'src', 'youtube.com/embed/', 'enablejsapi=1' );

  6063. 		_appendParamToIframeSource( 'data-src', 'youtube.com/embed/', 'enablejsapi=1' );

  6064. 

  6065. 		// Vimeo frames must include "?api=1"

  6066. 		_appendParamToIframeSource( 'src', 'player.vimeo.com/', 'api=1' );

  6067. 		_appendParamToIframeSource( 'data-src', 'player.vimeo.com/', 'api=1' );

  6068. 

  6069. 	}

  6070. 

  6071. 	/**

  6072. 	 * Start playback of any embedded content inside of

  6073. 	 * the given element.

  6074. 	 *

  6075. 	 * @param {HTMLElement} element

  6076. 	 */

  6077. 	function startEmbeddedContent( element ) {

  6078. 

  6079. 		if( element && !isSpeakerNotes() ) {

  6080. 

  6081. 			// Restart GIFs

  6082. 			toArray( element.querySelectorAll( 'img[src$=".gif"]' ) ).forEach( function( el ) {

  6083. 				// Setting the same unchanged source like this was confirmed

  6084. 				// to work in Chrome, FF & Safari

  6085. 				el.setAttribute( 'src', el.getAttribute( 'src' ) );

  6086. 			} );

  6087. 

  6088. 			// HTML5 media elements

  6089. 			toArray( element.querySelectorAll( 'video, audio' ) ).forEach( function( el ) {

  6090. 				if( closestParent( el, '.fragment' ) && !closestParent( el, '.fragment.visible' ) ) {

  6091. 					return;

  6092. 				}

  6093. 

  6094. 				// Prefer an explicit global autoplay setting

  6095. 				var autoplay = config.autoPlayMedia;

  6096. 

  6097. 				// If no global setting is available, fall back on the element's

  6098. 				// own autoplay setting

  6099. 				if( typeof autoplay !== 'boolean' ) {

  6100. 					autoplay = el.hasAttribute( 'data-autoplay' ) || !!closestParent( el, '.slide-background' );

  6101. 				}

  6102. 

  6103. 				if( autoplay && typeof el.play === 'function' ) {

  6104. 

  6105. 					// If the media is ready, start playback

  6106. 					if( el.readyState > 1 ) {

  6107. 						startEmbeddedMedia( { target: el } );

  6108. 					}

  6109. 					// Mobile devices never fire a loaded event so instead

  6110. 					// of waiting, we initiate playback

  6111. 					else if( isMobileDevice ) {

  6112. 						var promise = el.play();

  6113. 

  6114. 						// If autoplay does not work, ensure that the controls are visible so

  6115. 						// that the viewer can start the media on their own

  6116. 						if( promise && typeof promise.catch === 'function' && el.controls === false ) {

  6117. 							promise.catch( function() {

  6118. 								el.controls = true;

  6119. 

  6120. 								// Once the video does start playing, hide the controls again

  6121. 								el.addEventListener( 'play', function() {

  6122. 									el.controls = false;

  6123. 								} );

  6124. 							} );

  6125. 						}

  6126. 					}

  6127. 					// If the media isn't loaded, wait before playing

  6128. 					else {

  6129. 						el.removeEventListener( 'loadeddata', startEmbeddedMedia ); // remove first to avoid dupes

  6130. 						el.addEventListener( 'loadeddata', startEmbeddedMedia );

  6131. 					}

  6132. 

  6133. 				}

  6134. 			} );

  6135. 

  6136. 			// Normal iframes

  6137. 			toArray( element.querySelectorAll( 'iframe[src]' ) ).forEach( function( el ) {

  6138. 				if( closestParent( el, '.fragment' ) && !closestParent( el, '.fragment.visible' ) ) {

  6139. 					return;

  6140. 				}

  6141. 

  6142. 				startEmbeddedIframe( { target: el } );

  6143. 			} );

  6144. 

  6145. 			// Lazy loading iframes

  6146. 			toArray( element.querySelectorAll( 'iframe[data-src]' ) ).forEach( function( el ) {

  6147. 				if( closestParent( el, '.fragment' ) && !closestParent( el, '.fragment.visible' ) ) {

  6148. 					return;

  6149. 				}

  6150. 

  6151. 				if( el.getAttribute( 'src' ) !== el.getAttribute( 'data-src' ) ) {

  6152. 					el.removeEventListener( 'load', startEmbeddedIframe ); // remove first to avoid dupes

  6153. 					el.addEventListener( 'load', startEmbeddedIframe );

  6154. 					el.setAttribute( 'src', el.getAttribute( 'data-src' ) );

  6155. 				}

  6156. 			} );

  6157. 

  6158. 		}

  6159. 

  6160. 	}

  6161. 

  6162. 	/**

  6163. 	 * Starts playing an embedded video/audio element after

  6164. 	 * it has finished loading.

  6165. 	 *

  6166. 	 * @param {object} event

  6167. 	 */

  6168. 	function startEmbeddedMedia( event ) {

  6169. 

  6170. 		var isAttachedToDOM = !!closestParent( event.target, 'html' ),

  6171. 			isVisible  		= !!closestParent( event.target, '.present' );

  6172. 

  6173. 		if( isAttachedToDOM && isVisible ) {

  6174. 			event.target.currentTime = 0;

  6175. 			event.target.play();

  6176. 		}

  6177. 

  6178. 		event.target.removeEventListener( 'loadeddata', startEmbeddedMedia );

  6179. 

  6180. 	}

  6181. 

  6182. 	/**

  6183. 	 * "Starts" the content of an embedded iframe using the

  6184. 	 * postMessage API.

  6185. 	 *

  6186. 	 * @param {object} event

  6187. 	 */

  6188. 	function startEmbeddedIframe( event ) {

  6189. 

  6190. 		var iframe = event.target;

  6191. 

  6192. 		if( iframe && iframe.contentWindow ) {

  6193. 

  6194. 			var isAttachedToDOM = !!closestParent( event.target, 'html' ),

  6195. 				isVisible  		= !!closestParent( event.target, '.present' );

  6196. 

  6197. 			if( isAttachedToDOM && isVisible ) {

  6198. 

  6199. 				// Prefer an explicit global autoplay setting

  6200. 				var autoplay = config.autoPlayMedia;

  6201. 

  6202. 				// If no global setting is available, fall back on the element's

  6203. 				// own autoplay setting

  6204. 				if( typeof autoplay !== 'boolean' ) {

  6205. 					autoplay = iframe.hasAttribute( 'data-autoplay' ) || !!closestParent( iframe, '.slide-background' );

  6206. 				}

  6207. 

  6208. 				// YouTube postMessage API

  6209. 				if( /youtube\.com\/embed\//.test( iframe.getAttribute( 'src' ) ) && autoplay ) {

  6210. 					iframe.contentWindow.postMessage( '{"event":"command","func":"playVideo","args":""}', '*' );

  6211. 				}

  6212. 				// Vimeo postMessage API

  6213. 				else if( /player\.vimeo\.com\//.test( iframe.getAttribute( 'src' ) ) && autoplay ) {

  6214. 					iframe.contentWindow.postMessage( '{"method":"play"}', '*' );

  6215. 				}

  6216. 				// Generic postMessage API

  6217. 				else {

  6218. 					iframe.contentWindow.postMessage( 'slide:start', '*' );

  6219. 				}

  6220. 

  6221. 			}

  6222. 

  6223. 		}

  6224. 

  6225. 	}

  6226. 

  6227. 	/**

  6228. 	 * Stop playback of any embedded content inside of

  6229. 	 * the targeted slide.

  6230. 	 *

  6231. 	 * @param {HTMLElement} element

  6232. 	 */

  6233. 	function stopEmbeddedContent( element, options ) {

  6234. 

  6235. 		options = extend( {

  6236. 			// Defaults

  6237. 			unloadIframes: true

  6238. 		}, options || {} );

  6239. 

  6240. 		if( element && element.parentNode ) {

  6241. 			// HTML5 media elements

  6242. 			toArray( element.querySelectorAll( 'video, audio' ) ).forEach( function( el ) {

  6243. 				if( !el.hasAttribute( 'data-ignore' ) && typeof el.pause === 'function' ) {

  6244. 					el.setAttribute('data-paused-by-reveal', '');

  6245. 					el.pause();

  6246. 				}

  6247. 			} );

  6248. 

  6249. 			// Generic postMessage API for non-lazy loaded iframes

  6250. 			toArray( element.querySelectorAll( 'iframe' ) ).forEach( function( el ) {

  6251. 				if( el.contentWindow ) el.contentWindow.postMessage( 'slide:stop', '*' );

  6252. 				el.removeEventListener( 'load', startEmbeddedIframe );

  6253. 			});

  6254. 

  6255. 			// YouTube postMessage API

  6256. 			toArray( element.querySelectorAll( 'iframe[src*="youtube.com/embed/"]' ) ).forEach( function( el ) {

  6257. 				if( !el.hasAttribute( 'data-ignore' ) && el.contentWindow && typeof el.contentWindow.postMessage === 'function' ) {

  6258. 					el.contentWindow.postMessage( '{"event":"command","func":"pauseVideo","args":""}', '*' );

  6259. 				}

  6260. 			});

  6261. 

  6262. 			// Vimeo postMessage API

  6263. 			toArray( element.querySelectorAll( 'iframe[src*="player.vimeo.com/"]' ) ).forEach( function( el ) {

  6264. 				if( !el.hasAttribute( 'data-ignore' ) && el.contentWindow && typeof el.contentWindow.postMessage === 'function' ) {

  6265. 					el.contentWindow.postMessage( '{"method":"pause"}', '*' );

  6266. 				}

  6267. 			});

  6268. 

  6269. 			if( options.unloadIframes === true ) {

  6270. 				// Unload lazy-loaded iframes

  6271. 				toArray( element.querySelectorAll( 'iframe[data-src]' ) ).forEach( function( el ) {

  6272. 					// Only removing the src doesn't actually unload the frame

  6273. 					// in all browsers (Firefox) so we set it to blank first

  6274. 					el.setAttribute( 'src', 'about:blank' );

  6275. 					el.removeAttribute( 'src' );

  6276. 				} );

  6277. 			}

  6278. 		}

  6279. 

  6280. 	}

  6281. 

  6282. 	/**

  6283. 	 * Returns the number of past slides. This can be used as a global

  6284. 	 * flattened index for slides.

  6285. 	 *

  6286. 	 * @return {number} Past slide count

  6287. 	 */

  6288. 	function getSlidePastCount() {

  6289. 

  6290. 		var horizontalSlides = toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) );

  6291. 

  6292. 		// The number of past slides

  6293. 		var pastCount = 0;

  6294. 

  6295. 		// Step through all slides and count the past ones

  6296. 		mainLoop: for( var i = 0; i < horizontalSlides.length; i++ ) {

  6297. 

  6298. 			var horizontalSlide = horizontalSlides[i];

  6299. 			var verticalSlides = toArray( horizontalSlide.querySelectorAll( 'section' ) );

  6300. 

  6301. 			for( var j = 0; j < verticalSlides.length; j++ ) {

  6302. 

  6303. 				// Stop as soon as we arrive at the present

  6304. 				if( verticalSlides[j].classList.contains( 'present' ) ) {

  6305. 					break mainLoop;

  6306. 				}

  6307. 

  6308. 				pastCount++;

  6309. 

  6310. 			}

  6311. 

  6312. 			// Stop as soon as we arrive at the present

  6313. 			if( horizontalSlide.classList.contains( 'present' ) ) {

  6314. 				break;

  6315. 			}

  6316. 

  6317. 			// Don't count the wrapping section for vertical slides

  6318. 			if( horizontalSlide.classList.contains( 'stack' ) === false ) {

  6319. 				pastCount++;

  6320. 			}

  6321. 

  6322. 		}

  6323. 

  6324. 		return pastCount;

  6325. 

  6326. 	}

  6327. 

  6328. 	/**

  6329. 	 * Returns a value ranging from 0-1 that represents

  6330. 	 * how far into the presentation we have navigated.

  6331. 	 *

  6332. 	 * @return {number}

  6333. 	 */

  6334. 	function getProgress() {

  6335. 

  6336. 		// The number of past and total slides

  6337. 		var totalCount = getTotalSlides();

  6338. 		var pastCount = getSlidePastCount();

  6339. 

  6340. 		if( currentSlide ) {

  6341. 

  6342. 			var allFragments = currentSlide.querySelectorAll( '.fragment' );

  6343. 

  6344. 			// If there are fragments in the current slide those should be

  6345. 			// accounted for in the progress.

  6346. 			if( allFragments.length > 0 ) {

  6347. 				var visibleFragments = currentSlide.querySelectorAll( '.fragment.visible' );

  6348. 

  6349. 				// This value represents how big a portion of the slide progress

  6350. 				// that is made up by its fragments (0-1)

  6351. 				var fragmentWeight = 0.9;

  6352. 

  6353. 				// Add fragment progress to the past slide count

  6354. 				pastCount += ( visibleFragments.length / allFragments.length ) * fragmentWeight;

  6355. 			}

  6356. 

  6357. 		}

  6358. 

  6359. 		return Math.min( pastCount / ( totalCount - 1 ), 1 );

  6360. 

  6361. 	}

  6362. 

  6363. 	/**

  6364. 	 * Checks if this presentation is running inside of the

  6365. 	 * speaker notes window.

  6366. 	 *

  6367. 	 * @return {boolean}

  6368. 	 */

  6369. 	function isSpeakerNotes() {

  6370. 

  6371. 		return !!window.location.search.match( /receiver/gi );

  6372. 

  6373. 	}

  6374. 

  6375. 	/**

  6376. 	 * Reads the current URL (hash) and navigates accordingly.

  6377. 	 */

  6378. 	function readURL() {

  6379. 

  6380. 		var hash = window.location.hash;

  6381. 

  6382. 		// Attempt to parse the hash as either an index or name

  6383. 		var bits = hash.slice( 2 ).split( '/' ),

  6384. 			name = hash.replace( /#|\//gi, '' );

  6385. 

  6386. 		// If the first bit is not fully numeric and there is a name we

  6387. 		// can assume that this is a named link

  6388. 		if( !/^[0-9]*$/.test( bits[0] ) && name.length ) {

  6389. 			var element;

  6390. 

  6391. 			// Ensure the named link is a valid HTML ID attribute

  6392. 			try {

  6393. 				element = document.getElementById( decodeURIComponent( name ) );

  6394. 			}

  6395. 			catch ( error ) { }

  6396. 

  6397. 			// Ensure that we're not already on a slide with the same name

  6398. 			var isSameNameAsCurrentSlide = currentSlide ? currentSlide.getAttribute( 'id' ) === name : false;

  6399. 

  6400. 			if( element ) {

  6401. 				// If the slide exists and is not the current slide...

  6402. 				if ( !isSameNameAsCurrentSlide ) {

  6403. 					// ...find the position of the named slide and navigate to it

  6404. 					var indices = Reveal.getIndices(element);

  6405. 					slide(indices.h, indices.v);

  6406. 				}

  6407. 			}

  6408. 			// If the slide doesn't exist, navigate to the current slide

  6409. 			else {

  6410. 				slide( indexh || 0, indexv || 0 );

  6411. 			}

  6412. 		}

  6413. 		else {

  6414. 			var hashIndexBase = config.hashOneBasedIndex ? 1 : 0;

  6415. 

  6416. 			// Read the index components of the hash

  6417. 			var h = ( parseInt( bits[0], 10 ) - hashIndexBase ) || 0,

  6418. 				v = ( parseInt( bits[1], 10 ) - hashIndexBase ) || 0,

  6419. 				f;

  6420. 

  6421. 			if( config.fragmentInURL ) {

  6422. 				f = parseInt( bits[2], 10 );

  6423. 				if( isNaN( f ) ) {

  6424. 					f = undefined;

  6425. 				}

  6426. 			}

  6427. 

  6428. 			if( h !== indexh || v !== indexv || f !== undefined ) {

  6429. 				slide( h, v, f );

  6430. 			}

  6431. 		}

  6432. 

  6433. 	}

  6434. 

  6435. 	/**

  6436. 	 * Updates the page URL (hash) to reflect the current

  6437. 	 * state.

  6438. 	 *

  6439. 	 * @param {number} delay The time in ms to wait before

  6440. 	 * writing the hash

  6441. 	 */

  6442. 	function writeURL( delay ) {

  6443. 

  6444. 		// Make sure there's never more than one timeout running

  6445. 		clearTimeout( writeURLTimeout );

  6446. 

  6447. 		// If a delay is specified, timeout this call

  6448. 		if( typeof delay === 'number' ) {

  6449. 			writeURLTimeout = setTimeout( writeURL, delay );

  6450. 		}

  6451. 		else if( currentSlide ) {

  6452. 			// If we're configured to push to history OR the history

  6453. 			// API is not avaialble.

  6454. 			if( config.history || !window.history ) {

  6455. 				window.location.hash = locationHash();

  6456. 			}

  6457. 			// If we're configured to reflect the current slide in the

  6458. 			// URL without pushing to history.

  6459. 			else if( config.hash ) {

  6460. 				window.history.replaceState( null, null, '#' + locationHash() );

  6461. 			}

  6462. 			// If history and hash are both disabled, a hash may still

  6463. 			// be added to the URL by clicking on a href with a hash

  6464. 			// target. Counter this by always removing the hash.

  6465. 			else {

  6466. 				window.history.replaceState( null, null, window.location.pathname + window.location.search );

  6467. 			}

  6468. 		}

  6469. 

  6470. 	}

  6471. 	/**

  6472. 	 * Retrieves the h/v location and fragment of the current,

  6473. 	 * or specified, slide.

  6474. 	 *

  6475. 	 * @param {HTMLElement} [slide] If specified, the returned

  6476. 	 * index will be for this slide rather than the currently

  6477. 	 * active one

  6478. 	 *

  6479. 	 * @return {{h: number, v: number, f: number}}

  6480. 	 */

  6481. 	function getIndices( slide ) {

  6482. 

  6483. 		// By default, return the current indices

  6484. 		var h = indexh,

  6485. 			v = indexv,

  6486. 			f;

  6487. 

  6488. 		// If a slide is specified, return the indices of that slide

  6489. 		if( slide ) {

  6490. 			var isVertical = isVerticalSlide( slide );

  6491. 			var slideh = isVertical ? slide.parentNode : slide;

  6492. 

  6493. 			// Select all horizontal slides

  6494. 			var horizontalSlides = toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) );

  6495. 

  6496. 			// Now that we know which the horizontal slide is, get its index

  6497. 			h = Math.max( horizontalSlides.indexOf( slideh ), 0 );

  6498. 

  6499. 			// Assume we're not vertical

  6500. 			v = undefined;

  6501. 

  6502. 			// If this is a vertical slide, grab the vertical index

  6503. 			if( isVertical ) {

  6504. 				v = Math.max( toArray( slide.parentNode.querySelectorAll( 'section' ) ).indexOf( slide ), 0 );

  6505. 			}

  6506. 		}

  6507. 

  6508. 		if( !slide && currentSlide ) {

  6509. 			var hasFragments = currentSlide.querySelectorAll( '.fragment' ).length > 0;

  6510. 			if( hasFragments ) {

  6511. 				var currentFragment = currentSlide.querySelector( '.current-fragment' );

  6512. 				if( currentFragment && currentFragment.hasAttribute( 'data-fragment-index' ) ) {

  6513. 					f = parseInt( currentFragment.getAttribute( 'data-fragment-index' ), 10 );

  6514. 				}

  6515. 				else {

  6516. 					f = currentSlide.querySelectorAll( '.fragment.visible' ).length - 1;

  6517. 				}

  6518. 			}

  6519. 		}

  6520. 

  6521. 		return { h: h, v: v, f: f };

  6522. 

  6523. 	}

  6524. 

  6525. 	/**

  6526. 	 * Retrieves all slides in this presentation.

  6527. 	 */

  6528. 	function getSlides() {

  6529. 

  6530. 		return toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR + ':not(.stack)' ));

  6531. 

  6532. 	}

  6533. 

  6534. 	/**

  6535. 	 * Returns an array of objects where each object represents the

  6536. 	 * attributes on its respective slide.

  6537. 	 */

  6538. 	function getSlidesAttributes() {

  6539. 

  6540. 		return getSlides().map( function( slide ) {

  6541. 

  6542. 			var attributes = {};

  6543. 			for( var i = 0; i < slide.attributes.length; i++ ) {

  6544. 				var attribute = slide.attributes[ i ];

  6545. 				attributes[ attribute.name ] = attribute.value;

  6546. 			}

  6547. 			return attributes;

  6548. 

  6549. 		} );

  6550. 

  6551. 	}

  6552. 

  6553. 	/**

  6554. 	 * Retrieves the total number of slides in this presentation.

  6555. 	 *

  6556. 	 * @return {number}

  6557. 	 */

  6558. 	function getTotalSlides() {

  6559. 

  6560. 		return getSlides().length;

  6561. 

  6562. 	}

  6563. 

  6564. 	/**

  6565. 	 * Returns the slide element matching the specified index.

  6566. 	 *

  6567. 	 * @return {HTMLElement}

  6568. 	 */

  6569. 	function getSlide( x, y ) {

  6570. 

  6571. 		var horizontalSlide = dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR )[ x ];

  6572. 		var verticalSlides = horizontalSlide && horizontalSlide.querySelectorAll( 'section' );

  6573. 

  6574. 		if( verticalSlides && verticalSlides.length && typeof y === 'number' ) {

  6575. 			return verticalSlides ? verticalSlides[ y ] : undefined;

  6576. 		}

  6577. 

  6578. 		return horizontalSlide;

  6579. 

  6580. 	}

  6581. 

  6582. 	/**

  6583. 	 * Returns the background element for the given slide.

  6584. 	 * All slides, even the ones with no background properties

  6585. 	 * defined, have a background element so as long as the

  6586. 	 * index is valid an element will be returned.

  6587. 	 *

  6588. 	 * @param {mixed} x Horizontal background index OR a slide

  6589. 	 * HTML element

  6590. 	 * @param {number} y Vertical background index

  6591. 	 * @return {(HTMLElement[]|*)}

  6592. 	 */

  6593. 	function getSlideBackground( x, y ) {

  6594. 

  6595. 		var slide = typeof x === 'number' ? getSlide( x, y ) : x;

  6596. 		if( slide ) {

  6597. 			return slide.slideBackgroundElement;

  6598. 		}

  6599. 

  6600. 		return undefined;

  6601. 

  6602. 	}

  6603. 

  6604. 	/**

  6605. 	 * Retrieves the speaker notes from a slide. Notes can be

  6606. 	 * defined in two ways:

  6607. 	 * 1. As a data-notes attribute on the slide <section>

  6608. 	 * 2. As an <aside class="notes"> inside of the slide

  6609. 	 *

  6610. 	 * @param {HTMLElement} [slide=currentSlide]

  6611. 	 * @return {(string|null)}

  6612. 	 */

  6613. 	function getSlideNotes( slide ) {

  6614. 

  6615. 		// Default to the current slide

  6616. 		slide = slide || currentSlide;

  6617. 

  6618. 		// Notes can be specified via the data-notes attribute...

  6619. 		if( slide.hasAttribute( 'data-notes' ) ) {

  6620. 			return slide.getAttribute( 'data-notes' );

  6621. 		}

  6622. 

  6623. 		// ... or using an <aside class="notes"> element

  6624. 		var notesElement = slide.querySelector( 'aside.notes' );

  6625. 		if( notesElement ) {

  6626. 			return notesElement.innerHTML;

  6627. 		}

  6628. 

  6629. 		return null;

  6630. 

  6631. 	}

  6632. 

  6633. 	/**

  6634. 	 * Retrieves the current state of the presentation as

  6635. 	 * an object. This state can then be restored at any

  6636. 	 * time.

  6637. 	 *

  6638. 	 * @return {{indexh: number, indexv: number, indexf: number, paused: boolean, overview: boolean}}

  6639. 	 */

  6640. 	function getState() {

  6641. 

  6642. 		var indices = getIndices();

  6643. 

  6644. 		return {

  6645. 			indexh: indices.h,

  6646. 			indexv: indices.v,

  6647. 			indexf: indices.f,

  6648. 			paused: isPaused(),

  6649. 			overview: isOverview()

  6650. 		};

  6651. 

  6652. 	}

  6653. 

  6654. 	/**

  6655. 	 * Restores the presentation to the given state.

  6656. 	 *

  6657. 	 * @param {object} state As generated by getState()

  6658. 	 * @see {@link getState} generates the parameter `state`

  6659. 	 */

  6660. 	function setState( state ) {

  6661. 

  6662. 		if( typeof state === 'object' ) {

  6663. 			slide( deserialize( state.indexh ), deserialize( state.indexv ), deserialize( state.indexf ) );

  6664. 

  6665. 			var pausedFlag = deserialize( state.paused ),

  6666. 				overviewFlag = deserialize( state.overview );

  6667. 

  6668. 			if( typeof pausedFlag === 'boolean' && pausedFlag !== isPaused() ) {

  6669. 				togglePause( pausedFlag );

  6670. 			}

  6671. 

  6672. 			if( typeof overviewFlag === 'boolean' && overviewFlag !== isOverview() ) {

  6673. 				toggleOverview( overviewFlag );

  6674. 			}

  6675. 		}

  6676. 

  6677. 	}

  6678. 

  6679. 	/**

  6680. 	 * Return a sorted fragments list, ordered by an increasing

  6681. 	 * "data-fragment-index" attribute.

  6682. 	 *

  6683. 	 * Fragments will be revealed in the order that they are returned by

  6684. 	 * this function, so you can use the index attributes to control the

  6685. 	 * order of fragment appearance.

  6686. 	 *

  6687. 	 * To maintain a sensible default fragment order, fragments are presumed

  6688. 	 * to be passed in document order. This function adds a "fragment-index"

  6689. 	 * attribute to each node if such an attribute is not already present,

  6690. 	 * and sets that attribute to an integer value which is the position of

  6691. 	 * the fragment within the fragments list.

  6692. 	 *

  6693. 	 * @param {object[]|*} fragments

  6694. 	 * @param {boolean} grouped If true the returned array will contain

  6695. 	 * nested arrays for all fragments with the same index

  6696. 	 * @return {object[]} sorted Sorted array of fragments

  6697. 	 */

  6698. 	function sortFragments( fragments, grouped ) {

  6699. 

  6700. 		fragments = toArray( fragments );

  6701. 

  6702. 		var ordered = [],

  6703. 			unordered = [],

  6704. 			sorted = [];

  6705. 

  6706. 		// Group ordered and unordered elements

  6707. 		fragments.forEach( function( fragment, i ) {

  6708. 			if( fragment.hasAttribute( 'data-fragment-index' ) ) {

  6709. 				var index = parseInt( fragment.getAttribute( 'data-fragment-index' ), 10 );

  6710. 

  6711. 				if( !ordered[index] ) {

  6712. 					ordered[index] = [];

  6713. 				}

  6714. 

  6715. 				ordered[index].push( fragment );

  6716. 			}

  6717. 			else {

  6718. 				unordered.push( [ fragment ] );

  6719. 			}

  6720. 		} );

  6721. 

  6722. 		// Append fragments without explicit indices in their

  6723. 		// DOM order

  6724. 		ordered = ordered.concat( unordered );

  6725. 

  6726. 		// Manually count the index up per group to ensure there

  6727. 		// are no gaps

  6728. 		var index = 0;

  6729. 

  6730. 		// Push all fragments in their sorted order to an array,

  6731. 		// this flattens the groups

  6732. 		ordered.forEach( function( group ) {

  6733. 			group.forEach( function( fragment ) {

  6734. 				sorted.push( fragment );

  6735. 				fragment.setAttribute( 'data-fragment-index', index );

  6736. 			} );

  6737. 

  6738. 			index ++;

  6739. 		} );

  6740. 

  6741. 		return grouped === true ? ordered : sorted;

  6742. 

  6743. 	}

  6744. 

  6745. 	/**

  6746. 	 * Refreshes the fragments on the current slide so that they

  6747. 	 * have the appropriate classes (.visible + .current-fragment).

  6748. 	 *

  6749. 	 * @param {number} [index] The index of the current fragment

  6750. 	 * @param {array} [fragments] Array containing all fragments

  6751. 	 * in the current slide

  6752. 	 *

  6753. 	 * @return {{shown: array, hidden: array}}

  6754. 	 */

  6755. 	function updateFragments( index, fragments ) {

  6756. 

  6757. 		var changedFragments = {

  6758. 			shown: [],

  6759. 			hidden: []

  6760. 		};

  6761. 

  6762. 		if( currentSlide && config.fragments ) {

  6763. 

  6764. 			fragments = fragments || sortFragments( currentSlide.querySelectorAll( '.fragment' ) );

  6765. 

  6766. 			if( fragments.length ) {

  6767. 

  6768. 				if( typeof index !== 'number' ) {

  6769. 					var currentFragment = sortFragments( currentSlide.querySelectorAll( '.fragment.visible' ) ).pop();

  6770. 					if( currentFragment ) {

  6771. 						index = parseInt( currentFragment.getAttribute( 'data-fragment-index' ) || 0, 10 );

  6772. 					}

  6773. 				}

  6774. 

  6775. 				toArray( fragments ).forEach( function( el, i ) {

  6776. 

  6777. 					if( el.hasAttribute( 'data-fragment-index' ) ) {

  6778. 						i = parseInt( el.getAttribute( 'data-fragment-index' ), 10 );

  6779. 					}

  6780. 

  6781. 					// Visible fragments

  6782. 					if( i <= index ) {

  6783. 						if( !el.classList.contains( 'visible' ) ) changedFragments.shown.push( el );

  6784. 						el.classList.add( 'visible' );

  6785. 						el.classList.remove( 'current-fragment' );

  6786. 

  6787. 						// Announce the fragments one by one to the Screen Reader

  6788. 						dom.statusDiv.textContent = getStatusText( el );

  6789. 

  6790. 						if( i === index ) {

  6791. 							el.classList.add( 'current-fragment' );

  6792. 							startEmbeddedContent( el );

  6793. 						}

  6794. 					}

  6795. 					// Hidden fragments

  6796. 					else {

  6797. 						if( el.classList.contains( 'visible' ) ) changedFragments.hidden.push( el );

  6798. 						el.classList.remove( 'visible' );

  6799. 						el.classList.remove( 'current-fragment' );

  6800. 					}

  6801. 

  6802. 				} );

  6803. 

  6804. 			}

  6805. 

  6806. 		}

  6807. 

  6808. 		return changedFragments;

  6809. 

  6810. 	}

  6811. 

  6812. 	/**

  6813. 	 * Navigate to the specified slide fragment.

  6814. 	 *

  6815. 	 * @param {?number} index The index of the fragment that

  6816. 	 * should be shown, -1 means all are invisible

  6817. 	 * @param {number} offset Integer offset to apply to the

  6818. 	 * fragment index

  6819. 	 *

  6820. 	 * @return {boolean} true if a change was made in any

  6821. 	 * fragments visibility as part of this call

  6822. 	 */

  6823. 	function navigateFragment( index, offset ) {

  6824. 

  6825. 		if( currentSlide && config.fragments ) {

  6826. 

  6827. 			var fragments = sortFragments( currentSlide.querySelectorAll( '.fragment' ) );

  6828. 			if( fragments.length ) {

  6829. 

  6830. 				// If no index is specified, find the current

  6831. 				if( typeof index !== 'number' ) {

  6832. 					var lastVisibleFragment = sortFragments( currentSlide.querySelectorAll( '.fragment.visible' ) ).pop();

  6833. 

  6834. 					if( lastVisibleFragment ) {

  6835. 						index = parseInt( lastVisibleFragment.getAttribute( 'data-fragment-index' ) || 0, 10 );

  6836. 					}

  6837. 					else {

  6838. 						index = -1;

  6839. 					}

  6840. 				}

  6841. 

  6842. 				// If an offset is specified, apply it to the index

  6843. 				if( typeof offset === 'number' ) {

  6844. 					index += offset;

  6845. 				}

  6846. 

  6847. 				var changedFragments = updateFragments( index, fragments );

  6848. 

  6849. 				if( changedFragments.hidden.length ) {

  6850. 					dispatchEvent( 'fragmenthidden', { fragment: changedFragments.hidden[0], fragments: changedFragments.hidden } );

  6851. 				}

  6852. 

  6853. 				if( changedFragments.shown.length ) {

  6854. 					dispatchEvent( 'fragmentshown', { fragment: changedFragments.shown[0], fragments: changedFragments.shown } );

  6855. 				}

  6856. 

  6857. 				updateControls();

  6858. 				updateProgress();

  6859. 

  6860. 				if( config.fragmentInURL ) {

  6861. 					writeURL();

  6862. 				}

  6863. 

  6864. 				return !!( changedFragments.shown.length || changedFragments.hidden.length );

  6865. 

  6866. 			}

  6867. 

  6868. 		}

  6869. 

  6870. 		return false;

  6871. 

  6872. 	}

  6873. 

  6874. 	/**

  6875. 	 * Navigate to the next slide fragment.

  6876. 	 *

  6877. 	 * @return {boolean} true if there was a next fragment,

  6878. 	 * false otherwise

  6879. 	 */

  6880. 	function nextFragment() {

  6881. 

  6882. 		return navigateFragment( null, 1 );

  6883. 

  6884. 	}

  6885. 

  6886. 	/**

  6887. 	 * Navigate to the previous slide fragment.

  6888. 	 *

  6889. 	 * @return {boolean} true if there was a previous fragment,

  6890. 	 * false otherwise

  6891. 	 */

  6892. 	function previousFragment() {

  6893. 

  6894. 		return navigateFragment( null, -1 );

  6895. 

  6896. 	}

  6897. 

  6898. 	/**

  6899. 	 * Cues a new automated slide if enabled in the config.

  6900. 	 */

  6901. 	function cueAutoSlide() {

  6902. 

  6903. 		cancelAutoSlide();

  6904. 

  6905. 		if( currentSlide && config.autoSlide !== false ) {

  6906. 

  6907. 			var fragment = currentSlide.querySelector( '.current-fragment' );

  6908. 

  6909. 			// When the slide first appears there is no "current" fragment so

  6910. 			// we look for a data-autoslide timing on the first fragment

  6911. 			if( !fragment ) fragment = currentSlide.querySelector( '.fragment' );

  6912. 

  6913. 			var fragmentAutoSlide = fragment ? fragment.getAttribute( 'data-autoslide' ) : null;

  6914. 			var parentAutoSlide = currentSlide.parentNode ? currentSlide.parentNode.getAttribute( 'data-autoslide' ) : null;

  6915. 			var slideAutoSlide = currentSlide.getAttribute( 'data-autoslide' );

  6916. 

  6917. 			// Pick value in the following priority order:

  6918. 			// 1. Current fragment's data-autoslide

  6919. 			// 2. Current slide's data-autoslide

  6920. 			// 3. Parent slide's data-autoslide

  6921. 			// 4. Global autoSlide setting

  6922. 			if( fragmentAutoSlide ) {

  6923. 				autoSlide = parseInt( fragmentAutoSlide, 10 );

  6924. 			}

  6925. 			else if( slideAutoSlide ) {

  6926. 				autoSlide = parseInt( slideAutoSlide, 10 );

  6927. 			}

  6928. 			else if( parentAutoSlide ) {

  6929. 				autoSlide = parseInt( parentAutoSlide, 10 );

  6930. 			}

  6931. 			else {

  6932. 				autoSlide = config.autoSlide;

  6933. 			}

  6934. 

  6935. 			// If there are media elements with data-autoplay,

  6936. 			// automatically set the autoSlide duration to the

  6937. 			// length of that media. Not applicable if the slide

  6938. 			// is divided up into fragments.

  6939. 			// playbackRate is accounted for in the duration.

  6940. 			if( currentSlide.querySelectorAll( '.fragment' ).length === 0 ) {

  6941. 				toArray( currentSlide.querySelectorAll( 'video, audio' ) ).forEach( function( el ) {

  6942. 					if( el.hasAttribute( 'data-autoplay' ) ) {

  6943. 						if( autoSlide && (el.duration * 1000 / el.playbackRate ) > autoSlide ) {

  6944. 							autoSlide = ( el.duration * 1000 / el.playbackRate ) + 1000;

  6945. 						}

  6946. 					}

  6947. 				} );

  6948. 			}

  6949. 

  6950. 			// Cue the next auto-slide if:

  6951. 			// - There is an autoSlide value

  6952. 			// - Auto-sliding isn't paused by the user

  6953. 			// - The presentation isn't paused

  6954. 			// - The overview isn't active

  6955. 			// - The presentation isn't over

  6956. 			if( autoSlide && !autoSlidePaused && !isPaused() && !isOverview() && ( !Reveal.isLastSlide() || availableFragments().next || config.loop === true ) ) {

  6957. 				autoSlideTimeout = setTimeout( function() {

  6958. 					typeof config.autoSlideMethod === 'function' ? config.autoSlideMethod() : navigateNext();

  6959. 					cueAutoSlide();

  6960. 				}, autoSlide );

  6961. 				autoSlideStartTime = Date.now();

  6962. 			}

  6963. 

  6964. 			if( autoSlidePlayer ) {

  6965. 				autoSlidePlayer.setPlaying( autoSlideTimeout !== -1 );

  6966. 			}

  6967. 

  6968. 		}

  6969. 

  6970. 	}

  6971. 

  6972. 	/**

  6973. 	 * Cancels any ongoing request to auto-slide.

  6974. 	 */

  6975. 	function cancelAutoSlide() {

  6976. 

  6977. 		clearTimeout( autoSlideTimeout );

  6978. 		autoSlideTimeout = -1;

  6979. 

  6980. 	}

  6981. 

  6982. 	function pauseAutoSlide() {

  6983. 

  6984. 		if( autoSlide && !autoSlidePaused ) {

  6985. 			autoSlidePaused = true;

  6986. 			dispatchEvent( 'autoslidepaused' );

  6987. 			clearTimeout( autoSlideTimeout );

  6988. 

  6989. 			if( autoSlidePlayer ) {

  6990. 				autoSlidePlayer.setPlaying( false );

  6991. 			}

  6992. 		}

  6993. 

  6994. 	}

  6995. 

  6996. 	function resumeAutoSlide() {

  6997. 

  6998. 		if( autoSlide && autoSlidePaused ) {

  6999. 			autoSlidePaused = false;

  7000. 			dispatchEvent( 'autoslideresumed' );

  7001. 			cueAutoSlide();

  7002. 		}

  7003. 

  7004. 	}

  7005. 

  7006. 	function navigateLeft() {

  7007. 

  7008. 		// Reverse for RTL

  7009. 		if( config.rtl ) {

  7010. 			if( ( isOverview() || nextFragment() === false ) && availableRoutes().left ) {

  7011. 				slide( indexh + 1, config.navigationMode === 'grid' ? indexv : undefined );

  7012. 			}

  7013. 		}

  7014. 		// Normal navigation

  7015. 		else if( ( isOverview() || previousFragment() === false ) && availableRoutes().left ) {

  7016. 			slide( indexh - 1, config.navigationMode === 'grid' ? indexv : undefined );

  7017. 		}

  7018. 

  7019. 	}

  7020. 

  7021. 	function navigateRight() {

  7022. 

  7023. 		hasNavigatedRight = true;

  7024. 

  7025. 		// Reverse for RTL

  7026. 		if( config.rtl ) {

  7027. 			if( ( isOverview() || previousFragment() === false ) && availableRoutes().right ) {

  7028. 				slide( indexh - 1, config.navigationMode === 'grid' ? indexv : undefined );

  7029. 			}

  7030. 		}

  7031. 		// Normal navigation

  7032. 		else if( ( isOverview() || nextFragment() === false ) && availableRoutes().right ) {

  7033. 			slide( indexh + 1, config.navigationMode === 'grid' ? indexv : undefined );

  7034. 		}

  7035. 

  7036. 	}

  7037. 

  7038. 	function navigateUp() {

  7039. 

  7040. 		// Prioritize hiding fragments

  7041. 		if( ( isOverview() || previousFragment() === false ) && availableRoutes().up ) {

  7042. 			slide( indexh, indexv - 1 );

  7043. 		}

  7044. 

  7045. 	}

  7046. 

  7047. 	function navigateDown() {

  7048. 

  7049. 		hasNavigatedDown = true;

  7050. 

  7051. 		// Prioritize revealing fragments

  7052. 		if( ( isOverview() || nextFragment() === false ) && availableRoutes().down ) {

  7053. 			slide( indexh, indexv + 1 );

  7054. 		}

  7055. 

  7056. 	}

  7057. 

  7058. 	/**

  7059. 	 * Navigates backwards, prioritized in the following order:

  7060. 	 * 1) Previous fragment

  7061. 	 * 2) Previous vertical slide

  7062. 	 * 3) Previous horizontal slide

  7063. 	 */

  7064. 	function navigatePrev() {

  7065. 

  7066. 		// Prioritize revealing fragments

  7067. 		if( previousFragment() === false ) {

  7068. 			if( availableRoutes().up ) {

  7069. 				navigateUp();

  7070. 			}

  7071. 			else {

  7072. 				// Fetch the previous horizontal slide, if there is one

  7073. 				var previousSlide;

  7074. 

  7075. 				if( config.rtl ) {

  7076. 					previousSlide = toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR + '.future' ) ).pop();

  7077. 				}

  7078. 				else {

  7079. 					previousSlide = toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR + '.past' ) ).pop();

  7080. 				}

  7081. 

  7082. 				if( previousSlide ) {

  7083. 					var v = ( previousSlide.querySelectorAll( 'section' ).length - 1 ) || undefined;

  7084. 					var h = indexh - 1;

  7085. 					slide( h, v );

  7086. 				}

  7087. 			}

  7088. 		}

  7089. 

  7090. 	}

  7091. 

  7092. 	/**

  7093. 	 * The reverse of #navigatePrev().

  7094. 	 */

  7095. 	function navigateNext() {

  7096. 

  7097. 		hasNavigatedRight = true;

  7098. 		hasNavigatedDown = true;

  7099. 

  7100. 		// Prioritize revealing fragments

  7101. 		if( nextFragment() === false ) {

  7102. 

  7103. 			var routes = availableRoutes();

  7104. 

  7105. 			// When looping is enabled `routes.down` is always available

  7106. 			// so we need a separate check for when we've reached the

  7107. 			// end of a stack and should move horizontally

  7108. 			if( routes.down && routes.right && config.loop && Reveal.isLastVerticalSlide( currentSlide ) ) {

  7109. 				routes.down = false;

  7110. 			}

  7111. 

  7112. 			if( routes.down ) {

  7113. 				navigateDown();

  7114. 			}

  7115. 			else if( config.rtl ) {

  7116. 				navigateLeft();

  7117. 			}

  7118. 			else {

  7119. 				navigateRight();

  7120. 			}

  7121. 		}

  7122. 

  7123. 	}

  7124. 

  7125. 	/**

  7126. 	 * Checks if the target element prevents the triggering of

  7127. 	 * swipe navigation.

  7128. 	 */

  7129. 	function isSwipePrevented( target ) {

  7130. 

  7131. 		while( target && typeof target.hasAttribute === 'function' ) {

  7132. 			if( target.hasAttribute( 'data-prevent-swipe' ) ) return true;

  7133. 			target = target.parentNode;

  7134. 		}

  7135. 

  7136. 		return false;

  7137. 

  7138. 	}

  7139. 

  7140. 

  7141. 	// --------------------------------------------------------------------//

  7142. 	// ----------------------------- EVENTS -------------------------------//

  7143. 	// --------------------------------------------------------------------//

  7144. 

  7145. 	/**

  7146. 	 * Called by all event handlers that are based on user

  7147. 	 * input.

  7148. 	 *

  7149. 	 * @param {object} [event]

  7150. 	 */

  7151. 	function onUserInput( event ) {

  7152. 

  7153. 		if( config.autoSlideStoppable ) {

  7154. 			pauseAutoSlide();

  7155. 		}

  7156. 

  7157. 	}

  7158. 

  7159. 	/**

  7160. 	 * Called whenever there is mouse input at the document level

  7161. 	 * to determine if the cursor is active or not.

  7162. 	 *

  7163. 	 * @param {object} event

  7164. 	 */

  7165. 	function onDocumentCursorActive( event ) {

  7166. 

  7167. 		showCursor();

  7168. 

  7169. 		clearTimeout( cursorInactiveTimeout );

  7170. 

  7171. 		cursorInactiveTimeout = setTimeout( hideCursor, config.hideCursorTime );

  7172. 

  7173. 	}

  7174. 

  7175. 	/**

  7176. 	 * Handler for the document level 'keypress' event.

  7177. 	 *

  7178. 	 * @param {object} event

  7179. 	 */

  7180. 	function onDocumentKeyPress( event ) {

  7181. 

  7182. 		// Check if the pressed key is question mark

  7183. 		if( event.shiftKey && event.charCode === 63 ) {

  7184. 			toggleHelp();

  7185. 		}

  7186. 

  7187. 	}

  7188. 

  7189. 	/**

  7190. 	 * Handler for the document level 'keydown' event.

  7191. 	 *

  7192. 	 * @param {object} event

  7193. 	 */

  7194. 	function onDocumentKeyDown( event ) {

  7195. 

  7196. 		// If there's a condition specified and it returns false,

  7197. 		// ignore this event

  7198. 		if( typeof config.keyboardCondition === 'function' && config.keyboardCondition(event) === false ) {

  7199. 			return true;

  7200. 		}

  7201. 

  7202. 		// Shorthand

  7203. 		var keyCode = event.keyCode;

  7204. 

  7205. 		// Remember if auto-sliding was paused so we can toggle it

  7206. 		var autoSlideWasPaused = autoSlidePaused;

  7207. 

  7208. 		onUserInput( event );

  7209. 

  7210. 		// Is there a focused element that could be using the keyboard?

  7211. 		var activeElementIsCE = document.activeElement && document.activeElement.contentEditable !== 'inherit';

  7212. 		var activeElementIsInput = document.activeElement && document.activeElement.tagName && /input|textarea/i.test( document.activeElement.tagName );

  7213. 		var activeElementIsNotes = document.activeElement && document.activeElement.className && /speaker-notes/i.test( document.activeElement.className);

  7214. 

  7215. 		// Whitelist specific modified + keycode combinations

  7216. 		var prevSlideShortcut = event.shiftKey && event.keyCode === 32;

  7217. 		var firstSlideShortcut = ( event.metaKey || event.ctrlKey ) && keyCode === 37;

  7218. 		var lastSlideShortcut = ( event.metaKey || event.ctrlKey ) && keyCode === 39;

  7219. 

  7220. 		// Prevent all other events when a modifier is pressed

  7221. 		var unusedModifier = 	!prevSlideShortcut && !firstSlideShortcut && !lastSlideShortcut &&

  7222. 								( event.shiftKey || event.altKey || event.ctrlKey || event.metaKey );

  7223. 

  7224. 		// Disregard the event if there's a focused element or a

  7225. 		// keyboard modifier key is present

  7226. 		if( activeElementIsCE || activeElementIsInput || activeElementIsNotes || unusedModifier ) return;

  7227. 

  7228. 		// While paused only allow resume keyboard events; 'b', 'v', '.'

  7229. 		var resumeKeyCodes = [66,86,190,191];

  7230. 		var key;

  7231. 

  7232. 		// Custom key bindings for togglePause should be able to resume

  7233. 		if( typeof config.keyboard === 'object' ) {

  7234. 			for( key in config.keyboard ) {

  7235. 				if( config.keyboard[key] === 'togglePause' ) {

  7236. 					resumeKeyCodes.push( parseInt( key, 10 ) );

  7237. 				}

  7238. 			}

  7239. 		}

  7240. 

  7241. 		if( isPaused() && resumeKeyCodes.indexOf( keyCode ) === -1 ) {

  7242. 			return false;

  7243. 		}

  7244. 

  7245. 		var triggered = false;

  7246. 

  7247. 		// 1. User defined key bindings

  7248. 		if( typeof config.keyboard === 'object' ) {

  7249. 

  7250. 			for( key in config.keyboard ) {

  7251. 

  7252. 				// Check if this binding matches the pressed key

  7253. 				if( parseInt( key, 10 ) === keyCode ) {

  7254. 

  7255. 					var value = config.keyboard[ key ];

  7256. 

  7257. 					// Callback function

  7258. 					if( typeof value === 'function' ) {

  7259. 						value.apply( null, [ event ] );

  7260. 					}

  7261. 					// String shortcuts to reveal.js API

  7262. 					else if( typeof value === 'string' && typeof Reveal[ value ] === 'function' ) {

  7263. 						Reveal[ value ].call();

  7264. 					}

  7265. 

  7266. 					triggered = true;

  7267. 

  7268. 				}

  7269. 

  7270. 			}

  7271. 

  7272. 		}

  7273. 

  7274. 		// 2. Registered custom key bindings

  7275. 		if( triggered === false ) {

  7276. 

  7277. 			for( key in registeredKeyBindings ) {

  7278. 

  7279. 				// Check if this binding matches the pressed key

  7280. 				if( parseInt( key, 10 ) === keyCode ) {

  7281. 

  7282. 					var action = registeredKeyBindings[ key ].callback;

  7283. 

  7284. 					// Callback function

  7285. 					if( typeof action === 'function' ) {

  7286. 						action.apply( null, [ event ] );

  7287. 					}

  7288. 					// String shortcuts to reveal.js API

  7289. 					else if( typeof action === 'string' && typeof Reveal[ action ] === 'function' ) {

  7290. 						Reveal[ action ].call();

  7291. 					}

  7292. 

  7293. 					triggered = true;

  7294. 				}

  7295. 			}

  7296. 		}

  7297. 

  7298. 		// 3. System defined key bindings

  7299. 		if( triggered === false ) {

  7300. 

  7301. 			// Assume true and try to prove false

  7302. 			triggered = true;

  7303. 

  7304. 			// P, PAGE UP

  7305. 			if( keyCode === 80 || keyCode === 33 ) {

  7306. 				navigatePrev();

  7307. 			}

  7308. 			// N, PAGE DOWN

  7309. 			else if( keyCode === 78 || keyCode === 34 ) {

  7310. 				navigateNext();

  7311. 			}

  7312. 			// H, LEFT

  7313. 			else if( keyCode === 72 || keyCode === 37 ) {

  7314. 				if( firstSlideShortcut ) {

  7315. 					slide( 0 );

  7316. 				}

  7317. 				else if( !isOverview() && config.navigationMode === 'linear' ) {

  7318. 					navigatePrev();

  7319. 				}

  7320. 				else {

  7321. 					navigateLeft();

  7322. 				}

  7323. 			}

  7324. 			// L, RIGHT

  7325. 			else if( keyCode === 76 || keyCode === 39 ) {

  7326. 				if( lastSlideShortcut ) {

  7327. 					slide( Number.MAX_VALUE );

  7328. 				}

  7329. 				else if( !isOverview() && config.navigationMode === 'linear' ) {

  7330. 					navigateNext();

  7331. 				}

  7332. 				else {

  7333. 					navigateRight();

  7334. 				}

  7335. 			}

  7336. 			// K, UP

  7337. 			else if( keyCode === 75 || keyCode === 38 ) {

  7338. 				if( !isOverview() && config.navigationMode === 'linear' ) {

  7339. 					navigatePrev();

  7340. 				}

  7341. 				else {

  7342. 					navigateUp();

  7343. 				}

  7344. 			}

  7345. 			// J, DOWN

  7346. 			else if( keyCode === 74 || keyCode === 40 ) {

  7347. 				if( !isOverview() && config.navigationMode === 'linear' ) {

  7348. 					navigateNext();

  7349. 				}

  7350. 				else {

  7351. 					navigateDown();

  7352. 				}

  7353. 			}

  7354. 			// HOME

  7355. 			else if( keyCode === 36 ) {

  7356. 				slide( 0 );

  7357. 			}

  7358. 			// END

  7359. 			else if( keyCode === 35 ) {

  7360. 				slide( Number.MAX_VALUE );

  7361. 			}

  7362. 			// SPACE

  7363. 			else if( keyCode === 32 ) {

  7364. 				if( isOverview() ) {

  7365. 					deactivateOverview();

  7366. 				}

  7367. 				if( event.shiftKey ) {

  7368. 					navigatePrev();

  7369. 				}

  7370. 				else {

  7371. 					navigateNext();

  7372. 				}

  7373. 			}

  7374. 			// TWO-SPOT, SEMICOLON, B, V, PERIOD, LOGITECH PRESENTER TOOLS "BLACK SCREEN" BUTTON

  7375. 			else if( keyCode === 58 || keyCode === 59 || keyCode === 66 || keyCode === 86 || keyCode === 190 || keyCode === 191 ) {

  7376. 				togglePause();

  7377. 			}

  7378. 			// F

  7379. 			else if( keyCode === 70 ) {

  7380. 				enterFullscreen();

  7381. 			}

  7382. 			// A

  7383. 			else if( keyCode === 65 ) {

  7384. 				if ( config.autoSlideStoppable ) {

  7385. 					toggleAutoSlide( autoSlideWasPaused );

  7386. 				}

  7387. 			}

  7388. 			else {

  7389. 				triggered = false;

  7390. 			}

  7391. 

  7392. 		}

  7393. 

  7394. 		// If the input resulted in a triggered action we should prevent

  7395. 		// the browsers default behavior

  7396. 		if( triggered ) {

  7397. 			event.preventDefault && event.preventDefault();

  7398. 		}

  7399. 		// ESC or O key

  7400. 		else if ( ( keyCode === 27 || keyCode === 79 ) && features.transforms3d ) {

  7401. 			if( dom.overlay ) {

  7402. 				closeOverlay();

  7403. 			}

  7404. 			else {

  7405. 				toggleOverview();

  7406. 			}

  7407. 

  7408. 			event.preventDefault && event.preventDefault();

  7409. 		}

  7410. 

  7411. 		// If auto-sliding is enabled we need to cue up

  7412. 		// another timeout

  7413. 		cueAutoSlide();

  7414. 

  7415. 	}

  7416. 

  7417. 	/**

  7418. 	 * Handler for the 'touchstart' event, enables support for

  7419. 	 * swipe and pinch gestures.

  7420. 	 *

  7421. 	 * @param {object} event

  7422. 	 */

  7423. 	function onTouchStart( event ) {

  7424. 

  7425. 		if( isSwipePrevented( event.target ) ) return true;

  7426. 

  7427. 		touch.startX = event.touches[0].clientX;

  7428. 		touch.startY = event.touches[0].clientY;

  7429. 		touch.startCount = event.touches.length;

  7430. 

  7431. 	}

  7432. 

  7433. 	/**

  7434. 	 * Handler for the 'touchmove' event.

  7435. 	 *

  7436. 	 * @param {object} event

  7437. 	 */

  7438. 	function onTouchMove( event ) {

  7439. 

  7440. 		if( isSwipePrevented( event.target ) ) return true;

  7441. 

  7442. 		// Each touch should only trigger one action

  7443. 		if( !touch.captured ) {

  7444. 			onUserInput( event );

  7445. 

  7446. 			var currentX = event.touches[0].clientX;

  7447. 			var currentY = event.touches[0].clientY;

  7448. 

  7449. 			// There was only one touch point, look for a swipe

  7450. 			if( event.touches.length === 1 && touch.startCount !== 2 ) {

  7451. 

  7452. 				var deltaX = currentX - touch.startX,

  7453. 					deltaY = currentY - touch.startY;

  7454. 

  7455. 				if( deltaX > touch.threshold && Math.abs( deltaX ) > Math.abs( deltaY ) ) {

  7456. 					touch.captured = true;

  7457. 					navigateLeft();

  7458. 				}

  7459. 				else if( deltaX < -touch.threshold && Math.abs( deltaX ) > Math.abs( deltaY ) ) {

  7460. 					touch.captured = true;

  7461. 					navigateRight();

  7462. 				}

  7463. 				else if( deltaY > touch.threshold ) {

  7464. 					touch.captured = true;

  7465. 					navigateUp();

  7466. 				}

  7467. 				else if( deltaY < -touch.threshold ) {

  7468. 					touch.captured = true;

  7469. 					navigateDown();

  7470. 				}

  7471. 

  7472. 				// If we're embedded, only block touch events if they have

  7473. 				// triggered an action

  7474. 				if( config.embedded ) {

  7475. 					if( touch.captured || isVerticalSlide( currentSlide ) ) {

  7476. 						event.preventDefault();

  7477. 					}

  7478. 				}

  7479. 				// Not embedded? Block them all to avoid needless tossing

  7480. 				// around of the viewport in iOS

  7481. 				else {

  7482. 					event.preventDefault();

  7483. 				}

  7484. 

  7485. 			}

  7486. 		}

  7487. 		// There's a bug with swiping on some Android devices unless

  7488. 		// the default action is always prevented

  7489. 		else if( UA.match( /android/gi ) ) {

  7490. 			event.preventDefault();

  7491. 		}

  7492. 

  7493. 	}

  7494. 

  7495. 	/**

  7496. 	 * Handler for the 'touchend' event.

  7497. 	 *

  7498. 	 * @param {object} event

  7499. 	 */

  7500. 	function onTouchEnd( event ) {

  7501. 

  7502. 		touch.captured = false;

  7503. 

  7504. 	}

  7505. 

  7506. 	/**

  7507. 	 * Convert pointer down to touch start.

  7508. 	 *

  7509. 	 * @param {object} event

  7510. 	 */

  7511. 	function onPointerDown( event ) {

  7512. 

  7513. 		if( event.pointerType === event.MSPOINTER_TYPE_TOUCH || event.pointerType === "touch" ) {

  7514. 			event.touches = [{ clientX: event.clientX, clientY: event.clientY }];

  7515. 			onTouchStart( event );

  7516. 		}

  7517. 

  7518. 	}

  7519. 

  7520. 	/**

  7521. 	 * Convert pointer move to touch move.

  7522. 	 *

  7523. 	 * @param {object} event

  7524. 	 */

  7525. 	function onPointerMove( event ) {

  7526. 

  7527. 		if( event.pointerType === event.MSPOINTER_TYPE_TOUCH || event.pointerType === "touch" )  {

  7528. 			event.touches = [{ clientX: event.clientX, clientY: event.clientY }];

  7529. 			onTouchMove( event );

  7530. 		}

  7531. 

  7532. 	}

  7533. 

  7534. 	/**

  7535. 	 * Convert pointer up to touch end.

  7536. 	 *

  7537. 	 * @param {object} event

  7538. 	 */

  7539. 	function onPointerUp( event ) {

  7540. 

  7541. 		if( event.pointerType === event.MSPOINTER_TYPE_TOUCH || event.pointerType === "touch" )  {

  7542. 			event.touches = [{ clientX: event.clientX, clientY: event.clientY }];

  7543. 			onTouchEnd( event );

  7544. 		}

  7545. 

  7546. 	}

  7547. 

  7548. 	/**

  7549. 	 * Handles mouse wheel scrolling, throttled to avoid skipping

  7550. 	 * multiple slides.

  7551. 	 *

  7552. 	 * @param {object} event

  7553. 	 */

  7554. 	function onDocumentMouseScroll( event ) {

  7555. 

  7556. 		if( Date.now() - lastMouseWheelStep > 600 ) {

  7557. 

  7558. 			lastMouseWheelStep = Date.now();

  7559. 

  7560. 			var delta = event.detail || -event.wheelDelta;

  7561. 			if( delta > 0 ) {

  7562. 				navigateNext();

  7563. 			}

  7564. 			else if( delta < 0 ) {

  7565. 				navigatePrev();

  7566. 			}

  7567. 

  7568. 		}

  7569. 

  7570. 	}

  7571. 

  7572. 	/**

  7573. 	 * Clicking on the progress bar results in a navigation to the

  7574. 	 * closest approximate horizontal slide using this equation:

  7575. 	 *

  7576. 	 * ( clickX / presentationWidth ) * numberOfSlides

  7577. 	 *

  7578. 	 * @param {object} event

  7579. 	 */

  7580. 	function onProgressClicked( event ) {

  7581. 

  7582. 		onUserInput( event );

  7583. 

  7584. 		event.preventDefault();

  7585. 

  7586. 		var slidesTotal = toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).length;

  7587. 		var slideIndex = Math.floor( ( event.clientX / dom.wrapper.offsetWidth ) * slidesTotal );

  7588. 

  7589. 		if( config.rtl ) {

  7590. 			slideIndex = slidesTotal - slideIndex;

  7591. 		}

  7592. 

  7593. 		slide( slideIndex );

  7594. 

  7595. 	}

  7596. 

  7597. 	/**

  7598. 	 * Event handler for navigation control buttons.

  7599. 	 */

  7600. 	function onNavigateLeftClicked( event ) { event.preventDefault(); onUserInput(); config.navigationMode === 'linear' ? navigatePrev() : navigateLeft(); }

  7601. 	function onNavigateRightClicked( event ) { event.preventDefault(); onUserInput(); config.navigationMode === 'linear' ? navigateNext() : navigateRight(); }

  7602. 	function onNavigateUpClicked( event ) { event.preventDefault(); onUserInput(); navigateUp(); }

  7603. 	function onNavigateDownClicked( event ) { event.preventDefault(); onUserInput(); navigateDown(); }

  7604. 	function onNavigatePrevClicked( event ) { event.preventDefault(); onUserInput(); navigatePrev(); }

  7605. 	function onNavigateNextClicked( event ) { event.preventDefault(); onUserInput(); navigateNext(); }

  7606. 

  7607. 	/**

  7608. 	 * Handler for the window level 'hashchange' event.

  7609. 	 *

  7610. 	 * @param {object} [event]

  7611. 	 */

  7612. 	function onWindowHashChange( event ) {

  7613. 

  7614. 		readURL();

  7615. 

  7616. 	}

  7617. 

  7618. 	/**

  7619. 	 * Handler for the window level 'resize' event.

  7620. 	 *

  7621. 	 * @param {object} [event]

  7622. 	 */

  7623. 	function onWindowResize( event ) {

  7624. 

  7625. 		layout();

  7626. 

  7627. 	}

  7628. 

  7629. 	/**

  7630. 	 * Handle for the window level 'visibilitychange' event.

  7631. 	 *

  7632. 	 * @param {object} [event]

  7633. 	 */

  7634. 	function onPageVisibilityChange( event ) {

  7635. 

  7636. 		var isHidden =  document.webkitHidden ||

  7637. 						document.msHidden ||

  7638. 						document.hidden;

  7639. 

  7640. 		// If, after clicking a link or similar and we're coming back,

  7641. 		// focus the document.body to ensure we can use keyboard shortcuts

  7642. 		if( isHidden === false && document.activeElement !== document.body ) {

  7643. 			// Not all elements support .blur() - SVGs among them.

  7644. 			if( typeof document.activeElement.blur === 'function' ) {

  7645. 				document.activeElement.blur();

  7646. 			}

  7647. 			document.body.focus();

  7648. 		}

  7649. 

  7650. 	}

  7651. 

  7652. 	/**

  7653. 	 * Invoked when a slide is and we're in the overview.

  7654. 	 *

  7655. 	 * @param {object} event

  7656. 	 */

  7657. 	function onOverviewSlideClicked( event ) {

  7658. 

  7659. 		// TODO There's a bug here where the event listeners are not

  7660. 		// removed after deactivating the overview.

  7661. 		if( eventsAreBound && isOverview() ) {

  7662. 			event.preventDefault();

  7663. 

  7664. 			var element = event.target;

  7665. 

  7666. 			while( element && !element.nodeName.match( /section/gi ) ) {

  7667. 				element = element.parentNode;

  7668. 			}

  7669. 

  7670. 			if( element && !element.classList.contains( 'disabled' ) ) {

  7671. 

  7672. 				deactivateOverview();

  7673. 

  7674. 				if( element.nodeName.match( /section/gi ) ) {

  7675. 					var h = parseInt( element.getAttribute( 'data-index-h' ), 10 ),

  7676. 						v = parseInt( element.getAttribute( 'data-index-v' ), 10 );

  7677. 

  7678. 					slide( h, v );

  7679. 				}

  7680. 

  7681. 			}

  7682. 		}

  7683. 

  7684. 	}

  7685. 

  7686. 	/**

  7687. 	 * Handles clicks on links that are set to preview in the

  7688. 	 * iframe overlay.

  7689. 	 *

  7690. 	 * @param {object} event

  7691. 	 */

  7692. 	function onPreviewLinkClicked( event ) {

  7693. 

  7694. 		if( event.currentTarget && event.currentTarget.hasAttribute( 'href' ) ) {

  7695. 			var url = event.currentTarget.getAttribute( 'href' );

  7696. 			if( url ) {

  7697. 				showPreview( url );

  7698. 				event.preventDefault();

  7699. 			}

  7700. 		}

  7701. 

  7702. 	}

  7703. 

  7704. 	/**

  7705. 	 * Handles click on the auto-sliding controls element.

  7706. 	 *

  7707. 	 * @param {object} [event]

  7708. 	 */

  7709. 	function onAutoSlidePlayerClick( event ) {

  7710. 

  7711. 		// Replay

  7712. 		if( Reveal.isLastSlide() && config.loop === false ) {

  7713. 			slide( 0, 0 );

  7714. 			resumeAutoSlide();

  7715. 		}

  7716. 		// Resume

  7717. 		else if( autoSlidePaused ) {

  7718. 			resumeAutoSlide();

  7719. 		}

  7720. 		// Pause

  7721. 		else {

  7722. 			pauseAutoSlide();

  7723. 		}

  7724. 

  7725. 	}

  7726. 

  7727. 

  7728. 	// --------------------------------------------------------------------//

  7729. 	// ------------------------ PLAYBACK COMPONENT ------------------------//

  7730. 	// --------------------------------------------------------------------//

  7731. 

  7732. 

  7733. 	/**

  7734. 	 * Constructor for the playback component, which displays

  7735. 	 * play/pause/progress controls.

  7736. 	 *

  7737. 	 * @param {HTMLElement} container The component will append

  7738. 	 * itself to this

  7739. 	 * @param {function} progressCheck A method which will be

  7740. 	 * called frequently to get the current progress on a range

  7741. 	 * of 0-1

  7742. 	 */

  7743. 	function Playback( container, progressCheck ) {

  7744. 

  7745. 		// Cosmetics

  7746. 		this.diameter = 100;

  7747. 		this.diameter2 = this.diameter/2;

  7748. 		this.thickness = 6;

  7749. 

  7750. 		// Flags if we are currently playing

  7751. 		this.playing = false;

  7752. 

  7753. 		// Current progress on a 0-1 range

  7754. 		this.progress = 0;

  7755. 

  7756. 		// Used to loop the animation smoothly

  7757. 		this.progressOffset = 1;

  7758. 

  7759. 		this.container = container;

  7760. 		this.progressCheck = progressCheck;

  7761. 

  7762. 		this.canvas = document.createElement( 'canvas' );

  7763. 		this.canvas.className = 'playback';

  7764. 		this.canvas.width = this.diameter;

  7765. 		this.canvas.height = this.diameter;

  7766. 		this.canvas.style.width = this.diameter2 + 'px';

  7767. 		this.canvas.style.height = this.diameter2 + 'px';

  7768. 		this.context = this.canvas.getContext( '2d' );

  7769. 

  7770. 		this.container.appendChild( this.canvas );

  7771. 

  7772. 		this.render();

  7773. 

  7774. 	}

  7775. 

  7776. 	/**

  7777. 	 * @param value

  7778. 	 */

  7779. 	Playback.prototype.setPlaying = function( value ) {

  7780. 

  7781. 		var wasPlaying = this.playing;

  7782. 

  7783. 		this.playing = value;

  7784. 

  7785. 		// Start repainting if we weren't already

  7786. 		if( !wasPlaying && this.playing ) {

  7787. 			this.animate();

  7788. 		}

  7789. 		else {

  7790. 			this.render();

  7791. 		}

  7792. 

  7793. 	};

  7794. 

  7795. 	Playback.prototype.animate = function() {

  7796. 

  7797. 		var progressBefore = this.progress;

  7798. 

  7799. 		this.progress = this.progressCheck();

  7800. 

  7801. 		// When we loop, offset the progress so that it eases

  7802. 		// smoothly rather than immediately resetting

  7803. 		if( progressBefore > 0.8 && this.progress < 0.2 ) {

  7804. 			this.progressOffset = this.progress;

  7805. 		}

  7806. 

  7807. 		this.render();

  7808. 

  7809. 		if( this.playing ) {

  7810. 			features.requestAnimationFrameMethod.call( window, this.animate.bind( this ) );

  7811. 		}

  7812. 

  7813. 	};

  7814. 

  7815. 	/**

  7816. 	 * Renders the current progress and playback state.

  7817. 	 */

  7818. 	Playback.prototype.render = function() {

  7819. 

  7820. 		var progress = this.playing ? this.progress : 0,

  7821. 			radius = ( this.diameter2 ) - this.thickness,

  7822. 			x = this.diameter2,

  7823. 			y = this.diameter2,

  7824. 			iconSize = 28;

  7825. 

  7826. 		// Ease towards 1

  7827. 		this.progressOffset += ( 1 - this.progressOffset ) * 0.1;

  7828. 

  7829. 		var endAngle = ( - Math.PI / 2 ) + ( progress * ( Math.PI * 2 ) );

  7830. 		var startAngle = ( - Math.PI / 2 ) + ( this.progressOffset * ( Math.PI * 2 ) );

  7831. 

  7832. 		this.context.save();

  7833. 		this.context.clearRect( 0, 0, this.diameter, this.diameter );

  7834. 

  7835. 		// Solid background color

  7836. 		this.context.beginPath();

  7837. 		this.context.arc( x, y, radius + 4, 0, Math.PI * 2, false );

  7838. 		this.context.fillStyle = 'rgba( 0, 0, 0, 0.4 )';

  7839. 		this.context.fill();

  7840. 

  7841. 		// Draw progress track

  7842. 		this.context.beginPath();

  7843. 		this.context.arc( x, y, radius, 0, Math.PI * 2, false );

  7844. 		this.context.lineWidth = this.thickness;

  7845. 		this.context.strokeStyle = 'rgba( 255, 255, 255, 0.2 )';

  7846. 		this.context.stroke();

  7847. 

  7848. 		if( this.playing ) {

  7849. 			// Draw progress on top of track

  7850. 			this.context.beginPath();

  7851. 			this.context.arc( x, y, radius, startAngle, endAngle, false );

  7852. 			this.context.lineWidth = this.thickness;

  7853. 			this.context.strokeStyle = '#fff';

  7854. 			this.context.stroke();

  7855. 		}

  7856. 

  7857. 		this.context.translate( x - ( iconSize / 2 ), y - ( iconSize / 2 ) );

  7858. 

  7859. 		// Draw play/pause icons

  7860. 		if( this.playing ) {

  7861. 			this.context.fillStyle = '#fff';

  7862. 			this.context.fillRect( 0, 0, iconSize / 2 - 4, iconSize );

  7863. 			this.context.fillRect( iconSize / 2 + 4, 0, iconSize / 2 - 4, iconSize );

  7864. 		}

  7865. 		else {

  7866. 			this.context.beginPath();

  7867. 			this.context.translate( 4, 0 );

  7868. 			this.context.moveTo( 0, 0 );

  7869. 			this.context.lineTo( iconSize - 4, iconSize / 2 );

  7870. 			this.context.lineTo( 0, iconSize );

  7871. 			this.context.fillStyle = '#fff';

  7872. 			this.context.fill();

  7873. 		}

  7874. 

  7875. 		this.context.restore();

  7876. 

  7877. 	};

  7878. 

  7879. 	Playback.prototype.on = function( type, listener ) {

  7880. 		this.canvas.addEventListener( type, listener, false );

  7881. 	};

  7882. 

  7883. 	Playback.prototype.off = function( type, listener ) {

  7884. 		this.canvas.removeEventListener( type, listener, false );

  7885. 	};

  7886. 

  7887. 	Playback.prototype.destroy = function() {

  7888. 

  7889. 		this.playing = false;

  7890. 

  7891. 		if( this.canvas.parentNode ) {

  7892. 			this.container.removeChild( this.canvas );

  7893. 		}

  7894. 

  7895. 	};

  7896. 

  7897. 

  7898. 	// --------------------------------------------------------------------//

  7899. 	// ------------------------------- API --------------------------------//

  7900. 	// --------------------------------------------------------------------//

  7901. 

  7902. 

  7903. 	Reveal = {

  7904. 		VERSION: VERSION,

  7905. 

  7906. 		initialize: initialize,

  7907. 		configure: configure,

  7908. 

  7909. 		sync: sync,

  7910. 		syncSlide: syncSlide,

  7911. 		syncFragments: syncFragments,

  7912. 

  7913. 		// Navigation methods

  7914. 		slide: slide,

  7915. 		left: navigateLeft,

  7916. 		right: navigateRight,

  7917. 		up: navigateUp,

  7918. 		down: navigateDown,

  7919. 		prev: navigatePrev,

  7920. 		next: navigateNext,

  7921. 

  7922. 		// Fragment methods

  7923. 		navigateFragment: navigateFragment,

  7924. 		prevFragment: previousFragment,

  7925. 		nextFragment: nextFragment,

  7926. 

  7927. 		// Deprecated aliases

  7928. 		navigateTo: slide,

  7929. 		navigateLeft: navigateLeft,

  7930. 		navigateRight: navigateRight,

  7931. 		navigateUp: navigateUp,

  7932. 		navigateDown: navigateDown,

  7933. 		navigatePrev: navigatePrev,

  7934. 		navigateNext: navigateNext,

  7935. 

  7936. 		// Forces an update in slide layout

  7937. 		layout: layout,

  7938. 

  7939. 		// Randomizes the order of slides

  7940. 		shuffle: shuffle,

  7941. 

  7942. 		// Returns an object with the available routes as booleans (left/right/top/bottom)

  7943. 		availableRoutes: availableRoutes,

  7944. 

  7945. 		// Returns an object with the available fragments as booleans (prev/next)

  7946. 		availableFragments: availableFragments,

  7947. 

  7948. 		// Toggles a help overlay with keyboard shortcuts

  7949. 		toggleHelp: toggleHelp,

  7950. 

  7951. 		// Toggles the overview mode on/off

  7952. 		toggleOverview: toggleOverview,

  7953. 

  7954. 		// Toggles the "black screen" mode on/off

  7955. 		togglePause: togglePause,

  7956. 

  7957. 		// Toggles the auto slide mode on/off

  7958. 		toggleAutoSlide: toggleAutoSlide,

  7959. 

  7960. 		// State checks

  7961. 		isOverview: isOverview,

  7962. 		isPaused: isPaused,

  7963. 		isAutoSliding: isAutoSliding,

  7964. 		isSpeakerNotes: isSpeakerNotes,

  7965. 

  7966. 		// Slide preloading

  7967. 		loadSlide: loadSlide,

  7968. 		unloadSlide: unloadSlide,

  7969. 

  7970. 		// Adds or removes all internal event listeners (such as keyboard)

  7971. 		addEventListeners: addEventListeners,

  7972. 		removeEventListeners: removeEventListeners,

  7973. 

  7974. 		// Facility for persisting and restoring the presentation state

  7975. 		getState: getState,

  7976. 		setState: setState,

  7977. 

  7978. 		// Presentation progress

  7979. 		getSlidePastCount: getSlidePastCount,

  7980. 

  7981. 		// Presentation progress on range of 0-1

  7982. 		getProgress: getProgress,

  7983. 

  7984. 		// Returns the indices of the current, or specified, slide

  7985. 		getIndices: getIndices,

  7986. 

  7987. 		// Returns an Array of all slides

  7988. 		getSlides: getSlides,

  7989. 

  7990. 		// Returns an Array of objects representing the attributes on

  7991. 		// the slides

  7992. 		getSlidesAttributes: getSlidesAttributes,

  7993. 

  7994. 		// Returns the total number of slides

  7995. 		getTotalSlides: getTotalSlides,

  7996. 

  7997. 		// Returns the slide element at the specified index

  7998. 		getSlide: getSlide,

  7999. 

  8000. 		// Returns the slide background element at the specified index

  8001. 		getSlideBackground: getSlideBackground,

  8002. 

  8003. 		// Returns the speaker notes string for a slide, or null

  8004. 		getSlideNotes: getSlideNotes,

  8005. 

  8006. 		// Returns the previous slide element, may be null

  8007. 		getPreviousSlide: function() {

  8008. 			return previousSlide;

  8009. 		},

  8010. 

  8011. 		// Returns the current slide element

  8012. 		getCurrentSlide: function() {

  8013. 			return currentSlide;

  8014. 		},

  8015. 

  8016. 		// Returns the current scale of the presentation content

  8017. 		getScale: function() {

  8018. 			return scale;

  8019. 		},

  8020. 

  8021. 		// Returns the current configuration object

  8022. 		getConfig: function() {

  8023. 			return config;

  8024. 		},

  8025. 

  8026. 		// Helper method, retrieves query string as a key/value hash

  8027. 		getQueryHash: function() {

  8028. 			var query = {};

  8029. 

  8030. 			location.search.replace( /[A-Z0-9]+?=([\w\.%-]*)/gi, function(a) {

  8031. 				query[ a.split( '=' ).shift() ] = a.split( '=' ).pop();

  8032. 			} );

  8033. 

  8034. 			// Basic deserialization

  8035. 			for( var i in query ) {

  8036. 				var value = query[ i ];

  8037. 

  8038. 				query[ i ] = deserialize( unescape( value ) );

  8039. 			}

  8040. 

  8041. 			return query;

  8042. 		},

  8043. 

  8044. 		// Returns the top-level DOM element

  8045. 		getRevealElement: function() {

  8046. 			return dom.wrapper || document.querySelector( '.reveal' );

  8047. 		},

  8048. 

  8049. 		// Returns a hash with all registered plugins

  8050. 		getPlugins: function() {

  8051. 			return plugins;

  8052. 		},

  8053. 

  8054. 		// Returns true if we're currently on the first slide

  8055. 		isFirstSlide: function() {

  8056. 			return ( indexh === 0 && indexv === 0 );

  8057. 		},

  8058. 

  8059. 		// Returns true if we're currently on the last slide

  8060. 		isLastSlide: function() {

  8061. 			if( currentSlide ) {

  8062. 				// Does this slide have a next sibling?

  8063. 				if( currentSlide.nextElementSibling ) return false;

  8064. 

  8065. 				// If it's vertical, does its parent have a next sibling?

  8066. 				if( isVerticalSlide( currentSlide ) && currentSlide.parentNode.nextElementSibling ) return false;

  8067. 

  8068. 				return true;

  8069. 			}

  8070. 

  8071. 			return false;

  8072. 		},

  8073. 

  8074. 		// Returns true if we're on the last slide in the current

  8075. 		// vertical stack

  8076. 		isLastVerticalSlide: function() {

  8077. 			if( currentSlide && isVerticalSlide( currentSlide ) ) {

  8078. 				// Does this slide have a next sibling?

  8079. 				if( currentSlide.nextElementSibling ) return false;

  8080. 

  8081. 				return true;

  8082. 			}

  8083. 

  8084. 			return false;

  8085. 		},

  8086. 

  8087. 		// Checks if reveal.js has been loaded and is ready for use

  8088. 		isReady: function() {

  8089. 			return loaded;

  8090. 		},

  8091. 

  8092. 		// Forward event binding to the reveal DOM element

  8093. 		addEventListener: function( type, listener, useCapture ) {

  8094. 			if( 'addEventListener' in window ) {

  8095. 				Reveal.getRevealElement().addEventListener( type, listener, useCapture );

  8096. 			}

  8097. 		},

  8098. 		removeEventListener: function( type, listener, useCapture ) {

  8099. 			if( 'addEventListener' in window ) {

  8100. 				Reveal.getRevealElement().removeEventListener( type, listener, useCapture );

  8101. 			}

  8102. 		},

  8103. 

  8104. 		// Adds/removes a custom key binding

  8105. 		addKeyBinding: addKeyBinding,

  8106. 		removeKeyBinding: removeKeyBinding,

  8107. 

  8108. 		// API for registering and retrieving plugins

  8109. 		registerPlugin: registerPlugin,

  8110. 		hasPlugin: hasPlugin,

  8111. 		getPlugin: getPlugin,

  8112. 

  8113. 		// Programmatically triggers a keyboard event

  8114. 		triggerKey: function( keyCode ) {

  8115. 			onDocumentKeyDown( { keyCode: keyCode } );

  8116. 		},

  8117. 

  8118. 		// Registers a new shortcut to include in the help overlay

  8119. 		registerKeyboardShortcut: function( key, value ) {

  8120. 			keyboardShortcuts[key] = value;

  8121. 		}

  8122. 	};

  8123. 

  8124. 	return Reveal;

  8125. 

  8126. }));

  8127. 			Reveal.initialize();

  8128.         </script>

  8129. 	</body>

  8130. </html>