add spinner

Tutuchan · May 21, 2018 · 83de876 · 83de876
1 parent 9407e9d
commit 83de876
Show file tree

Hide file tree

Showing 6 changed files with 1,055 additions and 2 deletions.
diff --git a/DESCRIPTION b/DESCRIPTION
@@ -1,6 +1,6 @@
 Package: shinyWidgets
 Title: Custom Inputs Widgets for Shiny
-Version: 0.4.2.930
+Version: 0.4.2.940
 Authors@R: c(
   person("Victor", "Perrier", email = "victor.perrier@dreamrs.fr", role = c("aut", "cre")),
   person("Fanny", "Meyer", email = "fanny.meyer@dreamrs.fr", role = c("aut")),
@@ -27,7 +27,8 @@ Authors@R: c(
   person("Brian", "Grinstead", role = c("ctb", "cph"), comment = "Spectrum"),
   person("Lokesh", "Rajendran", role = c("ctb", "cph"), comment = "pretty-checkbox"),
   person("Leon", "Gersen", role = c("ctb", "cph"), comment = "wnumb & noUiSlider"),
-  person("Timofey", "Marochkin", role = c("ctb", "cph"), comment = "air-datepicker")
+  person("Timofey", "Marochkin", role = c("ctb", "cph"), comment = "air-datepicker"),
+  person("Tobias", "Ahlin", role = c("ctb", "cph"), comment = "CSS spin")
   )
 Description: Some custom inputs widgets to use in Shiny applications, like a toggle switch to replace checkboxes. And other components to pimp your apps.
 URL: https://github.com/dreamRs/shinyWidgets

diff --git a/NAMESPACE b/NAMESPACE
@@ -2,6 +2,7 @@
 
 export(actionBttn)
 export(actionGroupButtons)
+export(addSpinner)
 export(airDatepickerInput)
 export(airMonthpickerInput)
 export(airYearpickerInput)

diff --git a/NEWS.md b/NEWS.md
@@ -4,6 +4,7 @@ shinyWidgets 0.4.2.900
 * New functions to customize `sliderInput` : `chooseSliderSkin` and `setSliderColor` by [@DivadNojnarg](https://github.com/DivadNojnarg)
 * New function `downloadBttn`, a `downloadButton` with custom appearance.
 * New widget `airDatepickerInput`, to select single, multiple and range of dates. You can also select time. And two shortcuts to select months or years.
+* New function to add spinners when outputs are recalculating.
 
 
 shinyWidgets 0.4.2

diff --git a/R/addSpinner.R b/R/addSpinner.R
@@ -0,0 +1,227 @@
+
+#' Display a spinner above an output when this one recalculate
+#'
+#' @param output An output element, typically the result of \code{renderPlot}.
+#' @param spin Style of the spinner, choice between : \code{circle}, \code{bounce}, \code{folding-cube},
+#'  \code{rotating-plane}, \code{cube-grid}, \code{fading-circle}, \code{double-bounce}, \code{dots}, \code{cube}.
+#' @param color Color for the spinner.
+#'
+#' @note The spinner don't disappear from the page, it's only masked by the plot,
+#'  so the plot must have a non-transparent background. For a more robust way to
+#'  insert loaders, see package "shinycssloaders".
+#'
+#' @return a list of tags
+#' @export
+#'
+#' @importFrom htmltools tags tagList singleton
+#'
+#' @examples
+#' \dontrun{
+#' # wrap an output:
+#' addSpinner(plotOutput("plot"))
+#'
+#' # Complete demo:
+#'
+#' if (interactive()) {
+#'
+#' library(shiny)
+#' library(shinyWidgets)
+#'
+#' ui <- fluidPage(
+#'   tags$h2("Exemple spinners"),
+#'   actionButton(inputId = "refresh", label = "Refresh", width = "100%"),
+#'   fluidRow(
+#'     column(
+#'       width = 5, offset = 1,
+#'       addSpinner(plotOutput("plot1"), spin = "circle", color = "#E41A1C"),
+#'       addSpinner(plotOutput("plot3"), spin = "bounce", color = "#377EB8"),
+#'       addSpinner(plotOutput("plot5"), spin = "folding-cube", color = "#4DAF4A"),
+#'       addSpinner(plotOutput("plot7"), spin = "rotating-plane", color = "#984EA3"),
+#'       addSpinner(plotOutput("plot9"), spin = "cube-grid", color = "#FF7F00")
+#'     ),
+#'     column(
+#'       width = 5,
+#'       addSpinner(plotOutput("plot2"), spin = "fading-circle", color = "#FFFF33"),
+#'       addSpinner(plotOutput("plot4"), spin = "double-bounce", color = "#A65628"),
+#'       addSpinner(plotOutput("plot6"), spin = "dots", color = "#F781BF"),
+#'       addSpinner(plotOutput("plot8"), spin = "cube", color = "#999999")
+#'     )
+#'   ),
+#'   actionButton(inputId = "refresh2", label = "Refresh", width = "100%")
+#' )
+#'
+#' server <- function(input, output, session) {
+#'
+#'   dat <- reactive({
+#'     input$refresh
+#'     input$refresh2
+#'     Sys.sleep(3)
+#'     Sys.time()
+#'   })
+#'
+#'   lapply(
+#'     X = seq_len(9),
+#'     FUN = function(i) {
+#'       output[[paste0("plot", i)]] <- renderPlot({
+#'         dat()
+#'         plot(sin, -pi, 2*pi)
+#'       })
+#'     }
+#'   )
+#'
+#' }
+#'
+#' shinyApp(ui, server)
+#'
+#' }
+#'
+#' }
+addSpinner <- function(output, spin = "double-bounce", color = "#112446") {
+  spin <- match.arg(
+    arg = spin, choices = c(
+      "circle", "bounce", "folding-cube", "rotating-plane", "cube-grid",
+      "fading-circle", "double-bounce", "dots", "cube"
+    )
+  )
+  alea <- paste(sample(letters, 12, T), collapse = "")
+  if (spin == "circle") {
+    tagSpin <- tags$div(
+      tags$style(
+        sprintf(
+          ".sk-circle .sk-child-%s:before {background-color: %s;}",
+          alea, color
+        )
+      ),
+      tags$div(
+        class = "sk-circle loading-spinner",
+        lapply(
+          X = seq_len(12),
+          FUN = function(i) {
+            tags$div(
+              class = sprintf("sk-circle%s sk-child sk-child-%s", i, alea)
+            )
+          }
+        )
+      )
+    )
+  } else if (spin == "double-bounce") {
+    tagSpin <- tags$div(
+      class = "spinner loading-spinner",
+      tags$div(class = "double-bounce1", style = sprintf("background-color: %s;", color)),
+      tags$div(class = "double-bounce2", style = sprintf("background-color: %s;", color))
+    )
+  } else if (spin == "folding-cube") {
+    tagSpin <- tags$div(
+      class="loading-spinner",
+      tags$style(
+        sprintf(
+          ".sk-folding-cube .sk-cube-%s:before {background-color: %s;}",
+          alea, color
+        )
+      ),
+      tags$div(
+        class="sk-folding-cube",
+        tags$div(class=sprintf("sk-cube1 sk-cube sk-cube-%s", alea)),
+        tags$div(class=sprintf("sk-cube2 sk-cube sk-cube-%s", alea)),
+        tags$div(class=sprintf("sk-cube4 sk-cube sk-cube-%s", alea)),
+        tags$div(class=sprintf("sk-cube3 sk-cube sk-cube-%s", alea))
+      )
+    )
+  } else if (spin == "rotating-plane") {
+    tagSpin <- tags$div(
+      class="loading-spinner",
+      tags$div(
+        class="rotating-plane loading-spinner",
+        style = sprintf("background-color: %s;", color)
+      )
+    )
+  } else if (spin == "cube-grid") {
+    tagSpin <- tags$div(
+      class="sk-cube-grid loading-spinner",
+      lapply(
+        X = seq_len(9),
+        FUN = function(i) {
+          tags$div(
+            style = sprintf("background-color: %s;", color),
+            class=sprintf("sk-cube sk-cube%s", i)
+          )
+        }
+      )
+    )
+  } else if (spin == "fading-circle") {
+    tagSpin <- tags$div(
+      class="spinner loading-spinner",
+      tags$style(
+        sprintf(
+          ".sk-fading-circle .sk-circle-%s:before {background-color: %s;}",
+          alea, color
+        )
+      ),
+      tags$div(
+        class="sk-fading-circle",
+        lapply(
+          X = seq_len(12),
+          FUN = function(i) {
+            tags$div(
+              class=sprintf("sk-circle%s sk-circle sk-circle-%s", i, alea)
+            )
+          }
+        )
+      )
+    )
+  } else if (spin == "bounce") {
+    tagSpin <- tags$div(
+      class="spinner-bounce loading-spinner",
+      tags$div(
+        style = sprintf("background-color: %s;", color),
+        class="bounce1"
+      ),
+      tags$div(
+        style = sprintf("background-color: %s;", color),
+        class="bounce2"
+      ),
+      tags$div(
+        style = sprintf("background-color: %s;", color),
+        class="bounce3"
+      )
+    )
+  } else if (spin == "dots") {
+    tagSpin <- tags$div(
+      class="spinner-dots loading-spinner",
+      tags$div(
+        style = sprintf("background-color: %s;", color),
+        class="dot1"
+      ),
+      tags$div(
+        style = sprintf("background-color: %s;", color),
+        class="dot2"
+      )
+    )
+  } else if (spin == "cube") {
+    tagSpin <- tags$div(
+      class="spinner-cube loading-spinner",
+      tags$div(
+        style = sprintf("background-color: %s;", color),
+        class="cube1"
+      ),
+      tags$div(
+        style = sprintf("background-color: %s;", color),
+        class="cube2"
+      )
+    )
+  }
+
+  tagList(
+    singleton(tags$head(
+      tags$link(href = "shinyWidgets/spinner/spin.css", rel = "stylesheet", type = "text/css"),
+      tags$style(".recalculating {opacity: 0.01 !important}")
+    )),
+    tags$div(
+      style = "position: relative",
+      tagSpin,
+      output
+    )
+  )
+}
+
+