Skip to content

Commit

Permalink
improved reader progress bar visuals in high density
Browse files Browse the repository at this point in the history
  • Loading branch information
hakimel committed Oct 20, 2023
1 parent 51acc83 commit 49c0030
Show file tree
Hide file tree
Showing 5 changed files with 15 additions and 12 deletions.
2 changes: 1 addition & 1 deletion dist/reveal.esm.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/reveal.esm.js.map

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/reveal.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/reveal.js.map

Large diffs are not rendered by default.

19 changes: 11 additions & 8 deletions js/controllers/reader.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import { HORIZONTAL_SLIDES_SELECTOR } from '../utils/constants.js'
import { queryAll } from '../utils/util.js'

const HIDE_SCROLLBAR_TIMEOUT = 500;
const PROGRESS_SPACING = 4;
const MAX_PROGRESS_SPACING = 4;
const MIN_PROGRESS_SEGMENT_HEIGHT = 6;
const MIN_PLAYHEAD_HEIGHT = 18;
const MIN_PLAYHEAD_HEIGHT = 8;

/**
* The reader mode lets you read a reveal.js presentation
Expand Down Expand Up @@ -67,6 +67,7 @@ export default class Reader {
if( previousSlide && this.Reveal.shouldAutoAnimateBetween( previousSlide, slide ) ) {
contentContainer = document.createElement( 'div' );
contentContainer.className = 'reader-page-content reader-auto-animate-page';
contentContainer.style.display = 'none';
previousSlide.closest( '.reader-page-content' ).parentNode.appendChild( contentContainer );
}
else {
Expand Down Expand Up @@ -533,16 +534,18 @@ export default class Reader {

this.progressBarInner.querySelectorAll( '.reader-progress-slide' ).forEach( slide => slide.remove() );

const viewportHeight = this.viewportElement.offsetHeight;
const scrollHeight = this.viewportElement.scrollHeight;
const viewportHeight = this.viewportElement.offsetHeight;
const viewportHeightFactor = viewportHeight / scrollHeight;

this.progressBarHeight = this.progressBarInner.offsetHeight;
this.playheadHeight = Math.max( 1 / this.totalScrollTriggerCount * this.progressBarHeight, MIN_PLAYHEAD_HEIGHT );
this.playheadHeight = Math.max( viewportHeightFactor * this.progressBarHeight, MIN_PLAYHEAD_HEIGHT );
this.progressBarScrollableHeight = this.progressBarHeight - this.playheadHeight;

this.progressBarPlayhead.style.height = this.playheadHeight - PROGRESS_SPACING + 'px';

const progressSegmentHeight = viewportHeight / scrollHeight * this.progressBarHeight;
const spacing = Math.min( progressSegmentHeight / 8, MAX_PROGRESS_SPACING );

this.progressBarPlayhead.style.height = this.playheadHeight - spacing + 'px';

// Don't show individual segments if they're too small
if( progressSegmentHeight > MIN_PROGRESS_SEGMENT_HEIGHT ) {
Expand All @@ -555,7 +558,7 @@ export default class Reader {
page.progressBarSlide = document.createElement( 'div' );
page.progressBarSlide.className = 'reader-progress-slide';
page.progressBarSlide.style.top = trigger.range[0] * this.progressBarHeight + 'px';
page.progressBarSlide.style.height = ( trigger.range[1] - trigger.range[0] ) * this.progressBarHeight - PROGRESS_SPACING + 'px';
page.progressBarSlide.style.height = ( trigger.range[1] - trigger.range[0] ) * this.progressBarHeight - spacing + 'px';
page.progressBarSlide.classList.toggle( 'has-triggers', page.scrollTriggers.length > 0 );
this.progressBarInner.appendChild( page.progressBarSlide );

Expand All @@ -567,7 +570,7 @@ export default class Reader {
const triggerElement = document.createElement( 'div' );
triggerElement.className = 'reader-progress-trigger';
triggerElement.style.top = trigger.range[0] * scrollBarSlideHeight + 'px';
triggerElement.style.height = ( trigger.range[1] - trigger.range[0] ) * scrollBarSlideHeight - PROGRESS_SPACING + 'px';
triggerElement.style.height = ( trigger.range[1] - trigger.range[0] ) * scrollBarSlideHeight - spacing + 'px';
page.progressBarSlide.appendChild( triggerElement );

if( i === 0 ) triggerElement.style.display = 'none';
Expand Down

0 comments on commit 49c0030

Please sign in to comment.