revise script and styles for the expandable widget in the dev
guide side nav to allow nested toggle lists. This is necessary
for the new resources docs that have an expandable list nested
in an expandable list.
diff --git a/tools/droiddoc/templates/assets/android-developer-docs.css b/tools/droiddoc/templates/assets/android-developer-docs.css
index 0ab7aab..92163ec 100644
--- a/tools/droiddoc/templates/assets/android-developer-docs.css
+++ b/tools/droiddoc/templates/assets/android-developer-docs.css
@@ -101,10 +101,14 @@
padding: 0;
}
+/*second level (nested) list*/
#side-nav li li li a {
-/*sdk lists*/
padding: 0 0 0 28px;
-}
+}
+/*third level (nested) list*/
+#side-nav li li li li a {
+ padding: 0 0 0 38px;
+}
#side-nav .selected {
background-color: #435a6e;
@@ -121,7 +125,7 @@
display:block;
}
-#side-nav .toggle-img {
+#side-nav .toggle-list .toggle-img {
margin:0;
padding:0;
position:absolute;
@@ -131,8 +135,13 @@
width:15px;
outline-style:none;
}
+/* second-level toggle */
+#side-nav .toggle-list .toggle-list .toggle-img {
+ left:10px;
+}
-#side-nav .closed .toggle-img {
+#side-nav .closed .toggle-img,
+#side-nav .open .closed .toggle-img {
background:url('images/triangle-closed-small.png') 7px 4px no-repeat;
}
#side-nav .open .toggle-img {
@@ -226,7 +235,7 @@
#doc-content {
overflow:auto;
}
-
+
#jd-header {
background-color: #E2E2E2;
padding: 7px 15px;
@@ -559,6 +568,15 @@
font-weight:normal;
}
+.caps {
+ font-variant:small-caps;
+ font-size:1.2em;
+}
+
+dl.tag-list dl.atn-list {
+ padding:0 0 0 2em;
+}
+
.jd-details {
/* border:1px solid #669999;
padding:4px; */
@@ -910,7 +928,7 @@
margin: 12px 0 0 15px;
padding:5px 8px 0 12px;
font-size:90%;
-}
+}
.sidebox p,
.sidebox-inner p {
diff --git a/tools/droiddoc/templates/assets/android-developer-docs.js b/tools/droiddoc/templates/assets/android-developer-docs.js
index dfe8fa1..4f27e0e 100644
--- a/tools/droiddoc/templates/assets/android-developer-docs.js
+++ b/tools/droiddoc/templates/assets/android-developer-docs.js
@@ -193,11 +193,25 @@
if (lastBackstep == 0) break;
}
}
+
+ // add 'selected' to the <li> or <div> that wraps this <a>
link.parent().addClass('selected');
- if (link.parent().parent().is(':hidden')) {
- toggle(link.parent().parent().parent(), false);
- } else if (link.parent().parent().hasClass('toggle-list')) {
- toggle(link.parent().parent(), false);
+
+ // if we're in a toggleable root link (<li class=toggle-list><div><a>)
+ if (link.parent().parent().hasClass('toggle-list')) {
+ toggle(link.parent().parent(), false); // open our own list
+ // then also check if we're in a third-level nested list that's toggleable
+ if (link.parent().parent().parent().is(':hidden')) {
+ toggle(link.parent().parent().parent().parent(), false); // open the super parent list
+ }
+ }
+ // if we're in a normal nav link (<li><a>) and the parent <ul> is hidden
+ else if (link.parent().parent().is(':hidden')) {
+ toggle(link.parent().parent().parent(), false); // open the parent list
+ // then also check if the parent list is also nested in a hidden list
+ if (link.parent().parent().parent().parent().is(':hidden')) {
+ toggle(link.parent().parent().parent().parent().parent(), false); // open the super parent list
+ }
}
}
@@ -335,7 +349,7 @@
});
function toggle(obj, slide) {
- var ul = $("ul", obj);
+ var ul = $("ul:first", obj);
var li = ul.parent();
if (li.hasClass("closed")) {
if (slide) {
@@ -357,7 +371,7 @@
function buildToggleLists() {
$(".toggle-list").each(
function(i) {
- $("div", this).append("<a class='toggle-img' href='#' title='show pages' onClick='toggle(this.parentNode.parentNode, true); return false;'></a>");
+ $("div:first", this).append("<a class='toggle-img' href='#' title='show pages' onClick='toggle(this.parentNode.parentNode, true); return false;'></a>");
$(this).addClass("closed");
});
}
