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.
This commit is contained in:
Scott Main 2009-11-02 15:31:04 -08:00
parent 64b879ac5b
commit 3f7d1df129
1 changed files with 63 additions and 25 deletions

View File

@ -10,6 +10,7 @@ var NAV_PREF_PANELS = "panels";
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 @@ function addLoadEvent(newfun) {
}
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 setToRoot(root) {
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 @@ function writeCookie(cookie, val, section, expiration) {
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 @@ function init() {
}
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 highlightNav(fullPageName) {
}
}
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 @@ function resizeWidth() {
} 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) {