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:
parent
64b879ac5b
commit
3f7d1df129
1 changed files with 63 additions and 25 deletions
|
@ -10,6 +10,7 @@ var NAV_PREF_PANELS = "panels";
|
||||||
var nav_pref;
|
var nav_pref;
|
||||||
var toRoot;
|
var toRoot;
|
||||||
var isMobile = false; // true if mobile, so we can adjust some layout
|
var isMobile = false; // true if mobile, so we can adjust some layout
|
||||||
|
var isIE6 = false; // true if IE6
|
||||||
|
|
||||||
function addLoadEvent(newfun) {
|
function addLoadEvent(newfun) {
|
||||||
var current = window.onload;
|
var current = window.onload;
|
||||||
|
@ -24,17 +25,24 @@ function addLoadEvent(newfun) {
|
||||||
}
|
}
|
||||||
|
|
||||||
var agent = navigator['userAgent'];
|
var agent = navigator['userAgent'];
|
||||||
|
// If a mobile phone, set flag and do mobile setup
|
||||||
if ((agent.indexOf("Mobile") != -1) ||
|
if ((agent.indexOf("Mobile") != -1) ||
|
||||||
(agent.indexOf("BlackBerry") != -1) ||
|
(agent.indexOf("BlackBerry") != -1) ||
|
||||||
(agent.indexOf("Mini") != -1)) {
|
(agent.indexOf("Mini") != -1)) {
|
||||||
isMobile = true;
|
isMobile = true;
|
||||||
addLoadEvent(mobileSetup);
|
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() {
|
function mobileSetup() {
|
||||||
$("body").css({'overflow':'auto'});
|
$("body").css({'overflow':'auto'});
|
||||||
$("html").css({'overflow':'auto'});
|
$("html").css({'overflow':'auto'});
|
||||||
|
@ -60,8 +68,12 @@ function setToRoot(root) {
|
||||||
|
|
||||||
function restoreWidth(navWidth) {
|
function restoreWidth(navWidth) {
|
||||||
var windowWidth = $(window).width() + "px";
|
var windowWidth = $(window).width() + "px";
|
||||||
content.css({marginLeft:parseInt(navWidth) + 6 + "px", //account for 6px-wide handle-bar
|
content.css({marginLeft:parseInt(navWidth) + 6 + "px"}); //account for 6px-wide handle-bar
|
||||||
width:parseInt(windowWidth) - parseInt(navWidth) - 6 + "px"});
|
|
||||||
|
if (isIE6) {
|
||||||
|
content.css({width:parseInt(windowWidth) - parseInt(navWidth) - 6 + "px"}); // necessary in order for scrollbars to be visible
|
||||||
|
}
|
||||||
|
|
||||||
sidenav.css({width:navWidth});
|
sidenav.css({width:navWidth});
|
||||||
resizePackagesNav.css({width:navWidth});
|
resizePackagesNav.css({width:navWidth});
|
||||||
classesNav.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
|
date.setTime(date.getTime()+(10*365*24*60*60*1000)); // default expiration is one week
|
||||||
expiration = date.toGMTString();
|
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() {
|
function init() {
|
||||||
|
@ -124,7 +136,7 @@ function init() {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!isMobile) {
|
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(); } });
|
$(".side-nav-resizable").resizable({handles: "e", resize: function(e, ui) { resizeWidth(); } });
|
||||||
var cookieWidth = readCookie(cookiePath+'width');
|
var cookieWidth = readCookie(cookiePath+'width');
|
||||||
var cookieHeight = readCookie(cookiePath+'height');
|
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 windowHeight = ($(window).height() - HEADER_HEIGHT);
|
||||||
var swapperHeight = windowHeight - 13;
|
var swapperHeight = windowHeight - 13; // move 13px for swapper link at the bottom
|
||||||
$("#swapper").css({height:swapperHeight + "px"});
|
|
||||||
sidenav.css({height:windowHeight + "px"});
|
|
||||||
content.css({height:windowHeight + "px"});
|
|
||||||
resizePackagesNav.css({maxHeight:swapperHeight + "px"});
|
resizePackagesNav.css({maxHeight:swapperHeight + "px"});
|
||||||
classesNav.css({height:swapperHeight - parseInt(resizePackagesNav.css("height")) + "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
|
$("#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 basePath = getBaseUri(location.pathname);
|
||||||
var section = basePath.substring(1,basePath.indexOf("/",1));
|
var section = basePath.substring(1,basePath.indexOf("/",1));
|
||||||
writeCookie("height", resizePackagesNav.css("height"), section, null);
|
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() {
|
function resizeWidth() {
|
||||||
var windowWidth = $(window).width() + "px";
|
var windowWidth = $(window).width() + "px";
|
||||||
if (sidenav.length) {
|
if (sidenav.length) {
|
||||||
|
@ -198,8 +233,12 @@ function resizeWidth() {
|
||||||
} else {
|
} else {
|
||||||
var sidenavWidth = 0;
|
var sidenavWidth = 0;
|
||||||
}
|
}
|
||||||
content.css({marginLeft:parseInt(sidenavWidth) + 6 + "px", //account for 6px-wide handle-bar
|
content.css({marginLeft:parseInt(sidenavWidth) + 6 + "px"}); //account for 6px-wide handle-bar
|
||||||
width:parseInt(windowWidth) - parseInt(sidenavWidth) - 6 + "px"});
|
|
||||||
|
if (isIE6) {
|
||||||
|
content.css({width:parseInt(windowWidth) - parseInt(sidenavWidth) - 6 + "px"}); // necessary in order to for scrollbars to be visible
|
||||||
|
}
|
||||||
|
|
||||||
resizePackagesNav.css({width:sidenavWidth});
|
resizePackagesNav.css({width:sidenavWidth});
|
||||||
classesNav.css({width:sidenavWidth});
|
classesNav.css({width:sidenavWidth});
|
||||||
$("#packages-nav").css({width:sidenavWidth});
|
$("#packages-nav").css({width:sidenavWidth});
|
||||||
|
@ -209,13 +248,12 @@ function resizeWidth() {
|
||||||
writeCookie("width", sidenavWidth, section, null);
|
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() {
|
function resizeAll() {
|
||||||
if (!isMobile) {
|
|
||||||
resizeHeight();
|
resizeHeight();
|
||||||
if ($(".side-nav-resizable").length) {
|
|
||||||
resizeWidth();
|
resizeWidth();
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function getBaseUri(uri) {
|
function getBaseUri(uri) {
|
||||||
|
|
Loading…
Reference in a new issue