reader mode tweaks

hakimel · Oct 12, 2023 · 198cbc4 · 198cbc4
1 parent d802789
commit 198cbc4
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 13 deletions.
diff --git a/css/reveal.scss b/css/reveal.scss
@@ -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);
 	}
 }
 

diff --git a/dist/reveal.css b/dist/reveal.css
diff --git a/dist/reveal.esm.js b/dist/reveal.esm.js
diff --git a/dist/reveal.esm.js.map b/dist/reveal.esm.js.map
diff --git a/dist/reveal.js b/dist/reveal.js
diff --git a/dist/reveal.js.map b/dist/reveal.js.map
diff --git a/js/controllers/reader.js b/js/controllers/reader.js
@@ -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,14 +410,18 @@ 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';
 					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 );
 
+					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();

diff --git a/js/reveal.js b/js/reveal.js
@@ -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();