talk-end-of-procrastination/js/controllers/overview.js

import { SLIDES_SELECTOR } from '../utils/constants.js'
import { extend, queryAll, transformElement } from '../utils/util.js'

/**
 * Handles all logic related to the overview mode
 * (birds-eye view of all slides).
 */
export default class Overview {

	constructor( Reveal ) {

		this.Reveal = Reveal;

		this.active = false;

		this.onSlideClicked = this.onSlideClicked.bind( this );

	}

	/**
	 * Displays the overview of slides (quick nav) by scaling
	 * down and arranging all slide elements.
	 */
	activate() {

		// Only proceed if enabled in config
		if( this.Reveal.getConfig().overview && !this.isActive() ) {

			this.active = true;

			this.Reveal.getRevealElement().classList.add( 'overview' );

			// Don't auto-slide while in overview mode
			this.Reveal.cancelAutoSlide();

			// Move the backgrounds element into the slide container to
			// that the same scaling is applied
			this.Reveal.getSlidesElement().appendChild( this.Reveal.getBackgroundsElement() );

			// Clicking on an overview slide navigates to it
			queryAll( this.Reveal.getRevealElement(), SLIDES_SELECTOR ).forEach( slide => {
				if( !slide.classList.contains( 'stack' ) ) {
					slide.addEventListener( 'click', this.onSlideClicked, true );
				}
			} );

			// Calculate slide sizes
			const margin = 70;
			const slideSize = this.Reveal.getComputedSlideSize();
			this.overviewSlideWidth = slideSize.width + margin;
			this.overviewSlideHeight = slideSize.height + margin;

			// Reverse in RTL mode
			if( this.Reveal.getConfig().rtl ) {
				this.overviewSlideWidth = -this.overviewSlideWidth;
			}

			this.Reveal.updateSlidesVisibility();

			this.layout();
			this.update();

			this.Reveal.layout();

			const indices = this.Reveal.getIndices();

			// Notify observers of the overview showing
			this.Reveal.dispatchEvent({
				type: 'overviewshown',
				data: {
					'indexh': indices.h,
					'indexv': indices.v,
					'currentSlide': this.Reveal.getCurrentSlide()
				}
			});

		}

	}

	/**
	 * Uses CSS transforms to position all slides in a grid for
	 * display inside of the overview mode.
	 */
	layout() {

		// Layout slides
		this.Reveal.getHorizontalSlides().forEach( ( hslide, h ) => {
			hslide.setAttribute( 'data-index-h', h );
			transformElement( hslide, 'translate3d(' + ( h * this.overviewSlideWidth ) + 'px, 0, 0)' );

			if( hslide.classList.contains( 'stack' ) ) {

				queryAll( hslide, 'section' ).forEach( ( vslide, v ) => {
					vslide.setAttribute( 'data-index-h', h );
					vslide.setAttribute( 'data-index-v', v );

					transformElement( vslide, 'translate3d(0, ' + ( v * this.overviewSlideHeight ) + 'px, 0)' );
				} );

			}
		} );

		// Layout slide backgrounds
		Array.from( this.Reveal.getBackgroundsElement().childNodes ).forEach( ( hbackground, h ) => {
			transformElement( hbackground, 'translate3d(' + ( h * this.overviewSlideWidth ) + 'px, 0, 0)' );

			queryAll( hbackground, '.slide-background' ).forEach( ( vbackground, v ) => {
				transformElement( vbackground, 'translate3d(0, ' + ( v * this.overviewSlideHeight ) + 'px, 0)' );
			} );
		} );

	}

	/**
	 * Moves the overview viewport to the current slides.
	 * Called each time the current slide changes.
	 */
	update() {

		const vmin = Math.min( window.innerWidth, window.innerHeight );
		const scale = Math.max( vmin / 5, 150 ) / vmin;
		const indices = this.Reveal.getIndices();

		this.Reveal.transformSlides( {
			overview: [
				'scale('+ scale +')',
				'translateX('+ ( -indices.h * this.overviewSlideWidth ) +'px)',
				'translateY('+ ( -indices.v * this.overviewSlideHeight ) +'px)'
			].join( ' ' )
		} );

	}

	/**
	 * Exits the slide overview and enters the currently
	 * active slide.
	 */
	deactivate() {

		// Only proceed if enabled in config
		if( this.Reveal.getConfig().overview ) {

			this.active = false;

			this.Reveal.getRevealElement().classList.remove( 'overview' );

			// Temporarily add a class so that transitions can do different things
			// depending on whether they are exiting/entering overview, or just
			// moving from slide to slide
			this.Reveal.getRevealElement().classList.add( 'overview-deactivating' );

			setTimeout( () => {
				this.Reveal.getRevealElement().classList.remove( 'overview-deactivating' );
			}, 1 );

			// Move the background element back out
			this.Reveal.getRevealElement().appendChild( this.Reveal.getBackgroundsElement() );

			// Clean up changes made to slides
			queryAll( this.Reveal.getRevealElement(), SLIDES_SELECTOR ).forEach( slide => {
				transformElement( slide, '' );

				slide.removeEventListener( 'click', this.onSlideClicked, true );
			} );

			// Clean up changes made to backgrounds
			queryAll( this.Reveal.getBackgroundsElement(), '.slide-background' ).forEach( background => {
				transformElement( background, '' );
			} );

			this.Reveal.transformSlides( { overview: '' } );

			const indices = this.Reveal.getIndices();

			this.Reveal.slide( indices.h, indices.v );
			this.Reveal.layout();
			this.Reveal.cueAutoSlide();

			// Notify observers of the overview hiding
			this.Reveal.dispatchEvent({
				type: 'overviewhidden',
				data: {
					'indexh': indices.h,
					'indexv': indices.v,
					'currentSlide': this.Reveal.getCurrentSlide()
				}
			});

		}
	}

	/**
	 * Toggles the slide overview mode on and off.
	 *
	 * @param {Boolean} [override] Flag which overrides the
	 * toggle logic and forcibly sets the desired state. True means
	 * overview is open, false means it's closed.
	 */
	toggle( override ) {

		if( typeof override === 'boolean' ) {
			override ? this.activate() : this.deactivate();
		}
		else {
			this.isActive() ? this.deactivate() : this.activate();
		}

	}

	/**
	 * Checks if the overview is currently active.
	 *
	 * @return {Boolean} true if the overview is active,
	 * false otherwise
	 */
	isActive() {

		return this.active;

	}

	/**
	 * Invoked when a slide is and we're in the overview.
	 *
	 * @param {object} event
	 */
	onSlideClicked( event ) {

		if( this.isActive() ) {
			event.preventDefault();

			let element = event.target;

			while( element && !element.nodeName.match( /section/gi ) ) {
				element = element.parentNode;
			}

			if( element && !element.classList.contains( 'disabled' ) ) {

				this.deactivate();

				if( element.nodeName.match( /section/gi ) ) {
					let h = parseInt( element.getAttribute( 'data-index-h' ), 10 ),
						v = parseInt( element.getAttribute( 'data-index-v' ), 10 );

					this.Reveal.slide( h, v );
				}

			}
		}

	}

}