Блестящие модули и renderUI, передающие код JavaScript

Question

Я пытался заставить свой код renderUI реагировать на реализацию slick.js, совместно используемую @ Stéphane Laurent.

В основном у меня есть модули, которые создают таблицы.Я хочу, чтобы пользователь выбрал количество таблиц для отображения.Но я хочу, чтобы эти таблицы можно было прокручивать и накладывать друг на друга

. Вот воспроизводимый пример, который должен работать на вашей машине

chartTableBoxUI <- function(id) {

  ns <- NS(id)


  div(
    tags$div(DTOutput(ns("chart"))),
    tags$div(DTOutput(ns("table")))

  )



}

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

  ns <- session$ns

  vals <- reactiveValues()

  observeEvent(input$chart_rows_selected,{

    vals$sel<- (input$chart_rows_selected)


  })

  output$chart <- renderDT({
    DT::datatable(
      mtcars,options = list(
        dom='t', pageLength = 5)

    )
  })

  output$table <- renderDT({


    DT::datatable(
      mtcars[vals$sel, 1:3],options = list(dom='t')
    )




  })

}

library(shiny)
library(shinydashboard)
library(tidyverse)
library(highcharter)
library(DT)
library(shinyjs)

ui <- fluidPage(

  fluidRow(
    tags$head(
      tags$link(rel="stylesheet", type="text/css",
                href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"),
      tags$link(rel="stylesheet", type="text/css",
                href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"),
      tags$script(type="text/javascript", 
                  src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"),
      tags$script(HTML(
        "$(document).ready(function(){
        $('#tables').slick({
        arrows: true,
        dots:true
        });
        });")),
    tags$style(HTML(
      "#tables .slick-prev {
      position:absolute;
      top:65px; 
      left:-100px;
      }
      #tables .slick-next {
      position:absolute;
      top:95px; 
      left:-100px;
      }
      .slick-prev:before, .slick-next:before { 
      color:red !important;
      }
      .content {
      margin: auto;
      padding: 20px;
      width: 80%;
      }"))
  ),



  sliderInput("dr", "Num of tables:",
              min = 0, max = 12,
              value = 2),
  uiOutput("tabs")
  #verbatimTextOutput("dr2")





    )

    )





server <- function(input, output, session) {
  for(i in 1:5)
    callModule(chartTableBox,i)

  output$tabs <- renderUI({
     num_tables<- input$dr


    tags$div(class="content",
             tags$div(id="tables",
                      lapply(1:num_tables,chartTableBoxUI)



             ))


  })





}

shinyApp(ui, server)

Answer 1

Вот решение с MutationObserver.Он наблюдает, есть ли изменение в контейнере, и затем применяется slick().

chartTableBoxUI <- function(id) {

  ns <- NS(id)
  div(
    h2(id),
    tags$div(DTOutput(ns("chart"))),
    tags$div(DTOutput(ns("table")))
  )

}

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

  ns <- session$ns

  vals <- reactiveValues()

  observeEvent(input$chart_rows_selected, {
    vals$sel<- input$chart_rows_selected
  }, ignoreNULL = FALSE)

  output$chart <- renderDT({
    datatable(
      mtcars, options = list(dom='t', pageLength = 5), class = "compact stripe"
    )
  })

  output$table <- renderDT({
    datatable(
      mtcars[vals$sel, 1:3], options = list(dom='t'), class = "compact stripe"
    )
  })

}

library(shiny)
library(DT)
library(shinyjs)

js <- "
$(document).ready(function(){
    var container = document.getElementById('tabs');
    // create an observer instance
    var observer = new MutationObserver(function(mutations) {
      setTimeout(function(){
        $('#tables').slick({
          arrows: true,
          dots: true
        });
      }, 0);
    });
    // observe 
    observer.observe(container, {subtree: false, childList: true});
});
"
ui <- fluidPage(

  fluidRow(
    tags$head(
      tags$link(rel="stylesheet", type="text/css",
                href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"),
      tags$link(rel="stylesheet", type="text/css",
                href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"),
      tags$script(type="text/javascript", 
                  src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"),
      tags$script(HTML(js)),
      tags$style(HTML(
        "#tables .slick-prev {
      position:absolute;
      top:65px; 
      left:-100px;
      }
      #tables .slick-next {
      position:absolute;
      top:95px; 
      left:-100px;
      }
      .slick-prev:before, .slick-next:before { 
      color:red !important;
      }
      .content {
      margin: auto;
      padding: 20px;
      width: 80%;
      }"))
    ),

    sliderInput("dr", "Num of tables:", min = 0, max = 12, value = 2),
    div(style = "margin-top: -60px"),
    uiOutput("tabs")

  )

)

server <- function(input, output, session) {
  for(i in 1:12)
    callModule(chartTableBox, paste0("Table",i))

  output$tabs <- renderUI({
    num_tables <- input$dr
    tags$div(class="content",
             tags$div(id="tables",
                      lapply(paste0("Table",1:num_tables), chartTableBoxUI)
             ))
  })

}

shinyApp(ui, server)