HTML widgets support
durraniu opened this issue · 4 comments
I just tried rolldown and it is great! Thank you for your hardwork.
If I replace the plots in the sidebar example with a leaflet map, the map on the sidebar works fine. But the main map (in the right pane) has a weird behavior. If I click on the zoom buttons '+' or '-', the page moves to the top.
Also, is there a way to render everything (map/plot) in a way that it takes up the complete space in the right pane (just like the table in the first section takes up the complete width)?
Reproducible example
---
title: "Scrollama Document (Sidebar Layout)"
author: "Anonymous Llama"
date: "`r Sys.Date()`"
output: rolldown::scrollama_sidebar
---
```{css, echo=FALSE}
.level1 {
min-height: 400px;
border: 1px solid;
margin-bottom: 4em;
padding: 1em 2em 2em;
opacity: .5;
}
.is-active {
opacity: 1;
background-color: lightyellow;
}
body {
margin-bottom: 80vh;
}
```
# Introduction
## Level-two heading
Level-two and below headings...
### Level-three
...are all contained in the same section.
### A table
```{r, echo=FALSE}
knitr::kable(head(mtcars), caption = 'A boring table.')
```
And no chairs.
# Text
Example text.
No figures or tables in this section. Nothing to display in the main area.
# Plots
You may include any number of plots in a section.
```{r, fig.cap=c('A boring scatterplot.')}
library(leaflet)
leaflet() %>%
addProviderTiles(providers$Esri.WorldImagery) %>%
setView(-83, 46, zoom = 6)
```
# Images
Local news [reported](https://www.desmoinesregister.com/story/news/2018/04/27/rubber-duck-des-moines-yess-duck-derby/558852002/) a giant inflatable rubber duck rolling down the street of Des Moines, where this package is conceived.
# Videos
You can also embed videos here.
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/7gYIs7uYbMo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
# Technical details
The current implementation of this sidebar layout is kind of cumbersome. The HTML template is `rolldown:::pkg_resource('html', 'scrollama-side.html')`. We have hard-coded some CSS and JavaScript code in this template, which means, for example, you cannot easily customize the initialization of Scrollama (if you really want to, you must provide your own HTML template). You should be free to customize CSS, though (like we did in the beginning of this example document).
Activating sections doesn't work well (especially in RStudio Viewer). We don't know why at the moment.
It is technically tricky to support HTML widgets, but we will definitely add support in the future! Thanks for the feedback!
@durraniu I was not able to reproduce the issue mentioned in your post right off the bat; But I will look deeper into it ASAP. On your second question, it should be possible to implement a helper function to inject custom CSS on all types of content.
I do not know if this package is still maintained, but I would definitely love to see support for HTML widgets
It's not actively maintained. Sorry! I can probably come back to it at the end of this year. If anyone wants to contribute a PR, please feel free to. Thanks!