Commit cd78bbd4 authored by Hakim El Hattab's avatar Hakim El Hattab
Browse files

move overview to new module

parent 75ef44ca
This diff is collapsed.
import { extend, toArray } from '../utils/util.js'
/**
*
* Handles sorting and navigation of slide fragments.
* Fragments are elements within a slide that are
* revealed/animated incrementally.
*/
export default class Fragments {
......
import { SLIDES_SELECTOR } from '../utils/constants.js'
import { extend, toArray, 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
toArray( this.Reveal.getRevealElement().querySelectorAll( 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( 'overviewshown', {
'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' ) ) {
toArray( hslide.querySelectorAll( '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
toArray( this.Reveal.getBackgroundsElement().childNodes ).forEach( ( hbackground, h ) => {
transformElement( hbackground, 'translate3d(' + ( h * this.overviewSlideWidth ) + 'px, 0, 0)' );
toArray( hbackground.querySelectorAll( '.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
toArray( this.Reveal.getRevealElement().querySelectorAll( SLIDES_SELECTOR ) ).forEach( slide => {
transformElement( slide, '' );
slide.removeEventListener( 'click', this.onSlideClicked, true );
} );
// Clean up changes made to backgrounds
toArray( this.Reveal.getBackgroundsElement().querySelectorAll( '.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( 'overviewhidden', {
'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 );
}
}
}
}
}
\ No newline at end of file
import SlideContent from './controllers/slidecontent.js'
import AutoAnimate from './controllers/autoanimate.js'
import Fragments from './controllers/fragments.js'
import Overview from './controllers/overview.js'
import Plugins from './controllers/plugins.js'
import Playback from './components/playback.js'
import defaultConfig from './config.js'
......@@ -37,21 +38,12 @@ export default function( revealElement, options ) {
// The reveal.js version
const VERSION = '4.0.0-dev';
const UA = navigator.userAgent;
// Configuration defaults, can be overridden at initialization time
let config,
// Flags if reveal.js is loaded (has dispatched the 'ready' event)
ready = false,
// Flags if the overview mode is currently active
overview = false,
// Holds the dimensions of our overview slides, including margins
overviewSlideWidth = null,
overviewSlideHeight = null,
// The horizontal and vertical index of the currently active slide
indexh,
indexv,
......@@ -93,6 +85,8 @@ export default function( revealElement, options ) {
// Controls navigation between slide fragments
fragments = new Fragments( Reveal ),
overview = new Overview( Reveal ),
// List of asynchronously loaded reveal.js dependencies
asyncDependencies = [],
......@@ -1489,8 +1483,8 @@ export default function( revealElement, options ) {
updateProgress();
updateParallax();
if( isOverview() ) {
updateOverview();
if( overview.isActive() ) {
overview.update();
}
}
......@@ -1606,199 +1600,6 @@ export default function( revealElement, options ) {
}
/**
* Displays the overview of slides (quick nav) by scaling
* down and arranging all slide elements.
*/
function activateOverview() {
// Only proceed if enabled in config
if( config.overview && !isOverview() ) {
overview = true;
dom.wrapper.classList.add( 'overview' );
// Don't auto-slide while in overview mode
cancelAutoSlide();
// Move the backgrounds element into the slide container to
// that the same scaling is applied
dom.slides.appendChild( dom.background );
// Clicking on an overview slide navigates to it
toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ).forEach( slide => {
if( !slide.classList.contains( 'stack' ) ) {
slide.addEventListener( 'click', onOverviewSlideClicked, true );
}
} );
// Calculate slide sizes
const margin = 70;
const slideSize = getComputedSlideSize();
overviewSlideWidth = slideSize.width + margin;
overviewSlideHeight = slideSize.height + margin;
// Reverse in RTL mode
if( config.rtl ) {
overviewSlideWidth = -overviewSlideWidth;
}
updateSlidesVisibility();
layoutOverview();
updateOverview();
layout();
// Notify observers of the overview showing
dispatchEvent( 'overviewshown', {
'indexh': indexh,
'indexv': indexv,
'currentSlide': currentSlide
} );
}
}
/**
* Uses CSS transforms to position all slides in a grid for
* display inside of the overview mode.
*/
function layoutOverview() {
// Layout slides
toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( ( hslide, h ) => {
hslide.setAttribute( 'data-index-h', h );
transformElement( hslide, 'translate3d(' + ( h * overviewSlideWidth ) + 'px, 0, 0)' );
if( hslide.classList.contains( 'stack' ) ) {
toArray( hslide.querySelectorAll( 'section' ) ).forEach( ( vslide, v ) => {
vslide.setAttribute( 'data-index-h', h );
vslide.setAttribute( 'data-index-v', v );
transformElement( vslide, 'translate3d(0, ' + ( v * overviewSlideHeight ) + 'px, 0)' );
} );
}
} );
// Layout slide backgrounds
toArray( dom.background.childNodes ).forEach( ( hbackground, h ) => {
transformElement( hbackground, 'translate3d(' + ( h * overviewSlideWidth ) + 'px, 0, 0)' );
toArray( hbackground.querySelectorAll( '.slide-background' ) ).forEach( ( vbackground, v ) => {
transformElement( vbackground, 'translate3d(0, ' + ( v * overviewSlideHeight ) + 'px, 0)' );
} );
} );
}
/**
* Moves the overview viewport to the current slides.
* Called each time the current slide changes.
*/
function updateOverview() {
const vmin = Math.min( window.innerWidth, window.innerHeight );
const scale = Math.max( vmin / 5, 150 ) / vmin;
transformSlides( {
overview: [
'scale('+ scale +')',
'translateX('+ ( -indexh * overviewSlideWidth ) +'px)',
'translateY('+ ( -indexv * overviewSlideHeight ) +'px)'
].join( ' ' )
} );
}
/**
* Exits the slide overview and enters the currently
* active slide.
*/
function deactivateOverview() {
// Only proceed if enabled in config
if( config.overview ) {
overview = false;
dom.wrapper.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
dom.wrapper.classList.add( 'overview-deactivating' );
setTimeout( () => {
dom.wrapper.classList.remove( 'overview-deactivating' );
}, 1 );
// Move the background element back out
dom.wrapper.appendChild( dom.background );
// Clean up changes made to slides
toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ).forEach( slide => {
transformElement( slide, '' );
slide.removeEventListener( 'click', onOverviewSlideClicked, true );
} );
// Clean up changes made to backgrounds
toArray( dom.background.querySelectorAll( '.slide-background' ) ).forEach( background => {
transformElement( background, '' );
} );
transformSlides( { overview: '' } );
slide( indexh, indexv );
layout();
cueAutoSlide();
// Notify observers of the overview hiding
dispatchEvent( 'overviewhidden', {
'indexh': indexh,
'indexv': indexv,
'currentSlide': currentSlide
} );
}
}
/**
* 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.
*/
function toggleOverview( override ) {
if( typeof override === 'boolean' ) {
override ? activateOverview() : deactivateOverview();
}
else {
isOverview() ? deactivateOverview() : activateOverview();
}
}
/**
* Checks if the overview is currently active.
*
* @return {Boolean} true if the overview is active,
* false otherwise
*/
function isOverview() {
return overview;
}
/**
* Return a hash URL that will resolve to the given slide location.
*
......@@ -1851,6 +1652,55 @@ export default function( revealElement, options ) {
}
/**
* Returns true if we're on the last slide in the current
* vertical stack.
*/
function isLastVerticalSlide() {
if( currentSlide && isVerticalSlide( currentSlide ) ) {
// Does this slide have a next sibling?
if( currentSlide.nextElementSibling ) return false;
return true;
}
return false;
}
/**
* Returns true if we're currently on the first slide in
* the presentation.
*/
function isFirstSlide() {
return indexh === 0 && indexv === 0;
}
/**
* Returns true if we're currently on the last slide in
* the presenation. If the last slide is a stack, we only
* consider this the last slide if it's at the end of the
* stack.
*/
function isLastSlide() {
if( currentSlide ) {
// Does this slide have a next sibling?
if( currentSlide.nextElementSibling ) return false;
// If it's vertical, does its parent have a next sibling?
if( isVerticalSlide( currentSlide ) && currentSlide.parentNode.nextElementSibling ) return false;
return true;
}
return false;
}
/**
* Shows the mouse pointer after it has been hidden with
* #hideCursor.
......@@ -1991,7 +1841,7 @@ export default function( revealElement, options ) {
// If no vertical index is specified and the upcoming slide is a
// stack, resume at its previous vertical index
if( v === undefined && !isOverview() ) {
if( v === undefined && !overview.isActive() ) {
v = getPreviousVerticalIndex( horizontalSlides[ h ] );
}
......@@ -2020,8 +1870,8 @@ export default function( revealElement, options ) {
layout();
// Update the overview if it's currently active
if( isOverview() ) {
updateOverview();
if( overview.isActive() ) {
overview.update();
}
// Find the current horizontal slide and any possible vertical slides
......@@ -2052,7 +1902,7 @@ export default function( revealElement, options ) {
previousSlide.setAttribute( 'aria-hidden', 'true' );
// Reset all slides upon navigate to home
if( Reveal.isFirstSlide() ) {
if( isFirstSlide() ) {
// Launch async task
setTimeout( () => {
getVerticalStacks().forEach( slide => {
......@@ -2118,7 +1968,7 @@ export default function( revealElement, options ) {
cueAutoSlide();
// Auto-animation
if( slideChanged && previousSlide && currentSlide && !isOverview() ) {
if( slideChanged && previousSlide && currentSlide && !overview.isActive() ) {
// Skip the slide transition between our two slides
// when auto-animating individual elements
......@@ -2185,8 +2035,8 @@ export default function( revealElement, options ) {
slideContent.startEmbeddedContent( currentSlide );
}
if( isOverview() ) {
layoutOverview();
if( overview.isActive() ) {
overview.layout();
}
}
......@@ -2388,12 +2238,12 @@ export default function( revealElement, options ) {
// The number of steps away from the present slide that will
// be visible
let viewDistance = isOverview() ? 10 : config.viewDistance;
let viewDistance = overview.isActive() ? 10 : config.viewDistance;
// Shorten the view distance on devices that typically have
// less resources
if( isMobile ) {