reader mode -> scroll view, auto-enable below 435px width

css/reveal.scss

@@ -1868,28 +1868,28 @@ $notesWidthPercent: 25%;
 
 
 /*********************************************
- * READER MODE
+ * SCROLL VIEW
  *********************************************/
 .reveal-viewport.loading-scroll-mode {
 	visibility: hidden;
 }
 
-.reveal-viewport.reveal-reader {
+.reveal-viewport.reveal-scroll {
 	& {
 		margin: 0 auto !important;
 		overflow: auto;
 		overflow-x: hidden;
 		overflow-y: auto;
 		z-index: 1;
 
-		--r-reader-progress-width: 7px;
-		--r-reader-progress-trigger-size: 5px;
+		--r-scrollbar-width: 7px;
+		--r-scrollbar-trigger-size: 5px;
 		--r-controls-spacing: 8px;
 	}
 
 	@media screen and (max-width: 500px) {
-		--r-reader-progress-width: 3px;
-		--r-reader-progress-trigger-size: 3px;
+		--r-scrollbar-width: 3px;
+		--r-scrollbar-trigger-size: 3px;
 	}
 
 	.controls,
@@ -1923,21 +1923,21 @@ $notesWidthPercent: 25%;
 		perspective-origin: 50% 50%;
 	}
 
-	.reader-page {
+	.scroll-page {
 		position: relative;
 		width: 100%;
 		height: calc(var(--page-height) + var(--page-scroll-padding));
 		z-index: 1;
 		overflow: visible;
 	}
 
-	.reader-page-sticky {
+	.scroll-page-sticky {
 		position: sticky;
 		height: var(--page-height);
 		top: 0px;
 	}
 
-	.reader-page-content {
+	.scroll-page-content {
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -1946,7 +1946,7 @@ $notesWidthPercent: 25%;
 		overflow: hidden;
 	}
 
-	.reader-page section {
+	.scroll-page section {
 		visibility: visible !important;
 		display: block !important;
 		position: absolute !important;
@@ -1975,14 +1975,14 @@ $notesWidthPercent: 25%;
 }
 
 // Chromium
-.reveal-viewport.reveal-reader[data-reader-scroll-bar="true"]::-webkit-scrollbar,
-.reveal-viewport.reveal-reader[data-reader-scroll-bar="auto"]::-webkit-scrollbar {
+.reveal-viewport.reveal-scroll[data-scrollbar="true"]::-webkit-scrollbar,
+.reveal-viewport.reveal-scroll[data-scrollbar="auto"]::-webkit-scrollbar {
   display: none;
 }
 
 // Firefox
-.reveal-viewport.reveal-reader[data-reader-scroll-bar="true"],
-.reveal-viewport.reveal-reader[data-reader-scroll-bar="auto"] {
+.reveal-viewport.reveal-scroll[data-scrollbar="true"],
+.reveal-viewport.reveal-scroll[data-scrollbar="auto"] {
   scrollbar-width: none;
 }
 
@@ -1997,7 +1997,7 @@ $notesWidthPercent: 25%;
 	--r-overlay-element-fg-color: 240, 240, 240;
 }
 
-.reveal-viewport.reveal-reader .reader-progress {
+.reveal-viewport.reveal-scroll .scrollbar {
 	position: sticky;
 	top: 50%;
 	z-index: 20;
@@ -2009,40 +2009,40 @@ $notesWidthPercent: 25%;
 		opacity: 1;
 	}
 
-	.reader-progress-inner {
+	.scrollbar-inner {
 		position: absolute;
-		width: var(--r-reader-progress-width);
+		width: var(--r-scrollbar-width);
 		height: calc(var(--viewport-height) - var(--r-controls-spacing) * 2);
 		right: var(--r-controls-spacing);
 		top: 0;
 		transform: translateY(-50%);
-		border-radius: var(--r-reader-progress-width);
+		border-radius: var(--r-scrollbar-width);
 		z-index: 10;
 	}
 
-	.reader-progress-playhead {
+	.scrollbar-playhead {
 		position: absolute;
-		width: var(--r-reader-progress-width);
-		height: var(--r-reader-progress-width);
+		width: var(--r-scrollbar-width);
+		height: var(--r-scrollbar-width);
 		top: 0;
 		left: 0;
-		border-radius: var(--r-reader-progress-width);
+		border-radius: var(--r-scrollbar-width);
 		background-color: rgba(var(--r-overlay-element-bg-color), 1);
 		z-index: 11;
 		transition: background-color 0.2s ease;
 	}
 
-	.reader-progress-slide {
+	.scrollbar-slide {
 		position: absolute;
 		width: 100%;
 		background-color: rgba(var(--r-overlay-element-bg-color), 0.2);
 		box-shadow: 0 0 0px 1px rgba(var(--r-overlay-element-fg-color), 0.1);
-		border-radius: var(--r-reader-progress-width);
+		border-radius: var(--r-scrollbar-width);
 		transition: background-color 0.2s ease;
 	}
 
 	// Hit area
-	.reader-progress-slide:after {
+	.scrollbar-slide:after {
 		content: '';
 		position: absolute;
 		width: 200%;
@@ -2053,27 +2053,27 @@ $notesWidthPercent: 25%;
 		z-index: -1;
 	}
 
-	.reader-progress-slide:hover,
-	.reader-progress-slide.active {
+	.scrollbar-slide:hover,
+	.scrollbar-slide.active {
 		background-color: rgba(var(--r-overlay-element-bg-color), 0.4);
 	}
 
-	.reader-progress-trigger {
+	.scrollbar-trigger {
 		position: absolute;
 		width: 100%;
 		transition: background-color 0.2s ease;
 	}
 
-	.reader-progress-slide.active.has-triggers {
+	.scrollbar-slide.active.has-triggers {
 		background-color: rgba(var(--r-overlay-element-bg-color), 0.4);
 		z-index: 10;
 	}
 
-	.reader-progress-slide.active .reader-progress-trigger:after {
+	.scrollbar-slide.active .scrollbar-trigger:after {
 		content: '';
 		position: absolute;
-		width: var(--r-reader-progress-trigger-size);
-		height: var(--r-reader-progress-trigger-size);
+		width: var(--r-scrollbar-trigger-size);
+		height: var(--r-scrollbar-trigger-size);
 		border-radius: 20px;
 		top: 50%;
 		left: 50%;
@@ -2083,13 +2083,13 @@ $notesWidthPercent: 25%;
 		opacity: 0.4;
 	}
 
-	.reader-progress-slide.active .reader-progress-trigger.active:after,
-	.reader-progress-slide.active .reader-progress-trigger.active ~ .reader-progress-trigger:after {
+	.scrollbar-slide.active .scrollbar-trigger.active:after,
+	.scrollbar-slide.active .scrollbar-trigger.active ~ .scrollbar-trigger:after {
 		opacity: 1;
 	}
 
-	.reader-progress-slide.active .reader-progress-trigger ~ .reader-progress-trigger.active:after {
-		transform: translate(calc( var(--r-reader-progress-width) * -2), 0);
+	.scrollbar-slide.active .scrollbar-trigger ~ .scrollbar-trigger.active:after {
+		transform: translate(calc( var(--r-scrollbar-width) * -2), 0);
 		background-color: rgba(var(--r-overlay-element-bg-color), 1);
 	}
 }

examples/reader-mode.html → examples/scroll.html

@@ -4,7 +4,7 @@
 	<head>
 		<meta charset="utf-8">
 
-		<title>reveal.js - Reader Mode</title>
+		<title>reveal.js - Scroll View</title>
 
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
@@ -20,7 +20,7 @@
 
 			<div class="slides">
 
-				<section><h1>Reader Mode</h1></section>
+				<section><h1>Scroll View</h1></section>
 				<section data-background="indigo">
 					<h2>Scroll triggers</h2>
 					<ul>
@@ -111,7 +111,7 @@ <h2>Video background</h2>
 		<script src="../plugin/highlight/highlight.js"></script>
 		<script>
       Reveal.initialize({
-        view: 'reader',
+        view: 'scroll',
         hash: true,
 
 				plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]

js/config.js

@@ -258,33 +258,33 @@ export default {
 
 	// Can be used to initialize reveal.js in one of the following views:
 	// - print:   Render the presentation so that it can be printed to PDF
-	// - reader:  Show the presentation as a tall scrollable page with scroll
+	// - scroll:  Show the presentation as a tall scrollable page with scroll
 	//            triggered animations
 	view: null,
 
-	// Adjusts the height of each slide in reader mode
+	// Adjusts the height of each slide in the scroll view.
 	// - full:       Each slide is as tall as the viewport
 	// - compact:    Slides are as small as possible, allowing multiple slides
 	//               to be visible in parallel on tall devices
-	readerLayout: 'full',
+	scrollLayout: 'full',
 
-	// Control how scroll snapping works in reader mode.
+	// Control how scroll snapping works in the scroll view.
 	// - false:   	No snapping, scrolling is continuous
 	// - proximity:  Snap when close to a slide
 	// - mandatory:  Always snap to the closest slide
 	//
-	// Only applies to presentations in reader mode.
-	readerScrollSnap: 'mandatory',
+	// Only applies to presentations in scroll view.
+	scrollSnap: 'mandatory',
 
-	// Enables and configure the reader mode scroll bar.
+	// Enables and configure the scroll view progress bar.
 	// - 'auto':    Show the scrollbar while scrolling, hide while idle
 	// - true:      Always show the scrollbar
 	// - false:     Never show the scrollbar
-	readerScrollbar: 'auto',
+	scrollProgress: 'auto',
 
-	// Responsively activate the reader mode when we reach the specified
-	// width (in pixels)
-	readerActivationWidth: null,
+	// Automatically activate the scroll view when we the viewport falls
+	// below the given width.
+	scrollActivationWidth: 435,
 
 	// The maximum number of pages a single slide can expand onto when printing
 	// to PDF, unlimited by default

js/controllers/notes.js

@@ -40,8 +40,8 @@ export default class Notes {
 
 		if( this.Reveal.getConfig().showNotes &&
 			this.element && this.Reveal.getCurrentSlide() &&
-			!this.Reveal.isReaderMode() &&
-			!this.Reveal.isPrinting()
+			!this.Reveal.isScrollView() &&
+			!this.Reveal.isPrintView()
 		) {
 			this.element.innerHTML = this.getSlideNotes() || '<span class="notes-placeholder">No notes on this slide.</span>';
 		}
@@ -58,8 +58,8 @@ export default class Notes {
 
 		if( this.Reveal.getConfig().showNotes &&
 			this.hasNotes() &&
-			!this.Reveal.isReaderMode() &&
-			!this.Reveal.isPrinting()
+			!this.Reveal.isScrollView() &&
+			!this.Reveal.isPrintView()
 		) {
 			this.Reveal.getRevealElement().classList.add( 'show-notes' );
 		}

js/controllers/overview.js

@@ -24,7 +24,7 @@ export default class Overview {
 	activate() {
 
 		// Only proceed if enabled in config
-		if( this.Reveal.getConfig().overview && !this.Reveal.isReaderMode() && !this.isActive() ) {
+		if( this.Reveal.getConfig().overview && !this.Reveal.isScrollView() && !this.isActive() ) {
 
 			this.active = true;
 

js/controllers/print.js → js/controllers/printview.js

@@ -4,7 +4,7 @@ import { queryAll, createStyleSheet } from '../utils/util.js'
 /**
  * Setups up our presentation for printing/exporting to PDF.
  */
-export default class Print {
+export default class PrintView {
 
 	constructor( Reveal ) {