1
Fork 0

Refactor doc toggle button label changing

To separate concerns, instead of checking the state of `#toggle-all-docs` by looking at its label text, I add or remove a class `will-expand` depending on whether the button’s next click will expand everything. (The `if` statement’s two branches were swapped as part of this change.)

I moved the desired text values to a function `labelForToggleButton`, so changing the values will be easier. I also note in a comment the other file where the text is duplicated.

To allow the labels of both types of toggle buttons to be uniformly set, I added a `span.inner` to the global button too.

I split the template in `render.rs` into multiple lines to make room for the `span`, and that adds whitespace around the `[` and `]` text elements. That seems to be okay, though – the page still looks the same.

I updated the CSS styling for `.collapse-toggle > .inner` to add a little extra space around the symbol, to make minus signs easier to identify. (`#toggle-all-docs > .inner` does not need the same style, since its text size is bigger, so it naturally puts more space around the symbol.)
This commit is contained in:
Rory O’Kane 2015-05-07 03:53:21 -04:00
parent 6ce05ae6bb
commit 92565b3dfb
3 changed files with 31 additions and 16 deletions

View file

@ -1460,8 +1460,9 @@ impl<'a> fmt::Display for Item<'a> {
try!(write!(fmt, "<span class='out-of-band'>"));
try!(write!(fmt,
r##"<span id='render-detail'>
<a id="toggle-all-docs" href="javascript:void(0)"
title="collapse all docs">[&#x2212;]</a>
<a id="toggle-all-docs" href="javascript:void(0)" title="collapse all docs">
[<span class='inner'>&#x2212;</span>]
</a>
</span>"##));
// Write `src` tag

View file

@ -581,7 +581,7 @@ pre.rust { position: relative; }
.collapse-toggle > .inner {
display: inline-block;
width: 1ch;
width: 1.2ch;
text-align: center;
}

View file

@ -806,22 +806,35 @@
window.location = $('.srclink').attr('href');
}
function labelForToggleButton(sectionIsCollapsed) {
if (sectionIsCollapsed) {
// button will expand the section
return "+";
} else {
// button will collapse the section
// note that this text is also set in the HTML template in render.rs
return "\u2212"; // "\u2212" is '' minus sign
}
}
$("#toggle-all-docs").on("click", function() {
var toggle = $("#toggle-all-docs");
if (toggle.html() == "[\u2212]") {
toggle.html("[+]");
toggle.attr("title", "expand all docs");
$(".docblock").hide();
$(".toggle-label").show();
$(".toggle-wrapper").addClass("collapsed");
$(".collapse-toggle").children(".inner").html("+");
} else {
toggle.html("[\u2212]");
if (toggle.hasClass("will-expand")) {
toggle.removeClass("will-expand");
toggle.children(".inner").text(labelForToggleButton(false));
toggle.attr("title", "collapse all docs");
$(".docblock").show();
$(".toggle-label").hide();
$(".toggle-wrapper").removeClass("collapsed");
$(".collapse-toggle").children(".inner").html("\u2212");
$(".collapse-toggle").children(".inner").text(labelForToggleButton(false));
} else {
toggle.addClass("will-expand");
toggle.children(".inner").text(labelForToggleButton(true));
toggle.attr("title", "expand all docs");
$(".docblock").hide();
$(".toggle-label").show();
$(".toggle-wrapper").addClass("collapsed");
$(".collapse-toggle").children(".inner").text(labelForToggleButton(true));
}
});
@ -835,12 +848,12 @@
if (relatedDoc.is(":visible")) {
relatedDoc.slideUp({duration:'fast', easing:'linear'});
toggle.parent(".toggle-wrapper").addClass("collapsed");
toggle.children(".inner").html("+");
toggle.children(".inner").text(labelForToggleButton(true));
toggle.children(".toggle-label").fadeIn();
} else {
relatedDoc.slideDown({duration:'fast', easing:'linear'});
toggle.parent(".toggle-wrapper").removeClass("collapsed");
toggle.children(".inner").html("\u2212");
toggle.children(".inner").text(labelForToggleButton(false));
toggle.children(".toggle-label").hide();
}
}
@ -848,7 +861,8 @@
$(function() {
var toggle = $("<a/>", {'href': 'javascript:void(0)', 'class': 'collapse-toggle'})
.html("[<span class='inner'>\u2212</span>]");
.html("[<span class='inner'></span>]");
toggle.children(".inner").text(labelForToggleButton(false));
$(".method").each(function() {
if ($(this).next().is(".docblock") ||