chore: Counter now embedded with Stimulus

Before this commit, Counter js was autonomous. Now it's registered
like a controller in Stimulus.
This commit is contained in:
kbe
2025-08-17 23:47:07 +02:00
parent ba3f36a5e8
commit 07a6694883
6 changed files with 68 additions and 90 deletions

View File

@@ -1,2 +1,61 @@
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static values = {
target: Number,
decimal: Boolean,
duration: { type: Number, default: 2000 }
}
connect() {
this.observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
this.animate()
this.observer.unobserve(this.element)
}
})
}, { threshold: 0.5 })
this.observer.observe(this.element)
}
disconnect() {
if (this.observer) {
this.observer.disconnect()
}
}
animate() {
const startValue = 0
const startTime = performance.now()
const updateCounter = (currentTime) => {
const elapsedTime = currentTime - startTime
const progress = Math.min(elapsedTime / this.durationValue, 1)
// Easing function for smooth animation
const easeOutQuart = 1 - Math.pow(1 - progress, 4)
let currentValue = startValue + (this.targetValue - startValue) * easeOutQuart
if (this.decimalValue && this.targetValue < 10) {
currentValue = currentValue.toFixed(1)
} else {
currentValue = Math.floor(currentValue)
}
this.element.textContent = currentValue
if (progress < 1) {
requestAnimationFrame(updateCounter)
} else {
this.element.textContent = this.decimalValue && this.targetValue < 10
? this.targetValue.toFixed(1)
: this.targetValue
}
}
requestAnimationFrame(updateCounter)
}
}

View File

@@ -1,7 +0,0 @@
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
connect() {
this.element.textContent = "Hello World!"
}
}

View File

@@ -4,8 +4,8 @@
import { application } from "./application"
import HelloController from "./hello_controller"
import ShadcnTestController from "./shadcn_test_controller"
import CounterController from "./counter_controller"
application.register("hello", HelloController)
application.register("shadcn-test", ShadcnTestController)
application.register("counter", CounterController)