How to detect a slide change in Slidy? - knitr

Question

I use rmarkdown to produce a Slidy slide show using slidy_presentation. I would like to execute some Javascript when a slide is shown. In ioslides_presentation there's a slideenter event triggered when a page is shown (see Event when slide is displayed in ioslides?), but I don't see anything like that in Slidy.
I can detect whether a particular slide is being shown (by looking at the class of its div), but I don't know how to trigger the code to do that.
Is there some way to detect that a slide change is happening?

Answer 1

I researched a little and found an easy hack on how to detect which slide is currently shown:
Using a MutationObserver
In the following script we use a MutationObserver (see here and here) to observe changes in the content of the title element. Having the title we can extract the integer part of it, which represents a slide number.
In this example we just show an alert containing the text "Current Slide: " followed by the number we extracted.
Here ist the JavaScript snippet:
<script>
var target = document.querySelector('head > title');
var observer = new window.WebKitMutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
var title = mutation.target.textContent;
var current = +title.toString().match(/\d+/g);
alert('Current Slide: ' + current);
});
});
observer.observe(target, { subtree: true, characterData: true, childList: true });
</script>
Since we don't want the snippet to be interpreted as the content of a slide itself, we include it via the YAML header. Check the reproducible example below, where header.html contains only the the javascript snippet above:
MRE:
---
title: "Untitled"
author: "Martin Schmelzer"
date: "18 3 2017"
output:
slidy_presentation:
includes:
in_header: header.html
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```
## R Markdown
Slide 2 (Title slide is #1!)
## Slide with Bullets
This is slide 3!
## Slide with R Output
...and number 4!
EDIT: Modified script for ioslides
If somehow needed in ioslides, you can modify the JavaScript snippet the following way:
<script>
$(document).ready(function() {
var target = document.querySelector('slides');
var observer = new window.WebKitMutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if(mutation.target.getAttribute('class').indexOf('current') != -1 ) {
alert(mutation.target.getAttribute('data-slide-num'));
}
});
});
observer.observe(target, { subtree: true, attributes: true});
});
</script>
In slidy each slide consists of its own div container. The approach in ioslides is different. Here we only have a couple of <slide> elements for the past, current, next and far-next slides. The current slide element is the one which has the class current. So we just search for that class inside the forEach loop and grab it's data-slide-num attribute.