reveal.js 80 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059
  1. import SlideContent from './controllers/slidecontent.js'
  2. import SlideNumber from './controllers/slidenumber.js'
  3. import JumpToSlide from './controllers/jumptoslide.js'
  4. import Backgrounds from './controllers/backgrounds.js'
  5. import AutoAnimate from './controllers/autoanimate.js'
  6. import ScrollView from './controllers/scrollview.js'
  7. import PrintView from './controllers/printview.js'
  8. import Fragments from './controllers/fragments.js'
  9. import Overview from './controllers/overview.js'
  10. import Keyboard from './controllers/keyboard.js'
  11. import Location from './controllers/location.js'
  12. import Controls from './controllers/controls.js'
  13. import Progress from './controllers/progress.js'
  14. import Pointer from './controllers/pointer.js'
  15. import Plugins from './controllers/plugins.js'
  16. import Touch from './controllers/touch.js'
  17. import Focus from './controllers/focus.js'
  18. import Notes from './controllers/notes.js'
  19. import Playback from './components/playback.js'
  20. import defaultConfig from './config.js'
  21. import * as Util from './utils/util.js'
  22. import * as Device from './utils/device.js'
  23. import {
  24. SLIDES_SELECTOR,
  25. HORIZONTAL_SLIDES_SELECTOR,
  26. VERTICAL_SLIDES_SELECTOR,
  27. POST_MESSAGE_METHOD_BLACKLIST
  28. } from './utils/constants.js'
  29. // The reveal.js version
  30. export const VERSION = '5.0.1';
  31. /**
  32. * reveal.js
  33. * https://revealjs.com
  34. * MIT licensed
  35. *
  36. * Copyright (C) 2011-2022 Hakim El Hattab, https://hakim.se
  37. */
  38. export default function( revealElement, options ) {
  39. // Support initialization with no args, one arg
  40. // [options] or two args [revealElement, options]
  41. if( arguments.length < 2 ) {
  42. options = arguments[0];
  43. revealElement = document.querySelector( '.reveal' );
  44. }
  45. const Reveal = {};
  46. // Configuration defaults, can be overridden at initialization time
  47. let config = {},
  48. // Flags if reveal.js is loaded (has dispatched the 'ready' event)
  49. ready = false,
  50. // The horizontal and vertical index of the currently active slide
  51. indexh,
  52. indexv,
  53. // The previous and current slide HTML elements
  54. previousSlide,
  55. currentSlide,
  56. // Remember which directions that the user has navigated towards
  57. navigationHistory = {
  58. hasNavigatedHorizontally: false,
  59. hasNavigatedVertically: false
  60. },
  61. // Slides may have a data-state attribute which we pick up and apply
  62. // as a class to the body. This list contains the combined state of
  63. // all current slides.
  64. state = [],
  65. // The current scale of the presentation (see width/height config)
  66. scale = 1,
  67. // CSS transform that is currently applied to the slides container,
  68. // split into two groups
  69. slidesTransform = { layout: '', overview: '' },
  70. // Cached references to DOM elements
  71. dom = {},
  72. // Flags if the interaction event listeners are bound
  73. eventsAreBound = false,
  74. // The current slide transition state; idle or running
  75. transition = 'idle',
  76. // The current auto-slide duration
  77. autoSlide = 0,
  78. // Auto slide properties
  79. autoSlidePlayer,
  80. autoSlideTimeout = 0,
  81. autoSlideStartTime = -1,
  82. autoSlidePaused = false,
  83. // Controllers for different aspects of our presentation. They're
  84. // all given direct references to this Reveal instance since there
  85. // may be multiple presentations running in parallel.
  86. slideContent = new SlideContent( Reveal ),
  87. slideNumber = new SlideNumber( Reveal ),
  88. jumpToSlide = new JumpToSlide( Reveal ),
  89. autoAnimate = new AutoAnimate( Reveal ),
  90. backgrounds = new Backgrounds( Reveal ),
  91. scrollView = new ScrollView( Reveal ),
  92. printView = new PrintView( Reveal ),
  93. fragments = new Fragments( Reveal ),
  94. overview = new Overview( Reveal ),
  95. keyboard = new Keyboard( Reveal ),
  96. location = new Location( Reveal ),
  97. controls = new Controls( Reveal ),
  98. progress = new Progress( Reveal ),
  99. pointer = new Pointer( Reveal ),
  100. plugins = new Plugins( Reveal ),
  101. focus = new Focus( Reveal ),
  102. touch = new Touch( Reveal ),
  103. notes = new Notes( Reveal );
  104. /**
  105. * Starts up the presentation.
  106. */
  107. function initialize( initOptions ) {
  108. if( !revealElement ) throw 'Unable to find presentation root (<div class="reveal">).';
  109. // Cache references to key DOM elements
  110. dom.wrapper = revealElement;
  111. dom.slides = revealElement.querySelector( '.slides' );
  112. if( !dom.slides ) throw 'Unable to find slides container (<div class="slides">).';
  113. // Compose our config object in order of increasing precedence:
  114. // 1. Default reveal.js options
  115. // 2. Options provided via Reveal.configure() prior to
  116. // initialization
  117. // 3. Options passed to the Reveal constructor
  118. // 4. Options passed to Reveal.initialize
  119. // 5. Query params
  120. config = { ...defaultConfig, ...config, ...options, ...initOptions, ...Util.getQueryHash() };
  121. // Legacy support for the ?print-pdf query
  122. if( /print-pdf/gi.test( window.location.search ) ) {
  123. config.view = 'print';
  124. }
  125. setViewport();
  126. // Force a layout when the whole page, incl fonts, has loaded
  127. window.addEventListener( 'load', layout, false );
  128. // Register plugins and load dependencies, then move on to #start()
  129. plugins.load( config.plugins, config.dependencies ).then( start );
  130. return new Promise( resolve => Reveal.on( 'ready', resolve ) );
  131. }
  132. /**
  133. * Encase the presentation in a reveal.js viewport. The
  134. * extent of the viewport differs based on configuration.
  135. */
  136. function setViewport() {
  137. // Embedded decks use the reveal element as their viewport
  138. if( config.embedded === true ) {
  139. dom.viewport = Util.closest( revealElement, '.reveal-viewport' ) || revealElement;
  140. }
  141. // Full-page decks use the body as their viewport
  142. else {
  143. dom.viewport = document.body;
  144. document.documentElement.classList.add( 'reveal-full-page' );
  145. }
  146. dom.viewport.classList.add( 'reveal-viewport' );
  147. }
  148. /**
  149. * Starts up reveal.js by binding input events and navigating
  150. * to the current URL deeplink if there is one.
  151. */
  152. function start() {
  153. ready = true;
  154. // Remove slides hidden with data-visibility
  155. removeHiddenSlides();
  156. // Make sure we've got all the DOM elements we need
  157. setupDOM();
  158. // Listen to messages posted to this window
  159. setupPostMessage();
  160. // Prevent the slides from being scrolled out of view
  161. setupScrollPrevention();
  162. // Adds bindings for fullscreen mode
  163. setupFullscreen();
  164. // Resets all vertical slides so that only the first is visible
  165. resetVerticalSlides();
  166. // Updates the presentation to match the current configuration values
  167. configure();
  168. // Create slide backgrounds
  169. backgrounds.update( true );
  170. // Activate the print/scroll view if configured
  171. activateInitialView();
  172. // Read the initial hash
  173. location.readURL();
  174. // Notify listeners that the presentation is ready but use a 1ms
  175. // timeout to ensure it's not fired synchronously after #initialize()
  176. setTimeout( () => {
  177. // Enable transitions now that we're loaded
  178. dom.slides.classList.remove( 'no-transition' );
  179. dom.wrapper.classList.add( 'ready' );
  180. dispatchEvent({
  181. type: 'ready',
  182. data: {
  183. indexh,
  184. indexv,
  185. currentSlide
  186. }
  187. });
  188. }, 1 );
  189. }
  190. /**
  191. * Activates the correct reveal.js view based on our config.
  192. * This is only invoked once during initialization.
  193. */
  194. function activateInitialView() {
  195. const activatePrintView = config.view === 'print';
  196. const activateScrollView = config.view === 'scroll' || config.view === 'reader';
  197. if( activatePrintView || activateScrollView ) {
  198. if( activatePrintView ) {
  199. removeEventListeners();
  200. }
  201. else {
  202. touch.unbind();
  203. }
  204. // Avoid content flickering during layout
  205. dom.viewport.classList.add( 'loading-scroll-mode' );
  206. if( activatePrintView ) {
  207. // The document needs to have loaded for the PDF layout
  208. // measurements to be accurate
  209. if( document.readyState === 'complete' ) {
  210. printView.activate();
  211. }
  212. else {
  213. window.addEventListener( 'load', () => printView.activate() );
  214. }
  215. }
  216. else {
  217. scrollView.activate();
  218. }
  219. }
  220. }
  221. /**
  222. * Removes all slides with data-visibility="hidden". This
  223. * is done right before the rest of the presentation is
  224. * initialized.
  225. *
  226. * If you want to show all hidden slides, initialize
  227. * reveal.js with showHiddenSlides set to true.
  228. */
  229. function removeHiddenSlides() {
  230. if( !config.showHiddenSlides ) {
  231. Util.queryAll( dom.wrapper, 'section[data-visibility="hidden"]' ).forEach( slide => {
  232. const parent = slide.parentNode;
  233. // If this slide is part of a stack and that stack will be
  234. // empty after removing the hidden slide, remove the entire
  235. // stack
  236. if( parent.childElementCount === 1 && /section/i.test( parent.nodeName ) ) {
  237. parent.remove();
  238. }
  239. else {
  240. slide.remove();
  241. }
  242. } );
  243. }
  244. }
  245. /**
  246. * Finds and stores references to DOM elements which are
  247. * required by the presentation. If a required element is
  248. * not found, it is created.
  249. */
  250. function setupDOM() {
  251. // Prevent transitions while we're loading
  252. dom.slides.classList.add( 'no-transition' );
  253. if( Device.isMobile ) {
  254. dom.wrapper.classList.add( 'no-hover' );
  255. }
  256. else {
  257. dom.wrapper.classList.remove( 'no-hover' );
  258. }
  259. backgrounds.render();
  260. slideNumber.render();
  261. jumpToSlide.render();
  262. controls.render();
  263. progress.render();
  264. notes.render();
  265. // Overlay graphic which is displayed during the paused mode
  266. dom.pauseOverlay = Util.createSingletonNode( dom.wrapper, 'div', 'pause-overlay', config.controls ? '<button class="resume-button">Resume presentation</button>' : null );
  267. dom.statusElement = createStatusElement();
  268. dom.wrapper.setAttribute( 'role', 'application' );
  269. }
  270. /**
  271. * Creates a hidden div with role aria-live to announce the
  272. * current slide content. Hide the div off-screen to make it
  273. * available only to Assistive Technologies.
  274. *
  275. * @return {HTMLElement}
  276. */
  277. function createStatusElement() {
  278. let statusElement = dom.wrapper.querySelector( '.aria-status' );
  279. if( !statusElement ) {
  280. statusElement = document.createElement( 'div' );
  281. statusElement.style.position = 'absolute';
  282. statusElement.style.height = '1px';
  283. statusElement.style.width = '1px';
  284. statusElement.style.overflow = 'hidden';
  285. statusElement.style.clip = 'rect( 1px, 1px, 1px, 1px )';
  286. statusElement.classList.add( 'aria-status' );
  287. statusElement.setAttribute( 'aria-live', 'polite' );
  288. statusElement.setAttribute( 'aria-atomic','true' );
  289. dom.wrapper.appendChild( statusElement );
  290. }
  291. return statusElement;
  292. }
  293. /**
  294. * Announces the given text to screen readers.
  295. */
  296. function announceStatus( value ) {
  297. dom.statusElement.textContent = value;
  298. }
  299. /**
  300. * Converts the given HTML element into a string of text
  301. * that can be announced to a screen reader. Hidden
  302. * elements are excluded.
  303. */
  304. function getStatusText( node ) {
  305. let text = '';
  306. // Text node
  307. if( node.nodeType === 3 ) {
  308. text += node.textContent;
  309. }
  310. // Element node
  311. else if( node.nodeType === 1 ) {
  312. let isAriaHidden = node.getAttribute( 'aria-hidden' );
  313. let isDisplayHidden = window.getComputedStyle( node )['display'] === 'none';
  314. if( isAriaHidden !== 'true' && !isDisplayHidden ) {
  315. Array.from( node.childNodes ).forEach( child => {
  316. text += getStatusText( child );
  317. } );
  318. }
  319. }
  320. text = text.trim();
  321. return text === '' ? '' : text + ' ';
  322. }
  323. /**
  324. * This is an unfortunate necessity. Some actions – such as
  325. * an input field being focused in an iframe or using the
  326. * keyboard to expand text selection beyond the bounds of
  327. * a slide – can trigger our content to be pushed out of view.
  328. * This scrolling can not be prevented by hiding overflow in
  329. * CSS (we already do) so we have to resort to repeatedly
  330. * checking if the slides have been offset :(
  331. */
  332. function setupScrollPrevention() {
  333. setInterval( () => {
  334. if( !scrollView.isActive() && dom.wrapper.scrollTop !== 0 || dom.wrapper.scrollLeft !== 0 ) {
  335. dom.wrapper.scrollTop = 0;
  336. dom.wrapper.scrollLeft = 0;
  337. }
  338. }, 1000 );
  339. }
  340. /**
  341. * After entering fullscreen we need to force a layout to
  342. * get our presentations to scale correctly. This behavior
  343. * is inconsistent across browsers but a force layout seems
  344. * to normalize it.
  345. */
  346. function setupFullscreen() {
  347. document.addEventListener( 'fullscreenchange', onFullscreenChange );
  348. document.addEventListener( 'webkitfullscreenchange', onFullscreenChange );
  349. }
  350. /**
  351. * Registers a listener to postMessage events, this makes it
  352. * possible to call all reveal.js API methods from another
  353. * window. For example:
  354. *
  355. * revealWindow.postMessage( JSON.stringify({
  356. * method: 'slide',
  357. * args: [ 2 ]
  358. * }), '*' );
  359. */
  360. function setupPostMessage() {
  361. if( config.postMessage ) {
  362. window.addEventListener( 'message', onPostMessage, false );
  363. }
  364. }
  365. /**
  366. * Applies the configuration settings from the config
  367. * object. May be called multiple times.
  368. *
  369. * @param {object} options
  370. */
  371. function configure( options ) {
  372. const oldConfig = { ...config }
  373. // New config options may be passed when this method
  374. // is invoked through the API after initialization
  375. if( typeof options === 'object' ) Util.extend( config, options );
  376. // Abort if reveal.js hasn't finished loading, config
  377. // changes will be applied automatically once ready
  378. if( Reveal.isReady() === false ) return;
  379. const numberOfSlides = dom.wrapper.querySelectorAll( SLIDES_SELECTOR ).length;
  380. // The transition is added as a class on the .reveal element
  381. dom.wrapper.classList.remove( oldConfig.transition );
  382. dom.wrapper.classList.add( config.transition );
  383. dom.wrapper.setAttribute( 'data-transition-speed', config.transitionSpeed );
  384. dom.wrapper.setAttribute( 'data-background-transition', config.backgroundTransition );
  385. // Expose our configured slide dimensions as custom props
  386. dom.viewport.style.setProperty( '--slide-width', typeof config.width === 'string' ? config.width : config.width + 'px' );
  387. dom.viewport.style.setProperty( '--slide-height', typeof config.height === 'string' ? config.height : config.height + 'px' );
  388. if( config.shuffle ) {
  389. shuffle();
  390. }
  391. Util.toggleClass( dom.wrapper, 'embedded', config.embedded );
  392. Util.toggleClass( dom.wrapper, 'rtl', config.rtl );
  393. Util.toggleClass( dom.wrapper, 'center', config.center );
  394. // Exit the paused mode if it was configured off
  395. if( config.pause === false ) {
  396. resume();
  397. }
  398. // Iframe link previews
  399. if( config.previewLinks ) {
  400. enablePreviewLinks();
  401. disablePreviewLinks( '[data-preview-link=false]' );
  402. }
  403. else {
  404. disablePreviewLinks();
  405. enablePreviewLinks( '[data-preview-link]:not([data-preview-link=false])' );
  406. }
  407. // Reset all changes made by auto-animations
  408. autoAnimate.reset();
  409. // Remove existing auto-slide controls
  410. if( autoSlidePlayer ) {
  411. autoSlidePlayer.destroy();
  412. autoSlidePlayer = null;
  413. }
  414. // Generate auto-slide controls if needed
  415. if( numberOfSlides > 1 && config.autoSlide && config.autoSlideStoppable ) {
  416. autoSlidePlayer = new Playback( dom.wrapper, () => {
  417. return Math.min( Math.max( ( Date.now() - autoSlideStartTime ) / autoSlide, 0 ), 1 );
  418. } );
  419. autoSlidePlayer.on( 'click', onAutoSlidePlayerClick );
  420. autoSlidePaused = false;
  421. }
  422. // Add the navigation mode to the DOM so we can adjust styling
  423. if( config.navigationMode !== 'default' ) {
  424. dom.wrapper.setAttribute( 'data-navigation-mode', config.navigationMode );
  425. }
  426. else {
  427. dom.wrapper.removeAttribute( 'data-navigation-mode' );
  428. }
  429. notes.configure( config, oldConfig );
  430. focus.configure( config, oldConfig );
  431. pointer.configure( config, oldConfig );
  432. controls.configure( config, oldConfig );
  433. progress.configure( config, oldConfig );
  434. keyboard.configure( config, oldConfig );
  435. fragments.configure( config, oldConfig );
  436. slideNumber.configure( config, oldConfig );
  437. sync();
  438. }
  439. /**
  440. * Binds all event listeners.
  441. */
  442. function addEventListeners() {
  443. eventsAreBound = true;
  444. window.addEventListener( 'resize', onWindowResize, false );
  445. if( config.touch ) touch.bind();
  446. if( config.keyboard ) keyboard.bind();
  447. if( config.progress ) progress.bind();
  448. if( config.respondToHashChanges ) location.bind();
  449. controls.bind();
  450. focus.bind();
  451. dom.slides.addEventListener( 'click', onSlidesClicked, false );
  452. dom.slides.addEventListener( 'transitionend', onTransitionEnd, false );
  453. dom.pauseOverlay.addEventListener( 'click', resume, false );
  454. if( config.focusBodyOnPageVisibilityChange ) {
  455. document.addEventListener( 'visibilitychange', onPageVisibilityChange, false );
  456. }
  457. }
  458. /**
  459. * Unbinds all event listeners.
  460. */
  461. function removeEventListeners() {
  462. eventsAreBound = false;
  463. touch.unbind();
  464. focus.unbind();
  465. keyboard.unbind();
  466. controls.unbind();
  467. progress.unbind();
  468. location.unbind();
  469. window.removeEventListener( 'resize', onWindowResize, false );
  470. dom.slides.removeEventListener( 'click', onSlidesClicked, false );
  471. dom.slides.removeEventListener( 'transitionend', onTransitionEnd, false );
  472. dom.pauseOverlay.removeEventListener( 'click', resume, false );
  473. }
  474. /**
  475. * Uninitializes reveal.js by undoing changes made to the
  476. * DOM and removing all event listeners.
  477. */
  478. function destroy() {
  479. removeEventListeners();
  480. cancelAutoSlide();
  481. disablePreviewLinks();
  482. // Destroy controllers
  483. notes.destroy();
  484. focus.destroy();
  485. plugins.destroy();
  486. pointer.destroy();
  487. controls.destroy();
  488. progress.destroy();
  489. backgrounds.destroy();
  490. slideNumber.destroy();
  491. jumpToSlide.destroy();
  492. // Remove event listeners
  493. document.removeEventListener( 'fullscreenchange', onFullscreenChange );
  494. document.removeEventListener( 'webkitfullscreenchange', onFullscreenChange );
  495. document.removeEventListener( 'visibilitychange', onPageVisibilityChange, false );
  496. window.removeEventListener( 'message', onPostMessage, false );
  497. window.removeEventListener( 'load', layout, false );
  498. // Undo DOM changes
  499. if( dom.pauseOverlay ) dom.pauseOverlay.remove();
  500. if( dom.statusElement ) dom.statusElement.remove();
  501. document.documentElement.classList.remove( 'reveal-full-page' );
  502. dom.wrapper.classList.remove( 'ready', 'center', 'has-horizontal-slides', 'has-vertical-slides' );
  503. dom.wrapper.removeAttribute( 'data-transition-speed' );
  504. dom.wrapper.removeAttribute( 'data-background-transition' );
  505. dom.viewport.classList.remove( 'reveal-viewport' );
  506. dom.viewport.style.removeProperty( '--slide-width' );
  507. dom.viewport.style.removeProperty( '--slide-height' );
  508. dom.slides.style.removeProperty( 'width' );
  509. dom.slides.style.removeProperty( 'height' );
  510. dom.slides.style.removeProperty( 'zoom' );
  511. dom.slides.style.removeProperty( 'left' );
  512. dom.slides.style.removeProperty( 'top' );
  513. dom.slides.style.removeProperty( 'bottom' );
  514. dom.slides.style.removeProperty( 'right' );
  515. dom.slides.style.removeProperty( 'transform' );
  516. Array.from( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ).forEach( slide => {
  517. slide.style.removeProperty( 'display' );
  518. slide.style.removeProperty( 'top' );
  519. slide.removeAttribute( 'hidden' );
  520. slide.removeAttribute( 'aria-hidden' );
  521. } );
  522. }
  523. /**
  524. * Adds a listener to one of our custom reveal.js events,
  525. * like slidechanged.
  526. */
  527. function on( type, listener, useCapture ) {
  528. revealElement.addEventListener( type, listener, useCapture );
  529. }
  530. /**
  531. * Unsubscribes from a reveal.js event.
  532. */
  533. function off( type, listener, useCapture ) {
  534. revealElement.removeEventListener( type, listener, useCapture );
  535. }
  536. /**
  537. * Applies CSS transforms to the slides container. The container
  538. * is transformed from two separate sources: layout and the overview
  539. * mode.
  540. *
  541. * @param {object} transforms
  542. */
  543. function transformSlides( transforms ) {
  544. // Pick up new transforms from arguments
  545. if( typeof transforms.layout === 'string' ) slidesTransform.layout = transforms.layout;
  546. if( typeof transforms.overview === 'string' ) slidesTransform.overview = transforms.overview;
  547. // Apply the transforms to the slides container
  548. if( slidesTransform.layout ) {
  549. Util.transformElement( dom.slides, slidesTransform.layout + ' ' + slidesTransform.overview );
  550. }
  551. else {
  552. Util.transformElement( dom.slides, slidesTransform.overview );
  553. }
  554. }
  555. /**
  556. * Dispatches an event of the specified type from the
  557. * reveal DOM element.
  558. */
  559. function dispatchEvent({ target=dom.wrapper, type, data, bubbles=true }) {
  560. let event = document.createEvent( 'HTMLEvents', 1, 2 );
  561. event.initEvent( type, bubbles, true );
  562. Util.extend( event, data );
  563. target.dispatchEvent( event );
  564. if( target === dom.wrapper ) {
  565. // If we're in an iframe, post each reveal.js event to the
  566. // parent window. Used by the notes plugin
  567. dispatchPostMessage( type );
  568. }
  569. return event;
  570. }
  571. /**
  572. * Dispatches a slidechanged event.
  573. *
  574. * @param {string} origin Used to identify multiplex clients
  575. */
  576. function dispatchSlideChanged( origin ) {
  577. dispatchEvent({
  578. type: 'slidechanged',
  579. data: {
  580. indexh,
  581. indexv,
  582. previousSlide,
  583. currentSlide,
  584. origin
  585. }
  586. });
  587. }
  588. /**
  589. * Dispatched a postMessage of the given type from our window.
  590. */
  591. function dispatchPostMessage( type, data ) {
  592. if( config.postMessageEvents && window.parent !== window.self ) {
  593. let message = {
  594. namespace: 'reveal',
  595. eventName: type,
  596. state: getState()
  597. };
  598. Util.extend( message, data );
  599. window.parent.postMessage( JSON.stringify( message ), '*' );
  600. }
  601. }
  602. /**
  603. * Bind preview frame links.
  604. *
  605. * @param {string} [selector=a] - selector for anchors
  606. */
  607. function enablePreviewLinks( selector = 'a' ) {
  608. Array.from( dom.wrapper.querySelectorAll( selector ) ).forEach( element => {
  609. if( /^(http|www)/gi.test( element.getAttribute( 'href' ) ) ) {
  610. element.addEventListener( 'click', onPreviewLinkClicked, false );
  611. }
  612. } );
  613. }
  614. /**
  615. * Unbind preview frame links.
  616. */
  617. function disablePreviewLinks( selector = 'a' ) {
  618. Array.from( dom.wrapper.querySelectorAll( selector ) ).forEach( element => {
  619. if( /^(http|www)/gi.test( element.getAttribute( 'href' ) ) ) {
  620. element.removeEventListener( 'click', onPreviewLinkClicked, false );
  621. }
  622. } );
  623. }
  624. /**
  625. * Opens a preview window for the target URL.
  626. *
  627. * @param {string} url - url for preview iframe src
  628. */
  629. function showPreview( url ) {
  630. closeOverlay();
  631. dom.overlay = document.createElement( 'div' );
  632. dom.overlay.classList.add( 'overlay' );
  633. dom.overlay.classList.add( 'overlay-preview' );
  634. dom.wrapper.appendChild( dom.overlay );
  635. dom.overlay.innerHTML =
  636. `<header>
  637. <a class="close" href="#"><span class="icon"></span></a>
  638. <a class="external" href="${url}" target="_blank"><span class="icon"></span></a>
  639. </header>
  640. <div class="spinner"></div>
  641. <div class="viewport">
  642. <iframe src="${url}"></iframe>
  643. <small class="viewport-inner">
  644. <span class="x-frame-error">Unable to load iframe. This is likely due to the site's policy (x-frame-options).</span>
  645. </small>
  646. </div>`;
  647. dom.overlay.querySelector( 'iframe' ).addEventListener( 'load', event => {
  648. dom.overlay.classList.add( 'loaded' );
  649. }, false );
  650. dom.overlay.querySelector( '.close' ).addEventListener( 'click', event => {
  651. closeOverlay();
  652. event.preventDefault();
  653. }, false );
  654. dom.overlay.querySelector( '.external' ).addEventListener( 'click', event => {
  655. closeOverlay();
  656. }, false );
  657. }
  658. /**
  659. * Open or close help overlay window.
  660. *
  661. * @param {Boolean} [override] Flag which overrides the
  662. * toggle logic and forcibly sets the desired state. True means
  663. * help is open, false means it's closed.
  664. */
  665. function toggleHelp( override ){
  666. if( typeof override === 'boolean' ) {
  667. override ? showHelp() : closeOverlay();
  668. }
  669. else {
  670. if( dom.overlay ) {
  671. closeOverlay();
  672. }
  673. else {
  674. showHelp();
  675. }
  676. }
  677. }
  678. /**
  679. * Opens an overlay window with help material.
  680. */
  681. function showHelp() {
  682. if( config.help ) {
  683. closeOverlay();
  684. dom.overlay = document.createElement( 'div' );
  685. dom.overlay.classList.add( 'overlay' );
  686. dom.overlay.classList.add( 'overlay-help' );
  687. dom.wrapper.appendChild( dom.overlay );
  688. let html = '<p class="title">Keyboard Shortcuts</p><br/>';
  689. let shortcuts = keyboard.getShortcuts(),
  690. bindings = keyboard.getBindings();
  691. html += '<table><th>KEY</th><th>ACTION</th>';
  692. for( let key in shortcuts ) {
  693. html += `<tr><td>${key}</td><td>${shortcuts[ key ]}</td></tr>`;
  694. }
  695. // Add custom key bindings that have associated descriptions
  696. for( let binding in bindings ) {
  697. if( bindings[binding].key && bindings[binding].description ) {
  698. html += `<tr><td>${bindings[binding].key}</td><td>${bindings[binding].description}</td></tr>`;
  699. }
  700. }
  701. html += '</table>';
  702. dom.overlay.innerHTML = `
  703. <header>
  704. <a class="close" href="#"><span class="icon"></span></a>
  705. </header>
  706. <div class="viewport">
  707. <div class="viewport-inner">${html}</div>
  708. </div>
  709. `;
  710. dom.overlay.querySelector( '.close' ).addEventListener( 'click', event => {
  711. closeOverlay();
  712. event.preventDefault();
  713. }, false );
  714. }
  715. }
  716. /**
  717. * Closes any currently open overlay.
  718. */
  719. function closeOverlay() {
  720. if( dom.overlay ) {
  721. dom.overlay.parentNode.removeChild( dom.overlay );
  722. dom.overlay = null;
  723. return true;
  724. }
  725. return false;
  726. }
  727. /**
  728. * Applies JavaScript-controlled layout rules to the
  729. * presentation.
  730. */
  731. function layout() {
  732. if( dom.wrapper && !printView.isActive() ) {
  733. const viewportWidth = dom.viewport.offsetWidth;
  734. const viewportHeight = dom.viewport.offsetHeight;
  735. if( !config.disableLayout ) {
  736. // On some mobile devices '100vh' is taller than the visible
  737. // viewport which leads to part of the presentation being
  738. // cut off. To work around this we define our own '--vh' custom
  739. // property where 100x adds up to the correct height.
  740. //
  741. // https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
  742. if( Device.isMobile && !config.embedded ) {
  743. document.documentElement.style.setProperty( '--vh', ( window.innerHeight * 0.01 ) + 'px' );
  744. }
  745. const size = scrollView.isActive() ?
  746. getComputedSlideSize( viewportWidth, viewportHeight ) :
  747. getComputedSlideSize();
  748. const oldScale = scale;
  749. // Layout the contents of the slides
  750. layoutSlideContents( config.width, config.height );
  751. dom.slides.style.width = size.width + 'px';
  752. dom.slides.style.height = size.height + 'px';
  753. // Determine scale of content to fit within available space
  754. scale = Math.min( size.presentationWidth / size.width, size.presentationHeight / size.height );
  755. // Respect max/min scale settings
  756. scale = Math.max( scale, config.minScale );
  757. scale = Math.min( scale, config.maxScale );
  758. // Don't apply any scaling styles if scale is 1 or we're
  759. // in the scroll view
  760. if( scale === 1 || scrollView.isActive() ) {
  761. dom.slides.style.zoom = '';
  762. dom.slides.style.left = '';
  763. dom.slides.style.top = '';
  764. dom.slides.style.bottom = '';
  765. dom.slides.style.right = '';
  766. transformSlides( { layout: '' } );
  767. }
  768. else {
  769. dom.slides.style.zoom = '';
  770. dom.slides.style.left = '50%';
  771. dom.slides.style.top = '50%';
  772. dom.slides.style.bottom = 'auto';
  773. dom.slides.style.right = 'auto';
  774. transformSlides( { layout: 'translate(-50%, -50%) scale('+ scale +')' } );
  775. }
  776. // Select all slides, vertical and horizontal
  777. const slides = Array.from( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) );
  778. for( let i = 0, len = slides.length; i < len; i++ ) {
  779. const slide = slides[ i ];
  780. // Don't bother updating invisible slides
  781. if( slide.style.display === 'none' ) {
  782. continue;
  783. }
  784. if( ( config.center || slide.classList.contains( 'center' ) ) ) {
  785. // Vertical stacks are not centred since their section
  786. // children will be
  787. if( slide.classList.contains( 'stack' ) ) {
  788. slide.style.top = 0;
  789. }
  790. else {
  791. slide.style.top = Math.max( ( size.height - slide.scrollHeight ) / 2, 0 ) + 'px';
  792. }
  793. }
  794. else {
  795. slide.style.top = '';
  796. }
  797. }
  798. if( oldScale !== scale ) {
  799. dispatchEvent({
  800. type: 'resize',
  801. data: {
  802. oldScale,
  803. scale,
  804. size
  805. }
  806. });
  807. }
  808. }
  809. checkResponsiveScrollView();
  810. dom.viewport.style.setProperty( '--slide-scale', scale );
  811. dom.viewport.style.setProperty( '--viewport-width', viewportWidth + 'px' );
  812. dom.viewport.style.setProperty( '--viewport-height', viewportHeight + 'px' );
  813. scrollView.layout();
  814. progress.update();
  815. backgrounds.updateParallax();
  816. if( overview.isActive() ) {
  817. overview.update();
  818. }
  819. }
  820. }
  821. /**
  822. * Applies layout logic to the contents of all slides in
  823. * the presentation.
  824. *
  825. * @param {string|number} width
  826. * @param {string|number} height
  827. */
  828. function layoutSlideContents( width, height ) {
  829. // Handle sizing of elements with the 'r-stretch' class
  830. Util.queryAll( dom.slides, 'section > .stretch, section > .r-stretch' ).forEach( element => {
  831. // Determine how much vertical space we can use
  832. let remainingHeight = Util.getRemainingHeight( element, height );
  833. // Consider the aspect ratio of media elements
  834. if( /(img|video)/gi.test( element.nodeName ) ) {
  835. const nw = element.naturalWidth || element.videoWidth,
  836. nh = element.naturalHeight || element.videoHeight;
  837. const es = Math.min( width / nw, remainingHeight / nh );
  838. element.style.width = ( nw * es ) + 'px';
  839. element.style.height = ( nh * es ) + 'px';
  840. }
  841. else {
  842. element.style.width = width + 'px';
  843. element.style.height = remainingHeight + 'px';
  844. }
  845. } );
  846. }
  847. /**
  848. * Responsively activates the scroll mode when we reach the configured
  849. * activation width.
  850. */
  851. function checkResponsiveScrollView() {
  852. // Only proceed if...
  853. // 1. The DOM is ready
  854. // 2. Layouts aren't disabled via config
  855. // 3. We're not currently printing
  856. // 4. There is a scrollActivationWidth set
  857. // 5. The deck isn't configured to always use the scroll view
  858. if(
  859. dom.wrapper &&
  860. !config.disableLayout &&
  861. !printView.isActive() &&
  862. typeof config.scrollActivationWidth === 'number' &&
  863. config.view !== 'scroll'
  864. ) {
  865. const size = getComputedSlideSize();
  866. if( size.presentationWidth > 0 && size.presentationWidth <= config.scrollActivationWidth ) {
  867. if( !scrollView.isActive() ) {
  868. backgrounds.create();
  869. scrollView.activate()
  870. };
  871. }
  872. else {
  873. if( scrollView.isActive() ) scrollView.deactivate();
  874. }
  875. }
  876. }
  877. /**
  878. * Calculates the computed pixel size of our slides. These
  879. * values are based on the width and height configuration
  880. * options.
  881. *
  882. * @param {number} [presentationWidth=dom.wrapper.offsetWidth]
  883. * @param {number} [presentationHeight=dom.wrapper.offsetHeight]
  884. */
  885. function getComputedSlideSize( presentationWidth, presentationHeight ) {
  886. let width = config.width;
  887. let height = config.height;
  888. if( config.disableLayout ) {
  889. width = dom.slides.offsetWidth;
  890. height = dom.slides.offsetHeight;
  891. }
  892. const size = {
  893. // Slide size
  894. width: width,
  895. height: height,
  896. // Presentation size
  897. presentationWidth: presentationWidth || dom.wrapper.offsetWidth,
  898. presentationHeight: presentationHeight || dom.wrapper.offsetHeight
  899. };
  900. // Reduce available space by margin
  901. size.presentationWidth -= ( size.presentationWidth * config.margin );
  902. size.presentationHeight -= ( size.presentationHeight * config.margin );
  903. // Slide width may be a percentage of available width
  904. if( typeof size.width === 'string' && /%$/.test( size.width ) ) {
  905. size.width = parseInt( size.width, 10 ) / 100 * size.presentationWidth;
  906. }
  907. // Slide height may be a percentage of available height
  908. if( typeof size.height === 'string' && /%$/.test( size.height ) ) {
  909. size.height = parseInt( size.height, 10 ) / 100 * size.presentationHeight;
  910. }
  911. return size;
  912. }
  913. /**
  914. * Stores the vertical index of a stack so that the same
  915. * vertical slide can be selected when navigating to and
  916. * from the stack.
  917. *
  918. * @param {HTMLElement} stack The vertical stack element
  919. * @param {string|number} [v=0] Index to memorize
  920. */
  921. function setPreviousVerticalIndex( stack, v ) {
  922. if( typeof stack === 'object' && typeof stack.setAttribute === 'function' ) {
  923. stack.setAttribute( 'data-previous-indexv', v || 0 );
  924. }
  925. }
  926. /**
  927. * Retrieves the vertical index which was stored using
  928. * #setPreviousVerticalIndex() or 0 if no previous index
  929. * exists.
  930. *
  931. * @param {HTMLElement} stack The vertical stack element
  932. */
  933. function getPreviousVerticalIndex( stack ) {
  934. if( typeof stack === 'object' && typeof stack.setAttribute === 'function' && stack.classList.contains( 'stack' ) ) {
  935. // Prefer manually defined start-indexv
  936. const attributeName = stack.hasAttribute( 'data-start-indexv' ) ? 'data-start-indexv' : 'data-previous-indexv';
  937. return parseInt( stack.getAttribute( attributeName ) || 0, 10 );
  938. }
  939. return 0;
  940. }
  941. /**
  942. * Checks if the current or specified slide is vertical
  943. * (nested within another slide).
  944. *
  945. * @param {HTMLElement} [slide=currentSlide] The slide to check
  946. * orientation of
  947. * @return {Boolean}
  948. */
  949. function isVerticalSlide( slide = currentSlide ) {
  950. return slide && slide.parentNode && !!slide.parentNode.nodeName.match( /section/i );
  951. }
  952. /**
  953. * Checks if the current or specified slide is a stack containing
  954. * vertical slides.
  955. *
  956. * @param {HTMLElement} [slide=currentSlide]
  957. * @return {Boolean}
  958. */
  959. function isVerticalStack( slide = currentSlide ) {
  960. return slide.classList.contains( '.stack' ) || slide.querySelector( 'section' ) !== null;
  961. }
  962. /**
  963. * Returns true if we're on the last slide in the current
  964. * vertical stack.
  965. */
  966. function isLastVerticalSlide() {
  967. if( currentSlide && isVerticalSlide( currentSlide ) ) {
  968. // Does this slide have a next sibling?
  969. if( currentSlide.nextElementSibling ) return false;
  970. return true;
  971. }
  972. return false;
  973. }
  974. /**
  975. * Returns true if we're currently on the first slide in
  976. * the presentation.
  977. */
  978. function isFirstSlide() {
  979. return indexh === 0 && indexv === 0;
  980. }
  981. /**
  982. * Returns true if we're currently on the last slide in
  983. * the presenation. If the last slide is a stack, we only
  984. * consider this the last slide if it's at the end of the
  985. * stack.
  986. */
  987. function isLastSlide() {
  988. if( currentSlide ) {
  989. // Does this slide have a next sibling?
  990. if( currentSlide.nextElementSibling ) return false;
  991. // If it's vertical, does its parent have a next sibling?
  992. if( isVerticalSlide( currentSlide ) && currentSlide.parentNode.nextElementSibling ) return false;
  993. return true;
  994. }
  995. return false;
  996. }
  997. /**
  998. * Enters the paused mode which fades everything on screen to
  999. * black.
  1000. */
  1001. function pause() {
  1002. if( config.pause ) {
  1003. const wasPaused = dom.wrapper.classList.contains( 'paused' );
  1004. cancelAutoSlide();
  1005. dom.wrapper.classList.add( 'paused' );
  1006. if( wasPaused === false ) {
  1007. dispatchEvent({ type: 'paused' });
  1008. }
  1009. }
  1010. }
  1011. /**
  1012. * Exits from the paused mode.
  1013. */
  1014. function resume() {
  1015. const wasPaused = dom.wrapper.classList.contains( 'paused' );
  1016. dom.wrapper.classList.remove( 'paused' );
  1017. cueAutoSlide();
  1018. if( wasPaused ) {
  1019. dispatchEvent({ type: 'resumed' });
  1020. }
  1021. }
  1022. /**
  1023. * Toggles the paused mode on and off.
  1024. */
  1025. function togglePause( override ) {
  1026. if( typeof override === 'boolean' ) {
  1027. override ? pause() : resume();
  1028. }
  1029. else {
  1030. isPaused() ? resume() : pause();
  1031. }
  1032. }
  1033. /**
  1034. * Checks if we are currently in the paused mode.
  1035. *
  1036. * @return {Boolean}
  1037. */
  1038. function isPaused() {
  1039. return dom.wrapper.classList.contains( 'paused' );
  1040. }
  1041. /**
  1042. * Toggles visibility of the jump-to-slide UI.
  1043. */
  1044. function toggleJumpToSlide( override ) {
  1045. if( typeof override === 'boolean' ) {
  1046. override ? jumpToSlide.show() : jumpToSlide.hide();
  1047. }
  1048. else {
  1049. jumpToSlide.isVisible() ? jumpToSlide.hide() : jumpToSlide.show();
  1050. }
  1051. }
  1052. /**
  1053. * Toggles the auto slide mode on and off.
  1054. *
  1055. * @param {Boolean} [override] Flag which sets the desired state.
  1056. * True means autoplay starts, false means it stops.
  1057. */
  1058. function toggleAutoSlide( override ) {
  1059. if( typeof override === 'boolean' ) {
  1060. override ? resumeAutoSlide() : pauseAutoSlide();
  1061. }
  1062. else {
  1063. autoSlidePaused ? resumeAutoSlide() : pauseAutoSlide();
  1064. }
  1065. }
  1066. /**
  1067. * Checks if the auto slide mode is currently on.
  1068. *
  1069. * @return {Boolean}
  1070. */
  1071. function isAutoSliding() {
  1072. return !!( autoSlide && !autoSlidePaused );
  1073. }
  1074. /**
  1075. * Steps from the current point in the presentation to the
  1076. * slide which matches the specified horizontal and vertical
  1077. * indices.
  1078. *
  1079. * @param {number} [h=indexh] Horizontal index of the target slide
  1080. * @param {number} [v=indexv] Vertical index of the target slide
  1081. * @param {number} [f] Index of a fragment within the
  1082. * target slide to activate
  1083. * @param {number} [origin] Origin for use in multimaster environments
  1084. */
  1085. function slide( h, v, f, origin ) {
  1086. // Dispatch an event before the slide
  1087. const slidechange = dispatchEvent({
  1088. type: 'beforeslidechange',
  1089. data: {
  1090. indexh: h === undefined ? indexh : h,
  1091. indexv: v === undefined ? indexv : v,
  1092. origin
  1093. }
  1094. });
  1095. // Abort if this slide change was prevented by an event listener
  1096. if( slidechange.defaultPrevented ) return;
  1097. // Remember where we were at before
  1098. previousSlide = currentSlide;
  1099. // Query all horizontal slides in the deck
  1100. const horizontalSlides = dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR );
  1101. // If we're in scroll mode, we scroll the target slide into view
  1102. // instead of running our standard slide transition
  1103. if( scrollView.isActive() ) {
  1104. const scrollToSlide = scrollView.getSlideByIndices( h, v );
  1105. if( scrollToSlide ) scrollView.scrollToSlide( scrollToSlide );
  1106. return;
  1107. }
  1108. // Abort if there are no slides
  1109. if( horizontalSlides.length === 0 ) return;
  1110. // If no vertical index is specified and the upcoming slide is a
  1111. // stack, resume at its previous vertical index
  1112. if( v === undefined && !overview.isActive() ) {
  1113. v = getPreviousVerticalIndex( horizontalSlides[ h ] );
  1114. }
  1115. // If we were on a vertical stack, remember what vertical index
  1116. // it was on so we can resume at the same position when returning
  1117. if( previousSlide && previousSlide.parentNode && previousSlide.parentNode.classList.contains( 'stack' ) ) {
  1118. setPreviousVerticalIndex( previousSlide.parentNode, indexv );
  1119. }
  1120. // Remember the state before this slide
  1121. const stateBefore = state.concat();
  1122. // Reset the state array
  1123. state.length = 0;
  1124. let indexhBefore = indexh || 0,
  1125. indexvBefore = indexv || 0;
  1126. // Activate and transition to the new slide
  1127. indexh = updateSlides( HORIZONTAL_SLIDES_SELECTOR, h === undefined ? indexh : h );
  1128. indexv = updateSlides( VERTICAL_SLIDES_SELECTOR, v === undefined ? indexv : v );
  1129. // Dispatch an event if the slide changed
  1130. let slideChanged = ( indexh !== indexhBefore || indexv !== indexvBefore );
  1131. // Ensure that the previous slide is never the same as the current
  1132. if( !slideChanged ) previousSlide = null;
  1133. // Find the current horizontal slide and any possible vertical slides
  1134. // within it
  1135. let currentHorizontalSlide = horizontalSlides[ indexh ],
  1136. currentVerticalSlides = currentHorizontalSlide.querySelectorAll( 'section' );
  1137. // Store references to the previous and current slides
  1138. currentSlide = currentVerticalSlides[ indexv ] || currentHorizontalSlide;
  1139. let autoAnimateTransition = false;
  1140. // Detect if we're moving between two auto-animated slides
  1141. if( slideChanged && previousSlide && currentSlide && !overview.isActive() ) {
  1142. transition = 'running';
  1143. autoAnimateTransition = shouldAutoAnimateBetween( previousSlide, currentSlide, indexhBefore, indexvBefore );
  1144. // If this is an auto-animated transition, we disable the
  1145. // regular slide transition
  1146. //
  1147. // Note 20-03-2020:
  1148. // This needs to happen before we update slide visibility,
  1149. // otherwise transitions will still run in Safari.
  1150. if( autoAnimateTransition ) {
  1151. dom.slides.classList.add( 'disable-slide-transitions' )
  1152. }
  1153. }
  1154. // Update the visibility of slides now that the indices have changed
  1155. updateSlidesVisibility();
  1156. layout();
  1157. // Update the overview if it's currently active
  1158. if( overview.isActive() ) {
  1159. overview.update();
  1160. }
  1161. // Show fragment, if specified
  1162. if( typeof f !== 'undefined' ) {
  1163. fragments.goto( f );
  1164. }
  1165. // Solves an edge case where the previous slide maintains the
  1166. // 'present' class when navigating between adjacent vertical
  1167. // stacks
  1168. if( previousSlide && previousSlide !== currentSlide ) {
  1169. previousSlide.classList.remove( 'present' );
  1170. previousSlide.setAttribute( 'aria-hidden', 'true' );
  1171. // Reset all slides upon navigate to home
  1172. if( isFirstSlide() ) {
  1173. // Launch async task
  1174. setTimeout( () => {
  1175. getVerticalStacks().forEach( slide => {
  1176. setPreviousVerticalIndex( slide, 0 );
  1177. } );
  1178. }, 0 );
  1179. }
  1180. }
  1181. // Apply the new state
  1182. stateLoop: for( let i = 0, len = state.length; i < len; i++ ) {
  1183. // Check if this state existed on the previous slide. If it
  1184. // did, we will avoid adding it repeatedly
  1185. for( let j = 0; j < stateBefore.length; j++ ) {
  1186. if( stateBefore[j] === state[i] ) {
  1187. stateBefore.splice( j, 1 );
  1188. continue stateLoop;
  1189. }
  1190. }
  1191. dom.viewport.classList.add( state[i] );
  1192. // Dispatch custom event matching the state's name
  1193. dispatchEvent({ type: state[i] });
  1194. }
  1195. // Clean up the remains of the previous state
  1196. while( stateBefore.length ) {
  1197. dom.viewport.classList.remove( stateBefore.pop() );
  1198. }
  1199. if( slideChanged ) {
  1200. dispatchSlideChanged( origin );
  1201. }
  1202. // Handle embedded content
  1203. if( slideChanged || !previousSlide ) {
  1204. slideContent.stopEmbeddedContent( previousSlide );
  1205. slideContent.startEmbeddedContent( currentSlide );
  1206. }
  1207. // Announce the current slide contents to screen readers
  1208. // Use animation frame to prevent getComputedStyle in getStatusText
  1209. // from triggering layout mid-frame
  1210. requestAnimationFrame( () => {
  1211. announceStatus( getStatusText( currentSlide ) );
  1212. });
  1213. progress.update();
  1214. controls.update();
  1215. notes.update();
  1216. backgrounds.update();
  1217. backgrounds.updateParallax();
  1218. slideNumber.update();
  1219. fragments.update();
  1220. // Update the URL hash
  1221. location.writeURL();
  1222. cueAutoSlide();
  1223. // Auto-animation
  1224. if( autoAnimateTransition ) {
  1225. setTimeout( () => {
  1226. dom.slides.classList.remove( 'disable-slide-transitions' );
  1227. }, 0 );
  1228. if( config.autoAnimate ) {
  1229. // Run the auto-animation between our slides
  1230. autoAnimate.run( previousSlide, currentSlide );
  1231. }
  1232. }
  1233. }
  1234. /**
  1235. * Checks whether or not an auto-animation should take place between
  1236. * the two given slides.
  1237. *
  1238. * @param {HTMLElement} fromSlide
  1239. * @param {HTMLElement} toSlide
  1240. * @param {number} indexhBefore
  1241. * @param {number} indexvBefore
  1242. *
  1243. * @returns {boolean}
  1244. */
  1245. function shouldAutoAnimateBetween( fromSlide, toSlide, indexhBefore, indexvBefore ) {
  1246. return fromSlide.hasAttribute( 'data-auto-animate' ) && toSlide.hasAttribute( 'data-auto-animate' ) &&
  1247. fromSlide.getAttribute( 'data-auto-animate-id' ) === toSlide.getAttribute( 'data-auto-animate-id' ) &&
  1248. !( ( indexh > indexhBefore || indexv > indexvBefore ) ? toSlide : fromSlide ).hasAttribute( 'data-auto-animate-restart' );
  1249. }
  1250. /**
  1251. * Called anytime a new slide should be activated while in the scroll
  1252. * view. The active slide is the page that occupies the most space in
  1253. * the scrollable viewport.
  1254. *
  1255. * @param {number} pageIndex
  1256. * @param {HTMLElement} slideElement
  1257. */
  1258. function setCurrentScrollPage( slideElement, h, v ) {
  1259. let indexhBefore = indexh || 0;
  1260. indexh = h;
  1261. indexv = v;
  1262. const slideChanged = currentSlide !== slideElement;
  1263. previousSlide = currentSlide;
  1264. currentSlide = slideElement;
  1265. if( currentSlide && previousSlide ) {
  1266. if( config.autoAnimate && shouldAutoAnimateBetween( previousSlide, currentSlide, indexhBefore, indexv ) ) {
  1267. // Run the auto-animation between our slides
  1268. autoAnimate.run( previousSlide, currentSlide );
  1269. }
  1270. }
  1271. // Start or stop embedded content like videos and iframes
  1272. if( slideChanged ) {
  1273. if( previousSlide ) {
  1274. slideContent.stopEmbeddedContent( previousSlide );
  1275. slideContent.stopEmbeddedContent( previousSlide.slideBackgroundElement );
  1276. }
  1277. slideContent.startEmbeddedContent( currentSlide );
  1278. slideContent.startEmbeddedContent( currentSlide.slideBackgroundElement );
  1279. }
  1280. requestAnimationFrame( () => {
  1281. announceStatus( getStatusText( currentSlide ) );
  1282. });
  1283. dispatchSlideChanged();
  1284. }
  1285. /**
  1286. * Syncs the presentation with the current DOM. Useful
  1287. * when new slides or control elements are added or when
  1288. * the configuration has changed.
  1289. */
  1290. function sync() {
  1291. // Subscribe to input
  1292. removeEventListeners();
  1293. addEventListeners();
  1294. // Force a layout to make sure the current config is accounted for
  1295. layout();
  1296. // Reflect the current autoSlide value
  1297. autoSlide = config.autoSlide;
  1298. // Start auto-sliding if it's enabled
  1299. cueAutoSlide();
  1300. // Re-create all slide backgrounds
  1301. backgrounds.create();
  1302. // Write the current hash to the URL
  1303. location.writeURL();
  1304. if( config.sortFragmentsOnSync === true ) {
  1305. fragments.sortAll();
  1306. }
  1307. controls.update();
  1308. progress.update();
  1309. updateSlidesVisibility();
  1310. notes.update();
  1311. notes.updateVisibility();
  1312. backgrounds.update( true );
  1313. slideNumber.update();
  1314. slideContent.formatEmbeddedContent();
  1315. // Start or stop embedded content depending on global config
  1316. if( config.autoPlayMedia === false ) {
  1317. slideContent.stopEmbeddedContent( currentSlide, { unloadIframes: false } );
  1318. }
  1319. else {
  1320. slideContent.startEmbeddedContent( currentSlide );
  1321. }
  1322. if( overview.isActive() ) {
  1323. overview.layout();
  1324. }
  1325. }
  1326. /**
  1327. * Updates reveal.js to keep in sync with new slide attributes. For
  1328. * example, if you add a new `data-background-image` you can call
  1329. * this to have reveal.js render the new background image.
  1330. *
  1331. * Similar to #sync() but more efficient when you only need to
  1332. * refresh a specific slide.
  1333. *
  1334. * @param {HTMLElement} slide
  1335. */
  1336. function syncSlide( slide = currentSlide ) {
  1337. backgrounds.sync( slide );
  1338. fragments.sync( slide );
  1339. slideContent.load( slide );
  1340. backgrounds.update();
  1341. notes.update();
  1342. }
  1343. /**
  1344. * Resets all vertical slides so that only the first
  1345. * is visible.
  1346. */
  1347. function resetVerticalSlides() {
  1348. getHorizontalSlides().forEach( horizontalSlide => {
  1349. Util.queryAll( horizontalSlide, 'section' ).forEach( ( verticalSlide, y ) => {
  1350. if( y > 0 ) {
  1351. verticalSlide.classList.remove( 'present' );
  1352. verticalSlide.classList.remove( 'past' );
  1353. verticalSlide.classList.add( 'future' );
  1354. verticalSlide.setAttribute( 'aria-hidden', 'true' );
  1355. }
  1356. } );
  1357. } );
  1358. }
  1359. /**
  1360. * Randomly shuffles all slides in the deck.
  1361. */
  1362. function shuffle( slides = getHorizontalSlides() ) {
  1363. slides.forEach( ( slide, i ) => {
  1364. // Insert the slide next to a randomly picked sibling slide
  1365. // slide. This may cause the slide to insert before itself,
  1366. // but that's not an issue.
  1367. let beforeSlide = slides[ Math.floor( Math.random() * slides.length ) ];
  1368. if( beforeSlide.parentNode === slide.parentNode ) {
  1369. slide.parentNode.insertBefore( slide, beforeSlide );
  1370. }
  1371. // Randomize the order of vertical slides (if there are any)
  1372. let verticalSlides = slide.querySelectorAll( 'section' );
  1373. if( verticalSlides.length ) {
  1374. shuffle( verticalSlides );
  1375. }
  1376. } );
  1377. }
  1378. /**
  1379. * Updates one dimension of slides by showing the slide
  1380. * with the specified index.
  1381. *
  1382. * @param {string} selector A CSS selector that will fetch
  1383. * the group of slides we are working with
  1384. * @param {number} index The index of the slide that should be
  1385. * shown
  1386. *
  1387. * @return {number} The index of the slide that is now shown,
  1388. * might differ from the passed in index if it was out of
  1389. * bounds.
  1390. */
  1391. function updateSlides( selector, index ) {
  1392. // Select all slides and convert the NodeList result to
  1393. // an array
  1394. let slides = Util.queryAll( dom.wrapper, selector ),
  1395. slidesLength = slides.length;
  1396. let printMode = scrollView.isActive() || printView.isActive();
  1397. let loopedForwards = false;
  1398. let loopedBackwards = false;
  1399. if( slidesLength ) {
  1400. // Should the index loop?
  1401. if( config.loop ) {
  1402. if( index >= slidesLength ) loopedForwards = true;
  1403. index %= slidesLength;
  1404. if( index < 0 ) {
  1405. index = slidesLength + index;
  1406. loopedBackwards = true;
  1407. }
  1408. }
  1409. // Enforce max and minimum index bounds
  1410. index = Math.max( Math.min( index, slidesLength - 1 ), 0 );
  1411. for( let i = 0; i < slidesLength; i++ ) {
  1412. let element = slides[i];
  1413. let reverse = config.rtl && !isVerticalSlide( element );
  1414. // Avoid .remove() with multiple args for IE11 support
  1415. element.classList.remove( 'past' );
  1416. element.classList.remove( 'present' );
  1417. element.classList.remove( 'future' );
  1418. // http://www.w3.org/html/wg/drafts/html/master/editing.html#the-hidden-attribute
  1419. element.setAttribute( 'hidden', '' );
  1420. element.setAttribute( 'aria-hidden', 'true' );
  1421. // If this element contains vertical slides
  1422. if( element.querySelector( 'section' ) ) {
  1423. element.classList.add( 'stack' );
  1424. }
  1425. // If we're printing static slides, all slides are "present"
  1426. if( printMode ) {
  1427. element.classList.add( 'present' );
  1428. continue;
  1429. }
  1430. if( i < index ) {
  1431. // Any element previous to index is given the 'past' class
  1432. element.classList.add( reverse ? 'future' : 'past' );
  1433. if( config.fragments ) {
  1434. // Show all fragments in prior slides
  1435. showFragmentsIn( element );
  1436. }
  1437. }
  1438. else if( i > index ) {
  1439. // Any element subsequent to index is given the 'future' class
  1440. element.classList.add( reverse ? 'past' : 'future' );
  1441. if( config.fragments ) {
  1442. // Hide all fragments in future slides
  1443. hideFragmentsIn( element );
  1444. }
  1445. }
  1446. // Update the visibility of fragments when a presentation loops
  1447. // in either direction
  1448. else if( i === index && config.fragments ) {
  1449. if( loopedForwards ) {
  1450. hideFragmentsIn( element );
  1451. }
  1452. else if( loopedBackwards ) {
  1453. showFragmentsIn( element );
  1454. }
  1455. }
  1456. }
  1457. let slide = slides[index];
  1458. let wasPresent = slide.classList.contains( 'present' );
  1459. // Mark the current slide as present
  1460. slide.classList.add( 'present' );
  1461. slide.removeAttribute( 'hidden' );
  1462. slide.removeAttribute( 'aria-hidden' );
  1463. if( !wasPresent ) {
  1464. // Dispatch an event indicating the slide is now visible
  1465. dispatchEvent({
  1466. target: slide,
  1467. type: 'visible',
  1468. bubbles: false
  1469. });
  1470. }
  1471. // If this slide has a state associated with it, add it
  1472. // onto the current state of the deck
  1473. let slideState = slide.getAttribute( 'data-state' );
  1474. if( slideState ) {
  1475. state = state.concat( slideState.split( ' ' ) );
  1476. }
  1477. }
  1478. else {
  1479. // Since there are no slides we can't be anywhere beyond the
  1480. // zeroth index
  1481. index = 0;
  1482. }
  1483. return index;
  1484. }
  1485. /**
  1486. * Shows all fragment elements within the given container.
  1487. */
  1488. function showFragmentsIn( container ) {
  1489. Util.queryAll( container, '.fragment' ).forEach( fragment => {
  1490. fragment.classList.add( 'visible' );
  1491. fragment.classList.remove( 'current-fragment' );
  1492. } );
  1493. }
  1494. /**
  1495. * Hides all fragment elements within the given container.
  1496. */
  1497. function hideFragmentsIn( container ) {
  1498. Util.queryAll( container, '.fragment.visible' ).forEach( fragment => {
  1499. fragment.classList.remove( 'visible', 'current-fragment' );
  1500. } );
  1501. }
  1502. /**
  1503. * Optimization method; hide all slides that are far away
  1504. * from the present slide.
  1505. */
  1506. function updateSlidesVisibility() {
  1507. // Select all slides and convert the NodeList result to
  1508. // an array
  1509. let horizontalSlides = getHorizontalSlides(),
  1510. horizontalSlidesLength = horizontalSlides.length,
  1511. distanceX,
  1512. distanceY;
  1513. if( horizontalSlidesLength && typeof indexh !== 'undefined' ) {
  1514. // The number of steps away from the present slide that will
  1515. // be visible
  1516. let viewDistance = overview.isActive() ? 10 : config.viewDistance;
  1517. // Shorten the view distance on devices that typically have
  1518. // less resources
  1519. if( Device.isMobile ) {
  1520. viewDistance = overview.isActive() ? 6 : config.mobileViewDistance;
  1521. }
  1522. // All slides need to be visible when exporting to PDF
  1523. if( printView.isActive() ) {
  1524. viewDistance = Number.MAX_VALUE;
  1525. }
  1526. for( let x = 0; x < horizontalSlidesLength; x++ ) {
  1527. let horizontalSlide = horizontalSlides[x];
  1528. let verticalSlides = Util.queryAll( horizontalSlide, 'section' ),
  1529. verticalSlidesLength = verticalSlides.length;
  1530. // Determine how far away this slide is from the present
  1531. distanceX = Math.abs( ( indexh || 0 ) - x ) || 0;
  1532. // If the presentation is looped, distance should measure
  1533. // 1 between the first and last slides
  1534. if( config.loop ) {
  1535. distanceX = Math.abs( ( ( indexh || 0 ) - x ) % ( horizontalSlidesLength - viewDistance ) ) || 0;
  1536. }
  1537. // Show the horizontal slide if it's within the view distance
  1538. if( distanceX < viewDistance ) {
  1539. slideContent.load( horizontalSlide );
  1540. }
  1541. else {
  1542. slideContent.unload( horizontalSlide );
  1543. }
  1544. if( verticalSlidesLength ) {
  1545. let oy = getPreviousVerticalIndex( horizontalSlide );
  1546. for( let y = 0; y < verticalSlidesLength; y++ ) {
  1547. let verticalSlide = verticalSlides[y];
  1548. distanceY = x === ( indexh || 0 ) ? Math.abs( ( indexv || 0 ) - y ) : Math.abs( y - oy );
  1549. if( distanceX + distanceY < viewDistance ) {
  1550. slideContent.load( verticalSlide );
  1551. }
  1552. else {
  1553. slideContent.unload( verticalSlide );
  1554. }
  1555. }
  1556. }
  1557. }
  1558. // Flag if there are ANY vertical slides, anywhere in the deck
  1559. if( hasVerticalSlides() ) {
  1560. dom.wrapper.classList.add( 'has-vertical-slides' );
  1561. }
  1562. else {
  1563. dom.wrapper.classList.remove( 'has-vertical-slides' );
  1564. }
  1565. // Flag if there are ANY horizontal slides, anywhere in the deck
  1566. if( hasHorizontalSlides() ) {
  1567. dom.wrapper.classList.add( 'has-horizontal-slides' );
  1568. }
  1569. else {
  1570. dom.wrapper.classList.remove( 'has-horizontal-slides' );
  1571. }
  1572. }
  1573. }
  1574. /**
  1575. * Determine what available routes there are for navigation.
  1576. *
  1577. * @return {{left: boolean, right: boolean, up: boolean, down: boolean}}
  1578. */
  1579. function availableRoutes({ includeFragments = false } = {}) {
  1580. let horizontalSlides = dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ),
  1581. verticalSlides = dom.wrapper.querySelectorAll( VERTICAL_SLIDES_SELECTOR );
  1582. let routes = {
  1583. left: indexh > 0,
  1584. right: indexh < horizontalSlides.length - 1,
  1585. up: indexv > 0,
  1586. down: indexv < verticalSlides.length - 1
  1587. };
  1588. // Looped presentations can always be navigated as long as
  1589. // there are slides available
  1590. if( config.loop ) {
  1591. if( horizontalSlides.length > 1 ) {
  1592. routes.left = true;
  1593. routes.right = true;
  1594. }
  1595. if( verticalSlides.length > 1 ) {
  1596. routes.up = true;
  1597. routes.down = true;
  1598. }
  1599. }
  1600. if ( horizontalSlides.length > 1 && config.navigationMode === 'linear' ) {
  1601. routes.right = routes.right || routes.down;
  1602. routes.left = routes.left || routes.up;
  1603. }
  1604. // If includeFragments is set, a route will be considered
  1605. // available if either a slid OR fragment is available in
  1606. // the given direction
  1607. if( includeFragments === true ) {
  1608. let fragmentRoutes = fragments.availableRoutes();
  1609. routes.left = routes.left || fragmentRoutes.prev;
  1610. routes.up = routes.up || fragmentRoutes.prev;
  1611. routes.down = routes.down || fragmentRoutes.next;
  1612. routes.right = routes.right || fragmentRoutes.next;
  1613. }
  1614. // Reverse horizontal controls for rtl
  1615. if( config.rtl ) {
  1616. let left = routes.left;
  1617. routes.left = routes.right;
  1618. routes.right = left;
  1619. }
  1620. return routes;
  1621. }
  1622. /**
  1623. * Returns the number of past slides. This can be used as a global
  1624. * flattened index for slides.
  1625. *
  1626. * @param {HTMLElement} [slide=currentSlide] The slide we're counting before
  1627. *
  1628. * @return {number} Past slide count
  1629. */
  1630. function getSlidePastCount( slide = currentSlide ) {
  1631. let horizontalSlides = getHorizontalSlides();
  1632. // The number of past slides
  1633. let pastCount = 0;
  1634. // Step through all slides and count the past ones
  1635. mainLoop: for( let i = 0; i < horizontalSlides.length; i++ ) {
  1636. let horizontalSlide = horizontalSlides[i];
  1637. let verticalSlides = horizontalSlide.querySelectorAll( 'section' );
  1638. for( let j = 0; j < verticalSlides.length; j++ ) {
  1639. // Stop as soon as we arrive at the present
  1640. if( verticalSlides[j] === slide ) {
  1641. break mainLoop;
  1642. }
  1643. // Don't count slides with the "uncounted" class
  1644. if( verticalSlides[j].dataset.visibility !== 'uncounted' ) {
  1645. pastCount++;
  1646. }
  1647. }
  1648. // Stop as soon as we arrive at the present
  1649. if( horizontalSlide === slide ) {
  1650. break;
  1651. }
  1652. // Don't count the wrapping section for vertical slides and
  1653. // slides marked as uncounted
  1654. if( horizontalSlide.classList.contains( 'stack' ) === false && horizontalSlide.dataset.visibility !== 'uncounted' ) {
  1655. pastCount++;
  1656. }
  1657. }
  1658. return pastCount;
  1659. }
  1660. /**
  1661. * Returns a value ranging from 0-1 that represents
  1662. * how far into the presentation we have navigated.
  1663. *
  1664. * @return {number}
  1665. */
  1666. function getProgress() {
  1667. // The number of past and total slides
  1668. let totalCount = getTotalSlides();
  1669. let pastCount = getSlidePastCount();
  1670. if( currentSlide ) {
  1671. let allFragments = currentSlide.querySelectorAll( '.fragment' );
  1672. // If there are fragments in the current slide those should be
  1673. // accounted for in the progress.
  1674. if( allFragments.length > 0 ) {
  1675. let visibleFragments = currentSlide.querySelectorAll( '.fragment.visible' );
  1676. // This value represents how big a portion of the slide progress
  1677. // that is made up by its fragments (0-1)
  1678. let fragmentWeight = 0.9;
  1679. // Add fragment progress to the past slide count
  1680. pastCount += ( visibleFragments.length / allFragments.length ) * fragmentWeight;
  1681. }
  1682. }
  1683. return Math.min( pastCount / ( totalCount - 1 ), 1 );
  1684. }
  1685. /**
  1686. * Retrieves the h/v location and fragment of the current,
  1687. * or specified, slide.
  1688. *
  1689. * @param {HTMLElement} [slide] If specified, the returned
  1690. * index will be for this slide rather than the currently
  1691. * active one
  1692. *
  1693. * @return {{h: number, v: number, f: number}}
  1694. */
  1695. function getIndices( slide ) {
  1696. // By default, return the current indices
  1697. let h = indexh,
  1698. v = indexv,
  1699. f;
  1700. // If a slide is specified, return the indices of that slide
  1701. if( slide ) {
  1702. // In scroll mode the original h/x index is stored on the slide
  1703. if( scrollView.isActive() ) {
  1704. h = parseInt( slide.getAttribute( 'data-index-h' ), 10 );
  1705. if( slide.getAttribute( 'data-index-v' ) ) {
  1706. v = parseInt( slide.getAttribute( 'data-index-v' ), 10 );
  1707. }
  1708. }
  1709. else {
  1710. let isVertical = isVerticalSlide( slide );
  1711. let slideh = isVertical ? slide.parentNode : slide;
  1712. // Select all horizontal slides
  1713. let horizontalSlides = getHorizontalSlides();
  1714. // Now that we know which the horizontal slide is, get its index
  1715. h = Math.max( horizontalSlides.indexOf( slideh ), 0 );
  1716. // Assume we're not vertical
  1717. v = undefined;
  1718. // If this is a vertical slide, grab the vertical index
  1719. if( isVertical ) {
  1720. v = Math.max( Util.queryAll( slide.parentNode, 'section' ).indexOf( slide ), 0 );
  1721. }
  1722. }
  1723. }
  1724. if( !slide && currentSlide ) {
  1725. let hasFragments = currentSlide.querySelectorAll( '.fragment' ).length > 0;
  1726. if( hasFragments ) {
  1727. let currentFragment = currentSlide.querySelector( '.current-fragment' );
  1728. if( currentFragment && currentFragment.hasAttribute( 'data-fragment-index' ) ) {
  1729. f = parseInt( currentFragment.getAttribute( 'data-fragment-index' ), 10 );
  1730. }
  1731. else {
  1732. f = currentSlide.querySelectorAll( '.fragment.visible' ).length - 1;
  1733. }
  1734. }
  1735. }
  1736. return { h, v, f };
  1737. }
  1738. /**
  1739. * Retrieves all slides in this presentation.
  1740. */
  1741. function getSlides() {
  1742. return Util.queryAll( dom.wrapper, SLIDES_SELECTOR + ':not(.stack):not([data-visibility="uncounted"])' );
  1743. }
  1744. /**
  1745. * Returns a list of all horizontal slides in the deck. Each
  1746. * vertical stack is included as one horizontal slide in the
  1747. * resulting array.
  1748. */
  1749. function getHorizontalSlides() {
  1750. return Util.queryAll( dom.wrapper, HORIZONTAL_SLIDES_SELECTOR );
  1751. }
  1752. /**
  1753. * Returns all vertical slides that exist within this deck.
  1754. */
  1755. function getVerticalSlides() {
  1756. return Util.queryAll( dom.wrapper, '.slides>section>section' );
  1757. }
  1758. /**
  1759. * Returns all vertical stacks (each stack can contain multiple slides).
  1760. */
  1761. function getVerticalStacks() {
  1762. return Util.queryAll( dom.wrapper, HORIZONTAL_SLIDES_SELECTOR + '.stack');
  1763. }
  1764. /**
  1765. * Returns true if there are at least two horizontal slides.
  1766. */
  1767. function hasHorizontalSlides() {
  1768. return getHorizontalSlides().length > 1;
  1769. }
  1770. /**
  1771. * Returns true if there are at least two vertical slides.
  1772. */
  1773. function hasVerticalSlides() {
  1774. return getVerticalSlides().length > 1;
  1775. }
  1776. /**
  1777. * Returns an array of objects where each object represents the
  1778. * attributes on its respective slide.
  1779. */
  1780. function getSlidesAttributes() {
  1781. return getSlides().map( slide => {
  1782. let attributes = {};
  1783. for( let i = 0; i < slide.attributes.length; i++ ) {
  1784. let attribute = slide.attributes[ i ];
  1785. attributes[ attribute.name ] = attribute.value;
  1786. }
  1787. return attributes;
  1788. } );
  1789. }
  1790. /**
  1791. * Retrieves the total number of slides in this presentation.
  1792. *
  1793. * @return {number}
  1794. */
  1795. function getTotalSlides() {
  1796. return getSlides().length;
  1797. }
  1798. /**
  1799. * Returns the slide element matching the specified index.
  1800. *
  1801. * @return {HTMLElement}
  1802. */
  1803. function getSlide( x, y ) {
  1804. let horizontalSlide = getHorizontalSlides()[ x ];
  1805. let verticalSlides = horizontalSlide && horizontalSlide.querySelectorAll( 'section' );
  1806. if( verticalSlides && verticalSlides.length && typeof y === 'number' ) {
  1807. return verticalSlides ? verticalSlides[ y ] : undefined;
  1808. }
  1809. return horizontalSlide;
  1810. }
  1811. /**
  1812. * Returns the background element for the given slide.
  1813. * All slides, even the ones with no background properties
  1814. * defined, have a background element so as long as the
  1815. * index is valid an element will be returned.
  1816. *
  1817. * @param {mixed} x Horizontal background index OR a slide
  1818. * HTML element
  1819. * @param {number} y Vertical background index
  1820. * @return {(HTMLElement[]|*)}
  1821. */
  1822. function getSlideBackground( x, y ) {
  1823. let slide = typeof x === 'number' ? getSlide( x, y ) : x;
  1824. if( slide ) {
  1825. return slide.slideBackgroundElement;
  1826. }
  1827. return undefined;
  1828. }
  1829. /**
  1830. * Retrieves the current state of the presentation as
  1831. * an object. This state can then be restored at any
  1832. * time.
  1833. *
  1834. * @return {{indexh: number, indexv: number, indexf: number, paused: boolean, overview: boolean}}
  1835. */
  1836. function getState() {
  1837. let indices = getIndices();
  1838. return {
  1839. indexh: indices.h,
  1840. indexv: indices.v,
  1841. indexf: indices.f,
  1842. paused: isPaused(),
  1843. overview: overview.isActive()
  1844. };
  1845. }
  1846. /**
  1847. * Restores the presentation to the given state.
  1848. *
  1849. * @param {object} state As generated by getState()
  1850. * @see {@link getState} generates the parameter `state`
  1851. */
  1852. function setState( state ) {
  1853. if( typeof state === 'object' ) {
  1854. slide( Util.deserialize( state.indexh ), Util.deserialize( state.indexv ), Util.deserialize( state.indexf ) );
  1855. let pausedFlag = Util.deserialize( state.paused ),
  1856. overviewFlag = Util.deserialize( state.overview );
  1857. if( typeof pausedFlag === 'boolean' && pausedFlag !== isPaused() ) {
  1858. togglePause( pausedFlag );
  1859. }
  1860. if( typeof overviewFlag === 'boolean' && overviewFlag !== overview.isActive() ) {
  1861. overview.toggle( overviewFlag );
  1862. }
  1863. }
  1864. }
  1865. /**
  1866. * Cues a new automated slide if enabled in the config.
  1867. */
  1868. function cueAutoSlide() {
  1869. cancelAutoSlide();
  1870. if( currentSlide && config.autoSlide !== false ) {
  1871. let fragment = currentSlide.querySelector( '.current-fragment[data-autoslide]' );
  1872. let fragmentAutoSlide = fragment ? fragment.getAttribute( 'data-autoslide' ) : null;
  1873. let parentAutoSlide = currentSlide.parentNode ? currentSlide.parentNode.getAttribute( 'data-autoslide' ) : null;
  1874. let slideAutoSlide = currentSlide.getAttribute( 'data-autoslide' );
  1875. // Pick value in the following priority order:
  1876. // 1. Current fragment's data-autoslide
  1877. // 2. Current slide's data-autoslide
  1878. // 3. Parent slide's data-autoslide
  1879. // 4. Global autoSlide setting
  1880. if( fragmentAutoSlide ) {
  1881. autoSlide = parseInt( fragmentAutoSlide, 10 );
  1882. }
  1883. else if( slideAutoSlide ) {
  1884. autoSlide = parseInt( slideAutoSlide, 10 );
  1885. }
  1886. else if( parentAutoSlide ) {
  1887. autoSlide = parseInt( parentAutoSlide, 10 );
  1888. }
  1889. else {
  1890. autoSlide = config.autoSlide;
  1891. // If there are media elements with data-autoplay,
  1892. // automatically set the autoSlide duration to the
  1893. // length of that media. Not applicable if the slide
  1894. // is divided up into fragments.
  1895. // playbackRate is accounted for in the duration.
  1896. if( currentSlide.querySelectorAll( '.fragment' ).length === 0 ) {
  1897. Util.queryAll( currentSlide, 'video, audio' ).forEach( el => {
  1898. if( el.hasAttribute( 'data-autoplay' ) ) {
  1899. if( autoSlide && (el.duration * 1000 / el.playbackRate ) > autoSlide ) {
  1900. autoSlide = ( el.duration * 1000 / el.playbackRate ) + 1000;
  1901. }
  1902. }
  1903. } );
  1904. }
  1905. }
  1906. // Cue the next auto-slide if:
  1907. // - There is an autoSlide value
  1908. // - Auto-sliding isn't paused by the user
  1909. // - The presentation isn't paused
  1910. // - The overview isn't active
  1911. // - The presentation isn't over
  1912. if( autoSlide && !autoSlidePaused && !isPaused() && !overview.isActive() && ( !isLastSlide() || fragments.availableRoutes().next || config.loop === true ) ) {
  1913. autoSlideTimeout = setTimeout( () => {
  1914. if( typeof config.autoSlideMethod === 'function' ) {
  1915. config.autoSlideMethod()
  1916. }
  1917. else {
  1918. navigateNext();
  1919. }
  1920. cueAutoSlide();
  1921. }, autoSlide );
  1922. autoSlideStartTime = Date.now();
  1923. }
  1924. if( autoSlidePlayer ) {
  1925. autoSlidePlayer.setPlaying( autoSlideTimeout !== -1 );
  1926. }
  1927. }
  1928. }
  1929. /**
  1930. * Cancels any ongoing request to auto-slide.
  1931. */
  1932. function cancelAutoSlide() {
  1933. clearTimeout( autoSlideTimeout );
  1934. autoSlideTimeout = -1;
  1935. }
  1936. function pauseAutoSlide() {
  1937. if( autoSlide && !autoSlidePaused ) {
  1938. autoSlidePaused = true;
  1939. dispatchEvent({ type: 'autoslidepaused' });
  1940. clearTimeout( autoSlideTimeout );
  1941. if( autoSlidePlayer ) {
  1942. autoSlidePlayer.setPlaying( false );
  1943. }
  1944. }
  1945. }
  1946. function resumeAutoSlide() {
  1947. if( autoSlide && autoSlidePaused ) {
  1948. autoSlidePaused = false;
  1949. dispatchEvent({ type: 'autoslideresumed' });
  1950. cueAutoSlide();
  1951. }
  1952. }
  1953. function navigateLeft({skipFragments=false}={}) {
  1954. navigationHistory.hasNavigatedHorizontally = true;
  1955. // Scroll view navigation is handled independently
  1956. if( scrollView.isActive() ) return scrollView.prev();
  1957. // Reverse for RTL
  1958. if( config.rtl ) {
  1959. if( ( overview.isActive() || skipFragments || fragments.next() === false ) && availableRoutes().left ) {
  1960. slide( indexh + 1, config.navigationMode === 'grid' ? indexv : undefined );
  1961. }
  1962. }
  1963. // Normal navigation
  1964. else if( ( overview.isActive() || skipFragments || fragments.prev() === false ) && availableRoutes().left ) {
  1965. slide( indexh - 1, config.navigationMode === 'grid' ? indexv : undefined );
  1966. }
  1967. }
  1968. function navigateRight({skipFragments=false}={}) {
  1969. navigationHistory.hasNavigatedHorizontally = true;
  1970. // Scroll view navigation is handled independently
  1971. if( scrollView.isActive() ) return scrollView.next();
  1972. // Reverse for RTL
  1973. if( config.rtl ) {
  1974. if( ( overview.isActive() || skipFragments || fragments.prev() === false ) && availableRoutes().right ) {
  1975. slide( indexh - 1, config.navigationMode === 'grid' ? indexv : undefined );
  1976. }
  1977. }
  1978. // Normal navigation
  1979. else if( ( overview.isActive() || skipFragments || fragments.next() === false ) && availableRoutes().right ) {
  1980. slide( indexh + 1, config.navigationMode === 'grid' ? indexv : undefined );
  1981. }
  1982. }
  1983. function navigateUp({skipFragments=false}={}) {
  1984. // Scroll view navigation is handled independently
  1985. if( scrollView.isActive() ) return scrollView.prev();
  1986. // Prioritize hiding fragments
  1987. if( ( overview.isActive() || skipFragments || fragments.prev() === false ) && availableRoutes().up ) {
  1988. slide( indexh, indexv - 1 );
  1989. }
  1990. }
  1991. function navigateDown({skipFragments=false}={}) {
  1992. navigationHistory.hasNavigatedVertically = true;
  1993. // Scroll view navigation is handled independently
  1994. if( scrollView.isActive() ) return scrollView.next();
  1995. // Prioritize revealing fragments
  1996. if( ( overview.isActive() || skipFragments || fragments.next() === false ) && availableRoutes().down ) {
  1997. slide( indexh, indexv + 1 );
  1998. }
  1999. }
  2000. /**
  2001. * Navigates backwards, prioritized in the following order:
  2002. * 1) Previous fragment
  2003. * 2) Previous vertical slide
  2004. * 3) Previous horizontal slide
  2005. */
  2006. function navigatePrev({skipFragments=false}={}) {
  2007. // Scroll view navigation is handled independently
  2008. if( scrollView.isActive() ) return scrollView.prev();
  2009. // Prioritize revealing fragments
  2010. if( skipFragments || fragments.prev() === false ) {
  2011. if( availableRoutes().up ) {
  2012. navigateUp({skipFragments});
  2013. }
  2014. else {
  2015. // Fetch the previous horizontal slide, if there is one
  2016. let previousSlide;
  2017. if( config.rtl ) {
  2018. previousSlide = Util.queryAll( dom.wrapper, HORIZONTAL_SLIDES_SELECTOR + '.future' ).pop();
  2019. }
  2020. else {
  2021. previousSlide = Util.queryAll( dom.wrapper, HORIZONTAL_SLIDES_SELECTOR + '.past' ).pop();
  2022. }
  2023. // When going backwards and arriving on a stack we start
  2024. // at the bottom of the stack
  2025. if( previousSlide && previousSlide.classList.contains( 'stack' ) ) {
  2026. let v = ( previousSlide.querySelectorAll( 'section' ).length - 1 ) || undefined;
  2027. let h = indexh - 1;
  2028. slide( h, v );
  2029. }
  2030. else {
  2031. navigateLeft({skipFragments});
  2032. }
  2033. }
  2034. }
  2035. }
  2036. /**
  2037. * The reverse of #navigatePrev().
  2038. */
  2039. function navigateNext({skipFragments=false}={}) {
  2040. navigationHistory.hasNavigatedHorizontally = true;
  2041. navigationHistory.hasNavigatedVertically = true;
  2042. // Scroll view navigation is handled independently
  2043. if( scrollView.isActive() ) return scrollView.next();
  2044. // Prioritize revealing fragments
  2045. if( skipFragments || fragments.next() === false ) {
  2046. let routes = availableRoutes();
  2047. // When looping is enabled `routes.down` is always available
  2048. // so we need a separate check for when we've reached the
  2049. // end of a stack and should move horizontally
  2050. if( routes.down && routes.right && config.loop && isLastVerticalSlide() ) {
  2051. routes.down = false;
  2052. }
  2053. if( routes.down ) {
  2054. navigateDown({skipFragments});
  2055. }
  2056. else if( config.rtl ) {
  2057. navigateLeft({skipFragments});
  2058. }
  2059. else {
  2060. navigateRight({skipFragments});
  2061. }
  2062. }
  2063. }
  2064. // --------------------------------------------------------------------//
  2065. // ----------------------------- EVENTS -------------------------------//
  2066. // --------------------------------------------------------------------//
  2067. /**
  2068. * Called by all event handlers that are based on user
  2069. * input.
  2070. *
  2071. * @param {object} [event]
  2072. */
  2073. function onUserInput( event ) {
  2074. if( config.autoSlideStoppable ) {
  2075. pauseAutoSlide();
  2076. }
  2077. }
  2078. /**
  2079. * Listener for post message events posted to this window.
  2080. */
  2081. function onPostMessage( event ) {
  2082. let data = event.data;
  2083. // Make sure we're dealing with JSON
  2084. if( typeof data === 'string' && data.charAt( 0 ) === '{' && data.charAt( data.length - 1 ) === '}' ) {
  2085. data = JSON.parse( data );
  2086. // Check if the requested method can be found
  2087. if( data.method && typeof Reveal[data.method] === 'function' ) {
  2088. if( POST_MESSAGE_METHOD_BLACKLIST.test( data.method ) === false ) {
  2089. const result = Reveal[data.method].apply( Reveal, data.args );
  2090. // Dispatch a postMessage event with the returned value from
  2091. // our method invocation for getter functions
  2092. dispatchPostMessage( 'callback', { method: data.method, result: result } );
  2093. }
  2094. else {
  2095. console.warn( 'reveal.js: "'+ data.method +'" is is blacklisted from the postMessage API' );
  2096. }
  2097. }
  2098. }
  2099. }
  2100. /**
  2101. * Event listener for transition end on the current slide.
  2102. *
  2103. * @param {object} [event]
  2104. */
  2105. function onTransitionEnd( event ) {
  2106. if( transition === 'running' && /section/gi.test( event.target.nodeName ) ) {
  2107. transition = 'idle';
  2108. dispatchEvent({
  2109. type: 'slidetransitionend',
  2110. data: { indexh, indexv, previousSlide, currentSlide }
  2111. });
  2112. }
  2113. }
  2114. /**
  2115. * A global listener for all click events inside of the
  2116. * .slides container.
  2117. *
  2118. * @param {object} [event]
  2119. */
  2120. function onSlidesClicked( event ) {
  2121. const anchor = Util.closest( event.target, 'a[href^="#"]' );
  2122. // If a hash link is clicked, we find the target slide
  2123. // and navigate to it. We previously relied on 'hashchange'
  2124. // for links like these but that prevented media with
  2125. // audio tracks from playing in mobile browsers since it
  2126. // wasn't considered a direct interaction with the document.
  2127. if( anchor ) {
  2128. const hash = anchor.getAttribute( 'href' );
  2129. const indices = location.getIndicesFromHash( hash );
  2130. if( indices ) {
  2131. Reveal.slide( indices.h, indices.v, indices.f );
  2132. event.preventDefault();
  2133. }
  2134. }
  2135. }
  2136. /**
  2137. * Handler for the window level 'resize' event.
  2138. *
  2139. * @param {object} [event]
  2140. */
  2141. function onWindowResize( event ) {
  2142. layout();
  2143. }
  2144. /**
  2145. * Handle for the window level 'visibilitychange' event.
  2146. *
  2147. * @param {object} [event]
  2148. */
  2149. function onPageVisibilityChange( event ) {
  2150. // If, after clicking a link or similar and we're coming back,
  2151. // focus the document.body to ensure we can use keyboard shortcuts
  2152. if( document.hidden === false && document.activeElement !== document.body ) {
  2153. // Not all elements support .blur() - SVGs among them.
  2154. if( typeof document.activeElement.blur === 'function' ) {
  2155. document.activeElement.blur();
  2156. }
  2157. document.body.focus();
  2158. }
  2159. }
  2160. /**
  2161. * Handler for the document level 'fullscreenchange' event.
  2162. *
  2163. * @param {object} [event]
  2164. */
  2165. function onFullscreenChange( event ) {
  2166. let element = document.fullscreenElement || document.webkitFullscreenElement;
  2167. if( element === dom.wrapper ) {
  2168. event.stopImmediatePropagation();
  2169. // Timeout to avoid layout shift in Safari
  2170. setTimeout( () => {
  2171. Reveal.layout();
  2172. Reveal.focus.focus(); // focus.focus :'(
  2173. }, 1 );
  2174. }
  2175. }
  2176. /**
  2177. * Handles clicks on links that are set to preview in the
  2178. * iframe overlay.
  2179. *
  2180. * @param {object} event
  2181. */
  2182. function onPreviewLinkClicked( event ) {
  2183. if( event.currentTarget && event.currentTarget.hasAttribute( 'href' ) ) {
  2184. let url = event.currentTarget.getAttribute( 'href' );
  2185. if( url ) {
  2186. showPreview( url );
  2187. event.preventDefault();
  2188. }
  2189. }
  2190. }
  2191. /**
  2192. * Handles click on the auto-sliding controls element.
  2193. *
  2194. * @param {object} [event]
  2195. */
  2196. function onAutoSlidePlayerClick( event ) {
  2197. // Replay
  2198. if( isLastSlide() && config.loop === false ) {
  2199. slide( 0, 0 );
  2200. resumeAutoSlide();
  2201. }
  2202. // Resume
  2203. else if( autoSlidePaused ) {
  2204. resumeAutoSlide();
  2205. }
  2206. // Pause
  2207. else {
  2208. pauseAutoSlide();
  2209. }
  2210. }
  2211. // --------------------------------------------------------------------//
  2212. // ------------------------------- API --------------------------------//
  2213. // --------------------------------------------------------------------//
  2214. // The public reveal.js API
  2215. const API = {
  2216. VERSION,
  2217. initialize,
  2218. configure,
  2219. destroy,
  2220. sync,
  2221. syncSlide,
  2222. syncFragments: fragments.sync.bind( fragments ),
  2223. // Navigation methods
  2224. slide,
  2225. left: navigateLeft,
  2226. right: navigateRight,
  2227. up: navigateUp,
  2228. down: navigateDown,
  2229. prev: navigatePrev,
  2230. next: navigateNext,
  2231. // Navigation aliases
  2232. navigateLeft, navigateRight, navigateUp, navigateDown, navigatePrev, navigateNext,
  2233. // Fragment methods
  2234. navigateFragment: fragments.goto.bind( fragments ),
  2235. prevFragment: fragments.prev.bind( fragments ),
  2236. nextFragment: fragments.next.bind( fragments ),
  2237. // Event binding
  2238. on,
  2239. off,
  2240. // Legacy event binding methods left in for backwards compatibility
  2241. addEventListener: on,
  2242. removeEventListener: off,
  2243. // Forces an update in slide layout
  2244. layout,
  2245. // Randomizes the order of slides
  2246. shuffle,
  2247. // Returns an object with the available routes as booleans (left/right/top/bottom)
  2248. availableRoutes,
  2249. // Returns an object with the available fragments as booleans (prev/next)
  2250. availableFragments: fragments.availableRoutes.bind( fragments ),
  2251. // Toggles a help overlay with keyboard shortcuts
  2252. toggleHelp,
  2253. // Toggles the overview mode on/off
  2254. toggleOverview: overview.toggle.bind( overview ),
  2255. // Toggles the scroll view on/off
  2256. toggleScrollView: scrollView.toggle.bind( scrollView ),
  2257. // Toggles the "black screen" mode on/off
  2258. togglePause,
  2259. // Toggles the auto slide mode on/off
  2260. toggleAutoSlide,
  2261. // Toggles visibility of the jump-to-slide UI
  2262. toggleJumpToSlide,
  2263. // Slide navigation checks
  2264. isFirstSlide,
  2265. isLastSlide,
  2266. isLastVerticalSlide,
  2267. isVerticalSlide,
  2268. isVerticalStack,
  2269. // State checks
  2270. isPaused,
  2271. isAutoSliding,
  2272. isSpeakerNotes: notes.isSpeakerNotesWindow.bind( notes ),
  2273. isOverview: overview.isActive.bind( overview ),
  2274. isFocused: focus.isFocused.bind( focus ),
  2275. isScrollView: scrollView.isActive.bind( scrollView ),
  2276. isPrintView: printView.isActive.bind( printView ),
  2277. // Checks if reveal.js has been loaded and is ready for use
  2278. isReady: () => ready,
  2279. // Slide preloading
  2280. loadSlide: slideContent.load.bind( slideContent ),
  2281. unloadSlide: slideContent.unload.bind( slideContent ),
  2282. // Media playback
  2283. startEmbeddedContent: () => slideContent.startEmbeddedContent( currentSlide ),
  2284. stopEmbeddedContent: () => slideContent.stopEmbeddedContent( currentSlide, { unloadIframes: false } ),
  2285. // Preview management
  2286. showPreview,
  2287. hidePreview: closeOverlay,
  2288. // Adds or removes all internal event listeners
  2289. addEventListeners,
  2290. removeEventListeners,
  2291. dispatchEvent,
  2292. // Facility for persisting and restoring the presentation state
  2293. getState,
  2294. setState,
  2295. // Presentation progress on range of 0-1
  2296. getProgress,
  2297. // Returns the indices of the current, or specified, slide
  2298. getIndices,
  2299. // Returns an Array of key:value maps of the attributes of each
  2300. // slide in the deck
  2301. getSlidesAttributes,
  2302. // Returns the number of slides that we have passed
  2303. getSlidePastCount,
  2304. // Returns the total number of slides
  2305. getTotalSlides,
  2306. // Returns the slide element at the specified index
  2307. getSlide,
  2308. // Returns the previous slide element, may be null
  2309. getPreviousSlide: () => previousSlide,
  2310. // Returns the current slide element
  2311. getCurrentSlide: () => currentSlide,
  2312. // Returns the slide background element at the specified index
  2313. getSlideBackground,
  2314. // Returns the speaker notes string for a slide, or null
  2315. getSlideNotes: notes.getSlideNotes.bind( notes ),
  2316. // Returns an Array of all slides
  2317. getSlides,
  2318. // Returns an array with all horizontal/vertical slides in the deck
  2319. getHorizontalSlides,
  2320. getVerticalSlides,
  2321. // Checks if the presentation contains two or more horizontal
  2322. // and vertical slides
  2323. hasHorizontalSlides,
  2324. hasVerticalSlides,
  2325. // Checks if the deck has navigated on either axis at least once
  2326. hasNavigatedHorizontally: () => navigationHistory.hasNavigatedHorizontally,
  2327. hasNavigatedVertically: () => navigationHistory.hasNavigatedVertically,
  2328. shouldAutoAnimateBetween,
  2329. // Adds/removes a custom key binding
  2330. addKeyBinding: keyboard.addKeyBinding.bind( keyboard ),
  2331. removeKeyBinding: keyboard.removeKeyBinding.bind( keyboard ),
  2332. // Programmatically triggers a keyboard event
  2333. triggerKey: keyboard.triggerKey.bind( keyboard ),
  2334. // Registers a new shortcut to include in the help overlay
  2335. registerKeyboardShortcut: keyboard.registerKeyboardShortcut.bind( keyboard ),
  2336. getComputedSlideSize,
  2337. setCurrentScrollPage,
  2338. // Returns the current scale of the presentation content
  2339. getScale: () => scale,
  2340. // Returns the current configuration object
  2341. getConfig: () => config,
  2342. // Helper method, retrieves query string as a key:value map
  2343. getQueryHash: Util.getQueryHash,
  2344. // Returns the path to the current slide as represented in the URL
  2345. getSlidePath: location.getHash.bind( location ),
  2346. // Returns reveal.js DOM elements
  2347. getRevealElement: () => revealElement,
  2348. getSlidesElement: () => dom.slides,
  2349. getViewportElement: () => dom.viewport,
  2350. getBackgroundsElement: () => backgrounds.element,
  2351. // API for registering and retrieving plugins
  2352. registerPlugin: plugins.registerPlugin.bind( plugins ),
  2353. hasPlugin: plugins.hasPlugin.bind( plugins ),
  2354. getPlugin: plugins.getPlugin.bind( plugins ),
  2355. getPlugins: plugins.getRegisteredPlugins.bind( plugins )
  2356. };
  2357. // Our internal API which controllers have access to
  2358. Util.extend( Reveal, {
  2359. ...API,
  2360. // Methods for announcing content to screen readers
  2361. announceStatus,
  2362. getStatusText,
  2363. // Controllers
  2364. focus,
  2365. scroll: scrollView,
  2366. progress,
  2367. controls,
  2368. location,
  2369. overview,
  2370. fragments,
  2371. backgrounds,
  2372. slideContent,
  2373. slideNumber,
  2374. onUserInput,
  2375. closeOverlay,
  2376. updateSlidesVisibility,
  2377. layoutSlideContents,
  2378. transformSlides,
  2379. cueAutoSlide,
  2380. cancelAutoSlide
  2381. } );
  2382. return API;
  2383. };