从翻转框中删除点击触发器

Question

我使用来自shinydashboardPlus的功能flipBox来创建翻转框并添加一个按钮。 用户必须点击它才能翻转盒子。 但是当我们点击它时盒子也会翻转，我想取消它我的意思是通过点击盒子来防止翻转（盒子必须在我们点击按钮时翻转）。 这就是我所做的：

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")
    })
  }
)

一些帮助将不胜感激

Answer 1

没有官方的方法可以做到这一点。 我们需要有自己的自定义 hacky 方式来更改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"))')
        })
    }
)

1. 定义我们自己的flipBox函数。 这里我们再添加一个选项trigger = c("click", "hover", "disable")以允许我们选择click或hover以外的方法。
2. 从源代码中复制翻转函数并定义为我们可以使用tags$script轻松访问的 JS 函数。
3. 单击按钮时，使用shinyjs手动翻转框。