crosstalk messes up ioslides_presentation

[dmurdoch]

If I put a crosstalk control in an ioslides_presentation, the styles get all messed up. For example:

---
output: ioslides_presentation
---


## CSS messed up

```{r eval = TRUE}
library(crosstalk)
sd <- SharedData$new(mtcars)
filter_checkbox("cylinderselector", 
                        "Cylinders", sd, ~ cyl, inline = TRUE)

has the style messed up on the second slide: fonts too small, background white instead of black, etc. If eval = FALSE is used instead, it looks fine (but doesn't include the control).

The cause of this is that ioslides_presentattion sets a style on pre, for example, and so does some other CSS that crosstalk pulls in. If I include my own CSS code and prefix the selectors to make them more specific, I can fix most of the problems, e.g. instead of

pre {
  font-family: 'Source Code Pro', 'Courier New', monospace;
  ...

I can use

slide.current pre {
  font-family: 'Source Code Pro', 'Courier New', monospace;
  ...

but I'd like to know if there's some way to turn off (some of?) the crosstalk includes, or to automatically give precedence to the ioslides_presentation includes.

[dmurdoch]

A workaround that helps a lot is to include the CSS file default.css from the rmarkdown package as a user-specified CSS file. This puts it last in the CSS includes, and its definitions have priority over earlier ones. That file is currently in system.file("rmd/ioslides/ioslides-13.5.1/theme/css/default.css", package="rmarkdown"). If it moves (e.g. ioslides is updated to a newer version), rmarkdown:::html_dependency_ioslides()$src should list the path to it.

[dmurdoch]

The main conflicts are coming from bootstrap's CSS. The problem with the workaround above is that the ioslides CSS messes up the crosstalk controls, which are designed to work with bootstrap.

I looked into ways to have ioslides CSS handle most things, and bootstrap CSS handle the crosstalk controls. This appears possible, using pre-processing to isolate bootstrap: details are on this web page: https://formden.com/blog/isolate-bootstrap. However, that would require quite large changes to the crosstalk build, and I'm not familiar enough with all the tools to want to attempt it.

[dmurdoch]

I've put together a fork that edits the bootstrap CSS so it is isolated: https://github.com/dmurdoch/crosstalk/tree/bootstrap-iso. I don't really like the current design:

It offers 3 choices for handling bootstrap: "full", which is the standard behaviour that conflicts with ioslides, "minimal" that includes a bootstrap subset with the CSS modified to limit it to crosstalk controls, and "none" that doesn't include anything (assuming bootstrap has been included in some other way and the crosstalk controls can just use that).

This choice needs to be made consistently in every crosstalk control in a document, so I set the default to use getOption("crosstalk.bootstrap", default = "full").

What I don't like about this:

• It seems too complicated. I think "minimal" should probably be the default. I'm not sure "none" and "full" are needed.
• I am not sure what subset of bootstrap is needed for "minimal". selectizeLib needs some part of bootstrap, but I didn't explore what, so haven't done anything with it. It might need editing to be compatible with "minimal".
• I don't know the build system well enough to make the bootstrap isolation automatic, so my fork would be hard to maintain. (I used Less (http://lesscss.org/) to do the editing, but I did that manually.)