class DisplayMode { constructor(containerId) { this.containerId = containerId || '.display-products .row'; this.container = document.querySelector(this.containerId); this.init(); } init() { const gridButton = document.getElementById('grid-view'); const listButton = document.getElementById('list-view'); gridButton.addEventListener('click', () => this.toggleView('grid')); listButton.addEventListener('click', () => this.toggleView('list')); } toggleView(viewMode) { const rowElement = document.querySelector('.vehicles-container'); // Remove 'selected' class from both buttons document.getElementById('grid-view').classList.remove('selected'); document.getElementById('list-view').classList.remove('selected'); // Add the appropriate classes based on the clicked button if (viewMode === 'grid') { rowElement.classList.remove('flex', 'flex-col', 'items-stretch'); rowElement.classList.add('grid', 'md:grid-cols-2', 'lg:grid-cols-3', 'transition-all', 'duration-500'); document.getElementById('grid-view').classList.add('selected'); } else if (viewMode === 'list') { rowElement.classList.remove('grid', 'md:grid-cols-2', 'lg:grid-cols-3'); rowElement.classList.add('flex', 'flex-col', 'items-stretch', 'transition-all', 'duration-500'); document.getElementById('list-view').classList.add('selected'); } // Update individual cards based on viewMode const cards = rowElement.querySelectorAll('.vehicle-card'); cards.forEach(card => { const vehicleImage = card.querySelector('.vehicle-image'); vehicleImage.classList.remove('w-1/4', 'w-full'); if (viewMode === 'list') { card.classList.add('flex', 'flex-row' ,'justify-start', 'items-stretch', 'gap-3') // flex flex-row justify-start gap-3 vehicleImage.classList.add('w-1/4'); } else { card.classList.remove('flex', 'flex-row' ,'justify-start', 'items-stretch', 'gap-3') vehicleImage.classList.add('w-full'); } }); } }