56b0a45719
- Add ticket selection functionality to event show page using Stimulus - Create ticket_selection_controller.js for handling ticket quantity changes - Update ticket card component and event show view to work with Stimulus - Add comprehensive comments to all JavaScript files for better maintainability - Remove dependent: :destroy from event ticket_types association
100 lines
3.1 KiB
JavaScript
Executable File
100 lines
3.1 KiB
JavaScript
Executable File
import { Controller } from "@hotwired/stimulus"
|
|
|
|
// Controller for handling animations of featured event cards
|
|
// Uses intersection observer to trigger animations when cards come into view
|
|
export default class extends Controller {
|
|
// Define targets for the controller
|
|
static targets = ["card"]
|
|
|
|
// Define CSS classes that can be used with this controller
|
|
static classes = ["visible"]
|
|
|
|
// Define configurable values with defaults
|
|
static values = {
|
|
threshold: { type: Number, default: 0.1 }, // Percentage of element visibility needed to trigger animation
|
|
rootMargin: { type: String, default: '0px 0px -50px 0px' }, // Margin around root element for intersection detection
|
|
staggerDelay: { type: Number, default: 0.2 } // Delay between card animations in seconds
|
|
}
|
|
|
|
// Initialize the controller when it connects to the DOM
|
|
connect() {
|
|
console.log("FeaturedEventController connected")
|
|
this.setupIntersectionObserver()
|
|
this.setupStaggeredAnimations()
|
|
}
|
|
|
|
// Clean up observers when the controller disconnects
|
|
disconnect() {
|
|
if (this.observer) {
|
|
this.observer.disconnect()
|
|
}
|
|
}
|
|
|
|
// Set up intersection observer to detect when cards come into view
|
|
setupIntersectionObserver() {
|
|
// Configure observer options
|
|
const observerOptions = {
|
|
threshold: this.thresholdValue,
|
|
rootMargin: this.rootMarginValue
|
|
}
|
|
|
|
// Create intersection observer
|
|
this.observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
// Add visible class when card comes into view
|
|
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)
|
|
})
|
|
}
|
|
|
|
// Set up staggered animations for cards with progressive delays
|
|
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>
|
|
*/ |