如何在 R Shiny 中为长文本添加“阅读更多”和“阅读更少”功能？

Question

我正在尝试在我的 Shiny 应用程序中为长文本添加“阅读更多”或“阅读更少”功能。我与 JS/ html 相关的知识有限，因此如果有任何有关闪亮、js 或 html 之间通信信息的帮助，那将会有所帮助。

我参考了本教程，但无法理解如何在闪亮的应用程序中实现相同的功能。

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

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