Forum - RE: Fehlersuche: "Letzte Beiträge" mit Bild und Themen-Text - Manuell und gezielt einsetzen! - 3

{{template==144.start}}
<style>
.page_topic .fnewImg {display:none;}
.page_msg .fnewImg, .page_new .fnewImg{max-width:800px;max-height:100px;object-fit:contain;}
 
.fnewImg{width:100%;max-height:150px;object-fit:contain;}
.fnewTextPreview{margin-top:10px!important;padding-top:10px;font-size:13px;line-height:1.45;color:#333;white-space:pre-line;border-top:1px solid #aaa;}
.fnewTextPreview h2{font:bold 14px arial!important;}
.fnewTextPreview h2.UeAk{white-space:nowrap!important;}
.fnewZoomIconGlobal, .ZoomIconGlobal {position:absolute;left:4px;bottom:4px;width:22px;height:22px; background:#fff;border-radius:50%;border:1px solid #0003;cursor:pointer;opacity:0.3;transition:.15s;z-index:10;}
 
td.fnew:hover .fnewZoomIconGlobal, td.fnew:hover .ZoomIconGlobal{opacity:1;}
td.fnew {width:20%;max-width:270px;position:relative;right:5px;}
tr.newPost .fdesc.fdetail{background:#def;}
a.fnewReadMore{display:block; max-width:150px;background:#fff;color:#000 !important;font-size:16px;padding:5px 10px; margin:10px 15px; transition: all 0.3s 0.8s linear;border-radius:5px; box-shadow: 2px 2px 4px 0px #333333;}
a.fnewReadMore:hover{text-decoration:none !important; box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4) !important;transform: scale(1.03);}
span.threadpages{float:right;margin-right:30px;margin-top:4px;font-size:12px;}
span.threadpages a small{padding:0 2px;}
</style>
{{template==144.end}}
 
 
 
{{template==177.start}}
<style>
.topic .fnewImg {display:none;}
.msg .fnewImg, .new .fnewImg {max-width:800px;max-height:100px;object-fit:contain;}
 
tr.threadrow > td {padding: 10px 15px !important;}
tr.threadrow .thread_icon {width: 30% !important;}
tr.threadrow .thread_icon img.fnewImg {width: 100% !important;max-height: 100px;object-fit: contain;}
tr.threadrow .thread_answers {max-width: 8% !important;display:table-cell;}
tr.threadrow .thread_lastreply {max-width:10% !important;}
tr.threadrow .fnewZoomIconGlobal, tr.threadrow .ZoomIconGlobal {position:absolute;left:4px;bottom:4px;width:22px;height:22px; background:#fff;border-radius:50%;border:1px solid #0003; display:flex;align-items:center;justify-content:center; font-size:14px;cursor:pointer;opacity:0.3;transition:.15s;z-index:10000;}
tr.threadrow:hover .fnewZoomIconGlobal, tr.threadrow:hover .ZoomIconGlobal {opacity:1;}
tr.threadrow.newmessage .thread_info {background:#def;}
 
a.fnewReadMore{display:block; background: #fff; max-width:150px;padding:5px 10px; margin:10px 15px; border-radius:5px; box-shadow: 2px 2px 4px 0px #333333;}
a.fnewReadMore:hover{text-decoration: none;}
 
/* --- Mobil - Resonsive --- */
@media (max-width: 900px) {
  tr.threadrow {display: block;}
  tr.threadrow > td {display: block; width: 100% !important; max-width: 100% !important;}
  tr.threadrow .thread_icon {width: 100% !important;}
  tr.threadrow .thread_icon img.fnewImg {display: block; margin-bottom: 10px;}
  tr.threadrow .fnewZoomIconGlobal {width:40px; height:40px; opacity:1;}
  tr.forum_listing_header th:nth-child(n+2) {display: none !important;}
}
</style>
{{template==177.end}}
 
 
 
<!-- Allgemein -->
<script>
document.addEventListener("DOMContentLoaded",()=>{
  const BildExtraktor = "./page-915068-1.html"; // URL zu "Eigene Seiten" (ohne Anhang)
  const PluginName = "lastpix"; // In der URL vom Plugin zu finden, ...templateedit&pid: "v4last" ...
  const WortLimit = "60"; // Textlänge Themen-Text, Mobil die Hälfte, wird aktiv nach neue TAB
  const HinweisFenster = "• Der Bild-Extractor wird geöffnet und sucht nach Bilder im Forum.\n• Aktuell stehen Bilder aus dem Thema zur Verfügung.\n• Das Bild wird durch einen Klick zum Speichern in den ersten Beitrag eingefügt.\n• Auf der Seite 'Beiträge der letzten Tage' erscheint dann das Vorschaubild.\n"
  
  const makePreview=(t,l)=>`<div class="fnewTextPreview">${t}<a href="${l}" class="fnewReadMore" title="Zum aktuellen Beitrag"> Weiterlesen →</a></div>`;
  const cleanText = html => {
    return html
      .replace(/<br\s*\/?>/gi, "\n").replace(/\n{2,}/g, "\n").replace(/<\/legend>\s*/gi, "</legend>.\n") // Struktur normalisieren
      .replace(/<div class="bbcode_code">[\s\S]*?<\/div>/gi, "").replace(/<pre[\s\S]*?<\/pre>/gi, "") // komplette Codeblock entfernen (Sonderfall)
      .replace(/<h2[\s\S]*?<\/h2>\s*<hr[^>]*>\s*/gi, "").replace(/<h2[\s\S]*?<\/h2>\s*/gi, "")  // h2 + hr entfernen (Sonderfall)
      .replace(/<\/li>/gi, ". ").replace(/<li>/gi, "") // Aufzählungen (Sonderfall)
      .replace(/<[^>]+>/gi, "")  // HTML-Tags entfernen
      .replace(/\[\[[^\]]*\]\]/gi, "") // [[File: ... ]] Upload-Bilder entfernen     
  }
  function buildTeaser(clean, threadLink, tid, desc) {
    const WORD_LIMIT = window.innerWidth < 600 ? WortLimit/2 : WortLimit;
    const teaser = clean.trim().split(/\s+/).slice(0, WORD_LIMIT).join(" ") + " …";
    const out = makePreview(teaser, threadLink);
    desc.insertAdjacentHTML("beforeend", out);
    sessionStorage.setItem("fnew_txt_" + tid, out);
  }
 
 
  
  {{template==177.start}}  
    // Optional - Bild-Extractor (Verlinkung zu "Eigene Seiten" anpassen)
    document.querySelector('#usermodal #usercontent .quicklinks h3:last-of-type')?.insertAdjacentHTML("afterend",'<a href="'+BildExtraktor+'" class="capped" title="Sucht alle Bilder zum Thema heraus">Zum Bild-Extractor</a>');
    // "Letzte Beiträge im Seiten-Menü
    document.querySelector('#usermodal #usercontent .quicklinks h3:last-of-type')?.insertAdjacentHTML("afterend",'<a href="./forum.php?show=last" class="capped" title="Beiträge der letzten Tage" style="color:#a80;"><b>Letzte Beiträge</b></a>');
 
    const runFnew=()=>{
      document.querySelectorAll("tr.threadrow").forEach(row=>{
        if(row.dataset.fnewDone) return; row.dataset.fnewDone = 1;
        const icon  = row.querySelector(".thread_icon"), title = row.querySelector(".ttitle a"), desc  = row.querySelector(".thread_desc"), threadLink = title.href; if(!icon || !title || !desc) return;
  
        {{user_admin==true.start}} 
          icon.style.position = "relative"; icon.insertAdjacentHTML("beforeend",`<span class="fnewZoomIconGlobal" title="Bild einfügen oder austauschen">&#128269;</span>`); 
        {{user_admin==true.else}}
          <a class="ZoomIconGlobal" title="Bilder im Forum suchen" href="'+BildExtraktor+'">&#128269;</a>
        {{user_admin==true.end}}
 
        const link = title?.href; if (!link) return; const tid = link.match(/t(\d+)f/)?.[1]; if (!tid) return; const cImg = sessionStorage.getItem("fnew_img_"+tid); const cTxt = sessionStorage.getItem("fnew_txt_"+tid);
        if(cImg){icon.innerHTML = `<img src="${cImg}" class="fnewImg">`; icon.insertAdjacentHTML("beforeend",`<span class="fnewZoomIconGlobal" title="Bild einfügen oder austauschen">&#128269;</span>`);} if(cTxt){desc.insertAdjacentHTML("beforeend", cTxt);} if(cImg && cTxt) return;
 
        // getDeep: PluginID eintragen (&pid= ...)
        xobor.plugin(""+PluginName+"").getDeep({target_id:[tid],target_type:"1"}, res=>{
          const html = res?.[0]?.text; if(!html) return;
          if(!cImg){const d=document.createElement("div"); d.innerHTML = html; const img = d.querySelector("img.fnewImg"); if(img?.src){icon.innerHTML = `<img src="${img.src}" class="fnewImg">`; sessionStorage.setItem("fnew_img_"+tid, img.src);icon.insertAdjacentHTML("beforeend",`<span class="fnewZoomIconGlobal" title="Bild einfügen oder austauschen">&#128269;</span>`);} }
          if(!cTxt){const clean = cleanText(html); const threadLink = row.querySelector(".thread_lastreply a[href*='#msg']").href; buildTeaser(clean, threadLink, tid, desc);}
      });
    });
  };
  setTimeout(runFnew,200);
  
  // Klick auf Lupe, Bild-Extractor öffnen
  document.addEventListener("click", e => {
    const z = e.target.closest(".fnewZoomIconGlobal"); if (!z) return; e.preventDefault(); e.stopPropagation();
    const row = z.closest("tr.threadrow");
    const link = row?.querySelector(".ttitle a")?.href; if (!link) return;
    if(!confirm(""+HinweisFenster+"")) return;
    location.href = ``+BildExtraktor+`?url=${encodeURIComponent(link)}`;
  }, true);                                                                                
  {{template==177.end}}
 
 
 
  {{template==144.start}}  
  // Bild-Extractor - User-Menü wird erweitert
  $('#global-news-box-wrap #news-headline:last').after(`<span><span style="height:10px; padding-left:2px;" onclick="$(\'#global-news-box-wrap\').hide(); location.href='`+BildExtraktor+`';">&#128269; Der Forum Bild-Extractor</span></span>`);
 
  const runFnew=()=>{
    document.querySelectorAll("td.fposts").forEach(td=>{
      const row=td.closest("tr"); if(!row||row.dataset.fnewDone)return; row.dataset.fnewDone=1; if (td.querySelector("a")) {row.classList.add("newPost");}
 
      const fnew = row.querySelector(".view_table td.fnew"); if(fnew && !fnew.querySelector(".fnewZoomIconGlobal")){fnew.insertAdjacentHTML("beforeend",`
        {{user_admin==true.start}} 
          <span class="fnewZoomIconGlobal" title="Bild einfügen oder austauschen">&#128269;</span>  
        {{user_admin==true.else}}
          <a class="ZoomIconGlobal" title="Bilder im Forum suchen" href="`+BildExtraktor+`">&#128269;</a>
        {{user_admin==true.end}}
      `);}
      const box=row.querySelector("td.fnew"), link = box?.querySelector("a"), title=row.querySelector("td.fdesc.fdetail a.threadlink"), desc=row.querySelector("td.fdesc.fdetail"); if(!box||!link||!title||!desc)return;
      const last=row.querySelector("td.fstat a.fstattime")?.href, tid=(title.href.match(/t(\d+)f/)||[])[1]; if(!tid)return;
      const cImg=sessionStorage.getItem("fnew_img_"+tid), cTxt=sessionStorage.getItem("fnew_txt_"+tid);
      if(cImg){box.querySelector(".statimg")?.remove();
        link.outerHTML = `<a href="${row.querySelector("td.fstat a.fstattime").href}"><img src="${cImg}" class="fnewImg"></a>`;
      } 
      if(cTxt){desc.insertAdjacentHTML("beforeend",cTxt);}
       
      // Für die Funktion "getDeep" PluginID eintragen (In der URL zu finden: &pid="v4last")
      xobor.plugin(""+PluginName+"").getDeep({target_id:[tid],target_type:"1"},res=>{
        const html=res?.[0]?.text; if(!html)return;
        if(!cImg){const d=document.createElement("div"); d.innerHTML=html; const img=d.querySelector("img.fnewImg"); if(img?.src){box.querySelector(".statimg")?.remove(); link.outerHTML = `<a href="${row.querySelector("td.fstat a.fstattime").href}"><img src="${img.src}" class="fnewImg"></a>`; sessionStorage.setItem("fnew_img_"+tid,img.src);} }
        if(!cTxt){const clean = cleanText(html); const threadLink = row.querySelector("td.fstat a.fstattime")?.href; if(!threadLink) return; buildTeaser(clean, threadLink, tid, desc);}
      });
    });
  };
  setTimeout(runFnew,200);
 
  // Klick auf Lupe, Bild-Extractor öffnen
  document.addEventListener("click", e => {
    const z = e.target.closest(".fnewZoomIconGlobal"); if (!z) return; e.preventDefault(); e.stopPropagation();
    const link=z.closest("tr").querySelector("td.fdesc.fdetail a.threadlink").href.replace(/-\d+\.html(#.*)?$/,".html");
    if(!confirm(""+HinweisFenster+"")) return;
    location.href = ``+BildExtraktor+`?url=${encodeURIComponent(link)}`;
  }, true);
  {{template==144.end}}
 
 
 
  // Bild wird in die Textarea eingetragen
  const p = new URLSearchParams(location.search); const img = p.get("fnewimg"); if (!img) return; const bb = `\n\n[fnewImg]${img}[/fnewImg]\n`;
  function insertWhenReady() {const ta = document.querySelector('textarea[name="nachricht"]'); if (!ta) return setTimeout(insertWhenReady, 200); ta.value += bb; setTimeout(() => {ta.scrollTop = ta.scrollHeight; ta.scrollIntoView({ behavior: "smooth", block: "center" });}, 350);}
  insertWhenReady();
});
</script>
 
 

<style>
.imgTool{background:#eee;padding:20px;border:1px solid #ccc;border-radius:9px;margin:10px 0;position:relative;font-family:monospace; max-width:93%;}
.imgTool h3{margin:0 0 5px;font-size:18px;}
.imgTool .hint{font-size:13px;color:#555;margin-bottom:10px;}
.imgTool input{padding:5px;}
.imgRow{background:#fff;border:1px solid #aaa;margin:6px 0;padding:5px 10px;display:flex;align-items:center;gap:10px;max-width:90vw;overflow:auto;}
.imgPreviewBox{border:1px solid #777;text-align:center; }
.imgPreview {width:170px;max-height:120px;border:1px solid #ccc;object-fit:contain;cursor:pointer; min-width:100px;}
.zoomPreview{position:fixed; top:50%;left:50%; transform:translate(-50%,-50%);border:1px solid #aaa;background:#fff;padding:4px;z-index:9999;opacity:0; transition: opacity 0.5s 0.5s linear;  pointer-events: none;}
.zoomPreview img{max-width:90vw;max-height:90vh;object-fit:contain; }
.copyInfo{position:absolute; background:#4caf50;color:#fff;margin:-20px 0 0 20px;padding:3px 6px;border:1px solid #383838;border-radius:4px;font:bold 15px Arial;display:none;z-index:99999;}
.hint_del, #delautoInsert {display:none;}
#threadUrl{width:70%;margin-bottom:10px;}
#minWidth{width:80px;}
</style>
 
<div class="imgTool">
  <h3><b>Bild-URL-Extraktor</b></h3>
  <div class="hint">
    ● Die gewünschte Bildgröße kann während der Suche angepasst werden.<br>
    ● Aktuell werden Bilder aus dem Thema angezeigt, durch eine andere URL kann die Suche erweitert werden.<br>
    ● Über die Bild‑Verlinkung lässt sich das Originalbild in voller Größe einsehen.<br>
    <span class="hint_del">● Ein Klick auf das Vorschaubild bringt die Auswahl automatisch nach <i>„Letzte Beiträge“</i> und platziert es im ersten Beitrag zum Speichern.</span>
  </div>
  <input id="threadUrl" placeholder="URL eingeben…"> <input id="minWidth" type="number" value="1000" title="Mindestgröße einstellbar!"> <button class="btn btn-primary btn-sm" onclick="loadImages()"><i class="fa fa-image"></i> Bilder anzeigen</button><br><br>
  <label id="delautoInsert" sstyle="font-size:13px;color:#444;"><input type="checkbox" id="autoInsert" checked>Mit Bild-Klick automatisch in den Beitrag einfügen<br><br></label>
  <div id="imgList"></div>
</div>
<div id="zoomBox" class="zoomPreview"></div> 
<div id="copyInfo" class="copyInfo">In die Zwischenablage kopiert!</div>
 
<script>
// Eingaben speichern
threadUrl.addEventListener("input",()=>sessionStorage.setItem("fnew_last_url",threadUrl.value.trim())); (()=>{const url=new URLSearchParams(location.search).get("url"),store=sessionStorage.getItem("fnew_last_url")||"";
 
// Zentrale Initialisierung
const init=()=>{const f=document.getElementById("threadUrl"); if(!f) return; const val=url||store; if(!val) return; f.value=val; if(url){ loadImages(); document.querySelectorAll(".hint_del, #delautoInsert").forEach(el => el.style.display = "block"); sessionStorage.setItem("fnew_last_url",val); } }; init(); 
 
// Falls Url später eingetragen wird
document.addEventListener("DOMNodeInserted",e=>{ if(e.target.id==="threadUrl"||e.target.querySelector?.("#threadUrl")) init(); }); })();
 
// Hauptfunktion
async function loadImages(){
  const url=threadUrl.value.trim(),minW=+minWidth.value||0,out=imgList;
  if(!url)return out.innerHTML="Bitte den Link einer Seite eingeben!";
  out.innerHTML="<i>Lade…</i>";
  const u=new URL(url,location.href),isThread=/\/t\d+/.test(u.pathname+u.search);
  if(!isThread){fetch(u).then(r=>r.text()).then(h=>exHtml(h,minW,out)).catch(()=>out.innerHTML="Beitrag kann nicht geladen werden, erneut versuchen!"); return;}
  try{ const all=[await fetch(u).then(r=>r.text())]; for(let i=1;i<10;i++){  try{all.push(await fetch(u.href.replace(/\.html$/,`-${i}.html`)).then(r=>r.text()));}catch{} } exThread(all,minW,out); }catch{out.innerHTML="Seite kann nicht geladen werden!";}
}
function exHtml(h,minW,out){const d=document.createElement("div"); d.innerHTML=h;  const u=new Set(); d.querySelectorAll("img").forEach(i=>{let src = i.getAttribute("data-src") || i.src;  if(src && !src.startsWith("data:")){src = src.replace(/\/resize\/\d+x\d+\//, "/"); u.add(src);} }); u.size ? chk(u,minW,out) : out.innerHTML="Fehler in der Eingabe";}
function exThread(all,minW,out){const u=new Set(); all.forEach(h=>{const d=document.createElement("div");  d.innerHTML=h; d.querySelectorAll("img").forEach(i=>{let src = i.getAttribute("data-src") || i.src; if(src && !src.startsWith("data:")){src = src.replace(/\/resize\/\d+x\d+\//, "/");  u.add(src); }});}); u.size ? chk(u,minW,out) : out.innerHTML="Fehler in der Adresse!";}
function chk(urls,minW,out){ out.innerHTML="<i>Prüfe…</i>"; const list=[...urls],res=[]; let done=0; list.forEach(u=>{ const img=new Image();img.onload=()=>{if(img.naturalWidth>=minW)res.push(row(u,img.naturalWidth,img.naturalHeight));fin();};img.onerror=fin; img.src=u;});
function fin(){if(++done===list.length)out.innerHTML=res.join("")||"Keine passenden Bilder mit der Mindestgröße gefunden!";}}
 
// Zoom
function row(u,w,h){return `<div class="imgRow" title="Mit einem Klick kopieren!"><div class="imgPreviewBox"><img src="${u}" class="imgPreview"  onmouseover="zoomBox.innerHTML='<img src="${u}">'; zoomBox.style.opacity='1';" onmouseout="zoomBox.style.opacity='0';" onclick="copyToClipboard('${u}',event)"> </div><div><a href="${u}" target="_blank">${u}</a><br><span style="color:#667;"><b>${w}×${h}px</b></span></div></div>`;}
 
// In die Zwischenablage kopieren
function copyToClipboard(imgUrl,e){
  navigator.clipboard.writeText(imgUrl); 
 
  // Automatischen Einfügen in Beiträgen
  const t=new URLSearchParams(location.search).get("url");if(t && document.getElementById("autoInsert")?.checked){ fetch(t).then(r=>r.text()).then(h=>{const d=document.createElement("div"); d.innerHTML=h; const u=new URL(t); const forum=u.searchParams.get("forum")||u.pathname.match(/f(\d+)/)?.[1]; const thread=u.searchParams.get("Thread")||u.pathname.match(/t(\d+)f/)?.[1]; const start=d.querySelector('#post1 a[name^="msg"]')||d.querySelector('[id^="post_"]'); if(!forum||!thread||!start)return alert("Startpost nicht gefunden!"); const msg=start.name?.replace("msg","")||start.id.replace("post_",""); location.href=`/msg.php?forum=${forum}&Thread=${thread}&msg=${msg}&fnewimg=${encodeURIComponent(imgUrl)}`;}); }
 
  copyInfo.style.left=e.pageX+10+"px"; copyInfo.style.top=e.pageY-10+"px"; copyInfo.style.display="block";
  setTimeout(()=>copyInfo.style.display="none",4000);
}
</script>