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

improved reader progress bar visuals in high density

Browse Source
This commit is contained in:
Hakim El Hattab
2023-10-20 21:02:04 +02:00
parent 51acc830f9
commit 49c0030392
5 changed files with 15 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/reveal.esm.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/reveal.esm.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/reveal.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/reveal.js.map vendored
View File

File diff suppressed because one or more lines are too long

19
js/controllers/reader.js
View File

@@ -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
@@ -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 {
@@ -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 ) {
@@ -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 );
@@ -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';