Forum - "Letzte Beiträge" mit Bild und Text

<style>
/* =========================================================
   Letzte Beiträge: Bild + Kurztext + Weiterlesen
   Quelle:
   - Bild: .message_rightcol .xquoteable a.xembedded[href]
   - Text: echter Beitragstext aus .message_rightcol .xquoteable
   ========================================================= */
 
tr.threadrow[data-link] .ft-autoimg-wrap {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
 
tr.threadrow[data-link] .ft-autoimg-thumb {
  width: 300px;
  height: 192px;
  min-width: 300px;
  object-fit: cover;
  border-radius: 0px;
  border: 1px solid rgba(2,45,94,0.20);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  background: #eef3f8;
}
 
tr.threadrow[data-link] .ft-autoimg-content {
  min-width: 0;
  flex: 1;
  padding-top: 1px;
}
 
tr.threadrow[data-link] .ft-thread-teaser {
  margin-top: 6px;
  color: #333;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 400;
}
 
tr.threadrow[data-link] .ft-thread-readmore {
  display: inline-block;
  margin-top: 6px;
  color: #022d5e;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
 
tr.threadrow[data-link] .ft-thread-readmore:hover {
  color: #f0ad4e;
  text-decoration: underline;
}
 
/* etwas mehr Luft in den Zeilen */
tr.threadrow[data-link] td.thread_info {
  vertical-align: top;
  padding-top: 11px;
  padding-bottom: 11px;
}
 
/* In den kleinen Zählspalten oben ausrichten */
tr.threadrow[data-link] td.thread_answers,
tr.threadrow[data-link] td.thread_hits,
tr.threadrow[data-link] td.thread_lastreply {
  vertical-align: top;
  padding-top: 18px;
}
 
/* Mobile Ansicht */
@media (max-width: 700px) {
  tr.threadrow[data-link] .ft-autoimg-wrap {
    gap: 9px;
  }
 
  tr.threadrow[data-link] .ft-autoimg-thumb {
    width: 78px;
    height: 56px;
    min-width: 78px;
    border-radius: 9px;
  }
 
  tr.threadrow[data-link] .ft-thread-teaser {
    font-size: 12px;
    line-height: 1.35;
    margin-top: 4px;
  }
 
  tr.threadrow[data-link] .ft-thread-readmore {
    font-size: 12px;
    margin-top: 4px;
  }
 
  tr.threadrow[data-link] td.thread_info {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}
</style>
 
<script>
(function () {
  "use strict";
 
  var MAX_THREADS = 20;
  var DELAY = 350;
 
  var CACHE_PREFIX = "ft_auto_post_teaser_v1_";
  var CACHE_HOURS = 24;
 
  var TEASER_SENTENCES = 3;
  var TEASER_MAX_CHARS = 420;
 
  function decodeHtml(value) {
    var el = document.createElement("textarea");
    el.innerHTML = value || "";
    return el.value;
  }
 
  function normalizeThreadLink(rawLink) {
    if (!rawLink) return "";
 
    var link = decodeHtml(String(rawLink).trim());
 
    /*
      Xobor data-link Varianten:
      *9852f110-Beitrag.html#msg130336
      9852f110-Beitrag.html#msg130336
      t9852f110-Beitrag.html#msg130336
    */
    if (link.charAt(0) === "*") {
      link = "t" + link.substring(1);
    }
 
    if (/^[0-9]+f[0-9]+-/i.test(link)) {
      link = "t" + link;
    }
 
    try {
      return new URL(link, window.location.href).href;
    } catch (e1) {
      try {
        return new URL(link, window.location.origin + "/").href;
      } catch (e2) {
        return link;
      }
    }
  }
 
  function makeUrl(url, baseUrl) {
    if (!url) return "";
 
    url = decodeHtml(String(url).trim());
 
    try {
      return new URL(url, baseUrl || window.location.href).href;
    } catch (e1) {
      try {
        return new URL(url, window.location.origin + "/").href;
      } catch (e2) {
        return url;
      }
    }
  }
 
  function isImageUrl(url) {
    if (!url) return false;
 
    var clean = String(url).split("?")[0].split("#")[0].toLowerCase();
 
    return (
      clean.indexOf(".jpg") > -1 ||
      clean.indexOf(".jpeg") > -1 ||
      clean.indexOf(".png") > -1 ||
      clean.indexOf(".webp") > -1 ||
      clean.indexOf(".gif") > -1
    );
  }
 
  function isBlockedImage(url) {
    if (!url) return true;
 
    var s = String(url).toLowerCase();
 
    return (
      s.indexOf("avatar") > -1 ||
      s.indexOf("smilie") > -1 ||
      s.indexOf("smiley") > -1 ||
      s.indexOf("icon") > -1 ||
      s.indexOf("sprite") > -1 ||
      s.indexOf("spacer") > -1 ||
      s.indexOf("blank") > -1 ||
      s.indexOf("button") > -1 ||
      s.indexOf("logo") > -1 ||
      s.indexOf("emblem") > -1 ||
      s.indexOf("clear.gif") > -1 ||
      s.indexOf("a_1682_5502c79c.png") > -1
    );
  }
 
  function cacheKey(threadUrl) {
    return CACHE_PREFIX + encodeURIComponent(threadUrl);
  }
 
  function getCache(threadUrl) {
    try {
      var raw = localStorage.getItem(cacheKey(threadUrl));
      if (!raw) return null;
 
      var obj = JSON.parse(raw);
      if (!obj || !obj.time) return null;
 
      var maxAge = CACHE_HOURS * 60 * 60 * 1000;
 
      if (Date.now() - obj.time > maxAge) {
        localStorage.removeItem(cacheKey(threadUrl));
        return null;
      }
 
      return obj;
    } catch (e) {
      return null;
    }
  }
 
  function setCache(threadUrl, data) {
    try {
      localStorage.setItem(cacheKey(threadUrl), JSON.stringify({
        time: Date.now(),
        image: data.image || "",
        teaser: data.teaser || ""
      }));
    } catch (e) {}
  }
 
  function cleanText(text) {
    if (!text) return "";
 
    text = decodeHtml(text);
 
    text = text
      .replace(/\s+/g, " ")
      .replace(/"/g, "")
      .replace(/^[-–—\s]+/, "")
      .trim();
 
    /*
      Typische Überschriften oder leere Anfangsreste entfernen.
      Falls der Beitrag mit dem H1-Titel beginnt, soll der Teaser danach starten.
    */
    text = text.replace(/^Brenner-Sperre.*?wird\s*/i, "");
 
    return text.trim();
  }
 
  function getFirstSentences(text, count, maxChars) {
    text = cleanText(text);
 
    if (!text) return "";
 
    /*
      Satztrennung.
      Beachtet Punkt, Fragezeichen, Ausrufezeichen.
    */
    var sentences = text.match(/[^.!?]+[.!?]+(?:\s|$)/g);
 
    var teaser = "";
 
    if (sentences && sentences.length) {
      teaser = sentences.slice(0, count).join(" ").trim();
    } else {
      teaser = text;
    }
 
    teaser = teaser.replace(/\s+/g, " ").trim();
 
    if (teaser.length > maxChars) {
      teaser = teaser.substring(0, maxChars).trim();
 
      var lastSpace = teaser.lastIndexOf(" ");
      if (lastSpace > 180) {
        teaser = teaser.substring(0, lastSpace).trim();
      }
 
      teaser += " …";
    }
 
    return teaser;
  }
 
  function removeUnwantedTextParts(areaClone) {
    if (!areaClone) return;
 
    /*
      Dinge entfernen, die nicht in den Teaser sollen.
    */
    var removeSelectors = [
      "script",
      "style",
      "noscript",
      "iframe",
      "object",
      "embed",
      "img",
      "a.xembedded",
      ".signature",
      ".user_sig",
      ".quote",
      "blockquote"
    ];
 
    removeSelectors.forEach(function (selector) {
      var nodes = areaClone.querySelectorAll(selector);
 
      nodes.forEach(function (node) {
        node.remove();
      });
    });
  }
 
  function extractTextFromPostAreas(postAreas) {
    for (var i = 0; i < postAreas.length; i++) {
      var clone = postAreas[i].cloneNode(true);
 
      removeUnwantedTextParts(clone);
 
      /*
        H1/H2/H3 entfernen, damit nicht die Überschrift als Teaser kommt.
      */
      var headings = clone.querySelectorAll("h1, h2, h3");
      headings.forEach(function (h) {
        h.remove();
      });
 
      var text = cleanText(clone.textContent || "");
 
      if (text.length > 30) {
        return getFirstSentences(text, TEASER_SENTENCES, TEASER_MAX_CHARS);
      }
    }
 
    return "";
  }
 
  function findPostImageOnly(postAreas, threadUrl) {
    if (!postAreas || !postAreas.length) return "";
 
    /*
      Hauptfall bei deinen Beiträgen:
      <a class="xembedded float-left" href="https://files.homepagemodules.de/...png"></a>
    */
    for (var a = 0; a < postAreas.length; a++) {
      var embedded = postAreas[a].querySelectorAll("a.xembedded[href]");
 
      for (var i = 0; i < embedded.length; i++) {
        var href = makeUrl(embedded[i].getAttribute("href"), threadUrl);
 
        if (isImageUrl(href) && !isBlockedImage(href)) {
          return href;
        }
      }
    }
 
    /*
      Reserve: echte img-Tags im Beitragsbereich.
    */
    for (var b = 0; b < postAreas.length; b++) {
      var imgs = postAreas[b].querySelectorAll("img");
 
      for (var x = 0; x < imgs.length; x++) {
        var src =
          imgs[x].getAttribute("src") ||
          imgs[x].getAttribute("data-src") ||
          imgs[x].getAttribute("data-original") ||
          imgs[x].getAttribute("data-lazy-src") ||
          "";
 
        if (!src && imgs[x].getAttribute("srcset")) {
          src = imgs[x].getAttribute("srcset").split(",")[0].trim().split(" ")[0];
        }
 
        src = makeUrl(src, threadUrl);
 
        if (isImageUrl(src) && !isBlockedImage(src)) {
          return src;
        }
      }
    }
 
    return "";
  }
 
  function extractPostData(html, threadUrl) {
    var result = {
      image: "",
      teaser: ""
    };
 
    if (!html) return result;
 
    var doc = new DOMParser().parseFromString(html, "text/html");
 
    /*
      Keine Suche im Header.
      Keine Suche im gesamten HTML.
      Nur echte Beitragsboxen.
    */
    var postAreas = doc.querySelectorAll(
      ".message_rightcol .xquoteable, " +
      ".message_rightcol, " +
      ".message .xquoteable"
    );
 
    if (!postAreas.length) {
      return result;
    }
 
    result.image = findPostImageOnly(postAreas, threadUrl);
    result.teaser = extractTextFromPostAreas(postAreas);
 
    return result;
  }
 
  function insertPreview(row, data, threadUrl) {
    if (!row || !data) return;
 
    var imageUrl = data.image || "";
    var teaser = data.teaser || "";
 
    var infoCell = row.querySelector("td.thread_info");
    if (!infoCell) return;
 
    if (infoCell.querySelector(".ft-autoimg-wrap")) return;
 
    var wrap = document.createElement("div");
    wrap.className = "ft-autoimg-wrap";
 
    if (imageUrl) {
      var img = document.createElement("img");
      img.className = "ft-autoimg-thumb";
      img.src = imageUrl;
      img.alt = "";
      img.loading = "lazy";
 
      img.onerror = function () {
        img.remove();
      };
 
      wrap.appendChild(img);
    }
 
    var content = document.createElement("div");
    content.className = "ft-autoimg-content";
 
    while (infoCell.firstChild) {
      content.appendChild(infoCell.firstChild);
    }
 
    if (teaser) {
      var teaserDiv = document.createElement("div");
      teaserDiv.className = "ft-thread-teaser";
      teaserDiv.textContent = teaser;
 
      var readMore = document.createElement("a");
      readMore.className = "ft-thread-readmore";
      readMore.href = threadUrl;
      readMore.textContent = "Weiterlesen →";
 
      content.appendChild(teaserDiv);
      content.appendChild(readMore);
    }
 
    wrap.appendChild(content);
    infoCell.appendChild(wrap);
  }
 
  function wait(ms) {
    return new Promise(function (resolve) {
      setTimeout(resolve, ms);
    });
  }
 
  async function loadAutomaticPreviews() {
    var rows = Array.prototype.slice.call(document.querySelectorAll("tr.threadrow[data-link]"));
 
    if (!rows.length) return;
 
    rows = rows.slice(0, MAX_THREADS);
 
    for (var i = 0; i < rows.length; i++) {
      var row = rows[i];
 
      if (!row || row.getAttribute("data-ft-auto-teaser-done") === "1") {
        continue;
      }
 
      row.setAttribute("data-ft-auto-teaser-done", "1");
 
      var rawLink = row.getAttribute("data-link");
      var threadUrl = normalizeThreadLink(rawLink);
 
      if (!threadUrl) {
        await wait(DELAY);
        continue;
      }
 
      var cached = getCache(threadUrl);
 
      if (cached && typeof cached === "object") {
        insertPreview(row, cached, threadUrl);
        await wait(DELAY);
        continue;
      }
 
      try {
        var response = await fetch(threadUrl, {
          credentials: "same-origin",
          cache: "no-store"
        });
 
        if (!response.ok) {
          setCache(threadUrl, {
            image: "",
            teaser: ""
          });
 
          await wait(DELAY);
          continue;
        }
 
        var html = await response.text();
        var data = extractPostData(html, threadUrl);
 
        setCache(threadUrl, data);
 
        if (data.image || data.teaser) {
          insertPreview(row, data, threadUrl);
        }
      } catch (e) {
        setCache(threadUrl, {
          image: "",
          teaser: ""
        });
      }
 
      await wait(DELAY);
    }
  }
 
  function start() {
    /*
      Kurze Verzögerung, damit Xobor die Letzten Beiträge fertig aufgebaut hat.
      Keine Dauerschleife.
    */
    setTimeout(loadAutomaticPreviews, 1200);
    setTimeout(loadAutomaticPreviews, 3200);
  }
 
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", start);
  } else {
    start();
  }
})();
</script>