Forum - Update: Filter-Funktion fürs Activity Feed - Kategorien-Filter Teil 1(3)! - 3

<style>
/* Avatar */
.real-user-pic{
  height:25px; width:25px;
  object-fit: contain; padding:1px; margin-right: 7px; border-radius:50%; border:1px solid #ccc; cursor:pointer; vertical-align:middle; transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
 
/* Hover-Effekt */
.real-user-pic:hover{ transform:scale(2.8) translateX(5px); background:#eee; border-color:#aaa !important; border-radius:4px!important; box-shadow:0 0 15px #3c6cce; position:relative; z-index:9999; }
 
/* Avatar + Name mittig ausrichten */
.userlink, .xFeedContainer a[href^="u"], #xActivityFeed a[href^="u"], .feedrow a[href^="u"], .cmhsp a[href^="u"], a[href^="u"].userlink{ display:inline-flex!important; align-items:center!important; vertical-align:middle!important;}
 
/* Abstand Avatar - Avatar-Name - Letzte Beiträge (nur V4) */
.fstat > img {display:none;}
.fstat img {margin-right:5px!important;}
.view_table td.fstat {text-align:left; padding:5px 10px 5px 2vw!important;}
.lastactions .rating .cmhsp img {margin:0 7px auto auto!important;}
</style>
 
 
<script>
(() => {
  // Cache testweise löschen
  // localStorage.removeItem("avatarMiniCache_v2"); 
  
  // Mini-Avatare: Lädt Profilbilder und fügt sie automatisch in alle Userlinks ein
  const CLASS = "real-user-pic";
  const FLAG  = "avatarMini";
 
  // Bereiche, in denen Userlinks Avatare bekommen sollen
  const SEL   = `.cmhsp a[href^="u"], .geburtstag a[href^="u"], .grey.stats a[href^="u"], .fstat a[href^="u"], #foverview_stat3 a[href*="user.php"]`;
 
  // Avatar-Cache im localStorage (verhindert unnötige Profilaufrufe)
  let cache = JSON.parse(localStorage.getItem("avatarMiniCache_v2") || "{}");
  const save = () => localStorage.setItem("avatarMiniCache_v2", JSON.stringify(cache));
 
  // Lädt Avatar aus dem Profil (einmalig pro User, dann aus Cache)
  async function load(url) {
    if (cache[url]) return cache[url];
    try { const html = await (await fetch(url)).text(); const doc  = new DOMParser().parseFromString(html, "text/html"); const img  = doc.querySelector(".avatar img"); const src  = img ? img.src : ""; cache[url] = src; save(); return src;
    } catch {}
  }
 
  // Fügt Avatar in einen Userlink ein (nur einmal pro Element)
  async function inject(a) {
    if (a.dataset[FLAG] || a.querySelector("." + CLASS)) return; a.dataset[FLAG] = "1";
  
    let url = a.getAttribute("href"); if (!url) return; url = url.split("#")[0]; // Hash entfernen
    const src = await load(url); if (!src) return;
    const img = document.createElement("img"); img.src = src; img.className = CLASS; a.prepend(img); a.classList.add("userlink");
  }
 
  // Durchsucht neue DOM-Bereiche nach Userlinks und Namen
  function scan(root) {
    root.querySelectorAll(SEL).forEach(inject);
    root.querySelectorAll("[data-username]").forEach(async el => {
      if (el.dataset[FLAG]) return;el.dataset[FLAG] = "1";
 
      const name = (el.dataset.username || "").trim(); if (!name) return;
      const src = await load("/user.php?uname=" + encodeURIComponent(name)); if (!src) return;
      const img = document.createElement("img"); img.src = src; img.className = CLASS; el.prepend(img);
    });
  }
 
  // Beobachtet DOM-Änderungen (AJAX, Activity Feed, Portal, Boxen)
  new MutationObserver(m => m.forEach(x => x.addedNodes.forEach(n => n.nodeType === 1 && scan(n)))).observe(document.body, { childList: true, subtree: true });
 
  // Initialer Scan beim Laden der Seite
  scan(document);
 
})();
</script>
 
 

<style>
/* Avatar */
.real-user-pic{
  height:25px; width:25px;
  object-fit: contain; padding:1px; margin-right: 7px; border-radius:50%; border:1px solid #ccc; cursor:pointer; vertical-align:middle; transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
 
/* Hover-Effekt */
.real-user-pic:hover{ transform:scale(2.8) translateX(5px); background:#eee; border-color:#aaa !important; border-radius:4px!important; box-shadow:0 0 15px #3c6cce; position:relative; z-index:9999; }
 
/* Avatar + Name mittig ausrichten */
.userlink, .xFeedContainer a[href^="u"], #xActivityFeed a[href^="u"], .feedrow a[href^="u"], .cmhsp a[href^="u"], a[href^="u"].userlink{ display:inline-flex!important; align-items:center!important; vertical-align:middle!important;}
 
/* Abstand Avatar - Avatar-Name - Letzte Beiträge (nur V4) */
.fstat > img {display:none;}
.fstat img {margin-right:5px!important;}
.view_table td.fstat {text-align:left; padding:5px 10px 5px 2vw!important;}
.lastactions .rating .cmhsp img {margin:0 7px auto auto!important;}
</style>
 
 
<script>
(() => {
  // Cache testweise löschen
  // localStorage.removeItem("avatarMiniCache_v2"); 
  
  // Mini-Avatare: Lädt Profilbilder und fügt sie automatisch in alle Userlinks ein
  const CLASS = "real-user-pic";
  const FLAG  = "avatarMini";
 
  // Bereiche, in denen Userlinks Avatare bekommen sollen
  const SEL   = `.cmhsp a[href^="u"], .geburtstag a[href^="u"], .grey.stats a[href^="u"], .fstat a[href^="u"], #foverview_stat3 a[href*="user.php"]`;
 
  // Avatar-Cache im localStorage (verhindert unnötige Profilaufrufe)
  let cache = JSON.parse(localStorage.getItem("avatarMiniCache_v2") || "{}");
  const save = () => localStorage.setItem("avatarMiniCache_v2", JSON.stringify(cache));
 
  // Lädt Avatar aus dem Profil (einmalig pro User, dann aus Cache)
  async function load(url) {
    if (cache[url]) return cache[url];
    try { const html = await (await fetch(url)).text(); const doc  = new DOMParser().parseFromString(html, "text/html"); const img  = doc.querySelector(".avatar img"); const src  = img ? img.src : ""; cache[url] = src; save(); return src;
    } catch {}
  }
 
  // Fügt Avatar in einen Userlink ein (nur einmal pro Element)
  async function inject(a) {
    if (a.dataset[FLAG] || a.querySelector("." + CLASS)) return; a.dataset[FLAG] = "1";
  
    let url = a.getAttribute("href"); if (!url) return; url = url.split("#")[0]; // Hash entfernen
    const src = await load(url); if (!src) return;
    const img = document.createElement("img"); img.src = src; img.className = CLASS; a.prepend(img); a.classList.add("userlink");
  }
 
  // Durchsucht neue DOM-Bereiche nach Userlinks und Namen
  function scan(root) {
    root.querySelectorAll(SEL).forEach(inject);
    root.querySelectorAll("[data-username]").forEach(async el => {
      if (el.dataset[FLAG]) return;el.dataset[FLAG] = "1";
 
      const name = (el.dataset.username || "").trim(); if (!name) return;
      const src = await load("/user.php?uname=" + encodeURIComponent(name)); if (!src) return;
      const img = document.createElement("img"); img.src = src; img.className = CLASS; el.prepend(img);
    });
  }
 
  // Beobachtet DOM-Änderungen (AJAX, Activity Feed, Portal, Boxen)
  new MutationObserver(m => m.forEach(x => x.addedNodes.forEach(n => n.nodeType === 1 && scan(n)))).observe(document.body, { childList: true, subtree: true });
 
  // Initialer Scan beim Laden der Seite
  scan(document);
 
})();
</script>