yonicd / slickR

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

slickr_output_current$.center isn't providing data on shiny app startup #53

Closed ismirsehregal closed 3 years ago

ismirsehregal commented 3 years ago

Currently slickr_output_current$.center isn't providing the carousels center on app start only after the first click.

I think it would be useful to provide the center right away, as done here. Please see the following:

image

library(shiny)
library(slickR)

js <- "
$(document).ready(function(){
  $('#slickr').on('setPosition', function(event, slick) {
    var index = slick.currentSlide + 1;
    Shiny.setInputValue('imageIndex', index);
  });
})"

# create some local images
if(!dir.exists("myimages")){
  dir.create("myimages")
}

imgs <- paste0("myimages/myplot", seq_len(3), ".png")

for (img in imgs) {
  png(file = img, bg = "transparent")
  plot(runif(10))
  dev.off() 
}

ui <- fluidPage(
  tags$head(
    tags$script(HTML(js))
  ),
  textOutput("imgName"),
  textOutput("imgIndex"),
  tags$hr(),
  tags$div(
    slickROutput("slickr", width="500px"),
    style = "margin-left:100px;"
  )
)

server <- function(input, output) {

  output[["slickr"]] <- renderSlickR({
    slickR(imgs)
  })

  output[["imgName"]] <- renderText({
    paste0("CURRENT IMAGE: ", basename(imgs[input[["imageIndex"]]]))
  })

  output[["imgIndex"]] <- renderText({
    paste0("slickr_current$.center: ", input$slickr_current$.center)
  })

}

# Run the application 
shinyApp(ui = ui, server = server)
yonicd commented 3 years ago

Information is observed onclick of the slick in the JavaScript side

ismirsehregal commented 3 years ago

Sure and this makes sense for the output of .clicked and .relative_clicked but

could be initialized right after rendering. This would make things easier regarding the initialization of downstream reactives.

yonicd commented 3 years ago

thanks for the suggestion.

you are welcome to create a PR for this enhancement, it is not top priority for me currently.