diff --git a/plugins/tiddlywiki/confetti/confetti-manager.js b/plugins/tiddlywiki/confetti/confetti-manager.js new file mode 100644 index 000000000..343412d67 --- /dev/null +++ b/plugins/tiddlywiki/confetti/confetti-manager.js @@ -0,0 +1,50 @@ +/*\ +title: $:/plugins/tiddlywiki/confetti/confetti-manager.js +type: application/javascript +module-type: global + +Confetti manager + +\*/ +(function(){ + +/*jslint node: true, browser: true */ +/*global $tw: false */ +"use strict"; + +var confetti = require("$:/plugins/tiddlywiki/confetti/confetti.js"); + +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(); +}; + +exports.ConfettiManager = ConfettiManager; + +})(); diff --git a/plugins/tiddlywiki/confetti/confetti-widget.js b/plugins/tiddlywiki/confetti/confetti-widget.js new file mode 100644 index 000000000..6c78f7066 --- /dev/null +++ b/plugins/tiddlywiki/confetti/confetti-widget.js @@ -0,0 +1,67 @@ +/*\ +title: $:/plugins/tiddlywiki/confetti/confetti-widget.js +type: application/javascript +module-type: widget + +Confetti widget + +\*/ +(function(){ + +/*jslint node: true, browser: true */ +/*global $tw: false */ +"use strict"; + +var Widget = require("$:/core/modules/widgets/widget.js").widget; + +var confetti = require("$:/plugins/tiddlywiki/confetti/confetti.js"); + +var ConfettiWidget = function(parseTreeNode,options) { + this.initialise(parseTreeNode,options); +}; + +/* +Inherit from the base widget class +*/ +ConfettiWidget.prototype = new Widget(); + +/* +Render this widget into the DOM +*/ +ConfettiWidget.prototype.render = function(parent,nextSibling) { + var self = this; + // Remember parent + this.parentDomNode = parent; + // Compute attributes and execute state + this.computeAttributes(); + this.execute(); + // Launch confetti + if($tw.browser) { + var options = {}; + $tw.utils.each(this.attributes,function(attribute,name) { + options[name] = self.getAttribute(name); + }); + $tw.confettiManager.launch(options.delay,options); + } + // Render children + this.renderChildren(parent,nextSibling); +}; + +/* +Compute the internal state of the widget +*/ +ConfettiWidget.prototype.execute = function() { + // Make child widgets + this.makeChildWidgets(); +}; + +/* +Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering +*/ +ConfettiWidget.prototype.refresh = function(changedTiddlers) { + return this.refreshChildren(changedTiddlers); +}; + +exports.confetti = ConfettiWidget; + +})(); diff --git a/plugins/tiddlywiki/confetti/examples/staggered.tid b/plugins/tiddlywiki/confetti/examples/staggered.tid new file mode 100644 index 000000000..8b45ceef4 --- /dev/null +++ b/plugins/tiddlywiki/confetti/examples/staggered.tid @@ -0,0 +1,9 @@ +title: $:/plugins/tiddlywiki/confetti/examples/staggered +tags: $:/tags/ConfettiExample + +<$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 three staggered rounds of confetti +$button> diff --git a/plugins/tiddlywiki/confetti/examples/typing-trigger.tid b/plugins/tiddlywiki/confetti/examples/typing-trigger.tid new file mode 100644 index 000000000..a87bf7aab --- /dev/null +++ b/plugins/tiddlywiki/confetti/examples/typing-trigger.tid @@ -0,0 +1,10 @@ +title: $:/plugins/tiddlywiki/confetti/examples/typing-trigger +tags: $:/tags/ConfettiExample + +<$edit-text tiddler="$:/temp/confetti/launchstatus" tag="input" placeholder="Type here"/> + +<$list filter="[{$:/temp/confetti/launchstatus}match:caseinsensitive[launch]]" variable="ignore"> +Launched! +<$confetti particleCount=100/> +<$confetti particleCount=100 delay=300/> +$list> diff --git a/plugins/tiddlywiki/confetti/readme.tid b/plugins/tiddlywiki/confetti/readme.tid index faed88c6a..d9606ea6a 100644 --- a/plugins/tiddlywiki/confetti/readme.tid +++ b/plugins/tiddlywiki/confetti/readme.tid @@ -1,16 +1,50 @@ title: $:/plugins/tiddlywiki/confetti/readme +\define show-example(name) +<$let title={{{ [[$:/plugins/tiddlywiki/confetti/examples/]addsuffix<__name__>] }}}> + +For example: + +<$macrocall $name="copy-to-clipboard-above-right" src=<<__src__>>/> + +<$codeblock code={{{ [