Widget: HouseTile: Unterschied zwischen den Versionen

Aus Herrenhäuser
Wechseln zu: Navigation, Suche
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
(39 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
<div class="card house-tile" id="HouseTile-<!--{$id|escape:'html'}-->" style="width: 18rem;">
  <div id="imageContainer" class="card-img-top">Loading image...</div>
  <div class="card-body">
    <h5 class="card-title" id="title"><!--{$page|escape:'html'}--></h5>
    <p id="textContainer" class="card-text"></p>
    <a href="<!--{$page|escape:'urlpathinfo'}-->" class="btn btn-primary" id="link">ANSEHEN</a>
  </div>
</div>
<script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var hideTitle = "<!--{$hideTitle|escape:'javascript'}-->";
var linkText = "<!--{$linkText|escape:'html'}-->";
var page = "<!--{$page|escape:'html'}-->";
var card_id = "HouseTile-<!--{$id|escape:'html'}-->";
var url = "https://wb.manorhouses.tibwiki.io/w/api.php";  
var url = "https://wb.manorhouses.tibwiki.io/w/api.php";  
var card = document.querySelector('#'+card_id);
if (hideTitle) {
    card.querySelector('#title').style.display = "none";
}
if (linkText) {
    card.querySelector('#link').innerHTML = linkText;
}


var params = {
var params = {
     action: "query",
     action: "query",
     prop: "images",
     prop: "images",
     titles: "Christinehof",
     titles: "<!--{$page|escape:'url'}-->", // Page title whose first image you want to retrieve
     format: "json"
     format: "json"
};
};


url = url + "?origin=*";
url = url + "?origin=*";
Object.keys(params).forEach(function(key){url += "&" + key + "=" + params[key];});
Object.keys(params).forEach(function(key) {
    url += "&" + key + "=" + params[key];
});


fetch(url)
fetch(url)
     .then(function(response){return response.json();})
     .then(function(response) {
        return response.json();
    })
     .then(function(response) {
     .then(function(response) {
         var pages = response.query.pages;
         var pages = response.query.pages;
        var firstImageTitle = null;
        // Find the first image title
         for (var page in pages) {
         for (var page in pages) {
             for (var img of pages[page].images) {
             if (pages[page].images && pages[page].images.length > 0) {
                 console.log(img.title);
                 firstImageTitle = pages[page].images[0].title;
                break;  // Exit loop after getting the first image
             }
             }
        }
        // If a first image is found, display it
        var card = document.querySelector('#'+card_id);
      if (firstImageTitle) {
            // Construct the URL to display the image
            var imageUrl = "https://wb.manorhouses.tibwiki.io/wiki/Special:FilePath/" + firstImageTitle.replace('File:', '');
       
          card.querySelector('#imageContainer').innerHTML = '<img src="' + imageUrl + '" alt="First Image" style="max-width:100%;">';
          //document.getElementById("imageContainer").innerHTML = '<img src="' + imageUrl + '" alt="First Image" style="max-width:100%;">';
          card.classList.add('processed1');
        } else {
          console.log("HouseTile: no image found in "+page);
          card.querySelector('#imageContainer').innerHTML = "";
            card.classList.add('processed1');
         }
         }
     })
     })
     .catch(function(error){console.log(error);});
     .catch(function(error) {
        console.log("Error: " + error);
        card.querySelector('#imageContainer').innerHTML = "Error retrieving image.";
        var card = document.querySelector('.card:not(.processed1)');
        card.classList.add('processed1');
    });
 
// now get wikitext from page
var params = {
    action: "parse",
    page: "<!--{$page|escape:'url'}-->", 
    format: "json"
};
url = "https://wb.manorhouses.tibwiki.io/w/api.php";
url = url + "?origin=*";
Object.keys(params).forEach(function(key) {
    url += "&" + key + "=" + params[key];
});
console.log(url);
fetch(url)
    .then(function(response) {
        return response.json();
    })
    .then(function(response) {
        var pagehtml = response.parse.text['*'];
        // If a text is found, display it
        var card = document.querySelector('#'+card_id+':not(.processed2)');
        if (pagehtml) {
            var tempDiv = document.createElement('div');
            tempDiv.innerHTML = pagehtml;
            var mainTextElement = tempDiv.querySelector('#tileabstract');
           
            if (mainTextElement) {
              var mainTextContent = mainTextElement.textContent;
             
              card.querySelector('#textContainer').innerHTML = mainTextContent.substring(0,250) +"(...)";
           
            } else {
              firstTableCellText = extractFirstCellContent( pagehtml );
              if ( firstTableCellText ) {
                    card.querySelector('#textContainer').innerHTML = firstTableCellText.substring(0,250) +"(...)";
              } else {
                    card.querySelector('#textContainer').innerHTML = "No text found.";
              }
          }
    }     
    card.classList.add('processed2');
    })
    .catch(function(error) {
        console.log("Error: " + error);
        card.querySelector('#textContainer').innerHTML = "Error retrieving text.";
      card.classList.add('processed2');
    });
});
 
function extractFirstCellContent(html) {
    // Define the regex pattern to match the first <td> cell inside a <tr>
    var regex = /<td>(.*?)<\/td>/s;  // Using the 's' flag to handle multi-line content inside <td>
   
    // Apply the regex to the HTML
    var match = regex.exec(html);
   
    if (match && match[1]) {
        // Remove any HTML tags within the <td> content
        var cellContent = match[1].replace(/<[^>]+>/g, '').trim();
        return cellContent;
    } else {
        return "";
    }
}
 
</script>
</script>

Aktuelle Version vom 24. Oktober 2024, 10:19 Uhr

Loading image...

   <a href="" class="btn btn-primary" id="link">ANSEHEN</a>


<script> document.addEventListener('DOMContentLoaded', function() { var hideTitle = ""; var linkText = ""; var page = ""; var card_id = "HouseTile-"; var url = "https://wb.manorhouses.tibwiki.io/w/api.php"; var card = document.querySelector('#'+card_id); if (hideTitle) { 

    card.querySelector('#title').style.display = "none";

} if (linkText) { 

    card.querySelector('#link').innerHTML = linkText;

}

var params = { 

   action: "query",
   prop: "images",
   titles: "",  // Page title whose first image you want to retrieve
   format: "json"

};

url = url + "?origin=*"; Object.keys(params).forEach(function(key) { 

   url += "&" + key + "=" + params[key];

});

fetch(url) 

   .then(function(response) {
       return response.json();
   })
   .then(function(response) {
       var pages = response.query.pages;
       var firstImageTitle = null;

       // Find the first image title
       for (var page in pages) {
           if (pages[page].images && pages[page].images.length > 0) {
               firstImageTitle = pages[page].images[0].title;
               break;  // Exit loop after getting the first image
           }
       }

       // If a first image is found, display it
       var card = document.querySelector('#'+card_id); 
      if (firstImageTitle) {
           // Construct the URL to display the image
           var imageUrl = "https://wb.manorhouses.tibwiki.io/wiki/Special:FilePath/" + firstImageTitle.replace('File:', );
        
          card.querySelector('#imageContainer').innerHTML = '<img src="' + imageUrl + '" alt="First Image" style="max-width:100%;">';
         //document.getElementById("imageContainer").innerHTML = '<img src="' + imageUrl + '" alt="First Image" style="max-width:100%;">';
          card.classList.add('processed1');
       } else {
          console.log("HouseTile: no image found in "+page);
          card.querySelector('#imageContainer').innerHTML = "";
           card.classList.add('processed1');
       }
   })
   .catch(function(error) {
       console.log("Error: " + error);
       card.querySelector('#imageContainer').innerHTML = "Error retrieving image.";
        var card = document.querySelector('.card:not(.processed1)'); 
       card.classList.add('processed1');
   });

// now get wikitext from page var params = { 

   action: "parse",
   page: "",  
   format: "json"

}; url = "https://wb.manorhouses.tibwiki.io/w/api.php"; url = url + "?origin=*"; Object.keys(params).forEach(function(key) { 

   url += "&" + key + "=" + params[key];

}); console.log(url); fetch(url) 

   .then(function(response) {
       return response.json();
   })
   .then(function(response) {
       var pagehtml = response.parse.text['*'];
       // If a text is found, display it
        var card = document.querySelector('#'+card_id+':not(.processed2)'); 
        if (pagehtml) {
           var tempDiv = document.createElement('div');
           tempDiv.innerHTML = pagehtml;
           var mainTextElement = tempDiv.querySelector('#tileabstract');
           
            if (mainTextElement) {
              var mainTextContent = mainTextElement.textContent;
             
              card.querySelector('#textContainer').innerHTML = mainTextContent.substring(0,250) +"(...)";
            
           } else {
              firstTableCellText = extractFirstCellContent( pagehtml );
              if ( firstTableCellText ) {
                   card.querySelector('#textContainer').innerHTML = firstTableCellText.substring(0,250) +"(...)";
              } else {
                   card.querySelector('#textContainer').innerHTML = "No text found.";
              }
          }
    }       
    card.classList.add('processed2');
   })
   .catch(function(error) {
       console.log("Error: " + error);
       card.querySelector('#textContainer').innerHTML = "Error retrieving text.";
      card.classList.add('processed2');
   });

});

function extractFirstCellContent(html) {

// Define the regex pattern to match the first cell inside a var regex = /(.*?)<\/td>/s; // Using the 's' flag to handle multi-line content inside 

   // Apply the regex to the HTML
   var match = regex.exec(html);
   
   if (match && match[1]) {

// Remove any HTML tags within the content 

       var cellContent = match[1].replace(/<[^>]+>/g, ).trim();
       return cellContent;
   } else {
       return "";
   }

}

</script>

Abgerufen von „https://wb.manorhouses.tibwiki.io/w/index.php?title=Widget:HouseTile&oldid=11385“