71 lines
		
	
	
	
		
			2.6 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			71 lines
		
	
	
	
		
			2.6 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
let currentMenu = null;
 | 
						|
let currentPage = 1;
 | 
						|
 | 
						|
window.addEventListener('message', function(event) {
 | 
						|
    if (event.data.action === "open") {
 | 
						|
        currentMenu = event.data.menu;
 | 
						|
        currentPage = event.data.page;
 | 
						|
        updateMenuDisplay();
 | 
						|
        document.getElementById('menu-container').style.display = 'flex';
 | 
						|
    } else if (event.data.action === "close") {
 | 
						|
        document.getElementById('menu-container').style.display = 'none';
 | 
						|
        currentMenu = null;
 | 
						|
        currentPage = 1;
 | 
						|
    }
 | 
						|
});
 | 
						|
 | 
						|
function updateMenuDisplay() {
 | 
						|
    if (!currentMenu || !currentMenu.images) return;
 | 
						|
    
 | 
						|
    const menuImage = document.getElementById('menu-image');
 | 
						|
    menuImage.src = currentMenu.images[currentPage - 1];
 | 
						|
    
 | 
						|
    // Buttons ein-/ausblenden basierend auf der aktuellen Seite
 | 
						|
    document.getElementById('prev-page').style.display = currentPage > 1 ? 'block' : 'none';
 | 
						|
    document.getElementById('next-page').style.display = currentPage < currentMenu.images.length ? 'block' : 'none';
 | 
						|
    
 | 
						|
    document.getElementById('page-number').textContent = 
 | 
						|
        `Seite ${currentPage} von ${currentMenu.images.length}`;
 | 
						|
}
 | 
						|
 | 
						|
document.getElementById('prev-page').addEventListener('click', function() {
 | 
						|
    if (currentMenu && currentPage > 1) {
 | 
						|
        currentPage--;
 | 
						|
        updateMenuDisplay();
 | 
						|
        $.post('https://speisekarte/changePage', JSON.stringify({page: currentPage}));
 | 
						|
    }
 | 
						|
});
 | 
						|
 | 
						|
document.getElementById('next-page').addEventListener('click', function() {
 | 
						|
    if (currentMenu && currentPage < currentMenu.images.length) {
 | 
						|
        currentPage++;
 | 
						|
        updateMenuDisplay();
 | 
						|
        $.post('https://speisekarte/changePage', JSON.stringify({page: currentPage}));
 | 
						|
    }
 | 
						|
});
 | 
						|
 | 
						|
document.getElementById('close-button').addEventListener('click', function() {
 | 
						|
    document.getElementById('menu-container').style.display = 'none';
 | 
						|
    currentMenu = null;
 | 
						|
    currentPage = 1;
 | 
						|
    $.post('https://speisekarte/close', JSON.stringify({}));
 | 
						|
});
 | 
						|
 | 
						|
// ESC-Taste Handler
 | 
						|
document.addEventListener('keyup', function(event) {
 | 
						|
    if (event.key === "Escape") {
 | 
						|
        if (currentMenu) {
 | 
						|
            document.getElementById('menu-container').style.display = 'none';
 | 
						|
            currentMenu = null;
 | 
						|
            currentPage = 1;
 | 
						|
            $.post('https://speisekarte/close', JSON.stringify({}));
 | 
						|
        }
 | 
						|
    }
 | 
						|
});
 | 
						|
 | 
						|
// Fehlerbehandlung für Bilder
 | 
						|
document.getElementById('menu-image').addEventListener('error', function() {
 | 
						|
    console.error('Fehler beim Laden des Bildes:', this.src);
 | 
						|
    this.src = 'img/error.jpg'; // Optional: Zeige ein Fehlerbild
 | 
						|
});
 | 
						|
 |