// Initialize mobile menu functionality
function initMobileMenu() {
const menuButton = document.querySelector('[data-landingsite-mobile-menu-toggle]');
const mobileMenu = document.querySelector('[data-landingsite-mobile-menu]');
if (menuButton && mobileMenu) {
// Remove any existing event listeners to prevent duplicates
const newMenuButton = menuButton.cloneNode(true);
menuButton.parentNode.replaceChild(newMenuButton, menuButton);
// Add fresh event listener for menu button
newMenuButton.addEventListener('click', function() {
mobileMenu.classList.toggle('hidden');
// Update aria-expanded attribute for accessibility
const isExpanded = !mobileMenu.classList.contains('hidden');
newMenuButton.setAttribute('aria-expanded', isExpanded ? 'true' : 'false');
});
// Close mobile menu when any navigation link is clicked
const mobileNavLinks = mobileMenu.querySelectorAll('a');
mobileNavLinks.forEach(link => {
link.addEventListener('click', function() {
// Close the mobile menu
mobileMenu.classList.add('hidden');
newMenuButton.setAttribute('aria-expanded', 'false');
});
});
}
}
// Calendar functionality
let currentDate = new Date();
let eventModalElement = null;
// Sample events data - you can modify this or make it dynamic
const events = {
// July 2025 events
'2025-07-20': {
title: 'Grand Opening Celebration',
type: 'featured',
description: 'Join us for our grand opening celebration with special discounts across all stores, live entertainment, and exciting giveaways!',
time: '10 AM - 8 PM'
},
'2025-07-21': {
title: 'Grand Opening Celebration',
type: 'featured',
description: 'Join us for our grand opening celebration with special discounts across all stores, live entertainment, and exciting giveaways!',
time: '10 AM - 8 PM'
},
'2025-07-22': {
title: 'Grand Opening Celebration',
type: 'featured',
description: 'Join us for our grand opening celebration with special discounts across all stores, live entertainment, and exciting giveaways!',
time: '10 AM - 8 PM'
},
// August 2025 events
'2025-08-01': {
title: 'Back to School Sale',
type: 'promotion',
description: 'Get ready for the new school year with amazing discounts on clothing, electronics, and school supplies.',
time: '10 AM - 9 PM'
},
'2025-08-05': {
title: 'Summer Food Festival',
type: 'special',
description: 'Enjoy delicious food from various vendors and restaurants in our summer food festival.',
time: '11 AM - 8 PM'
},
'2025-08-10': {
title: 'Fashion Week Showcase',
type: 'special',
description: 'Experience the latest fashion trends with runway shows and exclusive previews from our premium brands.',
time: '6 PM - 10 PM'
},
'2025-08-15': {
title: 'Customer Appreciation Day',
type: 'featured',
description: 'A special day dedicated to our valued customers with exclusive rewards, special discounts, complimentary services, and exciting giveaways!',
time: '9 AM - 6 PM'
},
'2025-08-20': {
title: 'Kids Fun Day',
type: 'special',
description: 'Bring the family for a day of fun activities, games, and entertainment for children of all ages.',
time: '10 AM - 4 PM'
},
'2025-08-25': {
title: 'Weekend Sale Event',
type: 'promotion',
description: 'Special weekend discounts across all participating stores. Don\'t miss these amazing deals!',
time: '9 AM - 9 PM'
}
};
function initCalendar() {
const calendarGrid = document.getElementById('calendarGrid');
const currentMonthElement = document.getElementById('currentMonth');
const currentYearElement = document.getElementById('currentYear');
const prevMonthButton = document.getElementById('prevMonth');
const nextMonthButton = document.getElementById('nextMonth');
eventModalElement = document.getElementById('eventModal');
if (!calendarGrid || !currentMonthElement || !currentYearElement) {
return; // Calendar elements not found
}
// Event listeners for navigation
if (prevMonthButton) {
prevMonthButton.addEventListener('click', handlePrevMonth);
}
if (nextMonthButton) {
nextMonthButton.addEventListener('click', handleNextMonth);
}
// Modal close functionality
const closeModalButton = document.getElementById('closeModal');
if (closeModalButton && eventModalElement) {
closeModalButton.addEventListener('click', handleCloseModal);
eventModalElement.addEventListener('click', function(e) {
if (e.target === eventModalElement) {
handleCloseModal();
}
});
}
// Initial render
renderCalendar();
}
function handlePrevMonth() {
currentDate.setMonth(currentDate.getMonth() - 1);
renderCalendar();
}
function handleNextMonth() {
currentDate.setMonth(currentDate.getMonth() + 1);
renderCalendar();
}
function handleCloseModal() {
if (eventModalElement) {
eventModalElement.style.display = 'none';
}
}
function handleDayClick(dateString, dayNumber) {
if (eventModalElement) {
const modalTitle = document.getElementById('modalTitle');
const modalContent = document.getElementById('modalContent');
const event = events[dateString];
if (modalTitle && modalContent) {
// Format the date for display
const date = new Date(dateString);
const dayName = date.toLocaleDateString('en-US', { weekday: 'long' });
const monthName = date.toLocaleDateString('en-US', { month: 'long' });
const year = date.getFullYear();
modalTitle.textContent = `${dayName}, ${monthName} ${dayNumber}, ${year}`;
if (event) {
// Day has events
modalContent.innerHTML = `
${dayNumber}
${dayName}
${event.title}
${capitalizeFirst(event.type)} Event
${event.time}
De Handelspost Shopping Center
${event.description}
Click outside to close this view
`;
} else {
// Day has no events
modalContent.innerHTML = `
${dayNumber}
${dayName}
No Events Scheduled
There are no special events or promotions scheduled for this day.
Visit us anyway for:
Regular shopping and browsing
Dining at our restaurants and cafes
Meeting friends and family
Check our regular opening hours
Click outside to close this view
`;
}
eventModalElement.style.display = 'flex';
}
}
}
function renderCalendar() {
const calendarGrid = document.getElementById('calendarGrid');
const currentMonthElement = document.getElementById('currentMonth');
const currentYearElement = document.getElementById('currentYear');
if (!calendarGrid || !currentMonthElement || !currentYearElement) {
return;
}
// Clear previous calendar
calendarGrid.innerHTML = '';
// Set month and year display
const months = [
'January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'
];
currentMonthElement.textContent = months[currentDate.getMonth()];
currentYearElement.textContent = currentDate.getFullYear().toString();
// Get first day of month and number of days
const firstDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
const lastDay = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
const startDate = firstDay.getDay(); // Day of week (0 = Sunday)
const daysInMonth = lastDay.getDate();
// Add empty cells for days before month starts
for (let i = 0; i < startDate; i++) {
const emptyDay = document.createElement('div');
emptyDay.className = 'h-12';
calendarGrid.appendChild(emptyDay);
}
// Add days of the month
for (let day = 1; day <= daysInMonth; day++) {
const dateString = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
const dayElement = document.createElement('div');
// Check if this is today
const today = new Date();
const isToday = currentDate.getMonth() === today.getMonth() &&
currentDate.getFullYear() === today.getFullYear() &&
day === today.getDate();
// Base classes for day cell - make ALL days clickable
let dayClasses = 'h-12 flex items-center justify-center text-sm font-medium rounded-lg cursor-pointer transition-all hover:bg-gray-100 relative hover:shadow-md';
// Add click handler to ALL days
dayElement.addEventListener('click', () => handleDayClick(dateString, day));
// Check if this day has an event and apply event-specific styling
const event = events[dateString];
if (event) {
// Color the day number based on event type
dayClasses += ` font-bold ${getEventDayTextColor(event.type)} hover:bg-opacity-20`;
// Add background color based on event type
dayClasses += ` ${getEventDayBackgroundColor(event.type)}`;
// Add colored border based on event type
dayClasses += ` ${getEventDayBorderColor(event.type)}`;
}
// Highlight today with GREEN BORDER (overrides event colors for today)
if (isToday) {
dayClasses += ' !border-2 !border-green-500 !text-green-600 !font-bold hover:bg-green-50';
}
dayElement.className = dayClasses;
dayElement.textContent = day.toString();
calendarGrid.appendChild(dayElement);
}
}
function getEventDayTextColor(eventType) {
switch (eventType) {
case 'featured':
return 'text-[var(--primary-color)]'; // Brown text
case 'special':
return 'text-[var(--accent-color)]'; // Blue text
case 'promotion':
return 'text-[var(--accent2-color)]'; // Yellow text
default:
return 'text-gray-600';
}
}
function getEventDayBackgroundColor(eventType) {
switch (eventType) {
case 'featured':
return 'bg-[var(--primary-color)]/10 hover:bg-[var(--primary-color)]/20'; // Light brown background
case 'special':
return 'bg-[var(--accent-color)]/10 hover:bg-[var(--accent-color)]/20'; // Light blue background
case 'promotion':
return 'bg-[var(--accent2-color)]/10 hover:bg-[var(--accent2-color)]/20'; // Light yellow background
default:
return 'bg-gray-100';
}
}
function getEventDayBorderColor(eventType) {
switch (eventType) {
case 'featured':
return 'border-2 border-[var(--primary-color)]'; // Brown border
case 'special':
return 'border-2 border-[var(--accent-color)]'; // Blue border
case 'promotion':
return 'border-2 border-[var(--accent2-color)]'; // Yellow border
default:
return 'border border-gray-300';
}
}
function getEventDotClass(eventType) {
switch (eventType) {
case 'featured':
return 'bg-[var(--primary-color)]';
case 'special':
return 'bg-[var(--accent-color)]';
case 'promotion':
return 'bg-[var(--accent2-color)]';
default:
return 'bg-gray-400';
}
}
function getEventTypeClass(eventType) {
switch (eventType) {
case 'featured':
return 'bg-[var(--primary-color)]/10 text-[var(--primary-color)]';
case 'special':
return 'bg-[var(--accent-color)]/10 text-[var(--accent-color)]';
case 'promotion':
return 'bg-[var(--accent2-color)]/10 text-[var(--accent2-color)]';
default:
return 'bg-gray-100 text-gray-600';
}
}
function formatDate(dateString) {
const date = new Date(dateString);
const options = {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
};
return date.toLocaleDateString('en-US', options);
}
function capitalizeFirst(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
// Export init function that will be called after page loads
export function init() {
// Small delay to ensure DOM is fully ready
setTimeout(() => {
initMobileMenu();
initCalendar();
}, 100);
}
// Export teardown function for cleanup
export function teardown() {
// Remove event listeners
const prevMonthButton = document.getElementById('prevMonth');
const nextMonthButton = document.getElementById('nextMonth');
const closeModalButton = document.getElementById('closeModal');
if (prevMonthButton) {
prevMonthButton.removeEventListener('click', handlePrevMonth);
}
if (nextMonthButton) {
nextMonthButton.removeEventListener('click', handleNextMonth);
}
if (closeModalButton) {
closeModalButton.removeEventListener('click', handleCloseModal);
}
if (eventModalElement) {
eventModalElement.removeEventListener('click', handleCloseModal);
}
}