Merge change 2146 into donut

* changes:
  Implements the basic structure for providing localized documentation; the site tabs are now in a separate file to ease the translation process, the language selection menu has been added to the header, scripts have been added to dynamically switch the language of the site tabs and dev guide side navigation and save the language preference in a browser cookie, and some of the functions in macro.cs have moved into customization.cs.
This commit is contained in:
Android (Google) Code Review 2009-06-02 11:36:55 -07:00
commit 31dae454b6
5 changed files with 242 additions and 170 deletions

View File

@ -1,45 +1,74 @@
<?cs # This default template file is meant to be replaced. ?>
<?cs # Use the -tempatedir arg to javadoc to set your own directory with a replacement for this file in it. ?>
<?cs # The default search box that goes in the header ?><?cs
def:default_search_box() ?>
<div id="search" >
<div id="searchForm">
<form accept-charset="utf-8" class="gsc-search-box"
onsubmit="return submit_search()">
<table class="gsc-search-box" cellpadding="0" cellspacing="0"><tbody>
<tr>
<td class="gsc-input">
<input id="search_autocomplete" class="gsc-input" type="text" size="33" autocomplete="off"
title="search developer docs" name="q"
value="search developer docs"
onFocus="search_focus_changed(this, true)"
onBlur="search_focus_changed(this, false)"
onkeydown="return search_changed(event, true, '<?cs var:toroot?>')"
onkeyup="return search_changed(event, false, '<?cs var:toroot?>')" />
<div id="search_filtered_div" class="no-display">
<table id="search_filtered" cellspacing=0>
</table>
</div>
</td>
<td class="gsc-search-button">
<input type="submit" value="Search" title="search" id="search-button" class="gsc-search-button" />
</td>
<td class="gsc-clear-button">
<div title="clear results" class="gsc-clear-button">&nbsp;</div>
</td>
</tr></tbody>
</table>
</form>
</div><!-- searchForm -->
</div><!-- search --><?cs
/def ?>
<?cs
def:custom_masthead() ?>
<div id="header">
<div id="headerLeft">
<a href="<?cs var:toroot ?>index.html" tabindex="-1"><img
src="<?cs var:toroot ?>assets/images/bg_logo.png" alt="Android Developers" /></a>
<ul class="<?cs
if:reference ?>reference<?cs
elif:guide ?>guide<?cs
elif:sdk ?>sdk<?cs
elif:home ?>home<?cs
elif:community ?>community<?cs
elif:publish ?>publish<?cs
elif:about ?>about<?cs /if ?>">
<li id="home-link"><a href="<?cs var:toroot ?><?cs
if:android.whichdoc != "online" ?>offline.html<?cs
else ?>index.html<?cs /if ?>">
<span>Home</span></a></li>
<li id="sdk-link"><a href="<?cs var:toroot ?>sdk/<?cs var:sdk.current ?>/index.html"><span>SDK</span></a></li>
<li id="guide-link"><a href="<?cs var:toroot ?>guide/index.html"
onClick="return loadLast('guide')"><span>Dev Guide</span></a></li>
<li id="reference-link"><a href="<?cs var:toroot ?>reference/packages.html"
onClick="return loadLast('reference')"><span>Reference</span></a></li>
<li><a href="http://android-developers.blogspot.com"><span>Blog</span></a></li>
<li id="community-link"><a href="<?cs var:toroot ?>community/index.html"><span>Community</span></a></li>
</ul>
<?cs include:"header_tabs.cs" ?> <?cs # The links are extracted so we can better manage localization ?>
</div>
<div id="headerRight">
<div id="headerLinks">
<!-- <img src="<?cs var:toroot ?>assets/images/icon_world.jpg" alt="" /> -->
<span class="text">
<!-- &nbsp;<a href="#">English</a> | -->
<a href="http://www.android.com">Android.com</a>
</span>
<!-- <img src="<?cs var:toroot ?>assets/images/icon_world.jpg" alt="" /> -->
<span id="language">
<select name="language" onChange="changeLangPref(this.value)">
<option value="en">English</option>
<!-- <option value="ja"></option> -->
</select>
<script type="text/javascript">
<!--
loadLangPref();
//-->
</script>
</span>
<a href="http://www.android.com">Android.com</a>
</div><?cs
call:default_search_box() ?>
</div><!-- headerRight -->
<script type="text/javascript">
<!--
changeTabLang(getLangPref());
//-->
</script>
</div><!-- header --><?cs
/def ?><?cs # custom_masthead ?>
/def ?>
<?cs
def:sdk_nav() ?>
@ -66,22 +95,80 @@ def:guide_nav() ?>
</script>
<?cs /def ?>
<?cs
def:publish_nav() ?>
<div class="g-section g-tpl-180" id="body-content">
<div class="g-unit g-first" id="side-nav">
<div id="devdoc-nav"><?cs
include:"../../../../frameworks/base/docs/html/publish/publish_toc.cs" ?>
</div>
<?cs # The default side navigation for the reference docs ?><?cs
def:default_left_nav() ?>
<div class="g-section g-tpl-240" id="body-content">
<div class="g-unit g-first side-nav-resizable" id="side-nav">
<div id="swapper">
<div id="nav-panels">
<div id="resize-packages-nav">
<div id="packages-nav">
<div id="index-links"><nobr>
<a href="<?cs var:toroot ?>reference/packages.html" <?cs if:(page.title == "Package Index") ?>class="selected"<?cs /if ?> >Package Index</a> |
<a href="<?cs var:toroot ?>reference/classes.html" <?cs if:(page.title == "Class Index") ?>class="selected"<?cs /if ?>>Class Index</a></nobr>
</div>
<ul><?cs
each:pkg=docs.packages ?>
<li <?cs if:(class.package.name == pkg.name) || (package.name == pkg.name)?>class="selected"<?cs /if ?>><?cs call:package_link(pkg) ?></li><?cs
/each ?>
</ul><br/>
</div> <!-- end packages -->
</div> <!-- end resize-packages -->
<div id="classes-nav"><?cs
if:subcount(class.package) ?>
<ul>
<?cs call:list("Interfaces", class.package.interfaces) ?>
<?cs call:list("Classes", class.package.classes) ?>
<?cs call:list("Enums", class.package.enums) ?>
<?cs call:list("Exceptions", class.package.exceptions) ?>
<?cs call:list("Errors", class.package.errors) ?>
</ul><?cs
elif:subcount(package) ?>
<ul>
<?cs call:class_link_list("Interfaces", package.interfaces) ?>
<?cs call:class_link_list("Classes", package.classes) ?>
<?cs call:class_link_list("Enums", package.enums) ?>
<?cs call:class_link_list("Exceptions", package.exceptions) ?>
<?cs call:class_link_list("Errors", package.errors) ?>
</ul><?cs
else ?>
<script>
/*addLoadEvent(maxPackageHeight);*/
</script>
<p style="padding:10px">Select a package to view its members</p><?cs
/if ?><br/>
</div><!-- end classes -->
</div><!-- end nav-panels -->
<div id="nav-tree" style="display:none">
<div id="index-links"><nobr>
<a href="<?cs var:toroot ?>reference/packages.html" <?cs if:(page.title == "Package Index") ?>class="selected"<?cs /if ?> >Package Index</a> |
<a href="<?cs var:toroot ?>reference/classes.html" <?cs if:(page.title == "Class Index") ?>class="selected"<?cs /if ?>>Class Index</a></nobr>
</div>
</div><!-- end nav-tree -->
</div><!-- end swapper -->
</div> <!-- end side-nav -->
<?cs /def ?>
<script>
if (!isMobile) {
$("<a href='#' id='nav-swap' onclick='swapNav();return false;' style='font-size:10px;line-height:9px;margin-left:1em;text-decoration:none;'><span id='tree-link'>Use Tree Navigation</span><span id='panel-link' style='display:none'>Use Panel Navigation</span></a>").appendTo("#side-nav");
chooseDefaultNav();
if ($("#nav-tree").is(':visible')) init_navtree("nav-tree", "<?cs var:toroot ?>", NAVTREE_DATA);
else {
addLoadEvent(function() {
scrollIntoView("packages-nav");
scrollIntoView("classes-nav");
});
}
$("#swapper").css({borderBottom:"2px solid #aaa"});
} else {
swapNav(); // tree view should be used on mobile
}
</script><?cs
/def ?>
<?cs
def:custom_left_nav() ?><?cs
if:guide ?><?cs
call:guide_nav() ?><?cs
elif:publish ?><?cs
call:publish_nav() ?><?cs
elif:sdk ?><?cs
call:sdk_nav() ?><?cs
else ?><?cs

View File

@ -0,0 +1,35 @@
<ul id="header-tabs" class="<?cs
if:reference ?>reference<?cs
elif:guide ?>guide<?cs
elif:sdk ?>sdk<?cs
elif:home ?>home<?cs
elif:community ?>community<?cs
elif:publish ?>publish<?cs
elif:about ?>about<?cs /if ?>">
<li id="home-link"><a href="<?cs var:toroot ?><?cs if:android.whichdoc != "online" ?>offline.html<?cs else ?>index.html<?cs /if ?>">
<span class="en">Home</span>
<span class="ja"></span>
</a></li>
<li id="sdk-link"><a href="<?cs var:toroot ?>sdk/<?cs var:sdk.current ?>/index.html">
<span class="en">SDK</span>
<span class="ja"></span>
</a></li>
<li id="guide-link"><a href="<?cs var:toroot ?>guide/index.html" onClick="return loadLast('guide')">
<span class="en">Dev Guide</span>
<span class="ja"></span>
</a></li>
<li id="reference-link"><a href="<?cs var:toroot ?>reference/packages.html" onClick="return loadLast('reference')">
<span class="en">Reference</span>
<span class="ja"></span>
</a></li>
<li><a href="http://android-developers.blogspot.com">
<span class="en">Blog</span>
<span class="ja"></span>
</a></li>
<li id="community-link"><a href="<?cs var:toroot ?>community/index.html">
<span class="en">Community</span>
<span class="ja"></span>
</a></li>
</ul>

View File

@ -268,20 +268,16 @@ hr.blue {
#headerLinks {
margin:10px 10px 0 0;
height:13px;
}
#headerLinks .text {
text-decoration: none;
color: #7FA9B5;
font-size: 11px;
vertical-align: top;
}
#headerLinks a {
text-decoration: underline;
color: #7FA9B5;
font-size: 11px;
vertical-align: top;
}
#language {
margin:0 10px;
}
#search {

View File

@ -4,7 +4,7 @@ var devdocNav;
var sidenav;
var content;
var HEADER_HEIGHT = 117;
var cookie_style = 'android_developer';
var cookie_namespace = 'android_developer';
var NAV_PREF_TREE = "tree";
var NAV_PREF_PANELS = "panels";
var nav_pref;
@ -70,8 +70,8 @@ function restoreHeight(packageHeight) {
$("#nav-tree").css({height:swapperHeight + "px"});
}
function getCookie(cookie) {
var myCookie = cookie_style+"_"+cookie+"=";
function readCookie(cookie) {
var myCookie = cookie_namespace+"_"+cookie+"=";
if (document.cookie) {
var index = document.cookie.indexOf(myCookie);
if (index != -1) {
@ -87,16 +87,15 @@ function getCookie(cookie) {
return 0;
}
function writeCookie(cookie, val, path, expiration) {
function writeCookie(cookie, val, section, expiration) {
if (!val) return;
var date = new Date();
date.setTime(date.getTime()+(10*365*24*60*60*1000)); // default expiration is one week
expiration = expiration ? expiration : date.toGMTString();
if (location.href.indexOf("/reference/") != -1) {
document.cookie = cookie_style+'_reference_'+cookie+'='+val+'; expires='+expiration+'; path='+'/'+path;
} else if (location.href.indexOf("/guide/") != -1) {
document.cookie = cookie_style+'_guide_'+cookie+'='+val+'; expires='+expiration+'; path='+'/'+path;
section = section == null ? "_" : "_"+section+"_";
if (expiration == null) {
var date = new Date();
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=/";
}
function init() {
@ -116,8 +115,8 @@ function init() {
if (!isMobile) {
$("#resize-packages-nav").resizable({handles: "s", resize: function(e, ui) { resizeHeight(); } });
$(".side-nav-resizable").resizable({handles: "e", resize: function(e, ui) { resizeWidth(); } });
var cookieWidth = getCookie(cookiePath+'width');
var cookieHeight = getCookie(cookiePath+'height');
var cookieWidth = readCookie(cookiePath+'width');
var cookieHeight = readCookie(cookiePath+'height');
if (cookieWidth) {
restoreWidth(cookieWidth);
} else if ($(".side-nav-resizable").length) {
@ -175,7 +174,9 @@ function resizeHeight() {
$("#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"});
writeCookie("height", resizePackagesNav.css("height"), "", null);
var section = location.pathname.substring(1,location.pathname.indexOf("/",1));
writeCookie("height", resizePackagesNav.css("height"), section, null);
}
function resizeWidth() {
@ -190,7 +191,9 @@ function resizeWidth() {
resizePackagesNav.css({width:sidenavWidth});
classesNav.css({width:sidenavWidth});
$("#packages-nav").css({width:sidenavWidth});
writeCookie("width", sidenavWidth, "", null);
var section = location.pathname.substring(1,location.pathname.indexOf("/",1));
writeCookie("width", sidenavWidth, section, null);
}
function resizeAll() {
@ -207,7 +210,7 @@ function loadLast(cookiePath) {
if (location.indexOf("/"+cookiePath+"/") != -1) {
return true;
}
var lastPage = getCookie(cookiePath + "_lastpage");
var lastPage = readCookie(cookiePath + "_lastpage");
if (lastPage) {
window.location = lastPage;
return false;
@ -216,11 +219,11 @@ function loadLast(cookiePath) {
}
$(window).unload(function(){
var href = location.href;
if (href.indexOf("/reference/") != -1) {
writeCookie("lastpage", href, "", null);
} else if (href.indexOf("/guide/") != -1) {
writeCookie("lastpage", href, "", null);
var path = location.pathname;
if (path.indexOf("/reference/") != -1) {
writeCookie("lastpage", path, "reference", null);
} else if (path.indexOf("/guide/") != -1) {
writeCookie("lastpage", path, "guide", null);
}
});
@ -257,7 +260,7 @@ function buildToggleLists() {
}
function getNavPref() {
var v = getCookie('reference_nav');
var v = readCookie('reference_nav');
if (v != NAV_PREF_TREE) {
v = NAV_PREF_PANELS;
}
@ -283,7 +286,7 @@ function swapNav() {
}
var date = new Date();
date.setTime(date.getTime()+(10*365*24*60*60*1000)); // keep this for 10 years
writeCookie("nav", nav_pref, "", date.toGMTString());
writeCookie("nav", nav_pref, null, date.toGMTString());
$("#nav-panels").toggle();
$("#panel-link").toggle();
@ -349,3 +352,57 @@ function toggleAllSummaryInherited(linkObj) {
}
return false;
}
function changeTabLang(lang) {
var nodes = $("#header-tabs").find("."+lang);
for (i=0; i < nodes.length; i++) { // for each node in this language
var node = $(nodes[i]);
node.siblings().css("display","none"); // hide all siblings
if (node.not(":empty").length != 0) { //if this languages node has a translation, show it
node.css("display","inline");
} else { //otherwise, show English instead
node.css("display","none");
node.siblings().filter(".en").css("display","inline");
}
}
}
function changeNavLang(lang) {
var nodes = $("#side-nav").find("."+lang);
for (i=0; i < nodes.length; i++) { // for each node in this language
var node = $(nodes[i]);
node.siblings().css("display","none"); // hide all siblings
if (node.not(":empty").length != 0) { // if this languages node has a translation, show it
node.css("display","inline");
} else { // otherwise, show English instead
node.css("display","none");
node.siblings().filter(".en").css("display","inline");
}
}
}
function changeDocLang(lang) {
changeTabLang(lang);
changeNavLang(lang);
}
function changeLangPref(lang) {
var date = new Date();
date.setTime(date.getTime()+(50*365*24*60*60*1000)); // keep this for 50 years
writeCookie("pref_lang", lang, null, date);
changeDocLang(lang);
}
function loadLangPref() {
var lang = readCookie("pref_lang");
if (lang != 0) {
$("#language").find("option[value='"+lang+"']").attr("selected",true);
}
}
function getLangPref() {
return $("#language").find(":selected").attr("value");
}

View File

@ -233,108 +233,5 @@ def:expandable_class_list(id, classes, default) ?>
</div><?cs
/def ?>
<?cs # The default side navigation for the reference docs ?><?cs
def:default_left_nav() ?>
<div class="g-section g-tpl-240" id="body-content">
<div class="g-unit g-first side-nav-resizable" id="side-nav">
<div id="swapper">
<div id="nav-panels">
<div id="resize-packages-nav">
<div id="packages-nav">
<div id="index-links"><nobr>
<a href="<?cs var:toroot ?>reference/packages.html" <?cs if:(page.title == "Package Index") ?>class="selected"<?cs /if ?> >Package Index</a> |
<a href="<?cs var:toroot ?>reference/classes.html" <?cs if:(page.title == "Class Index") ?>class="selected"<?cs /if ?>>Class Index</a></nobr>
</div>
<ul><?cs
each:pkg=docs.packages ?>
<li <?cs if:(class.package.name == pkg.name) || (package.name == pkg.name)?>class="selected"<?cs /if ?>><?cs call:package_link(pkg) ?></li><?cs
/each ?>
</ul><br/>
</div> <!-- end packages -->
</div> <!-- end resize-packages -->
<div id="classes-nav"><?cs
if:subcount(class.package) ?>
<ul>
<?cs call:list("Interfaces", class.package.interfaces) ?>
<?cs call:list("Classes", class.package.classes) ?>
<?cs call:list("Enums", class.package.enums) ?>
<?cs call:list("Exceptions", class.package.exceptions) ?>
<?cs call:list("Errors", class.package.errors) ?>
</ul><?cs
elif:subcount(package) ?>
<ul>
<?cs call:class_link_list("Interfaces", package.interfaces) ?>
<?cs call:class_link_list("Classes", package.classes) ?>
<?cs call:class_link_list("Enums", package.enums) ?>
<?cs call:class_link_list("Exceptions", package.exceptions) ?>
<?cs call:class_link_list("Errors", package.errors) ?>
</ul><?cs
else ?>
<script>
/*addLoadEvent(maxPackageHeight);*/
</script>
<p style="padding:10px">Select a package to view its members</p><?cs
/if ?><br/>
</div><!-- end classes -->
</div><!-- end nav-panels -->
<div id="nav-tree" style="display:none">
<div id="index-links"><nobr>
<a href="<?cs var:toroot ?>reference/packages.html" <?cs if:(page.title == "Package Index") ?>class="selected"<?cs /if ?> >Package Index</a> |
<a href="<?cs var:toroot ?>reference/classes.html" <?cs if:(page.title == "Class Index") ?>class="selected"<?cs /if ?>>Class Index</a></nobr>
</div>
</div><!-- end nav-tree -->
</div><!-- end swapper -->
</div> <!-- end side-nav -->
<script>
if (!isMobile) {
$("<a href='#' id='nav-swap' onclick='swapNav();return false;' style='font-size:10px;line-height:9px;margin-left:1em;text-decoration:none;'><span id='tree-link'>Use Tree Navigation</span><span id='panel-link' style='display:none'>Use Panel Navigation</span></a>").appendTo("#side-nav");
chooseDefaultNav();
if ($("#nav-tree").is(':visible')) init_navtree("nav-tree", "<?cs var:toroot ?>", NAVTREE_DATA);
else {
addLoadEvent(function() {
scrollIntoView("packages-nav");
scrollIntoView("classes-nav");
});
}
$("#swapper").css({borderBottom:"2px solid #aaa"});
} else {
swapNav(); // tree view should be used on mobile
}
</script><?cs
/def ?>
<?cs # The default search box that goes in the header ?><?cs
def:default_search_box() ?>
<div id="search" >
<div id="searchForm">
<form accept-charset="utf-8" class="gsc-search-box"
onsubmit="return submit_search()">
<table class="gsc-search-box" cellpadding="0" cellspacing="0"><tbody>
<tr>
<td class="gsc-input">
<input id="search_autocomplete" class="gsc-input" type="text" size="33" autocomplete="off"
title="search developer docs" name="q"
value="search developer docs"
onFocus="search_focus_changed(this, true)"
onBlur="search_focus_changed(this, false)"
onkeydown="return search_changed(event, true, '<?cs var:toroot?>')"
onkeyup="return search_changed(event, false, '<?cs var:toroot?>')" />
<div id="search_filtered_div" class="no-display">
<table id="search_filtered" cellspacing=0>
</table>
</div>
</td>
<td class="gsc-search-button">
<input type="submit" value="Search" title="search" id="search-button" class="gsc-search-button" />
</td>
<td class="gsc-clear-button">
<div title="clear results" class="gsc-clear-button">&nbsp;</div>
</td>
</tr></tbody>
</table>
</form>
</div><!-- searchForm -->
</div><!-- search --><?cs
/def ?>
<?cs include:"customization.cs" ?>