Permalink
Browse files

feat: collapsible TOC 可折叠目录

1 parent 55b87cb commit 85764bbf482c78d819f8ca87bf9fe390d523dd3b @MOxFIVE committed Jun 5, 2016
@@ -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>
@@ -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%;
@@ -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;
@@ -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
View
@@ -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")
View
@@ -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]);
}
});
}
View
@@ -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

Please sign in to comment.