Skip to content

Commit

Permalink
reader mode -> scroll view, auto-enable below 435px width
Browse files Browse the repository at this point in the history
  • Loading branch information
hakimel committed Oct 25, 2023
1 parent e46bad3 commit c239642
Show file tree
Hide file tree
Showing 16 changed files with 154 additions and 149 deletions.
72 changes: 36 additions & 36 deletions css/reveal.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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;
Expand All @@ -1946,7 +1946,7 @@ $notesWidthPercent: 25%;
overflow: hidden;
}

.reader-page section {
.scroll-page section {
visibility: visible !important;
display: block !important;
position: absolute !important;
Expand Down Expand Up @@ -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;
}

Expand All @@ -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;
Expand All @@ -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%;
Expand All @@ -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%;
Expand All @@ -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);
}
}
Expand Down
2 changes: 1 addition & 1 deletion dist/reveal.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/reveal.esm.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/reveal.esm.js.map

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/reveal.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/reveal.js.map

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions examples/reader-mode.html → examples/scroll.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">

Expand All @@ -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>
Expand Down Expand Up @@ -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 ]
Expand Down
22 changes: 11 additions & 11 deletions js/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
8 changes: 4 additions & 4 deletions js/controllers/notes.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>';
}
Expand All @@ -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' );
}
Expand Down
2 changes: 1 addition & 1 deletion js/controllers/overview.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
2 changes: 1 addition & 1 deletion js/controllers/print.js → js/controllers/printview.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) {

Expand Down
Loading

0 comments on commit c239642

Please sign in to comment.