Skip to content

Instantly share code, notes, and snippets.

@rugk
Last active June 16, 2018 23:00
Show Gist options
  • Save rugk/0d3a6684a393f6f3f8ac10716d299dd6 to your computer and use it in GitHub Desktop.
Save rugk/0d3a6684a393f6f3f8ac10716d299dd6 to your computer and use it in GitHub Desktop.
RevealJS – manually specify order/way to move through slides
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;
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment