86 lines
2.3 KiB
JavaScript
86 lines
2.3 KiB
JavaScript
import { Controller } from "@hotwired/stimulus"
|
|
|
|
export default class extends Controller {
|
|
static targets = ["card"]
|
|
static classes = ["visible"]
|
|
static values = {
|
|
threshold: { type: Number, default: 0.1 },
|
|
rootMargin: { type: String, default: '0px 0px -50px 0px' },
|
|
staggerDelay: { type: Number, default: 0.2 }
|
|
}
|
|
|
|
connect() {
|
|
console.log("FeaturedEventController connected")
|
|
this.setupIntersectionObserver()
|
|
this.setupStaggeredAnimations()
|
|
}
|
|
|
|
disconnect() {
|
|
if (this.observer) {
|
|
this.observer.disconnect()
|
|
}
|
|
}
|
|
|
|
setupIntersectionObserver() {
|
|
const observerOptions = {
|
|
threshold: this.thresholdValue,
|
|
rootMargin: this.rootMarginValue
|
|
}
|
|
|
|
this.observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible')
|
|
}
|
|
})
|
|
}, observerOptions)
|
|
|
|
// Observe all card elements within this controller's scope
|
|
const elements = this.cardTargets
|
|
console.log("Card targets:", elements)
|
|
elements.forEach(el => {
|
|
this.observer.observe(el)
|
|
})
|
|
}
|
|
|
|
setupStaggeredAnimations() {
|
|
console.log("Setting up staggered animations")
|
|
console.log("Card targets:", this.cardTargets)
|
|
// Add staggered animation delays to cards
|
|
this.cardTargets.forEach((card, index) => {
|
|
card.style.transitionDelay = `${index * this.staggerDelayValue}s`
|
|
card.classList.remove('visible')
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
/** Old code
|
|
<script>
|
|
// Add animation classes when elements are in view
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const observerOptions = {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
// Observe animated elements
|
|
document.querySelectorAll('.animate-fadeInUp, .animate-slideInLeft, .animate-slideInRight').forEach(el => {
|
|
observer.observe(el);
|
|
});
|
|
|
|
// Add staggered animation delays
|
|
document.querySelectorAll('.featured-event-card').forEach((card, index) => {
|
|
card.style.transitionDelay = `${index * 0.2}s`;
|
|
});
|
|
});
|
|
</script>
|
|
*/ |