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
 | |
| });
 | |
| 
 | 
