// ==UserScript==
// @name steam商店搜索历史记录,足迹
// @icon https://store.steampowered.com/favicon.ico
// @namespace http://tampermonkey.net/
// @version 0.31
// @description steam商店搜索输入框添加搜索历史记录功能,游戏商店浏览足迹,支持steam++ 工具客户端导入
// @author wsz987
// @match *://store.steampowered.com/*
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_addStyle
// @enable true
// @supportURL https://keylol.com/t693504-1-1
// @downloadURL https://update.greasyfork.icu/scripts/422927/steam%E5%95%86%E5%BA%97%E6%90%9C%E7%B4%A2%E5%8E%86%E5%8F%B2%E8%AE%B0%E5%BD%95%2C%E8%B6%B3%E8%BF%B9.user.js
// @updateURL https://update.greasyfork.icu/scripts/422927/steam%E5%95%86%E5%BA%97%E6%90%9C%E7%B4%A2%E5%8E%86%E5%8F%B2%E8%AE%B0%E5%BD%95%2C%E8%B6%B3%E8%BF%B9.meta.js
// ==/UserScript==
(function () {
// 自定义历史记录条例上限
window.HistoryNum = 5
GM_addStyle(`
.history-table{
display:none;
max-width:310px;
color: #fff;
box-sizing: border-box;
background: #316282;
border: 3px solid lightblue;
font-size: 15px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
list-style-type: none;
}
.history-table a,
.history-table .history-item{
padding: 4px 6px;
box-sizing: border-box;
cursor: pointer;
display: block;
overflow:hidden;
text-overflow:ellipsis;
}
.history-table .history-item{
justify-content: center;
align-items: center;
display: flex;
word-break:break-all;
}
.history-table a,
.history-table li.history-item:not(:last-child){
border-bottom: 2px dashed lightblue;
}
.history-table a{
color:lightblue;
font-weight: bold;
}
.last-li{
justify-content: center;
align-items: center;
display: flex;
padding:3px 0;
}
.historyClear{
cursor: pointer;
}
`)
initHistory()
onlistener()
$J('.apphub_AppName').text() ? GM_setValue('footName', $J('.apphub_AppName').text()) : false
})();
function initHistory() {
console.log('render')
$J('.history-table').remove()
!GM_getValue('historyData') ? GM_setValue('historyData', []) : console.log('初始化')
// DOM render
let li_DOM = ''
for (let val of GM_getValue('historyData')) {
li_DOM += `${val}`
}
let formCtx = $J("#store_search_link").parents('form').context.referrer
let foot = `足迹: ${formCtx.split('/')[5] ? GM_getValue('footName') : '暂无'}`
let table_DOM = `${foot}${li_DOM}${GM_getValue('historyData').length===0 ? '- 暂无搜索记录...
':'- 清空搜索记录.
'}
`
$J("#store_nav_search_term, input#term") ? $J(".searchbox, .searchbar_left").append(table_DOM) : ''
// DOM 动态style
$J("#store_nav_search_term, input#term").click(el => {
$J(`#${el.target.id} ~ .history-table`)
.css('width', el.target.id === 'store_nav_search_term' ?
$J('.searchbox')[0].offsetWidth - 33 : $J("#" + el.target.id)[0].offsetWidth + 'px')
.css('display', 'block')
}).blur(el => {
setTimeout(function () {
$J(`#${el.target.id} ~ .history-table`).css('display', 'none')
}, 250)
});
}
function onlistener(){
// onClicklistener
$J('#store_search_link, .searchbar_left button').click(() => {
setHistoryData()
})
// onEnterlistener
$J('#store_nav_search_term, input#term').keydown(function (event) {
if (event.keyCode == 13) {
setHistoryData()
}
})
// 全局事件委托监测动态DOM
$J('body').on("click", '#term_options > ul > li', () => {
setTimeout(function () {
setHistoryData()
}, 250)
})
// Clear Data
$J('body').on("click", '.historyClear', () => {
GM_setValue('historyData', [])
GM_setValue('footName', '')
initHistory()
})
}
// Data storage, reload DOM
function setHistoryData() {
let input_val = $J("#store_nav_search_term")[0].value.toString().trim() || $J("input#term")[0].value.toString().trim()
if (input_val === '') return
let oldVal = GM_getValue('historyData')
oldVal.unshift(input_val)
oldVal = Array.from(new Set(oldVal))
oldVal.length > window.HistoryNum ? oldVal.pop() : console.log('Data storage')
GM_setValue('historyData', oldVal)
initHistory()
}