Add basic support for rendering dynamic content on pages.
Change-Id: If3ba4f71771a01043ec6d544e3b4a9222ba35daf
diff --git a/tools/droiddoc/templates-sdk-dyn/assets/js/docs.js b/tools/droiddoc/templates-sdk-dyn/assets/js/docs.js
index 6630bf9..3688c93 100644
--- a/tools/droiddoc/templates-sdk-dyn/assets/js/docs.js
+++ b/tools/droiddoc/templates-sdk-dyn/assets/js/docs.js
@@ -167,10 +167,12 @@
// 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 @@
// 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 @@
+/*
+ * 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 @@
$('.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 @@
$("#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);
\ No newline at end of file