yang-tang / shinyjqui Goto Github PK

View Code? Open in Web Editor NEW

269.0 10.0 32.0 8.18 MB

jQuery UI Interactions and Effects for Shiny

Home Page: https://yang-tang.github.io/shinyjqui/

License: Other

R 43.74% JavaScript 16.42% HTML 39.84%

r shiny jquery-ui

shinyjqui's People

Contributors

Stargazers

Watchers

shinyjqui's Issues

From Dest back to Source?

Firstly thank you for this wonderful widget it's awesome!!

I'm making a ShinyApp where I'd like to use two sources for a single dest, but I want to add limitations to the dest that it only accepts one input from ROWS and one from COLUMNS. Can you point me to where in the JS script I can write this modification?

ui <- fluidPage(
  orderInput('source', 'ROWS', items = c("A", "B", C"),
             as_source = TRUE, connect = 'dest'),
  orderInput('source', 'COLUMNS', items = c("D", "E", F"),
             as_source = TRUE, connect = 'dest'),
  orderInput('dest', 'Dest', items = NULL, placeholder = 'Drag items here...'),
  verbatimTextOutput('order')
)

server <- function(input, output) {
  output$order <- renderPrint({ print(input$dest_order) })
}

shinyApp(ui, server)

Thanks again!!

Limit which parts of an object trigger a draggable or sortable event

Hello Yang-Tang,

first of all, thank you for developing this fascinating package for R. This is more a question than an issue, but it seemed the best way to reach you. I have tried to combine zoomable ggplots with jqui_sortable, and I was wondering it there is a way to make jqui only work when the mouse click is in a part of the div (i.e. the top or edges) and not in other parts (i.e. when the mouse is over the plot that is inside the div, in order to allow both the ggplot 'brush' to function, as well as the jqui_sortable.

Sincerely,

Mark

Minify shinyjqui.js?

As a nice to have, it might be worth it to compress/minify the shinyjqui.js file? I ran it through JSCompress and got a 6kb reduction is file size.

Hoping for some help

Hi There,
I've been trying to get a version of your orderInput function going, where you can select multiple items and drag them to a specific div. The sort order is not important.

I'm failing somewhat as I don't understand how selectable and draggable are meant to work together. Would you happen to have an example of how to get selectable, draggable and droppable work together.

The client side javascript is mostly what is catching me out.

Thanks in advance and hoping you can.

_ PC

Scrollbar in Selectinputs not working with draggable modal

When trying to scroll through the options in a draggable modal, the modal is moved instead of the options scrolled (the click is highjacked by shinyjqui):

library(shiny)
library(shinyjqui)

ui <- fluidPage()

server <- function(input, output){
    showModal(
      jqui_draggabled(
        modalDialog(
          selectInput("choose", "Choose", choices = 1:10)
      )
     )
    )
}

shinyApp(ui = ui, server = server)

Bug: jqui_sortable doesn't return its order when it is rendered dynamically and there is an orderInput on the page

That's a bit of a complicated title, I know!

Here is an example of what I mean: where there is a jqui_sortable and an orderInput together in the UI, it is ok:

library(shiny)

ui <- fluidPage(
  jqui_sortable(tags$ul(
    id = 'lst',
    tags$li('A'),
    tags$li('B'),
    tags$li('C')
  )),
  orderInput("ls2", "", c("A","B"))
)

server <- function(input, output, session) {
  observe({
    cat(str(input$lst_order))
  })
}

shinyApp(ui, server)

As you can see, the order of the sortable elements gets printed to the console.

However, if the jqui_sortable is rendered dynamically (either with a uiOutput+renderUI or with insertUI()), and there is an orderInput on the page, then the order of the sortables doesn't get returned.

library(shiny)

ui <- fluidPage(
  uiOutput("foo"),
  orderInput("ls2", "", c("A","B"))
)

server <- function(input, output, session) {
  output$foo <- renderUI({
    jqui_sortable(tags$ul(
      id = 'lst',
      tags$li('A'),
      tags$li('B'),
      tags$li('C')
    ))
  })
  observe({
    cat(str(input$lst_order))
  })
}

shinyApp(ui, server)

Now the output in the console is NULL and the order isn't saved.

If you remove the orderInput from the UI, then it will work again.

Issue with jqui_sortable and dynamic UI

I'm rendering multiple levels of uiOutput and plotOutput. Without the jqui_sortable code, it works fine.

However I'm not able to get the additional option of 'connectwith' to work with the columns as well.

Basic structure looks something like these:

uiOuput('plotUI')
- uiOutput('plot_col1') Multiple plots with names plot_col1, plot_col2 etc.
  - plotOutput('time_plot_1_1') 1st Number is the column, 2nd is the position of plot in column

Here is a minimal example with the bug.

library(shiny)
library(ggplot2)
library(shinyjqui)

ui <- fluidPage(
  uiOutput("plotUI")
)

server <- function(input, output) {
  df <- data.frame('Time' = c(1,2,3,4,5), 'Intensity' = c(2,4,6,8,10))
  
  uiCount <- 5
  colCount <- 3
  
  original_min <- 2
  original_max <- 8
  
  output$plotUI <- renderUI({
    plot_cols <- lapply(1:colCount, function(i) column(4, uiOutput(paste0("plot_col", i))))
    
    do.call(tagList, plot_cols)
  })
  
  observe({
    lapply(1:colCount, function(i) {
      
      output[[paste0("plot_col", i)]] <- renderUI({
        plot_output_list <- lapply(1:uiCount, function(j) plotOutput(paste0("time_plot_", i, '_', j), height = 100))
        
        do.call(tagList, plot_output_list)
      })
      
      lapply(1:uiCount, function(j) {
        output[[paste0("time_plot_", i, '_', j)]] <- renderPlot({
          ggplot() + geom_line(data = df, aes(x = `Time`, y = `Intensity`)) +
            geom_rect(aes(xmin = original_min, xmax = original_max, ymin = -Inf, ymax = Inf), alpha = 0.1, fill = "blue") +
            ylab("Value") + xlab("t")
        })
      })
      
      # Change this to T to debug the jqui part
      if (F) {
        jqui_sortable(paste0('#plot_col', i), options = list(
          items = "div",
          connectWith = sapply(1:colCount, function(j) paste0('#plot_col', j))
        ))
      }
    })
  })
}

shinyApp(ui, server)

Sortability for multiple elements (e.g. in multiple columns and rows)

I am trying to have something like:
https://jsfiddle.net/ramnathv/1064q7jm/?utm_source=website&utm_medium=embed&utm_campaign=1064q7jm
in shiny.

My attempts:
If i try to make two fluidRows then only the rows are draggable. So i tried to put them in one row (like in the fiddle. What is very odd: The closest i got by making an error (see the two divs with same id). When i remove one of them, i cant move the four elements seperately.

ui <- bootstrapPage(
    tags$style(".placeholder {
    border: 5px solid green;
    background-color: yellow;
    -webkit-box-shadow: 0px 0px 10px #888;
    -moz-box-shadow: 0px 0px 10px #888;
    box-shadow: 0px 0px 10px #888;
}
.tile {
             height: 100px;
             }
             .grid {
             margin-top: 1em;
             }"),
    jqui_sortabled(div(id = "all",
                 fluidRow(
                   div(id = "all",
                    column(5,
                          plotOutput("plot1")
                   ),
                   column(5,
                          plotOutput("plot2")
                   ),
                   column(5,
                          plotOutput("plot3")
                   ),
                   column(5,
                          plotOutput("plot4")
                   )
                 )
                ),
                options = list(
                  tolerance = 'pointer',
                  revert = 'invalid',
                  placeholder = 'span5 well placeholder tile',
                  forceHelperSize = "true"
                )
      )
    )
)


server <- function(input, output){
  output$plot1 <- renderPlot(plot(1, main = 1))
  output$plot2 <- renderPlot(plot(2, main = 2))
  output$plot3 <- renderPlot(plot(3, main = 3))
  output$plot4 <- renderPlot(plot(4, main = 4))
}
shinyApp(ui, server)

Multiple choice of orderInput items

Is it possible multiple choice of orderInput items?

clarify license

We're a little bit confused concerning the licensing situation of shinyjqui: CRAN mentions an MIT license, but this repo includes no such information.

We obviously want to do right by the package author and be sure we're not using this in our own software without appropriate license.

Thanks!

OrderInput returns the items and then NULL

Instead of just the items, orderInput returns the items and NULL. Smalles working example:

library(shiny)
library(shinyjqui)

shinyApp(
ui = fluidPage(
orderInput('ns', 'Numbers', items = c("A", "B", "C"),
as_source = FALSE, width="100%", item_class="primary", placeholder="Numeric variables"),
actionButton("save", "Save")
),
server = function(input, output) {
vals <- reactiveValues(v=NULL)
observeEvent(input$save, {vals$v <- input$ns_order
print(str(vals$v))
})
}
)

Error in callback() - attempt to apply a non-function

Thanks for the great package:
Lately, I run into the following problem:

> library(shiny)
> library(shinyjqui)
> library(ggplot2)
> library(highcharter)
> ui <- fluidPage(
+   jqui_resizable(plotOutput('gg', width = '200px', height = '200px'))
+ )
Error in callback() : attempt to apply non-function

Session-info:

> sessionInfo()
R version 3.4.3 (2017-11-30)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows >= 8 x64 (build 9200)

Matrix products: default

locale:
[1] LC_COLLATE=German_Germany.1252  LC_CTYPE=German_Germany.1252   
[3] LC_MONETARY=German_Germany.1252 LC_NUMERIC=C                   
[5] LC_TIME=German_Germany.1252    

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] highcharter_0.5.0 ggplot2_2.2.1     shinyjqui_0.2.0   shiny_1.0.5       MASS_7.3-47      

loaded via a namespace (and not attached):
 [1] Rcpp_0.12.13        pillar_1.2.1        compiler_3.4.3      plyr_1.8.4         
 [5] bindr_0.1           xts_0.10-1          tools_3.4.3         digest_0.6.15      
 [9] lubridate_1.7.1     jsonlite_1.5        tibble_1.4.2        gtable_0.2.0       
[13] nlme_3.1-131        lattice_0.20-35     pkgconfig_2.0.1     rlang_0.2.0        
[17] igraph_1.1.2        psych_1.8.4         curl_3.1            parallel_3.4.3     
[21] bindrcpp_0.2        stringr_1.3.0       dplyr_0.7.4         htmlwidgets_1.0    
[25] grid_3.4.3          data.table_1.10.4-3 glue_1.2.0          R6_2.2.2           
[29] foreign_0.8-69      TTR_0.23-2          tidyr_0.8.0         purrr_0.2.4        
[33] reshape2_1.4.2      magrittr_1.5        scales_0.5.0        htmltools_0.3.6    
[37] rlist_0.4.6.1       quantmod_0.4-12     assertthat_0.2.0    mnormt_1.5-5       
[41] mime_0.5            xtable_1.8-2        colorspace_1.3-2    httpuv_1.3.5       
[45] stringi_1.1.6       lazyeval_0.2.0      munsell_0.4.3       broom_0.4.4        
[49] zoo_1.8-0

orderInput for Plots

Hi, is there a way to use orderInput for Plots?

I alredy know the "jqui_sortable" but this only allows sorting in the same *_order$id.
How do I get the the same functionality like orderInput where I can have "N" number of plots on the left and drag them to "M" number of plots on the right.
The final result should 2 Ordered lists similar to the orderInput function.

Question: Getting `orderInput()` to position vertical and add from bottom (like stack).

orderInput() tends to arrange all its blocks in horizontal manner increasing from left to right. I was wondering whether there is a solution to add style that enables all the blocks to stack vertically. So as I submit more blocks it will begin to increase upwards to some maximum limit. Here is an example code that enables me to add blocks. Please help.


itemsList<-c('one','two','three','four')


server <- function(input, output) {
  
  
    output$sort1<-renderUI({
         orderInput(itemsList[1], 'one', items = items()$one,
                    connect= itemsList[itemsList!='items1'], item_class = 'info')
    })
    
  output$sort2<-renderUI({
    orderInput(itemsList[2], 'two', items = items()[['two']],
               connect =itemsList[itemsList!='items2'], item_class = 'primary')
  })
  

  items<-eventReactive(
    input$submit,{
      
      obj<-list(
        'one'=input$one_order,
        'two'=input$two_order
      )
      
      if(input$numberIn==1){
        obj$one<-c(obj$one,input$numberIn)
      }else {
        obj$two<-c(obj$two,input$numberIn)
      }
   
      return(
        obj
        )
    }
  )


}

ui<-fluidPage(

  sliderInput("numberIn", "Score:",min = 1, max = 7,value = 4),
  actionButton("submit", "Submit"),

  
  uiOutput('sort1'),
  uiOutput('sort2')
)

shinyApp(ui, server)

flexdashboard support (runtime: shiny & shiny_prendered)

Currently trying to use shinyjqui within a flexdashboard with runtime shiny and shiny_prerendered. Using the same code in the selectabletableoutput code it appears this does not work.

---
title: "reprex"
output: 
    flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: fill
    source_code: embed
runtime: shiny_prerendered
---

```{r global, include=FALSE}
library(flexdashboard)
library(shinyjqui)
```


```{r context="server"}
output$selected_context <- renderPrint({
  cat("Selected:\n")
   input$tbl_selected_context
 })

output$selected_start <- renderPrint({
    cat("Selected:\n")
    input$tbl_selected_start
  })

output$selected_render <- renderPrint({
    cat("Selected:\n")
    input$tbl_selected_render
  })

  output$tbl <- renderTable(head(mtcars), rownames = TRUE)
  ```


  Row 
  ----

  ### Table

  ```{r}
   selectableTableOutput("tbl", selection_mode = "cell")
  ```

  ### Context=Data

      ```{r}
  verbatimTextOutput("selected_context")
     ```


   Row 
   ----

   ### Context=sever-start

   ```{r}
   verbatimTextOutput("selected_start")
   ```


   ### Context=render

   ```{r}
   verbatimTextOutput("selected_render")
   ```

shinyjqui in mobile devices

I'm using shinyjqui for a shinyapp and work fine if I enter from a desktop but if enter from a mobile device either a tablet or a cellphone features like orderInput won't work. Is there any way to use the draggable functionality in mobile device with this package?

Appending Custom JavaScript to jqui_selectable

Hi,

I really like this library and have been working on adding it to one of my projects. I want to be able to select elements of type 'checkbox' then toggle the value "checked" to true or false. Would appreciate any advice on adding custom JS actions to my code.

I have a uiOutput("chk_boxes") element in my ui.R file that is linked to the following renderUI on the server side:

#variable df is a 6x8 dataframe

      output$chk_boxes <- renderUI({
          column(1, checkboxGroupInput("pc1", "Col 1", choices=as.list(df[1]))),
          column(1, checkboxGroupInput("pc2", "Col 2", choices=as.list(df[2]))),
          column(1, checkboxGroupInput("pc3", "Col 3", choices=as.list(df[3]))), 
          column(1, checkboxGroupInput("pc4", "Col 4", choices=as.list(df[4]))),
          column(1, checkboxGroupInput("pc5", "Col 5", choices=as.list(df[5]))),
          column(1, checkboxGroupInput("pc6", "Col 6", choices=as.list(df[6]))),
      })

#remove selected elements that are not of type "checkbox"
#if attribute "checked" is true, change to false. If attribute is false, change to true

  shiny_opt = list(
    selected = list(
               select = JS('function(event, item){
                            if(item.attr("type") == "checkbox"){
                               if(item.attr("checked") == true){
                                    item.attr("checked", false);
                               }else{
                                item.attr("checked", true);
                            }}
                         }')
    ))

  jqui_selectable('#chk_boxes', options=list(
    shiny= shiny_opt
  ))

Am I doing this correctly? When I implement the jqui_selectabled example from the documentation,it selects all checkboxes, the 'checkboxGroupInput' element, and the 'renderUI' element and highlights them. I need it to filter out the 'checkboxGroupInput' and 'renderUI' elements and toggle the value of "checked" instead of highlighting the elements. I also want the changes to be permanent (whereas in your example the highlighted portion goes away if you click on something else).

Making resizabled and draggabled work together

Hi!

First of all, thanks for a great package which have helped me a lot! Cool features.
I'm currently struggling to get jqui_resizabled and jqui_resizabled to work together correctly.
The problem is that if I drag the object the resizable button/icon doesn't follow along.

Here is an example

library(shiny)
library(highcharter)

server <- function(input, output) {
  output$foo <- renderHighchart({
    hchart(mtcars, "scatter", hcaes(x = cyl, y = mpg))
  })
  output$position <- renderPrint({
    print(input$foo_position)
  })
}
ui <- fluidPage(
  verbatimTextOutput('position'),
  jqui_resizabled(jqui_draggabled(highchartOutput('foo', width = '800px', height = '800px')))
)

shinyApp(ui, server)

Is there a way to solve this problem?

Cheers

Feature Request: updateOrderInput

It would be nice to have an updateOrderInput function for orderInput to order the items to the initial value for example or change the item_class / connect / etc..

This small example would reorder the items to the original values.

library(shiny)
library(shinyjqui)

ui <- fluidPage(
  orderInput('source', 'Source', items = LETTERS[1:5], as_source = F),
  verbatimTextOutput('order'),
  actionButton("update", "Update to initial order")
)

server <- function(input, output, session) {
  output$order <- renderPrint({ 
    print(input$source_order) 
  })
  observeEvent(input$update, {
    # updateOrderInput(session, "source", items = LETTERS[1:5])
  })
}

shinyApp(ui, server)

Button appearance in orderInput

Hi,
I just came across this great package and I started playing around with orderInput.
Is there a way to influence the appearance and information linked to the single buttons of the orderInput - besides changing the color for all buttons with item_class?
I'd like to add an id/color/icon argument for every item like here.

Kind regards

OrderInputs within DT cells

Hello,

I'm new to this and am having a problem placing a single orderInput into a DT cell and connecting with other orderInput in cells of the same column. My goal is to make each column cell dragable/sortable within the column. I can't figure out how to connect the orderInputs.

I'm noticing the orderInputs' html within the DT is different from orderInputs I would just generate in the UI. Any guidance on what I'm missing here?

Bests,
Tyler

library(shiny)
library(shinyjqui)

ui <- shinyUI(
  fluidPage(
    h2('Reorder'),
    DT::dataTableOutput('mytable')
  )
)

server = shinyServer(function(input, output, session) {
  
  data <- head(mtcars)
  
  # helper function for making inputboxes in a DT
  shinyInput = function(FUN, BrandID, stem, items, id,connect,  ...) { 
    unlist(lapply(seq_len(length(items)), function(x){
      as.character(FUN(inputId=paste(id, stem, BrandID[x], sep="_"), label = NULL, items=items[x],connect[-x], ...))
    }))
  } 
  
  # datatable with orderinputs
  output$mytable = DT::renderDataTable({
    x <- data.frame(
      sapply(1:ncol(data), function(x){
        shinyInput(FUN=shinyjqui::orderInput,
                   BrandID=as.character(rownames(data)), 
                   stem=names(data)[x], 
                   items=as.character(data[,x]),
                   id="OrdImp",
                   connect=paste("OrdImp", names(data)[x], as.character(rownames(data)), sep="_"),
                   as_source=T,
                   width="20%", 
                   item_class='primary')
      })
    )
    names(x) <- names(data)
    rownames(x) <- rownames(data)
    
    data.frame(x)
  }, server = T, escape = F, selection="none", filter="none", options = list( 
    dom='t', ordering=F, paging=F,
    preDrawCallback = JS('function() {Shiny.unbindAll(this.api().table().node());}'), 
    drawCallback = JS('function() {Shiny.bindAll(this.api().table().node());} ') 
  ))
}
)

shinyApp(ui = ui, server = server)

jqui_draggable breaks bstooltip messages

jqui_draggable breaks bstooltip messages it seems in the page/ space where an item is made dragable.

While building an app in two stages, I discovered a conflict when trying to combine the two parts, some research showed it was the interaction between bstooltips and jqui_draggable code in my app. I pasted a minimal example to show the problem.

using:

see the test code for the scenario here:
activate / disactivate the jqui lines of code to see the difference when hovering over buttons.

A second point: How come dragable doesn't work on actionButtons?


library("shiny")
library("shinyjqui")
library("shinyBS")
library("shinydashboard")
library("shinyjs")

shinyApp(

  ui = dashboardPage(title = "TestApp",
                     dashboardHeader(title = "TestApp"),
    dashboardSidebar(
      menuItem("Page1", tabName = "Tab1")), 
    
    dashboardBody(
      useShinyjs(),
      tabItems(
        tabItem( tabName = "Tab1",   
                 
                 
  h3("hello!"),
  actionButton("Click", "Click Me"),
  uiOutput("bstooltips")
  )))
  ),

  server =  function(input, output, session) {
    bsTooltip_Taglist <- tagList(
      bsTooltip(id = "Click", title = "This is a popup message", placement = "right", trigger = "hover", options= list(container = "body")),
      bsTooltip(id = "Dummybut", title = "This is a popup message", placement = "right", trigger = "hover", options= list(container = "body"))
      )

    bsTooltip_Taglist2 <- tagList(bsTooltip(id = "Dummybut", title = "This is a popup message", placement = "right", trigger = "hover", options= list(container = "body") ))
    
    output$popupmessage <- renderUI({  bsTooltip_Taglist2 })
    
    output$bstooltips <- renderUI({bsTooltip_Taglist})
    
    observeEvent(input$Click, {
      showModal(div(id="A_modal", modalDialog(
        inputId = "A_modaldialog",
        title = HTML('<span style="color:#339fff; font-size: 20px; font-weight:bold; font-family:sans-serif ">Modal Title<span>
                     <button type = "button" class="close" data-dismiss="modal" ">
                     <span style="color:#339fff; ">x <span>
                     </button> '),
        actionButton("Dummybut", "Dummybut"),
        uiOutput("popupmessage"),
        easyClose = TRUE,
        footer = NULL )))
      jqui_draggable(selector = '.modal-dialog')
      
    })
    
  #  jqui_draggable(selector = '#Click')  ### this line does: 1) not work on a button, and B) breaks the tooltip
    
    }
)

sessioninfo()
R version 3.4.3 (2017-11-30)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows >= 8 x64 (build 9200)

Matrix products: default

locale:
[1] LC_COLLATE=English_United States.1252 LC_CTYPE=English_United States.1252 LC_MONETARY=English_United States.1252 LC_NUMERIC=C
[5] LC_TIME=English_United States.1252

attached base packages:
[1] stats graphics grDevices utils datasets methods base

other attached packages:
[1] shinyjs_1.0 shinydashboard_0.6.1 shinyBS_0.61 shinyjqui_0.2.0 shiny_1.0.5

loaded via a namespace (and not attached):
[1] htmlwidgets_0.9 compiler_3.4.3 R6_2.2.2 htmltools_0.3.6 tools_3.4.3 Rcpp_0.12.14 jsonlite_1.5 digest_0.6.13 xtable_1.8-2 httpuv_1.3.5 mime_0.5

Get rid of "includeJqueryUI()" function

This is inspired by daattali/shinyjs#101 and rstudio/shiny#1424. The trick is to include assets in every ui functions and use insertUI() in every server functions.

Non-shiny use cases

Great work, this is a really nice package!

I'm curious, have you thought about how jqui_interaction() might work on the htmlwidgets and/or htmltools level? It would be nice if this sort of thing "just worked" outside of shiny. In particular, having resizable htmlwidgets would be really nice.

library(shinyjqui)
library(plotly)

qplot(1:10) %>% 
  ggplotly() %>% 
  jqui_resizable()

sortableRadioButtons/sortableCheckboxGroupInput do not work when inlined

It appears that when inlining these inputs the class of the input labels is changed to checkbox-inline/radio-inline, so they're not being picked up by the selector in the relevant functions.

e.g. the inline inputs are not sortable.

library(shiny)
library(shinyjqui)

ui <- fluidPage(
  sortableRadioButtons('test1', 'test', 1:3, inline = TRUE),
  sortableRadioButtons('test2', 'test', 1:3, inline = FALSE),
  sortableCheckboxGroupInput('test3', 'test', 1:3, inline = TRUE),
  sortableCheckboxGroupInput('test4', 'test', 1:3, inline = FALSE)
)

server <- function(input, output, session) {}

shinyApp(ui, server)

Because in sortableCheckboxGroupInput only .checkbox is selected, and likewise for the radioButtons.

  jqui_sortable(
    ui = shiny::checkboxGroupInput(
      inputId, label, choices, selected,
      inline, width, choiceNames,
      choiceValues
    ),
    options = list(items = ".checkbox", shiny = shiny_opt)
  )

Jquery.flowchart #featurerequest

Hi @Yang-Tang ,
congratulations for the very nice package, as a feature request I was wondering if you could integrate jquery.flowchart.js (https://github.com/sdrdis/jquery.flowchart) functionalities in shinyjqui. I think it would be a very useful improvement for the R community because nothing similar exists at the moment for building personalizable pipelines/processes in Shiny.
Thank you!
best

orderInput becoming inactive with dynamic source of inputs

Hi Yang,

Thank you for that amazing library, I absolutely love it.

I have an issue here, that I tried to solve with no result
I was trying to combine dynamic UI with orderInput, that is - number of tiles is based on selection from selectInput.

When app is started, orderInput has 1 empty tile and it works.
Then I want to update it by selecting another one from selectInput. It updates, but tiles are no longer draggable. It works only before the first update

I use something like that:
rv <- reactiveValues(prv=c(''),cur=c(''))
observeEvent(input$gn, {rv$cur <- input$gn; rv$prv<- unique(c(rv$prv, rv$cur))})
output$pool <- renderUI (orderInput('dndpool','Pool',items = rv$prv'))

Do you know what is the reason behind it? Is it possible to fix?

support input_dropped suffix

We (@verenakasztantowicz and I) are really excited about your package – fantastic work and thorough documentation!

We'd like to use shinyjqui for some drag-n-drop interaction where we can access (from within shiny) the id of the element being dropped on the drop target.

From what we can see from the documentation, you can currently only access via input$id_dragging

"The id of an acceptable element that is now dragging"

which is close, but no cigar.

Our understanding is that currently, you can't access something like input$id_dropped, which is what we'd need.

We're considering adding this, which seems possible via the shiny_opt route in your vignette.

Does that make sense to you, or are we missing something?

Would you be interested in a PR to that effect?

Feature request: make it work for DT datatable

This package is very useful, thanks for deveopling this. I wonder if this can work with DT::datatable?
If it's possible to move cells around in datatable that will be very interesting.

Dynamic item assigning to orderInput

I am trying to figure out how to make an orderInput use a dynamically assigned list for its items - basically if option 1 is selected, show list 1s items, and if option 2 is selected, show list 2s items.

Everything seems to work as it should when it first loads, but once you switch the lists issues come up. The orderInput object itself updates, but the _order values do not change, and the orderInput object seems to lose it's "sortability" in the process (can no longer drag/move to sort items).

Is there something I am missing? Is there a non-orderInput route that could achieve this end result?

Below is some example code showing the issue:

library(shiny)
library(shinyjqui)

ui <- fluidPage(
    radioButtons(
        inputId = "test_list",
        label = "Item List Selection",
        choices = c("List1", "List2"),
        selected = "List1"
    ),
    uiOutput("test_sort"),
    br(),
    verbatimTextOutput('sort_order')
)

server <- function(input, output, session) {
    output$test_sort <- renderUI({
        req(input$test_list)
        
        if (input$test_list == "List1") {
            item_list <- c("1", "2", "3", "4")
        } else if (input$test_list == "List2") {
            item_list <- c("A", "B", "C", "D")
        } else {
            item_list <- "Error"
        }
        
        orderInput(inputId = 'test_sort_list',
                   label = "Testing",
                   items = item_list,
                   width = "100%",
                   class = "ui-sortable"
        )
    })

    output$sort_order <- renderPrint({
        input$test_sort_list_order
    })
}

shinyApp(
    ui = ui, 
    server = server
)

console.logs in shinyjqui.js

This is not a bug, but I am wondering if we could ge rid of the console.logs in shinyjqui.js.

I am refering to the ones in line 105-110:

   console.log('===================');
    console.log('ELEMENTS: ');
    console.log($els);
    console.log('MSG: ');
    console.log(msg);
    console.log('===================');

Animation effects do not work in my shinyApp

Hi,
I want to add an animation effect but it does not work. I have tried the available example and it does not work either.

I don't know if I am using it the wrong way.

Thank you for your help!

How to make a sortable grid

Great package. I am playing around with sortable() and I'm trying to put elements in a NxN grid. What's the best way to do that? Thanks.

function doesn't work in shinyApp

i have been using new update of this package (0.3.1) with R(3.5.1).
it doesn't give me any error though but , the function doesn't seem to work .
if i switch to old version(0.3.0) with R(3.5.1) it gives me an error( Error:attempt to apply non-function)

warning: Error in callback: attempt to apply non-function 81: callback 80: shiny::insertUI 79: sendMsg 78: jqui_draggable

Bookmarking not working with insertUI

I have created an App that generates 3 plots, when user click on Add plot (using insertUI).

If you try to Add one plot and resize it, if you want to bookmark the app, the size and position are not correctly saved.

Im using the last shinyjqui version with R 3.3 and R 3.5 also in windows and linux, but noone works

Here is my app:

library(shiny)
library(shinyjqui)

ui <- function(request) {
fluidPage(
bookmarkButton(),
sidebarLayout(
actionButton("add", "Add Element"),
mainPanel(id = "content")
)
)
}

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

addItem <- function(id) {
insertUI(
selector = "#content",
where = "beforeEnd",
ui = tagList(
jqui_resizable(plotOutput(id))
)
)
}

observeEvent(input$add, {
id <- paste0("plot", input$add)
addItem(id)
})

output$plot1 <- renderPlot(
plot(c(3,2,2))
)

onRestore(function(state) {
for (i in seq_len(input$add)) {
id <- paste0("plot", i)
addItem(id)
}
})
jqui_bookmarking()
}

enableBookmarking("url")
shinyApp(ui, server)

Thanks
Jesús

Making resizabled and draggabled work with Shiny Bookmarking

Hi again,

Again, thanks for such a great package! I really love how the user is able to customise the layout using the resizabled and draggabled functions.

I was wondering if there is a way to make the resizabled and draggabled functions work with Shiny Bookmarking in such a way that the user can restore previous layout settings he/she made.

For example suppose the user changes the size and position of the plot in this small Shiny App

library(shiny)
library(highcharter)

server <- function(input, output, server) {
  output$foo <- renderHighchart({
    hchart(mtcars, "scatter", hcaes(x = cyl, y = mpg))
  })
  output$position <- renderPrint({
    print(input$foo_position)
  })
}
ui <- function(request){ fluidPage(
  bookmarkButton(),
  verbatimTextOutput('position'),
  jqui_resizabled(jqui_draggabled(highchartOutput('foo', width = '800px', height = '800px')))
)}

shinyApp(ui, server, enableBookmarking = "server") # Or use url instead!

I have no idea how this could be done, or if it possible at all.

Cheers

jqui_resizabled doesn't work with bsModal

Hello,

I've noticed that some people had draggable issue, I currently try resizable function with bsModal, any ideas on how to accomplish this using shinyjqui?

 library("shinyBS")
 library("shinyjqui")
 
 ui <- basicPage(
   jqui_resizabled(bsModal("modal", "foo", trigger = "", "bar")),
   htmlOutput("button_ui")
 )
 
 server = function(input, output, session) {
   output$button_ui <- renderUI({
     actionButton("button", "Show modal")
   })
   observeEvent(input$button, {
     toggleModal(session, "modal", "open")
   })
 }
 
 runApp(list(ui = ui, server = server))

Thanks for help

draggables not working in shiny modals

Hi,

draggabled is unfortunately not working when used with shiny modals. To be specific, upon the second opening of the modal, the modal is not draggable anymore. It is only draggable upon the first opening. Using jqui_draggable works only from the second time on (these are 2 defects).

library(shiny)

ui <- fluidPage(
  actionButton("show", "show")
)


server <- function(input, output) {
  observeEvent(input$show, {
    showModal(jqui_draggabled(modalDialog(
      title = "Somewhat important message",
      "This is a somewhat important message.",
      easyClose = TRUE
    )))
  })
}
shinyApp(ui, server)

Feature request: orderInput but then with tables

I have tried to create an example similar to the 'orderInput' example but then with tables (traditional HTML table or div based table). Thus, instead of moving one one item, I would like to move entire table rows from source to destination. I envision this to be something along the lines of adding a dataframe/tibble as the items argument.

The example, I mention in my in my text above:

server <- function(input, output) {
  output$order <- renderPrint({ print(input$dest_order) })
}

ui <- fluidPage(
  orderInput('source', 'Source', items = month.abb,
             as_source = TRUE, connect = 'dest'),
  orderInput('dest', 'Dest', items = NULL, placeholder = 'Drag items here...'),
  verbatimTextOutput('order')
)

shinyApp(ui, server)

Based on jQuery UI i have been able to make the following example that shows the dynamic. However, the original intention of the example was to use it as a drop-on from the first table to the second so that it would be possible to record who called a specific person.


  | <!DOCTYPE html>
-- | --
  | <html>
  | <head>
  | <meta charset="utf-8">
  | <title>Sortable: `put: []` demo</title>
  | <style id="tableLayout">
  | .legend .row:nth-of-type(odd) div {
  | background-color:antiquewhite;
  | }
  | .legend .row:nth-of-type(even) div {
  | background: #FFFFFF;
  | }
  |  
  | .rTable {
  | display: table;
  | width: 50%;
  | }
  | .rTableRow {
  | display: table-row;
  | }
  | .rTableHeading {
  | display: table-header-group;
  | background-color: #ddd;
  | }
  | .rTableHead {
  | display: table-cell;
  | padding: 3px 10px;
  | background-color: black;
  | color: white;
  | border: 0px solid #999999;
  | }
  | .rTableCell{
  | display: table-cell;
  | padding: 3px 10px;
  | border: 0px solid #999999;
  | }
  | .rTableHeading {
  | display: table-header-group;
  | background-color: #ddd;
  | font-weight: bold;
  | }
  | .rTableFoot {
  | display: table-footer-group;
  | font-weight: bold;
  | background-color: #ddd;
  | }
  | .rTableBody {
  | display: table-row-group;
  | }
  | </style>
  | <!-- Sortable.js -->
  | <script src="https://rubaxa.github.io/Sortable/Sortable.js">
  | <!--- <script src="Sortable.js"> -->
  | </script>
  |  
  |  
  | </head>
  | <body>
  |  
  |  
  |  
  | <h2>Callers</h2>
  | <div class="rTable">
  |  
  | <div class="rTableRow">
  | <span class="rTableHead"><strong>Caller</strong></span>
  | </div>
  |  
  | <div id="callers" class="rTableBody list-group">
  |  
  | <div class="rTableRow" class=" list-group-item">
  | <span class="rTableCell">Jerry</span>
  | </div>
  |  
  | <div class="rTableRow" class=" list-group-item">
  | <span class="rTableCell">Donald</span>
  | </div>
  |  
  |  
  | </div>
  | </div>
  |  
  |  
  | <hr />
  |  
  |  
  | <h2>Calls</h2>
  | <div class="rTable">
  |  
  | <div class="rTableRow">
  | <span class="rTableHead"><strong>Name</strong></span>
  | <span class="rTableHead"><strong>Telephone</strong></span>
  | <span class="rTableHead"><strong>Called by</strong></span>
  | </div>
  |  
  | <div id="calls" class="rTableBody list-group">
  |  
  | <div class="rTableRow" class=" list-group-item">
  | <span class="rTableCell">John</span>
  | <span class="rTableCell"><a href="tel:0123456785">0123 456 785</a></span>
  | <span class="rTableCell">Jerry</span>
  | </div>
  |  
  | <div class="rTableRow" class=" list-group-item">
  | <span class="rTableCell">Fred</span>
  | <span class="rTableCell"><a href="tel:0123456785">0123 456 785</a></span>
  | <span class="rTableCell"></span>
  | </div>
  |  
  | <div class="rTableRow" class=" list-group-item">
  | <span class="rTableCell">Bill</span>
  | <span class="rTableCell"><a href="tel:0123456785">0123 456 785</a></span>
  | <span class="rTableCell"></span>
  | </div>
  |  
  |  
  | <div class="rTableRow" class=" list-group-item">
  | <span class="rTableCell">Freddy</span>
  | <span class="rTableCell"><a href="tel:9876532432">9876 532 432</a></span>
  | <span class="rTableCell"></span>
  | </div>
  |  
  | </div>
  | </div>
  |  
  |  
  |  
  | <script>
  | // rTable Simple list
  | Sortable.create(calls, {
  | animation: 150,
  | group: {
  | name: 'calls',
  | put: ['calledby']
  | }
  | });
  |  
  | // rTable Simple list Called
  | Sortable.create(callers, {
  | group: {
  | name: 'calledby',
  | pull: 'clone'
  | },
  | sort: false,
  | animation: 150
  | });
  |  
  |  
  | </script>
  |  
  | </body>
  | </html>
  |

orderInput() in renderUI() or insertUI() not working

First of all I really like the easy implementation of the 'drag-and-drop-style' in shiny. Great work!

I'm planning to add an orderInput() in my app but with reactive items based on other inputs.
The first rendering works fine, but as soon as it's being forced to re-render the orderable function stops working.

Example:

library(stringi)
library(shinyjqui)

server <- function(input, output) {
  output$order <- renderPrint({ print(input$source_order) })
  output$test <- renderUI({
    orderInput('source', 'Source', items = c(paste(input$BUT, paste(unlist(strsplit(stri_rand_lipsum(1, start_lipsum = F), " "))[1:10], collapse = " ")),
                                             paste(input$BUT, paste(unlist(strsplit(stri_rand_lipsum(1, start_lipsum = F), " "))[1:10], collapse = " ")),
                                             paste(input$BUT, paste(unlist(strsplit(stri_rand_lipsum(1, start_lipsum = F), " "))[1:10], collapse = " ")),
                                             paste(input$BUT, paste(unlist(strsplit(stri_rand_lipsum(1, start_lipsum = F), " "))[1:10], collapse = " ")),
                                             paste(input$BUT, paste(unlist(strsplit(stri_rand_lipsum(1, start_lipsum = F), " "))[1:10], collapse = " "))))
  })
  # test.vals <- reactiveValues()
  observeEvent(input$BUT,{
    insertUI(
      selector = '#BUTTON',
      where = 'afterEnd',
      ui = orderInput('source', 'Source', items = c(paste(input$BUT, paste(unlist(strsplit(stri_rand_lipsum(1, start_lipsum = F), " "))[1:10], collapse = " ")),
                                                        paste(input$BUT, paste(unlist(strsplit(stri_rand_lipsum(1, start_lipsum = F), " "))[1:10], collapse = " ")),
                                                        paste(input$BUT, paste(unlist(strsplit(stri_rand_lipsum(1, start_lipsum = F), " "))[1:10], collapse = " ")),
                                                        paste(input$BUT, paste(unlist(strsplit(stri_rand_lipsum(1, start_lipsum = F), " "))[1:10], collapse = " ")),
                                                        paste(input$BUT, paste(unlist(strsplit(stri_rand_lipsum(1, start_lipsum = F), " "))[1:10], collapse = " "))))
    )
    })
}

ui <- fluidPage(
  actionButton('BUTTON','insertUI'),
  uiOutput('test'),
  verbatimTextOutput('order')
)

shinyApp(ui, server)

Multiple shiny apps on the same page - getting rid of the gap

I'm planning to use your great package to create some sentence building exercises for linguistics students using R markdown. However, I have run into an issue where, if I have multiple shiny apps on the same page, there is a large gap between them (shinyjgui_example.zip). I was wondering if you have any tips / suggestions on how to get rid of this? Many thanks.

orderInput and renderUI

HI there,
Really impressed with the functionality in your package, and how easy it makes it to add draggable and sortable functionality.

I am trying to use orderInput which is rendered using a renderUI call, with items being populated by an eventReactive function.

When I re-render the object (after eventReactive) updates, none of the rendered items are draggable or sortable.

Is there a specific way to execute this or is it something that is not possible?

Thanks in advance.

hide div() from start

Hi folks, really great shiny package :) Do you know how to hide a div() element in the UI from the start on and show it later by jqui_show (like hidden() from shinyjs)?

Thanks in advance,
Simon

resizable and toggle does not work in 0.3.1

Hi,
after update via CRAN from 0.3.0 to 0.3.1 functions jqui_resizable and jqui_toggle stopped working. There is no error in R console but you cannot resize element and toggle visibility.

The code below works with 0.3.0 but not with 0.3.1 [R version 3.5.0, shiny_1.1.0]

library(shiny)
library(shinyjqui)

# Define UI for application that draws a histogram
ui <- fluidPage(
   
   # Application title
   titlePanel("Old Faithful Geyser Data"),
   
   # Sidebar with a slider input for number of bins 
   sidebarLayout(
      sidebarPanel(
         sliderInput("bins",
                     "Number of bins:",
                     min = 1,
                     max = 50,
                     value = 30),
         actionButton(inputId = "toggle", label = "hide")
      ),
      
      # Show a plot of the generated distribution
      mainPanel(
        jqui_resizable(plotOutput("distPlot")),
        uiOutput("jqui")
      )
   )
)

# Define server logic required to draw a histogram
server <- function(input, output) {
   
   output$distPlot <- renderPlot({
      # generate bins based on input$bins from ui.R
      x    <- faithful[, 2] 
      bins <- seq(min(x), max(x), length.out = input$bins + 1)
      
      # draw the histogram with the specified number of bins
      hist(x, breaks = bins, col = 'darkgray', border = 'white')
   })
   
   output$jqui <- renderUI({
     ppp <- input$distPlot_size
     tags$small(paste0("current size: ",ppp$width, " x ", ppp$height))
   })
   
   observeEvent(input$toggle, {
     jqui_toggle("#bins", effect=NULL) 
   })
}

# Run the application 
shinyApp(ui = ui, server = server)

jqui_sortable for htmlOutput

Hi I've encountered a problem with jqui_sortable as soon as the output is a generated HTML.

ui <- fluidPage(
  verbatimTextOutput('lposition'),verbatimTextOutput('rposition'),
  numericInput("in", "In:",10),
  fluidRow(
    column(
      width = 5,
      "Left column",
  jqui_sortable(
        div(
          id = "left",
          style = "border: thin solid black; min-height: 600px",
          htmlOutput("htm_info")
        ), 
        # contect the left column to the right column so that elements on the
        # left can be dragged to the right
        options = list(connectWith = "#right")
      )
    ),
    column(
      width = 5,
      "Right column",
      jqui_sortable(
        div(
          id = "right",
          style = "border: thin solid black; min-height: 600px"
        ),
        # contect the right column to the left column so that elements on the
        # right can be dragged to the left
        options = list(connectWith = "#left")
      )
    )
  )
)

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

  output$htm_info <- reactive({
      df <- UDFfunction(input$in)
      htm_info <- paste(paste0('<img id="',df$Hash,'" src="',df$Url,'?width=430"/>'),collapse='\n')
      return(HTML(htm_info))
  })
  
  output$rposition <- renderPrint({
    print(input$right_order$id)
  })
  
  output$lposition <- renderPrint({
    print(input$left_order$id)
  })

}

an example htm_info will look like this:

htm_info <- c("<img id=\"deee3623010c71fc\" src=\"https://s-ec.bstatic.com/images/hotel/max1280x900/468/46871800.jpg\"/>\n<img id=\"00000002dfffffff\" src=\"https://pix10.agoda.net/hotelImages/489/489266/489266_17032920250052009110.jpg?s=1024x768\"/>\n<img id=\"0040c3e13c7e7f7e\" src=\"https://s-ec.bstatic.com/images/hotel/max1024x768/681/68184730.jpg\"/>")

Error in session$sendInsertUI(selector = selector, multiple = multiple, attempt to apply non-function

I am quite interested in using the shinyjqui package to build some cool GUIs. Anyway, before I start using the package for the ideas I have in mind I am trying to get the simple stuff going. But something odd seems to happen.

When I am using the very basic example from the homepage:

# load packages
library(shiny)
library(shinyjqui)
library(ggplot2)
library(highcharter)

server <- function(input, output) {}

ui <- fluidPage(
  jqui_draggable(fileInput('file', 'File'))
)

shinyApp(ui, server)

And when I try to run this, I get the following error code (and no working example):

Error in session$sendInsertUI(selector = selector, multiple = multiple, :
attempt to apply non-function

I am using the most recent R release: R version 3.5.0 (2018-04-23).

Appreciate if anybody can explain what it means and how I can mitigate the issue .

How to load positions from a text file?

Hi, I'm really enjoying the package, thank you!

I have a small dilemma and not an issue, I would like to save the positions of the elements after drag into a text file which should enable the state save without the bookmarks. How can I achieve that? I don't see it in the code readily available?

As positions already get pushed in the server side and can be access via input$foo_position I was wondering if I can use this info to restore it across sessions
How can I put the $top and $left back into the app by load or some other function. Is there an option that I am overlooking

Cheers,

Pork Chop

space between divs changes after sortable

Hi Yang-Tang,

I managed to make nice use of sortable with the help you provided, but I ran into 1 little issue / buggy behaviour with the app. I wrote a minimalistic example to illustrate it. After sorting the div's in the app below, the space between them changes, causing a distorted outlining of the div's
I can't figure out what is causing it though and would appreciate it if you can have a look at what causes this.

`require('shiny')
require('shinyjqui')

ui <- fluidPage(
div(uiOutput('multiobject'), style = 'width: 1200px')
)

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

output$multiobject <- renderUI({
plot_output_list <- list();

for(i in 1:8) {
plot_output_list <- append(plot_output_list,list(
wellPanel(
actionButton('drag', label = icon('hand-point-up'), style = 'float: right; color: #339fff;'),
style = 'border-color:#339fff; border-width:1px; background-color: #fff;display: inline-block; margin:2px; width:290px; height:250px')
))
}
jqui_sortable(do.call(function(...) div(id="allplots", ...), plot_output_list), options = list(handle = '#drag', cancel = ""))

})
}

shinyApp(ui, server)`

How to undo / remove a draged element for orderInput?

Hi,

I'm wondering if user make a mistake on dragging from source to dest, how does s/he fix the issue without refresh the application?

Help to make shiny modals draggable

First I want to thank you for creating such a great package! There are a lot of useful widgets that I plan on incorporating in my future shiny applications. One idea I had was actually brought up in issue 1698 in the shiny issue tracker about making the modal dialogs draggable. I'm thinking this could be accomplished using shinyjqui and either the draggabled or draggable functions, but I can't seem to get it to work. See below for an simple app I made to try out a solution. The aforementioned issue linked this SO post which has a working solution with javascript, so it seems like it is possible and I'm just not using the package functions correctly. Any ideas on how to accomplish this using shinyjqui?

library(shiny)
library(shinyjqui)

ui <- fluidPage(
   includeJqueryUI(),
   titlePanel("Old Faithful Geyser Data"),
   sidebarLayout(
      sidebarPanel(
         actionButton("show", "Show modal dialog")
      ),
      mainPanel(
        h1("hello")
      )
   )
)

server <- function(input, output, session) {
   observeEvent(input$show, {
     showModal(modalDialog(
       title = "Important message",
       "This is an important message!",
       easyClose = TRUE
     ))
   })
   jqui_draggable(selector = '#modal-content')
}

shinyApp(ui = ui, server = server)

yang-tang / shinyjqui Goto Github PK

shinyjqui's People

Contributors

Stargazers

Watchers

Forkers

shinyjqui's Issues

Here is my app:

Recommend Projects

Recommend Topics

Recommend Org