PARKS timeline filter

parks_timeline_filter.js

javascript:(function(){
  const UI_ID = 'timeline-filter-v3';
  const STYLE_ID = 'timeline-filter-style-v3';
  
  if (document.getElementById(UI_ID)) document.getElementById(UI_ID).remove();
  if (document.getElementById(STYLE_ID)) document.getElementById(STYLE_ID).remove();

  const style = document.createElement('style');
  style.id = STYLE_ID;
  style.textContent = `
    #${UI_ID} {
      position: fixed !important; top: 20px !important; left: 50% !important;
      transform: translateX(-50%) !important; z-index: 2147483647 !important;
      background: #ffffff !important; padding: 15px !important; border-radius: 12px !important;
      box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important; display: flex !important;
      gap: 12px !important; align-items: flex-end !important;
      font-family: sans-serif !important; font-size: 13px !important; border: 1px solid #eee !important;
    }
    #${UI_ID} .filter-group { display: flex; flex-direction: column; gap: 4px; }
    #${UI_ID} label { font-weight: bold; font-size: 11px; color: #666; }
    #${UI_ID} input { padding: 6px 10px; border: 1px solid #ddd; border-radius: 6px; width: 120px; }
    #${UI_ID} button { padding: 6px 14px; background: #f8f9fa; border: 1px solid #ddd; border-radius: 6px; cursor: pointer; }
    .timeline-hidden-v3, ._mutedPlaceholderText_1yvw6_184 { display: none !important; }
  `;
  document.head.appendChild(style);

  const ui = document.createElement('div');
  ui.id = UI_ID;
  
  const fields = [
    { id: 'f-author-v3', label: 'Author', selector: '._author_1af71_141' },
    { id: 'f-slug-v3', label: 'AuthorSlug', selector: '._authorSlug_1af71_179' },
    { id: 'f-context-v3', label: 'PostContext', selector: '._postContextLink_1af71_236' }
  ];

  fields.forEach(f => {
    const group = document.createElement('div');
    group.className = 'filter-group';
    group.innerHTML = `<label>${f.label}</label>`;
    const input = document.createElement('input');
    input.id = f.id;
    input.placeholder = 'Search...';
    input.oninput = applyFilter;
    group.appendChild(input);
    ui.appendChild(group);
  });

  const resetBtn = document.createElement('button');
  resetBtn.textContent = 'Reset';
  resetBtn.onclick = () => {
    fields.forEach(f => document.getElementById(f.id).value = '');
    applyFilter();
  };
  ui.appendChild(resetBtn);

  const closeBtn = document.createElement('button');
  closeBtn.innerHTML = '&times;';
  closeBtn.style.border = 'none';
  closeBtn.style.background = 'none';
  closeBtn.style.fontSize = '20px';
  closeBtn.style.cursor = 'pointer';
  closeBtn.onclick = () => {
    observer.disconnect();
    ui.remove();
    style.remove();
    document.querySelectorAll('.timeline-hidden-v3').forEach(el => el.classList.remove('timeline-hidden-v3'));
  };
  ui.appendChild(closeBtn);

  document.body.appendChild(ui);

  function applyFilter() {
    const activeFilters = fields.map(f => ({
      val: document.getElementById(f.id).value.toLowerCase(),
      selector: f.selector
    })).filter(f => f.val);

    document.querySelectorAll('._reply_1af71_1').forEach(post => {
      let isVisible = true;
      for (const f of activeFilters) {
        const target = post.querySelector(f.selector);
        const text = target ? target.textContent.toLowerCase() : '';
        if (!text.includes(f.val)) {
          isVisible = false;
          break;
        }
      }
      post.classList.toggle('timeline-hidden-v3', !isVisible);
    });
  }

  /* スクロール等で要素が増えたのを検知してフィルタを再適用 */
  const observer = new MutationObserver(() => applyFilter());
  observer.observe(document.body, { childList: true, subtree: true });
  
  applyFilter();
})();