Greasy Fork

Greasy Fork is available in English.

豆瓣日记页功能优化

复制豆瓣日记编辑栏,互动栏,标签栏到顶部,增加侧栏,在查看/编辑界面点击可跳转到各级标题位置

当前为 2021-11-10 提交的版本,查看 最新版本

// ==UserScript==
// @name         豆瓣日记页功能优化
// @namespace    http://tampermonkey.net/
// @version      0.26
// @description  复制豆瓣日记编辑栏,互动栏,标签栏到顶部,增加侧栏,在查看/编辑界面点击可跳转到各级标题位置
// @author       lpy
// @match      *://www.douban.com/note*
// @grant        none
// @connect      douban.com
// @require      http://cdn.bootcss.com/jquery/3.3.1/jquery.min.js
// ==/UserScript==

(
    function () {
        const STYLE = `
      .sns-bar{
      margin:0px;
      padding:0px;
      }

      #sidenav {
      width:300px;
      /*height:500px;*/
      position:fixed;
      bottom:300px;
      left:5px;
      background-color:#FFFFFF;
      /*border: 3px solid #f7c792;*/
      padding: 10px;
      }

      #sidenav a{
      margin: 2px 0px;
      /*border: 1px solid #ddd;*/
      display:block;
      }

      /*
      为不同等级的标题设置缩进
      */
      #sidenav a[header_lv="H1"]{
      font-size:160%;
      }

      #sidenav a[header_lv="H2"],a[header_lv="SPAN"],a[header_lv="DIV"]{
      padding-left: 20px;
      font-size:140%;
      }

      #sidenav a[header_lv="H3"]{
      padding-left: 40px;
      font-size:120%;
      }

      #sidenav a[header_lv="H4"]{
      padding-left: 60px;
      font-size:110%;
      }

      #sidenav a[header_lv="H5"]{
      padding-left: 80px;
      }
    `
    function loadStyle(){
        let style = $("<style></style>").attr("type","text/css").html(STYLE);
        style.appendTo($(document.head));
    }

        function bottombarToTop(){
            'use strict';
            //alert("test");
            //$(".note-ft").clone().prependTo($(".note"));
            $(".note-footer-stat").clone().css({"margin":"5px 0px"}).appendTo($(".pub-date"));
            $(".mod-tags").css({"overflow":"hidden"});
            //$(".mod-tags").clone().prependTo($(".note"));
            $(".mod-tags").clone().appendTo($(".pub-date"));
            $(".mod-tags").find("a").css({"float":"left"});
            $(".sns-bar").clone().appendTo($(".pub-date"));
        }

        function sideNav(){
            let nav = $("<div></div>").attr("id","sidenav");
            nav.css("border","3px solid #f7c792");
            nav.appendTo($(document.body));
            let headers = $(".note").find(".title-text,:header");
            //console.log(headers);
            //console.log($(".title-text"));
            //console.log($.makeArray($(".title-text")));
            /*  用find复合查询,避免拼接
        let refArray = $.makeArray([].slice.call($(".title-text")));
        console.log(refArray);
        //headers = headers.push(...refArray);
        headers = [...headers,...refArray];
        console.log(headers);
        */
            for (let header of headers){
                let jqHeader = $(header);
                //console.log(jqHeader);
                let slot = $("<a></a>").text(jqHeader.text());
                //  prop方法可用于检索DOM的对象属性值
                slot.attr("header_lv",jqHeader.prop("tagName"));
                slot.appendTo($("#sidenav"));
                //console.log(header.parentNode.className);
                /*  用find在母节点下查询,避免判断
            if(header.parentNode.className == "note"){
                slot.appendTo($("#sidenav"));
            }
            */
            }
            //  点哪个子元素就传哪个
            $('#sidenav').on('click','a',function(e){
                let target = e.target;
                let title = $(target).text();
                console.log(":contains("+title+")");
                //  滚动跳转
                let jumper = $(".note").find(":contains("+title+")");
                console.log(jumper);
                $('html,body').animate({scrollTop:jumper.offset().top - 250}, 200);
            });
        }

        function sideNavOnEdit(){
            let nav = $("<div></div>").attr("id","sidenav");
            nav.css("border","3px solid #45a152");
            nav.appendTo($(document.body));
            //console.log($("#content"));
            $("#content").on("focus blur",".article",function(e){
                $("#sidenav").empty();
                //alert("test");
                //  获取事件对象,将target转换为jquery对象
                //console.log($(e.target).find(":header,.DRE-draggable"));
                let headers = $(e.target).find(":header,.DRE-draggable");
                for (let header of headers){
                    let jqHeader = $(header);
                    let title;
                    switch(jqHeader.attr("class")){
                            //  case判断的已经是class名了所以没有.
                        case "DRE-draggable" :
                            //console.log(jqHeader);
                            title = jqHeader.find(".DRE-subject-title").children().text();
                            //console.log(title);
                            break;
                        default :
                            //console.log(header);
                            //console.log(jqHeader.find("[data-text=true]"));
                            title = jqHeader.find("[data-text=true]").text();
                            //let title = "test";
                            //console.log(title);
                    }
                    let slot = $("<a></a>").text(title);
                    slot.attr("header_lv",jqHeader.prop("tagName"));
                    slot.appendTo($("#sidenav"));

                }
                //  点哪个子元素就传哪个
                $('#sidenav').on('click','a',function(e){
                    let target = e.target;
                    let title = $(target).text();
                    //console.log(":contains("+title.trim().replace(/《|》/g,"")+")");
                    //  滚动跳转
                    let jumper = $("#content").find(":contains("+title.trim().replace(/《|》/g,"")+")").last();
                    console.log(jumper);
                    $('html,body').animate({scrollTop:jumper.offset().top - 250}, 200);
                });
            });

        }

        function sidenavPostProcess(){
            //  动态调整上下位置
            //console.log(parseInt($("#sidenav").css("bottom").slice(0,-2)));
            //console.log($("#sidenav").height()/2);
            //console.log(($("#sidenav").css("bottom")-$("#sidenav").height()/2)+"px");
            $("#sidenav").css({"bottom":(parseInt($("#sidenav").css("bottom").slice(0,-2))-$("#sidenav").height()/2)+"px"});
        }

        // Your code here...
        loadStyle();
        bottombarToTop();
        if(/edit/.test(window.location.href)){sideNavOnEdit();}
        else{sideNav();}
        sidenavPostProcess();
    }
)();