RevealJS – manually specify order/way to move through slides

revealjs-custom-navigation.js

var customSlideOrder = (function () {
	var me = {};
	let cycleMode = null;

	function customNavigate(navigate) {
		const pos = Reveal.getIndices();

		// use if's so keywords like "rightdown" are allowed
		if (navigate.includes("right")) {
			pos.h += 1
		}
		if (navigate.includes("left")) {
			pos.h -= 1
		}
		if (navigate.includes("up")) {
			pos.v -= 1
		}
		if (navigate.includes("down")) {
			pos.v += 1
		}
		if (navigate.includes(",") && (parseInt(navigate) !== NaN)) {
			// assume two numbers
			const splitNav = navigate.split(",");
			pos.h = splitNav[0];
			pos.v = splitNav[1];
		}

		// slide
		Reveal.slide(pos.h, pos.v);

		// add slide to history
		// window.slideStack.push({h: pos.h, v: pos.v});
	}

	function slideCustom(event) {
		// ignore if there is a fragment -> and show fragment
		if (Reveal.nextFragment()) {
			return;
		}

		// do not slide when impossible
		if (Reveal.isOverview() || Reveal.isPaused()) {
			return;
		}

		const curr = Reveal.getCurrentSlide();
		const navigate = curr.dataset.navigate;

		// default -> next slide
		if (!navigate) {
			return Reveal.next();
		}

		customNavigate(navigate);
	}

	function slidePrevious() {
		// ignore if there is a fragment -> and hide fragment
		if (Reveal.prevFragment()) {
			return;
		}

		// remove current slide
		window.slideStack.pop();

		const prevSlide = window.slideStack.pop();
		Reveal.slide(prevSlide.h, prevSlide.v);

		// re-add current slide (only needed if you don't use the event below)
		// window.slideStack.push({h: prevSlide.h, v: prevSlide.v});
	}

	// override keyboard keys for own way
	function switchMode() {
		if (cycleMode == "fixedSlides") {
			// switch to free mode
			Reveal.configure({
				keyboard: {
					// P - switches between modes
					80: switchMode,
					// up
					38: function () {
						customNavigate("up");
					},
					// left
					37: function () {
						customNavigate("left");
					},
					// enter
					13: slideCustom,
					// down
					40: function () {
						customNavigate("down");
					},
					// right
					39: function () {
						customNavigate("right");
					},
				}
			});

			cycleMode = "free"
		} else {
			// switch to slides mode –> slides define way
			Reveal.configure({
				keyboard: {
					// P - switches between modes
					80: switchMode,
					// up
					38: slidePrevious,
					// left
					37: slidePrevious,
					// enter
					13: slideCustom,
					// down
					40: slideCustom,
					// right
					39: slideCustom
				}
			});

			cycleMode = "fixedSlides";
		}

	}

	me.init = function () {
		// remember slide history for backwards slide
		window.slideStack = [{v: 0, h: 0}];
		// the code below, would also record manual slide changes in the history
		Reveal.addEventListener('slidechanged', function (event) {
			window.slideStack.push({h: event.indexh, v: event.indexv});
		});

		// update slide number manually
		Reveal.addEventListener('slidechanged', function (event) {
			const elSlideNumber = document.querySelector(".slide-number");
			const slideNumber = event.currentSlide.dataset.number;

			// hide slide number if not specified
			if (!slideNumber) {
				elSlideNumber.style.display = "none";
				return;
			}

			elSlideNumber.style.display = "block";
			elSlideNumber.textContent = event.currentSlide.dataset.number;
		});

		// configure after init
		setTimeout(me.configure, 1000);
	}

	me.configure = function () {
		// need to enable slide number first, so reveal.js creates the DOM
		Reveal.configure({
			slideNumber: "c"
		});

		switchMode();

		// prevent slide number auto-update
		Reveal.configure({slideNumber: false});
	}

	return me;
})();