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

reader mode tweaks

Browse Source
This commit is contained in:
Hakim El Hattab
2023-10-12 13:39:44 +02:00
parent d802789c4d
commit 198cbc4ace
8 changed files with 35 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
css/reveal.scss
View File

@@ -1883,10 +1883,12 @@ $notesWidthPercent: 25%;
z-index: 1;
--r-reader-progress-width: 8px;
--r-reader-progress-trigger-size: 6px;
}
@media screen and (max-width: 500px) {
--r-reader-progress-width: 3px;
--r-reader-progress-trigger-size: 3px;
}
.reveal .controls,
@@ -1973,6 +1975,7 @@ $notesWidthPercent: 25%;
z-index: auto !important;
visibility: visible;
opacity: 1;
touch-action: manipulation;
}
/* Display slide speaker notes when 'showNotes' is enabled */
@@ -2046,7 +2049,7 @@ $notesWidthPercent: 25%;
.reader-progress-inner {
position: absolute;
width: var(--r-reader-progress-width);
height: calc(var(--page-height) - var(--r-controls-spacing) * 2);
height: calc(var(--viewport-height) - var(--r-controls-spacing) * 2);
right: var(--r-controls-spacing);
top: 0;
transform: translateY(-50%);
@@ -2105,13 +2108,19 @@ $notesWidthPercent: 25%;
.reader-progress-slide.active .reader-progress-trigger:after {
content: '';
position: absolute;
width: calc(var(--r-reader-progress-width) / 2);
height: calc(var(--r-reader-progress-width) / 2);
border-radius: 6px;
width: var(--r-reader-progress-trigger-size);
height: var(--r-reader-progress-trigger-size);
border-radius: 20px;
bottom: 0;
left: 50%;
transform: translate(-50%, 0);
background-color: rgba(var(--r-overlay-element-fg-color), 0.8);
background-color: rgba(var(--r-overlay-element-bg-color), 0.8);
transition: transform 0.2s ease;
}
.reader-progress-slide.active .reader-progress-trigger.active:after {
transform: translate(calc( var(--r-reader-progress-width) * -2), 0);
background-color: rgba(var(--r-overlay-element-bg-color), 1);
}
}

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

12
js/controllers/reader.js
View File

@@ -387,7 +387,7 @@ export default class Reader {
const scrollHeight = this.viewportElement.scrollHeight;
this.progressBarHeight = this.progressBarInner.offsetHeight;
this.playheadHeight = Math.max( viewportHeight / scrollHeight * this.progressBarHeight, MIN_PLAYHEAD_HEIGHT );
this.playheadHeight = Math.max( this.pages[0].pageHeight / scrollHeight * this.progressBarHeight, MIN_PLAYHEAD_HEIGHT );
this.progressBarScrollableHeight = this.progressBarHeight - this.playheadHeight;
this.progressBarPlayhead.style.height = this.playheadHeight - PROGRESS_SPACING + 'px';
@@ -410,7 +410,7 @@ export default class Reader {
const scrollPaddingProgressHeight = page.scrollPadding / scrollHeight * this.progressBarHeight;
// Create visual representations for each scroll trigger
page.scrollTriggers.slice(1).forEach( trigger => {
page.scrollTriggerElements = page.scrollTriggers.map( ( trigger, i ) => {
const triggerElement = document.createElement( 'div' );
triggerElement.className = 'reader-progress-trigger';
@@ -418,6 +418,10 @@ export default class Reader {
triggerElement.style.height = ( trigger.range[1] - trigger.range[0] ) * scrollPaddingProgressHeight - PROGRESS_SPACING + 'px';
page.progressBarSlide.appendChild( triggerElement );
if( i === 0 ) triggerElement.style.display = 'none';
return triggerElement;
} );
} );
@@ -446,6 +450,10 @@ export default class Reader {
.filter( page => page.progressBarSlide )
.forEach( ( page ) => {
page.progressBarSlide.classList.toggle( 'active', !!page.active );
page.scrollTriggers.forEach( ( trigger, i ) => {
page.scrollTriggerElements[i].classList.toggle( 'active', page.active && trigger.active );
} );
} );
this.showProgressBar();

7
js/reveal.js
View File

@@ -915,6 +915,9 @@ export default function( revealElement, options ) {
if( dom.wrapper && !print.isActive() ) {
const viewportWidth = dom.viewport.offsetWidth;
const viewportHeight = dom.viewport.offsetHeight;
if( !config.disableLayout ) {
// On some mobile devices '100vh' is taller than the visible
@@ -928,7 +931,7 @@ export default function( revealElement, options ) {
}
const size = reader.isActive() ?
getComputedSlideSize( dom.viewport.offsetWidth, dom.viewport.offsetHeight ) :
getComputedSlideSize( viewportWidth, viewportHeight ) :
getComputedSlideSize();
const oldScale = scale;
@@ -1017,6 +1020,8 @@ export default function( revealElement, options ) {
}
dom.viewport.style.setProperty( '--slide-scale', scale );
dom.viewport.style.setProperty( '--viewport-width', viewportWidth + 'px' );
dom.viewport.style.setProperty( '--viewport-height', viewportHeight + 'px' );
reader.layout();