Greasy Fork

Greasy Fork is available in English.

豆瓣日记页功能优化

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

当前为 2022-02-10 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         豆瓣日记页功能优化
// @namespace    http://tampermonkey.net/
// @version      0.29
// @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 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($(".note"));
            //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 keyup",".article",function(e){
                //指定刷新的触发事件
                refresh(e);
                jump();
            });
            let refresh = 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"));

                }
                 };
            let jump = function(){
                //  跳转方法,点哪个子元素就传哪个
                $('#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();
    }
)();