手机贴吧优化

针对浏览器直接访问贴吧的页面进行优化
目前为 2023-06-19 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name         手机贴吧优化
// @namespace    http://tampermonkey.net/
// @version      1.0.3
// @description  针对浏览器直接访问贴吧的页面进行优化
// @author       Container_Z
// @license MIT
// @match        https://tieba.baidu.com/*
// @require      https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js
// ==/UserScript==

(function() {
    'use strict';

    ///////////////////////////////////////方法列表///////////////////////////////////////////////////
    function replace_broken_img(){//替换所有破损的表情连接
        var images = document.querySelectorAll('.emotion-img');
        // 遍历每个图片
        for (var i = 0; i < images.length; i++) {
            // 获取图片的src属性
            var src = images[i].getAttribute("src");
            // 如果图片指向https://static.tieba.baidu.com/
            if (src && src.startsWith("http://static.tieba.baidu.com/")) {
                // 替换为指向https://gsp0.baidu.com/5aAHeD3nKhI2p27j8IqW0jdnxx1xbK/
                var newSrc = src.replace("http://static.tieba.baidu.com/", "http://tb2.bdstatic.com/");//或者替换为https://gsp0.baidu.com/5aAHeD3nKhI2p27j8IqW0jdnxx1xbK/
                // 设置新的src属性
                images[i].setAttribute("src", newSrc);
                // 重新加载图片对应的资源
            }
        }
    }

    function add_a_herf_img(){//为所有贴吧图片添加一个a标签父级以便灯箱识别
        // 获取所有在用户文章内，是img并且已加载完成的dom
        var images = document.querySelectorAll('.media-content img[lazy="loaded"],.post-img-wrapper img[lazy="loaded"]');
        // 遍历每个img元素
        images.forEach(function(image) {
            // 获取img元素的src属性值
            if (image.parentElement && image.parentElement.tagName != "A") {
                var src = image.getAttribute("src");
                // 获取img元素的父节点
                var parent = image.parentElement;
                // 创建一个a元素
                var link = document.createElement("a");
                // 设置a元素的data-fancybox属性为"gallery"
                link.setAttribute("data-fancybox", "gallery");
                // 设置a元素的href属性为img元素的src属性值
                link.setAttribute("href", src);
                // 使用父节点的replaceChild()方法，将img元素替换为a元素
                parent.replaceChild(link, image);
                // 使用a元素的append()方法，将img元素添加为a元素的子节点
                link.append(image);
            }
        });
    }

    function add_fancybox(){//为所有贴吧图片添加一个a标签父级以便灯箱识别
        Fancybox.bind('[data-fancybox="gallery"]', {
            wheel: "slide", //滚轮
            contentClick: false, //单击鼠标
            contentDblClick: "toggleZoom", //双击鼠标
            idle: false,
            Thumbs: {
                type: "modern",
                showOnStart: false, //打开时不显示
            },
            backdropClick: false,
            compact: false,
            Carousel: { //缩放移动相关
                Navigation: false,
            },
            Images: {
                Panzoom: { //最大缩放倍率
                    maxScale: () => {
                        return 2.5;
                    },
                },
            },
            Toolbar: { //顶部工具栏
                display: {
                    left: ["infobar"], //顶部左侧
                    middle: [],
                    right: ["flipY", "flipX", "rotateCCW", "rotateCW", "zoomIn", "zoomOut", "slideshow", "fullscreen", "thumbs", "close"], //顶部右侧
                },
            },
            //在文章输出时在preview内，就对移动、PC端做过判断，移动端则输出data-srcset=缩略图地址，并在灯箱渲染时作为srcset属性存在，此属性存在时，会覆盖原图的src属性，灯箱显示的图片会变成缩略图，此时通过保留和删除该属性，便可以实现缩略图与原图之间的切换
            on: {
                'Carousel.ready': (event) => { //初始化加载完成
                    event.container.style.setProperty( //背景显示放大模糊缩略图
                        '--bg-image',
                        `url("${event.getSlide().thumbSrc}")`
                    );
                },
                'Carousel.change': (event) => { //图片成功切换到下一张时执行（左右拖动图片松开鼠标的瞬间）
                    event.container.style.setProperty( //背景显示放大模糊缩略图
                        '--bg-image',
                        `url("${event.getSlide().thumbSrc}")`
                    );
                },

            },
        });
    }
    //////////////////////////////////滚动时 执行////////////////////////////////////
    window.addEventListener("scroll", function(event) {
        replace_broken_img();
        add_a_herf_img();
    });

    // 文档内容发生变化时手动触发一次scroll事件
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            replace_broken_img();
            add_a_herf_img();
        });
    });
    observer.observe(document, {childList: true, subtree: true});



    ////////////////////////载入fancybox文件，并在文件加载完成后执行灯箱初始化///////////////////////
    var link = document.createElement("link");
    link.setAttribute("rel", "stylesheet");
    link.setAttribute("href", "https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.css");
    document.head.appendChild(link);

    var script = document.createElement("script");
    script.setAttribute("src", "https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.umd.js");
    script.onload = function() {
        add_fancybox();
    };
    document.head.appendChild(script);
})();