Add hide/show detail toggles to rustdoc

All doccomments are now collapsable via a nearby [-] button
Adds [collapse all] and [expand all] buttons to the top of all api pages
Tweaks some layout to accomadate this
This commit is contained in:
Alexis Beingessner 2014-07-30 21:31:34 -04:00
parent cd1216a054
commit 88fe6dfa31
3 changed files with 96 additions and 3 deletions

View File

@ -1316,6 +1316,12 @@ impl<'a> fmt::Show for Item<'a> {
_ => {}
};
try!(write!(fmt,
r##"<span id='render-detail'>
<a id="collapse-all" href="#">[collapse all]</a>
<a id="expand-all" href="#">[expand all]</a>
</span>"##));
// Write `src` tag
//
// When this item is part of a `pub use` in a downstream crate, the

View File

@ -101,7 +101,7 @@ h3.impl, h3.method, h4.method {
h3.impl, h3.method {
margin-top: 15px;
}
h1, h2, h3, h4, section.sidebar, a.source, .search-input, .content table a {
h1, h2, h3, h4, section.sidebar, a.source, .search-input, .content table a, .collapse-toggle {
font-family: "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@ -277,7 +277,10 @@ nav.sub {
}
.content .multi-column li { width: 100%; display: inline-block; }
.content .method { font-size: 1em; }
.content .method {
font-size: 1em;
position: relative;
}
.content .methods .docblock { margin-left: 40px; }
.content .impl-methods .docblock { margin-left: 40px; }
@ -405,7 +408,7 @@ h1 .stability {
padding: 4px 10px;
}
.impl-methods .stability {
.impl-methods .stability, .methods .stability {
margin-right: 20px;
}
@ -476,3 +479,36 @@ pre.rust a { transform: scaleX(-1); }
margin: 0 auto;
}
}
.collapse-toggle {
font-weight: 100;
position: absolute;
left: 13px;
color: #999;
margin-top: 2px;
}
.toggle-wrapper > .collapse-toggle {
left: -24px;
margin-top: 0px;
}
.toggle-wrapper {
position: relative;
}
.toggle-wrapper.collapsed {
height: 1em;
transition: height .2s;
}
.collapse-toggle > .inner {
display: inline-block;
width: 1ch;
text-align: center;
}
.toggle-label {
color: #999;
font-style: italic;
}

View File

@ -730,4 +730,55 @@
if (query['gotosrc']) {
window.location = $('#src-' + query['gotosrc']).attr('href');
}
$("#expand-all").on("click", function() {
$(".docblock").show();
$(".toggle-label").hide();
$(".toggle-wrapper").removeClass("collapsed");
$(".collapse-toggle").children(".inner").html("-");
});
$("#collapse-all").on("click", function() {
$(".docblock").hide();
$(".toggle-label").show();
$(".toggle-wrapper").addClass("collapsed");
$(".collapse-toggle").children(".inner").html("+");
});
$(document).on("click", ".collapse-toggle", function() {
var toggle = $(this);
var relatedDoc = toggle.parent().next();
if (relatedDoc.is(".docblock")) {
if (relatedDoc.is(":visible")) {
relatedDoc.slideUp({duration:'fast', easing:'linear'});
toggle.parent(".toggle-wrapper").addClass("collapsed");
toggle.children(".inner").html("+");
toggle.children(".toggle-label").fadeIn();
} else {
relatedDoc.slideDown({duration:'fast', easing:'linear'});
toggle.parent(".toggle-wrapper").removeClass("collapsed");
toggle.children(".inner").html("-");
toggle.children(".toggle-label").hide();
}
}
});
$(function() {
var toggle = "<a href='javascript:void(0)'"
+ "class='collapse-toggle'>[<span class='inner'>-</span>]</a>";
$(".method").each(function() {
if ($(this).next().is(".docblock")) {
$(this).children().first().after(toggle);
}
});
var mainToggle = $(toggle);
mainToggle.append("<span class='toggle-label' style='display:none'>"
+ "&nbsp;Expand&nbsp;description</span></a>")
var wrapper = $("<div class='toggle-wrapper'>");
wrapper.append(mainToggle);
$("#main > .docblock").before(wrapper);
});
}());