depau/HackMD
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Update to add expand and collapse toggle for TOC, keep showing second level TOC if there is only one first level TOC

Browse source
This commit is contained in:
Wu Cheng-Han 2016-08-02 10:54:03 +08:00
parent 881e92b05a
commit b6aa045997
3 changed files with 35 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
public/css/extra.css
View file

@ -154,6 +154,14 @@
color: #767676; color: #767676;
} }
.ui-toc-dropdown .toc.expand ul {
display: block;
}
.ui-toc-dropdown .nav > li:first-child:nth-last-child(1) > ul {
display: block;
}
.ui-toc-dropdown .nav>li>a:focus,.ui-toc-dropdown .nav>li>a:hover { .ui-toc-dropdown .nav>li>a:focus,.ui-toc-dropdown .nav>li>a:hover {
padding-left: 19px; padding-left: 19px;
color: black; color: black;
@ -281,7 +289,7 @@
overflow: auto; overflow: auto;
} }
.back-to-top, .go-to-bottom { .expand-toggle, .back-to-top, .go-to-bottom {
display: block; display: block;
padding: 4px 10px; padding: 4px 10px;
margin-top: 10px; margin-top: 10px;
@ -291,12 +299,12 @@
color: #999; color: #999;
} }
.back-to-top:hover, .back-to-top:focus, .go-to-bottom:hover, .go-to-bottom:focus { .expand-toggle:hover, .expand-toggle:focus, .back-to-top:hover, .back-to-top:focus, .go-to-bottom:hover, .go-to-bottom:focus {
color: #563d7c; color: #563d7c;
text-decoration: none; text-decoration: none;
} }
.go-to-bottom { .back-to-top, .go-to-bottom {
margin-top: 0; margin-top: 0;
} }

2
public/css/html.min.css vendored
View file

File diff suppressed because one or more lines are too long

24
public/js/extra.js
View file

@ -568,6 +568,20 @@ function removeHash() {
history.pushState("", document.title, window.location.pathname + window.location.search); history.pushState("", document.title, window.location.pathname + window.location.search);
} }
var tocExpand = false;
function checkExpandToggle() {
var toc = $('.ui-toc-dropdown .toc');
var toggle = $('.expand-toggle');
if (!tocExpand) {
toc.removeClass('expand');
toggle.text('Expand all');
} else {
toc.addClass('expand');
toggle.text('Collapse all');
}
}
//toc //toc
function generateToc(id) { function generateToc(id) {
var target = $('#' + id); var target = $('#' + id);
@ -581,8 +595,16 @@ function generateToc(id) {
}); });
if (target.text() == 'undefined') if (target.text() == 'undefined')
target.html(''); target.html('');
var toggle = $('<a class="expand-toggle" href="#">Expand all</a>');
var backtotop = $('<a class="back-to-top" href="#">Back to top</a>'); var backtotop = $('<a class="back-to-top" href="#">Back to top</a>');
var gotobottom = $('<a class="go-to-bottom" href="#">Go to bottom</a>'); var gotobottom = $('<a class="go-to-bottom" href="#">Go to bottom</a>');
checkExpandToggle();
toggle.click(function (e) {
e.preventDefault();
e.stopPropagation();
tocExpand = !tocExpand;
checkExpandToggle();
});
backtotop.click(function (e) { backtotop.click(function (e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@ -597,7 +619,7 @@ function generateToc(id) {
scrollToBottom(); scrollToBottom();
removeHash(); removeHash();
}); });
target.append(backtotop).append(gotobottom); target.append(toggle).append(backtotop).append(gotobottom);
} }
//smooth all hash trigger scrolling //smooth all hash trigger scrolling