Filter 17Lands data

Adds a input to quickly filter cards by name. Separate by commas to see multiple cards. Click `/` to quickly focus on input
目前為 2023-09-30 提交的版本，檢視最新版本。
安裝腳本 ?
發表問題、評論、或檢舉該腳本。
換行
// ==UserScript==
// @name        Filter 17Lands data
// @namespace   Violentmonkey Scripts
// @match       https://www.17lands.com/*
// @grant       none
// @version     1.3.0
// @author      rsromanowski
// @license     MIT
// @description Adds a input to quickly filter cards by name. Separate by commas to see multiple cards. Click `/` to quickly focus on input
// @require https://cdn.jsdelivr.net/npm/@violentmonkey/dom@2
// @require https://cdn.jsdelivr.net/npm/@violentmonkey/shortcut@1
// ==/UserScript==

function prettify() {
  const toolbar = document.querySelector('div > div > select').parentElement.parentElement
  toolbar.style.cssText += " justify-content: space-between"

  const divs = document.querySelectorAll('#app > div > div')
  divs.forEach(d => d.classList.add('container'))
}

function filterTable(filter) {
  const columns = [
    { name: 'Name', index: 0, isFilter: true },
    { name: 'Color', index: 1, isFilter: false },
    { name: 'Rarity', index: 2, isFilter: false },
  ]

  const filterColumns = columns.filter(c => c.isFilter).map(c => c.index)

  const rarityRegex = new RegExp('r[:=]([curm])', 'i')
  const colorRegex = new RegExp('c[:=]([wubrgcm])', 'i')

  // Currently only one table on page
  // Headers are in thead
  const rows = document.querySelectorAll(`table > tbody > tr`)

  const clauses = filter.split(",")
  const rarityClauses = clauses.filter(c => rarityRegex.test(c))
  const colorClauses = clauses.filter(c => colorRegex.test(c))
  const nameClauses = clauses.filter(c => !rarityRegex.test(c) && !colorRegex.test(c))

  const orFilter = nameClauses.filter(f => f.trim().length > 0).map(f => f.trim()).join("|")
  const regex = new RegExp(`${orFilter}`, 'i')
  const isFoundInTds = td => regex.test(td.innerHTML)
  const isFound = childrenArr => childrenArr.some(isFoundInTds)
  const setTrStyleDisplay = ({ style, children }) => {
    style.display = isFound([
      ...filterColumns.map(c => children[c]) // <-- filter Columns
    ]) ? '' : 'none'
  }

  rows.forEach(setTrStyleDisplay)
}

function createQueryInput() {
  const div = document.querySelector('.main-text')
  const i = document.createElement('input')
  i.id = "q"
  i.className = "form-control"
  i.placeholder = 'Press \'/\' to focus. Search by partial card names. i.e. "Candy Grapple" or "candy,torch"'
  div.appendChild(i)

  i.addEventListener("input", (event) => { filterTable(event.target.value) })

  // Select all text of focus for quick overwrite
  i.addEventListener("focus", function () { this.select() })
}

if (window.location.pathname == '/card_data') {
  VM.observe(document.body, () => {
    const table = document.querySelector('table')

    if (table) {
      createQueryInput()
      prettify()

      return true // disconnect observer
    }
  })

  VM.shortcut.register('/', () => {
    document.getElementById("q").focus()
  })
} else if (window.location.pathname == '/card_data/details') {
  const dropdown = document.getElementById('card')
  // max: dropdown.childElementCount - 1
  // a.selectedIndex=69
  // dispatchEvent(new window.Event('change', { bubbles: true }))
  console.log(`details baby`)
} else {
  console.log(`Nothing to do on page: ${window.location.pathname}`)
}
欢迎访问Greasy Fork镜像
