Блестящий показ / скрытие контента с - PullRequest
Новая
       13

Блестящий показ / скрытие контента с

0 голосов
/ 31 марта 2019

Начнем с минимального примера: 

library(shiny)
library(shinyjs)

ui <- fixedPage(

  shinyjs::useShinyjs(),

  extendShinyjs(script = "www/hideShowFile.js", functions = c("showByDefault")),

  fluidRow(
    column(12,
           selectInput("scenario", "Choose scenario", c("A", "B", "C"))
    )),

  a(id = "hideShow", "Show/Hide content", href = "#"),

  fluidRow(
    div(id="hideable", 
        br(),
        htmlOutput("hideable_text")),
        br()
    ),

  br(),

  fluidRow(htmlOutput("always_visible"))
)

server <- function(input, output) {

   output$hideable_text <- renderUI({
     HTML(paste0("<p>This is scenario ", input$scenario, "</p>" , "<p>This will not always be visible.   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>"))
   })

   output$always_visible <- renderUI({
     HTML("<p>This is always visible.</p>")
   })

   shinyjs::onclick("hideShow",
                    shinyjs::toggle(id = "hideable", anim = TRUE)) 

   observeEvent(input$scenario, js$showByDefault())
}

# Run the application 
shinyApp(ui = ui, server = server)

Структура каталога, в котором расположен app.R, выглядит следующим образом: 

shiny_project
   |- app.R
   |- www/
      |- hideShowFile.js

hideShowFile.js содержит следующий код (который я взял с сайта WWW3School): 

function shinyjs.showByDefault() {
    console.log("I have been called!")
  var x = document.getElementById("hideable");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

Как вы можете видеть в коде, есть часть приложения Shiny (div из id="hideable"), которую я хотел бы показать и скрыть. Однако скрытие div зависит не только от привязки (id="hideShow"), на которую нажимают, но и от того, был ли выбран новый сценарий.

В качестве примера: допустим, я выбрал сценарий B. Я не скрываю текст, а перехожу к следующему сценарию - C. Я возвращаюсь к B и нажимаю кнопку скрытия. Затем я переключаюсь на A и (что в настоящее время не реализовано) отображается текст. Если я переключаюсь на A (используя представленный код), текст скрыт, и я должен нажать на кнопку, чтобы показать его. Я хотел бы, чтобы текст отображался автоматически, если сценарий был изменен, а текст был ранее скрыт.

Я проверил консоль (ту, к которой вы можете перейти, нажав «Проверить» в приложении Shiny), и она говорит: 

TypeError: undefined is not a function (evaluating 'shinyjs.showByDefault(params)') 
(anonymous function) 
_sendMessagesToHandlers 
(anonymous function) 
_sendMessagesToHandlers 
dispatchMessage 
onmessage
...