远景论坛宽屏化

Greasy Fork is available in English.
远景论坛宽屏化

调整论坛布局宽度
当前为 2024-09-12 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         远景论坛宽屏化
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  调整论坛布局宽度
// @author       宇泽同学
// @match        https://bbs.pcbeta.com/*
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    var sliderContainer = document.createElement('div');
    sliderContainer.style.position = 'absolute';
    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 = '240px';

    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%';
    sliderContainer.appendChild(slider);

    document.body.appendChild(sliderContainer);

    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');
    var wpElement = document.querySelector('.wp');

    function positionSlider() {
        if (wpElement) {
            var wpRect = wpElement.getBoundingClientRect();
            sliderContainer.style.left = (wpRect.right + 100) + 'px';
            sliderContainer.style.top = (wpRect.top + window.scrollY + 30) + 'px';
        }
    }

    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();
        }
    }

    positionSlider();
    observeScbarForm();

    window.addEventListener('resize', function() {
        positionSlider();
        alignLogo();
    });
    window.addEventListener('scroll', function() {
        positionSlider();
        alignLogo();
    });

})();