Remove the click trigger from flipbox

Question

I use the function flipBox from shinydashboardPlus to create flip box and I add a button. The user have to clik on it to flip the box. But the box also flip when we click on it and I would like to desactive it I mean prevent fliping by cliking on the box (the box must flip only when we click on the button). This is what I did :

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
    
shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      actionButton("swich_id", "click to swich"), # click on the button to flip the box

      flipBox(
        id = "id1",
        front = div(
          class = "text-center",
          height = "300px",
          width = "100%",
          h1("A"), 
          p("a table"),
          DT::DTOutput('mytable')
        ),
        back = div(
          class = "text-center",
          height = "300px",
          width = "100%",
          h1("B"),
          p("a graphe"),
          plotOutput("graph")
        )
      )
    )
  ),
  
  server = function(input, output, session) {

    output$mytable <- DT::renderDT({
      cars[1:5, 1:2]
    })
    
    output$graph <- renderPlot({
      plot(cars$speed, cars$dist)
    })
    
    observeEvent(input$swich_id, {
      updateFlipBox("id1")
    })
  }
)

Some help would be appreciated

score 2 · Accepted Answer · answered Jul 10 '22 at 22:03

There is no official way to do so. We need to have our own custom hacky way to change the source code of flipBox.

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyjs)

flipBox <- function (id, front, back, trigger = c("click", "hover", "disable"), width = 6) {
    if (is.null(id) || missing(id)) 
        stop("card id cannot be null or missing!")
    trigger <- match.arg(trigger)
    shiny::column(width = width, shiny::tags$div(style = "position: relative", 
        class = "flipbox", id = id, `data-rotate` = trigger, 
        shiny::tags$div(class = "card-front active", style = "background-color: white;", 
            front), shiny::tags$div(class = "card-back", style = "background-color: white;", 
            back)))
}



shinyApp(
    ui = dashboardPage(
        dashboardHeader(),
        dashboardSidebar(),
        dashboardBody(
            useShinyjs(),
            tags$script(HTML(
            '
            function _clickOnFront(el) {
                $(el)
                  .find(".card-front")
                  .css({
                    "-webkit-transform": "perspective(1600px) rotateY(-180deg)",
                    transform: "perspective(1600px) rotateY(-180deg)"
                  })
                  .toggleClass("active");
                $(el)
                  .find(".card-back")
                  .css({
                    "-webkit-transform": "perspective(1600px) rotateY(0deg)",
                    transform: "perspective(1600px) rotateY(0deg)"
                  })
                  .toggleClass("active");
             }
            function _clickOnBack(el) {
                $(el)
                  .find(".card-front")
                  .css({ "-webkit-transform": "", transform: "" })
                  .toggleClass("active");
                $(el)
                  .find(".card-back")
                  .css({ "-webkit-transform": "", transform: "" })
                  .toggleClass("active");
            }
            '
            )),
            actionButton("swich_id", "click to swich"), # click on the button to flip the box
            
            flipBox(
                id = "id1",
                trigger = "disable",
                front = div(
                    class = "text-center",
                    height = "300px",
                    width = "100%",
                    h1("A"), 
                    p("a table"),
                    DT::DTOutput('mytable')
                ),
                back = div(
                    class = "text-center",
                    height = "300px",
                    width = "100%",
                    h1("B"),
                    p("a graphe"),
                    plotOutput("graph")
                )
            )
        )
    ),
    
    server = function(input, output, session) {
        
        output$mytable <- DT::renderDT({
            cars[1:5, 1:2]
        })
        
        output$graph <- renderPlot({
            plot(cars$speed, cars$dist)
        })
        
        observeEvent(input$swich_id, {
            if(input$swich_id %% 2 != 0) return(runjs('_clickOnFront($("#id1"))'))
            runjs('_clickOnBack($("#id1"))')
        })
    }
)

define our own flipBox function. Here we add one more option trigger = c("click", "hover", "disable") to allow us to choose methods other than click or hover.
Copy the flip functions from source code and define as JS functions that we have easy access with tags$script.
Use shinyjs to manually flip the box when the button is clicked.

Remove the click trigger from flipbox

1 Answers1