Sha256: bf13a99307f3e7743e8571d8d6991febcf0edf1b0cc80d639390633c041be0fa
Contents?: true
Size: 1.2 KB
Versions: 27
Compression:
Stored size: 1.2 KB
Contents
import { Controller } from "@hotwired/stimulus"
import confetti from "libraries/canvas-confetti"
export default class extends Controller {
connect() {
if(this.canvas == undefined) this.createCanvas()
// Create confetti object
let canvas = this.canvas
this.confetti = confetti.create(canvas, {resize: true})
// Fire!
this.fire(0.25, {spread: 26, startVelocity: 55})
this.fire(0.2, {spread: 60})
this.fire(0.35, {spread: 100, decay: 0.91, scalar: 0.8})
this.fire(0.1, {speed: 120, startVelocity: 25, decay: 0.92, scalar: 1.2})
this.fire(0.1, {speed: 120, startVelocity: 45})
// Remove canvas after 5 seconds
setTimeout(function() {
document.body.removeChild(canvas)
}, 5000)
}
fire(particleRatio, options) {
let count = 200
let defaults = {origin: {y: 0.7}}
this.confetti(Object.assign({}, defaults, options, {
particleCount: Math.floor(count * particleRatio)
}))
}
createCanvas() {
document.body.insertAdjacentHTML('beforeend', `<canvas id="confetti" class="fixed inset-0 w-full h-full pointer-events-none z-50"></canvas>`)
}
get canvas() {
return document.querySelector("#confetti")
}
}
Version data entries
27 entries across 27 versions & 1 rubygems