shinyjqui (version 0.3.3)

Interactions: Mouse interactions

Description

Attach mouse-based interactions to shiny html tags and input/output widgets, and provide ways to manipulate them. The interactions include:

• draggable: Allow elements to be moved using the mouse.

• droppable: Create targets for draggable elements.

• resizable: Change the size of an element using the mouse.

• selectable: Use the mouse to select elements, individually or in a group.

• sortable: Reorder elements in a list or grid using the mouse.

Usage

jqui_draggabled(tag, options = NULL)
jqui_droppabled(tag, options = NULL)
jqui_resizabled(tag, options = NULL)
jqui_selectabled(tag, options = NULL)
jqui_sortabled(tag, options = NULL)
jqui_draggable(
  ui,
  operation = c("enable", "disable", "destroy", "save", "load"),
  options = NULL,
  selector = NULL,
  switch = NULL
)
jqui_droppable(
  ui,
  operation = c("enable", "disable", "destroy", "save", "load"),
  options = NULL,
  selector = NULL,
  switch = NULL
)
jqui_resizable(
  ui,
  operation = c("enable", "disable", "destroy", "save", "load"),
  options = NULL,
  selector = NULL,
  switch = NULL
)
jqui_selectable(
  ui,
  operation = c("enable", "disable", "destroy", "save", "load"),
  options = NULL,
  selector = NULL,
  switch = NULL
)
jqui_sortable(
  ui,
  operation = c("enable", "disable", "destroy", "save", "load"),
  options = NULL,
  selector = NULL,
  switch = NULL
)

Arguments

options

A list of interaction_specific_options. Ignored when operation is set as destroy. This parameter also accept a shiny option that controls the shiny input value returned from the element. See Details.

ui

The target ui element(s) to be manipulated. Can be

• A shiny.tag or shiny.tag.list object

• A string of jQuery_selector

• A JS() wrapped javascript expression that returns a jQuery object.

operation

A string to determine how to manipulate the mouse interaction. Should be one of enable, disable, destroy, save and load. Ignored when ui is a shiny.tag or shiny.tag.list object. See Details.

selector, tag, switch

Deprecated, just keep for backward compatibility. Please use ui and operation parameters instead.

Value

The same object passed in the ui parameter

Details

The first parameter ui determines the target shiny ui element(s) to work with. It accepts objects with different classes. When you provide a shiny.tag (e.g., shiny inputs/outputs or ui created by shiny::tags) or a shiny.tag.list (by tagList()) object, the functions return the same ui object with interaction effects attached. When a jQuery_selector or a javascript expression is provided, the functions first use it to locate the target ui element(s) in shiny app, and then attach or manipulate the interactions. Therefore, you can use the first way in ui of a shiny app to created elements with interaction effects, or use the second way in server to manipulate the interactions.

The operation parameter is valid only in the second way. It determines how to manipulate the interaction, which includes:

• enable: Attach the corresponding mouse interaction to the target(s).

• disable: Attach the interaction if not and disable it at once (only set the options).

• destory: Destroy the interaction.

• save: Attach the interaction if not and save the current interaction state.

• load: If interaction attached, restore the target(s) to the last saved interaction state.

With mouse interactions attached, the corresponding interaction states, e.g. position of draggable, size of resizable, selected of selectable and order of sortable, will be send to server in the form of input$<id>_<state>. The default values can be overridden by setting the shiny option in the options parameter. Please see the vignette Introduction to shinyjqui for more details.

The functions jqui_draggabled(), jqui_droppabled(), jqui_resizabled(), jqui_selectabled() and jqui_sortabled() are deprecated. Please use the corresponding -able() functions instead.

Examples

# NOT RUN {
library(shiny)
library(highcharter)

## used in ui
jqui_resizable(actionButton('btn', 'Button'))
jqui_draggable(plotOutput('plot', width = '400px', height = '400px'),
                options = list(axis = 'x'))
jqui_selectable(
  div(
    id = 'sel_plots',
    highchartOutput('highchart', width = '300px'),
    plotOutput('ggplot', width = '300px')
  ),
  options = list(
    classes = list(`ui-selected` = 'ui-state-highlight')
  )
)
jqui_sortable(tags$ul(
  id = 'lst',
  tags$li('A'),
  tags$li('B'),
  tags$li('C')
))

## used in server
# }
# NOT RUN {
  jqui_draggable('#foo', options = list(grid = c(80, 80)))
  jqui_droppable('.foo', operation = "enable")
# }
# NOT RUN {
## use shiny input
if (interactive()) {
  shinyApp(
    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_draggable(highchartOutput('foo', width = '200px', height = '200px'))
    )
  )
}

## custom shiny input
func <- JS('function(event, ui){return $(event.target).offset();}')
options <-  list(
  shiny = list(
    abs_position = list(
      dragcreate = func, # send returned value back to shiny when interaction is created.
      drag = func # send returned value to shiny when dragging.
    )
  )
)
jqui_draggable(highchartOutput('foo', width = '200px', height = '200px'),
                options = options)


# }