使司机社(JavBus)的论坛适应移动端界面
// ==UserScript==
// @name JavBus论坛移动端界面适配
// @namespace https://sleazyfork.org/zh-CN/users/1140711-steven-fake
// @homepageURL https://github.com/Steven-Fake/JavBus-forum-mobile-layout
// @version 1.1.3
// @license MIT
// @description 使司机社(JavBus)的论坛适应移动端界面
// @author Steven-Fake
// @icon https://www.javbus.com/favicon.ico
// @match https://www.javbus.com/forum*
// @match https://www.buscdn.cfd/forum*
// @match https://www.buscdn.lol/forum*
// @match https://www.busfan.cfd/forum*
// @match https://www.busfan.lol/forum*
// @match https://www.cdnbus.cfd/forum*
// @match https://www.cdnbus.lol/forum*
// @match https://www.dmmbus.cfd/forum*
// @match https://www.dmmbus.lol/forum*
// @match https://www.dmmsee.cfd/forum*
// @match https://www.dmmsee.lol/forum*
// @match https://www.javsee.cfd/forum*
// @match https://www.javsee.lol/forum*
// @match https://www.seejav.cfd/forum*
// @match https://www.seejav.lol/forum*
// @grant none
// ==/UserScript==
(function () {
//使用adjust变量来判断是否需要调整为移动端布局，并添加监听事件
const adjust = window.innerHeight > window.innerWidth && window.innerWidth < 1600;
if (adjust) {
console.log("JavBus论坛移动端界面适配v1.1.3: 启用移动端布局");
const pageType = ((url) => {
if (url.includes("tid=")) {
return "post";
} else if (url.includes("uid=")) {
return "profile";
} else if (url.includes("action=login")) {
return "login";
} else if (url.includes("search.php")) {
return "search";
} else {
return "index";
}
})(window.location.href);
/* 注入自适应调整的meta标签 */
const appendMeta = document.createElement("meta");
appendMeta.name = "viewport";
appendMeta.content = "width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no";
document.head.appendChild(appendMeta);
/* 调整无用元素
* 1. 移除顶部广告
* 2. 删除本就隐藏的元素
* */
if (pageType !== "search") {
try {
//1.移除顶部广告
document.getElementsByClassName("bcpic2")[0].remove();
} catch (e) {
console.log("JavBus论坛移动端界面适配v1.1.3: 尝试移除顶部广告时出错。");
}
try {
//2.删除本就隐藏的元素
document.getElementsByClassName("wp cl")[0].remove();
} catch (e) {
console.log(e);
console.log("JavBus论坛移动端界面适配v1.1.3: 尝试删除隐藏元素时出错。");
}
}
/* 调整顶栏
* 1. 删除logo
* 2. 调整导航栏样式
* 3. 调整搜索框样式
* 4. 清除顶栏的无用元素
* 5. 将个人信息按钮移动到nav中
* 6. 隐藏ID
* */
if (pageType !== "search") {
//1. 删除logo
document.getElementsByClassName("jav-logo")[0].remove();
//2. 调整导航栏样式
const nav = document.getElementById("toptb");
nav.style.cssText = "width: 100%; min-width: 0; padding: 0;";
nav.children[0].style.cssText = "width: 100%; padding: 0; margin: 0;";
nav.children[0].children[0].style.cssText = "width: 100%; padding: 0; margin: 0;";
//3. 调整搜索框样式
const search_div = document.getElementsByClassName("jav-form-group")[0];
search_div.style.cssText = "width: 35%; min-width: 0;";//调整宽度
search_div.children[0].style.cssText = "width: 50%; margin-left: 5%;";//调整宽度
search_div.children[1].style.cssText = "width: 35%; min-width: 50px; margin-right: 0;";//调整宽度
search_div.outerHTML = '<li>' + search_div.outerHTML + '</li>';
//4. 清除顶栏的无用元素
document.querySelectorAll('.nav-title.nav-inactive').forEach(function (e) {
e.remove();
});
//5.将个人信息按钮移动到nav中
const info_li = document.createElement("li");
info_li.appendChild(document.getElementsByClassName("login-wrap y")[0]);
nav.getElementsByClassName("z")[0].children[0].appendChild(info_li);
//6.隐藏ID
document.getElementsByClassName("member-name")[0].remove();
/*调整主要内容
* 1. 调整主内容的布局
* 2. 删除层级导航栏
* */
//1.调整主内容的布局
const main_wrapper_div = document.getElementById("wp");
main_wrapper_div.style.cssText = "width: 100%; min-width: 0; padding: 0;";
const main_div = document.getElementsByClassName("mn")[0];
main_div.style.cssText = "width: 100%; min-width: 0; padding: 0;";
//2.删除层级导航栏
if (pageType === "post") {
document.getElementById("pt").children[0].remove();
} else if (pageType === "index") {
document.getElementById("pt").children[1].remove();
document.getElementById("chart").children[1].style.float = "left";//调整部分选项为右浮动
}
//轮播图片框和帖子推荐列表
if (pageType === "index") {
const carousel_div = main_div.firstElementChild;
//调整宽度
carousel_div.style.cssText = "width: 100%; min-width: 0; padding: 0; height: auto;";
//调整轮播图片框
carousel_div.children[0].style.cssText = "float: none; width: 100%; height: auto;";
//调整轮播图片框右侧的div
carousel_div.children[1].style.cssText = "margin: 0; margin-top: 10px; width: 100%; height: auto;";
//帖子推荐列表
const post_list_div = document.getElementsByClassName("sideMenu");
for (let i = 0; i < post_list_div.length; i++) {
let sideMenu = post_list_div[i];
for (let j = 0; j < sideMenu.childElementCount; j++) {
sideMenu.children[j].style.width = "100%";
sideMenu.children[j].firstChild.remove(); //删除发帖用户的名称
}
}
//两个分区板块
const comprehensive_tbody = document.getElementsByClassName("fl_tb")[0].firstElementChild;
const welfare_tbody = document.getElementsByClassName("fl_tb")[1].firstElementChild;
for (let i = 0; i < comprehensive_tbody.childElementCount; i++) {//调整“综合交流区”布局
let area_tr = comprehensive_tbody.children[i]; //分区(tr)
for (let j = 0; j < area_tr.childElementCount; j++) {
let area_td = area_tr.children[j]; //分区的各项描述信息td
if (j !== 0 && j !== 1) {//j=0是分区的图标,j=1是其他信息的目标td
area_tr.children[1].innerHTML += area_td.outerHTML;
area_td.style.display = "none";
}
}
}
for (let i = 0; i < welfare_tbody.childElementCount; i++) {//调整“福利讨论分区”布局
let area_tr = welfare_tbody.children[i]; //分区(tr)
for (let j = 0; j < area_tr.childElementCount; j++) {
let area_td = area_tr.children[j]; //分区的各项描述信息td
if (j !== 0 && j !== 1) {//j=0是分区的图标,j=1是其他信息的目标td
area_tr.children[1].innerHTML += area_td.outerHTML;
area_td.style.display = "none";
}
}
}
}
}
//调整帖子和回复中的图片尺寸
if (pageType === "post") {
let post_td = document.getElementsByClassName("t_f");
for (let i = 0; i < post_td.length; i++) {
let imgs = post_td[i].getElementsByTagName("img");
for (let j = 0; j < imgs.length; j++) {
if (!imgs[j].src.includes("/static/image/smiley/")) {//不调整表情图片
imgs[j].style.cssText = "width: 100%; height: auto;";
}
}
}
}
//调整个人信息页的发帖表格布局
if (pageType === "profile") {
document.querySelectorAll('.z').forEach(function (e) {
e.style.width = "100%";
e.style.padding = "0";
});
if (document.getElementsByClassName("th").length > 0) {
const post_table = document.getElementsByClassName("th")[0];
//按照1:4:2:1:2的比例调整各列宽度
post_table.children[0].style.width = "10%";
post_table.children[1].style.width = "40%";
post_table.children[2].style.width = "20%";
post_table.children[3].style.width = "10%";
post_table.children[4].style.width = "20%";
}
}
//调整登录界面
if (pageType === "login") {
document.getElementById("ct").style.width = "100%";//调整浮窗的宽度
let floatWindow = document.getElementsByClassName("biaoqi_dl");
let floatWindowInfo_div = document.getElementsByClassName("rfm");
let buttonWrappers_div = document.getElementsByClassName("rfm bw0");
let buttons = document.getElementsByClassName("pn pnc");
for (let i = 0; i < floatWindow.length; i++) {//调整浮窗的边距
floatWindow[i].style.cssText = "margin-left: 0; margin-right: 0;"
}
for (let i = 0; i < floatWindowInfo_div.length; i++) {//调整浮窗中各条信息的边距
floatWindowInfo_div[i].style.cssText = "width: 100%; padding-left: 5%;"
}
for (let i = 0; i < buttonWrappers_div.length; i++) {
buttonWrappers_div[i].style.width = "auto";//调整按钮的宽度
}
for (let i = 0; i < buttons.length; i++) {
buttons[i].style.width = "auto";//调整按钮的宽度
}
document.getElementsByClassName("f_c altw")[0].style.padding = "0"; //跳转显示框
}
//调整搜索界面
if (pageType === "search") {
document.getElementById("scform_srchtxt").style.width = "50%";
document.getElementById("scform_submit").style.cssText = "width: 30%; min-width: 100px;";
document.getElementById("toptb").style.cssText = "width: 100%; min-width: 0;padding: 0; border: 0;";//调整顶栏的宽度
document.getElementById("scform").style.cssText += "width: 100%; min-width: 0;";//调整搜索框的宽度
document.getElementById("ft").remove();//删除页脚
//调整搜索结果的布局
try {
document.getElementById("threadlist").style.width = "100%";
} catch (e) {
}
}
/*侧边栏*/
if (pageType === "index") {
let sidebar_div = document.getElementById("sd");
const sidebarHotTopics_div = sidebar_div.firstElementChild;
const sidebarChoice_div = sidebar_div.children[1];
//调整宽度
sidebar_div.style.cssText = "width: 100%; min-width: 0;";
sidebarHotTopics_div.style.cssText = "width: 100%; min-width: 0;";
sidebarChoice_div.style.cssText = "width: 100%; min-width: 0;";
const hotTopicsContainer_div = document.getElementsByClassName("main-right-zuixin")[0];
for (let i = 0; i < hotTopicsContainer_div.childElementCount; i++) {
let post_li = hotTopicsContainer_div.children[i];
post_li.firstElementChild.firstElementChild.width = "100%";
}
//显示“热门主题”完整的标题
const hotTopicsTitle_div = document.getElementsByClassName("comment-post");
for (let i = 0; i < hotTopicsTitle_div.length; i++) {
hotTopicsTitle_div[i].firstElementChild.textContent = hotTopicsTitle_div[i].firstElementChild.title;
}
//显示“精选内容”完整的标题
const selectedTitle_div = document.getElementsByClassName("main-right-tw")[0];
selectedTitle_div.firstElementChild.children[1].firstElementChild.textContent = selectedTitle_div.firstElementChild.children[1].firstElementChild.title;
document.getElementsByClassName("main-right-tw-txt")[0].style.width = "100%";
} else if (pageType === "post") {
let sidebar_div = document.getElementsByClassName("sd sd_allbox")[0];
const selectedContent_div = document.getElementsByClassName("main-right-box cl");
const selectTheme_div = document.getElementsByClassName("main-right-zuixin")[0];
//调整宽度
sidebar_div.style.cssText = "width: 100%; min-width: 0;";
for (let i = 0; i < selectedContent_div.length; i++) {
selectedContent_div[i].style.cssText = "width: 100%; min-width: 0;";
}
//调整“精选主题”每个li的宽度
for (let i = 0; i < selectTheme_div.childElementCount; i++) {
let post_li = selectTheme_div.children[i];
post_li.firstElementChild.firstElementChild.width = "100%";
}
}
if (pageType !== "search") {
/* 调整回到页首按钮的位置 */
const backToTop_div = document.getElementsByClassName("biaoqi-fix-area")[0];
backToTop_div.style.cssText = "left: 0; margin-left: 80%;"
backToTop_div.firstElementChild.style.bottom = "10%";
/*调整页脚*/
const footer = document.getElementsByClassName("jav-footer")[0];
footer.style.cssText = "width: 100%; min-width: 0; padding: 0;";
footer.firstElementChild.style.padding = "10px";
}
} else {
let tip = "JavBus论坛移动端界面适配v: 未启用移动端布局，原因: ";
if (window.innerWidth >= 1600) {
if (window.innerWidth >= window.innerHeight) {
console.log(tip + "当前屏幕宽度大于1600px, 且不为竖屏。");
} else {
console.log(tip + "当前屏幕宽度大于1600px。");
}
} else {
if (window.innerWidth >= window.innerHeight) {
console.log(tip + "当前屏幕不为竖屏。");
} else {
console.log(tip + "未知原因。");
}
}
console.log("width:", window.innerWidth, "height:", window.innerHeight);
}
})();