Method syncPages

js/controllers/scrollview.js:280–417

* Updates our pages to match the latest configuration and * presentation size.

()

	 * presentation size.
	 */
	syncPages() {

		const config = this.Reveal.getConfig();

		const slideSize = this.Reveal.getComputedSlideSize( window.innerWidth, window.innerHeight );
		const scale = this.Reveal.getScale();
		const useCompactLayout = config.scrollLayout === 'compact';

		const viewportHeight = this.viewportElement.offsetHeight;
		const compactHeight = slideSize.height * scale;
		const pageHeight = useCompactLayout ? compactHeight : viewportHeight;

		// The height that needs to be scrolled between scroll triggers
		this.scrollTriggerHeight = useCompactLayout ? compactHeight : viewportHeight;

		this.viewportElement.style.setProperty( '--page-height', pageHeight + 'px' );
		this.viewportElement.style.scrollSnapType = typeof config.scrollSnap === 'string' ? `y ${config.scrollSnap}` : '';

		// This will hold all scroll triggers used to show/hide slides
		this.slideTriggers = [];

		const pageElements = Array.from( this.Reveal.getRevealElement().querySelectorAll( '.scroll-page' ) );

		this.pages = pageElements.map( pageElement => {
			const page = this.createPage({
				pageElement,
				slideElement: pageElement.querySelector( 'section' ),
				stickyElement: pageElement.querySelector( '.scroll-page-sticky' ),
				contentElement: pageElement.querySelector( '.scroll-page-content' ),
				backgroundElement: pageElement.querySelector( '.slide-background' ),
				autoAnimateElements: pageElement.querySelectorAll( '.scroll-auto-animate-page' ),
				autoAnimatePages: []
			});

			page.pageElement.style.setProperty( '--slide-height', config.center === true ? 'auto' : slideSize.height + 'px' );

			this.slideTriggers.push({
				page: page,
				activate: () => this.activatePage( page ),
				deactivate: () => this.deactivatePage( page )
			});

			// Create scroll triggers that show/hide fragments
			this.createFragmentTriggersForPage( page );

			// Create scroll triggers for triggering auto-animate steps
			if( page.autoAnimateElements.length > 0 ) {
				this.createAutoAnimateTriggersForPage( page );
			}

			let totalScrollTriggerCount = Math.max( page.scrollTriggers.length - 1, 0 );

			// Each auto-animate step may include its own scroll triggers
			// for fragments, ensure we count those as well
			totalScrollTriggerCount += page.autoAnimatePages.reduce( ( total, page ) => {
				return total + Math.max( page.scrollTriggers.length - 1, 0 );
			}, page.autoAnimatePages.length );