远景论坛宽屏化

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

调整论坛布局宽度并添加可拖拽滑块元素功能，同时禁用滑块元素内容的选择和复制功能，默认滑块元素在右上角设定位置，可移动至任意位置并保持其位置不变。
当前为 2024-09-12 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         远景论坛宽屏化
// @namespace    http://tampermonkey.net/
// @version      1.1
// @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 = '240px';
    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);

    sliderContainer.style.left = 'calc(100% - 340px)';
    sliderContainer.style.top = '80px';

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

})();