search

yonicd / slickR

slick carousel htmlwidget for R
https://yonicd.github.io/slickR/
Other
158 stars 14 forks source link

slickR not working with markdown when tabs are used? #46

Closed ahdee closed 4 years ago

ahdee commented 4 years ago

Hi I notice that the slider does not show up if it is placed in a tab that is not the first, for example below is a markdown in html. The first slider will show up whilst the second will not. Is there a workaround for this? I found several issues in stackoverflow but those seem to be rectifying shiny apps; is there a solution for a markdown? thanks!

#Data
# {.tabset}

## results 

```{r}
opts_dot_number <- settings(
        initialSlide = 0,
        slidesToShow = 1,
        slidesToScroll = 1,
        focusOnSelect = TRUE,
        dots = TRUE,
        adaptiveHeight =T 
        )

    slickR(
        obj = expfiles
        , padding=0 
        ,height=1200, 
      width=1200 ) 
## results2
{r second }
opts_dot_number <- settings(
        initialSlide = 0,
        slidesToShow = 1,
        slidesToScroll = 1,
        focusOnSelect = TRUE,
        dots = TRUE,
        adaptiveHeight =T 
        )

    slickR(
        obj = expfiles
        , padding=0 
        ,height=1200, 
      width=1200 )
yonicd commented 4 years ago

Thanks for opening the issue.

Can you please supply a fully reproducible example.

yonicd commented 4 years ago

The sliders work for me on a tabset


---
title: "Untitled"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
library(slickR)

tab1 {.tabset}

My first slider

This is the first slider

slickR::slickR(obj=nba_team_logo$uri,height = 100)

tab2

This is the second slider

slickR::slickR(obj=nba_team_logo$uri,height = 100)

The second slider gets activated for some reason if you click on it (try an arrow). 

This doesn't seem to be a problem with `slickR` or the underlying `js` library, but the way that the tabs work with htmlwidgets.

<details closed>
<summary> <span title='Click to Expand'> craninfo </span> </summary>

```r

── Check Info (Sys.time: 2020-07-07 07:36:03) ─────────────────────────────────────────────────────────────────────────────────────────────────────────────
── Flavor: r-release-osx-x86_64 ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
       package                                    source       date     loaded cran_version release  
1           ps                            CRAN (R 3.6.2) 2020-05-08      1.3.3        1.3.3   ERROR  
2  viridisLite                            CRAN (R 3.6.0) 2018-02-01      0.3.0        0.3.0   ERROR  
3         xml2                            CRAN (R 3.6.2) 2020-04-01      1.3.0        1.3.2    WARN *
4        dplyr                            CRAN (R 3.6.2) 2020-05-29      1.0.0        1.0.0    NOTE  
5      ggplot2                            CRAN (R 3.6.0) 2020-03-05      3.3.0        3.3.2    NOTE *
6    ipaddress                            CRAN (R 3.6.2) 2020-05-12      0.3.0        0.3.0    NOTE  
7      iptools                            CRAN (R 3.6.0) 2018-12-09      0.6.1        0.6.1    NOTE  
8  matrixStats                            CRAN (R 3.6.0) 2018-07-23     0.54.0       0.56.0    NOTE *
9         Rcpp                            CRAN (R 3.6.3) 2020-04-09    1.0.4.6      1.0.4.6    NOTE  
10       readr                            CRAN (R 3.6.0) 2018-12-21      1.3.1        1.3.1    NOTE  
11   rmarkdown        Github (rstudio/rmarkdown@18ba267) 2020-01-30      2.1.1          2.3    NOTE *
12       rstan                            CRAN (R 3.6.0) 2019-07-09     2.19.2       2.19.3    NOTE *
13 StanHeaders                            CRAN (R 3.6.0) 2019-06-14  2.18.1-10     2.21.0-5    NOTE *
14     stringi                            CRAN (R 3.6.1) 2020-02-17      1.4.6        1.4.6    NOTE  
15    urltools                            CRAN (R 3.6.0) 2019-04-14      1.7.3        1.7.3    NOTE  
16     viridis                            CRAN (R 3.6.0) 2018-03-29      0.5.1        0.5.1    NOTE  
17 AsioHeaders                            CRAN (R 3.6.0) 2020-03-11   1.12.2-1     1.12.2-1      OK  
18  assertthat                            CRAN (R 3.6.0) 2019-03-21      0.2.1        0.2.1      OK  
19   backports                            CRAN (R 3.6.2) 2020-05-13      1.1.7        1.1.8      OK *
20   base64enc                            CRAN (R 3.6.0) 2015-07-28      0.1-3        0.1-3      OK  
21       callr                            CRAN (R 3.6.2) 2020-03-28      3.4.3        3.4.3      OK  
22         cli                            CRAN (R 3.6.0) 2020-02-28      2.0.2        2.0.2      OK  
23       clipr                            CRAN (R 3.6.0) 2019-07-23      0.7.0        0.7.0      OK  
24  colorspace                            CRAN (R 3.6.0) 2019-03-18      1.4-1        1.4-1      OK  
25      crayon                            CRAN (R 3.6.0) 2017-09-16      1.3.4        1.3.4      OK  
26        crul                            CRAN (R 3.6.0) 2019-11-06      0.9.0        0.9.0      OK  
27        desc               Github (r-lib/desc@da19501) 2020-04-03 1.2.0.9000        1.2.0      OK *
28     details                                     local 2020-01-12      0.2.1        0.2.1      OK  
29      digest                            CRAN (R 3.6.0) 2020-02-23     0.6.25       0.6.25      OK  
30    ellipsis                            CRAN (R 3.6.2) 2020-05-15      0.3.1        0.3.1      OK  
31    evaluate                            CRAN (R 3.6.0) 2019-05-28       0.14         0.14      OK  
32       fansi                            CRAN (R 3.6.0) 2020-01-08      0.4.1        0.4.1      OK  
33    generics                            CRAN (R 3.6.0) 2018-11-29      0.0.2        0.0.2      OK  
34     ggrepel                            CRAN (R 3.6.0) 2019-05-07      0.8.1        0.8.2      OK *
35        glue                            CRAN (R 3.6.2) 2020-05-13      1.4.1        1.4.1      OK  
36   gridExtra                            CRAN (R 3.6.0) 2017-09-09        2.3          2.3      OK  
37      gtable                            CRAN (R 3.6.0) 2019-03-25      0.3.0        0.3.0      OK  
38         hms                            CRAN (R 3.6.0) 2020-01-08      0.5.3        0.5.3      OK  
39   htmltools                            CRAN (R 3.6.0) 2019-10-04      0.4.0        0.5.0      OK *
40 htmlwidgets                            CRAN (R 3.6.0) 2019-10-08      1.5.1        1.5.1      OK  
41    httpcode                            CRAN (R 3.6.2) 2020-04-10      0.3.0        0.3.0      OK  
42        httr                            CRAN (R 3.6.0) 2019-08-05      1.4.1        1.4.1      OK  
43      inline                            CRAN (R 3.6.0) 2018-05-18     0.3.15       0.3.15      OK  
44    jsonlite                            CRAN (R 3.6.0) 2020-02-02      1.6.1        1.7.0      OK *
45       knitr                            CRAN (R 3.6.0) 2020-02-06       1.28         1.29      OK *
46   lifecycle                            CRAN (R 3.6.0) 2020-03-06      0.2.0        0.2.0      OK  
47         loo                            CRAN (R 3.6.0) 2019-03-13      2.1.0        2.2.0      OK *
48    magrittr                            CRAN (R 3.6.0) 2014-11-22        1.5          1.5      OK  
49     munsell                            CRAN (R 3.6.0) 2018-06-12      0.5.0        0.5.0      OK  
50     packrat                            CRAN (R 3.6.0) 2018-11-14      0.5.0        0.5.0      OK  
51      pillar                            CRAN (R 3.6.2) 2020-05-05      1.4.4        1.4.4      OK  
52       pingr                            CRAN (R 3.6.0) 2019-10-21      2.0.0        2.0.1      OK *
53    pkgbuild                            CRAN (R 3.6.1) 2019-10-09      1.0.6        1.0.8      OK *
54   pkgconfig                            CRAN (R 3.6.0) 2019-09-22      2.0.3        2.0.3      OK  
55         png                            CRAN (R 3.6.0) 2013-12-03      0.1-7        0.1-7      OK  
56 prettyunits                            CRAN (R 3.6.1) 2020-01-24      1.1.1        1.1.1      OK  
57       purrr                            CRAN (R 3.6.0) 2019-10-18      0.3.3        0.3.4      OK *
58          R6                            CRAN (R 3.6.0) 2019-11-12      2.4.1        2.4.1      OK  
59     rematch                            CRAN (R 3.6.0) 2016-04-21      1.0.1        1.0.1      OK  
60       rlang                            CRAN (R 3.6.2) 2020-05-02      0.4.6        0.4.6      OK  
61   rprojroot                            CRAN (R 3.6.0) 2018-01-03      1.3-2        1.3-2      OK  
62   rsconnect                            CRAN (R 3.6.0) 2019-07-22     0.8.15       0.8.16      OK *
63  rstudioapi                            CRAN (R 3.6.1) 2020-02-07       0.11         0.11      OK  
64      scales                            CRAN (R 3.6.0) 2019-11-18      1.1.0        1.1.1      OK *
65 sessioninfo                            CRAN (R 3.6.0) 2018-11-05      1.1.1        1.1.1      OK  
66      slickR                                     local 2020-02-28   0.5.0001        0.4.9      OK *
67      tibble                            CRAN (R 3.6.2) 2020-04-20      3.0.1        3.0.1      OK  
68  tidyselect                            CRAN (R 3.6.2) 2020-05-11      1.1.0        1.1.0      OK  
69   triebeard                            CRAN (R 3.6.0) 2016-08-04      0.3.0        0.3.0      OK  
70        utf8                            CRAN (R 3.6.0) 2018-05-24      1.1.4        1.1.4      OK  
71       vctrs              Github (r-lib/vctrs@504ec96) 2020-06-02      0.3.1        0.3.1      OK  
72      whoami                            CRAN (R 3.6.0) 2019-03-19      1.3.0        1.3.0      OK  
73       withr                            CRAN (R 3.6.0) 2018-03-15      2.1.2        2.2.0      OK *
74        xfun                            CRAN (R 3.6.0) 2020-01-13       0.12         0.15      OK *
75        yaml                            CRAN (R 3.6.0) 2020-02-01      2.2.1        2.2.1      OK  
76 addressable Github (ropenscilabs/addressable@d04bccf) 2020-06-02   0.0.1.91         <NA>    <NA> *
77     cchecks     Github (ropenscilabs/cchecks@df3c80c) 2020-06-02   0.1.8.94         <NA>    <NA> *
78    craninfo                                     local 2020-06-07      0.0.1         <NA>    <NA> *
79        curl                            CRAN (R 3.6.0) 2019-12-02        4.3         <NA>    <NA> *
80    processx                            CRAN (R 3.6.1) 2020-02-09      3.4.2         <NA>    <NA> *


ahdee commented 4 years ago

@yonicd thanks! Sorry I was a bit busy yesterday to post an example. However I would've done the same. Its showing up now. I think the issue was that I was not activating the arrows as you mentioned previously. But it works when the arrows are pushed. I'm wondering now if there is an option in the setting to activate the first slide? A side question. Is there anyway to make the arrows bigger or with different icon? 

opts_dot_number <- settings(
    initialSlide = 0,
    slidesToShow = 1,
    slidesToScroll = 1,
    focusOnSelect = TRUE, # I wonder if there is an option for auto load?
     arrows = T, ## bigger arrows or icon? 
    dots = TRUE
    )
dan-reznik commented 4 years ago

I am having the same issue. i have 3 caroussels behind tabsets, and they all appear empty. The only way to populate it with a first picture is to click on the right arrow. This is undesirable as most users won't understand it.

Is there a small piece of JS code that can be inserted into the .Rmd that would simulate that first click event?

The page is published here and the code is below:

--- 
title: "Locus of Centers of Ellipse-mounted Triangles "
author: Dan Reznik and Iverton Darlan
date: July, 2020
output:
    bookdown::html_document2:
      theme: cosmo
      css: style.css
      number_sections: no
link-citations: yes
bibliography: [elliptic_billiards_v2.bib,authors_rgk_v1.bib]
csl: computer.csl
---
knitr::opts_chunk$set(
  cache=T,
  collapse=T,
  comment="#>",
  dpi=300,
  fig.align="center",
  out.width='100%'
)
library(tidyverse)
library(fs)
library(slickR)
library(knitr)
source("util.R")

Loci {.tabset}

Consider an ellipse with $a,b$ semi-axes. Now consider a triangle $T$ with vertices ${V_1}{V_2}{V_3}$ where ${V_1}{V_2}$ are held fixed on the ellipse's:

  1. foci
  2. left and right vertices
  3. top and bottom vertices
  4. left and top vertices

Shown below are the loci of triangle centers of $T$ ($X_1$=Incenter, $X_2$=Barycenters, etc., after Kimberling [@etc]) over all $V_3(t)=[a\cos(t),b\sin(t)]$ on the ellipse.

To view the pictures below, select a tab (for a particular ellipse aspect ratio $a/b$) and click on the caroussel's right arrow to initialize it.

dir_ls("locus_single_vtx_150") %>% as.character %>% length

a=1.5 {-}

g_fnames <- as.character(dir_ls("locus_single_vtx_150")) %>% str_c(g_url,"/",.)
slickR(
    g_fnames,
    height=600,
    # width = 800,
    width='90%',
    slideType = 'img-lazy') + 
  slickR::settings(fade=T,adaptiveHeight=T,
                   lazyLoad = 'ondemand',
                   speed=50)

a=2.0 {-}

g_fnames <- as.character(dir_ls("locus_single_vtx_200")) %>% str_c(g_url,"/",.)
slickR(
    g_fnames,
    height=600,
    # width = 800,
    width='90%',
    slideType = 'img-lazy') + 
  slickR::settings(fade=T,adaptiveHeight=T,
                   lazyLoad = 'ondemand',
                   speed=50)

a=3.0 {-}

g_fnames <- as.character(dir_ls("locus_single_vtx_300")) %>% str_c(g_url,"/",.)
slickR(
    g_fnames,
    height=600,
    #width = 800,
    width='90%',
    slideType = 'img-lazy') + 
  slickR::settings(fade=T,adaptiveHeight=T,
                   lazyLoad = 'ondemand',
                   speed=50)

Conclusions

Go back to main page.

r if (is_html_output()) '# References'

yonicd commented 4 years ago

Thanks for adding the comment, I’ll dig into it to see what can be done

yonicd commented 4 years ago

@dan-reznik that page you linked to initialized all the carousels for me (I didn’t see any tabs though)

dan-reznik commented 4 years ago

i removed them because they weren't working...

i just pushed a new version again with the tabsets (section 2), do take a look.

dan

On Tue, Jul 7, 2020 at 9:06 PM yonicd notifications@github.com wrote:

@dan-reznik https://github.com/dan-reznik that page you linked to initialized all the carousels for me (I didn’t see any tabs though)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/yonicd/slickR/issues/46#issuecomment-655202763, or unsubscribe https://github.com/notifications/unsubscribe-auth/AD32VFUVP4Y2KIP32NEZTKDR2O2AVANCNFSM4OPIFRWA .

yonicd commented 4 years ago

i see it now. thanks for updating that.

yonicd commented 4 years ago

@RLesur any ideas on how this can be solved?

dan-reznik commented 4 years ago

thanks! this has been a source of frustration for some time.

dan

On Tue, Jul 7, 2020 at 10:03 PM yonicd notifications@github.com wrote:

i see it now. thanks for updating that.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/yonicd/slickR/issues/46#issuecomment-655218662, or unsubscribe https://github.com/notifications/unsubscribe-auth/AD32VFUZC3NVU4QR5CD6ZXTR2PAVJANCNFSM4OPIFRWA .

dan-reznik commented 4 years ago

Can some small JS snippet run at initialization which fakes arrow pushes behind the scenes?

Dan

On Tue, Jul 7, 2020 at 10:05 PM yonicd notifications@github.com wrote:

@RLesur https://github.com/RLesur any ideas on how this can be solved?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/yonicd/slickR/issues/46#issuecomment-655219345, or unsubscribe https://github.com/notifications/unsubscribe-auth/AD32VFUAMJDNW4IQXSTSZ3LR2PA55ANCNFSM4OPIFRWA .

yonicd commented 4 years ago

javascript may be a bit tricky because you would need to know the slick sliders id up front and the way the id's are set up now by default the have a random stub to avoid conflicts in multiple slider outputs in the same html doc output.

dan-reznik commented 4 years ago

could you force it to have a certain name?

On Tue, Jul 7, 2020 at 10:10 PM yonicd notifications@github.com wrote:

javascript may be a bit tricky because you would need to know the slick sliders id up front and the way the id's are set up now by default the have a random stub to avoid conflicts in multiple slider outputs in the same html doc output.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/yonicd/slickR/issues/46#issuecomment-655220907, or unsubscribe https://github.com/notifications/unsubscribe-auth/AD32VFXVMZSPZQYD2UVVXT3R2PBRXANCNFSM4OPIFRWA .

yonicd commented 4 years ago

one solution is this (@ahdee you were asking about this too):

```{r}
slickR::slickR(obj=nba_team_logo$uri,height = 100) + 
  slickR::settings(autoplay = TRUE,autoplaySpeed = 1000)


it will force the slider to start up. the defaults of the slider are set to pause the autoplay when the mouse is hovering over any part of the slider.
yonicd commented 4 years ago

regarding the name. you can give unique stems for the id (ie instead of baseDiv) then use regex in the js to manipulate the slick

dan-reznik commented 4 years ago

i will try! thanks!

dan

On Tue, Jul 7, 2020 at 10:30 PM yonicd notifications@github.com wrote:

one solution is this:

slickR::slickR(obj=nba_team_logo$uri,height = 100) +
  slickR::settings(autoplay = TRUE,autoplaySpeed = 1000)

it will force the slider to start up. the defaults of the slider are set to pause the autoplay when the mouse is hovering over any part of the slider.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/yonicd/slickR/issues/46#issuecomment-655226263, or unsubscribe https://github.com/notifications/unsubscribe-auth/AD32VFV3P5KUBITRFZ6RUPTR2PDZZANCNFSM4OPIFRWA .

dan-reznik commented 4 years ago

unfortunately it only works for the first tab not the other ones.

dan

On Tue, Jul 7, 2020 at 10:30 PM yonicd notifications@github.com wrote:

one solution is this:

slickR::slickR(obj=nba_team_logo$uri,height = 100) +
  slickR::settings(autoplay = TRUE,autoplaySpeed = 1000)

it will force the slider to start up. the defaults of the slider are set to pause the autoplay when the mouse is hovering over any part of the slider.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/yonicd/slickR/issues/46#issuecomment-655226263, or unsubscribe https://github.com/notifications/unsubscribe-auth/AD32VFV3P5KUBITRFZ6RUPTR2PDZZANCNFSM4OPIFRWA .

ahdee commented 4 years ago

The very least I wonder if its possible to make the arrows BIGGER so that its very obvious. May be a solution is to just put put a default message - Something like please scroll right to see data?

dan-reznik commented 4 years ago

it's too bad really. such a simple thing!

dan

On Tue, Jul 7, 2020 at 11:05 PM ahdee notifications@github.com wrote:

The very least I wonder if its possible to make the arrows BIGGER so that its very obvious. May be a solution is to just put put a default message - Something like please scroll right to see data?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/yonicd/slickR/issues/46#issuecomment-655236518, or unsubscribe https://github.com/notifications/unsubscribe-auth/AD32VFXQADLGCGFMEJL6DC3R2PH75ANCNFSM4OPIFRWA .

yonicd commented 4 years ago

@dan-reznik here are three tabs first is regular other ones have autoplay.

---
title: "Untitled"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
library(slickR)

Results {.tabset}

Plots

We show a scatter plot in this section.

slickR::slickR(obj=nba_team_logo$uri,height = 100)

Tables 1

We show the data in this tab.

slickR::slickR(obj = nba_team_logo$uri,
               height = 100) + 
  slickR::settings(autoplay = TRUE,
                   autoplaySpeed = 1000)

Tables 2

We show the data in this tab.

slickR::slickR(obj = nba_team_logo$uri,
               height = 100) + 
  slickR::settings(autoplay = TRUE,
                   autoplaySpeed = 1000)
yonicd commented 4 years ago

@ahdee to manipulate the arrows you have two arguments in the settings:

slickR::settings(prevArrow = '<button type="button" class="slick-prev">Previous</button>',
                   nextArrow = '<button type="button" class="slick-next">Next</button>')

you would need to have some css knowledge to be able to use this, which is beyond the scope of this package.

RLesur commented 4 years ago

@yonicd I would try to detect when a tab is activated to refresh the slick element. For instance,

---
title: "Untitled"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

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

## tab1 {.tabset}

### My first slider

This is the first slider

```{r}
slickR::slickR(obj=nba_team_logo$uri,height = 100)
```

### tab2

This is the second slider

```{r}
slickR::slickR(obj=nba_team_logo$uri,height = 100)
```

```{js, echo=FALSE}
$('body').on('shown.bs.tab', function(e) {
  $(e.target).parents('.tabset')
             .find('.active .slick-slider')
             .each(function() {
               this.slick.setPosition();
              });
});
```

I'm sure this can be improved.

yonicd commented 4 years ago

thanks @RLesur that works! I like your find a bit more than the one i hacked together :)

here is another example that @daattali helped me construct

---
title: "Untitled"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
library(slickR)

Results {.tabset}

Plots

We show a scatter plot in this section.

slickR::slickR(obj=nba_team_logo$uri,height = 100)

Tables

We show the data in this tab.

slickR::slickR(obj = nba_team_logo$uri,height = 100)

Tables 2

We show the data in this tab.

slickR::slickR(obj = nba_team_logo$uri,height = 100)
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (event) {
  $.each($("[class^=baseDiv]"),function(key,value) {
  value.slick.setPosition()
  })
})
dan-reznik commented 4 years ago

Yoni and Romain

Todah Rabbah, Merci Beaucoup

Will try it right away

Dan

On Wed, Jul 8, 2020 at 11:55 AM yonicd notifications@github.com wrote:

thanks @RLesur https://github.com/RLesur that works! I like your find a bit more than the one i hacked together :)

here is another example that @daattali https://github.com/daattali helped me construct

title: "Untitled" output: html_document

knitr::opts_chunk$set(echo = TRUE)
library(slickR)

Results {.tabset}

Plots

We show a scatter plot in this section.

slickR::slickR(obj=nba_team_logo$uri,height = 100)

Tables

We show the data in this tab.

slickR::slickR(obj = nba_team_logo$uri,height = 100)

Tables 2

We show the data in this tab.

slickR::slickR(obj = nba_team_logo$uri,height = 100)
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (event) {
  $.each($("[class^=baseDiv]"),function(key,value) {
  value.slick.setPosition()
  })
})

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/yonicd/slickR/issues/46#issuecomment-655570856, or unsubscribe https://github.com/notifications/unsubscribe-auth/AD32VFVVIVWN2EW2X4UL3TLR2SCGTANCNFSM4OPIFRWA .

ahdee commented 4 years ago

Thanks a bunch @yonicd and @RLesur this great and I think solves an important issue. Also thanks for the css hack for the arrows; that is enough for me to work on as well! thanks!