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

<style>
/* --- Kategorie-Filter --- */
.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;}
 
/* Business (#xActivityFeed) */
#xActivityFeed.hide-themen .forum_topic,#xActivityFeed.hide-beitraege [class*="forum_"]:not(.forum_topic),#xActivityFeed.hide-bewertungen .rsummary,#xActivityFeed.hide-bewertungen .rating,#xActivityFeed.hide-bewertungen .summarized,#xActivityFeed.hide-bilder [class*="gallery_"],#xActivityFeed.hide-blog [class*="blog_"],#xActivityFeed.hide-treetalk [class*="treetalk_"],#xActivityFeed.hide-kalender [class*="calendar_"],#xActivityFeed.hide-gaestebuch [class*="usergbook_"],#xActivityFeed.hide-standorte [class*="geomap"],#xActivityFeed.hide-wiki [class*="wiki"],#xActivityFeed.hide-integrationen [class*="integration_"] { display:none !important; } 
  
/* Xobor (v6) Bootstrap */
.feed #activity_feed .card-body.hide-themen .forum_topic,.feed #activity_feed .card-body.hide-beitraege [class*="forum_"]:not(.forum_topic),.feed #activity_feed .card-body.hide-bewertungen .rsummary,.feed #activity_feed .card-body.hide-bewertungen .rating,.feed #activity_feed .card-body.hide-bewertungen .summarized,.feed #activity_feed .card-body.hide-bilder [class*="gallery_"],.feed #activity_feed .card-body.hide-blog [class*="blog_"],.feed #activity_feed .card-body.hide-treetalk [class*="treetalk_"],.feed #activity_feed .card-body.hide-kalender [class*="calendar_"],.feed #activity_feed .card-body.hide-gaestebuch [class*="usergbook_"],.feed #activity_feed .card-body.hide-standorte [class*="geomap"],.feed #activity_feed .card-body.hide-wiki [class*="wiki"],.feed #activity_feed .card-body.hide-integrationen [class*="integration_"] {display:none !important;}
 
/* --- Namensfilter --- */
.namefilter-bar { box-shadow:0 8px 20px rgba(0,0,144,.6); position:sticky; top:0; z-index:50; border-radius:4px; padding:0; margin-bottom:10px;}
.namefilter-header { text-align:  left; padding:8px 10px; box-shadow:0 8px 20px rgba(0,0,144,.6);}
.namefilter-header button { text-align:left; color:#fff; background:#383838; border:1px solid #bbb; border-radius:4px !important; padding:4px 10px; margin:0 !important; cursor:pointer; transition:.5s; white-space:nowrap;}
.namefilter-header button:hover { background:#dcdcdc; color:#000;}
.namefilter-users { display:flex; flex-wrap:wrap; gap:10px; padding:8px 10px;}
.namefilter-users label { cursor:pointer; padding:2px 4px; border-radius:3px; white-space:nowrap; transition:.5s;}
.namefilter-users label:hover { background:#eee; }
.namefilter-users label input { width:auto; height:auto; accent-color: #808000;}
 
/* Höhe Activity Feed */
.lastactions {max-height: 300px !important;}
 
/* Mobil */
@media (max-width: 768px) {
  .activity-filter-bar, .namefilter-bar { position: relative; left: 0; right: 0;}
  .activity-filter-bar { font: 13px arial !important;}
  .namefilter-users label {margin:0; padding:1px 5px 1px 1px;}
  .namefilter-header button:hover {background:#383838 !important; color: #ffffff !important}
  .namefilter-users{gap:2px}
}
</style>
 

<script>
document.addEventListener("DOMContentLoaded", () => {
  const feedCategories = document.querySelector("#xActivityFeed:not(.page_user #xActivityFeed)") || document.querySelector(".feed #activity_feed .card-body"); if (feedCategories) initCategoryFilter(feedCategories);
  const feedUser = document.querySelector(".page_user #xActivityFeed") || document.querySelector(".user #ratings_to_feedactivity_feed .card-body"); if (feedUser) {feedUser.querySelectorAll(".summarized").forEach(e => e.classList.remove("summarized"));}; initNameFilter(feedUser);
});
 
// KATEGORIEN-FILTER
function initCategoryFilter(feed) {
  if (feed.dataset.filterInit) return; feed.dataset.filterInit = 1;
  const key = "activityFeedCategoryHider", saved = JSON.parse(localStorage.getItem(key) || "{}"), cats = [["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_")]];
  const entries = [...feed.querySelectorAll("li,.feedentry")], found = new Set(); for (const e of entries) {for (const c of e.classList) {for (const [n,_,m] of cats) if (m(c)) found.add(n);}}
  const bar = document.createElement("div");bar.className = "activity-filter-bar";for (const [name,key] of cats) {if (!found.has(name)) continue;const lbl = document.createElement("label");lbl.innerHTML = `<input type="checkbox" ${saved[key]!==false?"checked":""}> ${name}`;lbl.firstChild.onchange = e => {saved[key] = e.target.checked;localStorage.setItem(key, JSON.stringify(saved));apply();}; bar.appendChild(lbl);}
  const header = feed.querySelector(".card-header"); header ? header.after(bar) : feed.prepend(bar);
  const apply = () => cats.forEach(([_,key]) => feed.classList.toggle("hide-"+key, saved[key]===false)); apply(); let raf = 0;
  new MutationObserver(() => {cancelAnimationFrame(raf);raf = requestAnimationFrame(apply);}).observe(feed,{childList:true,subtree:true});
}
 
// NAMENS-FILTER
function initNameFilter(feed) {
  if (feed.dataset.nameFilterInit) return; feed.dataset.nameFilterInit = 1;
  const entries = [...feed.querySelectorAll("li,.feedentry")];for (const e of entries) {e.dataset.user = (e.textContent.match(/\S+\s+\S+\s+(\S+)/)?.[1] || "");}
  const users = new Set(entries.map(e => e.dataset.user)),
                                                                                                          
  // Nicht gewollte Filter-Button ausblenden                                                                                                          
  stop = ["vor","Minute","Minuten","Stunde","Stunden","Heute","Gestern"];
 
  const bar = document.createElement("div"); bar.className = "namefilter-bar";
  const head = document.createElement("div"); head.className = "namefilter-header";
  const master = document.createElement("button"); master.textContent = "Alles ausblenden und nach Namen filtern";head.appendChild(master);
  const wrap = document.createElement("div");wrap.className = "namefilter-users";wrap.style.display = "none"; for (const n of users) {if (!n || stop.some(s => n.includes(s))) continue;const lbl = document.createElement("label"); lbl.innerHTML = `<input type="checkbox" data-user="${n}" checked> ${n}`;wrap.appendChild(lbl);} bar.append(head, wrap); feed.before(bar);
  const apply = () => {const active = new Set([...wrap.querySelectorAll("input:checked")].map(cb => cb.dataset.user));for (const e of entries) e.style.display = active.has(e.dataset.user) ? "" : "none"; master.textContent = active.size === users.size ? "Alle ausblenden und nach Namen filtern" : "Alle Bewertungen einblenden";};
 
  // Event Delegation
  wrap.addEventListener("change", apply);
  master.onclick = () => {if (wrap.style.display === "none") {wrap.style.display = "flex";wrap.querySelectorAll("input").forEach(cb => cb.checked = false);apply();return;}const all = wrap.querySelectorAll("input:checked").length === users.size;wrap.querySelectorAll("input").forEach(cb => cb.checked = !all);apply();};
}
</script>
 

<style>
/* --- Kategorie-Filter --- */
.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; align-items: center; 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; font: 15px arial !important;}
.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;}
 
/* Business (#xActivityFeed) */
#xActivityFeed.hide-themen .forum_topic,#xActivityFeed.hide-beitraege [class*="forum_"]:not(.forum_topic),#xActivityFeed.hide-bewertungen .rsummary,#xActivityFeed.hide-bewertungen .rating,#xActivityFeed.hide-bewertungen .summarized,#xActivityFeed.hide-bilder [class*="gallery_"],#xActivityFeed.hide-blog [class*="blog_"],#xActivityFeed.hide-treetalk [class*="treetalk_"],#xActivityFeed.hide-kalender [class*="calendar_"],#xActivityFeed.hide-gaestebuch [class*="usergbook_"],#xActivityFeed.hide-standorte [class*="geomap"],#xActivityFeed.hide-wiki [class*="wiki"],#xActivityFeed.hide-integrationen [class*="integration_"] { display:none; } 
  
/* Xobor (v6) Bootstrap */
.feed #activity_feed .card-body.hide-themen .forum_topic,.feed #activity_feed .card-body.hide-beitraege [class*="forum_"]:not(.forum_topic),.feed #activity_feed .card-body.hide-bewertungen .rsummary,.feed #activity_feed .card-body.hide-bewertungen .rating,.feed #activity_feed .card-body.hide-bewertungen .summarized,.feed #activity_feed .card-body.hide-bilder [class*="gallery_"],.feed #activity_feed .card-body.hide-blog [class*="blog_"],.feed #activity_feed .card-body.hide-treetalk [class*="treetalk_"],.feed #activity_feed .card-body.hide-kalender [class*="calendar_"],.feed #activity_feed .card-body.hide-gaestebuch [class*="usergbook_"],.feed #activity_feed .card-body.hide-standorte [class*="geomap"],.feed #activity_feed .card-body.hide-wiki [class*="wiki"],.feed #activity_feed .card-body.hide-integrationen [class*="integration_"] {display:none;}
 
/* --- Namensfilter --- */
.namefilter-bar { box-shadow:0 8px 20px rgba(0,0,144,.6); position:sticky; top:0; z-index:50; border-radius:4px; padding:0; margin-bottom:10px;}
.namefilter-header { text-align:  left; padding:8px 10px; box-shadow:0 8px 20px rgba(0,0,144,.6); }
.namefilter-header button { text-align:left; color:#fff; background:#383838; border:1px solid #bbb; border-radius:4px !important; padding:4px 10px; margin:0 !important; cursor:pointer; transition:.5s; white-space:nowrap; outline: none;}
.namefilter-header button:hover { background:#dcdcdc !important; color:#000 !important;}
.namefilter-users { display:flex; flex-wrap:wrap; gap:10px; padding:8px 10px;}
.namefilter-users label { cursor:pointer; padding:2px 4px; border-radius:3px; white-space:nowrap; transition:.5s; }
.namefilter-users label:hover { background:#eee; }
.namefilter-users label input { width:auto; height:auto; accent-color: #808000;}
 
/* Höhe Activity Feed */
.lastactions {max-height: 300px !important;}
 
/* Mobil */
@media (max-width: 768px) {
  .activity-filter-bar, .namefilter-bar { position: relative; left: 0; right: 0;}
  .activity-filter-bar { font: 13px arial !important;}
  .namefilter-users label {margin:0; padding:1px 5px 1px 1px;}
  .namefilter-header button:hover {background:#383838 !important; color: #ffffff !important}
  .namefilter-users{gap:2px}
}
</style>
 

<script>
document.addEventListener("DOMContentLoaded", () => {     
  const feed = document.querySelector("#xActivityFeed") || document.querySelector(".feed #activity_feed .card-body") || document.querySelector(".user #ratings_to_feedactivity_feed .card-body"); if (!feed) return;
  feed.querySelectorAll(".summarized").forEach(el => {el.classList.remove("summarized");});
  initUnifiedFilter(feed);
});
  
/* ------------------ USER ERKENNUNG ------------------ */
function detectUser(e) {
  // Alle Userlinks aus Feedliste auslesen
  const links = [...e.querySelectorAll("a[href*='/u']")]; if (links.length > 0) { return links.map(a => a.textContent.trim());}
 
  // Text-Fallbacks
  const text = e.innerText.replace(/\s+/g, " ").trim(); if (/^vor\b/i.test(text)) return [];
 
  // Einzel-User mit Satzzeichen finden
  let m = text.match(/\b([A-Za-zÄÖÜäöüß0-9\-]+)\s+(hat|findet)\b/); if (m) return [m[1]];
  
  // Mehrere User mit Satzzeichen
  m = text.match(/^([A-Za-zÄÖÜäöüß0-9\-,\s]+)\s+haben\b/); 
  if (m) { return m[1].replace(/\bund\b/g, ",").split(",").map(n => n.trim()).filter(n => n.length > 0);} 
  return [];
}
 
/* ------------------ RATING-SEITE ------------------ */
function extractUser(e) {const direct = e.querySelector(".userlink, .username, a[href*='u'], a[href^='u']") || e.querySelector("img[title]"); if (direct) return (direct.textContent || direct.title).trim(); const m = e.innerText.match(/\b[A-Za-zÄÖÜäöüß][A-Za-zÄÖÜäöüß0-9\-]+\b/); return m ? m[0] : null;}
function initUserRatingsFilter(feed) {
  const entries = [...feed.querySelectorAll(".cmhsp, li, .feedentry")];
  const users = [...new Set(entries.map(extractUser).filter(name => name && name.length < 30))];  if (!users.length) return;
  const box = document.createElement("div");box.className = "namefilter-bar";
  const header = document.createElement("div");header.className = "namefilter-header";
  const master = document.createElement("button");master.textContent = "Alle User ausblenden";header.appendChild(master);
  const wrap = document.createElement("div");wrap.className = "namefilter-users";users.forEach(name => {const label = document.createElement("label");label.innerHTML = `<input type="checkbox" data-user="${name}" checked> ${name}`;wrap.appendChild(label);});
 
  box.appendChild(header); box.appendChild(wrap); feed.insertAdjacentElement("beforebegin", box);
  
  function apply() {const active = [...wrap.querySelectorAll("input[data-user]:checked")].map(cb => cb.dataset.user); entries.forEach(e => { const u = extractUser(e); e.style.display = active.includes(u) ? "" : "none";}); master.textContent = active.length === users.length ? "Alle User ausblenden" : "Alle User wieder einblenden";} wrap.querySelectorAll("input[data-user]").forEach(cb => cb.addEventListener("change", apply)); master.addEventListener("click", () => { const allChecked = wrap.querySelectorAll("input[data-user]:checked").length === users.length; wrap.querySelectorAll("input[data-user]").forEach(cb => cb.checked = !allChecked); apply();}); 
  new MutationObserver(apply).observe(feed, { childList: true, subtree: true }); apply();
}
 
/* ------------------ Gemeinsamer FILTER ------------------ */
function initUnifiedFilter(feed) {
  if (feed.dataset.unifiedFilterInit) return; feed.dataset.unifiedFilterInit = "1";
 
  const isUserPage = document.body.classList.contains("page-user") || location.pathname.includes("-ratings"); if (isUserPage) return initUserRatingsFilter(feed);
  const storageKey = "activityFeedUnified";
  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_")],["Standorte","standorte",c=>c.startsWith("geomap")],["Wiki","wiki",c=>c.startsWith("wiki")],["Integrationen","integrationen",c=>c.startsWith("integration_")],["<a id='bewertung' href='{{link_myratings}}'>Bewertungen</a>", "bewertungen", c => ["rsummary","rating","summarized"].includes(c)]];
  const entries = [...feed.querySelectorAll(".cmhsp, li, .feedentry")];
  const entryUsers = new Map(); const users = new Set(); 
 
  // Ausblenden von nicht gewollten Filter-Button (hier "vor, Heute, Gestern, ...")
  const stopUsers = new Set(["vor", "Heute", "Gestern", "Minuten"]); entries.forEach(e => {const u = detectUser(e);const names = u ? (Array.isArray(u) ? u : [u]) : [];entryUsers.set(e, names);for (const n of names) {if (!stopUsers.has(n)) {users.add(n);}}});
  const found = new Set(); entries.forEach(e => {for (const c of e.classList) {for (const [, key, match] of categories) {if (match(c)) found.add(key);}}});
  const bar = document.createElement("div"); bar.className = "activity-filter-bar"; categories.forEach(([name,key]) => {if (!found.has(key)) return; 
  const label = document.createElement("label");label.innerHTML =`<input type="checkbox" data-cat="${key}" ${saved[key]!==false?"checked":""}> ${name}`;bar.appendChild(label); }); let userLabel = null, userBox = null, userWrap = null, master = null;if (users.size > 0) {userLabel = document.createElement("label");userLabel.innerHTML =`<input type="checkbox" id="userFilterToggle" ${saved.userMode?"checked":""}><span style="padding-right:10px;border-right:3px solid #aaa;font-weight:bold;">&#128100; Nur User</span>`; bar.insertBefore(userLabel, bar.firstChild); userBox = document.createElement("div"); userBox.className = "namefilter-bar";userBox.style.display = saved.userMode ? "block" : "none";
  const header = document.createElement("div"); header.className = "namefilter-header";
 
  master = document.createElement("button");master.textContent = "Alle ausblenden"; header.appendChild(master);
  userWrap = document.createElement("div"); userWrap.className = "namefilter-users"; users.forEach(name => { const label = document.createElement("label"); label.innerHTML = `<input type="checkbox" data-user="${name}" checked> ${name}`; userWrap.appendChild(label);}); userBox.appendChild(header); userBox.appendChild(userWrap);} feed.insertAdjacentElement("beforebegin", bar); if (userBox) feed.insertAdjacentElement("beforebegin", userBox);
 
  function applyCategoryFilter() {for (const [, key] of categories) feed.classList.toggle("hide-" + key, saved[key] === false);}
  function applyUserFilter() {if (!userWrap) return; const active = new Set([...userWrap.querySelectorAll("input[data-user]:checked")].map(cb => cb.dataset.user));entries.forEach(e => {const names = entryUsers.get(e) ?? [];e.style.display = names.some(n => active.has(n)) ? "" : "none";}); master.textContent = active.size === users.size ? "Alle User ausblenden" : "Alle User wieder einblenden";}
  function applyFilters() {const userMode = saved.userMode === true;bar.style.display = userMode ? "none" : "flex";if (userBox) userBox.style.display = userMode ? "block" : "none";if (userLabel && userWrap) {const target = userMode ? userWrap : bar;target.insertBefore(userLabel, target.firstChild);}if (!userMode) {entries.forEach(e => e.style.display = "");}if (userMode) {for (const [, key] of categories) {feed.classList.remove("hide-" + key);} applyUserFilter();} else {applyCategoryFilter(); }}
 
  bar.querySelectorAll("[data-cat]").forEach(cb => cb.addEventListener("change", () => { saved[cb.dataset.cat] = cb.checked; localStorage.setItem(storageKey, JSON.stringify(saved)); applyFilters();})); 
  const userToggle = userLabel ? userLabel.querySelector("#userFilterToggle") : null; if (userToggle) {userToggle.addEventListener("change", e => {saved.userMode = e.target.checked;localStorage.setItem(storageKey, JSON.stringify(saved)); applyFilters();}); }
 
  if (userWrap) {const userCheckboxes = [...userWrap.querySelectorAll("input[data-user]")]; userCheckboxes.forEach(cb => cb.addEventListener("change", applyUserFilter));
  if (master) {master.addEventListener("click", () => { const allChecked = userCheckboxes.filter(cb => cb.checked).length === users.size; userCheckboxes.forEach(cb => cb.checked = !allChecked);applyUserFilter();});}}
 
  let filterTimer = null; function scheduleApplyFilters() {clearTimeout(filterTimer); filterTimer = setTimeout(applyFilters, 50);}
  new MutationObserver(scheduleApplyFilters).observe(feed, {childList: true,subtree: true});
  applyFilters();
}
</script>