mirror of
https://github.com/hakimel/reveal.js.git
synced 2025-08-06 14:47:04 +02:00
fix issues with active slide logic in reader mode, foundational work for auto-animate support
This commit is contained in:
2
dist/reveal.esm.js
vendored
2
dist/reveal.esm.js
vendored
File diff suppressed because one or more lines are too long
2
dist/reveal.esm.js.map
vendored
2
dist/reveal.esm.js.map
vendored
File diff suppressed because one or more lines are too long
2
dist/reveal.js
vendored
2
dist/reveal.js
vendored
File diff suppressed because one or more lines are too long
2
dist/reveal.js.map
vendored
2
dist/reveal.js.map
vendored
File diff suppressed because one or more lines are too long
@@ -370,10 +370,6 @@ export default class Keyboard {
|
|||||||
this.Reveal.toggleJumpToSlide();
|
this.Reveal.toggleJumpToSlide();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// R
|
|
||||||
else if( keyCode === 82 ) {
|
|
||||||
this.Reveal.toggleReader();
|
|
||||||
}
|
|
||||||
else {
|
else {
|
||||||
triggered = false;
|
triggered = false;
|
||||||
}
|
}
|
||||||
|
@@ -16,6 +16,10 @@ export default class Reader {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Activates the reader mode. This rearranges the presentation DOM
|
||||||
|
* by—among other things—wrapping each slide in a page element.
|
||||||
|
*/
|
||||||
async activate() {
|
async activate() {
|
||||||
|
|
||||||
if( this.active ) return;
|
if( this.active ) return;
|
||||||
@@ -99,6 +103,10 @@ export default class Reader {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Deactivates the reader mode and restores the standard slide-based
|
||||||
|
* presentation.
|
||||||
|
*/
|
||||||
deactivate() {
|
deactivate() {
|
||||||
|
|
||||||
if( !this.active ) return;
|
if( !this.active ) return;
|
||||||
@@ -261,10 +269,16 @@ export default class Reader {
|
|||||||
|
|
||||||
const scrollTop = viewportElement.scrollTop;
|
const scrollTop = viewportElement.scrollTop;
|
||||||
|
|
||||||
|
// Find the page closest to the center of the viewport, this
|
||||||
|
// is the page we want to focus and activate
|
||||||
|
const activePage = this.pages.reduce( ( closestPage, page ) => {
|
||||||
|
const distance = Math.abs( ( page.top + page.pageHeight / 2 ) - scrollTop - viewportHeight / 2 );
|
||||||
|
return distance < closestPage.distance ? { page, distance } : closestPage;
|
||||||
|
}, { page: this.pages[0], distance: Infinity } ).page;
|
||||||
|
|
||||||
this.pages.forEach( ( page, pageIndex ) => {
|
this.pages.forEach( ( page, pageIndex ) => {
|
||||||
const isWithinPreloadRange = scrollTop + viewportHeight >= page.top - viewportHeight && scrollTop < page.top + page.bottom + viewportHeight;
|
const isWithinPreloadRange = scrollTop + viewportHeight >= page.top - viewportHeight && scrollTop < page.top + page.bottom + viewportHeight;
|
||||||
const isPartiallyVisible = scrollTop + viewportHeight >= page.top && scrollTop < page.top + page.bottom;
|
const isPartiallyVisible = scrollTop + viewportHeight >= page.top && scrollTop < page.top + page.bottom;
|
||||||
const isMostlyVisible = scrollTop + viewportHeight >= page.top + viewportHeight / 2 && scrollTop < page.top + page.bottom - viewportHeight / 2;
|
|
||||||
|
|
||||||
// Preload content when it appears within range
|
// Preload content when it appears within range
|
||||||
if( isWithinPreloadRange ) {
|
if( isWithinPreloadRange ) {
|
||||||
@@ -278,8 +292,9 @@ export default class Reader {
|
|||||||
this.Reveal.slideContent.unload( page.slideElement );
|
this.Reveal.slideContent.unload( page.slideElement );
|
||||||
}
|
}
|
||||||
|
|
||||||
// Play slide content when the slide becomes visible
|
// Activate the current page — there can only be one active page at
|
||||||
if( isMostlyVisible ) {
|
// a time.
|
||||||
|
if( page === activePage ) {
|
||||||
if( !page.active ) {
|
if( !page.active ) {
|
||||||
page.active = true;
|
page.active = true;
|
||||||
page.pageElement.classList.add( 'present' );
|
page.pageElement.classList.add( 'present' );
|
||||||
@@ -293,6 +308,7 @@ export default class Reader {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// Deactivate previously active pages
|
||||||
else if( page.active ) {
|
else if( page.active ) {
|
||||||
page.active = false;
|
page.active = false;
|
||||||
page.pageElement.classList.remove( 'present' );
|
page.pageElement.classList.remove( 'present' );
|
||||||
|
49
js/reveal.js
49
js/reveal.js
@@ -1385,6 +1385,9 @@ export default function( revealElement, options ) {
|
|||||||
|
|
||||||
// Detect if we're moving between two auto-animated slides
|
// Detect if we're moving between two auto-animated slides
|
||||||
if( slideChanged && previousSlide && currentSlide && !overview.isActive() ) {
|
if( slideChanged && previousSlide && currentSlide && !overview.isActive() ) {
|
||||||
|
transition = 'running';
|
||||||
|
|
||||||
|
autoAnimateTransition = shoulAutoAnimateBetween( previousSlide, currentSlide, indexhBefore, indexvBefore );
|
||||||
|
|
||||||
// If this is an auto-animated transition, we disable the
|
// If this is an auto-animated transition, we disable the
|
||||||
// regular slide transition
|
// regular slide transition
|
||||||
@@ -1392,16 +1395,9 @@ export default function( revealElement, options ) {
|
|||||||
// Note 20-03-2020:
|
// Note 20-03-2020:
|
||||||
// This needs to happen before we update slide visibility,
|
// This needs to happen before we update slide visibility,
|
||||||
// otherwise transitions will still run in Safari.
|
// otherwise transitions will still run in Safari.
|
||||||
if( previousSlide.hasAttribute( 'data-auto-animate' ) && currentSlide.hasAttribute( 'data-auto-animate' )
|
if( autoAnimateTransition ) {
|
||||||
&& previousSlide.getAttribute( 'data-auto-animate-id' ) === currentSlide.getAttribute( 'data-auto-animate-id' )
|
dom.slides.classList.add( 'disable-slide-transitions' )
|
||||||
&& !( ( indexh > indexhBefore || indexv > indexvBefore ) ? currentSlide : previousSlide ).hasAttribute( 'data-auto-animate-restart' ) ) {
|
|
||||||
|
|
||||||
autoAnimateTransition = true;
|
|
||||||
dom.slides.classList.add( 'disable-slide-transitions' );
|
|
||||||
}
|
}
|
||||||
|
|
||||||
transition = 'running';
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Update the visibility of slides now that the indices have changed
|
// Update the visibility of slides now that the indices have changed
|
||||||
@@ -1505,14 +1501,49 @@ export default function( revealElement, options ) {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Checks whether or not an auto-animation should take place between
|
||||||
|
* the two given slides.
|
||||||
|
*
|
||||||
|
* @param {HTMLElement} fromSlide
|
||||||
|
* @param {HTMLElement} toSlide
|
||||||
|
* @param {number} indexhBefore
|
||||||
|
* @param {number} indexvBefore
|
||||||
|
*
|
||||||
|
* @returns {boolean}
|
||||||
|
*/
|
||||||
|
function shoulAutoAnimateBetween( fromSlide, toSlide, indexhBefore, indexvBefore ) {
|
||||||
|
|
||||||
|
return fromSlide.hasAttribute( 'data-auto-animate' ) && toSlide.hasAttribute( 'data-auto-animate' ) &&
|
||||||
|
fromSlide.getAttribute( 'data-auto-animate-id' ) === toSlide.getAttribute( 'data-auto-animate-id' ) &&
|
||||||
|
!( ( indexh > indexhBefore || indexv > indexvBefore ) ? toSlide : fromSlide ).hasAttribute( 'data-auto-animate-restart' );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Called anytime current page in reader mode changes. The current
|
||||||
|
* page is the page that occupies the most space in the viewport.
|
||||||
|
*
|
||||||
|
* @param {number} pageIndex
|
||||||
|
* @param {HTMLElement} pageElement
|
||||||
|
*/
|
||||||
function setCurrentReaderPage( pageIndex, pageElement ) {
|
function setCurrentReaderPage( pageIndex, pageElement ) {
|
||||||
|
|
||||||
|
let indexhBefore = indexh || 0;
|
||||||
|
|
||||||
indexh = pageIndex;
|
indexh = pageIndex;
|
||||||
indexv = 0;
|
indexv = 0;
|
||||||
|
|
||||||
previousSlide = currentSlide;
|
previousSlide = currentSlide;
|
||||||
currentSlide = pageElement.querySelector( 'section' );
|
currentSlide = pageElement.querySelector( 'section' );
|
||||||
|
|
||||||
|
if( currentSlide && previousSlide ) {
|
||||||
|
if( config.autoAnimate && shoulAutoAnimateBetween( previousSlide, currentSlide, indexhBefore, indexv ) ) {
|
||||||
|
// Run the auto-animation between our slides
|
||||||
|
// autoAnimate.run( previousSlide, currentSlide );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
dispatchSlideChanged();
|
dispatchSlideChanged();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user