mirror/reveal.js
1
0
Fork 0
mirror of https://github.com/hakimel/reveal.js.git synced 2025-08-12 17:44:53 +02:00
Code Issues Releases Wiki Activity

reader mode refactoring

Browse Source
This commit is contained in:
Hakim El Hattab
2023-10-23 11:24:41 +02:00
parent 49c0030392
commit ff3244af7a
7 changed files with 20 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
css/reveal.scss
View File

@@ -2081,7 +2081,7 @@ $notesWidthPercent: 25%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(var(--r-overlay-element-bg-color), 0.8);
background-color: rgba(var(--r-overlay-element-bg-color), 1);
transition: transform 0.2s ease, opacity 0.2s ease;
opacity: 0.4;
}

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

@@ -381,7 +381,7 @@ export default class Reader {
return {
range: `${t.range[0].toFixed(2)}-${t.range[1].toFixed(2)}`,
triggers: t.page.scrollTriggers.map( t => {
return `${t.globalRange[0].toFixed(2)}-${t.globalRange[1].toFixed(2)}`
return `${t.range[0].toFixed(2)}-${t.range[1].toFixed(2)}`
}).join( ', ' ),
}
}))
@@ -422,17 +422,16 @@ export default class Reader {
rangeStart + Math.max( trigger.page.scrollTriggers.length, 1 ) / this.totalScrollTriggerCount
];
const slideRange = trigger.range[1] - trigger.range[0];
const slideRangeSegmentSize = 1 / trigger.page.scrollTriggers.length;
const scrollTriggerSegmentSize = ( trigger.range[1] - trigger.range[0] ) / trigger.page.scrollTriggers.length;
// Set the range for each inner scroll trigger
trigger.page.scrollTriggers.forEach( ( scrollTrigger, i ) => {
scrollTrigger.range = [i * slideRangeSegmentSize, ( i + 1 ) * slideRangeSegmentSize];
scrollTrigger.globalRange = [
rangeStart + scrollTrigger.range[0] * slideRange,
rangeStart + scrollTrigger.range[1] * slideRange
scrollTrigger.range = [
rangeStart + i * scrollTriggerSegmentSize,
rangeStart + ( i + 1 ) * scrollTriggerSegmentSize
];
} );
rangeStart = trigger.range[1];
} );
@@ -550,27 +549,25 @@ export default class Reader {
// Don't show individual segments if they're too small
if( progressSegmentHeight > MIN_PROGRESS_SEGMENT_HEIGHT ) {
this.slideTriggers.forEach( trigger => {
this.slideTriggers.forEach( slideTrigger => {
const { page } = trigger;
const { page } = slideTrigger;
// Visual representation of a slide
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 - spacing + 'px';
page.progressBarSlide.style.top = slideTrigger.range[0] * this.progressBarHeight + 'px';
page.progressBarSlide.style.height = ( slideTrigger.range[1] - slideTrigger.range[0] ) * this.progressBarHeight - spacing + 'px';
page.progressBarSlide.classList.toggle( 'has-triggers', page.scrollTriggers.length > 0 );
this.progressBarInner.appendChild( page.progressBarSlide );
const scrollBarSlideHeight = ( trigger.range[1] - trigger.range[0] ) * this.progressBarHeight;
// Visual representations of each scroll trigger
trigger.page.scrollTriggerElements = page.scrollTriggers.map( ( trigger, i ) => {
page.scrollTriggerElements = page.scrollTriggers.map( ( trigger, i ) => {
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 - spacing + 'px';
triggerElement.style.top = ( trigger.range[0] - slideTrigger.range[0] ) * this.progressBarHeight + 'px';
triggerElement.style.height = ( trigger.range[1] - trigger.range[0] ) * this.progressBarHeight - spacing + 'px';
page.progressBarSlide.appendChild( triggerElement );
if( i === 0 ) triggerElement.style.display = 'none';
@@ -819,7 +816,7 @@ export default class Reader {
// need to be activated/deactivated
if( activePage ) {
activePage.scrollTriggers.forEach( ( trigger ) => {
if( scrollProgressMid >= trigger.globalRange[0] && scrollProgressMid <= trigger.globalRange[1] ) {
if( scrollProgressMid >= trigger.range[0] && scrollProgressMid <= trigger.range[1] ) {
this.activateTrigger( trigger );
}
else if( trigger.active ) {