Greasy Fork is available in English.
调整论坛布局
目前为
// ==UserScript==
// @name 远景论坛宽屏化
// @namespace http://tampermonkey.net/
// @version 1.3
// @description 调整论坛布局
// @icon https://www.google.com/s2/favicons?sz=64&domain=pcbeta.com
// @license MIT
// @match https://bbs.pcbeta.com/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
var sliderContainer = document.createElement('div');
sliderContainer.style.position = 'fixed';
sliderContainer.style.background = '#f1f1f1';
sliderContainer.style.padding = '10px';
sliderContainer.style.zIndex = '9999';
sliderContainer.style.border = '1px solid #ccc';
sliderContainer.style.borderRadius = '5px';
sliderContainer.style.width = '180px';
sliderContainer.style.userSelect = 'none';
sliderContainer.style.cursor = 'move';
var sliderLabel = document.createElement('label');
sliderLabel.innerHTML = '调整页面宽度: ';
sliderContainer.appendChild(sliderLabel);
var sliderValue = document.createElement('span');
sliderValue.innerHTML = '90%';
sliderContainer.appendChild(sliderValue);
var slider = document.createElement('input');
slider.type = 'range';
slider.min = '50';
slider.max = '100';
slider.value = '90';
slider.style.width = '100%';
slider.style.cursor = 'pointer';
sliderContainer.appendChild(slider);
document.body.appendChild(sliderContainer);
var hdElement = document.getElementById('hd');
var defaultLeft = 'calc(100% - 230px)';
var defaultTop = hdElement ? (hdElement.getBoundingClientRect().top + (hdElement.getBoundingClientRect().height / 2) - (sliderContainer.getBoundingClientRect().height / 2)) + 'px' : '80px';
sliderContainer.style.left = defaultLeft;
sliderContainer.style.top = defaultTop;
// 创建折叠图标
var toggleButton = document.createElement('div');
toggleButton.style.fontSize = '14pt';
toggleButton.innerHTML = '>>';
toggleButton.style.position = 'absolute';
toggleButton.style.top = '5px';
toggleButton.style.right = '5px';
toggleButton.style.cursor = 'pointer';
toggleButton.style.userSelect = 'none';
sliderContainer.appendChild(toggleButton);
var isCollapsed = false;
// 折叠和展开功能
toggleButton.addEventListener('click', function() {
var currentTop = sliderContainer.style.top;
var currentLeft = sliderContainer.style.left;
isCollapsed = !isCollapsed;
if (isCollapsed) {
sliderContainer.style.width = '40px';
sliderLabel.style.display = 'none';
slider.style.display = 'none';
sliderValue.style.display = 'none';
toggleButton.innerHTML = '<<';
toggleButton.style.top = '50%';
toggleButton.style.transform = 'translate(-50%, -50%)';
toggleButton.style.left = '50%';
// 折叠到同一行的右侧，留出一定距离
sliderContainer.style.left = 'calc(100% - 60px)';
sliderContainer.style.top = currentTop;
} else {
sliderContainer.style.width = '180px';
sliderLabel.style.display = 'inline';
slider.style.display = 'inline';
sliderValue.style.display = 'inline';
toggleButton.innerHTML = '>>';
toggleButton.style.top = '5px';
toggleButton.style.right = '5px';
toggleButton.style.transform = 'none';
toggleButton.style.left = 'auto';
// 恢复到之前的位置并确保向左展开
sliderContainer.style.left = 'calc(100% - 230px)';
sliderContainer.style.top = currentTop;
}
});
function adjustWidth(percentage) {
var wpClElements = document.querySelectorAll('.wp.cl');
wpClElements.forEach(function(element) {
element.style.width = percentage + '%';
});
var clElements = document.querySelectorAll('.cl');
clElements.forEach(function(element) {
element.style.width = percentage + '%';
});
var scbarHotTdElement = document.querySelector('td.scbar_hot_td');
function adjustTdWidth() {
if (scbarHotTdElement && clElements.length > 0) {
var clRightEdge = clElements[0].offsetLeft + clElements[0].offsetWidth;
scbarHotTdElement.style.width = (clRightEdge - scbarHotTdElement.offsetLeft) + 'px';
}
}
function adjustFlBmChildren() {
var flBmElements = document.querySelectorAll('.fl.bm');
flBmElements.forEach(function(element) {
element.style.width = '100%';
element.style.boxSizing = 'border-box';
var children = element.children;
for (var i = 0; i < children.length; i++) {
children[i].style.width = '100%';
children[i].style.boxSizing = 'border-box';
}
});
}
function adjustAdditionalElements() {
var ptElement = document.querySelector('#pt.bm');
if (ptElement) {
ptElement.style.width = percentage + '%';
ptElement.style.margin = '0 auto';
}
var specificDiv = document.querySelector('div[style*="padding:0 15px;background:#fafafa;border:1px solid #ececec;"]');
if (specificDiv) {
specificDiv.style.width = percentage + '%';
specificDiv.style.margin = '0 auto';
specificDiv.style.boxSizing = 'border-box';
}
}
adjustTdWidth();
adjustFlBmChildren();
adjustAdditionalElements();
}
adjustWidth(slider.value);
slider.addEventListener('input', function() {
sliderValue.innerHTML = slider.value + '%';
adjustWidth(slider.value);
});
var logoElement = document.querySelector('a[title="远景论坛 - 微软极客社区"]');
var scbarFormElement = document.getElementById('scbar_form');
function alignLogo() {
if (logoElement && scbarFormElement) {
var scbarFormRect = scbarFormElement.getBoundingClientRect();
logoElement.style.position = 'absolute';
logoElement.style.left = scbarFormRect.left + 'px';
}
}
function observeScbarForm() {
if (scbarFormElement) {
const observer = new MutationObserver(function() {
alignLogo();
});
observer.observe(scbarFormElement, {
attributes: true,
childList: true,
subtree: true
});
alignLogo();
}
}
observeScbarForm();
window.addEventListener('resize', function() {
alignLogo();
});
function makeElementDraggable(element) {
var offsetX, offsetY;
var isDragging = false;
element.addEventListener('mousedown', function(e) {
if (e.target === slider || e.target === toggleButton) return;
e.preventDefault();
offsetX = e.clientX - element.getBoundingClientRect().left;
offsetY = e.clientY - element.getBoundingClientRect().top;
isDragging = true;
document.addEventListener('mousemove', moveElement);
document.addEventListener('mouseup', stopMovingElement);
});
function moveElement(e) {
if (isDragging) {
element.style.left = (e.clientX - offsetX) + 'px';
element.style.top = (e.clientY - offsetY) + 'px';
}
}
function stopMovingElement() {
isDragging = false;
document.removeEventListener('mousemove', moveElement);
document.removeEventListener('mouseup', stopMovingElement);
}
}
makeElementDraggable(sliderContainer);
})();