1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-10-05 18:30:46 +00:00

Add support for delay parameter

This commit is contained in:
jeremy@jermolene.com 2023-01-16 11:05:10 +00:00
parent c977baebca
commit 9676706052
2 changed files with 55 additions and 16 deletions

View File

@ -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: The `tm-confetti-launch` message launches the confetti cannon. The following options are supported:
|!Name |!Description |!Default | |!Name |!Description |!Default |
|''delay'' |Number of milliseconds to delay the launch |0 |
|''particleCount'' |The number of confetti to launch |50 | |''particleCount'' |The number of confetti to launch |50 |
|''angle'' |The angle in which to launch the confetti, in degrees (90 is straight up) |90 | |''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 | |''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> <$button>
<$action-sendmessage $message="tm-confetti-launch"/> <$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 Launch
</$button> </$button>

View File

@ -22,31 +22,67 @@ exports.synchronous = true;
// Install the root widget event handlers // Install the root widget event handlers
exports.startup = function() { exports.startup = function() {
var manager = new ConfettiManager();
$tw.rootWidget.addEventListener("tm-confetti-launch",function(event) { $tw.rootWidget.addEventListener("tm-confetti-launch",function(event) {
var paramObject = event.paramObject || {}, var paramObject = event.paramObject || {},
options = {}; options = {},
options.particleCount = paramObject.particleCount && $tw.utils.parseNumber(paramObject.particleCount); extractNumericParameter = function(name) {
options.angle = paramObject.angle && $tw.utils.parseNumber(paramObject.angle); options[name] = paramObject[name] && $tw.utils.parseNumber(paramObject[name]);
options.spread = paramObject.spread && $tw.utils.parseNumber(paramObject.spread); },
options.startVelocity = paramObject.startVelocity && $tw.utils.parseNumber(paramObject.startVelocity); extractListParameter = function(name) {
options.decay = paramObject.decay && $tw.utils.parseNumber(paramObject.decay); options[name] = paramObject[name] && $tw.utils.parseStringArray(paramObject[name]);
options.gravity = paramObject.gravity && $tw.utils.parseNumber(paramObject.gravity); },
options.drift = paramObject.drift && $tw.utils.parseNumber(paramObject.drift); extractBooleanParameter = function(name) {
options.ticks = paramObject.ticks && $tw.utils.parseNumber(paramObject.ticks); 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 = { options.origin = {
x: paramObject.originX && $tw.utils.parseNumber(paramObject.originX), x: paramObject.originX && $tw.utils.parseNumber(paramObject.originX),
y: paramObject.originY && $tw.utils.parseNumber(paramObject.originY) y: paramObject.originY && $tw.utils.parseNumber(paramObject.originY)
}; };
options.colors = paramObject.colors && $tw.utils.parseStringArray(paramObject.colors); extractBooleanParameter("disableForReducedMotion");
options.shapes = paramObject.shapes && $tw.utils.parseStringArray(paramObject.shapes); var delay = paramObject.delay ? $tw.utils.parseNumber(paramObject.delay) : 0;
options.scalar = paramObject.scalar && $tw.utils.parseNumber(paramObject.scalar); manager.launch(delay,options);
options.zIndex = paramObject.zIndex && $tw.utils.parseNumber(paramObject.zIndex);
options.disableForReducedMotion = paramObject.disableForReducedMotion && paramObject.disableForReducedMotion === "yes";
confetti(options);
}); });
$tw.rootWidget.addEventListener("tm-confetti-reset",function(event) { $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();
};
})(); })();