豆瓣日记页功能优化

复制豆瓣日记编辑栏，互动栏，标签栏到顶部，增加侧栏，在查看/编辑界面点击可跳转到各级标题位置
Wrap lines
// ==UserScript==
// @name         豆瓣日记页功能优化
// @namespace    http://tampermonkey.net/
// @version      0.420
// @description  复制豆瓣日记编辑栏，互动栏，标签栏到顶部，增加侧栏，在查看/编辑界面点击可跳转到各级标题位置
// @author       lpy
// @license MIT
// @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 COLOR = {
            "sidenavOnEdit":"#45a152",
            "sidenav":"#f7c792",
            "sidenavHidden":"#aaaaaa",
        };

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

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

      #snarea {
      position:fixed;
      bottom:40%;
      left:5px;
      }

      #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;
      }

      /*隐藏按钮*/
      #hidebtn {
      height: 10px;
      width: 10px;
      border: 5px solid #aaaaaa;
      }
    `;
        function loadStyle(){
            let style = $("<style></style>").attr("type","text/css").html(STYLE);
            style.appendTo($(document.head));
        };

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

        function sideNav(isOnEdit){
            let navArea = $("<div></div>").attr("id","snarea");
            navArea.appendTo($(document.body));
            let nav = $("<div></div>").attr("id","sidenav");
            /*注意运算顺序
            console.log("3px solid "+ (isOnEdit?COLOR.sidenavOnEdit:COLOR.sidenav));
            */
            nav.css("border","3px solid "+ (isOnEdit?COLOR.sidenavOnEdit:COLOR.sidenav));
            nav.appendTo($("#snarea"));
            //编辑页侧边栏行为
            if(isOnEdit){
                let isNavInit = true;
                $("#content").on("focus keyup",".article",function(e){
                    //指定刷新的触发事件
                    //用blur的时候会和侧栏点击事件冲突，故删除
                    refresh(e);
                    jump(isOnEdit);
                    if(isNavInit == true){
                        sidenavPostProcess();
                        isNavInit = false;
                    }
                });

                function refresh(e){
                    //拆分出的刷新方法
                    $("#sidenav").empty();
                    //  获取事件对象，将target转换为jquery对象
                    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" :
                                    title = jqHeader.find(".DRE-subject-title").children().text();
                                    break;
                                default :
                                    title = jqHeader.find("[data-text=true]").text();
                            }
                            let slot = $("<a></a>").text(title);
                            slot.attr("header_lv",jqHeader.prop("tagName"));
                            slot.appendTo($("#sidenav"));
                        }
                 };
            }

            //浏览页侧边栏行为
            else{
                //  用find复合查询，避免拼接
                let headers = $(".note").find(".title-text,:header");

                for (let header of headers){
                    let jqHeader = $(header);
                    let slot = $("<a></a>").text(jqHeader.text());
                    //  prop方法可用于检索DOM的对象属性值
                    slot.attr("header_lv",jqHeader.prop("tagName"));
                    slot.appendTo($("#sidenav"));
                }
                sidenavPostProcess();
                jump(isOnEdit);
            }

        };

        function jump(isOnEdit){
            //  跳转方法，点哪个子元素就传哪个
            $('#sidenav').on('click','a',function f(e){
                let target = $(e.target);
                let title = target.text();
                target.off(e.type);
                let jumper = isOnEdit?
                    $(".DRE-subject-info").add(":header").find(":contains("+title.trim().replace(/《|》/g,"")+")").last():
                    $(".note").find(":contains("+title.trim().replace(/《|》/g,"")+")").filter(":header,.title-text").last();
                //  滚动跳转
                /* little tip:
                    .stop() animation before playing another.
                    check max and min value of scroll
                */
                $('html,body').stop().animate({scrollTop:jumper.offset().top - 250}, "fast");
                $(target).on(e.type,f);
            });
        };

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

        function hideBtn(isOnEdit){
            let btn = $("<div></div>").attr("id","hidebtn");
            $("#snarea").prepend(btn);
            $('#hidebtn').on('click',function(e){
                if($("#sidenav").is(":visible")){
                    let pos = $("#snarea").position().top;
                    //是offset()而不是offset,offset取不到值的
                    $("#sidenav").hide();
                    let bdc = "";
                    if(isOnEdit){bdc = COLOR.sidenavOnEdit}
                    else{bdc = COLOR.sidenav}
                    $('#hidebtn').css({"border-color":bdc});
                    $('#snarea').css({"top":pos,"bottom":undefined});
                }
                else{
                    $("#sidenav").show();
                    $('#hidebtn').css({"border-color":COLOR.sidenavHidden});
                }
            })
        };

        function sleep(time){
            return new Promise((resolve) => setTimeout(resolve, time));
        };

        /*Main*/
        loadStyle();
        bottombarToTop();
        let isOnEdit = /edit/.test(window.location.href)||/create/.test(window.location.href)?true:false;
        sideNav(isOnEdit);
        hideBtn(isOnEdit);
    }
)();
欢迎访问Greasy Fork镜像
