☰

keylol-history

给Keylol增加历史浏览记录功能

// ==UserScript==
// @name         keylol-history
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  给Keylol增加历史浏览记录功能
// @author       yuyinws
// @include      https://keylol.com/*
// @icon         https://keylol.com/favicon.ico
// @grant        unsafeWindow
// @license      MIT
// ==/UserScript==

// URL参数获取
function GetQueryString(name) {
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
  var r = window.location.search.substr(1).match(reg)
  var context = ''
  if (r != null) context = decodeURIComponent(r[2])
  reg = null
  r = null
  return context == null || context == '' || context == 'undefined'
    ? ''
    : context
}
class History {
  constructor(url) {
    this.history = JSON.parse(window.localStorage.getItem('history')) || []
    if (url.indexOf('https://keylol.com/t') > -1) {
      this.tID = url.split('t')[3].split('-')[0]
      this.tTitle = document.querySelector('#thread_subject').title
      this.add()
    } else if (GetQueryString('tid')) {
      this.tID = GetQueryString('tid')
      this.tTitle = document.querySelector('#thread_subject').title
      this.add()
    }
  }

  add() {
    this.history.forEach((item, index) => {
      if (item.tID === this.tID) {
        this.history.splice(index, 1)
        return
      }
    })

    this.history.unshift({
      tID: this.tID,
      tTitle: this.tTitle,
    })

    window.localStorage.setItem('history', JSON.stringify(this.history))
  }

  get() {
    return this.history
  }
}

// 渲染卡片样式
const renderPanel = (_hisList) => {
  let ref = document.querySelector('.list-inline').childNodes[4]
  let father = document.querySelector('.list-inline')
  let historyDom = document.createElement('div')
  let historyCard = document.createElement('div')
  let clearHistory = document.createElement('button')
  let historyWrapper = document.createElement('div')
  let historyInput = document.createElement('input')

  historyInput.placeholder = '搜索历史记录'
  historyInput.id = 'history-input'
  historyWrapper.id = 'history-wrapper'

  clearHistory.id = 'clearHistory'
  clearHistory.innerHTML = '清空记录'

  historyInput.style.display = 'block'
  historyInput.style.marginLeft = '5px'
  historyInput.style.width = '200px'
  historyInput.style.borderRadius = '3px'
  historyInput.style.border = '1px solid #D1D5DB'
  
  clearHistory.style.margin = '4px 0 4px 5px'
  clearHistory.style.padding = '4px 8px'
  clearHistory.style.background = '#74bcff'
  clearHistory.style.border = 'none'
  clearHistory.style.color = '#fff'
  clearHistory.style.borderRadius = '4px'
  clearHistory.style.cursor = 'pointer'

  historyDom.style.position = 'relative'
  historyDom.id = 'history'
  historyDom.style.height = '30px'
  historyDom.style.lineHeight = '27px'
  historyDom.style.display = 'inline-block'
  historyDom.style.padding = '0 10px'

  historyCard.id = 'historyCard'
  historyCard.style.width = '250px'
  historyCard.style.minHeight = '50px'
  historyCard.style.maxHeight = '200px'
  historyCard.style.overflowY = 'auto'
  historyCard.style.border = '1px solid #D1D5DB'
  historyCard.style.position = 'absolute'
  historyCard.style.left = '-70px'
  historyCard.style.zIndex = '999'
  historyCard.style.backgroundColor = '#fff'
  historyCard.style.display = 'none'

  historyDom.innerHTML =
    '<span id="historyText" style="cursor: pointer;">历史记录</span>'
  father.insertBefore(historyDom, ref)
  historyDom.appendChild(historyCard)
  historyCard.appendChild(clearHistory)
  historyCard.appendChild(historyInput)
  historyCard.appendChild(historyWrapper)

  historyDom.addEventListener('mouseover', () => {
    historyCard.style.display = 'block'
  })
  historyDom.addEventListener('mouseout', () => {
    historyCard.style.display = 'none'
  })

  historyInput.addEventListener('input', (e) => {
    const filterdHisList = _hisList.filter((item) => {
      if (item.tTitle.indexOf(e.target.value) > -1) {
        return true
      }
    })
    renderHistory(filterdHisList)
  })

  let historyText = document.querySelector('#historyText')
  historyText.addEventListener('mouseover', () => {
    historyDom.style.backgroundColor = '#74bcff'
    historyText.style.color = '#fff'
  })
  historyText.addEventListener('mouseout', () => {
    historyDom.style.backgroundColor = '#f7f7f7'
    historyText.style.color = '#000'
  })

  clearHistory.addEventListener('click', () => {
    window.localStorage.removeItem('history')
    historyWrapper.innerHTML = '<p style="text-align: center;">暂无历史记录</p>'
  })
}

// 渲染历史记录
const renderHistory = (_hisList) => {
  let historyWrapper = document.querySelector('#history-wrapper')
  historyWrapper.innerHTML = ''
  if (_hisList.length === 0) {
    historyWrapper.innerHTML = '<p style="text-align: center;">暂无历史记录</p>'
    return
  }
  _hisList.forEach((item) => {
    let historyCardItem = document.createElement('div')
    historyCardItem.style.padding = '5px'
    historyCardItem.style.cursor = 'pointer'
    historyCardItem.style.borderBottom = '1px solid #D1D5DB'
    historyCardItem.style.fontSize = '12px'
    historyCardItem.style.color = '#000'
    historyCardItem.style.lineHeight = '20px'
    historyCardItem.innerHTML = `<a id="aTag" href="https://keylol.com/t${item.tID}-1-1">${item.tTitle}</a>`
    historyWrapper.appendChild(historyCardItem)
  })
}

;(() => {
  const history = new History(window.location.href)
  renderPanel(history.get())
  renderHistory(history.get())
})()