從翻轉框中刪除點擊觸發器

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手動翻轉框。