mirror/reveal.js
1
0
Fork 0
mirror of https://github.com/hakimel/reveal.js.git synced 2025-08-13 01:54:21 +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%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -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; transition: transform 0.2s ease, opacity 0.2s ease;
opacity: 0.4; 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 { return {
range: `${t.range[0].toFixed(2)}-${t.range[1].toFixed(2)}`, range: `${t.range[0].toFixed(2)}-${t.range[1].toFixed(2)}`,
triggers: t.page.scrollTriggers.map( t => { 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( ', ' ), }).join( ', ' ),
} }
})) }))
@@ -422,17 +422,16 @@ export default class Reader {
rangeStart + Math.max( trigger.page.scrollTriggers.length, 1 ) / this.totalScrollTriggerCount rangeStart + Math.max( trigger.page.scrollTriggers.length, 1 ) / this.totalScrollTriggerCount
]; ];
const slideRange = trigger.range[1] - trigger.range[0]; const scrollTriggerSegmentSize = ( trigger.range[1] - trigger.range[0] ) / trigger.page.scrollTriggers.length;
const slideRangeSegmentSize = 1 / trigger.page.scrollTriggers.length;
// Set the range for each inner scroll trigger // Set the range for each inner scroll trigger
trigger.page.scrollTriggers.forEach( ( scrollTrigger, i ) => { trigger.page.scrollTriggers.forEach( ( scrollTrigger, i ) => {
scrollTrigger.range = [i * slideRangeSegmentSize, ( i + 1 ) * slideRangeSegmentSize]; scrollTrigger.range = [
scrollTrigger.globalRange = [ rangeStart + i * scrollTriggerSegmentSize,
rangeStart + scrollTrigger.range[0] * slideRange, rangeStart + ( i + 1 ) * scrollTriggerSegmentSize
rangeStart + scrollTrigger.range[1] * slideRange
]; ];
} ); } );
rangeStart = trigger.range[1]; rangeStart = trigger.range[1];
} ); } );
@@ -550,27 +549,25 @@ export default class Reader {
// Don't show individual segments if they're too small // Don't show individual segments if they're too small
if( progressSegmentHeight > MIN_PROGRESS_SEGMENT_HEIGHT ) { 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 // Visual representation of a slide
page.progressBarSlide = document.createElement( 'div' ); page.progressBarSlide = document.createElement( 'div' );
page.progressBarSlide.className = 'reader-progress-slide'; page.progressBarSlide.className = 'reader-progress-slide';
page.progressBarSlide.style.top = trigger.range[0] * this.progressBarHeight + 'px'; page.progressBarSlide.style.top = slideTrigger.range[0] * this.progressBarHeight + 'px';
page.progressBarSlide.style.height = ( trigger.range[1] - trigger.range[0] ) * this.progressBarHeight - spacing + '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 ); page.progressBarSlide.classList.toggle( 'has-triggers', page.scrollTriggers.length > 0 );
this.progressBarInner.appendChild( page.progressBarSlide ); this.progressBarInner.appendChild( page.progressBarSlide );
const scrollBarSlideHeight = ( trigger.range[1] - trigger.range[0] ) * this.progressBarHeight;
// Visual representations of each scroll trigger // 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' ); const triggerElement = document.createElement( 'div' );
triggerElement.className = 'reader-progress-trigger'; triggerElement.className = 'reader-progress-trigger';
triggerElement.style.top = trigger.range[0] * scrollBarSlideHeight + 'px'; triggerElement.style.top = ( trigger.range[0] - slideTrigger.range[0] ) * this.progressBarHeight + 'px';
triggerElement.style.height = ( trigger.range[1] - trigger.range[0] ) * scrollBarSlideHeight - spacing + 'px'; triggerElement.style.height = ( trigger.range[1] - trigger.range[0] ) * this.progressBarHeight - spacing + 'px';
page.progressBarSlide.appendChild( triggerElement ); page.progressBarSlide.appendChild( triggerElement );
if( i === 0 ) triggerElement.style.display = 'none'; if( i === 0 ) triggerElement.style.display = 'none';
@@ -819,7 +816,7 @@ export default class Reader {
// need to be activated/deactivated // need to be activated/deactivated
if( activePage ) { if( activePage ) {
activePage.scrollTriggers.forEach( ( trigger ) => { 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 ); this.activateTrigger( trigger );
} }
else if( trigger.active ) { else if( trigger.active ) {