在闪亮的应用程序中的两个绘图中添加一个全屏模式按钮以重置为正常模式

Question

在下面的应用程序中，我显示 2 个图，每次按相对 actionButton() 时，我都会全屏显示它们。在全屏模式下，会显示第二个actionButton() 以退出全屏，然后再次隐藏。但我不能让它适用于 2 个地块，而不是一个基于 this 的地块。

library(shiny)
library(ggplot2)

js <- "
function openFullscreen(elem, plotselector) {
  $('#exitbtn').show();
  $(plotselector).addClass('fullscreen');
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
  }
}
function exitFullscreen() {
  $('#exitbtn').hide();
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}
function openFullscreen(elem, plotselector) {
  $('#exitbtn2').show();
  $(plotselector).addClass('fullscreen2');
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
  }
}
function exitFullscreen() {
  $('#exitbtn2').hide();
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}
"

css <- "
#exitbtn {
  display: none;
}
.fullscreen {
  height: 90% !important;
  margin: 0 !important;
}
#exitbtn2 {
  display: none;
}
.fullscreen2 {
  height: 90% !important;
  margin: 0 !important;
}
"

ui <- fluidPage(
  tags$head(
    tags$script(HTML(js)),
    tags$style(HTML(css))
  ),
  br(),
  fluidRow(
    column(
      width = 3,
      actionButton(
        "fs", "Full screen", 
        onclick = "openFullscreen(document.getElementById('frame'), '#ggplot');"
      )
    ),
    column(
      width = 9,
      div(
        id = "frame", 
        plotOutput("ggplot"),
        actionButton(
          "exitbtn", "Exit",
          onclick = "exitFullscreen(); $('#ggplot').removeClass('fullscreen');"
        )
      )
    )
  ),
  fluidRow(
    column(
      width = 3,
      actionButton(
        "fs2", "Full screen", 
        onclick = "openFullscreen(document.getElementById('frame'), '#ggplot2');"
      )
    ),
    column(
      width = 9,
      div(
        id = "frame", 
        plotOutput("ggplot2"),
        actionButton(
          "exitbtn2", "Exit",
          onclick = "exitFullscreen(); $('#ggplot2').removeClass('fullscreen');"
        )
      )
    )
  )
)

server <- function(input, output, session){
  
  output[["ggplot"]] <- renderPlot({
    ggplot(iris, aes(Sepal.Length, Sepal.Width)) + geom_point()
  })
  output[["ggplot2"]] <- renderPlot({
    ggplot(iris, aes(Sepal.Length, Sepal.Width)) + geom_point()
  })
}


shinyApp(ui, server)

Answer 1

不要定义同名的 JavaScript 函数。也不要在 HTML 中使用重复的 id。

js <- "
function openFullscreen(elem, plotselector) {
  $(plotselector).addClass('fullscreen');
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
  }
}
function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}"

  fluidRow(
    column(
      width = 3,
      actionButton(
        "fs", "Full screen", 
        onclick = "$('#exitbtn').show(); openFullscreen(document.getElementById('frame'), '#ggplot');"
      )
    ),
    column(
      width = 9,
      div(
        id = "frame", 
        plotOutput("ggplot"),
        actionButton(
          "exitbtn", "Exit",
          onclick = "exitFullscreen(); $('#ggplot').removeClass('fullscreen'); $(this).hide();"
        )
      )
    )
  ),
  fluidRow(
    column(
      width = 3,
      actionButton(
        "fs2", "Full screen", 
        onclick = "$('#exitbtn2').show(); openFullscreen(document.getElementById('frame2'), '#ggplot2');"
      )
    ),
    column(
      width = 9,
      div(
        id = "frame2", 
        plotOutput("ggplot2"),
        actionButton(
          "exitbtn2", "Exit",
          onclick = "exitFullscreen(); $('#ggplot2').removeClass('fullscreen'); $(this).hide();"
        )
      )
    )
  )

不需要 CSS 类 fullscreen2。