Skip to content
GitLab
Commit cd78bbd4 authored by Hakim El Hattab's avatar Hakim El Hattab
Browse files

move overview to new module

parent 75ef44ca
Expand all Hide whitespace changes
Inline Side-by-side
dist/reveal.min.js
View file @ cd78bbd4
This diff is collapsed.
js/controllers/fragments.js
View file @ cd78bbd4
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 {
......
js/controllers/overview.js 0 → 100644
View file @ cd78bbd4
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
js/reveal.js
View file @ cd78bbd4
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 ) {