AniList Status Filter

Filter anime by your status on AniList search page.
当前为 2023-03-08 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name            AniList Status Filter
// @namespace       https://github.com/SlashNephy
// @version         0.1.0
// @author          SlashNephy
// @description     Filter anime by your status on AniList search page.
// @description:ja  AniListの作品検索ページ内で自分の視聴ステータスでフィルターできるようにします。
// @homepage        https://scrapbox.io/slashnephy/AniList_%E3%81%A7%E8%87%AA%E5%88%86%E3%81%AE%E8%A6%96%E8%81%B4%E3%82%B9%E3%83%86%E3%83%BC%E3%82%BF%E3%82%B9%E3%81%AB%E5%BF%9C%E3%81%98%E3%81%A6%E4%BD%9C%E5%93%81%E3%82%92%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF%E3%83%BC%E3%81%99%E3%82%8B_UserScript
// @homepageURL     https://scrapbox.io/slashnephy/AniList_%E3%81%A7%E8%87%AA%E5%88%86%E3%81%AE%E8%A6%96%E8%81%B4%E3%82%B9%E3%83%86%E3%83%BC%E3%82%BF%E3%82%B9%E3%81%AB%E5%BF%9C%E3%81%98%E3%81%A6%E4%BD%9C%E5%93%81%E3%82%92%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF%E3%83%BC%E3%81%99%E3%82%8B_UserScript
// @icon            https://www.google.com/s2/favicons?sz=64&domain=anilist.co
// @supportURL      https://github.com/SlashNephy/.github/issues
// @match           https://anilist.co/search/*
// @grant           none
// @license         MIT license
// ==/UserScript==

const style = document.createElement('style')
document.head.appendChild(style)
const hiddenStatuses = {
  Watching: false,
  Completed: false,
  Planning: false,
  Paused: false,
  Dropped: false,
}
const renderCheckbox = (title, onClick) => {
  const box = document.createElement('div')
  box.classList.add('filter', 'checkbox-wrap')
  box.toggleAttribute('data-v-acf5fe42')
  {
    const wrapper = document.createElement('div')
    wrapper.classList.add('checkbox-wrap')
    wrapper.toggleAttribute('data-v-acf5fe42')
    wrapper.toggleAttribute('data-v-32107ecb')
    wrapper.addEventListener('click', onClick)
    box.appendChild(wrapper)
    {
      const checkbox = document.createElement('div')
      checkbox.classList.add('checkbox')
      checkbox.toggleAttribute('data-v-32107ecb')
      wrapper.appendChild(checkbox)
      {
        const check = document.createElement('div')
        check.classList.add('check')
        check.toggleAttribute('data-v-32107ecb')
        checkbox.appendChild(check)
      }
    }
    {
      const label = document.createElement('div')
      label.classList.add('label')
      label.toggleAttribute('data-v-32107ecb')
      label.textContent = title
      wrapper.appendChild(label)
    }
  }
  return box
}
const renderCss = () => {
  const statuses = Object.entries(hiddenStatuses)
    .filter(([_, hide]) => hide)
    .map(([key, _]) => key)
  if (statuses.length === 0) {
    return ''
  }
  const selectors = statuses.map((s) => `.media-card:has(> a div[status="${s}"])`).join(',')
  return `${selectors} { display: none; }`
}
const renderFilters = (children) => {
  const filters = document.createElement('div')
  {
    const name = document.createElement('div')
    name.classList.add('name')
    name.toggleAttribute('data-v-84c4e64c')
    name.textContent = 'my status'
    filters.appendChild(name)
  }
  {
    const wrapper = document.createElement('div')
    wrapper.classList.add('filters-wrap', 'checkbox')
    wrapper.toggleAttribute('data-v-acf5fe42')
    wrapper.append(...children)
    filters.appendChild(wrapper)
  }
  return filters
}
const toggleCheckbox = (e, key) => {
  hiddenStatuses[key] = !hiddenStatuses[key]
  style.textContent = renderCss()
  const element = e.currentTarget
  const check = element?.querySelector('.check')
  if (check === null || check === undefined) {
    return
  }
  check.style.display = hiddenStatuses[key] ? 'none' : 'initial'
}
const extraFiltersWrap = document.querySelector('.extra-filters-wrap')
if (extraFiltersWrap !== null) {
  extraFiltersWrap.insertAdjacentElement(
    'afterend',
    renderFilters([
      renderCheckbox('Watching', (e) => {
        toggleCheckbox(e, 'Watching')
      }),
      renderCheckbox('Completed', (e) => {
        toggleCheckbox(e, 'Completed')
      }),
      renderCheckbox('Planning', (e) => {
        toggleCheckbox(e, 'Planning')
      }),
      renderCheckbox('Paused', (e) => {
        toggleCheckbox(e, 'Paused')
      }),
      renderCheckbox('Dropped', (e) => {
        toggleCheckbox(e, 'Dropped')
      }),
    ])
  )
}
欢迎访问Greasy Fork镜像
