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: 400px; /* Feste Höhe */
                       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;

               // 1) Passe <object> width und height an
               const objects = content.querySelectorAll('object[data^="/"]');
               objects.forEach(obj => {
                   obj.setAttribute('data', baseURL + obj.getAttribute('data'));
                   obj.setAttribute('width', '400');
                   obj.setAttribute('height', '400');
               });

               // 2) Passe <a> und <img> für den relationshipGraph an
               const imageLinks = content.querySelectorAll('a[href*="relationshipGraph"]');
               imageLinks.forEach(link => {
                   // Passe das <a>-Tag an die Base-URL an
                   const originalHref = link.getAttribute('href');
                   link.setAttribute('href', baseURL + originalHref);

                   // Passe das <img>-Tag im <a>-Tag an
                   const img = link.querySelector('img');
                   if (img) {
                       const originalSrc = img.getAttribute('src');
                       img.setAttribute('src', baseURL + originalSrc + "?full-size=1"); // Absoluten Pfad setzen
                       img.setAttribute('width', '80%'); // Breite auf 80% setzen
                   }
               });

               // 3) Füge Base-URL zu allen relativen <a> hinzu
               const allLinks = content.querySelectorAll('a[href^="/"]');
               allLinks.forEach(link => {
                   const originalHref = link.getAttribute('href');
                   link.setAttribute('href', baseURL + originalHref);
               });

               // 4) Füge Base-URL zu allen relativen <img> hinzu
               const allImages = content.querySelectorAll('img[src^="/"]');
               allImages.forEach(img => {
                   const originalSrc = img.getAttribute('src');
                   img.setAttribute('src', baseURL + originalSrc);
               });

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