Remove the click trigger from flipbox - shiny

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

Answer 1

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.