0
76
Vistas¿Cómo puedo agregar la funcionalidad 'Leer más' y 'Leer menos' para texto largo en R Shiny?
Estoy tratando de agregar la funcionalidad 'Leer más' o 'Leer menos' para texto largo en mi aplicación Shiny. Mi conocimiento relacionado con JS/html es limitado, por lo que si hay alguna ayuda con respecto a la comunicación de información entre shiny, js o html, sería útil.
Me refería a este tutorial pero no pude entender cómo implementar lo mismo en la aplicación brillante.
Estaba intentando con el siguiente código.
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)Gracias por adelantado.
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Aquí hay una posibilidad:
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 + " </span><span class=\\\"morecontent\\\"><span>" + h + "</span> <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) 
fuente: codepen.io/maxds/pen/WNrvZY
·
Juan Pablo Isaza
Denunciar
0
Si desea evitar JS, puede usar los details y las etiquetas de summary en HTML.
ejemplo brillante
Aquí hay un pequeño ejemplo implementado usando solo 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)ejemplo HTML
Si desea usar HTML directamente, puede agregar esto a su servidor dentro de la función HTML() en Shiny:
<p>Some information</p> <details> <summary>Read more</summary> More information </details>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta