优化SteamDB的价格页面，自定义显示部分地区的价格。
当前为
// ==UserScript==
// @name SteamDB 隐藏部分地区的价格
// @name en-us SteamDB set visible regions
// @namespace http://tampermonkey.net/
// @version 0.4
// @description 优化SteamDB的价格页面，自定义显示部分地区的价格。
// @description en-us You can customize only want show regions on SteamDB price table.
// @author ZhuSun
// @license AGPL-3.0
// @match https://steamdb.info/app/*
// @match https://steamdb.info/sub/*
// @match https://steamdb.info/bundle/*
// @grant GM_addStyle
// @grant GM_listValues
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_deleteValue
// @grant GM_removeValueChangeListener
// @grant GM_addValueChangeListener
// ==/UserScript==
(function () {
'use strict';
GM_addStyle(`
.region-selector {
display: none;
flex-wrap: wrap;
margin-bottom: 20px
}
.region-selector.shown {
display: flex
}
.region-selector .btn {
flex: 0 0 20%;
border: 0;
text-align: left
}
#js-region-selector {
margin-right:10px;
}
.panel.region-selector > .panel-heading,
.panel.currency-selector > .panel-heading{
width: calc(100% + 30px);
}
@media (max-width: 980px) {
#js-region-selector {
width: 100%;
margin-right:0;
}
.region-selector .btn {
flex-basis: 50%;
padding-left: 5px;
padding-right: 5px
}
}
`);
const prices_header = document.querySelector("#prices > div.prices-header");
const prices_div = document.querySelector("#prices");
const price_table = document.querySelector('#prices > div.multiple-prices > div.table-responsive');
// 添加自定义地区按钮
let region_btn = document.createElement("div");
region_btn.innerHTML = '<button class="btn btn-outline" id="js-region-selector">Set visible regions<svg width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-chevron-down" aria-hidden="true"><path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path></svg></button>';
prices_header?.insertBefore(region_btn, document.querySelector('h2').nextSibling);
// 添加自定义地区panel
let selector_div = document.createElement("div");
selector_div.className = 'region-selector panel';
selector_div.innerHTML = '<div class="panel-heading"><span>Set visible regions</span></div><button class="btn btn-outline" data-cc="us"><img src="/static/country/us.svg" class="flag" alt="" width="18" height="18"> U.S. Dollar</button><button class="btn btn-outline" data-cc="eu"><img src="/static/country/eu.svg" class="flag" alt="" width="18" height="18"> Euro</button><button class="btn btn-outline" data-cc="ar"><img src="/static/country/ar.svg" class="flag" alt="" width="18" height="18"> LATAM - U.S. Dollar</button><button class="btn btn-outline" data-cc="au"><img src="/static/country/au.svg" class="flag" alt="" width="18" height="18"> Australian Dollar</button><button class="btn btn-outline" data-cc="br"><img src="/static/country/br.svg" class="flag" alt="" width="18" height="18"> Brazilian Real</button><button class="btn btn-outline" data-cc="uk"><img src="/static/country/uk.svg" class="flag" alt="" width="18" height="18"> British Pound</button><button class="btn btn-outline" data-cc="ca"><img src="/static/country/ca.svg" class="flag" alt="" width="18" height="18"> Canadian Dollar</button><button class="btn btn-outline" data-cc="cl"><img src="/static/country/cl.svg" class="flag" alt="" width="18" height="18"> Chilean Peso</button><button class="btn btn-outline" data-cc="cn"><img src="/static/country/cn.svg" class="flag" alt="" width="18" height="18"> Chinese Yuan</button><button class="btn btn-outline" data-cc="az"><img src="/static/country/cis.svg" class="flag" alt="" width="18" height="18"> CIS - U.S. Dollar</button><button class="btn btn-outline" data-cc="co"><img src="/static/country/co.svg" class="flag" alt="" width="18" height="18"> Colombian Peso</button><button class="btn btn-outline" data-cc="cr"><img src="/static/country/cr.svg" class="flag" alt="" width="18" height="18"> Costa Rican Colon</button><button class="btn btn-outline" data-cc="hk"><img src="/static/country/hk.svg" class="flag" alt="" width="18" height="18"> Hong Kong Dollar</button><button class="btn btn-outline" data-cc="in"><img src="/static/country/in.svg" class="flag" alt="" width="18" height="18"> Indian Rupee</button><button class="btn btn-outline" data-cc="id"><img src="/static/country/id.svg" class="flag" alt="" width="18" height="18"> Indonesian Rupiah</button><button class="btn btn-outline" data-cc="il"><img src="/static/country/il.svg" class="flag" alt="" width="18" height="18"> Israeli New Shekel</button><button class="btn btn-outline" data-cc="jp"><img src="/static/country/jp.svg" class="flag" alt="" width="18" height="18"> Japanese Yen</button><button class="btn btn-outline" data-cc="kz"><img src="/static/country/kz.svg" class="flag" alt="" width="18" height="18"> Kazakhstani Tenge</button><button class="btn btn-outline" data-cc="kw"><img src="/static/country/kw.svg" class="flag" alt="" width="18" height="18"> Kuwaiti Dinar</button><button class="btn btn-outline" data-cc="my"><img src="/static/country/my.svg" class="flag" alt="" width="18" height="18"> Malaysian Ringgit</button><button class="btn btn-outline" data-cc="mx"><img src="/static/country/mx.svg" class="flag" alt="" width="18" height="18"> Mexican Peso</button><button class="btn btn-outline" data-cc="nz"><img src="/static/country/nz.svg" class="flag" alt="" width="18" height="18"> New Zealand Dollar</button><button class="btn btn-outline" data-cc="no"><img src="/static/country/no.svg" class="flag" alt="" width="18" height="18"> Norwegian Krone</button><button class="btn btn-outline" data-cc="pe"><img src="/static/country/pe.svg" class="flag" alt="" width="18" height="18"> Peruvian Sol</button><button class="btn btn-outline" data-cc="ph"><img src="/static/country/ph.svg" class="flag" alt="" width="18" height="18"> Philippine Peso</button><button class="btn btn-outline" data-cc="pl"><img src="/static/country/pl.svg" class="flag" alt="" width="18" height="18"> Polish Zloty</button><button class="btn btn-outline" data-cc="qa"><img src="/static/country/qa.svg" class="flag" alt="" width="18" height="18"> Qatari Riyal</button><button class="btn btn-outline" data-cc="ru"><img src="/static/country/ru.svg" class="flag" alt="" width="18" height="18"> Russian Ruble</button><button class="btn btn-outline" data-cc="sa"><img src="/static/country/sa.svg" class="flag" alt="" width="18" height="18"> Saudi Riyal</button><button class="btn btn-outline" data-cc="sg"><img src="/static/country/sg.svg" class="flag" alt="" width="18" height="18"> Singapore Dollar</button><button class="btn btn-outline" data-cc="za"><img src="/static/country/za.svg" class="flag" alt="" width="18" height="18"> South African Rand</button><button class="btn btn-outline" data-cc="pk"><img src="/static/country/pk.svg" class="flag" alt="" width="18" height="18"> South Asia - USD</button><button class="btn btn-outline" data-cc="kr"><img src="/static/country/kr.svg" class="flag" alt="" width="18" height="18"> South Korean Won</button><button class="btn btn-outline" data-cc="ch"><img src="/static/country/ch.svg" class="flag" alt="" width="18" height="18"> Swiss Franc</button><button class="btn btn-outline" data-cc="tw"><img src="/static/country/tw.svg" class="flag" alt="" width="18" height="18"> Taiwan Dollar</button><button class="btn btn-outline" data-cc="th"><img src="/static/country/th.svg" class="flag" alt="" width="18" height="18"> Thai Baht</button><button class="btn btn-outline" data-cc="tr"><img src="/static/country/tr.svg" class="flag" alt="" width="18" height="18"> MENA - U.S. Dollar</button><button class="btn btn-outline" data-cc="ae"><img src="/static/country/ae.svg" class="flag" alt="" width="18" height="18"> U.A.E. Dirham</button><button class="btn btn-outline" data-cc="ua"><img src="/static/country/ua.svg" class="flag" alt="" width="18" height="18"> Ukrainian Hryvnia</button><button class="btn btn-outline" data-cc="uy"><img src="/static/country/uy.svg" class="flag" alt="" width="18" height="18"> Uruguayan Peso</button><button class="btn btn-outline" data-cc="vn"><img src="/static/country/vn.svg" class="flag" alt="" width="18" height="18"> Vietnamese Dong</button>';
prices_div?.insertBefore(selector_div, prices_header.nextSibling);
// 为原切换地区添加panel属性
const currency_div = document.querySelector('.currency-selector');
const region_div = document.querySelector('.region-selector');
currency_div.className = 'currency-selector panel';
let currency_div_heading = document.createElement("div");
currency_div_heading.className = 'panel-heading';
currency_div_heading.innerHTML = '<span>Set your currency</span>';
currency_div?.insertBefore(currency_div_heading, currency_div.firstChild);
// 添加切换panel功能
document.querySelector('#js-region-selector').addEventListener('click', function() {
if (currency_div.classList.contains('shown')) {
currency_div.classList.remove('shown');
}
region_div.classList.toggle('shown');
});
document.querySelector('#js-currency-selector').addEventListener('click', function() {
if (region_div.classList.contains('shown')) {
region_div.classList.remove('shown');
}
});
// 为每个 button 添加点击事件监听器
const cc_btn = document.querySelector('.region-selector').querySelectorAll('button');
cc_btn.forEach(button => {
button.addEventListener('click', function () {
switchVisible(button.getAttribute('data-cc'));
});
});
// 初始化每个地区可见性
price_table.querySelectorAll('[data-cc]').forEach(element => {
init(element.getAttribute('data-cc'));
});
function switchVisible(cc) {
const tr = document.querySelector('#prices > div.multiple-prices > div.table-responsive').querySelector('td[data-cc="' + cc + '"]').closest('tr');
const cc_btn = document.querySelector('.region-selector').querySelector('button[data-cc="' + cc + '"]');
let is_show = GM_getValue(cc);
if (is_show == true) {
if (tr) {
tr.style.display = 'none';
cc_btn.classList.add('btn-outline');
cc_btn.classList.remove('btn-primary');
}
}
else {
if (tr) {
tr.style.display = 'table-row';
cc_btn.classList.remove('btn-outline');
cc_btn.classList.add('btn-primary');
}
}
is_show = !is_show;
GM_setValue(cc, is_show)
console.log("[switchVisible]" + cc + " is show :" + is_show);
}
function init(cc) {
const tr = document.querySelector('#prices > div.multiple-prices > div.table-responsive').querySelector('td[data-cc="' + cc + '"]').closest('tr');
const cc_btn = document.querySelector('.region-selector').querySelector('button[data-cc="' + cc + '"]');
let is_show = GM_getValue(cc);
if (is_show == undefined) {
GM_setValue(cc, true);
is_show = true;
}
if (is_show == true) {
if (tr) {
tr.style.display = 'table-row';
cc_btn.classList.remove('btn-outline');
cc_btn.classList.add('btn-primary');
}
}
else {
if (tr) {
tr.style.display = 'none';
cc_btn.classList.add('btn-outline');
cc_btn.classList.remove('btn-primary');
}
}
console.log("[init]" + cc + " is show :" + is_show);
}
})();