Update index.html
This commit is contained in:
		
							parent
							
								
									e649e2f470
								
							
						
					
					
						commit
						affc29cc04
					
				
					 1 changed files with 41 additions and 44 deletions
				
			
		| 
						 | 
				
			
			@ -10,75 +10,72 @@
 | 
			
		|||
            margin: 0;
 | 
			
		||||
            padding: 0;
 | 
			
		||||
            overflow: hidden;
 | 
			
		||||
            /* Entferne den Hintergrund, der den Schleier verursacht */
 | 
			
		||||
            background-color: transparent;
 | 
			
		||||
        }
 | 
			
		||||
        #image-container {
 | 
			
		||||
        #image {
 | 
			
		||||
            position: absolute;
 | 
			
		||||
            top: 50%;
 | 
			
		||||
            left: 50%;
 | 
			
		||||
            transform: translate(-50%, -50%);
 | 
			
		||||
            max-width: 90%;
 | 
			
		||||
            max-height: 90%;
 | 
			
		||||
            display: none;
 | 
			
		||||
        }
 | 
			
		||||
        #image {
 | 
			
		||||
            max-width: 100%;
 | 
			
		||||
            max-height: 100%;
 | 
			
		||||
        }
 | 
			
		||||
        #document-id {
 | 
			
		||||
            position: absolute;
 | 
			
		||||
            bottom: 10px;
 | 
			
		||||
            left: 10px;
 | 
			
		||||
            color: white;
 | 
			
		||||
            background-color: rgba(0, 0, 0, 0.5);
 | 
			
		||||
            padding: 5px;
 | 
			
		||||
            border-radius: 3px;
 | 
			
		||||
            font-family: Arial, sans-serif;
 | 
			
		||||
            display: none; /* Verstecke die Dokument-ID standardmäßig */
 | 
			
		||||
        }
 | 
			
		||||
    </style>
 | 
			
		||||
</head>
 | 
			
		||||
<body>
 | 
			
		||||
    <div id="image-container">
 | 
			
		||||
        <img id="image" src="" alt="Document">
 | 
			
		||||
        <div id="document-id"></div>
 | 
			
		||||
    </div>
 | 
			
		||||
    <img id="image" src="" alt="Image" style="display:none;">
 | 
			
		||||
    <script>
 | 
			
		||||
        // Globale Variable, um den Status zu verfolgen
 | 
			
		||||
        let isDisplayed = false;
 | 
			
		||||
 | 
			
		||||
        window.addEventListener('message', function(event) {
 | 
			
		||||
            if (event.data.action === 'show') {
 | 
			
		||||
                // Zeige das spezifische Dokument basierend auf der URL
 | 
			
		||||
                document.getElementById('image').src = event.data.imageUrl;
 | 
			
		||||
                
 | 
			
		||||
                // Zeige optional die Dokument-ID an (nur wenn Debug aktiviert ist)
 | 
			
		||||
                if (event.data.documentId && false) { // Setze auf true für Debug
 | 
			
		||||
                    document.getElementById('document-id').textContent = "Dokument: " + event.data.documentId;
 | 
			
		||||
                    document.getElementById('document-id').style.display = 'block';
 | 
			
		||||
                } else {
 | 
			
		||||
                    document.getElementById('document-id').style.display = 'none';
 | 
			
		||||
                }
 | 
			
		||||
                
 | 
			
		||||
                document.getElementById('image-container').style.display = 'block';
 | 
			
		||||
                
 | 
			
		||||
                // Logge die Dokument-Informationen zur Fehlersuche
 | 
			
		||||
                console.log("Dokument angezeigt:", event.data);
 | 
			
		||||
                document.getElementById('image').style.display = 'block';
 | 
			
		||||
                isDisplayed = true;
 | 
			
		||||
                console.log("Showing image:", event.data.imageUrl);
 | 
			
		||||
            } else if (event.data.action === 'hide') {
 | 
			
		||||
                document.getElementById('image-container').style.display = 'none';
 | 
			
		||||
                document.getElementById('image').style.display = 'none';
 | 
			
		||||
                isDisplayed = false;
 | 
			
		||||
                console.log("Hiding image");
 | 
			
		||||
            }
 | 
			
		||||
        });
 | 
			
		||||
 | 
			
		||||
        document.addEventListener("keydown", function(event) {
 | 
			
		||||
            if (event.key === "Escape") {
 | 
			
		||||
                document.getElementById('image-container').style.display = 'none';
 | 
			
		||||
                axios.post(`https://${GetParentResourceName()}/hideFrame`, {})
 | 
			
		||||
                .then(function (response) {
 | 
			
		||||
                    console.log("Frame versteckt");
 | 
			
		||||
            if (event.key === "Escape" && isDisplayed) {
 | 
			
		||||
                document.getElementById('image').style.display = 'none';
 | 
			
		||||
                isDisplayed = false;
 | 
			
		||||
                
 | 
			
		||||
                // Sende Nachricht zurück an den Client
 | 
			
		||||
                fetch(`https://${GetParentResourceName()}/hideFrame`, {
 | 
			
		||||
                    method: 'POST',
 | 
			
		||||
                    headers: {
 | 
			
		||||
                        'Content-Type': 'application/json'
 | 
			
		||||
                    },
 | 
			
		||||
                    body: JSON.stringify({})
 | 
			
		||||
                })
 | 
			
		||||
                .catch(function (error) {
 | 
			
		||||
                    console.error("Fehler beim Verstecken des Frames:", error);
 | 
			
		||||
                .then(response => {
 | 
			
		||||
                    console.log("Frame hidden successfully");
 | 
			
		||||
                })
 | 
			
		||||
                .catch(error => {
 | 
			
		||||
                    console.error("Error hiding frame:", error);
 | 
			
		||||
                });
 | 
			
		||||
            }
 | 
			
		||||
        });
 | 
			
		||||
 | 
			
		||||
        // Sicherheitsmechanismus: Wenn die Seite geladen wird, stelle sicher, dass der Focus zurückgesetzt wird
 | 
			
		||||
        window.onload = function() {
 | 
			
		||||
            fetch(`https://${GetParentResourceName()}/pageLoaded`, {
 | 
			
		||||
                method: 'POST',
 | 
			
		||||
                headers: {
 | 
			
		||||
                    'Content-Type': 'application/json'
 | 
			
		||||
                },
 | 
			
		||||
                body: JSON.stringify({})
 | 
			
		||||
            })
 | 
			
		||||
            .catch(error => {
 | 
			
		||||
                console.error("Error notifying page load:", error);
 | 
			
		||||
            });
 | 
			
		||||
        };
 | 
			
		||||
    </script>
 | 
			
		||||
</body>
 | 
			
		||||
</html>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue