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.
85764bb
http://moxfive.xyz/2015/09/29/duoshuo-style