shinyjqui

https://github.com/yang-tang/shinyjqui
Admin
shinyjqui is an R package that extends Shiny with jQuery UI interactions and animation effects,...
Tokens:40,714
Snippets:249
Trust Score:6.8
Update:6 months ago
Show doc for...
Tokens:
Raw
### Initialize shinyjqui example environment

Source: https://github.com/yang-tang/shinyjqui/blob/master/docs/reference/Interactions.html

Setup code for demonstrating shinyjqui functionality.

```R
library(shiny)
library(highcharter)
#> Error in library(highcharter): there is no package called 'highcharter'

## used in ui
```

--------------------------------

### Install shinyjqui

Source: https://github.com/yang-tang/shinyjqui/blob/master/docs/index.html

Commands to install the stable version from CRAN or the development version from GitHub.

```R
# install from CRAN
install.packages('shinyjqui')

# for the development version
devtools::install_github("yang-tang/shinyjqui")
```

--------------------------------

### Load Packages

Source: https://github.com/yang-tang/shinyjqui/blob/master/README.md

Initial setup required to use shinyjqui and related visualization libraries.

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

--------------------------------

### Shiny App with Selectable Table

Source: https://github.com/yang-tang/shinyjqui/blob/master/docs/reference/selectableTableOutput.html

An example Shiny application demonstrating `selectableTableOutput`. It displays a selectable table and prints the selected row or cell indices to a `verbatimTextOutput`. Ensure this example is run in an interactive R session.

```R
if (interactive()) {
  shinyApp(
    ui = fluidPage(
      verbatimTextOutput("selected"),
      selectableTableOutput("tbl")
    ),
    server = function(input, output) {
      output$selected <- renderPrint({input$tbl_selected})
      output$tbl <- renderTable(mtcars, rownames = TRUE)
    }
  )
}
```

--------------------------------

### Install shinyjqui Development Version

Source: https://github.com/yang-tang/shinyjqui/blob/master/README.md

Install the latest development version of the shinyjqui package directly from GitHub using the devtools package.

```r
devtools::install_github("yang-tang/shinyjqui")
```

--------------------------------

### Shiny Example: Add Class Animation

Source: https://github.com/yang-tang/shinyjqui/blob/master/docs/reference/Class_effects.html

Demonstrates how to use `jqui_add_class` in a Shiny application. First, create a UI element, then in the server logic, add a class to it using the function.

```R
if (FALSE) {
  # in shiny ui create a span
  tags$span(id = 'foo', 'class animation demo')

  # in shiny server add class 'lead' to the span
  jqui_add_class('#foo', className = 'lead')
}
```

--------------------------------

### Install shinyjqui from CRAN

Source: https://github.com/yang-tang/shinyjqui/blob/master/README.md

Use this command to install the stable version of the shinyjqui package from the Comprehensive R Archive Network (CRAN).

```r
install.packages('shinyjqui')
```

--------------------------------

### Package Version Data Structure

Source: https://github.com/yang-tang/shinyjqui/blob/master/inst/shinydemos/flexdashboard.html

JSON representation of the installed packages and their versions.

```json
{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["packages"]}},"value":[{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["packages","version"]},"class":{"type":"character","attributes":{},"value":["data.frame"]},"row.names":{"type":"integer","attributes":{},"value":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35]}},"value":[{"type":"character","attributes":{},"value":["base","compiler","datasets","digest","ellipsis","evaluate","fastmap","flexdashboard","graphics","grDevices","htmltools","htmlwidgets","httpuv","jsonlite","knitr","later","lifecycle","magrittr","methods","mime","promises","R6","Rcpp","rlang","rmarkdown","shiny","shinyjqui","stats","stringi","stringr","tools","utils","xfun","xtable","yaml"]},{"type":"character","attributes":{},"value":["4.0.2","4.0.2","4.0.2","0.6.27","0.3.1","0.14","1.0.1","0.5.2","4.0.2","4.0.2","0.5.1.1","1.5.3","1.5.5","1.7.2","1.30","1.1.0.1","0.2.0","2.0.1","4.0.2","0.9","1.1.1","2.5.0","1.0.6","0.4.10","2.6","1.6.0","0.3.3.9000","4.0.2","1.5.3","1.4.0","4.0.2","4.0.2","0.20","1.8-4","2.2.1"]}]}]}
```

--------------------------------

### Interactive sortableTabsetPanel Example

Source: https://github.com/yang-tang/shinyjqui/blob/master/docs/reference/sortableTabsetPanel.html

A complete Shiny application demonstrating the use of sortableTabsetPanel and accessing the tab order via input$tabs_order.

```R
## Only run this example in interactive R sessions
if (interactive()) {
  shinyApp(
    ui = fluidPage(
      sortableTabsetPanel(
        id = "tabs",
        tabPanel(title = "A", "AAA"),
        tabPanel(title = "B", "BBB"),
        tabPanel(title = "C", "CCC")
      ),
      verbatimTextOutput("order")
    ),
    server = function(input, output) {
      output$order <- renderPrint({input$tabs_order})
    }
  )
}
```

--------------------------------

### Shiny App Example with OrderInput Update

Source: https://github.com/yang-tang/shinyjqui/blob/master/docs/reference/updateOrderInput.html

Demonstrates a complete Shiny app where an orderInput is displayed and updated via an action button. The output shows the current order of items, and the update button changes the items and their class.

```R
library(shiny)

if (interactive()) {

  ui <- fluidPage(
    orderInput("foo", "foo",
               items = month.abb[1:3],
               item_class = 'info'),
    verbatimTextOutput("order"),
    actionButton("update", "update")
  )

  server <- function(input, output, session) {
    output$order <- renderPrint({input$foo})
    observeEvent(input$update, {
      updateOrderInput(session, "foo",
                       items = month.abb[1:6],
                       item_class = "success")
    })
  }

  shinyApp(ui, server)

}
```

--------------------------------

### Shiny app with sortable table

Source: https://github.com/yang-tang/shinyjqui/blob/master/docs/reference/sortableTableOutput.html

An example of a Shiny app demonstrating the use of sortableTableOutput. It displays the current row order in a verbatimTextOutput and renders a sortable table using mtcars data.

```r
if (interactive()) {
  shinyApp(
    ui = fluidPage(
      verbatimTextOutput("rows"),
      sortableTableOutput("tbl")
    ),
    server = function(input, output) {
      output$rows <- renderPrint({input$tbl_row_index})
      output$tbl <- renderTable(mtcars, rownames = TRUE)
    }
  )
}
```

--------------------------------

### Synchronous Resizing of Multiple Elements

Source: https://github.com/yang-tang/shinyjqui/blob/master/docs/articles/introduction.html

Make multiple resizable elements resize synchronously by using the `alsoResize` option in `jqui_resizable`. This example links two plot outputs.

```R
jqui_resizable(plotOutput('plot1', width = '400px', height = '400px'), 
                      options = list(alsoResize = '#plot2')),
    plotOutput('plot2', width = '400px', height = '400px')
```

--------------------------------

### Implement Custom Draggable Offset Callback

Source: https://github.com/yang-tang/shinyjqui/blob/master/docs/articles/introduction.html

Example of adding a custom input value to track the element's offset during drag events.

```R
# server
jqui_draggable('#foo', options = list(
  shiny = list(
    # By default, draggable element has a shiny input value showing the
    # element's position (relative to the parent element). Here, another shiny
    # input value (input$foo_offset) is added. It returns the element's offset
    # (position relative to the document).
    offset = list(
      # return the updated offset value when the draggable is created or dragging
      `dragcreate drag` = JS('function(event, ui) {return $(event.target).offset();}'),
    )
  )
))
```

--------------------------------

### Enable State Bookmarking with jqui_bookmarking

Source: https://context7.com/yang-tang/shinyjqui/llms.txt

Enable Shiny bookmarking for mouse interaction states like position, size, and selection. Ensure 'enableBookmarking(store = "url")' is called.

```r
library(shiny)
library(shinyjqui)

ui <- function(request) {
  fluidPage(
    bookmarkButton(),

    jqui_draggable(
      div(id = "box", style = "width: 100px; height: 100px; background: steelblue;",
          "Drag me!")
    ),

    jqui_resizable(
      plotOutput("plot", width = "300px", height = "300px")
    )
  )
}

server <- function(input, output, session) {
  # Enable bookmarking of interaction states
  jqui_bookmarking()

  output$plot <- renderPlot({
    plot(1:10)
  })
}

# Enable bookmarking
enableBookmarking(store = "url")
shinyApp(ui, server)
```

--------------------------------

### Initialize Components

Source: https://github.com/yang-tang/shinyjqui/blob/master/inst/shinydemos/flexdashboard.html

Initializes all registered FlexDashboardComponents globally. Call this once during application startup to ensure all components are ready.

```javascript
function componentsInit(dashboardContainer) {
    for (var i=0; i<window.FlexDashboardComponents.length; i++) {
        var component = window.FlexDashboardComponents[i];
        if (component.init) component.init(dashboardContainer);
    }
}
```

--------------------------------

### Use source mode for copying

Source: https://github.com/yang-tang/shinyjqui/blob/master/docs/articles/orderInput.html

Setting as_source = TRUE allows items to be copied from the source component to others instead of being moved.

```R
# In source mode, items dragged to B are copied
orderInput('A', 'A', items = 1:3, connect = 'B', as_source = TRUE)
orderInput('B', 'B', items = 4:6)
```

--------------------------------

### Enable Shinyjqui Bookmarking

Source: https://github.com/yang-tang/shinyjqui/blob/master/docs/articles/save-and-restore.html

Integrate jqui_bookmarking into the server logic and enable URL-based bookmarking in the Shiny application.

```R
output$gg <- renderPlot({
        ggplot(mtcars, aes(x = cyl, y = mpg)) + geom_point()
      })
      # enable interaction state bookmarking
      jqui_bookmarking()
    }
    
    enableBookmarking(store = "url")
    
    shinyApp(ui, server)
```

--------------------------------

### Get Available Animation Effects

Source: https://github.com/yang-tang/shinyjqui/blob/master/docs/reference/get_jqui_effects.html

Retrieves a list of all available animation effects provided by jQuery UI that can be used with the shinyjqui package.

```APIDOC
## GET /api/jqui/effects

### Description
Use this function to get all animation effects in jQuery UI.

### Method
GET

### Endpoint
/api/jqui/effects

### Value
A character vector of effect names

### Response Example
{
  "effects": [
    "bounce",
    "clip",
    "drop",
    "explode",
    "fade",
    "fold",
    "puff",
    "pulsate",
    "scale",
    "shake",
    "slide",
    "transfer"
  ]
}
```

--------------------------------

### Create a basic orderInput

Source: https://github.com/yang-tang/shinyjqui/blob/master/docs/articles/orderInput.html

A simple implementation of orderInput that displays a list of items and prints their current order.

```R
server <- function(input, output) {
  output$order <- renderPrint({input$foo})
}

ui <- fluidPage(
  orderInput(inputId = 'foo', label = 'A simple example', items = c('A', 'B', 'C')),
  verbatimTextOutput('order')
)

shinyApp(ui, server)
```

--------------------------------

### Enable Shiny Bookmarking for Resizable Elements

Source: https://github.com/yang-tang/shinyjqui/blob/master/docs/articles/save-and-restore.html

Integrate `jqui_bookmarking` into the server function to enable cross-session saving and restoring of interaction states, leveraging Shiny's native bookmarking capabilities. This allows states to be preserved across app reloads or different sessions.

```R
ui <- function(request) {
  fluidPage(
    bookmarkButton(),
    jqui_resizable(plotOutput('gg', width = '200px', height = '200px'))
  )
}

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

--------------------------------

### Make Elements Sortable with Opacity

Source: https://github.com/yang-tang/shinyjqui/blob/master/docs/articles/introduction.html

Use jqui_sortable to enable drag-and-drop sorting of child elements. This example sets the opacity of elements while they are being sorted.

```R
jqui_sortable('#foo', options = list(opacity = 0.5))
```

--------------------------------

### Shiny App with Sortable Checkbox Group

Source: https://github.com/yang-tang/shinyjqui/blob/master/docs/reference/sortableCheckboxGroupInput.html

This example demonstrates how to use sortableCheckboxGroupInput within a Shiny application. It displays the order of the selected checkboxes in a verbatimTextOutput.

```R
if (interactive()) {
  shinyApp(
    ui = fluidPage(
      sortableCheckboxGroupInput("foo", "SortableCheckboxGroupInput",
                                 choices = month.abb),
      verbatimTextOutput("order")
    ),
    server = function(input, output) {
      output$order <- renderPrint({input$foo_order})
    }
  )
}
```

--------------------------------

### Initialize FlexDashboard

Source: https://github.com/yang-tang/shinyjqui/blob/master/inst/shinydemos/flexdashboard.html

Initializes the dashboard container, sets default options, and handles layout configuration for sidebars and pages.

```javascript
var FlexDashboard = (function () { // initialize options var _options = {}; var FlexDashboard = function() { // default options _options = $.extend(_options, { theme: "cosmo", fillPage: false, orientation: 'columns', storyboard: false, defaultFigWidth: 576, defaultFigHeight: 461, defaultFigWidthMobile: 360, defaultFigHeightMobile: 461, isMobile: false, isPortrait: false, resize_reload: true }); }; function init(options) { // extend default options $.extend(true, _options, options); // add ids to sections that don't have them (pandoc won't assign ids // to e.g. sections with titles consisting of only chinese characters) var nextId = 1; $('.level1:not([id]),.level2:not([id]),.level3:not([id])').each(function() { $(this).attr('id', 'dashboard-' + nextId++); }); // find navbar items var navbarItems = $('#flexdashboard-navbar'); if (navbarItems.length) navbarItems = JSON.parse(navbarItems.html()); addNavbarItems(navbarItems); // find the main dashboard container var dashboardContainer = $('#dashboard-container'); // resolve mobile classes resolveMobileClasses(dashboardContainer); // one time global initialization for components componentsInit(dashboardContainer); // look for a global sidebar var globalSidebar = dashboardContainer.find(".section.level1.sidebar"); if (globalSidebar.length > 0) { // global layout for fullscreen displays if (!isMobilePhone()) { // hoist it up to the top level globalSidebar.insertBefore(dashboardContainer); // lay it out (set width/positions) layoutSidebar(globalSidebar, dashboardContainer); // tuck sidebar into first page for mobile phones } else { // convert it into a level3 section globalSidebar.removeClass('sidebar'); globalSidebar.removeClass('level1'); globalSidebar.addClass('level3'); var h1 = globalSidebar.children('h1'); var h3 = $('<h3></h3>'); h3.append(h1.contents()); h3.insertBefore(h1); h1.detach(); // move it into the first page var page = dashboardContainer.find('.section.level1').first(); if (page.length > 0) page.prepend(globalSidebar); } } // look for pages to layout var pages = $('div.section.level1'); if (pages.length > 0) { // find the navbar and collapse on clicked var navbar = $('#navbar'); navbar.on("click", "a[data-toggle!=dropdown]", null, function () { navbar.collapse('hide'); }); // envelop the dashboard container in a tab content div dashboardContainer.wrapInner('<div class="tab-content"></div>'); pages.each(function(index) { // lay it out layoutDashboardPage($(this)); // add it to the navbar addToNavbar($(this), index === 0); }); } else { // remove the navbar and navbar button if we don't // have any navbuttons if (navbarItems.length === 0) { $('#navbar').remove(); $('#navbar-button').remove(); } // add the storyboard class if requested if (_options.storyboard) dashboardContainer.addClass('storyboard'); // layout the entire page layoutDashboardPage(dashboardContainer); } // if we are in shiny we need to trigger a window resize event to // force correct layout of shiny-bound-output elements if (isShinyDoc()) $(window).trigger('resize'); // make main components visible $('.section.sidebar').css('visibility', 'visible'); dashboardContainer.css('visibility', 'visible'); // handle location hash handleLocationHash(); // intialize prism highlighting initPrismHighlighting(); // record mobile and orientation state then register a handler // to refresh if resize_reload is set to true and it changes _options.isMobile = isMobilePhone(); _options.isPortrait = isPortrait(); if (_options.resize_reload) { $(window).on('resize', function() { if (_options.isMobile !== isMobilePhone() || _options.isPortrait !== isPortrait()) { window.location.reload(); } }); } else { // if in desktop mode and resizing to mobile, make sure the heights are 100% // This enforces what `fillpage.css` does for "wider" pages. // Since we are not reloading once the page becomes small, we need to force the height to 100% // This is a new situation introduced when `_options.resize_reload` is `false` if (! _options.isMobile) { // only add if `fillpage.css` was added in the first place if (_options.fillPage) { // fillpage.css $("html,body,#dashboard").css("height", "100%"); } } } // trigger layoutcomplete event dashboardContainer.trigger('flexdashboard:layoutcomplete'); }
```

--------------------------------

### jqui_icon Function

Source: https://github.com/yang-tang/shinyjqui/blob/master/docs/reference/jqui_icon.html

This snippet details the jqui_icon function for creating jQuery UI icons. It explains the function's arguments, return value, and provides usage examples.

```APIDOC
## jqui_icon

### Description

Create an jQuery UI pre-defined icon. For lists of available icons, see [https://api.jqueryui.com/theming/icons/](https://api.jqueryui.com/theming/icons/).

### Usage

```R
jqui_icon(name)
```

### Arguments

*   **name** (character) - Class name of icon. The "ui-icon-" prefix can be omitted (i.e. use "ui-icon-flag" or "flag" to display a flag icon)

### Value

An icon element

### Examples

#### Basic Usage

```R
jqui_icon('caret-1-n')
#> <i class="ui-icon ui-icon-caret-1-n"></i>
```

#### In Shiny Applications

```R
library(shiny)

# add an icon to an actionButton
actionButton('button', 'Button', icon = jqui_icon('refresh'))
#> <button id="button" type="button" class="btn btn-default action-button">
#>   <i class="ui-icon ui-icon-refresh"></i>
#>   Button
#> </button>

# add an icon to a tabPanel
tabPanel('Help', icon = jqui_icon('help'))
#> <div class="tab-pane" title="Help" data-value="Help" data-icon-class="ui-icon ui-icon-help"></div>
```
```

--------------------------------

### Build connections in source mode

Source: https://github.com/yang-tang/shinyjqui/blob/master/docs/reference/orderInput.html

Configures an orderInput as a source, allowing items to be copied into other connected containers.

```R
orderInput('items3', 'Items3 (can be copied to Items2 and Items4)', items = month.abb,
           as_source = TRUE, connect = c('items2', 'items4'), item_class = 'success')
```

--------------------------------

### Make Specific Child Elements Sortable

Source: https://github.com/yang-tang/shinyjqui/blob/master/docs/articles/introduction.html

Use jqui_sortable with the 'items' option to specify which child elements within a container are sortable. This example targets elements with the class 'items'.

```R
jqui_sortable('#foo', options = list(items = '> .items'))
```

--------------------------------

### Make Elements Selectable with Highlight

Source: https://github.com/yang-tang/shinyjqui/blob/master/docs/articles/introduction.html

Use jqui_selectable to make child elements within a container selectable. This example highlights selected plot outputs using a CSS class.

```R
jqui_selectable(
  div(
    plotOutput('plot1', width = '400px', height = '400px'),
    plotOutput('plot2', width = '400px', height = '400px')
  ),
  options = list(classes = list(`ui-selected` = 'ui-state-highlight'))
)
```

--------------------------------

### Bookmarking

Source: https://github.com/yang-tang/shinyjqui/blob/master/docs/reference/index.html

Enable bookmarking state of mouse interactions.

```APIDOC
## Bookmarking

### Description
Enable bookmarking state of mouse interactions.

### Function
- `jqui_bookmarking()`

### See Also
[jqui_bookmarking.html](jqui_bookmarking.html)
```

--------------------------------

### Dashboard Initialization Scripts

Source: https://github.com/yang-tang/shinyjqui/blob/master/inst/shinydemos/flexdashboard.html

JavaScript code for initializing table styles, MathJax, and FlexDashboard settings.

```javascript
$(document).ready(function () { // add bootstrap table styles to pandoc tables $('tr.header').parent('thead').parent('table').addClass('table table-condensed'); // initialize mathjax var script = document.createElement("script"); script.type = "text/javascript"; script.src = "https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"; document.getElementsByTagName("head")[0].appendChild(script); });
```

```javascript
$(document).ready(function () { FlexDashboard.init({ theme: "cosmo", fillPage: true, orientation: "columns", storyboard: false, defaultFigWidth: 576, defaultFigHeight: 460, defaultFigWidthMobile: 360, defaultFigHeightMobile: 460, resize_reload: true }); });
```

--------------------------------

### Create or Get Navbar Menu

Source: https://github.com/yang-tang/shinyjqui/blob/master/inst/shinydemos/flexdashboard.html

This function creates a new dropdown menu in the navbar or returns an existing one. It's useful for organizing navigation items into collapsible menus.

```javascript
function navbarMenu(id, icon, title, container) {
    var existingMenu = [];
    if (id) existingMenu = container.children('#' + id);
    if (existingMenu.length > 0) {
        return existingMenu.children('ul');
    } else {
        var li = $('<li></li>');
        if (id) li.attr('id', id);
        li.addClass('dropdown');
        // auto add "Share" title on mobile if necessary
        if (!title && icon && (icon === "fa-share-alt") && isMobilePhone()) title = "Share";
        if (title) {
            title = title + ' <span class="caret"></span>';
        }
        var a = navbarLink(icon, title, "#");
        a.addClass('dropdown-toggle');
        a.attr('data-toggle', 'dropdown');
        a.attr('aria-expanded', 'false');
        li.append(a);
        var ul = $('<ul class="dropdown-menu"></ul>');
        ul.attr('role', 'menu');
        li.append(ul);
        container.append(li);
        return ul;
    }
}
```

--------------------------------

### Initialize orderInput with placeholder

Source: https://github.com/yang-tang/shinyjqui/blob/master/docs/reference/orderInput.html

Creates an orderInput component with a specified placeholder and connection to another sortable element.

```R
orderInput('items4', 'Items4 (can be moved to Items2)', items = NULL, connect = 'items2',
           placeholder = 'Drag items here...')
```

--------------------------------

### Enable Element Resizing with jqui_resizable

Source: https://context7.com/yang-tang/shinyjqui/llms.txt

Use jqui_resizable to allow users to resize elements with the mouse. It reports the element's size and resizing state to the server. Options include maintaining aspect ratio, setting size constraints, and specifying resize handles. It can also synchronize resizing with other elements.

```r
library(shiny)
library(shinyjqui)
library(ggplot2)

ui <- fluidPage(
  # Resizable plot with constraints
  jqui_resizable(
    plotOutput("ggplot", width = "300px", height = "300px"),
    options = list(
      aspectRatio = TRUE,       # Maintain aspect ratio
      minWidth = 200,           # Minimum width
      maxWidth = 600,           # Maximum width
      minHeight = 200,
      maxHeight = 600,
      handles = "se"            # Only show southeast handle
    )
  ),

  # Two plots that resize together
  jqui_resizable(
    plotOutput("plot1", width = "400px", height = "300px"),
    options = list(alsoResize = "#plot2")  # Sync resize with plot2
  ),
  plotOutput("plot2", width = "400px", height = "300px"),

  verbatimTextOutput("size_info")
)

server <- function(input, output) {
  output$ggplot <- renderPlot({
    ggplot(mtcars, aes(x = mpg, y = wt)) + geom_point()
  })

  output$plot1 <- renderPlot({ plot(1:10) })
  output$plot2 <- renderPlot({ plot(10:1) })

  output$size_info <- renderPrint({
    input$ggplot_size  # Returns list(width = ..., height = ...)
  })
}

shinyApp(ui, server)
```

--------------------------------

### Droppable Accept Specific Draggable Element

Source: https://github.com/yang-tang/shinyjqui/blob/master/docs/articles/introduction.html

Configure `jqui_droppable` to accept only specific draggable elements by providing a jQuery selector to the `accept` option. This example targets elements with the ID '#bar'.

```R
jqui_droppable('#foo', options = list(
  accept = '#bar',
  classes = list(
    `ui-droppable-active` = 'ui-state-focus',
    `ui-droppable-hover` = 'ui-state-highlight'
  ),
  drop = JS(
    'function(event, ui){$(this).addClass("ui-state-active");}'
  )
))
```

--------------------------------

### FlexDashboard Utility Functions

Source: https://github.com/yang-tang/shinyjqui/blob/master/inst/shinydemos/flexdashboard.html

Utility methods for handling image resizing, navigation state, and URL hash management.

```javascript
window.FlexDashboardUtils = { resizableImage: function(img) { var src = img.attr('src'); var url = 'url("' + src + '")'; img.parent().css('background', url) .css('background-size', 'contain') .css('background-repeat', 'no-repeat') .css('background-position', 'center') .addClass('image-container'); }, setLocation: function(href) { if (history && history.pushState) { history.pushState(null, null, href); } else { window.location.replace(href); } setTimeout(function() { window.scrollTo(0, 0); }, 10); this.manageActiveNavbarMenu(); }, showPage: function(href) { $('ul.navbar-nav li a[href="' + href + '"]').tab('show'); var baseUrl = this.urlWithoutHash(window.location.href); var loc = baseUrl + href; this.setLocation(loc); }, showLinkedValue: function(href) { // check for a page link if ($('ul.navbar-nav li a[data-toggle=tab][href="' + href + '"]').length > 0) this.showPage(href); else window.open(href); }, urlWithoutHash: function(url) { var hashLoc = url.indexOf('#'); if (hashLoc != -1) return url.substring(0, hashLoc); else return url; }, urlHash: function(url) { var hashLoc = url.indexOf('#'); if (hashLoc != -1) return url.substring(hashLoc); else return ""; }, manageActiveNavbarMenu: function () { // remove active from anyone currently active $('.navbar ul.nav').find('li').removeClass('active'); // find the active tab var activeTab = $('.dashboard-page-wrapper.tab-pane.active'); if (activeTab.length > 0) { var tabId = activeTab.attr('id'); if (tabId) $(".navbar ul.nav a[href='#" + tabId + "']").parents('li').addClass('active'); } } };
```

--------------------------------

### Custom Shiny Input Values with JavaScript Callbacks

Source: https://context7.com/yang-tang/shinyjqui/llms.txt

Define custom Shiny input values using JavaScript callbacks within the 'options' parameter. This example shows custom offset and dimensions during drag.

```r
library(shiny)
library(shinyjqui)
library(htmlwidgets)

ui <- fluidPage(
  jqui_draggable(
    div(id = "custom_drag", style = "width: 100px; height: 100px; background: coral;",
        "Drag me"),
    options = list(
      shiny = list(
        # Custom input: absolute offset position
        offset = list(
          `dragcreate drag` = JS("function(event, ui) {
            return $(event.target).offset();
          }")
        ),
        # Custom input: element dimensions during drag
        dimensions = list(
          drag = JS("function(event, ui) {
            var $el = $(event.target);
            return {
              width: $el.width(),
              height: $el.height(),
              left: ui.position.left,
              top: ui.position.top
            };
          }")
        )
      )
    )
  ),

  verbatimTextOutput("custom_values")
)

server <- function(input, output) {
  output$custom_values <- renderPrint({
    list(
      default_position = input$custom_drag_position,
      custom_offset = input$custom_drag_offset,
      custom_dimensions = input$custom_drag_dimensions
    )
  })
}

shinyApp(ui, server)
```

--------------------------------

### Resizable Size Limits

Source: https://github.com/yang-tang/shinyjqui/blob/master/docs/articles/introduction.html

Set minimum and maximum height and width constraints for a resizable element using `minHeight`, `maxHeight`, `minWidth`, and `maxWidth` options in `jqui_resizable`.

```R
jqui_resizable('#foo', options = list(minHeight = 100, maxHeight = 300,
                                          minWidth = 200, maxWidth = 400))
```

--------------------------------

### Initialize Dashboard Page Layout

Source: https://github.com/yang-tang/shinyjqui/blob/master/inst/shinydemos/flexdashboard.html

Handles the initial wrapping of page content, header synthesis, and conditional layout logic based on device orientation and media type.

```javascript
ientation) var wrapper = $('<div class="dashboard-page-wrapper"></div>'); page.wrap(wrapper); // if there are no level2 or level3 headers synthesize a level3 // header to contain the (e.g. frame it, scroll container, etc.) var headers = page.find('h2,h3'); if (headers.length === 0) page.wrapInner('<div class="section level3"></div>'); // hoist up any content before level 2 or level 3 headers var children = page.children(); children.each(function(index) { if ($(this).hasClass('level2') || $(this).hasClass('level3')) return false; $(this).insertBefore(page); }); // determine orientation and fillPage behavior for distinct media var orientation, fillPage, storyboard; // media: mobile phone if (isMobilePhone()) { // if there is a sidebar we need to ensure it's content // is properly framed as an h3 var sidebar = page.find('.section.sidebar'); sidebar.removeClass('sidebar'); sidebar.wrapInner('<div class="section level3"></div>'); var h2 = sidebar.find('h2'); var h3 = $('<h3></h3>'); h3.append(h2.contents()); h3.insertBefore(h2); h2.detach(); // wipeout h2 elements then enclose them in a single h2 var level2 = page.find('div.section.level2'); level2.each(function() { level2.children('h2').remove(); level2.children().unwrap(); }); page.wrapInner('<div class="section level2"></div>'); // substitute mobile images if (isPortrait()) { var mobileFigures = $('img.mobile-figure'); mobileFigures.each(function() { // get the src (might be base64 encoded) var src = $(this).attr('src'); // find it's peer var id = $(this).attr('data-mobile-figure-id'); var img = $('img\[data-figure-id=' + id + "]"); img.attr('src', src) .attr('width', _options.defaultFigWidthMobile) .attr('height', _options.defaultFigHeightMobile); }); } // hoist storyboard commentary into it's own section if (page.hasClass('storyboard')) { var commentaryHR = page.find('div.section.level3 hr'); commentaryHR.each(function() { var commentary = $(this).nextAll().detach(); var commentarySection = $('<div class="section level3"></div>'); commentarySection.append(commentary); commentarySection.insertAfter($(this).closest('div.section.level3')); $(this).remove(); }); } // force a non full screen layout by columns orientation = _options.orientation = 'columns'; fillPage = _options.fillPage = false; storyboard = _options.storyboard = false; // media: desktop } else { // determine orientation orientation = page.attr('data-orientation'); if (orientation !== 'rows' && orientation != 'columns') orientation = _options.orientation; // determine storyboard mode storyboard = page.hasClass('storyboard'); // fillPage based on options (force for storyboard) fillPage = _options.fillPage || storyboard; // handle sidebar var sidebar = page.find('.section.level2.sidebar'); if (sidebar.length > 0) layoutSidebar(sidebar, page); } // give it and it's parent divs height: 100% if we are in fillPage mode if (fillPage) { page.addClass('vertical-layout-fill'); page.css('height', '100%'); page.parents('div').css('height', '100%'); } else { page.addClass('vertical-layout-scroll'); } // perform the layout if (storyboard) layoutPageAsStoryboard(page); else if (orientation === 'rows') layoutPageByRows(page, fillPage); else if (orientation === 'columns') layoutPageByColumns(page, fillPage); }
```

--------------------------------

### Apply jQuery UI animations to Shiny elements

Source: https://github.com/yang-tang/shinyjqui/blob/master/docs/articles/introduction.html

Demonstrates usage of animation functions like jqui_effect, jqui_hide, and jqui_show within a Shiny server context.

```r
# ui
plotOutput('foo', width = '400px', height = '400px')

# server
jqui_effect('#foo', effect = 'bounce') # bounces the plot
jqui_effect('#foo', effect = 'scale', options = list(percent = 50)) # scale to 50%
jqui_hide('#foo', effect = 'size', options = list(width = 200, height = 60)) # resize then hide
jqui_show('#foo', effect = 'clip') # show the plot by clipping
```

--------------------------------

### Device and State Detection Utilities

Source: https://github.com/yang-tang/shinyjqui/blob/master/inst/shinydemos/flexdashboard.html

Functions to detect device types, orientation, and Shiny environment status.

```javascript
function isMobilePhone() { try { return ! window.matchMedia("only screen and (min-width: 768px)").matches; } catch(e) { return false; } }
```

```javascript
function isPortrait() { return ($(window).width() < $(window).height()); }
```

```javascript
function isTablet() { try { return window.matchMedia("only screen and (min-width: 769px) and (max-width: 992px)").matches; } catch(e) { return false; } }
```

```javascript
function isShinyDoc() { return (typeof(window.Shiny) !== "undefined" && !!window.Shiny.outputBindings); }
```

--------------------------------

### Navigation and Bookmark Handling

Source: https://github.com/yang-tang/shinyjqui/blob/master/inst/shinydemos/flexdashboard.html

Manages URL hash synchronization with tab navigation and browser history.

```javascript
function handleLocationHash() { // restore tab/page from bookmark var hash = window.decodeURIComponent(window.location.hash); if (hash.length > 0) $('ul.nav a[href="' + hash + '"]').tab('show'); FlexDashboardUtils.manageActiveNavbarMenu(); // navigate to a tab when the history changes window.addEventListener("popstate", function(e) { var hash = window.decodeURIComponent(window.location.hash); var activeTab = $('ul.nav a[href="' + hash + '"]'); if (activeTab.length) { activeTab.tab('show'); } else { $('ul.nav a:first').tab('show'); } FlexDashboardUtils.manageActiveNavbarMenu(); }); // add a hash to the URL when the user clicks on a tab/page $('.navbar-nav a[data-toggle="tab"]').on('click', function(e) { var baseUrl = FlexDashboardUtils.urlWithoutHash(window.location.href); var hash = FlexDashboardUtils.urlHash($(this).attr('href')); var href = baseUrl + hash; FlexDashboardUtils.setLocation(href); }); // handle clicks of other links that should activate pages var navPages = $('ul.navbar-nav li a[data-toggle=tab]'); navPages.each(function() { var href = $(this).attr('href'); var links = $('a[href="' + href + '"][data-toggle!=tab]'); links.each(function() { $(this).on('click', function(e) { window.FlexDashboardUtils.showPage(href); }); }); }); }
```

--------------------------------

### Others

Source: https://github.com/yang-tang/shinyjqui/blob/master/docs/reference/index.html

Utility functions for icons and positioning.

```APIDOC
## Others

### Functions
- `jqui_icon()`: Create a jQuery UI icon.
- `jqui_position()`: Position an element relative to another.

### See Also
[jqui_icon.html](jqui_icon.html), [jqui_position.html](jqui_position.html)
```

--------------------------------

### Create Icons with jqui_icon

Source: https://context7.com/yang-tang/shinyjqui/llms.txt

Use jqui_icon to create icons for various UI elements. Accepts icon names or full class names.

```r
jqui_icon("caret-1-n")      # Up arrow
jqui_icon("ui-icon-flag")   # Flag (full class name also works)
jqui_icon("refresh")        # Refresh icon
```

```r
ui <- fluidPage(
  # Icon in action button
  actionButton("btn1", "Refresh", icon = jqui_icon("refresh")),
  actionButton("btn2", "Help", icon = jqui_icon("help")),
  actionButton("btn3", "Settings", icon = jqui_icon("gear")),

  # Icon in tab panel
  tabsetPanel(
    tabPanel("Home", icon = jqui_icon("home"), "Home content"),
    tabPanel("Search", icon = jqui_icon("search"), "Search content")
  )
)

server <- function(input, output) {}

shinyApp(ui, server)
```

--------------------------------

### Implement sortableRadioButtons in Shiny App

Source: https://github.com/yang-tang/shinyjqui/blob/master/docs/reference/sortableRadioButtons.html

Demonstrates a complete Shiny application using sortableRadioButtons and displaying the order of choices.

```R
## Only run this example in interactive R sessions
if (interactive()) {
  shinyApp(
    ui = fluidPage(
      sortableRadioButtons("foo", "SortableRadioButtons",
                                 choices = month.abb),
      verbatimTextOutput("order")
    ),
    server = function(input, output) {
      output$order <- renderPrint({input$foo_order})
    }
  )
}
```

--------------------------------

### Configure a placeholder

Source: https://github.com/yang-tang/shinyjqui/blob/master/docs/articles/orderInput.html

Displays a placeholder message when an orderInput component contains no items.

```R
orderInput('A', 'A', items = 1:3, connect = 'B')
orderInput('B', 'B', items = NULL, placeholder = 'Drag item here...')
```

--------------------------------

### Server-side interaction configuration

Source: https://github.com/yang-tang/shinyjqui/blob/master/docs/reference/Interactions.html

Apply interactions to elements using selectors within the server logic.

```R
if (FALSE) {
      jqui_draggable('#foo', options = list(grid = c(80, 80)))
      jqui_droppable('.foo', operation = "enable")
    }
```

--------------------------------

### Registering Dashboard Components

Source: https://github.com/yang-tang/shinyjqui/blob/master/inst/shinydemos/flexdashboard.html

Logic for registering various UI components into the FlexDashboard system.

```javascript
window.FlexDashboardComponents.push({ find: function(container) { if (container.find('p').length == 0) return container; else return $(); } })
```

```javascript
window.FlexDashboardComponents.push({ find: function(container) { return container.children('p') .children('img:only-child'); }, layout: function(title, container, element, fillPage) { FlexDashboardUtils.resizableImage(element); } });
```

```javascript
window.FlexDashboardComponents.push({ find: function(container) { return container.children('div.figure').children('img'); }, layout: function(title, container, element, fillPage) { FlexDashboardUtils.resizableImage(element); } });
```

```javascript
window.FlexDashboardComponents.push({ init: function(dashboardContainer) { // trigger "shown" after initial layout to force static htmlwidgets // in runtime: shiny to be resized after the dom has been transformed dashboardContainer.on('flexdashboard:layoutcomplete', function(event) { setTimeout(function() { dashboardContainer.trigger('shown'); }, 200); }); }, find: function(container) { return container.children('div[id^="htmlwidget-"],div.html-widget'); } });
```

```javascript
window.FlexDashboardComponents.push({ find: function(container) { return container.children('div.html-widget.gauge'); }, flex: function(fillPage) { return false; }, layout: function(title, container, element, fillPage) { } });
```

```javascript
window.FlexDashboardComponents.push({ find: function(container) { return container.children('div[class^="shiny-"]'); } });
```

```javascript
window.FlexDashboardComponents.push({ find: function(container) { return container.find('.datatables'); }, flex: function(fillPage) { return fillPage; } });
```

```javascript
window.FlexDashboardComponents.push({ find: function(container) { var bsTable = container.find('table.table'); if (bsTable.length !== 0) return bsTable; else return container.find('tr.header').parent('thead').parent('table'); }, flex: function(fillPage) { return fillPage; }, layout: function(title, container, element, fillPage) { // alias variables var bsTable = element; // fixup xtable generated tables with a proper thead var headerRow = bsTable.find('tbody > tr:first-child > th').parent(); if (headerRow.length > 0) { var thead = $('<thead></thead>'); bsTable.prepend(thead); headerRow.detach().appendTo(thead); } // improve appearance container.addClass('bootstrap-table'); // for fill page provide scrolling w/ sticky headers if (fillPage) { // force scrollbar on overflow container.addClass('flowing-content-shim'); // stable table headers when scrolling bsTable.stickyTableHeaders({ scrollableArea: container }); } } });
```

```javascript
window.FlexDashboardComponents.push({ find: function(container) { return container.find('iframe.shiny-frame'); }, flex: function(fillPage) { return fillPage; }, layout: function(title, container, element, fillPage) { if (fillPage) { element.attr('height', '100%'); } else { // provide default height if necessary var height = element.get(0).sty
```

--------------------------------

### Create Sortable Tabset Panels

Source: https://context7.com/yang-tang/shinyjqui/llms.txt

Implement sortableTabsetPanel to allow users to drag and reorder tabs. The tab order is available via input$<id>_order.

```r
library(shiny)
library(shinyjqui)

ui <- fluidPage(
  sortableTabsetPanel(
    id = "mytabs",
    tabPanel("Tab A", "Content for Tab A"),
    tabPanel("Tab B", "Content for Tab B"),
    tabPanel("Tab C", "Content for Tab C")
  ),

  verbatimTextOutput("tab_info")
)

server <- function(input, output) {
  output$tab_info <- renderPrint({
    list(
      active_tab = input$mytabs,
      tab_order = input$mytabs_order
    )
  })
}

shinyApp(ui, server)
```

--------------------------------

### Shiny UI with Mouse Interactions

Source: https://github.com/yang-tang/shinyjqui/blob/master/docs/reference/index.html

Wrapper functions to create shiny UI with interaction attached.

```APIDOC
## Shiny UI with Mouse Interactions

### Description
Wrapper functions to create shiny UI with interaction attached.

### Functions
- `orderInput()`: Create a shiny input control to show the order of a set of items.
- `updateOrderInput()`: Change the value of an orderInput on the client.
- `draggableModalDialog()`: Create a draggable modal dialog UI.
- `sortableCheckboxGroupInput()`: Create a Checkbox Group Input Control with Sortable Choices.
- `sortableRadioButtons()`: Create radio buttons with sortable choices.
- `sortableTabsetPanel()`: Create a tabset panel with sortable tabs.
- `sortableTableOutput()`: Create a table output element with sortable rows.
- `selectableTableOutput()`: Create a table output element with selectable rows or cells.

### See Also
[orderInput.html](orderInput.html), [updateOrderInput.html](updateOrderInput.html), [draggableModalDialog.html](draggableModalDialog.html), [sortableCheckboxGroupInput.html](sortableCheckboxGroupInput.html), [sortableRadioButtons.html](sortableRadioButtons.html), [sortableTabsetPanel.html](sortableTabsetPanel.html), [sortableTableOutput.html](sortableTableOutput.html), [selectableTableOutput.html](selectableTableOutput.html)
```

--------------------------------

### Create a sortable table output

Source: https://github.com/yang-tang/shinyjqui/blob/master/docs/reference/sortableTableOutput.html

Renders a standard HTML table where rows can be reordered by drag and drop. The order of rows is stored in input$<outputId>_order. This is useful for interactive tables where user-defined ordering is desired.

```r
sortableTableOutput(outputId)
```

--------------------------------

### Drag and Drop Order Input

Source: https://context7.com/yang-tang/shinyjqui/llms.txt

Implement a drag-and-drop interface for reordering items using orderInput. Supports basic lists, source lists for copying, and connected lists.

```r
library(shiny)
library(shinyjqui)

ui <- fluidPage(
  # Basic order input
  orderInput(
    inputId = "priority",
    label = "Drag to prioritize:",
    items = c("Task A", "Task B", "Task C", "Task D"),
    item_class = "primary",  # Bootstrap color: default, primary, success, info, warning, danger
    width = "400px"
  ),

  # Source order input (items can be copied to others)
  orderInput(
    inputId = "source",
    label = "Available Items (drag to copy):",
    items = month.abb,
    as_source = TRUE,
    connect = "selected",
    item_class = "success"
  ),

  # Connected order input (receives items from source)
  orderInput(
    inputId = "selected",
    label = "Selected Items:",
    items = NULL,
    connect = "source",
    placeholder = "Drag items here...",
    item_class = "info"
  ),

  verbatimTextOutput("result")
)

server <- function(input, output, session) {
  output$result <- renderPrint({
    list(
      priority_order = input$priority,
      selected_items = input$selected
    )
  })

  # Update order input dynamically
  observeEvent(input$reset, {
    updateOrderInput(
      session,
      inputId = "priority",
      items = c("New A", "New B", "New C"),
      item_class = "warning"
    )
  })
}

shinyApp(ui, server)
```

--------------------------------

### Selectable Table Output

Source: https://github.com/yang-tang/shinyjqui/blob/master/README.md

Renders an HTML table with selectable rows or cells.

```r
ui <- fluidPage(
  selectableTableOutput("tbl", selection_mode = "cell"),
  verbatimTextOutput("selected")
)

server <- function(input, output) {
  output$selected <- renderPrint({
    cat("Selected:\n")
    input$tbl_selected
  })
  output$tbl <- renderTable(head(mtcars), rownames = TRUE)
}

shinyApp(ui, server)
```

--------------------------------

### Order Input

Source: https://github.com/yang-tang/shinyjqui/blob/master/README.md

Displays a list of items that can be reordered via drag and drop.

```r
server <- function(input, output) {
  output$order <- renderPrint({ print(input$dest) })
}

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)
```
Tokens:
Raw