---
title: "slickR with DOMs"
output: rmarkdown::html_vignette
vignette: >
  %\VignetteIndexEntry{slickR with DOMs}
  %\VignetteEngine{knitr::rmarkdown}
  %\VignetteEncoding{UTF-8}
---

```{r, include = FALSE}
knitr::opts_chunk$set(
  collapse = TRUE,
  comment = "#>"
)
```

```{r setup}
library(slickR)
```

The most flexible implementaton of `slickR` is by building your own DOM elements and passing them into `slickR`. 

## img

We build the img DOM from scratch:

### Single element

```{r}
img_bare <- htmltools::tags$img(src = nba_player_logo$uri[1])
```

```{r}
slickR::slickR(img_bare)
```

### Vector of elements

```{r}
imgs_bare <- lapply(nba_player_logo$uri[c(1:5)],function(x){
  htmltools::tags$img(src = x)
})
  
```

```{r}
slickR::slickR(imgs_bare)
```

### slick_div

`slick_div` is an `S3` method which accepts different object classes such as `character`, `shiny.tag`,`htmlwidget`, `xml_document` objects. It will also internally convert a vector a elements so the user does not need to use lapply in their script. 

It will also add some css style to the elements to center them in the carousel. 

```{r}
htmltools::css(marginLeft='auto',marginRight='auto')
```

```{r}
slickR::slickR(slick_div(nba_player_logo$uri[c(1:5)]))
```

## Mix and Match

We can also mix three different DOM types: `img`, `p`, `iframe`. In the `iframe` we will place a `leaflet` htmlwidget.

### p

We put in Lorem ipsum into the paragraph

```{r}
p <- htmltools::tags$p(
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  style = htmltools::css(color='red','font-style' = 'italic')
  )
```

### iframe

```{r}

w <- slick_div(
    x = leaflet::addTiles(leaflet::leaflet()),
    css = htmltools::css(
    height = '400px',
    marginLeft ='auto',
    marginRight='auto')
    )

```

## Combining the elements

To pass a list of `shiny.tag` elements into `slickR` we first convert the individual `shiny.tag` into a `tagList` using `slick_list`.

```{r}
doms <- slick_list(img_bare,p,w)
```

```{r}

slickR::slickR(doms) + settings(dots = TRUE, adaptiveHeight = TRUE)

```