am 08032409: Add basic support for rendering dynamic content on pages.

* commit '08032409b4dd29740e1c8e703eada0d1ce86e58c':
  Add basic support for rendering dynamic content on pages.
This commit is contained in:
Dirk Dougherty 2014-04-02 23:32:20 +00:00 committed by Android Git Automerger
commit 812d3d478b
10 changed files with 2380 additions and 199 deletions

File diff suppressed because it is too large Load Diff

Binary file not shown.

After

Width:  |  Height:  |  Size: 164 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 202 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 198 B

View File

@ -167,10 +167,12 @@ $(document).ready(function() {
// highlight Design tab
if ($("body").hasClass("design")) {
$("#header li.design a").addClass("selected");
$("#sticky-header").addClass("design");
// highlight Develop tab
} else if ($("body").hasClass("develop") || $("body").hasClass("google")) {
$("#header li.develop a").addClass("selected");
$("#sticky-header").addClass("develop");
// In Develop docs, also highlight appropriate sub-tab
var rootDir = pagePathOriginal.substring(1,pagePathOriginal.indexOf('/', 1));
if (rootDir == "training") {
@ -195,8 +197,26 @@ $(document).ready(function() {
// highlight Distribute tab
} else if ($("body").hasClass("distribute")) {
$("#header li.distribute a").addClass("selected");
}
$("#sticky-header").addClass("distribute");
var baseFrag = pagePathOriginal.indexOf('/', 1) + 1;
var secondFrag = pagePathOriginal.substring(baseFrag, pagePathOriginal.indexOf('/', baseFrag));
if (secondFrag == "users") {
$("#nav-x li.users a").addClass("selected");
} else if (secondFrag == "engage") {
$("#nav-x li.engage a").addClass("selected");
} else if (secondFrag == "monetize") {
$("#nav-x li.monetize a").addClass("selected");
} else if (secondFrag == "tools") {
$("#nav-x li.disttools a").addClass("selected");
} else if (secondFrag == "stories") {
$("#nav-x li.stories a").addClass("selected");
} else if (secondFrag == "essentials") {
$("#nav-x li.essentials a").addClass("selected");
} else if (secondFrag == "googleplay") {
$("#nav-x li.googleplay a").addClass("selected");
}
}
// set global variable so we can highlight the sidenav a bit later (such as for google reference)
// and highlight the sidenav
mPagePath = pagePath;
@ -906,6 +926,86 @@ function writeCookie(cookie, val, section, expiration) {
/*
* Displays sticky nav bar on pages when dac header scrolls out of view
*/
(function() {
$(document).ready(function() {
// Sticky nav position
var stickyTop = $('#header-wrapper').outerHeight();
var sticky = false;
var hiding = false;
var $stickyEl = $('#sticky-header');
var $menuEl = $('.menu-container');
//var scrollThrottle = -1;
var lastScroll = 0;
var autoScrolling = false;
$(window).scroll(function() {
var top = $(window).scrollTop();
if (sticky && top < stickyTop) {
sticky = false;
hiding = true;
$stickyEl.css({'opacity': 0});
setTimeout(function() {
$menuEl.removeClass('sticky-menu');
$stickyEl.hide();
hiding = false;
}, 250);
} else if (!sticky && top >= stickyTop) {
sticky = true;
$stickyEl.show();
$menuEl.addClass('sticky-menu');
setTimeout(function() {
$stickyEl.css({'opacity': 1});
}, 10);
// If its a jump then make sure to modify the scroll because of the
// sticky nav
if (!autoScrolling && Math.abs(top - lastScroll > 100)) {
autoScrolling = true;
$('body,html').animate({scrollTop:(top = top - 60)}, '250', 'swing', function() { autoScrolling = false; });
}
} else if (hiding && top < 15) {
$menuEl.removeClass('sticky-menu');
$stickyEl.hide();
hiding = false;
}
lastScroll = top;
});
// Stack hover states
$('.section-card-menu').each(function(index, el) {
var height = $(el).height();
$(el).css({height:height+'px', position:'relative'});
var $cardInfo = $(el).find('.card-info');
$cardInfo.css({position: 'absolute', bottom:'0px', left:'0px', right:'0px', overflow:'visible'});
});
// Auto scroll anchors and account for sticky nav
$('a[href^=#]').click(function(e){
e.preventDefault();
var tmp = $.attr(this, 'href').substr(1);
var el = document.getElementById(tmp) ||
((tmp = document.getElementsByName(tmp)).length ?
tmp[0] : null);
if (el) {
var top = $(el).offset().top - 60;
autoScrolling = true;
$('body,html').animate({scrollTop:top}, '500', 'swing', function() { autoScrolling = false; });
}
});
});
})();
@ -1724,6 +1824,7 @@ function search_changed(e, kd, toroot)
$('.suggest-card').hide();
if ($("#searchResults").is(":hidden") && (search.value != "")) {
// if results aren't showing (and text not empty), return true to allow search to execute
$('body,html').animate({scrollTop:0}, '500', 'swing', function() { autoScrolling = false; });
return true;
} else {
// otherwise, results are already showing, so allow ajax to auto refresh the results
@ -3233,3 +3334,603 @@ function showSamples() {
$("#samples").append($ul);
}
/* ########################################################## */
/* ################### RESOURCE CARDS ##################### */
/* ########################################################## */
/** Handle resource queries, collections, and grids (sections). Requires
jd_tag_helpers.js and the *_unified_data.js to be loaded. */
(function() {
// Prevent the same resource from being loaded more than once per page.
var addedPageResources = {};
$(document).ready(function() {
$('.resource-widget').each(function() {
initResourceWidget(this);
});
// Might remove this, but adds ellipsis to card descriptions rather
// than just cutting them off, not sure if it performs well
$('.card-info .text').ellipsis();
});
/*
Three types of resource layouts:
Flow - Uses a fixed row-height flow using float left style.
Carousel - Single card slideshow all same dimension absoute.
Stack - Uses fixed columns and flexible element height.
*/
function initResourceWidget(widget) {
var $widget = $(widget);
var isFlow = $widget.hasClass('resource-flow-layout'),
isCarousel = $widget.hasClass('resource-carousel-layout'),
isStack = $widget.hasClass('resource-stack-layout');
// find size of widget by pulling out its class name
var sizeCols = 1;
var m = $widget.get(0).className.match(/\bcol-(\d+)\b/);
if (m) {
sizeCols = parseInt(m[1], 10);
}
var opts = {
cardSizes: ($widget.data('cardsizes') || '').split(','),
maxResults: parseInt($widget.data('maxresults') || '100', 10),
itemsPerPage: $widget.data('itemsperpage'),
sortOrder: $widget.data('sortorder'),
query: $widget.data('query'),
section: $widget.data('section'),
sizeCols: sizeCols
};
// run the search for the set of resources to show
var resources = buildResourceList(opts);
if (isFlow) {
drawResourcesFlowWidget($widget, opts, resources);
} else if (isCarousel) {
drawResourcesCarouselWidget($widget, opts, resources);
} else if (isStack) {
var sections = buildSectionList(opts);
opts['numStacks'] = $widget.data('numstacks');
drawResourcesStackWidget($widget, opts, resources, sections);
}
}
/* Initializes a Resource Carousel Widget */
function drawResourcesCarouselWidget($widget, opts, resources) {
$widget.empty();
$widget.addClass('resource-card slideshow-container')
.append($('<a>').addClass('slideshow-prev').text('Prev'))
.append($('<a>').addClass('slideshow-next').text('Next'));
var css = { 'width': $widget.width() + 'px',
'height': $widget.height() + 'px' };
var $ul = $('<ul>');
for (var i = 0; i < resources.length; ++i) {
//keep url clean for matching and offline mode handling
var urlPrefix = resources[i].url.indexOf("//") > -1 ? "" : toRoot;
var $card = $('<a>')
.attr('href', urlPrefix + resources[i].url)
.decorateResourceCard(resources[i]);
$('<li>').css(css)
.append($card)
.appendTo($ul);
}
$('<div>').addClass('frame')
.append($ul)
.appendTo($widget);
$widget.dacSlideshow({
auto: true,
btnPrev: '.slideshow-prev',
btnNext: '.slideshow-next'
});
};
/* Initializes a Resource Card Stack Widget (column-based layout) */
function drawResourcesStackWidget($widget, opts, resources, sections) {
// Don't empty widget, grab all items inside since they will be the first
// items stacked, followed by the resource query
var cards = $widget.find('.resource-card').detach().toArray();
var numStacks = opts.numStacks || 1;
var $stacks = [];
var urlString;
for (var i = 0; i < numStacks; ++i) {
$stacks[i] = $('<div>').addClass('resource-card-stack')
.appendTo($widget);
}
var sectionResources = [];
// Extract any subsections that are actually resource cards
for (var i = 0; i < sections.length; ++i) {
if (!sections[i].sections || !sections[i].sections.length) {
//keep url clean for matching and offline mode handling
urlPrefix = sections[i].url.indexOf("//") > -1 ? "" : toRoot;
// Render it as a resource card
sectionResources.push(
$('<a>')
.addClass('resource-card section-card')
.attr('href', urlPrefix + sections[i].resource.url)
.decorateResourceCard(sections[i].resource)[0]
);
} else {
cards.push(
$('<div>')
.addClass('resource-card section-card-menu')
.decorateResourceSection(sections[i])[0]
);
}
}
cards = cards.concat(sectionResources);
for (var i = 0; i < resources.length; ++i) {
//keep url clean for matching and offline mode handling
urlPrefix = resources[i].url.indexOf("//") > -1 ? "" : toRoot;
var $card = $('<a>')
.addClass('resource-card related-card')
.attr('href', urlPrefix + resources[i].url)
.decorateResourceCard(resources[i]);
cards.push($card[0]);
}
for (var i = 0; i < cards.length; ++i) {
// Find the stack with the shortest height, but give preference to
// left to right order.
var minHeight = $stacks[0].height();
var minIndex = 0;
for (var j = 1; j < numStacks; ++j) {
var height = $stacks[j].height();
if (height < minHeight - 45) {
minHeight = height;
minIndex = j;
}
}
$stacks[minIndex].append($(cards[i]));
}
};
/* Initializes a flow widget, see distribute.scss for generating accompanying css */
function drawResourcesFlowWidget($widget, opts, resources) {
$widget.empty();
var cardSizes = opts.cardSizes || ['6x6'];
var i = 0, j = 0;
while (i < resources.length) {
var cardSize = cardSizes[j++ % cardSizes.length];
cardSize = cardSize.replace(/^\s+|\s+$/,'');
// A stack has a third dimension which is the number of stacked items
var isStack = cardSize.match(/(\d+)x(\d+)x(\d+)/);
var stackCount = 0;
var $stackDiv = null;
if (isStack) {
// Create a stack container which should have the dimensions defined
// by the product of the items inside.
$stackDiv = $('<div>').addClass('resource-card-stack resource-card-' + isStack[1]
+ 'x' + isStack[2] * isStack[3]) .appendTo($widget);
}
// Build each stack item or just a single item
do {
var resource = resources[i];
//keep url clean for matching and offline mode handling
urlPrefix = resource.url.indexOf("//") > -1 ? "" : toRoot;
var $card = $('<a>')
.addClass('resource-card resource-card-' + cardSize + ' resource-card-' + resource.type)
.attr('href', urlPrefix + resource.url);
if (isStack) {
$card.addClass('resource-card-' + isStack[1] + 'x' + isStack[2]);
if (++stackCount == parseInt(isStack[3])) {
$card.addClass('resource-card-row-stack-last');
stackCount = 0;
}
} else {
stackCount = 0;
}
$card.decorateResourceCard(resource)
.appendTo($stackDiv || $widget);
} while (++i < resources.length && stackCount > 0);
}
}
/* Build a site map of resources using a section as a root. */
function buildSectionList(opts) {
if (opts.section && SECTION_BY_ID[opts.section]) {
return SECTION_BY_ID[opts.section].sections || [];
}
return [];
}
function buildResourceList(opts) {
var maxResults = opts.maxResults || 100;
var query = opts.query || '';
var expressions = parseResourceQuery(query);
var addedResourceIndices = {};
var results = [];
for (var i = 0; i < expressions.length; i++) {
var clauses = expressions[i];
// build initial set of resources from first clause
var firstClause = clauses[0];
var resources = [];
switch (firstClause.attr) {
case 'type':
resources = ALL_RESOURCES_BY_TYPE[firstClause.value];
break;
case 'lang':
resources = ALL_RESOURCES_BY_LANG[firstClause.value];
break;
case 'tag':
resources = ALL_RESOURCES_BY_TAG[firstClause.value];
break;
case 'collection':
var urls = RESOURCE_COLLECTIONS[firstClause.value].resources || [];
resources = urls.map(function(url){ return ALL_RESOURCES_BY_URL[url]; });
break;
case 'section':
var urls = SITE_MAP[firstClause.value].sections || [];
resources = urls.map(function(url){ return ALL_RESOURCES_BY_URL[url]; });
break;
}
//console.log(firstClause.attr + ':' + firstClause.value);
resources = resources || [];
// use additional clauses to filter corpus
if (clauses.length > 1) {
var otherClauses = clauses.slice(1);
resources = resources.filter(getResourceMatchesClausesFilter(otherClauses));
}
// filter out resources already added
if (i > 1) {
resources = resources.filter(getResourceNotAlreadyAddedFilter(addedResourceIndices));
}
// add to list of already added indices
for (var j = 0; j < resources.length; j++) {
console.log(resources[j].title);
addedResourceIndices[resources[j].index] = 1;
}
// concat to final results list
results = results.concat(resources);
}
if (opts.sortOrder && results.length) {
var attr = opts.sortOrder;
if (opts.sortOrder == 'random') {
var i = results.length, j, temp;
while (--i) {
j = Math.floor(Math.random() * (i + 1));
temp = results[i];
results[i] = results[j];
results[j] = temp;
}
} else {
var desc = attr.charAt(0) == '-';
if (desc) {
attr = attr.substring(1);
}
results = results.sort(function(x,y) {
return (desc ? -1 : 1) * (parseInt(x[attr], 10) - parseInt(y[attr], 10));
});
}
}
results = results.filter(getResourceNotAlreadyAddedFilter(addedPageResources));
results = results.slice(0, maxResults);
for (var j = 0; j < results.length; ++j) {
addedPageResources[results[j].index] = 1;
}
return results;
}
function getResourceNotAlreadyAddedFilter(addedResourceIndices) {
return function(resource) {
return !addedResourceIndices[resource.index];
};
}
function getResourceMatchesClausesFilter(clauses) {
return function(resource) {
return doesResourceMatchClauses(resource, clauses);
};
}
function doesResourceMatchClauses(resource, clauses) {
for (var i = 0; i < clauses.length; i++) {
var map;
switch (clauses[i].attr) {
case 'type':
map = IS_RESOURCE_OF_TYPE[clauses[i].value];
break;
case 'lang':
map = IS_RESOURCE_IN_LANG[clauses[i].value];
break;
case 'tag':
map = IS_RESOURCE_TAGGED[clauses[i].value];
break;
}
if (!map || (!!clauses[i].negative ? map[resource.index] : !map[resource.index])) {
return clauses[i].negative;
}
}
return true;
}
function parseResourceQuery(query) {
// Parse query into array of expressions (expression e.g. 'tag:foo + type:video')
var expressions = [];
var expressionStrs = query.split(',') || [];
for (var i = 0; i < expressionStrs.length; i++) {
var expr = expressionStrs[i] || '';
// Break expression into clauses (clause e.g. 'tag:foo')
var clauses = [];
var clauseStrs = expr.split(/(?=[\+\-])/);
for (var j = 0; j < clauseStrs.length; j++) {
var clauseStr = clauseStrs[j] || '';
// Get attribute and value from clause (e.g. attribute='tag', value='foo')
var parts = clauseStr.split(':');
var clause = {};
clause.attr = parts[0].replace(/^\s+|\s+$/g,'');
if (clause.attr) {
if (clause.attr.charAt(0) == '+') {
clause.attr = clause.attr.substring(1);
} else if (clause.attr.charAt(0) == '-') {
clause.negative = true;
clause.attr = clause.attr.substring(1);
}
}
if (parts.length > 1) {
clause.value = parts[1].replace(/^\s+|\s+$/g,'');
}
clauses.push(clause);
}
if (!clauses.length) {
continue;
}
expressions.push(clauses);
}
return expressions;
}
})();
(function($) {
/* Simple jquery function to create dom for a standard resource card */
$.fn.decorateResourceCard = function(resource) {
var section = resource.group || resource.type;
var imgUrl;
if (resource.image) {
//keep url clean for matching and offline mode handling
var urlPrefix = resource.image.indexOf("//") > -1 ? "" : toRoot;
imgUrl = urlPrefix + resource.image;
}
$('<div>')
.addClass('card-bg')
.css('background-image', 'url(' + (imgUrl || toRoot + 'assets/images/resource-card-default-android.jpg') + ')')
.appendTo(this);
$('<div>').addClass('card-info' + (!resource.summary ? ' empty-desc' : ''))
.append($('<div>').addClass('section').text(section))
.append($('<div>').addClass('title').html(resource.title))
.append($('<div>').addClass('description')
.append($('<div>').addClass('text').html(resource.summary))
.append($('<div>').addClass('util')
.append($('<div>').addClass('g-plusone')
.attr('data-size', 'small')
.attr('data-align', 'right')
.attr('data-href', resource.url))))
.appendTo(this);
return this;
};
/* Simple jquery function to create dom for a resource section card (menu) */
$.fn.decorateResourceSection = function(section) {
var resource = section.resource;
//keep url clean for matching and offline mode handling
var urlPrefix = resource.image.indexOf("//") > -1 ? "" : toRoot;
var $base = $('<a>')
.addClass('card-bg')
.attr('href', resource.url)
.append($('<div>').addClass('card-section-icon')
.append($('<div>').addClass('icon'))
.append($('<div>').addClass('section').html(resource.title)))
.appendTo(this);
var $cardInfo = $('<div>').addClass('card-info').appendTo(this);
if (section.sections && section.sections.length) {
// Recurse the section sub-tree to find a resource image.
var stack = [section];
while (stack.length) {
if (stack[0].resource.image) {
$base.css('background-image', 'url(' + urlPrefix + stack[0].resource.image + ')');
break;
}
if (stack[0].sections) {
stack = stack.concat(stack[0].sections);
}
stack.shift();
}
var $ul = $('<ul>')
.appendTo($cardInfo);
var max = section.sections.length > 3 ? 3 : section.sections.length;
for (var i = 0; i < max; ++i) {
var subResource = section.sections[i];
$('<li>')
.append($('<a>').attr('href', subResource.url)
.append($('<div>').addClass('title').html(subResource.title))
.append($('<div>').addClass('description')
.append($('<div>').addClass('text').html(subResource.summary))
.append($('<div>').addClass('util')
.append($('<div>').addClass('g-plusone')
.attr('data-size', 'small')
.attr('data-align', 'right')
.attr('data-href', resource.url)))))
.appendTo($ul);
}
// Add a more row
if (max < section.sections.length) {
$('<li>')
.append($('<a>').attr('href', resource.url)
.append($('<div>')
.addClass('title')
.text('More')))
.appendTo($ul);
}
} else {
// No sub-resources, just render description?
}
return this;
};
})(jQuery);
(function($) {
$.fn.ellipsis = function(options) {
// default option
var defaults = {
'row' : 1, // show rows
'onlyFullWords': true, // set to true to avoid cutting the text in the middle of a word
'char' : '...', // ellipsis
'callback': function() {},
'position': 'tail' // middle, tail
};
options = $.extend(defaults, options);
this.each(function() {
// get element text
var $this = $(this);
var targetHeight = $this.height();
$this.css({'height': 'auto'});
var text = $this.text();
var origText = text;
var origLength = origText.length;
var origHeight = $this.height();
if (origHeight <= targetHeight) {
$this.text(text);
options.callback.call(this);
return;
}
var start = 1, length = 0;
var end = text.length;
if(options.position === 'tail') {
while (start < end) { // Binary search for max length
length = Math.ceil((start + end) / 2);
$this.text(text.slice(0, length) + options['char']);
if ($this.height() <= targetHeight) {
start = length;
} else {
end = length - 1;
}
}
text = text.slice(0, start);
if (options.onlyFullWords) {
// remove fragment of the last word together with possible soft-hyphen chars
text = text.replace(/[\u00AD\w\uac00-\ud7af]+$/, '');
}
text += options['char'];
}else if(options.position === 'middle') {
var sliceLength = 0;
while (start < end) { // Binary search for max length
length = Math.ceil((start + end) / 2);
sliceLength = Math.max(origLength - length, 0);
$this.text(
origText.slice(0, Math.floor((origLength - sliceLength) / 2)) +
options['char'] +
origText.slice(Math.floor((origLength + sliceLength) / 2), origLength)
);
if ($this.height() <= targetHeight) {
start = length;
} else {
end = length - 1;
}
}
sliceLength = Math.max(origLength - start, 0);
var head = origText.slice(0, Math.floor((origLength - sliceLength) / 2));
var tail = origText.slice(Math.floor((origLength + sliceLength) / 2), origLength);
if (options.onlyFullWords) {
// remove fragment of the last or first word together with possible soft-hyphen characters
head = head.replace(/[\u00AD\w\uac00-\ud7af]+$/, '');
}
text = head + options['char'] + tail;
}
$this.text(text);
options.callback.call(this);
});
return this;
};
}) (jQuery);

View File

@ -1,7 +1,7 @@
<?cs def:custom_masthead() ?>
<a name="top"></a>
<?cs if:!devsite ?><?cs # leave out the global header for devsite; it's in devsite template ?>
<!-- Header -->
<?cs if:!devsite ?><?cs # leave out the global header for devsite; it is in devsite template ?>
<!-- Header --><div id="header-wrapper">
<div id="header">
<div class="wrap" id="header-wrap">
<div class="col-3 logo">
@ -31,7 +31,8 @@
ja-lang="開発"
es-lang="Desarrollar"
>Develop</a></li>
<li class="distribute last"><a href="<?cs var:toroot ?>distribute/index.html"
<li class="distribute last"><a href="<?cs var:toroot ?>distribute/<?cs
if:android.whichdoc == "offline" ?>googleplay/<?cs /if ?>index.html"
zh-tw-lang="發佈"
zh-cn-lang="分发"
ru-lang="Распространение"
@ -51,7 +52,7 @@
<div class="mid">
<div class="header">Links</div>
<ul>
<li><a href="https://play.google.com/apps/publish/">Google Play Developer Console</a></li>
<li><a href="https://play.google.com/apps/publish/" target="_googleplay">Google Play Developer Console</a></li>
<li><a href="http://android-developers.blogspot.com/">Android Developers Blog</a></li>
<li><a href="<?cs var:toroot ?>about/index.html">About Android</a></li>
</ul>
@ -139,87 +140,79 @@ onkeyup="return search_changed(event, false, '<?cs var:toroot ?>')" />
<!-- /New Search>
<!-- Expanded quicknav -->
<div id="quicknav" class="col-9">
<ul>
<li class="design">
<ul>
<li><a href="<?cs var:toroot ?>design/index.html">Get Started</a></li>
<li><a href="<?cs var:toroot ?>design/style/index.html">Style</a></li>
<li><a href="<?cs var:toroot ?>design/patterns/index.html">Patterns</a></li>
<li><a href="<?cs var:toroot ?>design/building-blocks/index.html">Building Blocks</a></li>
<li><a href="<?cs var:toroot ?>design/downloads/index.html">Downloads</a></li>
<li><a href="<?cs var:toroot ?>design/videos/index.html">Videos</a></li>
</ul>
</li>
<li class="develop">
<ul>
<li><a href="<?cs var:toroot ?>training/index.html"
zh-tw-lang="訓練課程"
zh-cn-lang="培训"
ru-lang="Курсы"
ko-lang="교육"
ja-lang="トレーニング"
es-lang="Capacitación"
>Training</a></li>
<li><a href="<?cs var:toroot ?>guide/index.html"
zh-tw-lang="API 指南"
zh-cn-lang="API 指南"
ru-lang="Руководства по API"
ko-lang="API 가이드"
ja-lang="API ガイド"
es-lang="Guías de la API"
>API Guides</a></li>
<li><a href="<?cs var:toroot ?>reference/packages.html"
zh-tw-lang="參考資源"
zh-cn-lang="参考"
ru-lang="Справочник"
ko-lang="참조문서"
ja-lang="リファレンス"
es-lang="Referencia"
>Reference</a></li>
<li><a href="<?cs var:toroot ?>tools/index.html"
zh-tw-lang="相關工具"
zh-cn-lang="工具"
ru-lang="Инструменты"
ko-lang="도구"
ja-lang="ツール"
es-lang="Herramientas"
>Tools</a>
<ul><li><a href="<?cs var:toroot ?>sdk/index.html">Get the SDK</a></li></ul>
</li>
<li><a href="<?cs var:toroot ?>google/index.html">Google Services</a>
</li>
<?cs if:android.hasSamples ?>
<li><a href="<?cs var:toroot ?>samples/index.html">Samples</a>
</li>
<?cs /if ?>
</ul>
</li>
<li class="distribute last">
<ul>
<li><a href="<?cs var:toroot ?>distribute/index.html">Google Play</a></li>
<li><a href="<?cs var:toroot ?>distribute/googleplay/publish/index.html">Publishing</a></li>
<li><a href="<?cs var:toroot ?>distribute/googleplay/promote/index.html">Promoting</a></li>
<li><a href="<?cs var:toroot ?>distribute/googleplay/quality/index.html">App Quality</a></li>
<li><a href="<?cs var:toroot ?>distribute/googleplay/spotlight/index.html">Spotlight</a></li>
<li><a href="<?cs var:toroot ?>distribute/open.html">Open Distribution</a></li>
</ul>
</li>
</ul>
</div>
<!-- /Expanded quicknav -->
<!-- Expanded quicknav -->
<div id="quicknav" class="col-9">
<ul>
<li class="design">
<ul>
<li><a href="<?cs var:toroot ?>design/index.html">Get Started</a></li>
<li><a href="<?cs var:toroot ?>design/style/index.html">Style</a></li>
<li><a href="<?cs var:toroot ?>design/patterns/index.html">Patterns</a></li>
<li><a href="<?cs var:toroot ?>design/building-blocks/index.html">Building Blocks</a></li>
<li><a href="<?cs var:toroot ?>design/downloads/index.html">Downloads</a></li>
<li><a href="<?cs var:toroot ?>design/videos/index.html">Videos</a></li>
</ul>
</li>
<li class="develop">
<ul>
<li><a href="<?cs var:toroot ?>training/index.html"
zh-tw-lang="訓練課程"
zh-cn-lang="培训"
ru-lang="Курсы"
ko-lang="교육"
ja-lang="トレーニング"
es-lang="Capacitación"
>Training</a></li>
<li><a href="<?cs var:toroot ?>guide/index.html"
zh-tw-lang="API 指南"
zh-cn-lang="API 指南"
ru-lang="Руководства по API"
ko-lang="API 가이드"
ja-lang="API ガイド"
es-lang="Guías de la API"
>API Guides</a></li>
<li><a href="<?cs var:toroot ?>reference/packages.html"
zh-tw-lang="參考資源"
zh-cn-lang="参考"
ru-lang="Справочник"
ko-lang="참조문서"
ja-lang="リファレンス"
es-lang="Referencia"
>Reference</a></li>
<li><a href="<?cs var:toroot ?>tools/index.html"
zh-tw-lang="相關工具"
zh-cn-lang="工具"
ru-lang="Инструменты"
ko-lang="도구"
ja-lang="ツール"
es-lang="Herramientas"
>Tools</a>
<ul><li><a href="<?cs var:toroot ?>sdk/index.html">Get the SDK</a></li></ul>
</li>
<li><a href="<?cs var:toroot ?>google/index.html">Google Services</a>
</li>
<?cs if:android.hasSamples ?>
<li><a href="<?cs var:toroot ?>samples/index.html">Samples</a>
</li>
<?cs /if ?>
</ul>
</li>
<li class="distribute last">
<ul>
<li><a href="<?cs var:toroot ?>distribute/googleplay/index.html">Google Play</a></li>
<li><a href="<?cs var:toroot ?>distribute/essentials/index.html">Essentials</a></li>
<li><a href="<?cs var:toroot ?>distribute/users/index.html">Get Users</a></li>
<li><a href="<?cs var:toroot ?>distribute/engage/index.html">Engage &amp; Retain</a></li>
<li><a href="<?cs var:toroot ?>distribute/monetize/index.html">Monetize</a></li>
<li><a href="<?cs var:toroot ?>distribute/stories/index.html">Developer Stories</a></li>
</ul>
</li>
</ul>
</div><!-- /Expanded quicknav -->
</div>
</div>
<!-- /Header -->
<div id="searchResults" class="wrap" style="display:none;">
<h2 id="searchTitle">Results</h2>
<div id="leftSearchControl" class="search-control">Loading...</div>
</div>
</div><!-- /Header -->
<?cs if:training || guide || reference || tools || develop || google || samples ?>
<!-- Secondary x-nav -->
<div id="nav-x">
@ -270,10 +263,71 @@ onkeyup="return search_changed(event, false, '<?cs var:toroot ?>')" />
</div>
<!-- /Sendondary x-nav -->
<?cs elif:distribute || googleplay || essentials || users || engage || monetize || disttools || stories ?>
<!-- Secondary distribute x-nav -->
<div id="nav-x">
<div class="wrap">
<ul class="nav-x distribute">
<li class="googleplay"><a href="<?cs var:toroot ?>distribute/googleplay/index.html"
>Google Play</a></li>
<li class="essentials"><a href="<?cs var:toroot ?>distribute/essentials/index.html"
>Essentials</a></li>
<li class="users"><a href="<?cs var:toroot ?>distribute/users/index.html"
>Get Users</a></li>
<li class="engage"><a href="<?cs var:toroot ?>distribute/engage/index.html"
>Engage &amp; Retain</a></li>
<li class="monetize"><a href="<?cs var:toroot ?>distribute/monetize/index.html"
>Monetize</a>
</li>
<li class="disttools"><a href="<?cs var:toroot ?>distribute/tools/index.html"
>Tools</a>
</li>
<li class="stories"><a href="<?cs var:toroot ?>distribute/stories/index.html"
>Stories</a>
</li>
</ul>
<a href="https://play.google.com/apps/publish/" class="developer-console-btn">Developer Console</a>
</div> <!-- /Secondary distribute x-nav -->
</div>
<?cs /if ?>
</div> <!--end headerwrap -->
<?cs /if ?>
<?cs # end if/else !devsite ?>
<div id="sticky-header">
<div>
<a class="logo" href="/index.html"></a>
<a class="top" href="#top"></a>
<ul class="breadcrumb">
<?cs
if:design ?><li class="design"><a href="<?cs var:toroot ?>design/index.html">Design</a></li><?cs
elif:(develop || training || guide || reference || tools || sdk || google || samples) ?><li class="develop"><a href="<?cs var:toroot ?>develop/index.html">Develop</a></li><?cs
elif:distribute ?><li class="distribute"><a href="<?cs var:toroot ?>distribute/index.html">Distribute</a></li><?cs
elif:about ?><li class="about"><a href="<?cs var:toroot ?>about/index.html">About Android</a></li><?cs
/if ?><?cs
if:training ?><li><a href="<?cs var:toroot ?>training/index.html">Training</a></li><?cs
elif:guide ?><li><a href="<?cs var:toroot ?>guide/index.html">API Guides</a></li><?cs
elif:reference ?><li><a href="<?cs var:toroot ?>reference/index.html">Reference</a></li><?cs
elif:tools ?><li><a href="<?cs var:toroot ?>tools/index.html">Tools</a></li><?cs
elif:google ?><li><a href="<?cs var:toroot ?>google/index.html">Google Services</a></li><?cs
elif:samples ?><li><a href="<?cs var:toroot ?>samples/index.html">Samples</a></li><?cs
elif:googleplay ?><li><a href="<?cs var:toroot ?>distribute/googleplay/index.html">Google Play</a></li><?cs
elif:essentials ?><li><a href="<?cs var:toroot ?>distribute/essentials/index.html">Essentials</a></li><?cs
elif:users ?><li><a href="<?cs var:toroot ?>distribute/users/index.html">Get Users</a></li><?cs
elif:engage ?><li><a href="<?cs var:toroot ?>distribute/engage/index.html">Engage &amp; Retain</a></li><?cs
elif:monetize ?><li><a href="<?cs var:toroot ?>distribute/monetize/index.html">Monetize Your Apps</a></li><?cs
elif:disttools ?><li><a href="<?cs var:toroot ?>distribute/tools/index.html">Tools &amp Reference</a></li><?cs
elif:stories ?><li><a href="<?cs var:toroot ?>distribute/stories/index.html">Developer Stories</a></li><?cs
/if ?> <?cs
if:!section.landing ?><li class="current"><?cs var:page.title ?></li><?cs
/if ?></ul>
</div>
</div>
<?cs
/def ?>
<div id="searchResults" class="wrap" style="display:none;">
<h2 id="searchTitle">Results</h2>
<div id="leftSearchControl" class="search-control">Loading...</div>
</div>
<?cs /if ?><?cs # end if/else !devsite ?><?cs
/def ?>

View File

@ -15,28 +15,12 @@ def:sdk_nav() ?>
</div>
</div> <!-- end side-nav -->
<?cs /def ?>
<?cs
def:resources_tab_nav() ?>
<?cs /def ?><?cs
def:no_nav() ?>
<div class="wrap clearfix" id="body-content">
<a
<div class="col-4" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
<div id="devdoc-nav" class="scroll-pane">
<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
<?cs /def ?><?cs
<?cs
include:"../../../../frameworks/base/docs/html/resources/resources_toc.cs" ?>
</div>
</div> <!-- end side-nav -->
<script>
$(document).ready(function() {
scrollIntoView("devdoc-nav");
});
</script>
<?cs /def ?>
<?cs
def:tools_nav() ?>
<div class="wrap clearfix" id="body-content">
<div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
@ -73,8 +57,113 @@ def:training_nav() ?>
scrollIntoView("devdoc-nav");
});
</script>
<?cs /def ?>
<?cs
<?cs /def ?><?cs
def:googleplay_nav() ?>
<div class="wrap clearfix" id="body-content">
<div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
<div id="devdoc-nav" class="scroll-pane">
<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
<?cs include:"../../../../frameworks/base/docs/html/distribute/googleplay/googleplay_toc.cs" ?>
</div>
</div> <!-- end side-nav -->
<script>
$(document).ready(function() {
scrollIntoView("devdoc-nav");
});
</script>
<?cs /def ?><?cs
def:essentials_nav() ?>
<div class="wrap clearfix" id="body-content">
<div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
<div id="devdoc-nav" class="scroll-pane">
<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
<?cs include:"../../../../frameworks/base/docs/html/distribute/essentials/essentials_toc.cs" ?>
</div>
</div> <!-- end side-nav -->
<script>
$(document).ready(function() {
scrollIntoView("devdoc-nav");
});
</script>
<?cs /def ?><?cs
def:users_nav() ?>
<div class="wrap clearfix" id="body-content">
<div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
<div id="devdoc-nav" class="scroll-pane">
<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
<?cs include:"../../../../frameworks/base/docs/html/distribute/users/users_toc.cs" ?>
</div>
</div> <!-- end side-nav -->
<script>
$(document).ready(function() {
scrollIntoView("devdoc-nav");
});
</script>
<?cs /def ?><?cs
def:engage_nav() ?>
<div class="wrap clearfix" id="body-content">
<div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
<div id="devdoc-nav" class="scroll-pane">
<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
<?cs include:"../../../../frameworks/base/docs/html/distribute/engage/engage_toc.cs" ?>
</div>
</div> <!-- end side-nav -->
<script>
$(document).ready(function() {
scrollIntoView("devdoc-nav");
});
</script>
<?cs /def ?><?cs
def:monetize_nav() ?>
<div class="wrap clearfix" id="body-content">
<div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
<div id="devdoc-nav" class="scroll-pane">
<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
<?cs include:"../../../../frameworks/base/docs/html/distribute/monetize/monetize_toc.cs" ?>
</div>
</div> <!-- end side-nav -->
<script>
$(document).ready(function() {
scrollIntoView("devdoc-nav");
});
</script>
<?cs /def ?><?cs
def:disttools_nav() ?>
<div class="wrap clearfix" id="body-content">
<div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
<div id="devdoc-nav" class="scroll-pane">
<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
<?cs include:"../../../../frameworks/base/docs/html/distribute/tools/disttools_toc.cs" ?>
</div>
</div> <!-- end side-nav -->
<script>
$(document).ready(function() {
scrollIntoView("devdoc-nav");
});
</script>
<?cs /def ?><?cs
def:stories_nav() ?>
<div class="wrap clearfix" id="body-content">
<div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
<div id="devdoc-nav" class="scroll-pane">
<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
<?cs include:"../../../../frameworks/base/docs/html/distribute/stories/stories_toc.cs" ?>
</div>
</div> <!-- end side-nav -->
<script>
$(document).ready(function() {
scrollIntoView("devdoc-nav");
});
</script>
<?cs /def ?><?cs
def:guide_nav() ?>
<div class="wrap clearfix" id="body-content">
<div class="col-4" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
@ -310,8 +399,10 @@ def:default_left_nav() ?>
<?cs
def:custom_left_nav() ?><?cs
if:fullpage ?><?cs
call:fullpage() ?><?cs
if:fullpage ?><?cs
call:fullpage() ?><?cs
elif:nonavpage ?><?cs
call:no_nav() ?><?cs
elif:guide ?><?cs
call:guide_nav() ?><?cs
elif:design ?><?cs
@ -324,15 +415,29 @@ def:custom_left_nav() ?><?cs
call:google_nav() ?><?cs
elif:samples ?><?cs
call:samples_nav() ?><?cs
elif:more ?><?cs
call:dist_more_nav() ?><?cs
elif:distribute ?><?cs
call:distribute_nav() ?><?cs
elif:about ?><?cs
call:about_nav() ?><?cs
else ?><?cs
call:default_left_nav() ?> <?cs
/if ?><?cs
if:googleplay ?><?cs
call:googleplay_nav() ?><?cs
elif:essentials ?><?cs
call:essentials_nav() ?><?cs
elif:users ?><?cs
call:users_nav() ?><?cs
elif:engage ?><?cs
call:engage_nav() ?><?cs
elif:monetize ?><?cs
call:monetize_nav() ?><?cs
elif:disttools ?><?cs
call:disttools_nav() ?><?cs
elif:stories ?><?cs
call:stories_nav() ?><?cs
/if ?><?cs
elif:about ?><?cs
call:about_nav() ?><?cs
elif:distribute ?><?cs
call:distribute_nav() ?><?cs
else ?><?cs
call:default_left_nav() ?> <?cs
/if ?><?cs
/def ?>
<?cs # appears at the bottom of every page ?><?cs

View File

@ -2,19 +2,36 @@
<?cs include:"macros.cs" ?>
<html<?cs if:devsite ?> devsite<?cs /if ?>>
<?cs include:"head_tag.cs" ?>
<body class="gc-documentation <?cs if:(google || reference.gms || reference.gcm) ?>google<?cs /if ?>
<?cs if:(guide||develop||training||reference||tools||sdk||samples) ?>develop<?cs if:guide ?> guide<?cs /if ?><?cs if:samples ?> samples<?cs /if ?><?cs
<body class="gc-documentation
<?cs
if:(google || reference.gms || reference.gcm) ?>google<?cs /if ?><?cs
if:(guide||develop||training||reference||tools||sdk||samples) ?>develop<?cs
if:guide ?> guide<?cs /if ?><?cs
if:samples ?> samples<?cs /if ?><?cs
elif:(distribute||googleplay||essentials||users||engage||monetize||disttools||stories)
?>distribute<?cs
if:googleplay ?> googleplay<?cs /if ?><?cs
if:essentials ?> essentials<?cs /if ?><?cs
if:users ?> users<?cs /if ?><?cs
if:engage ?> engage<?cs /if ?><?cs
if:monetize ?> monetize<?cs /if ?><?cs
if:disttools ?> disttools<?cs /if ?><?cs
if:stories ?> stories<?cs /if ?><?cs
elif:about ?>about<?cs
elif:design ?>design<?cs
elif:distribute ?>distribute<?cs
/if ?><?cs
if:page.trainingcourse ?> trainingcourse<?cs /if ?>" itemscope itemtype="http://schema.org/Article">
<?cs include:"header.cs" ?>
/if ?><?cs
if:page.trainingcourse ?> trainingcourse<?cs
/if ?>" itemscope itemtype="http://schema.org/Article"><?cs
include:"header.cs" ?>
<div <?cs if:fullpage
?>class="fullpage"<?cs elif:design||tools||about||sdk||distribute
?>class="col-13" id="doc-col"<?cs else
?>class="col-12" id="doc-col"<?cs /if ?> >
<div <?cs
if:fullpage
?>class="fullpage"<?cs
elif:design||tools||about||sdk||googleplay||essentials||users||monetize||disttools && !nonavpage
?>class="col-13" id="doc-col"<?cs
elif:!nonavpage
?>class="col-12" id="doc-col"<?cs /if ?> >
<?cs if:(design||training||walkthru) && !page.trainingcourse && !page.article ?><?cs # header logic for docs that provide previous/next buttons ?>
<?cs if:header.hide ?>
@ -74,6 +91,7 @@
<?cs /if ?><?cs # end if training ?>
</div>
<?cs /if ?>
<?cs elif:samplesProjectIndex ?>
<div id="api-info-block">
<div class="sum-details-links">
@ -83,7 +101,10 @@
</div><!-- end sum-details-links -->
</div><!-- end breadcurmb block -->
<h1 itemprop="name"><?cs var:projectDir ?></h1>
<?cs else ?>
<?cs if:(!fullpage && !header.hide) ?>
<?cs if:page.landing ?><?cs # header logic for docs that are landing pages ?>
<div class="landing-banner">
@ -181,8 +202,6 @@
<?cs include:"footer.cs" ?>
</div><!-- end doc-content -->
<?cs include:"trailer.cs" ?>
<!-- Start of Tag -->
<script type="text/javascript">
var axel = Math.random() + "";
@ -193,6 +212,16 @@ document.write('<iframe src="https://2507573.fls.doubleclick.net/activityi;src=2
<iframe src="https://2507573.fls.doubleclick.net/activityi;src=2507573;type=other026;cat=googl348;ord=1?" width="1" height="1" frameborder="0" style="display:none"></iframe>
</noscript>
<!-- End of Tag -->
<?cs include:"trailer.cs" ?>
<script src="http://androiddevdocs-exp.appspot.com/ytblogger_lists_unified.js" type="text/javascript"></script>
<script src="<?cs var:toroot ?>jd_lists_unified.js" type="text/javascript"></script>
<script src="<?cs var:toroot ?>jd_articles.js" type="text/javascript"></script>
<script src="<?cs var:toroot ?>jd_collections.js" type="text/javascript"></script>
<script src="<?cs var:toroot ?>jd_site_map.js" type="text/javascript"></script>
<script src="<?cs var:toroot ?>jd_tag_helpers.js" type="text/javascript"></script>
</body>
</html>

View File

@ -31,9 +31,15 @@
<!-- STYLESHEETS -->
<link rel="stylesheet"
href="<?cs if:android.whichdoc != 'online' ?>http:<?cs /if ?>//fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic,bold" title="roboto">
<link href="<?cs var:toroot ?>assets/css/default.css" rel="stylesheet" type="text/css">
href="<?cs
if:android.whichdoc != 'online' ?>http:<?cs
/if ?>//fonts.googleapis.com/css?family=Roboto+Condensed">
<link rel="stylesheet" href="<?cs
if:android.whichdoc != 'online' ?>http:<?cs
/if ?>//fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic,bold"
title="roboto">
<link href="<?cs var:toroot ?>assets/css/default.css" rel="stylesheet" type="text/css">
<?cs if:reference && !(reference.gms || reference.gcm) ?>
<!-- FULLSCREEN STYLESHEET -->
<link href="<?cs var:toroot ?>assets/css/fullscreen.css" rel="stylesheet" class="fullscreen"