feat: collapsible TOC 可折叠目录

MOxFIVE · Jun 5, 2016 · 85764bbf482c78d819f8ca87bf9fe390d523dd3b · 85764bb · MOxFIVE · Jun 5, 2016
1 parent 55b87cb
commit 85764bbf482c78d819f8ca87bf9fe390d523dd3b
diff --git a/layout/_partial/toc.ejs b/layout/_partial/toc.ejs
@@ -3,51 +3,14 @@
    <%- toc(post.content) %>
 </div>
 <style>
-    .left-col .switch-btn {
-        display: none;
-    }
+    .left-col .switch-btn,
    .left-col .switch-area {
        display: none;
    }
 </style>

 <input type="button" id="tocButton" value="<%= __('toc.hide') %>"  title="<%= __('tooltip.tocButton') %>">
-<script>
-    var valueHide = "<%= __('toc.hide') %>";
-    var valueShow = "<%= __('toc.show') %>";
-
-    if ($(".left-col").is(":hidden")) {
-        $("#tocButton").attr("value", valueShow);
-    }

-    $("#tocButton").click(function() {
-        if ($("#toc").is(":hidden")) {
-            $("#tocButton").attr("value", valueHide);
-            $("#toc").slideDown(320);
-            $(".switch-btn, .switch-area").fadeOut(300);
-        }
-        else {
-            $("#tocButton").attr("value", valueShow);
-            $("#toc").slideUp(350);
-            $(".switch-btn, .switch-area").fadeIn(500);
-        }
-    })
-
-    if ($(".toc").length < 1) {
-        $("#toc, #tocButton").hide();
-        $(".switch-btn, .switch-area").show();
-    }
-</script>
-
-<% if (theme.toc_nowrap) { %>
-    <script>
-        $(".toc li a").each(function(){
-            var title = $(this).find('.toc-text').text();
-            // Find elements with ellipsis
-            if (this.offsetWidth < this.scrollWidth) {
-                $(this).attr("title", title);
-                if (!!$().tooltip) { $(this).tooltip() }
-            }
-        })
-    </script>
-<% } %>
+<script>
+    yiliaConfig.toc = ["<%= __('toc.hide') %>", "<%= __('toc.show') %>", !!"<%= theme.toc_nowrap %>"];
+</script>
diff --git a/source/css/_partial/article.styl b/source/css/_partial/article.styl
@@ -348,87 +348,7 @@ li:hover {
    };
 }

-/*toc*/
-#tocButton {
-    position: fixed;
-    border: none;
-    left: left-col-width - 80px;
-    top: toc-top + 7;
-    background: none;
-    font-size: .9em;
-    font-weight: bold;
-    color: lightgray;
-    cursor: pointer
-    font-family: inherit;
-    outline: none; /*Remove button border when clicked.*/
-    -webkit-appearance: none; /*Remove iOS button style*/
-    &:hover {
-        color: #88acdb;
-    }
-}
-.toc-article {
-  position: fixed;
-  width: left-col-width - 70px;
-  top: toc-top;
-  bottom: 1em;
-  left: 0;
-  margin-left: 0em;
-  padding: 6px 10px 10px 50 - (base-font-size - 16)*2;
-  border-radius: 2.8%;
-  overflow: auto;
-}
-#toc {
-    float: right;
-    font-size: .9rem;
-    line-height: 1.65em;
-    a {
-        color: gray;
-        &:visited {
-            color: rgba(244, 131, 133, 1);
-        } 
-        &:hover {
-            color: #88acdb;
-            text-decoration: none;
-        }
-    }
-    li:hover {
-        background: none;
-        li:hover {
-            background: rgba(158, 188, 226, .21);
-        }
-    }
-    .toc-title {
-        font-weight: bold;
-        color: gray;
-    }
-    .toc {
-        padding: .7em;
-        padding-right: 0;
-        li {
-            list-style-type: none;
-        }
-    }
-    ol {
-        margin-left: 0;
-    }
-    .toc-child {
-        padding-left: 1.25em;
-        margin: 4px 0; 
-    }
-    .toc-link:hover {
-        background: rgba(158, 188, 226, .21);
-    }
-}
-if hexo-config("toc_nowrap")
-    #toc .toc-link 
-        display inline-block
-        width 100% 
-        text-overflow ellipsis
-        white-space nowrap
-        overflow-x hidden
-    li.toc-item
-        line-height: 1.45em
-
+@import "toc"

 .copyright {
    width: 85%;
diff --git a/source/css/_partial/mobile.styl b/source/css/_partial/mobile.styl
@@ -241,6 +241,10 @@
    line-height: 1.25em;
    .toc-title {
        display: none;
+        padding: .3em;
+        color: white;
+        background: lightgray;
+        border-radius 3px
    }
    .toc {
        padding: 0.5em;
@@ -249,7 +253,7 @@
        margin: 0;
        padding: 0.5em;
        border-radius: 5px;
-        background: rgba(255, 255, 255, .75);
+        background: rgba(255, 255, 255, .85);
        ol {
            padding: 0.1em 0;
            padding-left: 1.2em;
diff --git a/source/css/_partial/toc.styl b/source/css/_partial/toc.styl
@@ -0,0 +1,86 @@
+#tocButton 
+    position fixed
+    left left-col-width - 80px
+    top toc-top + 7
+    font-size .9em
+    font-weight bold
+    font-family inherit
+    color lightgray
+    cursor pointer
+    background none
+    border none
+    outline none
+    -webkit-appearance none
+    &:hover 
+        color: #88acdb
+
+.toc-article 
+    position fixed
+    width left-col-width - 70px
+    top toc-top
+    bottom 1em
+    left 0
+    margin-left 0
+    padding 6px 10px 10px 50 - (base-font-size - 16)*2
+    border-radius 2.8%
+    overflow auto
+
+#toc 
+    font-size .9rem
+    line-height 1.65em
+    .toc-title 
+        font-weight bold
+        color gray
+        &.clickable 
+            cursor pointer
+            &:hover 
+              color #88acdb
+            &:active 
+              color lightgray
+
+    ol.toc
+        margin-left 0 
+        padding .7em
+        padding-right 0
+        li.toc-item
+            list-style-type none
+            i
+                display inline-block
+                margin-left -.9em
+                width .9em
+                color hsl(0, 0%, 70%)
+                font-weight: bold
+                cursor pointer
+                &:hover
+                    color black
+            i.hide
+                display none
+            &:hover 
+                background none
+
+        a.toc-link
+            color: gray
+            &:visited 
+                color rgba(244, 131, 133, 1)
+            &:hover 
+                color #88acdb
+                text-decoration none
+                background rgba(158, 188, 226, .21)
+
+        ol.toc-child
+            padding-left 1.25em
+            margin 4px 0 
+
+
+    if hexo-config("toc_nowrap")
+        a.toc-link 
+            display inline-block
+            width 100% 
+            text-overflow ellipsis
+            white-space nowrap
+            overflow-x hidden
+        li.toc-item
+            line-height: 1.45em
+            & > i
+                position: relative
+                bottom: .35em
diff --git a/source/js/main.js b/source/js/main.js
@@ -145,6 +145,11 @@ require([], function (){

    }

+    // TOC
+    if (yiliaConfig.toc) {
+        require(['toc'], function(){ })
+    }
+
    //是否新窗口打开链接
    if(yiliaConfig.open_in_new == true){
        $(".article a[href]").attr("target", "_blank")
diff --git a/source/js/pc.js b/source/js/pc.js
@@ -98,7 +98,7 @@ define([], function(){
                    $("#toc, #tocButton").toggle(200, function() {
                        if ($(".switch-area").is(":visible")) {
                            $("#toc, .switch-btn, .switch-area").toggle();
-                            $("#tocButton").attr("value", valueHide);
+                            $("#tocButton").attr("value", yiliaConfig.toc[0]);
                            }
                        });
                }
diff --git a/source/js/toc.js b/source/js/toc.js
@@ -0,0 +1,100 @@
+define(function (){
+
+    var toggleTocArea = function(){
+        var valueHide = yiliaConfig.toc[0];
+        var valueShow = yiliaConfig.toc[1];
+        if ($(".left-col").is(":hidden")) {
+            $("#tocButton").attr("value", valueShow);
+        }
+        $("#tocButton").click(function() {
+            if ($("#toc").is(":hidden")) {
+                $("#tocButton").attr("value", valueHide);
+                $("#toc").slideDown(320);
+                $(".switch-btn, .switch-area").fadeOut(300);
+            }
+            else {
+                $("#tocButton").attr("value", valueShow);
+                $("#toc").slideUp(350);
+                $(".switch-btn, .switch-area").fadeIn(500);
+            }
+        })
+    }()
+
+    var HideTOCifNoHeader = function(){
+        if (!$(".toc").length) {
+            $("#toc, #tocButton").hide();
+            $(".switch-btn, .switch-area").show();
+        }
+    }()
+
+    var $itemHasChild = $("#toc .toc-item:has(> .toc-child)");
+    var $titleHasChild = $itemHasChild.children(".toc-link");
+    $itemHasChild.prepend("<i class='fa fa-caret-down'></i><i class='fa fa-caret-right'></i>");
+
+    var clickIcon = function(){
+        $("#toc .toc-item > i").click(function(){
+            $(this).siblings(".toc-child").slideToggle(100);
+            $(this).toggleClass("hide");
+            $(this).siblings("i").toggleClass("hide");
+        })
+    }()
+
+    var clickTitle = function(){
+        $titleHasChild.dblclick(function(){
+            $(this).siblings(".toc-child").hide(100);
+            $(this).siblings("i").toggleClass("hide");
+        })
+        // After dblclick enent
+        $titleHasChild.click(function(){
+            var $curentTocChild = $(this).siblings(".toc-child");
+            if ($curentTocChild.is(":hidden")) {
+                $curentTocChild.show(100);
+                $(this).siblings("i").toggleClass("hide");
+            }
+        })
+    }()
+
+    var clickTocTitle = function(){
+        var $iconToExpand = $(".toc-item > .fa-caret-right");
+        var $iconToFold = $(".toc-item > .fa-caret-down");
+        var $subToc = $titleHasChild.next(".toc-child");
+        $iconToExpand.addClass("hide");
+
+        var $tocTitle = $("#toc .toc-title");
+        if ($titleHasChild.length) {
+            $tocTitle.addClass("clickable");
+            $tocTitle.click(function(){
+                if ($subToc.is(":hidden")) {
+                    $subToc.show(150);
+                    $iconToExpand.removeClass("hide");
+                    $iconToFold.addClass("hide");
+                } else {
+                    $subToc.hide(100);
+                    $iconToExpand.addClass("hide");
+                    $iconToFold.removeClass("hide");
+                }
+            })
+            // TOC on mobile
+            if ($(".left-col").is(":hidden")) {
+                $("#container .toc-article .toc").css("padding-left", "1.4em");
+                $("#container .toc-article .toc-title").css("display", "initial");
+            }
+        }
+    }()
+
+    var TocNoWarp = function(cond){
+        if (cond) {
+            var $tocLink = $(".toc li a");
+            $tocLink.each(function(){
+                var title = $(this).find('.toc-text').text();
+                // Find elements with ellipsis
+                if (this.offsetWidth < this.scrollWidth) {
+                    $(this).attr("title", title);
+                    if (!!$().tooltip) { $(this).tooltip() }
+                }
+            })
+        }
+    }
+    TocNoWarp(yiliaConfig.toc[2]);
+
+})