docs: revise resizing scripts to better organize the
tasks into chunks that are only executed when necessary.
Move the stuff that does the reference panel resizing
into a separate method because this should only happen when
literally resizing the panels. This thus resolves the problem
in which an invalid cookie would sometimes be written during
a normal window resize event -- there's no need to write that
cookie unless the user literally resizes the panel.
There's no need to call resizeWidth all the time, the doc-content
div can manage its width by inheritence and should only ever have
to resize its left margin when the side nav is manually resized or
when the page is loaded (in order to account for a saved side nav
width). This vastly improves the performance and visual quality
when resizing. However, IE6 still requires this in order for the scrollbars
to be visible in the content area. So a flag is now set when IE6 is
the browser, it has its own onresize method
and the width is defined only for IE6.
Inside resizeHeight, check what the href path is before doing any
resizing, just to make sure we don't do unecessary work and to
make the code more readable.
diff --git a/tools/droiddoc/templates/assets/android-developer-docs.js b/tools/droiddoc/templates/assets/android-developer-docs.js
index db5e64f..6431163 100644
--- a/tools/droiddoc/templates/assets/android-developer-docs.js
+++ b/tools/droiddoc/templates/assets/android-developer-docs.js
@@ -10,6 +10,7 @@
var nav_pref;
var toRoot;
var isMobile = false; // true if mobile, so we can adjust some layout
+var isIE6 = false; // true if IE6
function addLoadEvent(newfun) {
var current = window.onload;
@@ -24,17 +25,24 @@
}
var agent = navigator['userAgent'];
+// If a mobile phone, set flag and do mobile setup
if ((agent.indexOf("Mobile") != -1) ||
(agent.indexOf("BlackBerry") != -1) ||
(agent.indexOf("Mini") != -1)) {
isMobile = true;
addLoadEvent(mobileSetup);
+// If not a mobile browser, set the onresize event for IE6, and others
+} else if (agent.indexOf("MSIE 6.0") != -1) {
+ isIE6 = true;
+ addLoadEvent(function() {
+ window.onresize = resizeAll;
+ });
+} else {
+ addLoadEvent(function() {
+ window.onresize = resizeHeight;
+ });
}
-addLoadEvent(function() {
-window.onresize = resizeAll;
-});
-
function mobileSetup() {
$("body").css({'overflow':'auto'});
$("html").css({'overflow':'auto'});
@@ -60,8 +68,12 @@
function restoreWidth(navWidth) {
var windowWidth = $(window).width() + "px";
- content.css({marginLeft:parseInt(navWidth) + 6 + "px", //account for 6px-wide handle-bar
- width:parseInt(windowWidth) - parseInt(navWidth) - 6 + "px"});
+ content.css({marginLeft:parseInt(navWidth) + 6 + "px"}); //account for 6px-wide handle-bar
+
+ if (isIE6) {
+ content.css({width:parseInt(windowWidth) - parseInt(navWidth) - 6 + "px"}); // necessary in order for scrollbars to be visible
+ }
+
sidenav.css({width:navWidth});
resizePackagesNav.css({width:navWidth});
classesNav.css({width:navWidth});
@@ -106,7 +118,7 @@
date.setTime(date.getTime()+(10*365*24*60*60*1000)); // default expiration is one week
expiration = date.toGMTString();
}
- document.cookie = cookie_namespace+section+cookie+"="+val+"; expires="+expiration+"; path=/";
+ document.cookie = cookie_namespace + section + cookie + "=" + val + "; expires=" + expiration+"; path=/";
}
function init() {
@@ -124,7 +136,7 @@
}
if (!isMobile) {
- $("#resize-packages-nav").resizable({handles: "s", resize: function(e, ui) { resizeHeight(); } });
+ $("#resize-packages-nav").resizable({handles: "s", resize: function(e, ui) { resizePackagesHeight(); } });
$(".side-nav-resizable").resizable({handles: "e", resize: function(e, ui) { resizeWidth(); } });
var cookieWidth = readCookie(cookiePath+'width');
var cookieHeight = readCookie(cookiePath+'height');
@@ -174,23 +186,46 @@
}
}
-function resizeHeight() {
+/* Resize the height of the nav panels in the reference,
+ * and save the new size to a cookie */
+function resizePackagesHeight() {
var windowHeight = ($(window).height() - HEADER_HEIGHT);
- var swapperHeight = windowHeight - 13;
- $("#swapper").css({height:swapperHeight + "px"});
- sidenav.css({height:windowHeight + "px"});
- content.css({height:windowHeight + "px"});
+ var swapperHeight = windowHeight - 13; // move 13px for swapper link at the bottom
resizePackagesNav.css({maxHeight:swapperHeight + "px"});
classesNav.css({height:swapperHeight - parseInt(resizePackagesNav.css("height")) + "px"});
+
+ $("#swapper").css({height:swapperHeight + "px"});
$("#packages-nav").css({height:parseInt(resizePackagesNav.css("height")) - 6 + "px"}); //move 6px for handle
- devdocNav.css({height:sidenav.css("height")});
- $("#nav-tree").css({height:swapperHeight + "px"});
-
+
var basePath = getBaseUri(location.pathname);
var section = basePath.substring(1,basePath.indexOf("/",1));
writeCookie("height", resizePackagesNav.css("height"), section, null);
}
+/* Resize the height of the side-nav and doc-content divs,
+ * which creates the frame effect */
+function resizeHeight() {
+ // Get the window height and always resize the doc-content and side-nav divs
+ var windowHeight = ($(window).height() - HEADER_HEIGHT);
+ content.css({height:windowHeight + "px"});
+ sidenav.css({height:windowHeight + "px"});
+
+ var href = location.href;
+ // If in the reference docs, also resize the "swapper", "classes-nav", and "nav-tree" divs
+ if (href.indexOf("/reference/") != -1) {
+ var swapperHeight = windowHeight - 13;
+ $("#swapper").css({height:swapperHeight + "px"});
+ $("#classes-nav").css({height:swapperHeight - parseInt(resizePackagesNav.css("height")) + "px"});
+ $("#nav-tree").css({height:swapperHeight + "px"});
+
+ // If in the dev guide docs, also resize the "devdoc-nav" div
+ } else if (href.indexOf("/guide/") != -1) {
+ $("#devdoc-nav").css({height:sidenav.css("height")});
+ }
+}
+
+/* Resize the width of the "side-nav" and the left margin of the "doc-content" div,
+ * which creates the resizable side bar */
function resizeWidth() {
var windowWidth = $(window).width() + "px";
if (sidenav.length) {
@@ -198,24 +233,27 @@
} else {
var sidenavWidth = 0;
}
- content.css({marginLeft:parseInt(sidenavWidth) + 6 + "px", //account for 6px-wide handle-bar
- width:parseInt(windowWidth) - parseInt(sidenavWidth) - 6 + "px"});
+ content.css({marginLeft:parseInt(sidenavWidth) + 6 + "px"}); //account for 6px-wide handle-bar
+
+ if (isIE6) {
+ content.css({width:parseInt(windowWidth) - parseInt(sidenavWidth) - 6 + "px"}); // necessary in order to for scrollbars to be visible
+ }
+
resizePackagesNav.css({width:sidenavWidth});
classesNav.css({width:sidenavWidth});
$("#packages-nav").css({width:sidenavWidth});
-
+
var basePath = getBaseUri(location.pathname);
var section = basePath.substring(1,basePath.indexOf("/",1));
writeCookie("width", sidenavWidth, section, null);
}
+/* For IE6 only,
+ * because it can't properly perform auto width for "doc-content" div,
+ * avoiding this for all browsers provides better performance */
function resizeAll() {
- if (!isMobile) {
- resizeHeight();
- if ($(".side-nav-resizable").length) {
- resizeWidth();
- }
- }
+ resizeHeight();
+ resizeWidth();
}
function getBaseUri(uri) {