kbe/aperonight
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

chore: Counter now embedded with Stimulus

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

13
app/javascript/application.js
View File

@@ -1,16 +1,3 @@
// Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
import "./controllers"
import Counter from "./components/counter"
// Initialize counters when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
const counters = document.querySelectorAll('.counter')
counters.forEach(counter => new Counter(counter))
})
// Re-initialize counters on Turbo page loads
document.addEventListener('turbo:load', () => {
const counters = document.querySelectorAll('.counter')
counters.forEach(counter => new Counter(counter))
})

61
app/javascript/components/counter.js
View File

@@ -1,61 +0,0 @@
export default class Counter {
constructor(element) {
this.element = element
this.target = parseFloat(element.dataset.target)
this.decimal = element.dataset.decimal === 'true'
this.duration = 2000
this.startTime = null
this.init()
}
init() {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
this.animate()
observer.unobserve(this.element)
}
})
}, { threshold: 0.5 })
observer.observe(this.element)
}
animate() {
const startValue = 0
const startTime = performance.now()
const updateCounter = (currentTime) => {
const elapsedTime = currentTime - startTime
const progress = Math.min(elapsedTime / this.duration, 1)
// Easing function for smooth animation
const easeOutQuart = 1 - Math.pow(1 - progress, 4)
let currentValue = startValue + (this.target - startValue) * easeOutQuart
if (this.decimal && this.target < 10) {
currentValue = currentValue.toFixed(1)
} else {
currentValue = Math.floor(currentValue)
}
this.element.textContent = currentValue
if (progress < 1) {
requestAnimationFrame(updateCounter)
} else {
this.element.textContent = this.decimal && this.target < 10 ? this.target.toFixed(1) : this.target
}
}
requestAnimationFrame(updateCounter)
}
}
// Initialize all counters
document.addEventListener('DOMContentLoaded', () => {
const counters = document.querySelectorAll('.counter')
counters.forEach(counter => new Counter(counter))
})

59
app/javascript/controllers/counter_controller.js
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)
}
}

7
app/javascript/controllers/hello_controller.js
View File

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

4
app/javascript/controllers/index.js
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)

14
app/views/pages/home.html.erb
View File

@@ -37,7 +37,7 @@
<div class="absolute inset-0 bg-gradient-to-br from-purple-600/20 to-indigo-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="relative">
<div class="text-5xl md:text-6xl font-light bg-gradient-to-r from-purple-400 via-indigo-400 to-pink-400 bg-clip-text text-transparent mb-3">
<span class="counter" data-target="2473">0</span>
<span class="counter" data-controller="counter" data-counter-target-value="127">0</span>
</div>
<p class="text-gray-200 font-mono uppercase tracking-widest text-sm font-medium">
Événements organisés
@@ -53,7 +53,7 @@
<div class="absolute inset-0 bg-gradient-to-br from-purple-600/20 to-indigo-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="relative">
<div class="text-5xl md:text-6xl font-light bg-gradient-to-r from-purple-400 via-indigo-400 to-pink-400 bg-clip-text text-transparent mb-3">
<span class="counter" data-target="15420">0</span>+
<span class="counter" data-controller="counter" data-counter-target-value="1433">0</span>+
</div>
<p class="text-gray-200 font-mono uppercase tracking-widest text-sm font-medium">
Membres actifs
@@ -69,7 +69,7 @@
<div class="absolute inset-0 bg-gradient-to-br from-purple-600/20 to-indigo-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="relative">
<div class="text-5xl md:text-6xl font-light bg-gradient-to-r from-purple-400 via-indigo-400 to-pink-400 bg-clip-text text-transparent mb-3">
<span class="counter" data-target="4.8" data-decimal="true">0</span>/5
<span class="counter" data-controller="counter" data-counter-target-value="4.4" data-counter-decimal-value="true">0</span>/5
</div>
<p class="text-gray-200 font-mono uppercase tracking-widest text-sm font-medium">
Note moyenne des soirées
@@ -84,28 +84,28 @@
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 mt-12">
<div class="text-center">
<div class="text-3xl font-bold text-purple-300">
<span class="counter" data-target="89">0</span>%
<span class="counter" data-controller="counter" data-counter-target-value="79">0</span>%
</div>
<p class="text-gray-300 text-sm font-mono uppercase tracking-wide font-medium">Taux de remplissage</p>
</div>
<div class="text-center">
<div class="text-3xl font-bold text-purple-300">
<span class="counter" data-target="12">0</span>
<span class="counter" data-controller="counter" data-counter-target-value="12">0</span>
</div>
<p class="text-gray-300 text-sm font-mono uppercase tracking-wide font-medium">Arrondissements</p>
</div>
<div class="text-center">
<div class="text-3xl font-bold text-purple-300">
<span class="counter" data-target="156">0</span>
<span class="counter" data-controller="counter" data-counter-target-value="156">0</span>
</div>
<p class="text-gray-300 text-sm font-mono uppercase tracking-wide font-medium">Établissements partenaires</p>
</div>
<div class="text-center">
<div class="text-3xl font-bold text-purple-300">
<span class="counter" data-target="98">0</span>%
<span class="counter" data-controller="counter" data-counter-target-value="98">0</span>%
</div>
<p class="text-gray-300 text-sm font-mono uppercase tracking-wide font-medium">Satisfaction client</p>
</div>