R блестящее приложение, делая журнал, который прокручивается автоматически - PullRequest
Новая
       8

R блестящее приложение, делая журнал, который прокручивается автоматически

0 голосов
/ 27 февраля 2019

Я пытаюсь сделать блестящий журнал, текст которого взят из реактивного значения, обновленного функцией.Журнал находится в verbatimTextOutput, и я хочу, чтобы он прокручивался вниз при каждом обновлении.Для этой цели я использую функцию, использующую код JavaScript, который я нашел здесь , но она не работает при использовании сразу после обновления консоли, она фактически прокручивается до уровня предыдущего обновления (поскольку пользовательский интерфейсзначения еще не обновлены?).Я пробовал разные методы для запуска функции в разное время и не смог получить полосу прокрутки внизу.

Вот пример того, что я пытаюсь, я хотел бы, чтобы кнопка «Добавить текст» прокручивала всевниз, но только кнопка «Принудительное обновление прокрутки» делает это: 

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  extendShinyjs(text = "shinyjs.scrollDown = function() {
                            var objDiv = document.getElementById('log');
                            objDiv.scrollTop = objDiv.scrollHeight - objDiv.clientHeight;
                          }"),
  tags$style(HTML("#log {height:80px}")), br(),
  verbatimTextOutput("log", placeholder = TRUE),
  actionButton("add", "Add Text"),
  actionButton("force", "Force scroll update")
)

server <- function(input, output, session) {

  a <- reactiveValues(
    logOutput = "TEST"
  )

  output$log <- renderText({ a$logOutput })

  updateLog <- function(text){
    a$logOutput <- paste(a$logOutput, text, sep = "\n")
  }

  observeEvent(input$add, {
    updateLog("TEST")
    js$scrollDown()
  })  

  observeEvent(input$force,{
    js$scrollDown()
  })

}

shinyApp(ui = ui, server = server)

Я надеюсь, что это можно сделать, спасибо

1 Ответ

0 голосов
/ 27 февраля 2019

Опция: 

js <- "
$(document).on('shiny:value', function(evt){
  if(evt.name == 'log'){
    setTimeout(function(){
      var objDiv = document.getElementById('log');
      objDiv.scrollTop = objDiv.scrollHeight - objDiv.clientHeight;
    }, 500); // wait 500 milliseconds
  }
});
"

ui <- fluidPage(
  tags$head(
    tags$script(HTML(js))
  ),
  tags$style(HTML("#log {height:80px}")), br(),
  verbatimTextOutput("log", placeholder = TRUE),
  actionButton("add", "Add Text")
)

server <- function(input, output, session) {

  a <- reactiveValues(
    logOutput = "TEST"
  )

  output$log <- renderText({ a$logOutput })

  updateLog <- function(text){
    a$logOutput <- paste(a$logOutput, text, sep = "\n")
  }

  observeEvent(input$add, {
    updateLog("TEST")
  })  

}

Решение без задержки, с использованием MutationObserver: 

js <- "
$(document).ready(function(){
  var objDiv = document.getElementById('log');
  // create an observer instance
  var observer = new MutationObserver(function(mutations) {
    objDiv.scrollTop = objDiv.scrollHeight - objDiv.clientHeight;
  });
  // configuration of the observer
  var config = {childList: true};
  // observe objDiv
  observer.observe(objDiv, config);
})
"
...