Score
0
Watch 256 Star 1.3K Fork 451

GVP进击的皇虫 / BookStackGoApache-2.0

左侧目录的小三角缩放标识不见了

Open
wslianbo  Opened this issue

输入图片说明

total 2 participants

Comments (4)

cnspray 2019-05-27 15:43

没有这个小三角形确实很不方便,建议作者进行增加,已阅读过的章节,考虑看是不是像小说网站一样,用颜色区分。

cnspray 2019-06-13 21:26

复用作者原有的代码,算是实现了该功能,但不知道是否正确,毕竟我只属于勉强会读不会写代码的那种,截图如下:
实现图
第一步,在default_read.html中引入jstree的js和css

    <link href="{{$.StaticDomain}}/static/jstree/3.3.4/themes/default/style.min.css" rel="stylesheet">
 		
    <link href="{{$.StaticDomain}}/static/nprogress/nprogress.css" rel="stylesheet">
    <link href="{{$.StaticDomain}}/static/css/jstree.css" rel="stylesheet">

<script src="{{$.StaticDomain}}/static/js/jquery.form.js" type="text/javascript"></script>
<script src="{{$.StaticDomain}}/static/jstree/3.3.4/jstree.min.js" type="text/javascript"></script>
<script type="text/javascript" src="{{$.StaticDomain}}/static/nprogress/nprogress.js"></script>

第二步,修改default_read.html,找到

为<div class="article-menu-detail" >增加 id="sidebar"
<div class="article-menu-detail" id="sidebar">

第三步,修改bookstack.css

将
.article-menu a{display: block;white-space: nowrap;line-height: 234%;color: #666666;}
.article-menu a:hover{color: #008cff;}
.article-menu a.jstree-clicked,.article-menu a.active{color:#008cff !important;}
.article-menu .readed>a:first-child{color: #999999;}
.article-menu .readed>a:first-child:before{content:url("../images/readed.png");margin-left: -19px;
    position: relative;top: 3px;margin-right: 3px;}

修改为
.article-menu a{white-space: nowrap;line-height: 234%;color: #666666;}
.article-menu a:hover{color: #008cff;}
.article-menu a.jstree-clicked,.article-menu a.active{color:#008cff !important;}
.article-menu .readed>a{color: #999999;}
.article-menu .readed>a:before{content:url("../images/readed.png");
    position: relative;top: 3px;margin-right: 3px;}

第四步,修改bookstack.js

修改
function active_readed_menu(url) {
    var links = $(".article-menu-detail a");
    var href = "";
    $.each(links,
    function() {
        href = $(this).attr("href");
        if (href == url) {
            $(this).addClass("jstree-clicked");
            $(this).parent().addClass("readed");
        } else {
            $(this).removeClass("jstree-clicked");
        }
    });

    if ($(".article-menu-detail").css("display") != "none") {
        var offset_top = $(".article-menu-detail a.jstree-clicked").offset().top;
        var scroll_top = $('.article-menu').scrollTop();
        $('.article-menu').animate({scrollTop: scroll_top + offset_top - 180},300);
    }  //解决搜索页面报错offset()未定义和位置自动滚动问题。
    if ($(".search-result").css("display") != "none") {
        var offset_top = $(".search-result a.active").offset().top;
        var scroll_top = $('.article-menu').scrollTop();
        $('.article-menu').animate({scrollTop: scroll_top + offset_top - 180},300);
    } //解决正常阅读界面报错offset()未定义和位置自动滚动问题。
}


增加

window.jsTree = $("#sidebar").jstree({
     'plugins':["wholerow","types"],
     "types": {
         "default" : {
             "icon" : false  // 删除默认图标
         }
     },
     'core' : {
         'check_callback' : true,
         "multiple" : false ,
         'animation' : 0
     }
 }).on('select_node.jstree',function (node,selected,event) {
     $(".m-manual").removeClass('manual-mobile-show-left');
     var url = selected.node.a_attr.href;

     if(url === window.location.href){
         return false;
     }
     load_doc(url);//使用作者新load_doc函数

 });

增加
//这个主要是解决上一章,下一章目录无法刷新的问题。
 $(".hung-read-link a").click(function (e) {
 //使用笨方法解决无刷新的问题。
     var $selector=$('a.jstree-anchor[href="'+$(this).attr("href")+'"]');
     if($selector.length>0){
         e.preventDefault();
         var CurSelector=$('a.jstree-anchor[href="'+$(this).attr("href")+'"]');
         if (CurSelector.parent().hasClass("jstree-closed")){
             CurSelector.parent().find(".jstree-icon").trigger("click");
         }
         $('a.jstree-anchor[href="'+$(this).attr("href")+'"]').trigger("click");
     }
 });

    $(".navg-item[data-mode]").on("click",function () {
        var mode = $(this).data('mode');
        $(this).siblings().removeClass('active').end().addClass('active');
        $(".m-manual").removeClass("manual-mode-view manual-mode-collect manual-mode-search").addClass("manual-mode-" + mode);
    });

至此,算是实现了上图功能。
至于jstree确实存在加载慢的问题,内网使用不存在该问题,如在互联网使用,可考虑使用ztree插件。

此方法已知BUG
一、打开文档时,当打开的文档为1-2目录时,在刷新后?wd参数为空;
二、会报下图错误

输入图片说明

cnspray 2019-06-24 08:27

在bookstack.js最后加上这个,可以解决问题,估计是加载速度的问题。PS:jstree不能加载插件"state",否则会记录之前的历史情况。

注释掉原有的:$('.article-menu').animate({scrollTop:$('.article-menu a.jstree-clicked').offset().top-180}, 300);
$(window).load(function(){
	  pre_and_next_link();
   $('.article-menu').animate({scrollTop:$('.article-menu a.jstree-clicked').offset().top-180}, 300);
 }); 

cnspray 2019-06-26 13:52

// 左右方向键,切换上下章节
    $(document).keydown(function(event) {
    switch (event.keyCode) {
    case 37:
        var href = $(".hung-pre a").attr("href");
        console.log("left", href);
        if (!$(".hung-pre").hasClass("hidden") && href != "#") {
            var CurSelector = $('a.jstree-anchor[href="' + href + '"]');
            if (CurSelector.parent().hasClass("jstree-closed")) {
                CurSelector.parent().find(".jstree-icon").trigger("click");
            }
            $('a.jstree-anchor[href="' + href + '"]').trigger("click");

        }
        break;
    case 39:
        var href = $(".hung-next a").attr("href");
        console.log("right", href);
        if (!$(".hung-next").hasClass("hidden") && href != "#") {
            var CurSelector = $('a.jstree-anchor[href="' + href + '"]');
            if (CurSelector.parent().hasClass("jstree-closed")) {
                CurSelector.parent().find(".jstree-icon").trigger("click");
            }
            $('a.jstree-anchor[href="' + href + '"]').trigger("click");
        }
        break;
    };
	});

Sign in to comment

Assignees
Labels
Not set
Projects
Milestones
Branches
Planed to start
Not set
Planed to end
Not set
Top level
Priority
Go
1
https://gitee.com/truthhun/BookStack.git
git@gitee.com:truthhun/BookStack.git
truthhun
BookStack
BookStack

Search