From e578119466fffebd7667172b28da155c5fbc194b Mon Sep 17 00:00:00 2001 From: Scott Main Date: Wed, 12 Jan 2011 14:33:58 -0800 Subject: [PATCH] docs: implement toggle features for documentation content. There existed another form of this script and styles, but it was not used. Change-Id: I5d3bf0b4f6b8159e8f837692e9b1613aae140e24 --- .../assets/android-developer-docs.css | 32 +++++++++---------- .../assets/android-developer-docs.js | 18 +++++++---- 2 files changed, 27 insertions(+), 23 deletions(-) diff --git a/tools/droiddoc/templates-sdk/assets/android-developer-docs.css b/tools/droiddoc/templates-sdk/assets/android-developer-docs.css index 957b2b0b30..7dd94f9efd 100644 --- a/tools/droiddoc/templates-sdk/assets/android-developer-docs.css +++ b/tools/droiddoc/templates-sdk/assets/android-developer-docs.css @@ -688,22 +688,6 @@ div.special { -webkit-border-radius:5px; } -.toggle-content-toggleme { - display:none; -} - -.toggle-content-button { - font-size:.9em; - line-height:.9em; - text-decoration:none; - position:relative; - top:5px; -} - -.toggle-content-button:hover { - text-decoration:underline; -} - div.special p { margin: .5em 0 0 0; } @@ -840,6 +824,22 @@ p.table-caption { margin: 0 0 0.5em 1em; /* matches default table left-margin */ } + +/* toggle for misc content (such as long sample code) + see toggleContent() script in android-developer-docs.js */ +.toggle-content.closed .toggle-content-toggleme { + display:none; +} + +.toggle-content a { + text-decoration:none; +} + +#jd-content .toggle-content img.toggle-content-img { + margin:0; +} + + /* BEGIN quickview sidebar element styles */ #qv-wrapper { diff --git a/tools/droiddoc/templates-sdk/assets/android-developer-docs.js b/tools/droiddoc/templates-sdk/assets/android-developer-docs.js index 19b7602720..94391fdc0e 100644 --- a/tools/droiddoc/templates-sdk/assets/android-developer-docs.js +++ b/tools/droiddoc/templates-sdk/assets/android-developer-docs.js @@ -575,16 +575,20 @@ function getLangPref() { } +/* Used to hide and reveal supplemental content, such as long code samples. + See the companion CSS in android-developer-docs.css */ function toggleContent(obj) { - var button = $(obj); - var div = $(obj.parentNode); + var div = $(obj.parentNode.parentNode); var toggleMe = $(".toggle-content-toggleme",div); - if (button.hasClass("show")) { + if (div.hasClass("closed")) { // if it's closed, open it toggleMe.slideDown(); - button.removeClass("show").addClass("hide"); - } else { + div.removeClass("closed").addClass("open"); + $(".toggle-content-img", div).attr("title", "hide").attr("src", toRoot + "assets/images/triangle-opened.png"); + } else { // if it's open, close it toggleMe.slideUp(); - button.removeClass("hide").addClass("show"); + div.removeClass("open").addClass("closed"); + $(".toggle-content-img", div).attr("title", "show").attr("src", toRoot + "assets/images/triangle-closed.png"); } - $("span", button).toggle(); + $(".toggle-content-text", obj).toggle(); + return false; }