1
0
mirror of https://github.com/hakimel/reveal.js.git synced 2025-08-12 01:25:17 +02:00

reader mode tweaks

This commit is contained in:
Hakim El Hattab
2023-10-12 13:39:44 +02:00
parent d802789c4d
commit 198cbc4ace
8 changed files with 35 additions and 13 deletions

View File

@@ -387,7 +387,7 @@ export default class Reader {
const scrollHeight = this.viewportElement.scrollHeight;
this.progressBarHeight = this.progressBarInner.offsetHeight;
this.playheadHeight = Math.max( viewportHeight / scrollHeight * this.progressBarHeight, MIN_PLAYHEAD_HEIGHT );
this.playheadHeight = Math.max( this.pages[0].pageHeight / scrollHeight * this.progressBarHeight, MIN_PLAYHEAD_HEIGHT );
this.progressBarScrollableHeight = this.progressBarHeight - this.playheadHeight;
this.progressBarPlayhead.style.height = this.playheadHeight - PROGRESS_SPACING + 'px';
@@ -410,7 +410,7 @@ export default class Reader {
const scrollPaddingProgressHeight = page.scrollPadding / scrollHeight * this.progressBarHeight;
// Create visual representations for each scroll trigger
page.scrollTriggers.slice(1).forEach( trigger => {
page.scrollTriggerElements = page.scrollTriggers.map( ( trigger, i ) => {
const triggerElement = document.createElement( 'div' );
triggerElement.className = 'reader-progress-trigger';
@@ -418,6 +418,10 @@ export default class Reader {
triggerElement.style.height = ( trigger.range[1] - trigger.range[0] ) * scrollPaddingProgressHeight - PROGRESS_SPACING + 'px';
page.progressBarSlide.appendChild( triggerElement );
if( i === 0 ) triggerElement.style.display = 'none';
return triggerElement;
} );
} );
@@ -446,6 +450,10 @@ export default class Reader {
.filter( page => page.progressBarSlide )
.forEach( ( page ) => {
page.progressBarSlide.classList.toggle( 'active', !!page.active );
page.scrollTriggers.forEach( ( trigger, i ) => {
page.scrollTriggerElements[i].classList.toggle( 'active', page.active && trigger.active );
} );
} );
this.showProgressBar();

View File

@@ -915,6 +915,9 @@ export default function( revealElement, options ) {
if( dom.wrapper && !print.isActive() ) {
const viewportWidth = dom.viewport.offsetWidth;
const viewportHeight = dom.viewport.offsetHeight;
if( !config.disableLayout ) {
// On some mobile devices '100vh' is taller than the visible
@@ -928,7 +931,7 @@ export default function( revealElement, options ) {
}
const size = reader.isActive() ?
getComputedSlideSize( dom.viewport.offsetWidth, dom.viewport.offsetHeight ) :
getComputedSlideSize( viewportWidth, viewportHeight ) :
getComputedSlideSize();
const oldScale = scale;
@@ -1017,6 +1020,8 @@ export default function( revealElement, options ) {
}
dom.viewport.style.setProperty( '--slide-scale', scale );
dom.viewport.style.setProperty( '--viewport-width', viewportWidth + 'px' );
dom.viewport.style.setProperty( '--viewport-height', viewportHeight + 'px' );
reader.layout();