From 967670605261a46d5fa44b2d80ce580b3bd82dec Mon Sep 17 00:00:00 2001
From: "jeremy@jermolene.com" <jeremy@jermolene.com>
Date: Mon, 16 Jan 2023 11:05:10 +0000
Subject: [PATCH] Add support for delay parameter

---
 plugins/tiddlywiki/confetti/readme.tid |  3 ++
 plugins/tiddlywiki/confetti/startup.js | 68 ++++++++++++++++++++------
 2 files changed, 55 insertions(+), 16 deletions(-)

diff --git a/plugins/tiddlywiki/confetti/readme.tid b/plugins/tiddlywiki/confetti/readme.tid
index f7ac4e569..faed88c6a 100644
--- a/plugins/tiddlywiki/confetti/readme.tid
+++ b/plugins/tiddlywiki/confetti/readme.tid
@@ -13,6 +13,7 @@ The confetti cannon is controlled using messages.
 The `tm-confetti-launch` message launches the confetti cannon. The following options are supported:
 
 |!Name |!Description |!Default |
+|''delay'' |Number of milliseconds to delay the launch |0 |
 |''particleCount'' |The number of confetti to launch |50 |
 |''angle'' |The angle in which to launch the confetti, in degrees (90 is straight up) |90 |
 |''spread'' |How far off center the confetti can go, in degrees. 45 means the confetti will launch at the defined `angle` plus or minus 22.5 degrees |45 |
@@ -31,6 +32,8 @@ The `tm-confetti-launch` message launches the confetti cannon. The following opt
 
 <$button>
 <$action-sendmessage $message="tm-confetti-launch"/>
+<$action-sendmessage $message="tm-confetti-launch" originY=0.6 spread=70 delay=300/>
+<$action-sendmessage $message="tm-confetti-launch" originY=0.55 spread=30 delay=600/>
 Launch
 </$button>
 
diff --git a/plugins/tiddlywiki/confetti/startup.js b/plugins/tiddlywiki/confetti/startup.js
index bed344e0c..391da3878 100644
--- a/plugins/tiddlywiki/confetti/startup.js
+++ b/plugins/tiddlywiki/confetti/startup.js
@@ -22,31 +22,67 @@ exports.synchronous = true;
 
 // Install the root widget event handlers
 exports.startup = function() {
+	var manager = new ConfettiManager();
 	$tw.rootWidget.addEventListener("tm-confetti-launch",function(event) {
 		var paramObject = event.paramObject || {},
-			options = {};
-		options.particleCount = paramObject.particleCount && $tw.utils.parseNumber(paramObject.particleCount);
-		options.angle = paramObject.angle && $tw.utils.parseNumber(paramObject.angle);
-		options.spread = paramObject.spread && $tw.utils.parseNumber(paramObject.spread);
-		options.startVelocity = paramObject.startVelocity && $tw.utils.parseNumber(paramObject.startVelocity);
-		options.decay = paramObject.decay && $tw.utils.parseNumber(paramObject.decay);
-		options.gravity = paramObject.gravity && $tw.utils.parseNumber(paramObject.gravity);
-		options.drift = paramObject.drift && $tw.utils.parseNumber(paramObject.drift);
-		options.ticks = paramObject.ticks && $tw.utils.parseNumber(paramObject.ticks);
+			options = {},
+			extractNumericParameter = function(name) {
+				options[name] = paramObject[name] && $tw.utils.parseNumber(paramObject[name]);
+			},
+			extractListParameter = function(name) {
+				options[name] = paramObject[name] && $tw.utils.parseStringArray(paramObject[name]);
+			},
+			extractBooleanParameter = function(name) {
+				options[name] = paramObject[name] && paramObject[name] === "yes";
+			};
+		$tw.utils.each("particleCount angle spread startVelocity decay gravity drift ticks scalar zIndex".split(" "),function(name) {
+			extractNumericParameter(name);
+		});
+		$tw.utils.each("colors shapes".split(" "),function(name) {
+			extractListParameter(name);
+		});
 		options.origin = {
 			x: paramObject.originX && $tw.utils.parseNumber(paramObject.originX),
 			y: paramObject.originY && $tw.utils.parseNumber(paramObject.originY)
 		};
-		options.colors = paramObject.colors && $tw.utils.parseStringArray(paramObject.colors);
-		options.shapes = paramObject.shapes && $tw.utils.parseStringArray(paramObject.shapes);
-		options.scalar = paramObject.scalar && $tw.utils.parseNumber(paramObject.scalar);
-		options.zIndex = paramObject.zIndex && $tw.utils.parseNumber(paramObject.zIndex);
-		options.disableForReducedMotion = paramObject.disableForReducedMotion && paramObject.disableForReducedMotion === "yes";
-		confetti(options);
+		extractBooleanParameter("disableForReducedMotion");
+		var delay = paramObject.delay ? $tw.utils.parseNumber(paramObject.delay) : 0;
+		manager.launch(delay,options);
 	});
 	$tw.rootWidget.addEventListener("tm-confetti-reset",function(event) {
-		confetti.reset();
+		manager.reset();
 	});
 };
 
+function ConfettiManager() {
+	this.outstandingTimers = [];
+}
+
+ConfettiManager.prototype.launch = function (delay,options) {
+	var self = this;
+	if(delay > 0) {
+		var id = setTimeout(function() {
+			var p = self.outstandingTimers.indexOf(id);
+			if(p !== -1) {
+				self.outstandingTimers.splice(p,1);
+			} else {
+				console.log("Confetti Manager Error: Cannot find previously stored timer ID");
+				debugger;
+			}
+			confetti(options);
+		},delay);
+		this.outstandingTimers.push(id);
+	} else {
+		confetti(options);
+	}
+};
+
+ConfettiManager.prototype.reset = function () {
+	$tw.utils.each(this.outstandingTimers,function(id) {
+		clearTimeout(id);
+	});
+	this.outstandingTimers = [];
+	confetti.reset();
+};
+
 })();