Widget:GOV-Test

<script>

   (function () {
       const fetchURL = "https://gov.genealogy.net/item/wikihtml/";
       const baseURL = "https://gov.genealogy.net";

       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;
                       display: block;
                       max-width: 1200px;
                       margin: 20px auto;
                       padding: 0;
                       border: none;
                       background-color: #fff;
                       overflow: auto;
                       font-family: Arial, sans-serif;
                       font-size: 16px;
                   }
                   table {
                       width: 100%;
                       table-layout: auto;
                       border-collapse: collapse;
                       margin: 10px 0;
                       border: 1px solid #ccc;
                   }
                   th, td {
                       border: 1px solid #ddd;
                       padding: 10px;
                       text-align: left;
                       word-wrap: break-word;
                   }
                   th {
                       background-color: #f2f2f2;
                   }
                   td:first-child {
                       width: 1%;
                       white-space: nowrap;
                   }
                   ul {
                       padding-left: 20px;
                       margin: 10px 0;
                   }
                   object {
                       max-width: 100%;
                       height: auto;
                       display: block;
                       margin: 0;
                   }
                   .map-container {
                       text-align: left;
                   }
                   a {
                       color: #007BFF;
                       text-decoration: none;
                   }
                   a:hover {
                       text-decoration: underline;
                   }
               `;

               // Geladenen HTML-Inhalt einfügen
               const content = document.createElement('div');
               content.innerHTML = html;

               // Relative Pfade anpassen
               const links = content.querySelectorAll('a[href^="/"]');
               links.forEach(link => {
                   link.href = baseURL + link.getAttribute('href');
               });

               const images = content.querySelectorAll('img[src^="/"]');
               images.forEach(img => {
                   img.src = baseURL + img.getAttribute('src');
               });

               const objects = content.querySelectorAll('object[data^="/"]');
               objects.forEach(obj => {
                   obj.data = baseURL + obj.getAttribute('data');
               });

               // Spezielle Anpassung für die Karte
               const mapObject = content.querySelector("object");
               if (mapObject) {
                   const mapContainer = document.createElement("div");
                   mapContainer.className = "map-container";
                   mapObject.parentNode.insertBefore(mapContainer, mapObject);
                   mapContainer.appendChild(mapObject);
               }

               // 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>