Greasy Fork is available in English.

READTHEDOCS.IO

try to take over the world!

您查看的为 2020-10-22 提交的版本。查看 最新版本

// ==UserScript==
// @name         READTHEDOCS.IO
// @namespace    http://tampermonkey.net/
// @version      1.4
// @description  try to take over the world!
// @author       You
// @match        https://geotrellis.readthedocs.io/*
// @match        https://scala-slick.org/doc/*/*
// @match        https://www.geomesa.org/documentation/tutorials/*
// @match        http://www.sunibas.cn/pages/geotrellis-docs/*
// @grant GM_setValue
// @grant GM_getValue
// ==/UserScript==

(function() {
    'use strict';

    //const $supWindow = window;
    window.docExpand = "docExpand";
    window.docSidebarLoc = "docSidebarLoc";
    var panelDefaultSetting = {
        name: "panelDefaultSetting",
        panelOpacity: 80,
        sidebarOpacity: 80,
        leftColor: "#a7e0e7",
        rightColor: "#79c9f9",
        docScala: 100,
    };
    var setLeftContentColor = function() {};
    var setRightContentColor = function() {};
    var getLeftContentDom = function() {};
    var getRightContentDom = function() {};
    window.panel = {
        color: 'fixColor',
        loc: 'fixLoc',
        sidebar: 'mySidebar',
    };
    window.onload = function() {
        var content = jQuery('.wy-nav-content');
        if (content.length) {
            geotrellis();
            return;
        }
        if (location.host == "scala-slick.org") {
            slick();
        }
        addSetting();
    }
    function addSetting() {
        var settingBtn = jQuery(`<div style="position: fixed;top: 0;left: 0;
z-index: 1000;border: 50px solid;border-top-color: #3F51B5;max-width:100px;max-height:100px;
border-bottom-color: #ffff0000;border-left-color: #9C27B0;cursor: pointer;
border-right-color: #0000ff00;"></div>`);
        jQuery('body').append(settingBtn);
        var settingPanel = jQuery(`<div style="position: fixed;display:none;
    top: 20%;padding:20px;left: 20%;color:white;
    width: 60%;height: 60%;z-index: 1000;background: black;
"><div style="width: 100%;line-height: 20px;cursor: pointer;" tar="close">关闭</div></div>`);
        function updateValue(name,value) {
            panelDefaultSetting[name] = value;
            setContent(panelDefaultSetting.name,panelDefaultSetting);
        }
        function addRange(label,defaultValue,name,onchange,max,min,step) {
            var range = jQuery(`<div style="width: 100%;line-height: 20px;">
<lable style="display: inline-block;width: 20%;text-align: center;">${label}</lable>
<input type="range" style="width: 70%;display:inline-block;" min="${min || 30}" max="${max || 100}" step="${step || 1}"></div>`);
            var inp = range.find('input');
            inp.val(defaultValue || 100);
            inp.on('change',function(e) {
                onchange(e.target.value);
                updateValue(name,e.target.value);
            });
            onchange(defaultValue || 100);
            return range;
        }
        function addColor(label,defaultValue,name,onchange) {
            var range = jQuery(`<div style="width: 100%;line-height: 20px;">
<lable style="display: inline-block;width: 20%;text-align: center;">${label}</lable>
<input type="color" style="width: 70%;display:inline-block;"></div>`);
            var inp = range.find('input');
            inp.val(defaultValue);
            inp.on('change',function(e) {
                onchange(e.target.value);
                updateValue(name,e.target.value);
            });
            onchange(defaultValue);
            return range;
        }
        jQuery('body').append(settingPanel);

        panelDefaultSetting = getContent(panelDefaultSetting.name,panelDefaultSetting);
        settingPanel.append(addRange("面板透明度",panelDefaultSetting.panelOpacity,"panelOpacity",function (val) {
            settingPanel.css({opacity: val / 100});
        }));
        settingPanel.append(addRange("菜单透明度",panelDefaultSetting.sidebarOpacity,"sidebarOpacity",function (val) {
            jQuery(`#${panel.sidebar}`).css({opacity: val / 100});
        }));
        settingPanel.append(addColor("左边文档颜色",panelDefaultSetting.leftColor,"leftColor",function (val) {
            setLeftContentColor(val);
        }));
        settingPanel.append(addColor("右边文档颜色",panelDefaultSetting.rightColor,"rightColor",function (val) {
            setRightContentColor(val);
        }));
        settingPanel.append(addRange("缩放文档",panelDefaultSetting.docScala,"docScala",function (val) {
            getLeftContentDom().style.transformOrigin = "0 0";
            getLeftContentDom().style.transform = `scale(${val / 100})`;
            getRightContentDom().style.transformOrigin = "0 0";
            var offsetX = - getLeftContentDom().offsetWidth * (100 - val) / 100;
            getRightContentDom().style.transform = `scale(${val / 100}) translate(${offsetX}px, 0px)`;
            console.log(val);
        },150,50,10));
        settingPanel.find('[tar="close"]').on("click",function () {
            settingPanel.css({display: 'none'});
        });
        settingBtn.on('click',function() {
            settingPanel.css({display:'block'});
        });
    }
    function slick() {
        function slickOld() {
            var content = jQuery('.content');
            jQuery('.content-wrapper').css({
                padding: '0',
                background: 'unset'
            });
            var sidebar = jQuery('.sidebar');
            sidebar.remove();
            content.css({
                margin:"0 20px",
                width: "auto"
            });
            sidebarSetting(sidebar);
            jQuery('.clearer').css({display:'none'});
            var doc = jQuery('.document');
            doc.css({padding:'0 0px 0 15px'});
            return {content,doc,iframeStyle:"",
                left:`<div class="document">`,right:`</div`};
        }
        function slickNew() {
            let main = jQuery('main');
            let content = main.parent();
            main.css({ "max-width": "800px",display: "inline-block",position: "absolute" });
            content.parent().css({ margin:0,padding:0,"max-width":"unset" });
            let sidebar = jQuery('[data-sticky-container]');
            sidebar.remove();
            sidebar[0].style.minWidth = "250px";
            sidebarSetting(jQuery(`<div>${sidebar[0].children[0].innerHTML}</div>`));
            return {
                content,doc:main,iframeStyle: `position: absolute;left: 850px;`,
                left: '<main class="columns large-order-2 sections">',
                right: '</main>'
            };
        }
        var content = jQuery('.content');
        var dom = {};
        if (content.length === 0) {
            dom = slickNew();
        } else {
            dom = slickOld();
        }

        dom.content.append(jQuery(`<iframe id="copy" style="${dom.iframeStyle}"></iframe>`));
        copyToIframe(copy,dom.doc[0],dom.left,dom.right);
        copy.style.border = "none";
        setTimeout(function() {
            copy.contentDocument.body.style.padding = "0 10px";
            copy.contentDocument.body.children[0].style.width = (copy.contentWindow.innerWidth - 20) + "px";
        });
    }
    function geotrellis() {
        var content = jQuery('.wy-nav-content-wrap');
        var sidebar = jQuery('.wy-nav-side');
        jQuery('.wy-nav-content-wrap').css({margin:0});
        content.css({
            margin:"0"
        });
        sidebar.remove();
        sidebar.css({
            position: "unset",
            "overflow-y": "scroll"
        });
        sidebarSetting(sidebar);
        var doc = jQuery('.wy-nav-content');
        doc.css({float:"left"});
        content.append(jQuery('<iframe id="copyDoc"></iframe>'));
        copyToIframe(copyDoc,doc[0],`<div class="wy-nav-content">`,`</div`);
        copyDoc.style.border = "none";
        setTimeout(function() {
            copyDoc.contentDocument.body.style.padding = "0 10px";
            copyDoc.contentDocument.body.children[0].style.width = (copyDoc.contentWindow.innerWidth - 20) + "px";
        });
    }
    function sidebarSetting(sidebar) {
        function resize() {
            var height = window.innerHeight * 0.9;
            if (sidebar.height() <= window.innerHeight * 0.9) {
                sidebar.css({
                    height: "auto",
                    "overflow-y": "unset"
                });
            } else {
                sidebar.css({
                    height: height + "px",
                    "overflow-y": "scroll"
                });
            }
        };
        var newSidebar = jQuery(`<div id="${panel.sidebar}">
<div style="cursor: pointer;user-select: none;padding: 5px;background: darkseagreen;">
   <div style="display: inline;padding-right:20px" tar="expandSide">展开</div>
   <div style="display: inline;" tar="dExpandSide">收起</div>
   <div style="display: inline;" tar="dragTo">点我拖动</div>
</div></div>`);
        jQuery('body').append(newSidebar);
        newSidebar.append(sidebar);
        var loc = getContent(docSidebarLoc,{top:20,right:10});
        newSidebar.css({
            position: "fixed",
            "z-index": 100000,
            background: "#82c8ff",
            padding: "20px",
            top: loc.top + 'px',
            right: loc.right + 'px',
        });

        var res = window.onresize || (() => {});
        window.onresize = function() {
            res();
            resize();
        };
        resize();
        window.expandSide = function() {
            sidebar.css({display:'block'});
            setContent(docExpand,{ex:true});
        };
        window.dExpandSide = function() {
            sidebar.css({display:'none'});
            setContent(docExpand,{ex:false});
        };
        newSidebar.find('[tar="expandSide"]').on('click',expandSide);
        newSidebar.find('[tar="dExpandSide"]').on('click',dExpandSide);
        var ex = getContent(docExpand,{ex:false}).ex;
        if (ex) {
            expandSide();
        } else {
            dExpandSide();
        }
        // 处理拖动
        newSidebar.find('[tar="dragTo"]').hover(function(){
            $(this).css({"background": "#82c8ff",
                padding: "5px",
                "line-height": "16px",
                "box-sizing": "border-box"
            });//hover时效果
        },function(){
            $(this).css({"background": "unset",
                padding: "0",
                "line-height": "unset",
                "box-sizing": "unset"
            });//hover时效果
        });
        let dragObj = {
            drag: false,
            fromX: 0,
            fromY: 0,
            top: loc.top,
            right: loc.right
        };
        newSidebar.find('[tar="dragTo"]').on("mousedown",function(e) {
            dragObj.drag = true;
            dragObj.fromX = e.clientX;
            dragObj.fromY = e.clientY;
        }).on("mousemove",function(e) {
            if (!dragObj.drag) return;
            var detaX = dragObj.fromX - e.clientX; // 左 正
            var detaY = dragObj.fromY - e.clientY; // 下 负
            // 改变 坐标位置
            dragObj.right += detaX;
            dragObj.top -= detaY;
            newSidebar.css({
                right: dragObj.right + "px",
                top: dragObj.top + "px",
            });
            dragObj.fromX = e.clientX;
            dragObj.fromY = e.clientY;
        }).on("mouseup",function() {
            dragObj.drag = false;
            setContent(docSidebarLoc,{top:dragObj.top,right:dragObj.right});
        });
    }
    function wy_nav_content() {
        var content = jQuery('.wy-nav-content');
        var parentDiv = content.parent();
        parentDiv[0].style.background = "#fff";
        content[0].style.float = 'left';
        content[0].style.background = 'darkkhaki';
        parentDiv.append(jQuery('<iframe id="copy"></iframe>'));
        copyToIframe(copy,content[0],`<div class="wy-nav-content" style="float: left;">`,`</div>`);
    }
    function copyToIframe(copyIfr,copyEle,outerLeft,outerRight) {
        setTimeout(function() {
            setTimeout(function(){
                var ls = document.getElementsByTagName('head')[0].getElementsByTagName('link');
                for (var i = 0;i < ls.length;i++) {
                    if (ls[i].getAttribute('rel') == "stylesheet") {
                        copyIfr.contentWindow.document.getElementsByTagName('body')[0].innerHTML += `<link rel="stylesheet" href="${ls[i].href}" type="text/css">`;
                    }
                }
            },500);
            copyIfr.contentWindow.document.getElementsByTagName('body')[0].innerHTML = outerLeft + copyEle.innerHTML + outerRight;
            copyIfr.style.height = copyEle.clientHeight + "px";
            copyIfr.style.width = (copyEle.clientWidth + 50) + "px";
        });
        setLeftContentColor = function(color) {
            copyEle.style.background = color;
        };
        setRightContentColor = function(color) {
            copyIfr.contentDocument.body.style.background = color;
        };
        getLeftContentDom = function() {
            return copyEle;
        }
        getRightContentDom = function() {
            return copyIfr;
        }
        // 上下运动
        setTimeout(function() {
            jQuery('body').append(jQuery(`
<div id="${panel.loc}" style="position: fixed;right: 20px;top: 50%;font-size: xx-large;cursor: pointer;user-select: none;">
<div id="justLocUp" style="background: cadetblue;border-radius: 10px;padding: 5px;">上</div>
<div id="closeFixLoc" style="margin-top: 5px;background: cadetblue;border-radius: 10px;padding: 5px;">关</div>
<div id="justLocDown" style="margin-top: 5px;background: cadetblue;border-radius: 10px;padding: 5px;">下</div>
</div>`));
            jQuery("#closeFixLoc").on("click",function() {
                jQuery("#fixLoc")[0].style.display = "none";
            });
            let currentLoc = 0;
            let justLoc = function(tar) {
                let cloc = currentLoc + tar * 50;
                if (cloc < 0) {
                    return;
                } else {
                    copyEle.style.marginTop = cloc + "px"
                    currentLoc = cloc;
                }
            }
            jQuery("#justLocUp").on("click",function() {
                justLoc(-1);
            });
            jQuery("#justLocDown").on("click",function() {
                justLoc(1);
            });
        });
    }
    function getContent(name,defaultValue) {
        var value = GM_getValue(name,JSON.stringify(defaultValue));
        return JSON.parse(value);
    }
    function setContent(name,value) {
        GM_setValue(name,JSON.stringify(value));
    }
    // Your code here...
})();