Merge pull request #2 from hypebright/fadeout

Add fadeOut effect for stopping fireworks

DESCRIPTION

@@ -1,6 +1,6 @@
 Package: fireworks
 Title: Fireworks for your 'Shiny' application
-Version: 0.1.0
+Version: 0.1.1
 Authors@R: 
     person("Veerle", "van Leemput", , "[email protected]", role = c("aut", "cre"))
 Description: 'fireworks' is a wrapper around the 'fireworks-js' library that contains

NEWS.md

@@ -0,0 +1,4 @@
+# fireworks 0.1.1
+
+* Added a `fadeOut` argument to the `stop` method to control whether the fireworks fade out or disappear instantly. The effects lasts 2000 ms to remove the fireworks in a natural manner. Thanks to @laresbernardo for the suggestion in issue #1. Example can be found in `inst/examples/02-fireworks-on-demand.R`.
+* Added a `NEWS.md` file to track changes to the package.

R/fireworks.R

@@ -59,7 +59,7 @@ fireworks <- function(id, width = "100%", height = "400px", options = list()) {
 #' @import R6
 #' @export
 Fireworks <- R6::R6Class(
-  "fireworks",
+  "Fireworks",
   public = list(
     #' @details
     #' Create fireworks.
@@ -94,12 +94,15 @@ Fireworks <- R6::R6Class(
     },
     #' @details
     #' Stop the fireworks
-    stop = function(){
+    #' @param fadeOut Whether to fade out the fireworks before stopping. Note that
+    #' this will take 2000ms to complete.
+    stop = function(fadeOut = FALSE){
       if (is.null(private$.id)) {
-        private$.session$sendCustomMessage("fireworks-stop", list())
+        private$.session$sendCustomMessage("fireworks-stop", list(fadeOut = fadeOut))
       } else {
         for (i in 1:length(private$.id)) {
-          private$.session$sendCustomMessage("fireworks-stop", list(id = private$.id[[i]]))
+          private$.session$sendCustomMessage("fireworks-stop", list(id = private$.id[[i]],
+                                                                    fadeOut = fadeOut))
         }
       }
       invisible(self)

README.md

@@ -132,6 +132,18 @@ fw <- Fireworks$new(options = list(hue = list(min = 0, max = 45),
                                    traceSpeed = 5))
 ```
 
+### Natural stop effect
+
+By default, fireworks are removed immediately when `stop` is called. You can add a natural stop effect by setting `fadeOut = TRUE`:
+
+```r
+fw$stop(fadeOut = TRUE)
+```
+
+The effects takes 2000ms and changes the intensity of the fireworks to `1`:
+
+![](./inst/images/fireworks-fadeout.gif)
+
 ## Acknowledgements
 
 As this is a wrapper around an existing library, I want to give credit to the original authors:

inst/examples/02-fireworks-on-demand.R

@@ -22,7 +22,7 @@ server <- function(input, output, session) {
   }) |> bindEvent(input$launch)
 
   observe({
-    fw$stop()
+    fw$stop(fadeOut = TRUE)
   }) |> bindEvent(input$stop)
 
 }

srcjs/main.js

@@ -31,10 +31,28 @@ Shiny.addCustomMessageHandler("fireworks-start", function(message) {
 
 Shiny.addCustomMessageHandler("fireworks-stop", function(message) {
   const identifier = message.id == null ? "full-screen" : message.id;
-  window[`fireworks-${identifier}`].stop();
-
-  if (message.id == null) {
-    document.body.removeChild(document.querySelector(".fireworks-full-screen"));
+  const currentOpts = window[`fireworks-${identifier}`].currentOptions;
+
+  const stopFireworks = () => {
+    window[`fireworks-${identifier}`].stop();
+    if (message.id == null) {
+      document.body.removeChild(
+        document.querySelector(".fireworks-full-screen")
+      );
+    }
+  };
+
+  if (message.fadeOut) {
+    window[`fireworks-${identifier}`].updateOptions({
+      ...currentOpts,
+      intensity: 1
+    });
+    // add 2000 ms delay to allow fireworks to fade out
+    setTimeout(() => {
+      stopFireworks();
+    }, 2000);
+  } else {
+    stopFireworks();
   }
 });