add fadeOut arg to stop method

R/fireworks.R

@@ -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)

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();
   }
 });