How to see all slides in overview mode?

[libralibra]

Is there an easy way to see all slides in the overview mode? Currently, only a few slides are shown in overview mode. I am trying to find a way that shows all of them like what flowtime.js does. Any help would be appreciated.

[t-fritsch]

There is no way to do so using the current API, Reveal does the "zooming out" effect in overview mode by setting a transform: scale(...) css style on the .slides div. This scale is calculated here :

reveal.js/js/controllers/overview.js

Lines 121 to 122 in 92ee97f

	const vmin = Math.min( window.innerWidth, window.innerHeight );
	const scale = Math.max( vmin / 5, 150 ) / vmin;

As you can see values are hard coded and thus you're not able to configure it directly.

The good news is you can use a MutationObserver to track when Reveal changes the scale of the .slides div and override it with the scale you need.

// regexp to match only the last `scale(...)` rule (there are two scale rules on the .slides element, don't know why)
const currentScaleRegexp = /scale\([^\)]*\)(?!.*(scale))/;
// prevent infinite loop https://stackoverflow.com/a/48599188
let insideInitialObserverCallback = false;
    
let observer = new MutationObserver( mutationsList => {
    // only react when in overview mode
    // could also use https://revealjs.com/overview/#events to stop/start observer when needed
    if (!Reveal.isOverview()) return; 

    insideInitialObserverCallback = ! insideInitialObserverCallback
    if ( insideInitialObserverCallback ) {
        mutationsList.forEach(mutation => {
            const currentTransform = mutation.target.style.transform;
            // change to the scale that fits your needs
            mutation.target.style.transform = currentTransform.replace(currentScaleRegexp, 'scale(.05)');
        })
    }
} );
observer.observe(
    Reveal.getSlidesElement(),
    { attributes: true, attributesFilter: ['style'] }
);

when working with small scale like this, you may want to make the "current slide" styling more visible than the default one :

.reveal.overview .slides section.present {
    outline-color: cyan; /* color that suits your theme */
    outline-width: 20px;
    outline-offset: 20px;
}

liimitations :

• the overview still gets centered on the curent slide (not the same as flowtime). If you need fixed overview, you could try to override translate() rules too.
• the viewDistance gets forced to 10, so it will work if your presentations are not too big, if they are, expect to see some slides on left/right/top/bottom ends to disapear/appear :

  reveal.js/js/reveal.js

  Line 1751 in 92ee97f

  let viewDistance = overview.isActive() ? 10 : config.viewDistance;

hope this helps 🙏

[t-fritsch]

when you launch npm start command, it will "watch" for changes in the js/ folder and then rebuild (re-compile) into the dist folder, and then reload browser.

all this process is done in the gulpfile :

reveal.js/gulpfile.js

Line 308 in 92ee97f

gulp.watch(['js/**'], gulp.series('js', 'reload', 'eslint'))

anyway modifying the source code is imo overkill in your situation, did you try the code I provided earlier ? simply adjusting the scale level should do the trick 😉

[libralibra]

@t-fritsch Yes, I did try your approach this morning and it did work 👍 ! The slides are smaller now.

as long as the gulpfile takes care of all the compiling process, it seems to straightforward that I only need to modify the js file and make it work. Then, the HTML doesn't need to be change since the dist folder will be updated automatically! Great!

[t-fritsch]

great ! just be aware that modifying the source code will make updating reveal for the next version more complex (you'll have to manage conflicts) 😉

[libralibra]

@t-fritsch The reveal.js is really flexible and powerful after trying the flowtime.js framework. It shares a similar 2D grid layout concept of slides but the syntax is simpler than the flowtime.

As a presentation framework, I am quite happy with its current capabilities. I have made a local copy and may modify it for my personal use without contaminating the upstream repository.

[t-fritsch]

I find this is really a great tool too (this is why I try to help when I can ^^), I'm happy you like it too !

Regarding the potential conflicts I was not worried about upstream but about you losing your changes when you upgrade 😉