md化SteamCN
当前为
// ==UserScript==
// @name MDSteamCN
// @namespace http://tampermonkey.net/
// @version 0.15
// @description md化SteamCN
// @author marioplus
// @match https://steamcn.com/*
// @require https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js
// @run-at document-body
// ==/UserScript==
(function () {
// 执行一些公共操作
// 随机配色
function generateRandomColors(type, index) {
// 主色调、副色调、强调色
const colors = [
// 日间主题
[
// 浅色
['red', 'white'],
['pink', 'white'],
['purple', 'white'],
['deep-purple', 'white'],
['indigo', 'white'],
['teal', 'white'],
// 深色
['blue', 'black'],
['light-blue', 'black'],
['cyan', 'black'],
['green', 'black'],
['light-green', 'black'],
['lime', 'black'],
['yellow', 'black'],
['amber', 'black'],
['orange', 'black'],
['deep-orange', 'black'],
],
// 夜间主题
[
// 浅色
['red', 'white'],
['pink', 'white'],
['purple', 'white'],
['deep-purple', 'white'],
['indigo', 'white'],
['teal', 'white'],
// 深色
['blue', 'black'],
['light-blue', 'black'],
['cyan', 'black'],
['green', 'black'],
['light-green', 'black'],
['lime', 'black'],
['yellow', 'black'],
['amber', 'black'],
['orange', 'black'],
['deep-orange', 'black'],
]
]
index = index === undefined ? Math.floor(Math.random() * colors.length) : index
type = 0
return {
theme: colors[type][index][0],
nav: colors[type][index][1],
}
}
// 加载css/js资源
function loadResource() {
$('head')
// mdui
.append('<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/mdui/0.4.2/css/mdui.min.css"/>')
.append('<script src="//cdnjs.cloudflare.com/ajax/libs/mdui/0.4.2/js/mdui.min.js"></script>')
.append(initCss())
// .append(initHomeCss())
}
// 初始需要的css
function initCss() {
return `
<style>
/* 帖子字体过大 */
div#postlist {
font-size: smaller;
}
/* region 帖子圆角 */
div#postlist {
border-radius: 10px;
}
div#postlist > table:nth-child(1){
border-top-left-radius: 10px;
border-top-right-radius: 10px;
display: none;
}
#postlist > div:nth-child(2) tr:nth-child(1) td.pls {
border-top-left-radius: 10px;
}
#f_pst{
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
/*endregion 帖子圆角 */
/*region 引用*/
.pl .quote blockquote {
background: #ffffff;
width: 100%;
height: 100%;
font-size: 10px;
}
.pl .quote{
background: #ffffff;
border-left: 6px solid #009688;
padding: 10px 20px;
font-size: 10px;
}
/*endregion 引用*/
/* 帖子下边按钮 */
.pob em a {
padding: 0;
}
.pob.cl a {
text-decoration: none;
}
/* 个人蒸汽、积分……展示的间隔线去掉 */
.tns th{
border: none;
}
/* 帖子宽度 */
.wp{
min-width: 1050px;
max-width: 1050px;
}
/* 帖子边距 */
.plc {
padding: 12px 30px;
}
.pls {
padding-top: 4px;
}
/* 回到顶部 */
#J_ScrollTopBtn {
display: none !important;
}
/* region回复 */
#f_pst{
border-top: 0;
padding-bottom: 10px;
}
/*头像消失*/
#f_pst .pls {
display: none;
}
#f_pst .plc {
padding:20px;
}
.tedt.mtn {
border: none;
}
#f_pst .bar {
height: 40px;
line-height: 40px;
}
#f_pst .fpd {
padding-left: 10px;
}
#f_pst .fpd a {
margin: 10px 10px 0 0;
}
/* 回帖跳回最后一页 */
label[for=fastpostrefresh]{
margin-left: 20px;
margin-bottom: -2px;
}
p.ptm.pnpost a.y {
display: inline-block;
height: 36px;
line-height: 36px;
}
/*endregion*/
/* region 页脚 */
.subforunm_foot_text,
.subforunm_foot_text_bottom,
.subforunm_foot_intro {
width: 1100px;
}
/* endregion 页脚 */
/* 首页 */
/*.slideshow > li,*/
/*.slideshow img {*/
/*width: 900px !important;*/
/*height: 600px !important;*/
/*}*/
</style>`
}
// 初始主题
function initTheme(color) {
$('body').addClass(`mdui-theme-primary-${color.theme} mdui-theme-accent-${color.nav}`)
}
// appbar
function generateAppbar(navColor) {
// 解析数据格式
const MENU_TYPE_CONTENT = 1, MENU_TYPE_DIVIDER = 0
let data = {
menu: [
{
text: '平台',
icon: 'near_me',
color: 'blue',
item: [
{href: 'f161-1', text: '热点'},
{href: 'f319-1', text: '福利'},
{href: 'f234-1', text: '购物'},
{href: 'f271-1', text: '慈善包'},
{href: 'f257-1', text: '汉化'},
{href: 'f189-1', text: '资源'},
{href: 'f127-1', text: '研讨'},
{href: 'f235-1', text: '成就'},
{href: 'f129-1', text: '互鉴'},
{href: 'f254-1', text: '分享互赠'}
]
},
{
text: '互助',
icon: 'enhanced_encryption',
color: 'deep-orange',
item: [
{href: 'f301-1', text: '技术'},
{href: 'f302-1', text: '购物'},
{href: 'f304-1', text: '社区'},
{href: 'f318-1', text: '资源'},
{href: 'f303-1', text: '游戏'},
{href: 'f322-1', text: '软硬'},
{href: 'f311-1', text: '魔法'},
]
},
{
text: '友商',
icon: 'child_friendly',
color: 'green',
item: [
{href: 'f232-1', text: 'Origin'},
{href: 'f274-1', text: 'uPlay'},
{href: 'f276-1', text: 'GOG'},
{href: 'f316-1', text: '杉果'},
{href: 'f326-1', text: 'Windows'},
{href: 'f332-1', text: '方块'},
{href: 'f325-1', text: 'WeGame'},
{href: 'f275-1', text: '主机'},
{href: 'f328-1', text: '移动'},
{href: 'f277-1', text: '其他'},
]
},
{
text: '休闲',
icon: 'exposure_plus_1',
color: 'brown',
item: [
{href: 'f148-1', text: '水区'},
{href: 'f259-1', text: '摄影'},
{href: 'f273-1', text: '美食'},
{href: 'f200-1', text: '软硬'},
]
},
{
text: '服务',
icon: 'local_mall',
color: 'purple',
item: [
{href: 'f140-1', text: '公告'},
{href: 'f197-1', text: '反馈'},
{href: 'f238-1', text: '活动'},
]
},
{
text: '社区',
icon: 'flag',
color: 'amber',
item: [
{href: 'f251-1', text: '综合交流 交换观点/资源'},
{href: 'f305-1', text: 'DOTA'},
{href: 'f299-1', text: 'CSGO'},
{href: 'f291-1', text: '生存类'},
{href: 'f312-1', text: 'GTA'},
{href: 'f244-1', text: '威乐'},
{href: 'f246-1', text: '艺电'},
{href: 'f245-1', text: '育碧'},
{href: 'f248-1', text: '动视暴雪'},
]
},
{
text: '其乐',
icon: 'hot_tub',
color: 'red',
item: [
{href: 'https://www.keylol.com', text: '其乐'},
]
},
{
text: '赠楼',
icon: 'view_carousel',
color: 'pink',
item: [
{href: 'f148-1', text: '互赠平台'},
]
},
{
text: '交易',
icon: 'local_atm',
color: 'cyan',
item: [
{href: 'steamcn_gift-7l.html', text: '交易中心 便捷游戏市集'},
]
},
{
text: '休闲',
icon: 'fingerprint',
color: 'green',
item: [
{href: 'steamcn_gift-7l.html', text: '水区'},
]
},
],
nav: [
{text: 'home', href: '/home'}
],
userInfo: {
isLogon: false,
messageTagInfo: {
select: 'a.btn.btn-user-action:first > span',
href: 'home.php?mod=space&do=pm',
icon: 'email',
},
remindTagInfo: {
select: 'a.btn.btn-user-action:last > span',
href: 'home.php?mod=space&do=notice&view=system',
icon: 'notifications',
},
avatar: {
img: '',
menu: [
{
type: MENU_TYPE_CONTENT,
href: 'javascript:;',
onclick: '',
text: ''
},
{
type: MENU_TYPE_DIVIDER
}
]
}
}
}
parseData()
replacerAppbar()
// 解析数据
function parseData() {
parseNav()
parseUserInfo()
// 解析面包屑导航栏
function parseNav() {
data.nav = []
$('.subforum_left_title_left_up > div > a').each((i, e) => {
data.nav.push({
href: e.getAttribute('href'),
text: e.innerText
})
})
}
function parseUserInfo() {
const $dropdown = $('.list-inline > .dropdown')
if ($dropdown.length <= 0) {
data.userInfo.isLogon = false
} else {
data.userInfo.isLogon = true
parseAvatarImg()
parseMenu()
}
// 解析头像
function parseAvatarImg() {
data.userInfo.avatar.img = $('img.avatar.img-circle').attr('src')
}
// 解析菜单
function parseMenu() {
data.userInfo.avatar.menu = []
// 单独添加个人中心
data.userInfo.avatar.menu.push({
type: MENU_TYPE_CONTENT,
href: $dropdown.find('a').attr('href'),
onclick: null,
text: '个人中心',
})
$dropdown.find('li').each((i, e) => {
let item = {}
if (e.getAttribute('class') !== 'divider') {
let find = e.getElementsByTagName('a')[0]
item = {
type: MENU_TYPE_CONTENT,
href: find.getAttribute('href'),
onclick: find.getAttribute('onclick'),
text: find.innerText
}
} else {
item = {type: MENU_TYPE_DIVIDER}
}
data.userInfo.avatar.menu.push(item)
})
}
}
}
// 替换 appbar
function replacerAppbar() {
// 面包屑导航
function generateNav() {
if (data.nav.length > 0) {
let tmp = ''
data.nav.forEach((e, i) => {
tmp += `<a class="mdui-text-color-${navColor}" href="${e.href}"><span>${e.text}</span></a>`
// html += `<span>${e.text}</span>`
if (i < data.nav.length - 1) {
tmp += `<span class="mdui-p-l-1 mdui-p-r-1">></span>`
}
})
return `
<a href="javascript:;" class="mdui-typo-title">
<div class="mdui-valign mdui-typo">${tmp}</div>
</a>
`
}
return ''
}
// 消息、提醒、头像
function generateMsgAndRemindAndAvatar() {
if (!data.userInfo.isLogon) {
return ''
}
return generateMsgAndRemind() + generateAvatarMenu()
function generateMsgAndRemind() {
function gen(tagInfo) {
const $tag = $(tagInfo.select)
return `<a href="${tagInfo.href}" class="mdui-btn mdui-ripple${isNaN(parseInt($tag.text())) ? ' mdui-btn-icon' : ''}"><i class="mdui-icon material-icons">${tagInfo.icon}</i> ${$tag.text()}</a>`
}
return gen(data.userInfo.messageTagInfo) + gen(data.userInfo.remindTagInfo)
}
// 头像菜单
function generateAvatarMenu() {
let html = `
<img class="mdui-card-header-avatar" mdui-menu="{target: '#avatarMenu'}" src="${data.userInfo.avatar.img}">
<ul class="mdui-menu" id="avatarMenu">
`
data.userInfo.avatar.menu.forEach((e) => {
if (e.type === MENU_TYPE_DIVIDER) {
html += '<li class="mdui-divider"></li>'
} else {
html += `<li class="mdui-menu-item"><a class="mdui-ripple" onclick="${e.onclick}" href="${e.href}">${e.text}</a></li>`
}
})
html += '</ul>'
return html
}
}
//TODO: 待开发 登录、注册
function generateLoginAndRegister() {
console.log(2)
return ''
}
// Appbar 菜单选项
function generateAppbarMenu() {
let html = ''
data.menu.forEach((e) => {
html += `
<div class="mdui-collapse-item ">
<div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-${e.color}">${e.icon}</i>
<div class="mdui-list-item-content">${e.text}</div>
<i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
</div>
<div class="mdui-collapse-item-body mdui-list">
`
e.item.forEach((f) => {
html += `<a href="${f.href}" class="mdui-list-item mdui-ripple">${f.text}</a>`
})
html += '</div></div>'
})
return html
}
// 生成
$('body').prepend(`
<header class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-hide">
<div class="mdui-toolbar mdui-color-theme">
<a href="javascript:;" class="mdui-btn mdui-btn-icon" mdui-drawer="{target: '#left-drawer',overlay:true}"><i class="mdui-icon material-icons">menu</i></a>
<a href="https://steamcn.com" class="mdui-typo-headline">SteamCN</a>
${generateNav()}
<div class="mdui-toolbar-spacer"></div>
<a href="https://steamcn.com/search.php?mod=forum" target="_blank" class="mdui-btn mdui-btn-icon mdui-ripple"><i class="mdui-icon material-icons">search</i></a>
${data.userInfo.isLogon ? generateMsgAndRemindAndAvatar() : generateLoginAndRegister()}
</div>
</header>
<div class="mdui-drawer mdui-drawer-close mdui-color-white" id="left-drawer">
<div class="mdui-list" mdui-collapse="{accordion: true}">
${generateAppbarMenu()}
</div>
</div>
`)
$('#nav-menu').remove()
$('.tb-container').remove()
}
}
// 帖子标题 浏览数据
function generatePostTitleAndAttr() {
let data = {
// 标题
title: '',
// 访问数据
attr: {
reply: {
text: '回复',
amount: '',
onclick: ''
},
view: {
text: '查看',
amount: ''
},
favorite: {
text: '收藏',
amount: '',
onclick: ''
}
}
}
parseData()
remove()
generate()
function parseData() {
data.title = $('a#thread_subject').attr('title')
const $postData = $('div.subforum_right_title > div div:odd')
const $postFavorite = $('#k_favorite')
const $postReply = $('#post_reply')
data.attr = {
reply: {
text: '回复',
amount: $postData[0].innerText,
onclick: $postReply.attr('onclick')
},
view: {
text: '查看',
amount: $postData[1].innerText
},
favorite: {
text: '收藏',
amount: $postData[2].innerText,
onclick: `showWindow('k_favorite', '${$postFavorite.attr('href')}', 'get', 0);`
}
}
}
function remove() {
$('#pgt, div.subforum').remove()
}
function generate() {
$('body').prepend(`
<div style="z-index: 99; width: 1050px; margin-bottom: 20px; margin-top: 200px; "
class="mdui-color-theme mdui-center">
<div class="mdui-center"><h1 class="mdui-text-center mdui-text-truncate mdui-m-b-5" style="font-size: 40px" mdui-tooltip="{content: '${data.title}'}">${data.title}</h1></div>
<div class="mdui-valign">
<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '发帖'}" mdui-ripple mdui-menu="{target: '#menu-post'}">
<i class="mdui-icon material-icons">create</i>
</button>
<ul class="mdui-menu" id="menu-post">
<li class="mdui-menu-item">
<a href="/forum.php?mod=post&action=newthread&fid=129" class="mdui-ripple">
<i class="mdui-menu-item-icon mdui-icon mdui-text-color-blue material-icons">create</i>
发表帖子
</a>
</li>
<li class="mdui-menu-item">
<a href="/forum.php?mod=post&action=newthread&fid=129&special=1" class="mdui-ripple">
<i class="mdui-menu-item-icon mdui-icon mdui-text-color-deep-orange material-icons">assessment</i>
发起投票
</a>
</li>
<li class="mdui-menu-item">
<a href="/forum.php?mod=post&action=newthread&fid=129&special=3" class="mdui-ripple">
<i class="mdui-menu-item-icon mdui-icon mdui-text-color-green material-icons">my_location</i>
发布悬赏
</a>
</li>
</ul>
<button class="mdui-btn mdui-ripple " mdui-tooltip="{content: '回复'}" onclick="${data.attr.reply.onclick}">
<i class="mdui-icon mdui-icon-left material-icons">chat</i> ${data.attr.reply.amount}
</button>
<button class="mdui-btn mdui-ripple" mdui-tooltip="{content: '查看'}" >
<i class="mdui-icon material-icons">remove_red_eye</i> ${data.attr.view.amount}
</button>
<button class="mdui-btn mdui-ripple" mdui-tooltip="{content: '收藏'}" onclick="${data.attr.favorite.onclick}">
<i class="mdui-icon material-icons">favorite</i> ${data.attr.favorite.amount}
</button>
</div>
</div>
`)
}
}
// 帖子内容 md化
function mdPost() {
$('body').append(`<div class="mdui-color-theme mdui-container-fluid" style="min-width: 1050px;height: 450px; z-index: -1;position: absolute; top: 0;left: 0;right: 0; margin: 0"></div>`)
mdContent()
generateBtnGroup()
mdReply()
mdPostSelf()
mdPostOthers()
// 帖子
function mdContent() {
// 鼠标悬浮加深阴影 阴影
$('#postlist').addClass('mdui-hoverable mdui-shadow-5')
// 回复间隙 改为主题色
$('.ad').addClass('mdui-color-theme')
// 帖子-回复按钮
$('.pob.cl a').addClass('mdui-btn mdui-ripple mdui-btn-dense')
}
// 回复页数 按钮组
function generateBtnGroup() {
// <div class="mdui-btn-group" style="width: 100%">
// <div style="float: right">
// <a class="mdui-btn-dense mdui-btn"><i class="mdui-icon material-icons">chevron_left</i></a>
// <a class="mdui-btn-dense mdui-btn">1</a>
// <a class="mdui-btn-dense mdui-btn mdui-btn-active">2</a>
// <a class="mdui-btn-dense mdui-btn">3</a>
// <a class="mdui-btn-dense mdui-btn">4</a>
// <a class="mdui-btn-dense mdui-btn">5</a>
// <a class="mdui-btn-dense mdui-btn">6</a>
// <a class="mdui-btn-dense mdui-btn">7</a>
// <a class="mdui-btn-dense mdui-btn">8</a>
// <a class="mdui-btn-dense mdui-btn">9</a>
// <a class="mdui-btn-dense mdui-btn">10</a>
// <a class="mdui-btn-dense mdui-btn">...32</a>
// <a class="mdui-btn-dense mdui-btn"><i class="mdui-icon material-icons">chevron_right</i></a>
// </div>
// </div>
// 查找特殊节点
function findPage(cName) {
const tmpNode = $(`.pg .${cName}`)
if (tmpNode === undefined) {
return undefined
}
return {
text: tmpNode.text(),
href: tmpNode.attr('href')
}
}
function addTextBtn(data, isActive) {
return `<a href="${data.href}" class="mdui-btn-dense mdui-btn${isActive ? ' mdui-btn-active mdui-color-theme' : ''}">${data.text}</a>`
}
function addIconBtn(data, icon) {
return `<a href="${data.href}" style="padding:0 6px" class="mdui-btn-dense mdui-btn"><i class="mdui-icon material-icons">${icon}</i></a>`
}
let pervPage = findPage('prev')
let firstPage = findPage('first')
let lastPage = findPage('last')
let nextPage = findPage('nxt')
let pageGroupHtml = `<div class="mdui-btn-group mdui-typo" style="width: 100%"><div style="float: right">`
if (pervPage.href) {
pageGroupHtml += addIconBtn(pervPage, 'chevron_left')
}
if (firstPage.href) {
pageGroupHtml += addTextBtn(firstPage, false)
}
$('.pg > a:not(.first,.prev,.nxt,.last),.pg > strong').each((i, e) => {
const date = {
href: e.href === undefined ? 'javascript:;' : e.href,
text: e.innerText
}
pageGroupHtml += addTextBtn(date, e.href === undefined)
})
if (lastPage.href) {
pageGroupHtml += addTextBtn(lastPage, false)
}
if (nextPage.href) {
pageGroupHtml += addIconBtn(nextPage, 'chevron_right')
}
pageGroupHtml += `</div></div>`
$('#postlist').append(pageGroupHtml)
// 隐藏默认
$('.pgbtn,.pgs.mtm.mbm.cl').remove()
}
// 底部回复区域
function mdReply() {
// 回复按钮
$('#f_pst').appendTo('#postlist')
.prepend('<div class="mdui-color-theme" style="width: 100%; height: 5px"></div>')
$('#fastpostsubmit').replaceWith('<button class="mdui-btn mdui-color-theme mdui-ripple mdui-btn-raised"><i class="mdui-icon mdui-icon-left material-icons">chat</i>回复</button>')
// $('p.ptm.pnpost').addClass('mdui-valign')
$('p.ptm.pnpost a.y').appendTo('p.ptm.pnpost')
// 回帖跳转最后一页
$('label[for=fastpostrefresh]').addClass('mdui-checkbox')
.append('<i class="mdui-checkbox-icon"></i>')
}
// 帖子正文
function mdPostSelf() {
function genBtn(e, text) {
return `<a class="mdui-btn mdui-ripple mdui-color-theme" href="${e.attr('href')}" id="${e.attr('id')}" onclick="${e.attr('onclick')}" mdui-tooltip="{content: '${e.attr('title')}'}" >${text}</a>`
}
// 收藏、评分按钮
let $k_favorite = $('a#k_favorite')
let $ak_rate = $('a#ak_rate')
$k_favorite.replaceWith(genBtn($k_favorite, '收藏'))
$ak_rate.replaceWith(genBtn($ak_rate, '评分'))
}
// 其回复
function mdPostOthers() {
}
}
function mdOther() {
generateScrollTopBtn()
// 返回顶部按钮
function generateScrollTopBtn() {
$('body').append('<button id="my_ScrollTopBtn" class="mdui-fab mdui-fab-fixed mdui-fab-hide mdui-color-theme" onclick=""><i class="mdui-icon material-icons">keyboard_arrow_up</i></button>')
let scrollTopHide = true
$(window).scroll(() => {
if ($(window).scrollTop() > 100) {
// 显示
if (scrollTopHide) {
scrollTopHide = !scrollTopHide
$('#my_ScrollTopBtn').removeClass('mdui-fab-hide')
}
} else {
// 隐藏
if (!scrollTopHide) {
scrollTopHide = !scrollTopHide
$('#my_ScrollTopBtn').addClass('mdui-fab-hide')
}
}
})
$(window).trigger('scroll')
$('#my_ScrollTopBtn').on('click', () => {
$('html,body').finish().animate({'scrollTop': '0px'}, 500)
})
}
}
const THEME_TYPE_DATLE = 0, THEME_TYPE_NIGHT = 1
// 初始化操作
function init() {
loadResource()
let randomColors = generateRandomColors(THEME_TYPE_DATLE)
initTheme(randomColors)
generateAppbar(randomColors.nav)
}
// 判断4类不同的页面
const locationHref = window.location
if (/^https:\/\/steamcn.com\/(forum.php(\?gid=\d+)?)?$/.test(locationHref)) {
/*
* 首页
* https://steamcn.com/
* https://steamcn.com/forum.php/
*/
console.log('home')
} else if (/^https:\/\/steamcn.com\/(f\d+)|(forum.php\?mod=forumdisplay)/.test(locationHref)) {
/*
* 目录
* https://steamcn.com/f274-1
* https://steamcn.com/forum.php?mod=forumdisplay&fid=274&filter=typeid&typeid=348
*/
console.log('forum display')
} else if (/^https:\/\/steamcn.com\/(t\d+)|(forum.php\?mod=viewthread)/.test(locationHref)) {
/*
* 帖子
* https://steamcn.com/t368540-1-1
* https://steamcn.com/forum.php?mod=viewthread&tid=368540&page=1#pid6102860
*/
console.log('post')
init()
generatePostTitleAndAttr()
mdPost()
mdOther()
} else if (/^https:\/\/steamcn.com\/home.php/.test(locationHref)) {
/*
* 个人页面
* https://steamcn.com/t368540-1-1
* https://steamcn.com/forum.php?mod=viewthread&tid=368540&page=1#pid6102860
*/
console.log('profile')
} else {
console.log('unknown')
}
})()