Add example to README of rich content in rank_list

[colearendt]

It took me a little while to understand enough to build a (silly) example, so I think it would be worthwhile showing how to build rich content inside of a rank_list! (Probably with a more interesting example)

library(shiny)
library(sortable)

ui <- fluidPage(

    titlePanel("Old Faithful Geyser Data"),

    fluidRow(
        bucket_list(
            header = "Hello",
            add_rank_list(
                text = "List 1",
                input_id = "list_1",
                labels = c(
                    list(tags$div(tags$b("Hi"), tags$br(), tags$b("Two"))), 
                    "Hello"
                    )
            ),
            add_rank_list(
                text = "List 2",
                input_id = "list_2",
                labels = NULL
            ),
            add_rank_list(
                text = "List 3",
                input_id = "list_3",
                labels = c("two")
            ),
            add_rank_list(
                text = "List 4",
                input_id = "list_4",
                labels = c("three")
            )
        )
    ),
    fluidRow(textOutput("presentation"))
)

server <- function(input, output) {
  output$presentation <- renderText(
      capture.output(str(input$list_1))
  )
}

shinyApp(ui = ui, server = server)

However, I will say that the Shiny input does not seem to be initialized properly at the start (requires moving something to get the inputs working), and it would be nice to have some hooks into what is returned. I.e. if I could define my own ID for each label and have that returned.

After moving something:

chr [1:2] "Hi \nTwo\n" "Hello"

(I believe this is because of the following, which does not fire until sorted:)

sortable/R/rank_list.R

Line 81 in ef56c4c

sortable_options(onSort = sortable_js_capture_input(input_id)),

However, if you want a "hidden" ID or something, you can use font-size: 0 as a trick 😄

add_rank_list(
                text = "List 1",
                input_id = "list_1",
                labels = c(
                    list(tags$div(tags$span(id = "test", "test", style = "font-size: 0"), tags$b("Hi"), tags$br(), tags$b("Two"))), 
                    "Hello"
                    )
            )

# results in:
chr [1:2] "test Hi \nTwo\n" "Hello"

[colearendt]

NOTE: This is where the values are coerced to text, and could be extended / replaced by a user (like me) 😄

sortable/R/sortable_js_capture_input.R

Lines 14 to 27 in 8251b35

	sortable_js_capture_input <- function(input_id) {
	inner_text <- "
	$.map(this.el.children, function(child){return child.innerText})
	"
	js_text <- "function(evt){{
	if (typeof Shiny !== \"undefined\") {
	Shiny.onInputChange(\"%s\", %s)
	}
	}}"
	js <- sprintf(js_text, input_id, inner_text)
	htmlwidgets::JS(js)
	}