| 1 | import { HORIZONTAL_SLIDES_SELECTOR, HORIZONTAL_BACKGROUNDS_SELECTOR } from '../utils/constants' |
| 2 | import { queryAll } from '../utils/util' |
| 3 | |
| 4 | const HIDE_SCROLLBAR_TIMEOUT = 500; |
| 5 | const MAX_PROGRESS_SPACING = 4; |
| 6 | const MIN_PROGRESS_SEGMENT_HEIGHT = 6; |
| 7 | const MIN_PLAYHEAD_HEIGHT = 8; |
| 8 | |
| 9 | /** |
| 10 | * The scroll view lets you read a reveal.js presentation |
| 11 | * as a linear scrollable page. |
| 12 | */ |
| 13 | export default class ScrollView { |
| 14 | |
| 15 | constructor( Reveal ) { |
| 16 | |
| 17 | this.Reveal = Reveal; |
| 18 | |
| 19 | this.active = false; |
| 20 | this.activeProgressBarPage = null; |
| 21 | this.activeProgressBarTrigger = null; |
| 22 | this.activatedCallbacks = []; |
| 23 | |
| 24 | this.onScroll = this.onScroll.bind( this ); |
| 25 | |
| 26 | } |
| 27 | |
| 28 | /** |
| 29 | * Activates the scroll view. This rearranges the presentation DOM |
| 30 | * by—among other things—wrapping each slide in a page element. |
| 31 | */ |
| 32 | activate() { |
| 33 | |
| 34 | if( this.active ) return; |
| 35 | |
| 36 | const stateBeforeActivation = this.Reveal.getState(); |
| 37 | |
| 38 | this.active = true; |
| 39 | |
| 40 | // Store the full presentation HTML so that we can restore it |
| 41 | // when/if the scroll view is deactivated |
| 42 | this.slideHTMLBeforeActivation = this.Reveal.getSlidesElement().innerHTML; |
| 43 | |
| 44 | const horizontalSlides = queryAll( this.Reveal.getRevealElement(), HORIZONTAL_SLIDES_SELECTOR ); |
| 45 | const horizontalBackgrounds = queryAll( this.Reveal.getRevealElement(), HORIZONTAL_BACKGROUNDS_SELECTOR ); |
| 46 | |
| 47 | this.viewportElement.classList.add( 'loading-scroll-mode', 'reveal-scroll' ); |
| 48 | |
| 49 | let presentationBackground; |
| 50 | |
| 51 | const viewportStyles = window.getComputedStyle( this.viewportElement ); |
| 52 | if( viewportStyles && viewportStyles.background ) { |
| 53 | presentationBackground = viewportStyles.background; |
| 54 | } |
| 55 | |
| 56 | const pageElements = []; |
| 57 | const pageContainer = horizontalSlides[0].parentNode; |
| 58 | |
| 59 | let previousSlide; |
| 60 | |
| 61 | // Creates a new page element and appends the given slide/bg |
| 62 | // to it. |
| 63 | const createPageElement = ( slide, h, v, isVertical ) => { |
| 64 | |
| 65 | let contentContainer; |
| 66 | |
| 67 | // If this slide is part of an auto-animation sequence, we |
| 68 | // group it under the same page element as the previous slide |
| 69 | if( previousSlide && this.Reveal.shouldAutoAnimateBetween( previousSlide, slide ) ) { |
| 70 | contentContainer = document.createElement( 'div' ); |
| 71 | contentContainer.className = 'scroll-page-content scroll-auto-animate-page'; |
| 72 | contentContainer.style.display = 'none'; |
| 73 | previousSlide.closest( '.scroll-page-content' ).parentNode.appendChild( contentContainer ); |
| 74 | } |
| 75 | else { |
| 76 | // Wrap the slide in a page element and hide its overflow |
| 77 | // so that no page ever flows onto another |
| 78 | const page = document.createElement( 'div' ); |
| 79 | page.className = 'scroll-page'; |
| 80 | pageElements.push( page ); |
| 81 | |
| 82 | // This transfers over the background of the vertical stack containing |
| 83 | // the slide if it exists. Otherwise, it uses the presentation-wide |
| 84 | // background. |
| 85 | if( isVertical && horizontalBackgrounds.length > h ) { |
| 86 | const slideBackground = horizontalBackgrounds[h]; |
| 87 | const pageBackground = window.getComputedStyle( slideBackground ); |
| 88 | |
| 89 | if( pageBackground && pageBackground.background ) { |
| 90 | page.style.background = pageBackground.background; |
| 91 | } |
| 92 | else if( presentationBackground ) { |
| 93 | page.style.background = presentationBackground; |
| 94 | } |
| 95 | } else if( presentationBackground ) { |
| 96 | page.style.background = presentationBackground; |
| 97 | } |
| 98 | |
| 99 | const stickyContainer = document.createElement( 'div' ); |
| 100 | stickyContainer.className = 'scroll-page-sticky'; |
| 101 | page.appendChild( stickyContainer ); |
| 102 | |
| 103 | contentContainer = document.createElement( 'div' ); |
| 104 | contentContainer.className = 'scroll-page-content'; |
| 105 | stickyContainer.appendChild( contentContainer ); |
| 106 | } |
| 107 | |
| 108 | contentContainer.appendChild( slide ); |
| 109 | |
| 110 | slide.classList.remove( 'past', 'future' ); |
| 111 | slide.setAttribute( 'data-index-h', h ); |
| 112 | slide.setAttribute( 'data-index-v', v ); |
| 113 | |
| 114 | if( slide.slideBackgroundElement ) { |
| 115 | slide.slideBackgroundElement.remove( 'past', 'future' ); |
| 116 | contentContainer.insertBefore( slide.slideBackgroundElement, slide ); |
| 117 | } |
| 118 | |
| 119 | previousSlide = slide; |
| 120 | |
| 121 | } |
| 122 | |
| 123 | // Slide and slide background layout |
| 124 | horizontalSlides.forEach( ( horizontalSlide, h ) => { |
| 125 | |
| 126 | if( this.Reveal.isVerticalStack( horizontalSlide ) ) { |
| 127 | horizontalSlide.querySelectorAll( 'section' ).forEach( ( verticalSlide, v ) => { |
| 128 | createPageElement( verticalSlide, h, v, true ); |
| 129 | }); |
| 130 | } |
| 131 | else { |
| 132 | createPageElement( horizontalSlide, h, 0 ); |
| 133 | } |
| 134 | |
| 135 | }, this ); |
| 136 | |
| 137 | this.createProgressBar(); |
| 138 | |
| 139 | // Remove leftover stacks |
| 140 | queryAll( this.Reveal.getRevealElement(), '.stack' ).forEach( stack => stack.remove() ); |
| 141 | |
| 142 | // Add our newly created pages to the DOM |
| 143 | pageElements.forEach( page => pageContainer.appendChild( page ) ); |
| 144 | |
| 145 | // Re-run JS-based content layout after the slide is added to page DOM |
| 146 | this.Reveal.slideContent.layout( this.Reveal.getSlidesElement() ); |
| 147 | |
| 148 | this.Reveal.layout(); |
| 149 | this.Reveal.setState( stateBeforeActivation ); |
| 150 | |
| 151 | this.activatedCallbacks.forEach( callback => callback() ); |
| 152 | this.activatedCallbacks = []; |
| 153 | |
| 154 | this.restoreScrollPosition(); |
| 155 | |
| 156 | this.viewportElement.classList.remove( 'loading-scroll-mode' ); |
| 157 | this.viewportElement.addEventListener( 'scroll', this.onScroll, { passive: true } ); |
| 158 | |
| 159 | } |
| 160 | |
| 161 | /** |
| 162 | * Deactivates the scroll view and restores the standard slide-based |
| 163 | * presentation. |
| 164 | */ |
| 165 | deactivate() { |
| 166 | |
| 167 | if( !this.active ) return; |
| 168 | |
| 169 | const stateBeforeDeactivation = this.Reveal.getState(); |
| 170 | |
| 171 | this.active = false; |
| 172 | |
| 173 | this.viewportElement.removeEventListener( 'scroll', this.onScroll ); |
| 174 | this.viewportElement.classList.remove( 'reveal-scroll' ); |
| 175 | |
| 176 | if( this.pendingScrollRaf ) { |
| 177 | cancelAnimationFrame( this.pendingScrollRaf ); |
| 178 | this.pendingScrollRaf = 0; |
| 179 | } |
| 180 | |
| 181 | this.removeProgressBar(); |
| 182 | |
| 183 | this.Reveal.getSlidesElement().innerHTML = this.slideHTMLBeforeActivation; |
| 184 | this.Reveal.sync(); |
| 185 | this.Reveal.setState( stateBeforeDeactivation ); |
| 186 | |
| 187 | this.slideHTMLBeforeActivation = null; |
| 188 | |
| 189 | } |
| 190 | |
| 191 | toggle( override ) { |
| 192 | |
| 193 | if( typeof override === 'boolean' ) { |
| 194 | override ? this.activate() : this.deactivate(); |
| 195 | } |
| 196 | else { |
| 197 | this.isActive() ? this.deactivate() : this.activate(); |
| 198 | } |
| 199 | |
| 200 | } |
| 201 | |
| 202 | /** |
| 203 | * Checks if the scroll view is currently active. |
| 204 | */ |
| 205 | isActive() { |
| 206 | |
| 207 | return this.active; |
| 208 | |
| 209 | } |
| 210 | |
| 211 | /** |
| 212 | * Renders the progress bar component. |
| 213 | */ |
| 214 | createProgressBar() { |
| 215 | |
| 216 | this.progressBar = document.createElement( 'div' ); |
| 217 | this.progressBar.className = 'scrollbar'; |
| 218 | |
| 219 | this.progressBarInner = document.createElement( 'div' ); |
| 220 | this.progressBarInner.className = 'scrollbar-inner'; |
| 221 | this.progressBar.appendChild( this.progressBarInner ); |
| 222 | |
| 223 | this.progressBarPlayhead = document.createElement( 'div' ); |
| 224 | this.progressBarPlayhead.className = 'scrollbar-playhead'; |
| 225 | this.progressBarInner.appendChild( this.progressBarPlayhead ); |
| 226 | |
| 227 | this.viewportElement.insertBefore( this.progressBar, this.viewportElement.firstChild ); |
| 228 | |
| 229 | const handleDocumentMouseMove = ( event ) => { |
| 230 | |
| 231 | let progress = ( event.clientY - this.progressBarInner.getBoundingClientRect().top ) / this.progressBarHeight; |
| 232 | progress = Math.max( Math.min( progress, 1 ), 0 ); |
| 233 | |
| 234 | this.viewportElement.scrollTop = progress * ( this.viewportElement.scrollHeight - this.viewportElement.offsetHeight ); |
| 235 | |
| 236 | }; |
| 237 | |
| 238 | const handleDocumentMouseUp = ( event ) => { |
| 239 | |
| 240 | this.draggingProgressBar = false; |
| 241 | this.showProgressBar(); |
| 242 | |
| 243 | document.removeEventListener( 'mousemove', handleDocumentMouseMove ); |
| 244 | document.removeEventListener( 'mouseup', handleDocumentMouseUp ); |
| 245 | |
| 246 | }; |
| 247 | |
| 248 | const handleMouseDown = ( event ) => { |
| 249 | |
| 250 | event.preventDefault(); |
| 251 | |
| 252 | this.draggingProgressBar = true; |
| 253 | |
| 254 | document.addEventListener( 'mousemove', handleDocumentMouseMove ); |
| 255 | document.addEventListener( 'mouseup', handleDocumentMouseUp ); |
| 256 | |
| 257 | handleDocumentMouseMove( event ); |
| 258 | |
| 259 | }; |
| 260 | |
| 261 | this.progressBarInner.addEventListener( 'mousedown', handleMouseDown ); |
| 262 | |
| 263 | } |
| 264 | |
| 265 | removeProgressBar() { |
| 266 | |
| 267 | if( this.progressBar ) { |
| 268 | this.progressBar.remove(); |
| 269 | this.progressBar = null; |
| 270 | } |
| 271 | |
| 272 | this.activeProgressBarPage = null; |
| 273 | this.activeProgressBarTrigger = null; |
| 274 | |
| 275 | } |
| 276 | |
| 277 | layout() { |
| 278 | |
| 279 | if( this.isActive() ) { |
| 280 | this.syncPages(); |
| 281 | this.syncScrollPosition(); |
| 282 | } |
| 283 | |
| 284 | } |
| 285 | |
| 286 | /** |
| 287 | * Updates our pages to match the latest configuration and |
| 288 | * presentation size. |
| 289 | */ |
| 290 | syncPages() { |
| 291 | |
| 292 | const config = this.Reveal.getConfig(); |
| 293 | |
| 294 | const slideSize = this.Reveal.getComputedSlideSize( window.innerWidth, window.innerHeight ); |
| 295 | const scale = this.Reveal.getScale(); |
| 296 | const useCompactLayout = config.scrollLayout === 'compact'; |
| 297 | |
| 298 | const viewportHeight = this.viewportElement.offsetHeight; |
| 299 | const compactHeight = slideSize.height * scale; |
| 300 | const pageHeight = useCompactLayout ? compactHeight : viewportHeight; |
| 301 | |
| 302 | // The height that needs to be scrolled between scroll triggers |
| 303 | this.scrollTriggerHeight = useCompactLayout ? compactHeight : viewportHeight; |
| 304 | |
| 305 | this.viewportElement.style.setProperty( '--page-height', pageHeight + 'px' ); |
| 306 | this.viewportElement.style.scrollSnapType = typeof config.scrollSnap === 'string' ? `y ${config.scrollSnap}` : ''; |
| 307 | |
| 308 | // This will hold all scroll triggers used to show/hide slides |
| 309 | this.slideTriggers = []; |
| 310 | |
| 311 | const pageElements = Array.from( this.Reveal.getRevealElement().querySelectorAll( '.scroll-page' ) ); |
| 312 | |
| 313 | this.pages = pageElements.map( pageElement => { |
| 314 | const page = this.createPage({ |
| 315 | pageElement, |
| 316 | slideElement: pageElement.querySelector( 'section' ), |
| 317 | stickyElement: pageElement.querySelector( '.scroll-page-sticky' ), |
| 318 | contentElement: pageElement.querySelector( '.scroll-page-content' ), |
| 319 | backgroundElement: pageElement.querySelector( '.slide-background' ), |
| 320 | autoAnimateElements: pageElement.querySelectorAll( '.scroll-auto-animate-page' ), |
| 321 | autoAnimatePages: [] |
| 322 | }); |
| 323 | |
| 324 | page.pageElement.style.setProperty( '--slide-height', config.center === true ? 'auto' : slideSize.height + 'px' ); |
| 325 | |
| 326 | this.slideTriggers.push({ |
| 327 | page: page, |
| 328 | activate: () => this.activatePage( page ), |
| 329 | deactivate: () => this.deactivatePage( page ) |
| 330 | }); |
| 331 | |
| 332 | // Create scroll triggers that show/hide fragments |
| 333 | this.createFragmentTriggersForPage( page ); |
| 334 | |
| 335 | // Create scroll triggers for triggering auto-animate steps |
| 336 | if( page.autoAnimateElements.length > 0 ) { |
| 337 | this.createAutoAnimateTriggersForPage( page ); |
| 338 | } |
| 339 | |
| 340 | let totalScrollTriggerCount = Math.max( page.scrollTriggers.length - 1, 0 ); |
| 341 | |
| 342 | // Each auto-animate step may include its own scroll triggers |
| 343 | // for fragments, ensure we count those as well |
| 344 | totalScrollTriggerCount += page.autoAnimatePages.reduce( ( total, page ) => { |
| 345 | return total + Math.max( page.scrollTriggers.length - 1, 0 ); |
| 346 | }, page.autoAnimatePages.length ); |
| 347 | |
| 348 | // Clean up from previous renders |
| 349 | page.pageElement.querySelectorAll( '.scroll-snap-point' ).forEach( el => el.remove() ); |
| 350 | |
| 351 | // Create snap points for all scroll triggers |
| 352 | // - Can't be absolute in FF |
| 353 | // - Can't be 0-height in Safari |
| 354 | // - Can't use snap-align on parent in Safari because then |
| 355 | // inner triggers won't work |
| 356 | for( let i = 0; i < totalScrollTriggerCount + 1; i++ ) { |
| 357 | const triggerStick = document.createElement( 'div' ); |
| 358 | triggerStick.className = 'scroll-snap-point'; |
| 359 | triggerStick.style.height = this.scrollTriggerHeight + 'px'; |
| 360 | triggerStick.style.scrollSnapAlign = useCompactLayout ? 'center' : 'start'; |
| 361 | page.pageElement.appendChild( triggerStick ); |
| 362 | |
| 363 | if( i === 0 ) { |
| 364 | triggerStick.style.marginTop = -this.scrollTriggerHeight + 'px'; |
| 365 | } |
| 366 | } |
| 367 | |
| 368 | // In the compact layout, only slides with scroll triggers cover the |
| 369 | // full viewport height. This helps avoid empty gaps before or after |
| 370 | // a sticky slide. |
| 371 | if( useCompactLayout && page.scrollTriggers.length > 0 ) { |
| 372 | page.pageHeight = viewportHeight; |
| 373 | page.pageElement.style.setProperty( '--page-height', viewportHeight + 'px' ); |
| 374 | } |
| 375 | else { |
| 376 | page.pageHeight = pageHeight; |
| 377 | page.pageElement.style.removeProperty( '--page-height' ); |
| 378 | } |
| 379 | |
| 380 | // Add scroll padding based on how many scroll triggers we have |
| 381 | page.scrollPadding = this.scrollTriggerHeight * totalScrollTriggerCount; |
| 382 | |
| 383 | // The total height including scrollable space |
| 384 | page.totalHeight = page.pageHeight + page.scrollPadding; |
| 385 | |
| 386 | // This is used to pad the height of our page in CSS |
| 387 | page.pageElement.style.setProperty( '--page-scroll-padding', page.scrollPadding + 'px' ); |
| 388 | |
| 389 | // If this is a sticky page, stick it to the vertical center |
| 390 | if( totalScrollTriggerCount > 0 ) { |
| 391 | page.stickyElement.style.position = 'sticky'; |
| 392 | page.stickyElement.style.top = Math.max( ( viewportHeight - page.pageHeight ) / 2, 0 ) + 'px'; |
| 393 | } |
| 394 | else { |
| 395 | page.stickyElement.style.position = 'relative'; |
| 396 | page.pageElement.style.scrollSnapAlign = page.pageHeight < viewportHeight ? 'center' : 'start'; |
| 397 | } |
| 398 | |
| 399 | return page; |
| 400 | } ); |
| 401 | |
| 402 | this.setTriggerRanges(); |
| 403 | |
| 404 | /* |
| 405 | console.log(this.slideTriggers.map( t => { |
| 406 | return { |
| 407 | range: `${t.range[0].toFixed(2)}-${t.range[1].toFixed(2)}`, |
| 408 | triggers: t.page.scrollTriggers.map( t => { |
| 409 | return `${t.range[0].toFixed(2)}-${t.range[1].toFixed(2)}` |
| 410 | }).join( ', ' ), |
| 411 | } |
| 412 | })) |
| 413 | */ |
| 414 | |
| 415 | this.viewportElement.setAttribute( 'data-scrollbar', config.scrollProgress ); |
| 416 | |
| 417 | if( config.scrollProgress && this.totalScrollTriggerCount > 1 ) { |
| 418 | // Create the progress bar if it doesn't already exist |
| 419 | if( !this.progressBar ) this.createProgressBar(); |
| 420 | |
| 421 | this.syncProgressBar(); |
| 422 | } |
| 423 | else { |
| 424 | this.removeProgressBar(); |
| 425 | } |
| 426 | |
| 427 | } |
| 428 | |
| 429 | /** |
| 430 | * Calculates and sets the scroll range for all of our scroll |
| 431 | * triggers. |
| 432 | */ |
| 433 | setTriggerRanges() { |
| 434 | |
| 435 | // Calculate the total number of scroll triggers |
| 436 | this.totalScrollTriggerCount = this.slideTriggers.reduce( ( total, trigger ) => { |
| 437 | return total + Math.max( trigger.page.scrollTriggers.length, 1 ); |
| 438 | }, 0 ); |
| 439 | |
| 440 | let rangeStart = 0; |
| 441 | |
| 442 | // Calculate the scroll range of each scroll trigger on a scale |
| 443 | // of 0-1 |
| 444 | this.slideTriggers.forEach( ( trigger, i ) => { |
| 445 | trigger.range = [ |
| 446 | rangeStart, |
| 447 | rangeStart + Math.max( trigger.page.scrollTriggers.length, 1 ) / this.totalScrollTriggerCount |
| 448 | ]; |
| 449 | |
| 450 | const scrollTriggerSegmentSize = ( trigger.range[1] - trigger.range[0] ) / trigger.page.scrollTriggers.length; |
| 451 | // Set the range for each inner scroll trigger |
| 452 | trigger.page.scrollTriggers.forEach( ( scrollTrigger, i ) => { |
| 453 | scrollTrigger.range = [ |
| 454 | rangeStart + i * scrollTriggerSegmentSize, |
| 455 | rangeStart + ( i + 1 ) * scrollTriggerSegmentSize |
| 456 | ]; |
| 457 | } ); |
| 458 | |
| 459 | rangeStart = trigger.range[1]; |
| 460 | } ); |
| 461 | |
| 462 | // Ensure the last trigger extends to the end of the page, otherwise |
| 463 | // rounding errors can cause the last trigger to end at 0.999999... |
| 464 | this.slideTriggers[this.slideTriggers.length - 1].range[1] = 1; |
| 465 | |
| 466 | } |
| 467 | |
| 468 | /** |
| 469 | * Creates one scroll trigger for each fragments in the given page. |
| 470 | * |
| 471 | * @param {*} page |
| 472 | */ |
| 473 | createFragmentTriggersForPage( page, slideElement ) { |
| 474 | |
| 475 | slideElement = slideElement || page.slideElement; |
| 476 | |
| 477 | // Each fragment 'group' is an array containing one or more |
| 478 | // fragments. Multiple fragments that appear at the same time |
| 479 | // are part of the same group. |
| 480 | const fragmentGroups = this.Reveal.fragments.sort( slideElement.querySelectorAll( '.fragment' ), true ); |
| 481 | |
| 482 | // Create scroll triggers that show/hide fragments |
| 483 | if( fragmentGroups.length ) { |
| 484 | page.fragments = this.Reveal.fragments.sort( slideElement.querySelectorAll( '.fragment:not(.disabled)' ) ); |
| 485 | page.scrollTriggers.push( |
| 486 | // Trigger for the initial state with no fragments visible |
| 487 | { |
| 488 | activate: () => { |
| 489 | this.Reveal.fragments.update( -1, page.fragments, slideElement ); |
| 490 | } |
| 491 | } |
| 492 | ); |
| 493 | |
| 494 | // Triggers for each fragment group |
| 495 | fragmentGroups.forEach( ( fragments, i ) => { |
| 496 | page.scrollTriggers.push({ |
| 497 | activate: () => { |
| 498 | this.Reveal.fragments.update( i, page.fragments, slideElement ); |
| 499 | } |
| 500 | }); |
| 501 | } ); |
| 502 | } |
| 503 | |
| 504 | |
| 505 | return page.scrollTriggers.length; |
| 506 | |
| 507 | } |
| 508 | |
| 509 | /** |
| 510 | * Creates scroll triggers for the auto-animate steps in the |
| 511 | * given page. |
| 512 | * |
| 513 | * @param {*} page |
| 514 | */ |
| 515 | createAutoAnimateTriggersForPage( page ) { |
| 516 | |
| 517 | if( page.autoAnimateElements.length > 0 ) { |
| 518 | |
| 519 | // Triggers for each subsequent auto-animate slide |
| 520 | this.slideTriggers.push( ...Array.from( page.autoAnimateElements ).map( ( autoAnimateElement, i ) => { |
| 521 | let autoAnimatePage = this.createPage({ |
| 522 | slideElement: autoAnimateElement.querySelector( 'section' ), |
| 523 | contentElement: autoAnimateElement, |
| 524 | backgroundElement: autoAnimateElement.querySelector( '.slide-background' ) |
| 525 | }); |
| 526 | |
| 527 | // Create fragment scroll triggers for the auto-animate slide |
| 528 | this.createFragmentTriggersForPage( autoAnimatePage, autoAnimatePage.slideElement ); |
| 529 | |
| 530 | page.autoAnimatePages.push( autoAnimatePage ); |
| 531 | |
| 532 | // Return our slide trigger |
| 533 | return { |
| 534 | page: autoAnimatePage, |
| 535 | activate: () => this.activatePage( autoAnimatePage ), |
| 536 | deactivate: () => this.deactivatePage( autoAnimatePage ) |
| 537 | }; |
| 538 | })); |
| 539 | } |
| 540 | |
| 541 | } |
| 542 | |
| 543 | /** |
| 544 | * Helper method for creating a page definition and adding |
| 545 | * required fields. A "page" is a slide or auto-animate step. |
| 546 | */ |
| 547 | createPage( page ) { |
| 548 | |
| 549 | page.scrollTriggers = []; |
| 550 | page.indexh = parseInt( page.slideElement.getAttribute( 'data-index-h' ), 10 ); |
| 551 | page.indexv = parseInt( page.slideElement.getAttribute( 'data-index-v' ), 10 ); |
| 552 | |
| 553 | return page; |
| 554 | |
| 555 | } |
| 556 | |
| 557 | /** |
| 558 | * Rerenders progress bar segments so that they match the current |
| 559 | * reveal.js config and size. |
| 560 | */ |
| 561 | syncProgressBar() { |
| 562 | |
| 563 | this.progressBarInner.querySelectorAll( '.scrollbar-slide' ).forEach( slide => slide.remove() ); |
| 564 | this.activeProgressBarPage = null; |
| 565 | this.activeProgressBarTrigger = null; |
| 566 | |
| 567 | this.getAllPages().forEach( page => { |
| 568 | page.progressBarSlide = null; |
| 569 | page.scrollTriggers.forEach( trigger => trigger.progressBarElement = null ); |
| 570 | } ); |
| 571 | |
| 572 | const scrollHeight = this.viewportElement.scrollHeight; |
| 573 | const viewportHeight = this.viewportElement.offsetHeight; |
| 574 | const viewportHeightFactor = viewportHeight / scrollHeight; |
| 575 | |
| 576 | this.progressBarHeight = this.progressBarInner.offsetHeight; |
| 577 | this.playheadHeight = Math.max( viewportHeightFactor * this.progressBarHeight, MIN_PLAYHEAD_HEIGHT ); |
| 578 | this.progressBarScrollableHeight = this.progressBarHeight - this.playheadHeight; |
| 579 | |
| 580 | const progressSegmentHeight = viewportHeight / scrollHeight * this.progressBarHeight; |
| 581 | const spacing = Math.min( progressSegmentHeight / 8, MAX_PROGRESS_SPACING ); |
| 582 | |
| 583 | this.progressBarPlayhead.style.height = this.playheadHeight - spacing + 'px'; |
| 584 | |
| 585 | // Don't show individual segments if they're too small |
| 586 | if( progressSegmentHeight > MIN_PROGRESS_SEGMENT_HEIGHT ) { |
| 587 | |
| 588 | this.slideTriggers.forEach( slideTrigger => { |
| 589 | |
| 590 | const { page } = slideTrigger; |
| 591 | |
| 592 | // Visual representation of a slide |
| 593 | page.progressBarSlide = document.createElement( 'div' ); |
| 594 | page.progressBarSlide.className = 'scrollbar-slide'; |
| 595 | page.progressBarSlide.style.top = slideTrigger.range[0] * this.progressBarHeight + 'px'; |
| 596 | page.progressBarSlide.style.height = ( slideTrigger.range[1] - slideTrigger.range[0] ) * this.progressBarHeight - spacing + 'px'; |
| 597 | page.progressBarSlide.classList.toggle( 'has-triggers', page.scrollTriggers.length > 0 ); |
| 598 | this.progressBarInner.appendChild( page.progressBarSlide ); |
| 599 | |
| 600 | // Visual representations of each scroll trigger |
| 601 | page.scrollTriggers.forEach( ( trigger, i ) => { |
| 602 | |
| 603 | const triggerElement = document.createElement( 'div' ); |
| 604 | triggerElement.className = 'scrollbar-trigger'; |
| 605 | triggerElement.style.top = ( trigger.range[0] - slideTrigger.range[0] ) * this.progressBarHeight + 'px'; |
| 606 | triggerElement.style.height = ( trigger.range[1] - trigger.range[0] ) * this.progressBarHeight - spacing + 'px'; |
| 607 | page.progressBarSlide.appendChild( triggerElement ); |
| 608 | |
| 609 | if( i === 0 ) triggerElement.style.display = 'none'; |
| 610 | |
| 611 | trigger.progressBarElement = triggerElement; |
| 612 | |
| 613 | } ); |
| 614 | |
| 615 | } ); |
| 616 | |
| 617 | } |
| 618 | |
| 619 | } |
| 620 | |
| 621 | /** |
| 622 | * Reads the current scroll position and updates our active |
| 623 | * trigger states accordingly. |
| 624 | */ |
| 625 | syncScrollPosition() { |
| 626 | |
| 627 | const viewportHeight = this.viewportElement.offsetHeight; |
| 628 | const viewportHeightFactor = viewportHeight / this.viewportElement.scrollHeight; |
| 629 | |
| 630 | const scrollTop = this.viewportElement.scrollTop; |
| 631 | const scrollHeight = this.viewportElement.scrollHeight - viewportHeight |
| 632 | const scrollProgress = Math.max( Math.min( scrollTop / scrollHeight, 1 ), 0 ); |
| 633 | const scrollProgressMid = Math.max( Math.min( ( scrollTop + viewportHeight / 2 ) / this.viewportElement.scrollHeight, 1 ), 0 ); |
| 634 | |
| 635 | let activePage; |
| 636 | let activeScrollTrigger = null; |
| 637 | |
| 638 | this.slideTriggers.forEach( ( trigger ) => { |
| 639 | const { page } = trigger; |
| 640 | |
| 641 | const shouldPreload = scrollProgress >= trigger.range[0] - viewportHeightFactor*2 && |
| 642 | scrollProgress <= trigger.range[1] + viewportHeightFactor*2; |
| 643 | |
| 644 | // Load slides that are within the preload range |
| 645 | if( shouldPreload && !page.loaded ) { |
| 646 | page.loaded = true; |
| 647 | this.Reveal.slideContent.load( page.slideElement ); |
| 648 | } |
| 649 | else if( !shouldPreload && page.loaded ) { |
| 650 | page.loaded = false; |
| 651 | this.Reveal.slideContent.unload( page.slideElement ); |
| 652 | } |
| 653 | |
| 654 | // If we're within this trigger range, activate it |
| 655 | if( scrollProgress >= trigger.range[0] && scrollProgress <= trigger.range[1] ) { |
| 656 | this.activateTrigger( trigger ); |
| 657 | activePage = trigger.page; |
| 658 | } |
| 659 | // .. otherwise deactivate |
| 660 | else if( trigger.active ) { |
| 661 | this.deactivateTrigger( trigger ); |
| 662 | } |
| 663 | } ); |
| 664 | |
| 665 | // Each page can have its own scroll triggers, check if any of those |
| 666 | // need to be activated/deactivated |
| 667 | if( activePage ) { |
| 668 | activePage.scrollTriggers.forEach( ( trigger ) => { |
| 669 | if( scrollProgressMid >= trigger.range[0] && scrollProgressMid <= trigger.range[1] ) { |
| 670 | this.activateTrigger( trigger ); |
| 671 | activeScrollTrigger = trigger; |
| 672 | } |
| 673 | else if( trigger.active ) { |
| 674 | this.deactivateTrigger( trigger ); |
| 675 | } |
| 676 | } ); |
| 677 | } |
| 678 | |
| 679 | // Update our visual progress indication |
| 680 | this.setProgressBarValue( |
| 681 | scrollTop / ( this.viewportElement.scrollHeight - viewportHeight ), |
| 682 | activePage, |
| 683 | activeScrollTrigger |
| 684 | ); |
| 685 | |
| 686 | } |
| 687 | |
| 688 | /** |
| 689 | * Moves the progress bar playhead to the specified position. |
| 690 | * |
| 691 | * @param {number} progress 0-1 |
| 692 | * @param {object} activePage |
| 693 | * @param {object} activeScrollTrigger |
| 694 | */ |
| 695 | setProgressBarValue( progress, activePage = null, activeScrollTrigger = null ) { |
| 696 | |
| 697 | if( this.progressBar ) { |
| 698 | |
| 699 | this.progressBarPlayhead.style.transform = `translateY(${progress * this.progressBarScrollableHeight}px)`; |
| 700 | |
| 701 | if( this.activeProgressBarPage !== activePage ) { |
| 702 | this.activeProgressBarPage?.progressBarSlide?.classList.remove( 'active' ); |
| 703 | activePage?.progressBarSlide?.classList.add( 'active' ); |
| 704 | this.activeProgressBarPage = activePage; |
| 705 | } |
| 706 | |
| 707 | if( this.activeProgressBarTrigger !== activeScrollTrigger ) { |
| 708 | this.activeProgressBarTrigger?.progressBarElement?.classList.remove( 'active' ); |
| 709 | activeScrollTrigger?.progressBarElement?.classList.add( 'active' ); |
| 710 | this.activeProgressBarTrigger = activeScrollTrigger; |
| 711 | } |
| 712 | |
| 713 | this.showProgressBar(); |
| 714 | |
| 715 | } |
| 716 | |
| 717 | } |
| 718 | |
| 719 | /** |
| 720 | * Show the progress bar and, if configured, automatically hide |
| 721 | * it after a delay. |
| 722 | */ |
| 723 | showProgressBar() { |
| 724 | |
| 725 | this.progressBar.classList.add( 'visible' ); |
| 726 | |
| 727 | clearTimeout( this.hideProgressBarTimeout ); |
| 728 | |
| 729 | if( this.Reveal.getConfig().scrollProgress === 'auto' && !this.draggingProgressBar ) { |
| 730 | |
| 731 | this.hideProgressBarTimeout = setTimeout( () => { |
| 732 | if( this.progressBar ) { |
| 733 | this.progressBar.classList.remove( 'visible' ); |
| 734 | } |
| 735 | }, HIDE_SCROLLBAR_TIMEOUT ); |
| 736 | |
| 737 | } |
| 738 | |
| 739 | } |
| 740 | |
| 741 | /** |
| 742 | * Scroll to the previous page. |
| 743 | */ |
| 744 | prev() { |
| 745 | |
| 746 | this.viewportElement.scrollTop -= this.scrollTriggerHeight; |
| 747 | |
| 748 | } |
| 749 | |
| 750 | /** |
| 751 | * Scroll to the next page. |
| 752 | */ |
| 753 | next() { |
| 754 | |
| 755 | this.viewportElement.scrollTop += this.scrollTriggerHeight; |
| 756 | |
| 757 | } |
| 758 | |
| 759 | /** |
| 760 | * Scrolls the given slide element into view. |
| 761 | * |
| 762 | * @param {HTMLElement} slideElement |
| 763 | */ |
| 764 | scrollToSlide( slideElement ) { |
| 765 | |
| 766 | // If the scroll view isn't active yet, queue this action |
| 767 | if( !this.active ) { |
| 768 | this.activatedCallbacks.push( () => this.scrollToSlide( slideElement ) ); |
| 769 | } |
| 770 | else { |
| 771 | // Find the trigger for this slide |
| 772 | const trigger = this.getScrollTriggerBySlide( slideElement ); |
| 773 | |
| 774 | if( trigger ) { |
| 775 | // Use the trigger's range to calculate the scroll position |
| 776 | this.viewportElement.scrollTop = trigger.range[0] * ( this.viewportElement.scrollHeight - this.viewportElement.offsetHeight ); |
| 777 | } |
| 778 | } |
| 779 | |
| 780 | } |
| 781 | |
| 782 | /** |
| 783 | * Persists the current scroll position to session storage |
| 784 | * so that it can be restored. |
| 785 | */ |
| 786 | storeScrollPosition() { |
| 787 | |
| 788 | clearTimeout( this.storeScrollPositionTimeout ); |
| 789 | |
| 790 | this.storeScrollPositionTimeout = setTimeout( () => { |
| 791 | sessionStorage.setItem( 'reveal-scroll-top', this.viewportElement.scrollTop ); |
| 792 | sessionStorage.setItem( 'reveal-scroll-origin', location.origin + location.pathname ); |
| 793 | |
| 794 | this.storeScrollPositionTimeout = null; |
| 795 | }, 50 ); |
| 796 | |
| 797 | } |
| 798 | |
| 799 | /** |
| 800 | * Restores the scroll position when a deck is reloader. |
| 801 | */ |
| 802 | restoreScrollPosition() { |
| 803 | |
| 804 | const scrollPosition = sessionStorage.getItem( 'reveal-scroll-top' ); |
| 805 | const scrollOrigin = sessionStorage.getItem( 'reveal-scroll-origin' ); |
| 806 | |
| 807 | if( scrollPosition && scrollOrigin === location.origin + location.pathname ) { |
| 808 | this.viewportElement.scrollTop = parseInt( scrollPosition, 10 ); |
| 809 | } |
| 810 | |
| 811 | } |
| 812 | |
| 813 | /** |
| 814 | * Activates the given page and starts its embedded content |
| 815 | * if there is any. |
| 816 | * |
| 817 | * @param {object} page |
| 818 | */ |
| 819 | activatePage( page ) { |
| 820 | |
| 821 | if( !page.active ) { |
| 822 | |
| 823 | page.active = true; |
| 824 | |
| 825 | const { slideElement, backgroundElement, contentElement, indexh, indexv } = page; |
| 826 | |
| 827 | contentElement.style.display = 'block'; |
| 828 | |
| 829 | slideElement.classList.add( 'present' ); |
| 830 | |
| 831 | if( backgroundElement ) { |
| 832 | backgroundElement.classList.add( 'present' ); |
| 833 | } |
| 834 | |
| 835 | this.Reveal.setCurrentScrollPage( slideElement, indexh, indexv ); |
| 836 | this.Reveal.backgrounds.bubbleSlideContrastClassToElement( slideElement, this.viewportElement ); |
| 837 | |
| 838 | // If this page is part of an auto-animation there will be one |
| 839 | // content element per auto-animated page. We need to show the |
| 840 | // current page and hide all others. |
| 841 | Array.from( contentElement.parentNode.querySelectorAll( '.scroll-page-content' ) ).forEach( sibling => { |
| 842 | if( sibling !== contentElement ) { |
| 843 | sibling.style.display = 'none'; |
| 844 | } |
| 845 | }); |
| 846 | |
| 847 | } |
| 848 | |
| 849 | } |
| 850 | |
| 851 | /** |
| 852 | * Deactivates the page after it has been visible. |
| 853 | * |
| 854 | * @param {object} page |
| 855 | */ |
| 856 | deactivatePage( page ) { |
| 857 | |
| 858 | if( page.active ) { |
| 859 | |
| 860 | page.active = false; |
| 861 | if( page.slideElement ) page.slideElement.classList.remove( 'present' ); |
| 862 | if( page.backgroundElement ) page.backgroundElement.classList.remove( 'present' ); |
| 863 | |
| 864 | } |
| 865 | |
| 866 | } |
| 867 | |
| 868 | activateTrigger( trigger ) { |
| 869 | |
| 870 | if( !trigger.active ) { |
| 871 | trigger.active = true; |
| 872 | trigger.activate(); |
| 873 | } |
| 874 | |
| 875 | } |
| 876 | |
| 877 | deactivateTrigger( trigger ) { |
| 878 | |
| 879 | if( trigger.active ) { |
| 880 | trigger.active = false; |
| 881 | |
| 882 | if( trigger.deactivate ) { |
| 883 | trigger.deactivate(); |
| 884 | } |
| 885 | } |
| 886 | |
| 887 | } |
| 888 | |
| 889 | /** |
| 890 | * Retrieve a slide by its original h/v index (i.e. the indices the |
| 891 | * slide had before being linearized). |
| 892 | * |
| 893 | * @param {number} h |
| 894 | * @param {number} v |
| 895 | * @returns {HTMLElement} |
| 896 | */ |
| 897 | getSlideByIndices( h, v ) { |
| 898 | |
| 899 | const page = this.getAllPages().find( page => { |
| 900 | return page.indexh === h && page.indexv === v; |
| 901 | } ); |
| 902 | |
| 903 | return page ? page.slideElement : null; |
| 904 | |
| 905 | } |
| 906 | |
| 907 | /** |
| 908 | * Retrieve a list of all scroll triggers for the given slide |
| 909 | * DOM element. |
| 910 | * |
| 911 | * @param {HTMLElement} slide |
| 912 | * @returns {Array} |
| 913 | */ |
| 914 | getScrollTriggerBySlide( slide ) { |
| 915 | |
| 916 | return this.slideTriggers.find( trigger => trigger.page.slideElement === slide ); |
| 917 | |
| 918 | } |
| 919 | |
| 920 | /** |
| 921 | * Get a list of all pages in the scroll view. This includes |
| 922 | * both top-level slides and auto-animate steps. |
| 923 | * |
| 924 | * @returns {Array} |
| 925 | */ |
| 926 | getAllPages() { |
| 927 | |
| 928 | return this.pages.flatMap( page => [page, ...(page.autoAnimatePages || [])] ); |
| 929 | |
| 930 | } |
| 931 | |
| 932 | onScroll() { |
| 933 | |
| 934 | if( this.pendingScrollRaf ) return; |
| 935 | |
| 936 | this.pendingScrollRaf = requestAnimationFrame( () => { |
| 937 | this.pendingScrollRaf = 0; |
| 938 | this.syncScrollPosition(); |
| 939 | this.storeScrollPosition(); |
| 940 | } ); |
| 941 | |
| 942 | } |
| 943 | |
| 944 | get viewportElement() { |
| 945 | |
| 946 | return this.Reveal.getViewportElement(); |
| 947 | |
| 948 | } |
| 949 | |
| 950 | } |
| 951 |