52pojie主题筛选工具

52pojie主题页面增强,可以对主题列表进行筛选和排序

// ==UserScript==
// @name         52pojie主题筛选工具
// @namespace    http://tampermonkey.net/
// @version      0.0.1-b20241121
// @description  52pojie主题页面增强,可以对主题列表进行筛选和排序
// @author       wonder2018
// @license      CC-BY-4.0 license
// @match        https://www.52pojie.cn/forum*
// @icon         http://52pojie.cn/favicon.ico
// @grant        GM_addStyle
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_registerMenuCommand
// @grant        GM_unregisterMenuCommand
// ==/UserScript==

;(function () {
  'use strict'
  // #region 初始化
  const tableSelector = `div#threadlist table`
  const appendSelector = `ul#thread_types`
  const dftOrderAttrName = 'pj-dft-order'
  const sideBtnWrapId = `filterBox`
  const sideBtnWrapSelector = `ul#${sideBtnWrapId}`
  const allHideTypes = new Set()
  const filterBtnColor = '#66ccff'
  const showBtnColor = 'goldenrod'
  /** @type {HTMLLIElement[]} */
  const btnList = []
  const availableTools = [
    { switchName: '移除已解决', switchKey: 'useFilterBySolved', init: filterBySolved, menuId: null },
    { switchName: '移除回复多于x', switchKey: 'useFilterByReplyGt', init: filterByReplyGt, menuId: null },
    { switchName: '移除CB少于x', switchKey: 'useFilterByCBLt', init: filterByCBLt, menuId: null },
    { switchName: '正则过滤', switchKey: 'useFilterByRegExp', init: filterByRegExp, menuId: null },
    { switchName: '按创建时间排序', switchKey: 'useSortByCreateTime', init: sortByCreateTime, menuId: null },
  ]
  const dftPJOpts = availableTools.reduce((p, i) => ((p[i.switchKey] = true), p), { showPos: 2 })
  dftPJOpts.useFilterByRegExp = false
  let togglePosMenuId = null
  // #endregion 初始化

  // #region 样式

  // #region 样式 > 基础样式
  GM_addStyle(`
    .pj-btn {
      border-radius: 5px;
      color: #fff;
      cursor: pointer;
    }
    .pj-btn>input.pj-ctl{
      width:2em;
      height:1em;
      pointer-events:all;
      text-align:center;
    }
  `)

  // #endregion 样式 > 基础样式

  // #region 样式 > fixed mode box
  GM_addStyle(`
    ${sideBtnWrapSelector} {
      position: fixed;
      top: 50%;
      right: 0;
      padding: 40px 20px;
      flex-direction: row;
      z-index: 99999;
      display: flex;
      flex-wrap: wrap;
      width: 295px;
      transform: translate(95%, -50%);
      transition: .3s;
      transition-delay: .3s;
    }

    ${sideBtnWrapSelector}:hover{
      transform: translate(0, -50%);
      transition-delay: 0s;
    }

    ${sideBtnWrapSelector}::after{
      content: '<';
      position: absolute;
      display: block;
      width: 30px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      background-color: #66ccff;
      top: 0;
      bottom: 0;
      margin: auto;
      left: -40px;
      margin-left: 20px;
      font-weight: bold;
      color: rgb(0, 102, 255);
      border-radius: 5px;
    }

    ${sideBtnWrapSelector}>li {
      margin: 5px 0;
      flex-grow: 1;
      flex-basis: 40%;
    }
    ${sideBtnWrapSelector}>li>a {
      padding: 10px;
      border-color: rgb(0,102,255);
      border-radius: 5px;
      background-color: white;
      color: rgb(0,102,255);
      margin-right: 10px;
      box-shadow: rgb(207,207,207) 1px 1px 9px 3px;
      text-decoration: none;
      display: block;
      transition: .3s;
    }
    ${sideBtnWrapSelector}>li>a:hover {
      box-shadow: #888 1px 1px 9px 3px;
    }
    ${sideBtnWrapSelector}>li>a>input {
      float:right;
    }
  `)
  // #endregion > fixed mode box

  // #endregion 样式

  // #region 菜单
  const OPTION_KEY = 'PJ_FILTER_OPT'

  const showPosList = ['移除按钮', '列表头部', '窗口右侧']

  /** @type {typeof dftPJOpts} */
  const options = JSON.parse(GM_getValue(OPTION_KEY, JSON.stringify(dftPJOpts)))
  function saveOpt() {
    regMenu()
    GM_setValue(OPTION_KEY, JSON.stringify(options))
  }

  function toggleBtnPos(type = options.showPos) {
    options.showPos = (type || 0) % 3
    saveOpt()
    if (options.showPos === 0) return removeAllBtn()
    if (options.showPos === 1) return showBtnTableHead()
    if (options.showPos === 2) return showBtnFixed()
  }
  /** @param {(typeof availableTools)[number]} type */
  function togglePJToolUse(type) {
    if (type.switchKey === 'useFilterByRegExp') return changeRegExpFilter(type)
    options[type.switchKey] = !options[type.switchKey]
    saveOpt()
    initPJTools()
  }

  /** @param {(typeof availableTools)[number]} type */
  function changeRegExpFilter(type) {
    if (type.switchKey !== 'useFilterByRegExp') return
    let reg = prompt('输入正则表达式(留空点击确定可关闭此功能)', options[type.switchKey] || '')
    // 点击取消时不做任何操作
    if (typeof reg !== 'string') return
    reg = reg.trim()
    const regObj = strToRegExp(reg.trim())
    if (!(regObj instanceof RegExp) && regObj != null) return alert(`输入的正则表达式有误请检查:${reg}`)
    options[type.switchKey] = !!regObj && `/${regObj.source}/${regObj.flags}`
    saveOpt()
    initPJTools()
  }

  function initPJTools() {
    loadBtnByOpts()
    toggleBtnPos(options.showPos)
  }

  function regToggleBtnPosMenu() {
    if (togglePosMenuId != null) GM_unregisterMenuCommand(togglePosMenuId)
    togglePosMenuId = GM_registerMenuCommand(`切换按钮位置:[${showPosList[options.showPos]}]`, () => toggleBtnPos(options.showPos + 1))
  }

  /** @param {(typeof availableTools)[number]} type */
  function regToolsMenu(type) {
    if (type.switchKey === 'useFilterByRegExp') return regRegExpFilterMenu(type)
    if (type.menuId != null) GM_unregisterMenuCommand(type.menuId)
    type.menuId = GM_registerMenuCommand(`${type.switchName}[${options[type.switchKey] ? '开' : '关'}]`, () => togglePJToolUse(type))
  }

  /** @param {(typeof availableTools)[number]} type */
  function regRegExpFilterMenu(type) {
    if (type.switchKey !== 'useFilterByRegExp') return null
    if (type.menuId != null) GM_unregisterMenuCommand(type.menuId)
    type.menuId = GM_registerMenuCommand(`${type.switchName}[${options[type.switchKey] || '关'}]`, () => togglePJToolUse(type))
  }

  function regMenu() {
    regToggleBtnPosMenu()
    availableTools.forEach(i => regToolsMenu(i))
  }
  // #endregion 菜单

  // #region utils
  function createBtn(text, color) {
    const btn = document.createElement('li')
    btn.classList.add('pj-btn-wrap')
    btn.innerHTML = `<a class="pj-btn" style="background-color:${color};">${text}</a>`
    btnList.push(btn)
    return btn
  }

  /** 处理还原隐藏帖子事件 */
  function recoverByType(type) {
    /** @type {HTMLTableSectionElement[]} */
    const lines = [...document.querySelectorAll(`${tableSelector}>tbody[id*=normalthread_][${type}]`)]
    lines.forEach(i => {
      i.setAttribute(type, false)
      if ([...allHideTypes].every(t => !i.getAttribute(t) || i.getAttribute(t) == 'false')) {
        i.style.display = ''
      }
    })
  }

  /** 根据配置项初始化所有按钮 */
  function loadBtnByOpts() {
    // 移除已添加的按钮,和附带元素(比如fixed模式下的按钮容器)
    removeAllBtn()
    // 确保所有按钮都被移除再清空数组
    btnList.forEach(i => i.remove())
    btnList.length = 0
    availableTools.filter(i => options[i.switchKey]).forEach(i => i.init())
  }

  /** 按钮显示到列表头部 */
  function removeAllBtn() {
    btnList.forEach(i => i.remove())
    const sideBtnWrap = document.querySelector(sideBtnWrapSelector)
    sideBtnWrap && sideBtnWrap.remove()
  }

  /** 按钮显示到列表头部 */
  function showBtnTableHead() {
    const appendTarget = document.querySelector(appendSelector)
    if (!appendTarget) return console.warn('不是论坛列表页,不添加按钮。')
    btnList.forEach(i => appendTarget.appendChild(i))
    const sideBtnWrap = document.querySelector(sideBtnWrapSelector)
    sideBtnWrap && sideBtnWrap.remove()
  }

  /** 按钮固定在窗口右侧 */
  function showBtnFixed() {
    if (!btnList.length) return
    const filterButtonBox = document.createElement('ul')
    filterButtonBox.id = sideBtnWrapId
    btnList.forEach(i => filterButtonBox.appendChild(i))
    document.body.appendChild(filterButtonBox)
  }

  /** 字符串转正则表达式 */
  function strToRegExp(str) {
    if (!str || typeof str !== 'string') return null
    try {
      str = str.trim()
      const part = str.match(/^\/(.+?)\/(\w*)$/)
      /** @type {RegExp} */
      let regObj = null
      if (part) {
        regObj = new RegExp(part[1], part[2])
      } else if (str) {
        regObj = new RegExp(str, 'i')
      }
      return regObj
    } catch (error) {
      return new Error('错误的正则表达式!')
    }
  }

  /** 论坛目前默认排序方式是按照最新回复排序,为了兼容后续可能的改动,这里还是先保存默认排序,之后再按此顺序恢复 */
  /** 保存原始顺序 @param {HTMLTableSectionElement[]} lines */
  function setDftOrder(lines) {
    let maxOrder = Math.max(-Infinity, 1, ...lines.map(i => i.getAttribute(dftOrderAttrName) || 0))
    // 保存原始顺序
    lines.forEach(i => {
      // 已经记录了默认顺序的帖子跳过
      if (i.hasAttribute(dftOrderAttrName)) return
      i.setAttribute(dftOrderAttrName, maxOrder++)
    })
  }
  /** 还原帖子排序 */
  function recoverOrder() {
    /** @type {HTMLTableSectionElement[]} */
    const lines = [...document.querySelectorAll(`${tableSelector}>tbody[id*=normalthread_]`)]
    // 为新增的没有参与排序的行添加顺序以便排序
    setDftOrder(lines)
    const sorted = lines.sort((a, b) => parseInt(a.getAttribute(dftOrderAttrName)) - parseInt(b.getAttribute(dftOrderAttrName)))
    sortLines(sorted)
  }
  /** 按照顺序排列帖子 @param {HTMLTableSectionElement[]} lines */
  function sortLines(lines) {
    if (!Array.isArray(lines) || !lines.length) return
    const container = lines[0].parentNode
    if (!container) return console.warn('列表没有祖先节点,不进行操作!')

    container.append(...lines)
  }

  /** 获取创建时间 @param {HTMLTableSectionElement} line */
  function readCreateTime(line) {
    let text = line.querySelector('.by')
    if (!text || typeof text.innerText != 'string' || !text.innerText.trim()) return 0
    let part = text.innerText
      .replaceAll('\n', '')
      .trim()
      .match(/^.*?(\d{4})-(\d+)-(\d+)\s*(\d+):(\d+)$/)
    // 获取时间失败,排在最后面
    if (!part) return 0
    // 将 part 转为标准数组,并且把获取到的值转为数字
    part = new Array(5).fill(0).map((_, i) => parseInt(part[i + 1]))
    // 获取date实例时月份要减1
    part[1] = part[1] - 1
    // 对 Invalid Date 执行 getTime 会得到 NaN
    return new Date(...part).getTime() || 0
  }

  // #endregion utils

  // #region 脚本功能

  /** 移除已解决 */
  function filterBySolved() {
    const hideType = 'hide-by-solved'
    allHideTypes.add(hideType)
    const filterNonSolvedBtn = createBtn('移除已解决', filterBtnColor)
    filterNonSolvedBtn.addEventListener('click', () => {
      /** @type {HTMLTableSectionElement[]} */
      const lines = [...document.querySelectorAll(`${tableSelector}>tbody[id*=normalthread_]`)]
      lines.forEach(i => {
        if (!(i.innerText || '').includes('已解决')) return
        i.setAttribute(hideType, true)
        i.style.display = 'none'
      })
    })
    createBtn('还原已解决', showBtnColor).addEventListener('click', () => recoverByType(hideType))
  }
  /** 移除回复多于x */
  function filterByReplyGt() {
    const hideType = 'hide-by-reply-gt'
    allHideTypes.add(hideType)
    const filterByReply = createBtn(`移除回复多于 <input class="pj-ctl"/>`, filterBtnColor)
    const replyCount = filterByReply.querySelector('input')
    replyCount.addEventListener('click', e => e.stopPropagation())
    replyCount.value = 0
    filterByReply.addEventListener('click', () => {
      const maxCount = replyCount.value
      /** @type {HTMLTableSectionElement[]} */
      const lines = [...document.querySelectorAll(`${tableSelector}>tbody[id*=normalthread_]`)]
      lines.forEach(i => {
        const countEl = i.querySelector('tr>td.num>.xi2')
        if (parseInt(countEl.innerText) <= maxCount) return
        i.setAttribute(hideType, true)
        i.style.display = 'none'
      })
    })
    createBtn('还原回复多于x', showBtnColor).addEventListener('click', () => recoverByType(hideType))
  }
  /** 移除CB少于x */
  function filterByCBLt() {
    const hideType = 'hide-by-cb-lt'
    allHideTypes.add(hideType)
    const filterByCB = createBtn(`移除CB少于 <input class="pj-ctl"/>`, filterBtnColor)
    const CBCount = filterByCB.querySelector('input')
    CBCount.addEventListener('click', e => e.stopPropagation())
    CBCount.value = 0
    filterByCB.addEventListener('click', () => {
      const minCount = CBCount.value
      /** @type {HTMLTableSectionElement[]} */
      const lines = [...document.querySelectorAll(`${tableSelector}>tbody[id*=normalthread_]`)]
      lines.forEach(i => {
        const cb = parseInt(i.innerText.replaceAll('\n', '').replace(/.*悬赏\s*(\d+)\s*CB\s*吾爱币.*/, '$1'))
        if (cb >= minCount) return
        i.setAttribute(hideType, true)
        i.style.display = 'none'
      })
    })
    createBtn('还原CB少于x', showBtnColor).addEventListener('click', () => recoverByType(hideType))
  }

  /** 正则过滤 */
  function filterByRegExp() {
    const hideType = 'hide-by-reg-exp'
    allHideTypes.add(hideType)
    const filterByRegExp = createBtn(`正则过滤`, filterBtnColor)
    filterByRegExp.addEventListener('click', () => {
      /** @type {HTMLTableSectionElement[]} */
      const lines = [...document.querySelectorAll(`${tableSelector}>tbody[id*=normalthread_]`)]
      const regObj = strToRegExp(options.useFilterByRegExp)
      if (!(regObj instanceof RegExp)) return
      lines.forEach(i => {
        if (!regObj.test(i.innerText.replaceAll('\n', ''))) return
        i.setAttribute(hideType, true)
        i.style.display = 'none'
      })
    })
    createBtn('还原正则过滤', showBtnColor).addEventListener('click', () => recoverByType(hideType))
  }

  /** 按创建时间排序 */
  function sortByCreateTime() {
    const sortByCreateTime = createBtn(`按创建时间排序`, filterBtnColor)
    sortByCreateTime.addEventListener('click', () => {
      /** @type {HTMLTableSectionElement[]} */
      const lines = [...document.querySelectorAll(`${tableSelector}>tbody[id*=normalthread_]`)]
      setDftOrder(lines)
      const sorted = lines.sort((a, b) => readCreateTime(b) - readCreateTime(a))
      sortLines(sorted)
    })
    createBtn('还原排序', showBtnColor).addEventListener('click', recoverOrder)
  }

  // #endregion 脚本功能

  window.addEventListener('load', () => {
    regMenu()
    const appendTarget = document.querySelector(appendSelector)
    if (!appendTarget) return console.warn('不是论坛列表页,不添加按钮。')
    initPJTools()
  })
})()