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

more accurate scroll trigger positioning in progress bar

Browse Source
This commit is contained in:
Hakim El Hattab
2023-10-12 11:09:47 +02:00
parent c1b1745200
commit d802789c4d
7 changed files with 39 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
css/reveal.scss
View File

@@ -33,7 +33,6 @@ html.reveal-full-page {
background-color: #fff;
color: #000;
--r-reader-progress-width: 8px;
--r-controls-spacing: 12px;
}
@@ -1879,7 +1878,15 @@ $notesWidthPercent: 25%;
& {
margin: 0 auto !important;
overflow: auto;
overflow-x: hidden;
overflow-y: auto;
z-index: 1;
--r-reader-progress-width: 8px;
}
@media screen and (max-width: 500px) {
--r-reader-progress-width: 3px;
}
.reveal .controls,
@@ -2039,8 +2046,7 @@ $notesWidthPercent: 25%;
.reader-progress-inner {
position: absolute;
width: var(--r-reader-progress-width);
height: calc(100vh - var(--r-controls-spacing) * 2);
height: calc(100svh - var(--r-controls-spacing) * 2);
height: calc(var(--page-height) - var(--r-controls-spacing) * 2);
right: var(--r-controls-spacing);
top: 0;
transform: translateY(-50%);
@@ -2069,7 +2075,7 @@ $notesWidthPercent: 25%;
border-radius: var(--r-reader-progress-width);
background-color: rgba(var(--r-overlay-element-bg-color), 1);
z-index: 10;
transition: background-color 0.2s ease;
transition: background-color 0.2s ease, height 0.4s ease;
}
.reader-progress-slide {
@@ -2099,12 +2105,12 @@ $notesWidthPercent: 25%;
.reader-progress-slide.active .reader-progress-trigger:after {
content: '';
position: absolute;
width: 4px;
height: 4px;
width: calc(var(--r-reader-progress-width) / 2);
height: calc(var(--r-reader-progress-width) / 2);
border-radius: 6px;
top: 50%;
bottom: 0;
left: 50%;
transform: translate(-50%, -50%);
transform: translate(-50%, 0);
background-color: rgba(var(--r-overlay-element-fg-color), 0.8);
}
}

2
dist/reveal.css vendored
View File

File diff suppressed because one or more lines are too long

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

31
js/controllers/reader.js
View File

@@ -270,7 +270,7 @@ export default class Reader {
const pageHeight = readerLayout === 'full' ? viewportHeight : compactHeight;
// The height that needs to be scrolled between scroll triggers
const scrollTriggerHeight = viewportHeight;
const scrollTriggerHeight = viewportHeight / 2;
this.viewportElement.style.setProperty( '--page-height', pageHeight + 'px' );
this.viewportElement.style.scrollSnapType = typeof config.readerScrollSnap === 'string' ?
@@ -286,6 +286,7 @@ export default class Reader {
backgroundElement: pageElement.querySelector( '.slide-background' ),
top: pageElement.offsetTop,
scrollTriggers: [],
scrollTriggerHeight
};
page.indexh = parseInt( page.slideElement.getAttribute( 'data-index-h' ), 10 );
@@ -302,21 +303,26 @@ export default class Reader {
// Create scroll triggers that show/hide fragments
if( page.fragmentGroups.length ) {
const segmentSize = 1 / ( page.fragmentGroups.length + 1 );
const segmentSize = 1 / page.fragmentGroups.length;
let segmentY = segmentSize / 4;
page.scrollTriggers.push(
// Trigger for the initial state with no fragments visible
{ range: [ 0, segmentSize ], fragmentIndex: -1 },
{ range: [ 0, segmentY ], fragmentIndex: -1 },
// Triggers for each fragment group
...page.fragmentGroups.map( ( fragments, i ) => ({
range: [ segmentSize * ( i + 1 ), segmentSize * ( i + 2 ) ],
fragmentIndex: i
}))
...page.fragmentGroups.map( ( fragments, i ) => {
segmentY += segmentSize;
return {
range: [ segmentY - segmentSize, segmentY ],
fragmentIndex: i
};
}
)
);
}
// Add scroll padding based on how many scroll triggers we have
page.scrollPadding = scrollTriggerHeight * page.scrollTriggers.length;
page.scrollPadding = scrollTriggerHeight * Math.max( page.scrollTriggers.length - 1, 0 );
// In the compact layout, only slides with scroll triggers cover the
// full viewport height. This helps avoid empty gaps before or after
@@ -400,13 +406,16 @@ export default class Reader {
page.progressBarSlide.style.height = page.totalHeight / scrollHeight * this.progressBarHeight - PROGRESS_SPACING + 'px';
this.progressBarInner.appendChild( page.progressBarSlide );
const scrollTriggerTopOffset = page.scrollTriggerHeight / scrollHeight * this.progressBarHeight;
const scrollPaddingProgressHeight = page.scrollPadding / scrollHeight * this.progressBarHeight;
// Create visual representations for each scroll trigger
page.scrollTriggers.forEach( trigger => {
page.scrollTriggers.slice(1).forEach( trigger => {
const triggerElement = document.createElement( 'div' );
triggerElement.className = 'reader-progress-trigger';
triggerElement.style.top = trigger.range[0] * page.totalHeight / scrollHeight * this.progressBarHeight + 'px';
triggerElement.style.height = ( trigger.range[1] - trigger.range[0] ) * page.totalHeight / scrollHeight * this.progressBarHeight - PROGRESS_SPACING + 'px';
triggerElement.style.top = scrollTriggerTopOffset + trigger.range[0] * scrollPaddingProgressHeight + 'px';
triggerElement.style.height = ( trigger.range[1] - trigger.range[0] ) * scrollPaddingProgressHeight - PROGRESS_SPACING + 'px';
page.progressBarSlide.appendChild( triggerElement );
} );