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:
@@ -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();
|
||||
|
@@ -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();
|
||||
|
||||
|
Reference in New Issue
Block a user