Permalink
1 comment
on commit
sign in to comment.
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
with
202 additions
and 124 deletions.
- +4 −41 layout/_partial/toc.ejs
- +1 −81 source/css/_partial/article.styl
- +5 −1 source/css/_partial/mobile.styl
- +86 −0 source/css/_partial/toc.styl
- +5 −0 source/js/main.js
- +1 −1 source/js/pc.js
- +100 −0 source/js/toc.js
| @@ -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 |
| @@ -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]); | ||
|
|
||
| }) |
This comment has been minimized.
85764bbhttp://moxfive.xyz/2015/09/29/duoshuo-style