5.1 Modern JavaScript Patterns

We use ES6 classes, arrow functions, destructuring, and template literals where they improve code readability and maintainability. However, we don’t use new features just for the sake of using them: each language feature should serve a purpose in making our code clearer or more efficient.

// Component-based JavaScript for both WordPress and Laravel
class ImageGallery {
    constructor(element, options = {}) {
        this.element = element;
        this.options = {
            autoplay: false,
            showThumbnails: true,
            ...options
        };

        this.currentIndex = 0;
        this.images = this.element.querySelectorAll('.gallery-image');

        this.init();
    }

    init() {
        this.bindEvents();
        if (this.options.autoplay) {
            this.startAutoplay();
        }
    }

    bindEvents() {
        const nextBtn = this.element.querySelector('.gallery-next');
        const prevBtn = this.element.querySelector('.gallery-prev');

        nextBtn?.addEventListener('click', () => this.next());
        prevBtn?.addEventListener('click', () => this.previous());

        // Keyboard accessibility
        this.element.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowRight') this.next();
            if (e.key === 'ArrowLeft') this.previous();
        });
    }

    next() {
        this.currentIndex = (this.currentIndex + 1) % this.images.length;
        this.updateDisplay();
    }

    previous() {
        this.currentIndex = this.currentIndex === 0
            ? this.images.length - 1
            : this.currentIndex - 1;
        this.updateDisplay();
    }

    updateDisplay() {
        this.images.forEach((img, index) => {
            img.classList.toggle('active', index === this.currentIndex);
        });
    }
}

// Initialize galleries
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.image-gallery').forEach(gallery => {
        new ImageGallery(gallery);
    });
});