266 lines
9.0 KiB
JavaScript
266 lines
9.0 KiB
JavaScript
|
import { queryAll } from '../utils/util.js'
|
||
|
|
import { isAndroid } from '../utils/device.js'
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Manages our presentation controls. This includes both
|
||
|
|
* the built-in control arrows as well as event monitoring
|
||
|
|
* of any elements within the presentation with either of the
|
||
|
|
* following helper classes:
|
||
|
|
* - .navigate-up
|
||
|
|
* - .navigate-right
|
||
|
|
* - .navigate-down
|
||
|
|
* - .navigate-left
|
||
|
|
* - .navigate-next
|
||
|
|
* - .navigate-prev
|
||
|
|
*/
|
||
|
|
export default class Controls {
|
||
|
|
|
||
|
|
constructor( Reveal ) {
|
||
|
|
|
||
|
|
this.Reveal = Reveal;
|
||
|
|
|
||
|
|
this.onNavigateLeftClicked = this.onNavigateLeftClicked.bind( this );
|
||
|
|
this.onNavigateRightClicked = this.onNavigateRightClicked.bind( this );
|
||
|
|
this.onNavigateUpClicked = this.onNavigateUpClicked.bind( this );
|
||
|
|
this.onNavigateDownClicked = this.onNavigateDownClicked.bind( this );
|
||
|
|
this.onNavigatePrevClicked = this.onNavigatePrevClicked.bind( this );
|
||
|
|
this.onNavigateNextClicked = this.onNavigateNextClicked.bind( this );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
|
||
|
|
const rtl = this.Reveal.getConfig().rtl;
|
||
|
|
const revealElement = this.Reveal.getRevealElement();
|
||
|
|
|
||
|
|
this.element = document.createElement( 'aside' );
|
||
|
|
this.element.className = 'controls';
|
||
|
|
this.element.innerHTML =
|
||
|
|
`<button class="navigate-left" aria-label="${ rtl ? 'next slide' : 'previous slide' }"><div class="controls-arrow"></div></button>
|
||
|
|
<button class="navigate-right" aria-label="${ rtl ? 'previous slide' : 'next slide' }"><div class="controls-arrow"></div></button>
|
||
|
|
<button class="navigate-up" aria-label="above slide"><div class="controls-arrow"></div></button>
|
||
|
|
<button class="navigate-down" aria-label="below slide"><div class="controls-arrow"></div></button>`;
|
||
|
|
|
||
|
|
this.Reveal.getRevealElement().appendChild( this.element );
|
||
|
|
|
||
|
|
// There can be multiple instances of controls throughout the page
|
||
|
|
this.controlsLeft = queryAll( revealElement, '.navigate-left' );
|
||
|
|
this.controlsRight = queryAll( revealElement, '.navigate-right' );
|
||
|
|
this.controlsUp = queryAll( revealElement, '.navigate-up' );
|
||
|
|
this.controlsDown = queryAll( revealElement, '.navigate-down' );
|
||
|
|
this.controlsPrev = queryAll( revealElement, '.navigate-prev' );
|
||
|
|
this.controlsNext = queryAll( revealElement, '.navigate-next' );
|
||
|
|
|
||
|
|
// The left, right and down arrows in the standard reveal.js controls
|
||
|
|
this.controlsRightArrow = this.element.querySelector( '.navigate-right' );
|
||
|
|
this.controlsLeftArrow = this.element.querySelector( '.navigate-left' );
|
||
|
|
this.controlsDownArrow = this.element.querySelector( '.navigate-down' );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Called when the reveal.js config is updated.
|
||
|
|
*/
|
||
|
|
configure( config, oldConfig ) {
|
||
|
|
|
||
|
|
this.element.style.display = config.controls ? 'block' : 'none';
|
||
|
|
|
||
|
|
this.element.setAttribute( 'data-controls-layout', config.controlsLayout );
|
||
|
|
this.element.setAttribute( 'data-controls-back-arrows', config.controlsBackArrows );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
bind() {
|
||
|
|
|
||
|
|
// Listen to both touch and click events, in case the device
|
||
|
|
// supports both
|
||
|
|
let pointerEvents = [ 'touchstart', 'click' ];
|
||
|
|
|
||
|
|
// Only support touch for Android, fixes double navigations in
|
||
|
|
// stock browser
|
||
|
|
if( isAndroid ) {
|
||
|
|
pointerEvents = [ 'touchstart' ];
|
||
|
|
}
|
||
|
|
|
||
|
|
pointerEvents.forEach( eventName => {
|
||
|
|
this.controlsLeft.forEach( el => el.addEventListener( eventName, this.onNavigateLeftClicked, false ) );
|
||
|
|
this.controlsRight.forEach( el => el.addEventListener( eventName, this.onNavigateRightClicked, false ) );
|
||
|
|
this.controlsUp.forEach( el => el.addEventListener( eventName, this.onNavigateUpClicked, false ) );
|
||
|
|
this.controlsDown.forEach( el => el.addEventListener( eventName, this.onNavigateDownClicked, false ) );
|
||
|
|
this.controlsPrev.forEach( el => el.addEventListener( eventName, this.onNavigatePrevClicked, false ) );
|
||
|
|
this.controlsNext.forEach( el => el.addEventListener( eventName, this.onNavigateNextClicked, false ) );
|
||
|
|
} );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
unbind() {
|
||
|
|
|
||
|
|
[ 'touchstart', 'click' ].forEach( eventName => {
|
||
|
|
this.controlsLeft.forEach( el => el.removeEventListener( eventName, this.onNavigateLeftClicked, false ) );
|
||
|
|
this.controlsRight.forEach( el => el.removeEventListener( eventName, this.onNavigateRightClicked, false ) );
|
||
|
|
this.controlsUp.forEach( el => el.removeEventListener( eventName, this.onNavigateUpClicked, false ) );
|
||
|
|
this.controlsDown.forEach( el => el.removeEventListener( eventName, this.onNavigateDownClicked, false ) );
|
||
|
|
this.controlsPrev.forEach( el => el.removeEventListener( eventName, this.onNavigatePrevClicked, false ) );
|
||
|
|
this.controlsNext.forEach( el => el.removeEventListener( eventName, this.onNavigateNextClicked, false ) );
|
||
|
|
} );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Updates the state of all control/navigation arrows.
|
||
|
|
*/
|
||
|
|
update() {
|
||
|
|
|
||
|
|
let routes = this.Reveal.availableRoutes();
|
||
|
|
|
||
|
|
// Remove the 'enabled' class from all directions
|
||
|
|
[...this.controlsLeft, ...this.controlsRight, ...this.controlsUp, ...this.controlsDown, ...this.controlsPrev, ...this.controlsNext].forEach( node => {
|
||
|
|
node.classList.remove( 'enabled', 'fragmented' );
|
||
|
|
|
||
|
|
// Set 'disabled' attribute on all directions
|
||
|
|
node.setAttribute( 'disabled', 'disabled' );
|
||
|
|
} );
|
||
|
|
|
||
|
|
// Add the 'enabled' class to the available routes; remove 'disabled' attribute to enable buttons
|
||
|
|
if( routes.left ) this.controlsLeft.forEach( el => { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } );
|
||
|
|
if( routes.right ) this.controlsRight.forEach( el => { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } );
|
||
|
|
if( routes.up ) this.controlsUp.forEach( el => { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } );
|
||
|
|
if( routes.down ) this.controlsDown.forEach( el => { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } );
|
||
|
|
|
||
|
|
// Prev/next buttons
|
||
|
|
if( routes.left || routes.up ) this.controlsPrev.forEach( el => { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } );
|
||
|
|
if( routes.right || routes.down ) this.controlsNext.forEach( el => { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } );
|
||
|
|
|
||
|
|
// Highlight fragment directions
|
||
|
|
let currentSlide = this.Reveal.getCurrentSlide();
|
||
|
|
if( currentSlide ) {
|
||
|
|
|
||
|
|
let fragmentsRoutes = this.Reveal.fragments.availableRoutes();
|
||
|
|
|
||
|
|
// Always apply fragment decorator to prev/next buttons
|
||
|
|
if( fragmentsRoutes.prev ) this.controlsPrev.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );
|
||
|
|
if( fragmentsRoutes.next ) this.controlsNext.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );
|
||
|
|
|
||
|
|
// Apply fragment decorators to directional buttons based on
|
||
|
|
// what slide axis they are in
|
||
|
|
if( this.Reveal.isVerticalSlide( currentSlide ) ) {
|
||
|
|
if( fragmentsRoutes.prev ) this.controlsUp.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );
|
||
|
|
if( fragmentsRoutes.next ) this.controlsDown.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if( fragmentsRoutes.prev ) this.controlsLeft.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );
|
||
|
|
if( fragmentsRoutes.next ) this.controlsRight.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
if( this.Reveal.getConfig().controlsTutorial ) {
|
||
|
|
|
||
|
|
let indices = this.Reveal.getIndices();
|
||
|
|
|
||
|
|
// Highlight control arrows with an animation to ensure
|
||
|
|
// that the viewer knows how to navigate
|
||
|
|
if( !this.Reveal.hasNavigatedVertically() && routes.down ) {
|
||
|
|
this.controlsDownArrow.classList.add( 'highlight' );
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.controlsDownArrow.classList.remove( 'highlight' );
|
||
|
|
|
||
|
|
if( this.Reveal.getConfig().rtl ) {
|
||
|
|
|
||
|
|
if( !this.Reveal.hasNavigatedHorizontally() && routes.left && indices.v === 0 ) {
|
||
|
|
this.controlsLeftArrow.classList.add( 'highlight' );
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.controlsLeftArrow.classList.remove( 'highlight' );
|
||
|
|
}
|
||
|
|
|
||
|
|
} else {
|
||
|
|
|
||
|
|
if( !this.Reveal.hasNavigatedHorizontally() && routes.right && indices.v === 0 ) {
|
||
|
|
this.controlsRightArrow.classList.add( 'highlight' );
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.controlsRightArrow.classList.remove( 'highlight' );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
destroy() {
|
||
|
|
|
||
|
|
this.unbind();
|
||
|
|
this.element.remove();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Event handlers for navigation control buttons.
|
||
|
|
*/
|
||
|
|
onNavigateLeftClicked( event ) {
|
||
|
|
|
||
|
|
event.preventDefault();
|
||
|
|
this.Reveal.onUserInput();
|
||
|
|
|
||
|
|
if( this.Reveal.getConfig().navigationMode === 'linear' ) {
|
||
|
|
this.Reveal.prev();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.Reveal.left();
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
onNavigateRightClicked( event ) {
|
||
|
|
|
||
|
|
event.preventDefault();
|
||
|
|
this.Reveal.onUserInput();
|
||
|
|
|
||
|
|
if( this.Reveal.getConfig().navigationMode === 'linear' ) {
|
||
|
|
this.Reveal.next();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.Reveal.right();
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
onNavigateUpClicked( event ) {
|
||
|
|
|
||
|
|
event.preventDefault();
|
||
|
|
this.Reveal.onUserInput();
|
||
|
|
|
||
|
|
this.Reveal.up();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
onNavigateDownClicked( event ) {
|
||
|
|
|
||
|
|
event.preventDefault();
|
||
|
|
this.Reveal.onUserInput();
|
||
|
|
|
||
|
|
this.Reveal.down();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
onNavigatePrevClicked( event ) {
|
||
|
|
|
||
|
|
event.preventDefault();
|
||
|
|
this.Reveal.onUserInput();
|
||
|
|
|
||
|
|
this.Reveal.prev();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
onNavigateNextClicked( event ) {
|
||
|
|
|
||
|
|
event.preventDefault();
|
||
|
|
this.Reveal.onUserInput();
|
||
|
|
|
||
|
|
this.Reveal.next();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|