Forum - Activity Feed und Link Aktuelle Beiträge auch im Portal! - 2

<!-- die neusten Beiträge  -->
<style>
.activme {background: #e9e9e9; color:#383838; padding: 5px 0 5px 30px !important; text-align:left; border-top:1px solid #aaaaaa; cursor:pointer;}
.activl {margin: 10px 0 10px 5px !important; text-align:left;}
.activl img {padding-right:5px;}
#xActivityFeed {overflow: auto;  max-height:135pt !important;} 
</style>
 
<script>
//// AktivityFeed ////
document.addEventListener('DOMContentLoaded', function() {
 
$("#xActivityFeed").append('<div class="activl"><img src="//img.homepagemodules.de/ds/static/feedicons/post.png"> <i>Hier geht es zu:</i> <a href="/forum.php?show=last">Letzte Beiträge! </a></div>').closest('.boxcontent').append('<div class="activme">Mehr anzeigen...</div>');
$(".activme").toggle(function(){
$('#xActivityFeed').attr('style', 'max-height:100% !important');
$(this).html('Schließen');
}, function() {
$('#xActivityFeed').attr('style', 'max-height:135pt !important');
$(this).html('Mehr anzeigen');
parent.location='#obere_leiste';
});
 
});
</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 .45s ease,box-shadow .45s ease,border-color .45s ease;}
 
/* Hover-Effekt */
.real-user-pic:hover{ transform:scale(2.0) 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>
document.addEventListener("DOMContentLoaded", function() {
  // MiniCache löschen bei neue Version
  var CACHE_KEY = "avatarMiniCache_v11";
  window.AVATAR_CACHE_KEY = CACHE_KEY; Object.keys(localStorage).forEach(k => {if (k.startsWith("avatarMiniCache_") && k !== CACHE_KEY) {localStorage.removeItem(k);}});
 
  // Avatare speichern
  var cache = {};
  try { cache = JSON.parse(localStorage.getItem(CACHE_KEY) || "{}"); } catch(e){}
  function save(){ localStorage.setItem(CACHE_KEY, JSON.stringify(cache)); }
 
  // Bereiche, in denen Avatare gesetzt werden
  var CLASS = "real-user-pic";
  var SEL = ".cmhsp a[href^='u'], .geburtstag a[href^='u'], .grey.stats a[href^='u'], " + "#foverview_stat3 a[href*='user.php'], .mfurther a[href^='u'], .rating a[href^='u'], " + "[data-username], .fstat a span, .donation-name";
  var processed = new WeakSet();
 
  // Cache-Key für URL bestimmen
  function getKey(url){return url;}
 
  // Avatar laden (aus Cache oder per fetch aus Profil)
  function load(url, callback){var key = getKey(url);if(cache[key]){callback(cache[key]); return;}                     
  fetch(url).then(function(r){ return r.text(); }).then(function(html){var doc = new DOMParser().parseFromString(html, "text/html"); var img = doc.querySelector(".avatar img");
 
  // Standard-Avatar
  var src = img ? img.src : "https://files.homepagemodules.de/b2001010/a_551.png"; cache[key] = src;save();callback(src);}).catch(function(){callback(null);});}
  
  // Prüfen, ob Avatar bereits existiert
  function getTarget(el){var link = el.closest("a[href]");return link || el;}
  function hasAnyAvatar(target){if(target.querySelector("img." + CLASS)) return true;var prev = target.previousSibling;if(prev && prev.nodeType === 1 && prev.tagName === "IMG") return true; return false;}
 
  // Avatar einfügen
  function inject(url, target){var skipProcessed = target.classList.contains("donation-name");if(!skipProcessed && processed.has(target)) return;if(hasAnyAvatar(target)){if(!skipProcessed) processed.add(target);return;}load(url, function(src){if(!src) return;if(hasAnyAvatar(target)){if(!skipProcessed) processed.add(target);return; } var img = document.createElement("img");img.src = src;img.className = CLASS;target.insertBefore(img, target.firstChild);target.classList.add("userlink");if(!skipProcessed) processed.add(target);});}
 
  // Bereiche scannen (Userlinks + Username)
  window.scan = function(root){var list = root.querySelectorAll(SEL);for(var i=0; i<list.length; i++){(function(el){var target = getTarget(el);if(!el.classList.contains("donation-name") && processed.has(target)) return;if(el.tagName === "A" && el.href){inject(el.href.split("#")[0], el);return;}
 
  // Name extrahieren
  var name = (el.getAttribute("data-username") || el.textContent || "").trim();if(el.classList.contains("donation-name")){name = name.replace(/:$/, "").trim();}if(name){inject("/user.php?uname=" + encodeURIComponent(name), target);}})(list[i]);}};
 
  // AJAX - Inhalte beobachten
  var timeout = null; var observer = new MutationObserver(function(){if(timeout) clearTimeout(timeout);timeout = setTimeout(function(){ window.scan(document); }, 80);}); observer.observe(document.body, { childList:true, subtree:true });
 
  // Erster Scan nach dem laden
  window.addEventListener("load", function(){setTimeout(function(){ window.scan(document); }, 150);});
});
</script>
 

 <style>
/* Filter-Leiste */
.activity-filter-bar {font: 15px arial !important; box-shadow: 0 8px 20px rgba(0, 0, 144, 0.6); position: sticky; top: 0; z-index: 50; padding:8px 10px; background:#f5f5f5; display:flex; flex-wrap:wrap; gap:15px; margin-bottom:10px;}
.activity-filter-bar label { cursor:pointer; user-select:none; }
.activity-filter-bar label input { width:auto; height: auto;}
.activity-filter-bar #bewertung {  transition:.5s; text-decoration: underline !important; box-shadow:none;}
.activity-filter-bar #bewertung:hover {background:#4B6BCE !important; color:#ffffff !important; text-decoration:none !important; box-shadow:0 8px 20px rgba(0,0,144,.6); padding: 2px 9px 4px 9px;}
 
/* Kategorien im Activity Feed ausblenden */
.activityfeed-container.hide-themen .forum_topic,.activityfeed-container.hide-beitraege [class*="forum_"]:not(.forum_topic), .activityfeed-container.hide-bewertungen .rsummary, .activityfeed-container.hide-bewertungen .rating, .activityfeed-container.hide-bewertungen .summarized,.activityfeed-container.hide-bilder [class*="gallery_"],.activityfeed-container.hide-blog [class*="blog_"],.activityfeed-container.hide-treetalk [class*="treetalk_"],.activityfeed-container.hide-kalender [class*="calendar_"],.activityfeed-container.hide-gaestebuch [class*="usergbook_"],.activityfeed-container.hide-standorte [class*="geomap"],.activityfeed-container.hide-wiki [class*="wiki"],.activityfeed-container.hide-integrationen [class*="integration_"]{display:none!important;}
 
/* Höhe Activity Feed */
.lastactions {max-height: 300px !important;}
 
/* Mobil */
@media (max-width: 768px) {
  .activity-filter-bar { position: relative; left: 0; right: 0; font: 13px arial !important;}
}
</style>
 

<script>
document.addEventListener("DOMContentLoaded", () => {
  const feed = document.querySelector(".feed #activity_feed .card-body, #xActivityFeed:not(.page_user #xActivityFeed)"); if (!feed || feed.dataset.filterInit) return; feed.dataset.filterInit = 1; feed.classList.add("activityfeed-container"); 
  const storageKey = "activityFeedCategoryHider";
  const saved = JSON.parse(localStorage.getItem(storageKey) || "{}");
  const categories = [["Themen","themen",c=>c==="forum_topic"],["Beiträge","beitraege",c=>c.startsWith("forum_") && c!=="forum_topic"],["Blog","blog",c=>c.startsWith("blog_")],["TreeTalk","treetalk",c=>c.startsWith("treetalk_")],["Bilder","bilder",c=>c.startsWith("gallery_")],["Kalender","kalender",c=>c.startsWith("calendar_")],["Gästebuch","gaestebuch",c=>c.startsWith("usergbook_")],["<a id='bewertung' href='{{link_myratings}}'>Bewertungen</a>","bewertungen",c=>["rsummary","rating","summarized"].includes(c)],["Standorte","standorte",c=>c.startsWith("geomap")],["Wiki","wiki",c=>c.startsWith("wiki")],["Integrationen","integrationen",c=>c.startsWith("integration_")]];
 
  // Kategorien erkennen
  const found = new Set();feed.querySelectorAll("li, .feedentry").forEach(e => e.className.split(/\s+/).forEach(c => categories.forEach(([n,_,m]) => m(c) && found.add(n))));
 
  // Filterleiste
  const bar = document.createElement("div"); bar.className = "activity-filter-bar";
  categories.forEach(([name,key]) => {if (!found.has(name)) return;const checked = saved[key] !== false; const label = document.createElement("label");label.innerHTML = `<input type="checkbox" ${checked?"checked":""}> ${name}`;label.firstChild.onchange = e => {saved[key] = e.target.checked; localStorage.setItem(storageKey, JSON.stringify(saved)); applyCSS();}; bar.appendChild(label);});
  feed.insertBefore(bar, feed.firstChild);
  function applyCSS(){ categories.forEach(([_,key]) => feed.classList.toggle("hide-"+key, saved[key] === false));}applyCSS();
 
  new MutationObserver(applyCSS).observe(feed, {childList:true, subtree:true});
});
</script>