|
|
| Zeile 1: |
Zeile 1: |
| <!--Test-Widget von Christopher zum Austesten des GOV-Aufrufes (eigentlich für das GenWiki)--> | | <!--Test-Widget von Christopher zum Austesten des GOV-Aufrufes (eigentlich für das GenWiki)--> |
| <!--<h1>Ajax-Variante mit wiki</h1>
| | <h1>Aufruf von GOV mit Iframe</h1> |
| <div id="widget-container"></div>
| | <iframe src="https://gov.genealogy.net/item/wikihtml/HOHAUSJO30MX" width="1100" height="1100"></iframe> |
| | |
| <script>
| |
| (function () {
| |
| const fetchURL = "https://gov.genealogy.net/item/wikihtml/SCHERGJO54EJ";
| |
| | |
| fetch(fetchURL)
| |
| .then(response => {
| |
| if (!response.ok) {
| |
| throw new Error(`HTTP-Fehler! Status: ${response.status}`);
| |
| }
| |
| return response.text();
| |
| })
| |
| .then(html => {
| |
| const widgetContainer = document.getElementById('widget-container');
| |
| | |
| // Shadow DOM erstellen
| |
| const shadow = widgetContainer.attachShadow({ mode: 'open' });
| |
| | |
| // Stile für das Widget im Shadow DOM hinzufügen
| |
| const style = document.createElement('style');
| |
| style.textContent = `
| |
| :host {
| |
| all: initial; /* Verhindert globale Stile */
| |
| display: block;
| |
| max-width: 1000px; /* Erweitere die Breite */
| |
| margin: 20px auto;
| |
| padding: 15px;
| |
| border: 1px solid #ccc;
| |
| background-color: #f9f9f9;
| |
| overflow: auto;
| |
| font-family: Arial, sans-serif; /* Setze Schriftart auf Arial */
| |
| }
| |
| | |
| table {
| |
| width: 100%;
| |
| table-layout: fixed; /* Verhindert Überdehnung */
| |
| border-collapse: collapse; /* Entfernt doppelte Rahmenlinien */
| |
| margin: 10px 0;
| |
| }
| |
| | |
| th, td {
| |
| border: 1px solid #ddd; /* Einfache Rahmenlinie */
| |
| padding: 10px;
| |
| text-align: left;
| |
| word-wrap: break-word; /* Zeilenumbruch für lange Wörter */
| |
| font-family: Arial, sans-serif; /* Schriftart innerhalb der Tabelle */
| |
| }
| |
| | |
| th {
| |
| background-color: #f2f2f2;
| |
| }
| |
| | |
| ul {
| |
| padding-left: 20px;
| |
| margin: 10px 0;
| |
| }
| |
| | |
| object {
| |
| max-width: 100%; /* Skaliere Karten auf Containerbreite */
| |
| height: auto;
| |
| display: block;
| |
| margin: 10px auto;
| |
| }
| |
| | |
| a {
| |
| color: #007BFF; /* Linkfarbe */
| |
| text-decoration: none;
| |
| }
| |
| | |
| a:hover {
| |
| text-decoration: underline;
| |
| }
| |
| `;
| |
| | |
| // Geladenen HTML-Inhalt einfügen
| |
| const content = document.createElement('div');
| |
| content.innerHTML = html;
| |
| | |
| // Stile und Inhalte in das Shadow DOM einfügen
| |
| shadow.appendChild(style);
| |
| shadow.appendChild(content);
| |
| })
| |
| .catch(error => {
| |
| console.error('Fehler beim Laden:', error);
| |
| const widgetContainer = document.getElementById('widget-container');
| |
| widgetContainer.textContent = "Fehler: Inhalte konnten nicht geladen werden.";
| |
| });
| |
| })();
| |
| </script>-->
| |
| | |
| | |
| <h1>Variante: Einfacher iframe mit <!--{$CallType|escape:'url'}--></h1>
| |
| <div style="width: 100vw; height: 0; padding-bottom: 160%; position: relative;">
| |
| <iframe src="https://gov.genealogy.net/item/<!--{$CallType|escape:'url'}-->/<!--{$GOVID|escape:'url'}-->" style="position: absolute; top: 0; left: 0; width: vw; height: 100%; transform: scale(1.8); /* Skaliere den iframe-Inhalt */" frameborder="0" ></iframe>
| |
| </div>
| |
| | |
| <h1>Variante: responsiv mit <!--{$CallType|escape:'url'}--></h1>
| |
| <!--
| |
| <style>
| |
| body {
| |
| margin: 0;
| |
| padding: 0;
| |
| font-family: Arial, sans-serif;
| |
| }
| |
| | |
| .iframe-container {
| |
| width: 100%; /* Container hat immer die volle Breite des Viewports */
| |
| position: relative; /* Wichtig für absolute Positionierung */
| |
| padding-top: 56.25%; /* Seitenverhältnis 16:9 */
| |
|
| |
| }
| |
| | |
| iframe {
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| width: 100vw; /* Breite des Viewports */
| |
| height: calc(100vw * 0.5625); /* Höhe proportional zur Breite (16:9) */
| |
| transform-origin: top left; /* Skalierung startet oben links */
| |
| }
| |
| | |
| /* Media Queries für kleinere Bildschirme */
| |
| @media (max-width: 768px) {
| |
| iframe {
| |
| transform: scale(0.9); /* Skaliere den iframe-Inhalt */
| |
| }
| |
| }
| |
| | |
| @media (max-width: 480px) {
| |
| iframe {
| |
| transform: scale(0.8); /* Weitere Skalierung für kleine Geräte */
| |
| }
| |
| }
| |
| </style>
| |
| | |
| <div class="iframe-container">
| |
| <iframe src="https://gov.genealogy.net/item/<!--{$CallType|escape:'url'}-->/<!--{$GOVID|escape:'url'}-->" allowfullscreen></iframe>
| |
| </div>
| |
| | |
| -->
| |
| | |
| | |
| | |
| | |
| <!--
| |
| <h1>Aufruf von NVK relativ mit Iframe</h1> | |
| <iframe src="https://nvk.genealogy.net/karte/Schmitz" width="600" height="600"></iframe> | |
| -->
| |
| | |
| <!--
| |
| <h1>Laden der GOV-Seite mit Javascript (fetch)</h1>
| |
| <div id="gov-content"></div>
| |
| <script>
| |
| fetch('https://gov.genealogy.net/item/show/HOHAUSJO30MX')
| |
| .then(response => response.text())
| |
| .then(data => {
| |
| document.getElementById('gov-content').innerHTML = data;
| |
| })
| |
| .catch(error => {
| |
| console.error('Error loading GOV content:', error);
| |
| });
| |
| </script>
| |
| | |
| <h1>Laden der Übersichtskarte mit Javascript (fetch)</h1>
| |
| <div id="map-content"></div>
| |
| <script>
| |
| const mapUrl = 'https://gov.genealogy.net/item/map/HOHAUSJO30MX';
| |
| | |
| fetch(mapUrl)
| |
| .then(response => {
| |
| if (!response.ok) {
| |
| throw new Error(`HTTP error! status: ${response.status}`);
| |
| }
| |
| return response.blob();
| |
| })
| |
| .then(blob => {
| |
| const mapObjectUrl = URL.createObjectURL(blob);
| |
| | |
| const imgElement = document.createElement('img');
| |
| imgElement.src = mapObjectUrl;
| |
| imgElement.alt = 'Karte';
| |
| imgElement.style.maxWidth = '100%';
| |
| imgElement.style.height = 'auto';
| |
| | |
| document.getElementById('map-content').appendChild(imgElement);
| |
| })
| |
| .catch(error => {
| |
| console.error('Error loading map:', error);
| |
| });
| |
| </script>
| |
| | |
| <h1>Laden der Grafik mit übergeordneten Objekten mit Javascript (fetch)</h1>
| |
| <div id="relationship-graph-content"></div>
| |
| <script>
| |
| const relationshipGraphUrl = 'https://gov.genealogy.net/item/relationshipGraph/HOHAUSJO30MX?full-size=1';
| |
| | |
| fetch(relationshipGraphUrl)
| |
| .then(response => {
| |
| if (!response.ok) {
| |
| throw new Error(`HTTP error! status: ${response.status}`);
| |
| }
| |
| return response.blob();
| |
| })
| |
| .then(blob => {
| |
| const graphObjectUrl = URL.createObjectURL(blob);
| |
| | |
| const imgElement = document.createElement('img');
| |
| imgElement.src = graphObjectUrl;
| |
| imgElement.alt = 'Beziehungsgraph';
| |
| imgElement.style.maxWidth = '100%';
| |
| imgElement.style.height = 'auto';
| |
| | |
| document.getElementById('relationship-graph-content').appendChild(imgElement);
| |
| })
| |
| .catch(error => {
| |
| console.error('Error loading relationship graph:', error);
| |
| });
| |
| </script>
| |
| | |
| <h1>Leaflet-Karte</h1>
| |
| <div id="leaflet-map" style="width: 100%; height: 400px;"></div>
| |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
| |
| <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
| |
| <script>
| |
| // Initialisierung der Leaflet-Karte
| |
| var map = L.map('leaflet-map').setView([50.9812, 7.0326], 12);
| |
| | |
| // OpenStreetMap-Tiles hinzufügen
| |
| L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
| |
| attribution: '© OpenStreetMap contributors',
| |
| maxZoom: 18
| |
| }).addTo(map);
| |
| | |
| // Optional: Marker hinzufügen
| |
| L.marker([50.9812, 7.0326]).addTo(map)
| |
| .bindPopup('GOV-Standort<br>50.9812, 7.0326.')
| |
| .openPopup();
| |
| </script>
| |
| | |
| | |
| | |
| <h1>Einfaches HTML (nur Hyberlink auf GOV)</h1>
| |
| <p>Hello <b>World</b></p>
| |
| <p>Die GOV-Daten <a href="https://gov.genealogy.net/item/show/HOHAUSJO30MX">finden Sie hier</a>.</p>
| |
| | |
| <h1>Aufruf von GOV mit Object</h1>
| |
| | |
| <object data="https://gov.genealogy.net/item/show/HOHAUSJO30MX" width="600" height="400"></object>
| |
| -->
| |
