Skip to content

Commit

Permalink
feat: collapsible TOC 可折叠目录
Browse files Browse the repository at this point in the history
  • Loading branch information
MOxFIVE committed Jun 5, 2016
1 parent 55b87cb commit 85764bb
Show file tree
Hide file tree
Showing 7 changed files with 202 additions and 124 deletions.
45 changes: 4 additions & 41 deletions layout/_partial/toc.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -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>
82 changes: 1 addition & 81 deletions source/css/_partial/article.styl
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down
6 changes: 5 additions & 1 deletion source/css/_partial/mobile.styl
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down
86 changes: 86 additions & 0 deletions source/css/_partial/toc.styl
Original file line number Diff line number Diff line change
@@ -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
5 changes: 5 additions & 0 deletions source/js/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -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")
Expand Down
2 changes: 1 addition & 1 deletion source/js/pc.js
Original file line number Diff line number Diff line change
Expand Up @@ -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]);
}
});
}
Expand Down
100 changes: 100 additions & 0 deletions source/js/toc.js
Original file line number Diff line number Diff line change
@@ -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]);

})

1 comment on commit 85764bb

@MOxFIVE
Copy link
Owner Author

@MOxFIVE MOxFIVE commented on 85764bb Jun 5, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.