Add A Button In Full Screen Mode To Reset To Normal Mode In Two Plots In A Shiny App

In the app below I display 2 plots and each time I press the relative actionButton() I get them in full screen. In full screen mode a second actionButton() is displayed to escape t

Solution 1:

Don't define JavaScript functions with the same names. Also don't use duplicated ids in HTML.

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();"
        )
      )
    )
  )

The CSS class fullscreen2 is not needed.