51 lines
2.2 KiB
JavaScript
51 lines
2.2 KiB
JavaScript
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');
|
|
}
|
|
});
|
|
}
|
|
}
|