merging rmarkdown branch with master

NAMESPACE

@@ -1,3 +1,4 @@
 # Generated by roxygen2: do not edit by hand
 
+export(rmd_in_header)
 export(withSpinner)

R/rmd_in_header.R

@@ -0,0 +1,81 @@
+#' Generate an html file to be included as `in_header` for Rmarkdown documents
+#' @param header_file The path to the html header file to be created
+#' @inheritParams withSpinner
+#' @export
+rmd_in_header <- function(header_file="cssloaders_in_header.html", type=getOption("spinner.type",default=1),color=getOption("spinner.color",default="#0275D8"),size=getOption("spinner.size",default=1),color.background=getOption("spinner.color.background")) {
+  file.remove(header_file)
+
+  .shinycssloaders_headers <- file(header_file,"w"); 
+  writeLines("<style>",.shinycssloaders_headers)
+  writeLines(readLines(system.file(sprintf("css-loaders/css/load%s.css",type),package="shinycssloaders")),.shinycssloaders_headers)
+  writeLines(readLines(system.file("assets/spinner.css",package="shinycssloaders"),warn = FALSE),.shinycssloaders_headers); 
+  color.alpha <- sprintf("rgba(%s,0)",paste(grDevices::col2rgb(color),collapse=","))
+
+  if (type==1) {
+    writeLines(
+      glue::glue(".load{type} .loader, .load{type} .loader:before, .load{type} .loader:after {{background: {color}}} .load{type} .loader {{color: {color}}}"),.shinycssloaders_headers
+    )
+  }
+
+  if (type %in% c(2,3) && is.null(color.background)) {
+    stop("For spinner types 2 & 3 you need to specify manually a background color. This should match the background color of the container.")
+  }
+
+  if (type == 2) {
+    writeLines(
+      glue::glue(".load{type} .loader {{color: {color}}} .load{type} .loader:before, .load{type} .loader:after {{background: {color.background};}}"),.shinycssloaders_headers
+    )
+  }
+
+  if (type == 3) {
+    writeLines(
+      glue::glue(
+        ".load{type} .loader {{
+        background: -moz-linear-gradient(left, {color} 10%, {color.alpha} 42%);
+        background: -webkit-linear-gradient(left, {color} 10%, {color.alpha} 42%);
+        background: -o-linear-gradient(left, {color} 10%, {color.alpha} 42%);
+        background: -ms-linear-gradient(left, {color} 10%, {color.alpha} 42%);
+        background: linear-gradient(to right, {color} 10%, {color.alpha} 42%);
+  }} 
+        .load{type} .loader:before {{
+        background: {color}
+        }}  
+        .load{type} .loader:after {{
+        background: {color.background};
+        }}
+        "),.shinycssloaders_headers
+    )
+  }
+
+  if (type %in% c(4,6,7)) {
+    writeLines(
+      glue::glue(".load{type} .loader {{color: {color}}}")
+    ,.shinycssloaders_headers)
+  }
+
+
+  if (type == 8) {
+    writeLines(
+      glue::glue("
+.load{type} .loader {{
+      border-top: 1.1em solid rgba({paste(grDevices::col2rgb(color),collapse=',')}, 0.2);
+      border-right: 1.1em solid rgba({paste(grDevices::col2rgb(color),collapse=',')}, 0.2);
+      border-bottom: 1.1em solid rgba({paste(grDevices::col2rgb(color),collapse=',')}, 0.2);
+      border-left: 1.1em solid {color};
+}}
+      "),.shinycssloaders_headers
+    )
+  }
+
+  # get default font-size from css, and cut it by 25%, as for outputs we usually need something smaller
+  size <- round(c(11,11,10,20,25,90,10,10)[type] * size * 0.75)
+  writeLines(
+    glue::glue(".load{type} .loader {{font-size: {size}px}}"),.shinycssloaders_headers
+  )
+  writeLines("</style>",.shinycssloaders_headers)
+
+  writeLines("<script>",.shinycssloaders_headers)
+  writeLines(readLines(system.file("assets/spinner.js",package="shinycssloaders")),.shinycssloaders_headers); 
+  writeLines("</script>",.shinycssloaders_headers)
+  close(.shinycssloaders_headers); 
+}

example/rmarkdown/cssloaders_in_header.html

@@ -0,0 +1,135 @@
+<style>
+.load1 .loader,
+.load1 .loader:before,
+.load1 .loader:after {
+  background: #ffffff;
+  -webkit-animation: load1 1s infinite ease-in-out;
+  animation: load1 1s infinite ease-in-out;
+  width: 1em;
+  height: 4em;
+}
+.load1 .loader {
+  color: #ffffff;
+  text-indent: -9999em;
+  margin: 88px auto;
+  position: relative;
+  font-size: 11px;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+.load1 .loader:before,
+.load1 .loader:after {
+  position: absolute;
+  top: 0;
+  content: '';
+}
+.load1 .loader:before {
+  left: -1.5em;
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+.load1 .loader:after {
+  left: 1.5em;
+}
+@-webkit-keyframes load1 {
+  0%,
+  80%,
+  100% {
+    box-shadow: 0 0;
+    height: 4em;
+  }
+  40% {
+    box-shadow: 0 -2em;
+    height: 5em;
+  }
+}
+@keyframes load1 {
+  0%,
+  80%,
+  100% {
+    box-shadow: 0 0;
+    height: 4em;
+  }
+  40% {
+    box-shadow: 0 -2em;
+    height: 5em;
+  }
+}
+.shiny-spinner-output-container {
+  position: relative;
+}
+
+.load-container {
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+  /* to avoid showing a vertical scrollbar
+  http://stackoverflow.com/questions/38251204/horizontal-animation-causes-vertical-scrollbar-in-css */
+  overflow:hidden; 
+  width: 100%;
+}
+
+.shiny-spinner-hidden {
+  position: absolute;
+  top:0;
+  left:0;
+  z-index: -1;
+  visibility:hidden;
+}
+.load1 .loader, .load1 .loader:before, .load1 .loader:after {background: #0275D8} .load1 .loader {color: #0275D8}
+.load1 .loader {font-size: 8px}
+</style>
+<script>
+(function() {
+var output_states = [];
+
+function show_spinner(id) {
+    $("#"+id).siblings(".load-container, .shiny-spinner-placeholder").removeClass('shiny-spinner-hidden');
+    $("#"+id).siblings(".load-container").siblings('.shiny-bound-output, .shiny-output-error').css('visibility', 'hidden');
+    // if there is a proxy div, hide the previous output
+    $("#"+id).siblings(".shiny-spinner-placeholder").siblings('.shiny-bound-output, .shiny-output-error').addClass('shiny-spinner-hidden');
+}
+
+function hide_spinner(id) {
+    $("#"+id).siblings(".load-container, .shiny-spinner-placeholder").addClass('shiny-spinner-hidden');
+    $("#"+id).siblings(".load-container").siblings('.shiny-bound-output').css('visibility', 'visible');
+    // if there is a proxy div, show the previous output in case it was hidden
+    $("#"+id).siblings(".shiny-spinner-placeholder").siblings('.shiny-bound-output').removeClass('shiny-spinner-hidden');
+}
+
+function update_spinner(id) {
+  if (!(id in output_states)) {
+    show_spinner(id);
+  }
+  if (output_states[id] <= 0) {
+    show_spinner(id);
+  } else {
+    hide_spinner(id);
+  }
+}
+
+$(document).on('shiny:bound', function(event){ 
+  /* if not bound before, then set the value to 0 */
+  if (!(event.target.id in output_states)) {
+    output_states[event.target.id] = 0;
+  }
+  update_spinner(event.target.id);
+});
+
+/* When recalculating starts, show the spinner container & hide the output */
+$(document).on('shiny:outputinvalidated', function(event) {
+  output_states[event.target.id] = 0;
+  update_spinner(event.target.id);
+});
+
+/* When new value or error comes in, hide spinner container (if any) & show the output */
+$(document).on('shiny:value shiny:error', function(event) {
+  output_states[event.target.id] = 1;
+  update_spinner(event.target.id);
+});
+}());
+</script>

example/rmarkdown/rmarkdown_example.Rmd

@@ -0,0 +1,32 @@
+---
+title: "shinycssloaders test"
+author: "Andras Sali"
+date: "12/16/2017"
+output: 
+  html_document:
+    includes:
+      in_header: cssloaders_in_header.html
+runtime: shiny
+---
+
+```{r setup, include=FALSE}
+knitr::opts_chunk$set(echo = TRUE)
+library(tidyverse)
+```
+
+## Including Plots
+
+You can also embed plots, for example:
+
+```{r pressure, echo=FALSE}
+sliderInput("sleep_time","Sleep time:",1,10,5)
+
+plotOutput("pressure") %>% shinycssloaders::withSpinner(type=1)
+
+output$pressure <- renderPlot({
+  Sys.sleep(input$sleep_time)
+  plot(1:5,1:5)
+})
+```
+
+Note that the `echo = FALSE` parameter was added to the code chunk to prevent printing of the R code that generated the plot.