juba / shinyglide

Glide.js component for Shiny apps
https://juba.github.io/shinyglide/
91 stars 8 forks source link

Why only the first glide works when create glides with `insertUI` #38

Closed JulianoAtto closed 1 year ago

JulianoAtto commented 1 year ago

Hi,

The code below use insertUI to create a fixedPage with a glide inside.

I tried to change the id's dynamically because I thought it was generating some conflict but it had no effect.

library(shiny)
library(shinyglide)

ui <- fluidPage(actionButton("add_glide", "insert a glide"),
                tags$div(id = 'placeholder'))

server <- function(input, output, session) {

    observeEvent(input$add_glide, {

        insertUI(
            selector = "#placeholder",
            where = "afterEnd",
            ui = fixedPage(
                id = paste0("page_number_", input$add_glide),
                glide(
                    id = paste0("glide_number_", input$add_glide),
                    screen(p("First screen.")),
                    screen(p("Second screen."))
                )
            )
        )

    })

}

shinyApp(ui, server)
juba commented 1 year ago

I'm not sure what the problem is, it seems to be working for me ?

JulianoAtto commented 1 year ago

Hi,

For me just the first glide is working when using insertUI.

When using insertUI to create more than one glide dynamically I found this behavior listed below.

  1. The next button is not changing the screen;
  2. The next button is smaller than normal;
  3. The next button has no label.

It is worth noting that the behavior listed above only occurs from the second glide created.

ezgif-5-54a49a96d0

juba commented 1 year ago

Ah, I see, I didn't understand the issue correctly...

So I think there is sort of a workaround possible : you would have to add the shiny-html-output class to your placeholder <div>, and insert your glides inside this <div>. Something like this :

library(shiny)
library(shinyglide)

ui <- fluidPage(
    actionButton("add_glide", "insert a glide"),
    textInput("text", "Texte"),
    tags$div(id = "placeholder", class = "shiny-html-output")
)

server <- function(input, output, session) {
    observeEvent(input$add_glide, {
        insertUI(
            selector = "#placeholder",
            where = "beforeEnd",
            ui = glide(
                id = paste0("glide_number_", input$add_glide),
                screen(p("First screen.")),
                screen(p("Second screen."))
            )
        )
    })
}

shiny::runApp(shinyApp(ui, server))

But the problem that all the glides will be reset each time a new one is inserted. Unfortunately I don't really how to do better without introducing too much complexity in the code...

JulianoAtto commented 1 year ago

Sorry for not be clear in the first message. The workaround works nicely. I'll think about the "reset" question. Thank for your time!

JulianoAtto commented 1 year ago

Hi,

I'm trying to reproduce the fix code that you send and it's not working anymore.

library(shiny)
library(shinyglide)

ui <- fluidPage(
  actionButton("add_glide", "insert a glide"),
  tags$div(id = "placeholder", class = "shiny-html-output")
)

server <- function(input, output, session) {
  observeEvent(input$add_glide, {
    insertUI(
      selector = "#placeholder",
      where = "beforeEnd",
      ui = glide(
        id = paste0("glide_number_", input$add_glide),
        screen(p("First screen.")),
        screen(p("Second screen."))
      )
    )
  })
}

shiny::runApp(shinyApp(ui, server))
juba commented 1 year ago

You're right, sorry for the regression. This should be fixed in the development version.

Thanks for taking the time to re-report the issue !

JulianoAtto commented 1 year ago

It's working. Thanks for your time!