mirror/reveal.js
1
0
Fork 0
mirror of https://github.com/hakimel/reveal.js.git synced 2025-08-18 04:21:26 +02:00
Code Issues Releases Wiki Activity

reader mode; deeplink support, presentation scaling, scroll trigger fixes

Browse Source
This commit is contained in:
Hakim El Hattab
2023-09-14 15:03:23 +02:00
parent 0f27ef40fb
commit eaf5f61318
4 changed files with 66 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
js/controllers/fragments.js
View File

@@ -174,24 +174,23 @@ export default class Fragments {
*
* @return {{shown: array, hidden: array}}
*/
update( index, fragments ) {
update( index, fragments, slide = this.Reveal.getCurrentSlide() ) {
let changedFragments = {
shown: [],
hidden: []
};
let currentSlide = this.Reveal.getCurrentSlide();
if( currentSlide && this.Reveal.getConfig().fragments ) {
if( slide && this.Reveal.getConfig().fragments ) {
fragments = fragments || this.sort( currentSlide.querySelectorAll( '.fragment' ) );
fragments = fragments || this.sort( slide.querySelectorAll( '.fragment' ) );
if( fragments.length ) {
let maxIndex = 0;
if( typeof index !== 'number' ) {
let currentFragment = this.sort( currentSlide.querySelectorAll( '.fragment.visible' ) ).pop();
let currentFragment = this.sort( slide.querySelectorAll( '.fragment.visible' ) ).pop();
if( currentFragment ) {
index = parseInt( currentFragment.getAttribute( 'data-fragment-index' ) || 0, 10 );
}
@@ -252,7 +251,7 @@ export default class Fragments {
// the current fragment index.
index = typeof index === 'number' ? index : -1;
index = Math.max( Math.min( index, maxIndex ), -1 );
currentSlide.setAttribute( 'data-fragment', index );
slide.setAttribute( 'data-fragment', index );
}

39
js/controllers/reader.js
View File

@@ -11,6 +11,9 @@ export default class Reader {
this.Reveal = Reveal;
this.activated = false;
this.activatedCallbacks = [];
}
async activate() {
@@ -90,6 +93,10 @@ export default class Reader {
this.Reveal.layout();
this.activated = true;
this.activatedCallbacks.forEach( callback => callback() );
this.activatedCallbacks = [];
}
/**
@@ -107,6 +114,9 @@ export default class Reader {
generatePageMap() {
const viewportElement = this.Reveal.getViewportElement();
const viewportHeight = viewportElement.offsetHeight;
const slideSize = this.Reveal.getComputedSlideSize( window.innerWidth, window.innerHeight );
const scale = this.Reveal.getScale();
@@ -116,6 +126,9 @@ export default class Reader {
this.pageElements = Array.from( this.Reveal.getRevealElement().querySelectorAll( '.reader-page' ) );
this.pageMap = this.pageElements.map( pageElement => {
// pageElement.style.width = ( viewportElement.offsetWidth / scale ) + 'px';
// pageElement.style.height = ( viewportElement.offsetHeight / scale ) + 'px';
const page = {
pageElement: pageElement,
slideElement: pageElement.querySelector( 'section' ),
@@ -140,7 +153,7 @@ export default class Reader {
page.bottom = page.top + page.totalHeight;
// Pad the page height to reserve scrollable height
page.pageElement.style.marginBottom = page.scrollHeight + 'px';
page.pageElement.style.marginBottom = page.scrollHeight / scale + 'px';
// Create scroll triggers that show/hide fragments
if( page.fragmentGroups.length ) {
@@ -155,6 +168,9 @@ export default class Reader {
fragmentIndex: i
}))
);
// Make this page freeze at the vertical center of the viewport
page.top -= ( viewportHeight - page.pageHeight ) / 2;
}
return page;
@@ -162,13 +178,24 @@ export default class Reader {
}
update() {
layout() {
this.generatePageMap();
this.onScroll();
}
scrollToSlide( slideElement ) {
if( !this.activated ) {
this.activatedCallbacks.push( () => this.scrollToSlide( slideElement ) );
}
else {
slideElement.parentNode.scrollIntoView();
}
}
onScroll() {
const viewportElement = this.Reveal.getViewportElement();
@@ -196,7 +223,13 @@ export default class Reader {
page.scrollTriggers.forEach( trigger => {
if( scrollProgress >= trigger.range[0] && scrollProgress < trigger.range[1] ) {
this.Reveal.fragments.update( trigger.fragmentIndex, page.fragments );
if( !trigger.active ) {
trigger.active = true;
this.Reveal.fragments.update( trigger.fragmentIndex, page.fragments, page.slideElement );
}
}
else {
trigger.active = false;
}
} );
}