{"id":13734664,"url":"https://github.com/Yang-Tang/shinyjqui","last_synced_at":"2025-05-08T11:30:38.124Z","repository":{"id":52614045,"uuid":"80878449","full_name":"Yang-Tang/shinyjqui","owner":"Yang-Tang","description":"jQuery UI Interactions and Effects for Shiny","archived":false,"fork":false,"pushed_at":"2023-02-07T11:24:56.000Z","size":8378,"stargazers_count":267,"open_issues_count":14,"forks_count":32,"subscribers_count":10,"default_branch":"master","last_synced_at":"2023-12-20T13:46:08.589Z","etag":null,"topics":["jquery-ui","r","shiny"],"latest_commit_sha":null,"homepage":"https://yang-tang.github.io/shinyjqui/","language":"R","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Yang-Tang.png","metadata":{"files":{"readme":"README.Rmd","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2017-02-03T23:32:36.000Z","updated_at":"2023-12-20T07:05:27.000Z","dependencies_parsed_at":"2022-09-22T14:24:44.623Z","dependency_job_id":null,"html_url":"https://github.com/Yang-Tang/shinyjqui","commit_stats":{"total_commits":168,"total_committers":8,"mean_commits":21.0,"dds":0.4107142857142857,"last_synced_commit":"b2c5b99de621adbe2988115ec7c94a19bf0dd83d"},"previous_names":[],"tags_count":0,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yang-Tang%2Fshinyjqui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yang-Tang%2Fshinyjqui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yang-Tang%2Fshinyjqui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yang-Tang%2Fshinyjqui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Yang-Tang","download_url":"https://codeload.github.com/Yang-Tang/shinyjqui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":213758655,"owners_count":15634354,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jquery-ui","r","shiny"],"created_at":"2024-08-03T03:00:58.636Z","updated_at":"2024-08-03T03:03:55.272Z","avatar_url":"https://github.com/Yang-Tang.png","language":"R","funding_links":[],"categories":["R","UI Components","Tools"],"sub_categories":["Advanced Interactivity","Packages"],"readme":"---\noutput: github_document\n---\n\n\u003c!-- README.md is generated from README.Rmd. Please edit that file --\u003e\n\n```{r, include = FALSE}\nknitr::opts_chunk$set(\n  collapse = TRUE,\n  comment = \"#\u003e\",\n  fig.path = \"man/figures/README-\",\n  out.width = \"100%\"\n)\n```\n\n# shinyjqui\n\n\u003c!-- badges: start --\u003e\n[![R-CMD-check](https://github.com/Yang-Tang/shinyjqui/workflows/R-CMD-check/badge.svg)](https://github.com/Yang-Tang/shinyjqui/actions) \n[![Travis-CI Build Status](https://travis-ci.org/Yang-Tang/shinyjqui.svg?branch=master)](https://travis-ci.org/Yang-Tang/shinyjqui) \n[![AppVeyor Build Status](https://ci.appveyor.com/api/projects/status/github/Yang-Tang/shinyjqui?branch=master\u0026svg=true)](https://ci.appveyor.com/project/Yang-Tang/shinyjqui) [![CRAN\\_Status\\_Badge](https://www.r-pkg.org/badges/version/shinyjqui)](https://cran.r-project.org/package=shinyjqui)\n\u003c!-- badges: end --\u003e\n\nshinyjqui package is an R wrapper of [jQuery UI](https://jqueryui.com/) javascript library. It can be used to easily add interactions and animation effects to a shiny app.\n\n## Installation\n\nYou can install the stable version from CRAN, or the development version from github with:\n\n```{r, eval = FALSE}\n# install from CRAN\ninstall.packages('shinyjqui')\n\n# for the development version\ndevtools::install_github(\"yang-tang/shinyjqui\")\n```\n\n## Usage\n\n```{r, eval=FALSE}\n# load packages\nlibrary(shiny)\nlibrary(shinyjqui)\nlibrary(ggplot2)\nlibrary(highcharter)\n```\n\n* __Draggable:__ Allow elements to be moved using the mouse\n\n```{r, eval = FALSE}\nserver \u003c- function(input, output) {}\n\nui \u003c- fluidPage(\n  jqui_draggable(fileInput('file', 'File'))\n)\n\nshinyApp(ui, server)\n```\n\n![](man/figures/README-draggable.gif)\n\n\n* __Resizable:__ Change the size of an element using the mouse.\n\n```{r, eval = FALSE}\nserver \u003c- function(input, output) {\n  output$gg \u003c- renderPlot({\n    ggplot(mtcars, aes(x = cyl, y = mpg)) + geom_point()\n  })\n}\n\nui \u003c- fluidPage(\n  jqui_resizable(plotOutput('gg', width = '200px', height = '200px'))\n)\n\nshinyApp(ui, server)\n```\n\n![](man/figures/README-resizable.gif)\n\n\n* __Sortable:__ Reorder elements in a list or grid using the mouse.\n\n```{r, eval = FALSE}\nserver \u003c- function(input, output) {\n  output$hc \u003c- renderHighchart({\n    hchart(mtcars, \"scatter\", hcaes(x = cyl, y = mpg, group = factor(vs))) %\u003e% \n      hc_legend(enabled = FALSE)\n  })\n  output$gg \u003c- renderPlot({\n    ggplot(mtcars, aes(x = cyl, y = mpg, color = factor(vs))) + \n      geom_point() + \n      theme(legend.position= \"none\")\n  })\n}\n\nui \u003c- fluidPage(\n  jqui_sortable(div(id = 'plots',\n                     highchartOutput('hc', width = '200px', height = '200px'),\n                     plotOutput('gg', width = '200px', height = '200px')))\n)\n\nshinyApp(ui, server)\n```\n\n![](man/figures/README-sortable.gif)\n\n\n* __Animation Effects:__ Apply an animation effect to an element. Effects can also be used in hide or show.\n\n```{r, eval = FALSE}\nserver \u003c- function(input, output) {\n  observeEvent(input$show, {\n    jqui_show('#gg', effect = input$effect)\n  })\n  \n  observeEvent(input$hide, {\n    jqui_hide('#gg', effect = input$effect)\n  })\n  \n  output$gg \u003c- renderPlot({\n    ggplot(mtcars, aes(x = cyl, y = mpg, color = factor(gear))) +\n      geom_point() +\n      theme(plot.background = element_rect(fill = \"transparent\",colour = NA))\n  }, bg = \"transparent\")\n}\n\nui \u003c- fluidPage(\n  div(style = 'width: 400px; height: 400px',\n      plotOutput('gg', width = '100%', height = '100%')),\n  selectInput('effect', NULL, choices = get_jqui_effects()),\n  actionButton('show', 'Show'),\n  actionButton('hide', 'Hide')\n)\n\nshinyApp(ui, server)\n```\n\n![](man/figures/README-effects.gif)\n\n\n* __Classes transformation:__ Add and remove class(es) to elements while animating all style changes.\n\n```{r, eval = FALSE}\nserver \u003c- function(input, output) {\n\n  current_class \u003c- c()\n\n  observe({\n    input$class\n    class_to_remove \u003c- setdiff(current_class, input$class)\n    class_to_add \u003c- setdiff(input$class, current_class)\n    current_class \u003c\u003c- input$class\n    if(length(class_to_remove) \u003e 0) {\n      jqui_remove_class('#foo', paste(class_to_remove, collapse = ' '), duration = 1000)}\n    if(length(class_to_add) \u003e 0) {\n      jqui_add_class('#foo', paste(class_to_add, collapse = ' '), duration = 1000)}\n  })\n\n}\n\nui \u003c- fluidPage(\n\n  tags$head(\n    tags$style(\n      HTML('.class1 { width: 410px; height: 100px; }\n            .class2 { text-indent: 40px; letter-spacing: .2em; }\n            .class3 { padding: 30px; margin: 10px; }\n            .class4 { font-size: 1.1em; }')\n    )\n  ),\n\n  div(id = 'foo', 'Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.'),\n  hr(),\n  checkboxGroupInput('class', 'Class',\n                     choices = list(`width: 410px; height: 100px;` = 'class1',\n                                    `text-indent: 40px; letter-spacing: .2em;` = 'class2',\n                                    `padding: 30px; margin: 10px;` = 'class3',\n                                    `font-size: 1.1em;` = 'class4'))\n\n\n)\n\nshinyApp(ui, server)\n```\n\n![](man/figures/README-classes.gif)\n\n\n* __orderInput():__ Display a list of items. Their order can be changed by drag and drop.\n\n```{r, eval = FALSE}\nserver \u003c- function(input, output) {\n  output$order \u003c- renderPrint({ print(input$dest) })\n}\n\nui \u003c- fluidPage(\n  orderInput('source', 'Source', items = month.abb,\n             as_source = TRUE, connect = 'dest'),\n  orderInput('dest', 'Dest', items = NULL, placeholder = 'Drag items here...'),\n  verbatimTextOutput('order')\n)\n\nshinyApp(ui, server)\n```\n\n![](man/figures/README-orderInput.gif)\n\n\n* __sortableTableOutput():__ Render a HTML table with sortable rows.\n\n```{r, eval = FALSE}\nui \u003c- fluidPage(\n  verbatimTextOutput(\"index\"),\n  sortableTableOutput(\"tbl\")\n)\n\nserver \u003c- function(input, output) {\n  output$index \u003c- renderPrint({\n    cat(\"Row index:\\n\")\n    input$tbl_row_index\n  })\n  output$tbl \u003c- renderTable(head(mtcars), rownames = TRUE)\n}\n\nshinyApp(ui, server)\n```\n\n![](man/figures/README-sortableTableOutput.gif)\n\n\n* __selectableTableOutput():__ Render a HTML table with selectable rows or cells.\n\n```{r, eval = FALSE}\nui \u003c- fluidPage(\n  selectableTableOutput(\"tbl\", selection_mode = \"cell\"),\n  verbatimTextOutput(\"selected\")\n)\n\nserver \u003c- function(input, output) {\n  output$selected \u003c- renderPrint({\n    cat(\"Selected:\\n\")\n    input$tbl_selected\n  })\n  output$tbl \u003c- renderTable(head(mtcars), rownames = TRUE)\n}\n\nshinyApp(ui, server)\n```\n\n![](man/figures/README-selectableTableOutput_cell.gif)\n\nFor more information, please visit the [package website](https://yang-tang.github.io/shinyjqui/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FYang-Tang%2Fshinyjqui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FYang-Tang%2Fshinyjqui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FYang-Tang%2Fshinyjqui/lists"}