add support for automatically scrolling code highlights into view

This commit is contained in:
Hakim El Hattab
2020-03-12 17:08:20 +01:00
parent 5a5a5c9a6c
commit bff9bfb101
7 changed files with 254 additions and 50 deletions

View File

@ -67,7 +67,14 @@ export default class AutoAnimate {
}
} );
this.Reveal.dispatchEvent( 'autoanimate', { fromSlide: fromSlide, toSlide: toSlide, sheet: this.autoAnimateStyleSheet } );
this.Reveal.dispatchEvent({
type: 'autoanimate',
data: {
fromSlide,
toSlide,
sheet: this.autoAnimateStyleSheet
}
});
}

View File

@ -180,7 +180,7 @@ export default class Fragments {
// Visible fragments
if( i <= index ) {
if( !el.classList.contains( 'visible' ) ) changedFragments.shown.push( el );
let wasVisible = el.classList.contains( 'visible' )
el.classList.add( 'visible' );
el.classList.remove( 'current-fragment' );
@ -191,12 +191,30 @@ export default class Fragments {
el.classList.add( 'current-fragment' );
this.Reveal.slideContent.startEmbeddedContent( el );
}
if( !wasVisible ) {
changedFragments.shown.push( el )
this.Reveal.dispatchEvent({
target: el,
type: 'visible',
bubbles: false
});
}
}
// Hidden fragments
else {
if( el.classList.contains( 'visible' ) ) changedFragments.hidden.push( el );
let wasVisible = el.classList.contains( 'visible' )
el.classList.remove( 'visible' );
el.classList.remove( 'current-fragment' );
if( wasVisible ) {
changedFragments.hidden.push( el );
this.Reveal.dispatchEvent({
target: el,
type: 'hidden',
bubbles: false
});
}
}
} );
@ -253,11 +271,23 @@ export default class Fragments {
let changedFragments = this.update( index, fragments );
if( changedFragments.hidden.length ) {
this.Reveal.dispatchEvent( 'fragmenthidden', { fragment: changedFragments.hidden[0], fragments: changedFragments.hidden } );
this.Reveal.dispatchEvent({
type: 'fragmenthidden',
data: {
fragment: changedFragments.hidden[0],
fragments: changedFragments.hidden
}
});
}
if( changedFragments.shown.length ) {
this.Reveal.dispatchEvent( 'fragmentshown', { fragment: changedFragments.shown[0], fragments: changedFragments.shown } );
this.Reveal.dispatchEvent({
type: 'fragmentshown',
data: {
fragment: changedFragments.shown[0],
fragments: changedFragments.shown
}
});
}
this.Reveal.updateControls();

View File

@ -65,11 +65,14 @@ export default class Overview {
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()
} );
this.Reveal.dispatchEvent({
type: 'overviewshown',
data: {
'indexh': indices.h,
'indexv': indices.v,
'currentSlide': this.Reveal.getCurrentSlide()
}
});
}
@ -175,11 +178,14 @@ export default class Overview {
this.Reveal.cueAutoSlide();
// Notify observers of the overview hiding
this.Reveal.dispatchEvent( 'overviewhidden', {
'indexh': indices.h,
'indexv': indices.v,
'currentSlide': this.Reveal.getCurrentSlide()
} );
this.Reveal.dispatchEvent({
type: 'overviewhidden',
data: {
'indexh': indices.h,
'indexv': indices.v,
'currentSlide': this.Reveal.getCurrentSlide()
}
});
}
}

View File

@ -194,11 +194,14 @@ export default function( revealElement, options ) {
dom.wrapper.classList.add( 'ready' );
dispatchEvent( 'ready', {
'indexh': indexh,
'indexv': indexv,
'currentSlide': currentSlide
} );
dispatchEvent({
type: 'ready',
data: {
indexh,
indexv,
currentSlide
}
});
}, 1 );
// Special setup and config is required when printing to PDF
@ -511,7 +514,7 @@ export default function( revealElement, options ) {
} );
// Notify subscribers that the PDF layout is good to go
dispatchEvent( 'pdf-ready' );
dispatchEvent({ type: 'pdf-ready' });
}
@ -1058,16 +1061,18 @@ export default function( revealElement, options ) {
* Dispatches an event of the specified type from the
* reveal DOM element.
*/
function dispatchEvent( type, args ) {
function dispatchEvent({ target=dom.wrapper, type, data, bubbles=true }) {
let event = document.createEvent( 'HTMLEvents', 1, 2 );
event.initEvent( type, true, true );
extend( event, args );
dom.wrapper.dispatchEvent( event );
event.initEvent( type, bubbles, true );
extend( event, data );
target.dispatchEvent( event );
// If we're in an iframe, post each reveal.js event to the
// parent window. Used by the notes plugin
dispatchPostMessage( type );
if( target === dom.wrapper ) {
// If we're in an iframe, post each reveal.js event to the
// parent window. Used by the notes plugin
dispatchPostMessage( type );
}
}
@ -1347,11 +1352,14 @@ export default function( revealElement, options ) {
}
if( oldScale !== scale ) {
dispatchEvent( 'resize', {
'oldScale': oldScale,
'scale': scale,
'size': size
} );
dispatchEvent({
type: 'resize',
data: {
oldScale,
scale,
size
}
});
}
}
@ -1577,7 +1585,7 @@ export default function( revealElement, options ) {
dom.wrapper.classList.add( 'paused' );
if( wasPaused === false ) {
dispatchEvent( 'paused' );
dispatchEvent({ type: 'paused' });
}
}
@ -1594,7 +1602,7 @@ export default function( revealElement, options ) {
cueAutoSlide();
if( wasPaused ) {
dispatchEvent( 'resumed' );
dispatchEvent({ type: 'resumed' });
}
}
@ -1763,7 +1771,7 @@ export default function( revealElement, options ) {
document.documentElement.classList.add( state[i] );
// Dispatch custom event matching the state's name
dispatchEvent( state[i] );
dispatchEvent({ type: state[i] });
}
// Clean up the remains of the previous state
@ -1772,13 +1780,16 @@ export default function( revealElement, options ) {
}
if( slideChanged ) {
dispatchEvent( 'slidechanged', {
'indexh': indexh,
'indexv': indexv,
'previousSlide': previousSlide,
'currentSlide': currentSlide,
'origin': o
} );
dispatchEvent({
type: 'slidechanged',
data: {
indexh,
indexv,
previousSlide,
currentSlide,
origin: o
}
});
}
// Handle embedded content
@ -2035,14 +2046,26 @@ export default function( revealElement, options ) {
}
}
let slide = slides[index];
let wasPresent = slide.classList.contains( 'present' );
// Mark the current slide as present
slides[index].classList.add( 'present' );
slides[index].removeAttribute( 'hidden' );
slides[index].removeAttribute( 'aria-hidden' );
slide.classList.add( 'present' );
slide.removeAttribute( 'hidden' );
slide.removeAttribute( 'aria-hidden' );
if( !wasPresent ) {
// Dispatch an event indicating the slide is now visible
dispatchEvent({
target: slide,
type: 'visible',
bubbles: false
});
}
// If this slide has a state associated with it, add it
// onto the current state of the deck
let slideState = slides[index].getAttribute( 'data-state' );
let slideState = slide.getAttribute( 'data-state' );
if( slideState ) {
state = state.concat( slideState.split( ' ' ) );
}
@ -2947,7 +2970,7 @@ export default function( revealElement, options ) {
if( autoSlide && !autoSlidePaused ) {
autoSlidePaused = true;
dispatchEvent( 'autoslidepaused' );
dispatchEvent({ type: 'autoslidepaused' });
clearTimeout( autoSlideTimeout );
if( autoSlidePlayer ) {
@ -2961,7 +2984,7 @@ export default function( revealElement, options ) {
if( autoSlide && autoSlidePaused ) {
autoSlidePaused = false;
dispatchEvent( 'autoslideresumed' );
dispatchEvent({ type: 'autoslideresumed' });
cueAutoSlide();
}