-
-
Save artpi/1eed7ac11eb980d9f7837041d054ef3f to your computer and use it in GitHub Desktop.
// This will animate an "Explosion" whenever you complete a TODO in Roam Research. | |
// See https://deliber.at/roam for more Roam goodies. | |
// Put this file under {{[[roam/js]]}} block. I have a page roam/js. Under that, I have {{[[roam/js]]}} and under that the javascript block | |
document.addEventListener("click", function ( e ) { | |
const target = e.target; | |
if ( | |
target.tagName === "INPUT" && | |
target.parentElement.className === "check-container" | |
) { | |
if (target.type === "checkbox" && target.checked ) { | |
const position = target.getBoundingClientRect(); | |
setTimeout(() => { | |
explode( position.x, position.y ); | |
}, 50); | |
} | |
} | |
}); | |
// The animation code below is adapted from https://codepen.io/explosion/pen/zKEovE | |
const requestedFrames = []; | |
const explode = (x, y) => { | |
const colors = [ '#ffc000', '#ff3b3b', '#ff8400' ]; | |
const bubbles = 25; | |
let particles = []; | |
let ratio = window.devicePixelRatio; | |
let c = document.createElement('canvas'); | |
let ctx = c.getContext('2d'); | |
c.style.position = 'absolute'; | |
c.style.left = (x - 100) + 'px'; | |
c.style.top = (y - 100) + 'px'; | |
c.style.pointerEvents = 'none'; | |
c.style.width = 200 + 'px'; | |
c.style.height = 200 + 'px'; | |
c.style.zIndex = 10000; | |
c.width = 200 * ratio; | |
c.height = 200 * ratio; | |
document.body.appendChild(c); | |
for(var i = 0; i < bubbles; i++) { | |
particles.push({ | |
x: c.width / 2, | |
y: c.height / 2, | |
radius: r(20, 30), | |
color: colors[Math.floor(Math.random() * colors.length)], | |
rotation: r(0, 360, true), | |
speed: r(8, 12), | |
friction: 0.9, | |
opacity: r(0, 0.5, true), | |
yVel: 0, | |
gravity: 0.1 | |
}); | |
} | |
render(particles, ctx, c.width, c.height); | |
setTimeout(() => { | |
document.body.removeChild(c); | |
requestedFrames.forEach( frame => cancelAnimationFrame( frame ) ); | |
}, 1000); | |
} | |
const render = (particles, ctx, width, height) => { | |
requestedFrames.push( requestAnimationFrame(() => render(particles, ctx, width, height)) ); | |
ctx.clearRect(0, 0, width, height); | |
particles.forEach((p, i) => { | |
p.x += p.speed * Math.cos(p.rotation * Math.PI / 180); | |
p.y += p.speed * Math.sin(p.rotation * Math.PI / 180); | |
p.opacity -= 0.01; | |
p.speed *= p.friction; | |
p.radius *= p.friction; | |
p.yVel += p.gravity; | |
p.y += p.yVel; | |
if(p.opacity < 0 || p.radius < 0) return; | |
ctx.beginPath(); | |
ctx.globalAlpha = p.opacity; | |
ctx.fillStyle = p.color; | |
ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, false); | |
ctx.fill(); | |
}); | |
return ctx; | |
} | |
const r = (a, b, c) => parseFloat((Math.random() * ((a ? a : 1) - (b ? b : 0)) + (b ? b : 0)).toFixed(c ? c : 0)); | |
Yes I'm having the same problem with self executing anonymous functions in Roam sometimes but not reliably
The wrapping anonymous function gave an execution error, otherwise works great!
Edit: @ErikPlachta Remove
( function () {
and} )()
at the head and tail respectively
Thank you @sirwolfgang ✅💣 Working 👍
it doesn't work if the block has some references in it. can you confirm the bug?
I made the following changes:
- I rewrote it to follow @dvargas92495 approach in https://github.com/dvargas92495/roam-js-extensions/blob/d86f8beb9365ad182fc5624e596e2d761718544f/src/entries/todo-trigger.ts to catch all the input fields instead of the mutation observer. That should also explode todos in references, etc
- Removed the anonymous function wrapping it all per all your comments - thank you!
Now the script should explode todos also in references, etc.
it doesn't work if the block has some references in it. can you confirm the bug?
It should now, it was indeed a bug.
UUUHHHH thanks!
Somehow I only got an explosion when I un-complete the task. Does anyone have the same problem? Thanks!
it happened to me too, I had to reload the browser
Hey @artpi, how would you feel if I merged this in with the todo-trigger
extension?
@dvargas92495 , yes, please do! I find it impossible to maintain this and I bet it will be easier to keep working if part of the larger project
The wrapping anonymous function gave an execution error, otherwise works great!
Edit: @ErikPlachta Remove
( function () {
and} )()
at the head and tail respectively