如何在 R Shiny 中为长文本添加 'Read more' 和 'Read less' 功能？

Question

我正在尝试在我的 Shiny 应用程序中为长文本添加 'Read more' 或 'Read less' 功能。我对 JS/ html 的了解有限，所以如果有任何关于在 shiny、js 或 html 之间交流信息的帮助，那将是有帮助的。

我指的是这个 tutorial 但无法理解如何在闪亮的应用程序中实现相同的功能。

我正在尝试使用以下代码。

library(shiny)
library(htmltools)
library(htmlwidgets)

jscode <- 
  'shinyjs.myFunction = function() {
    var dots = document.getElementById("dots");
    var moreText = document.getElementById("more");
    var btnText = document.getElementById("myBtn");

    if (dots.style.display === "none") {
      dots.style.display = "inline";
      btnText.innerHTML = "Read more";
      moreText.style.display = "none";
    } else {
      dots.style.display = "none";
      btnText.innerHTML = "Read less";
      moreText.style.display = "inline";
    }
  }'

css <- "#more {display: none;}"

ui <- fluidPage(
  shinyjs::useShinyjs(),
  shinyjs::extendShinyjs(
    text = jscode,
    functions = c('myFunction')
  ),
  shinyjs::inlineCSS(css),
  uiOutput('test')
)

server <- function(input, output, session) {
  
  output$test <- renderUI({
    
    HTML('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>

<button onclick="myFunction()" id="myBtn">Read more</button>')
  })
}

shinyApp(ui, server)

提前致谢。

Answer 1

有一种可能：

library(shiny)

CSS <- "
.morecontent span {
    display: none;
}
.morelink {
    display: block;
}
"

JS <- '
$(document).ready(function() {
    // Configure/customize these variables.
    var showChar = 100;  // How many characters are shown by default
    var ellipsestext = "...";
    var moretext = "Show more >";
    var lesstext = "Show less";
    
    $(".more").each(function() {
        var content = $(this).html();
        if(content.length > showChar) {
            var c = content.substr(0, showChar);
            var h = content.substr(showChar, content.length - showChar);
            var html = c + "<span class=\\"moreellipses\\">" + ellipsestext 
              + "&nbsp;</span><span class=\\"morecontent\\"><span>" + h 
              + "</span>&nbsp;&nbsp;<a href=\\"\\" class=\\"morelink\\">" 
              + moretext + "</a></span>";
            $(this).html(html);
        }
    });
 
    $(".morelink").click(function(){
        if($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });
});
'

ui <- fluidPage(
  tags$head(
    tags$style(HTML(CSS)), 
    tags$script(HTML(JS))
  ),
  
  tags$span(
    class = "more",
    "Lorem ipsum dolor sit amet, consectetur adipisicing 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."
  )
  
)

server <- function(input, output){}

shinyApp(ui, server)

来源：codepen.io/maxds/pen/WNrvZY

Answer 2

如果你想避免 JS，你可以在 HTML.

中使用 details 和 summary 标签

闪亮的例子

这是一个仅使用 Shiny-code 实现的小示例：

library(shiny)

ui <- fluidPage(

    tags$p("Some information"),
    tags$details(
        tags$summary("Read more"),
        "More information"
    ) 
    
)

server <- function(input, output) {}

shinyApp(ui = ui, server = server)

HTML 例子

如果你想直接使用 HTML，你可以在 Shiny 中的 HTML() 函数内将其添加到你的服务器：

<p>Some information</p>
<details>
  <summary>Read more</summary>
  More information
</details>

如何在 R Shiny 中为长文本添加 'Read more' 和 'Read less' 功能？

How can I add 'Read more' and 'Read less' functionality for long text in R Shiny?

html

javascript

r

shiny

闪亮的例子

HTML 例子