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
tomjakubowski · Aug 2, 2014 · 88fe6df · 88fe6df
1 parent cd1216a
commit 88fe6df
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 3 deletions.
diff --git a/src/librustdoc/html/render.rs b/src/librustdoc/html/render.rs
@@ -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

diff --git a/src/librustdoc/html/static/main.css b/src/librustdoc/html/static/main.css
@@ -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;
+}
diff --git a/src/librustdoc/html/static/main.js b/src/librustdoc/html/static/main.js
@@ -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);
+    });
+
 }());