am e7eeb400: add support for microsites
* commit 'e7eeb4002938fdc52820fb8aa02896d536c82a9e':
add support for microsites
diff --git a/tools/droiddoc/templates-sdk/assets/css/default.css b/tools/droiddoc/templates-sdk/assets/css/default.css
index b4e2d61..27963f2 100644
--- a/tools/droiddoc/templates-sdk/assets/css/default.css
+++ b/tools/droiddoc/templates-sdk/assets/css/default.css
@@ -4174,13 +4174,13 @@
}
-#header-wrap .logo.wear-logo {
+#header-wrap .logo.landing-logo {
width:220px;
margin:0;
padding:0;
margin-bottom:22px;
}
-#header-wrap .logo.wear-logo img {
+#header-wrap .logo.landing-logo img {
padding:0 0 0 10px;
}
@@ -6382,3 +6382,875 @@
.section-card-menu .card-info ul li {
border-top-color: #7e3794 !important;
}
+
+/**
+ * UTILITIES
+ */
+
+
+.border-box {
+ box-sizing: border-box;
+}
+
+.vertical-center-outer {
+ display: table;
+ height: 100%;
+ width: 100%;
+}
+
+.vertical-center-inner {
+ display: table-cell;
+ vertical-align: middle;
+}
+
+/**
+ * TYPE STYLES
+ */
+
+.landing-h1 {
+ font-weight: 100;
+ font-size: 60px;
+ line-height: 78px;
+ text-align: center;
+ letter-spacing: -1px;
+}
+
+.landing-pre-h1 {
+ font-weight: 400;
+ font-size: 28px;
+ color: #93B73F;
+ line-height: 36px;
+ text-align: center;
+ letter-spacing: -1px;
+ text-transform: uppercase;
+
+}
+
+.landing-h1.hero {
+ text-align: left;
+}
+
+.landing-h2 {
+ font-weight: 300;
+ font-size: 42px;
+ line-height: 64px;
+ text-align: center;
+}
+
+.landing-subhead {
+ color: #999999;
+ font-size: 20px;
+ line-height: 28px;
+ font-weight:300;
+ text-align: center;
+}
+.landing-subhead.hero {
+ text-align: left;
+ color: white;
+}
+
+.landing-hero-description {
+ text-align: left;
+ margin: 1em 0;
+}
+
+.landing-hero-description p {
+ font-weight: 300;
+ margin: 0;
+ font-size: 18px;
+ line-height: 24px;
+}
+
+.landing-body .landing-small {
+ font-size: 14px;
+ line-height: 19px;
+}
+
+.landing-body.landing-align-center {
+ text-align: center;
+}
+
+.landing-align-left {
+ text-align: left;
+}
+
+/**
+ * LAYOUT
+ */
+
+#body-content,
+.fullpage,
+#jd-content,
+.jd-descr,
+.landing-body-content {
+ height: 100%;
+}
+
+.landing-section {
+ padding: 80px 10px 80px;
+ width: 100%;
+ margin-left: -10px;
+ text-rendering: optimizeLegibility;
+}
+
+#extending-android-to-wearables {
+ padding-top: 30px;
+}
+
+.landing-short-section {
+ padding: 40px 10px 28px;
+}
+
+.landing-gray-background {
+ background-color: #e9e9e9;
+}
+
+.landing-white-background {
+ background-color: white;
+}
+
+.landing-red-background {
+ color: white;
+ background-color: hsl(8, 70%, 54%);
+}
+
+.landing-subhead-red {
+ color: hsl(8, 71%, 84%);
+ text-align: left;
+}
+
+.landing-subhead-red p {
+ margin-top: 20px;
+}
+
+.landing-hero-container {
+ height: 100%;
+}
+
+
+.preview-hero {
+ height: calc(100% - 70px);
+ min-height: 504px;
+ margin-top: -5px;
+ padding-top: 0;
+ padding-bottom: 0;
+ background-image: url(../../preview/images/hero.jpg);
+ background-size: cover;
+ background-position: right center;
+ color: white;
+ position: relative;
+ overflow: hidden;
+}
+
+.wear-hero {
+ height: calc(100% - 70px);
+ min-height: 504px;
+ margin-top: -5px;
+ padding-top: 0;
+ padding-bottom: 0;
+ background-image: url(../../wear/images/hero.jpg);
+ background-size: cover;
+ background-position: top center;
+ color: white;
+ position: relative;
+ overflow: hidden;
+}
+
+.tv-hero {
+ height: calc(100% - 70px);
+ min-height: 504px;
+ margin-top: -5px;
+ padding-top: 0;
+ padding-bottom: 0;
+ background-image: url(../../tv/images/living-room.jpg);
+ background-size: cover;
+ background-position: right center;
+ color: white;
+ position: relative;
+ overflow: hidden;
+}
+
+.auto-hero {
+ height: calc(100% - 70px);
+ min-height: 504px;
+ margin-top: -5px;
+ padding-top: 0;
+ padding-bottom: 0;
+ background-image: url(../../auto/images/hero.jpg);
+ background-size: cover;
+ background-position: right center;
+ color: white;
+ position: relative;
+ overflow: hidden;
+}
+
+.landing-hero-scrim {
+ background: black;
+ opacity: .2;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ margin-left: -10px;
+}
+
+.landing-hero-wrap {
+ margin: 0 auto;
+ width: 940px;
+ clear: both;
+ height: 100%;
+ position: relative;
+}
+
+.landing-section-header {
+ margin-bottom: 40px;
+}
+
+.landing-hero-wrap .landing-section-header {
+ margin-bottom: 16px;
+}
+
+.landing-body {
+ font-size: 18px;
+ line-height: 24px;
+}
+
+.landing-button {
+ white-space: nowrap;
+ display: inline-block;
+ padding: 16px 32px;
+ font-size: 18px;
+ font-weight: 500;
+ line-height: 24px;
+ cursor: pointer;
+ color: white;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -o-user-select: none;
+ user-select: none;
+ -webkit-transition: .2s background-color ease-in-out;
+ -moz-transition: .2s background-color ease-in-out;
+ -o-transition: .2s background-color ease-in-out;
+ transition: .2s background-color ease-in-out;
+}
+
+.landing-primary {
+ background-color: hsl(8, 70%, 54%); /* #dc4b35 */
+ color: #f8f8f8;
+}
+
+.landing-button.landing-primary:hover {
+ background-color: hsl(8, 70%, 44%); /* #bf3722 */
+}
+
+.landing-button.landing-primary:active {
+ background-color: hsl(8, 70%, 36%); /* # */
+}
+
+.landing-button.landing-secondary {
+ background-color: hsl(8, 70%, 44%);
+}
+
+.landing-button.landing-secondary:hover {
+ background-color: hsl(8, 70%, 36%);
+}
+
+.landing-button.landing-secondary:active {
+ background-color: hsl(8, 70%, 30%);
+}
+
+a.landing-button,
+a.landing-button:hover,
+a.landing-button:visited {
+ color: white !important;
+}
+
+.landing-video-link {
+ white-space: nowrap;
+ display: inline-block;
+ padding: 16px 32px 16px 82px;
+ font-size: 18px;
+ font-weight: 400;
+ line-height: 24px;
+ cursor: pointer;
+ color: hsla(0, 0%, 100%, .8);
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -o-user-select: none;
+ user-select: none;
+ -webkit-transition: .2s color ease-in-out;
+ -moz-transition: .2s color ease-in-out;
+ -o-transition: .2s color ease-in-out;
+ transition: .2s color ease-in-out;
+}
+
+.landing-video-link:before {
+ height: 64px;
+ width: 64px;
+ display: inline-block;
+ background-image: url(data:image/png;base64,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);
+ background-size: contain;
+ position: absolute;
+ content: "";
+ opacity: .7;
+ margin-top: -19px;
+ margin-left: -64px;
+ -webkit-transition: .2s opacity ease-in-out;
+ -moz-transition: .2s opacity ease-in-out;
+ -o-transition: .2s opacity ease-in-out;
+ transition: .2s opacity ease-in-out;
+}
+
+.landing-video-link:hover {
+ color: hsla(0, 0%, 100%, 1);
+}
+
+.landing-video-link:hover:before {
+ opacity: 1;
+}
+
+.landing-social-image {
+ float: left;
+ margin-right: 14px;
+ height: 64px;
+ width: 64px;
+}
+
+.landing-social-copy {
+ padding-left: 78px;
+}
+
+.landing-scroll-down-affordance {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ text-align: center;
+ z-index: 10;
+}
+
+.landing-down-arrow {
+ padding: 24px;
+ display: inline-block;
+ opacity: .5;
+ -webkit-transition: .2s opacity ease-in-out;
+ -moz-transition: .2s opacity ease-in-out;
+ -o-transition: .2s opacity ease-in-out;
+ transition: .2s opacity ease-in-out;
+
+ -webkit-animation-name: pulse-opacity;
+ -webkit-animation-duration: 4s;
+}
+
+.landing-down-arrow:hover {
+ opacity: 1;
+}
+
+.landing-down-arrow img {
+ height: 28px;
+ width: 28px;
+ margin: 0 auto;
+ display: block;
+}
+
+.landing-divider {
+ display: inline-block;
+ height: 2px;
+ background-color: white;
+ position: relative;
+ margin: 10px 0;
+}
+
+/* 3 CLOLUMN LAYOUT */
+
+.landing-breakout {
+ margin-top: 40px;
+ margin-bottom: 40px;
+}
+
+.landing-breakout img {
+ margin-bottom: 20px;
+}
+
+.landing-partners img {
+ margin-bottom: 20px;
+}
+
+.landing-breakout p {
+ padding: 0 23px;
+}
+
+.landing-inset-video-container {
+ position: relative;
+}
+
+.landing-inset-video-container img.gif {
+ max-width: 222px;
+ position: absolute;
+ top: 40px;
+ left: 40px;
+}
+
+img.landing-bezel-only {
+ height:302px;
+ width:302px;
+}
+
+.landing-breakout.landing-partners img {
+ margin-bottom: 20px;
+}
+
+.col-3-wide {
+ display: inline;
+ float: left;
+ margin-left: 10px;
+ margin-right: 10px;
+}
+
+.col-3-wide {
+ width: 302px;
+}
+
+.col-2-wide {
+ display: inline;
+ float: left;
+ margin-left: 10px;
+ margin-right: 10px;
+}
+
+.col-2-wide {
+ width: 402px;
+}
+
+/**
+ * ANIMATION
+ */
+
+@-webkit-keyframes pulse-opacity {
+ 0% {
+ opacity: .5;
+ }
+ 20% {
+ opacity: .5;
+ }
+ 40% {
+ opacity: 1;
+ }
+ 60% {
+ opacity: .5;
+ }
+ 80% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: .5;
+ }
+}
+
+
+
+/**
+ * VIDEO
+ */
+
+#video-container {
+ display:none;
+ position:fixed;
+ top:0;
+ left:-10px;
+ width:102%;
+ height:100%;
+ background-color:rgba(0,0,0,0.7);
+ z-index:99;
+}
+
+#video-frame {
+ width:940px;
+ height:526.4px;
+ margin:80px auto 0;
+ display:none;
+}
+
+.video-close {
+cursor: pointer;
+position: relative;
+left: 940px;
+top: 0;
+pointer-events: all;
+}
+
+#icon-video-close {
+background-image: url("../images/close.png");
+background-position: 0 0;
+height: 36px;
+width: 36px;
+display:block;
+}
+
+
+
+
+/******************
+Styles for d.a.c/index:
+*******************/
+
+
+
+/* Generic full screen carousel styling to be used across pages. */
+.fullscreen-carousel {
+ margin: 0 -10px;
+ width: 100%;
+ overflow: hidden;
+ position: relative;
+}
+
+.fullscreen-carousel-content {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ display: table; /* For vertical centering */
+}
+
+.fullscreen-carousel .vcenter {
+ display: table-cell;
+ vertical-align: middle;
+ position: relative;
+}
+
+.fullscreen-carousel .vcenter > div {
+ margin: 10px auto;
+}
+
+/* Styles for the full-bleed hero image type. */
+.fullscreen-carousel .hero, .fullscreen-carousel .hero h1 {
+ color: #fff;
+}
+
+.fullscreen-carousel .hero h1 {
+ font-weight: 300;
+ font-size: 60px;
+ line-height: 68px;
+ letter-spacing: -1px;
+ margin-top: 0;
+}
+
+.fullscreen-carousel .hero p {
+ font-weight: 300;
+ font-size: 18px;
+ line-height: 24px;
+ -webkit-font-smoothing: antialiased;
+}
+
+.fullscreen-carousel .hero .hero-bg {
+ background-size: cover;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+}
+
+
+/* Full screen carousel styling for the resource flow layout type of content */
+.fullscreen-carousel .resource-flow-layout:after {
+ height: 0; /* Dont know why this is set at 10 in default.css */
+}
+
+.fullscreen-carousel .resource-flow-layout {
+ margin-bottom: 20px;
+}
+
+
+
+/* Generic Tab carousel styling to be used across multiple pages. */
+
+.tab-carousel .tab-nav {
+ list-style: none;
+ position: relative;
+ text-align: center;
+}
+
+.tab-carousel .tab-nav li {
+ display: inline-block;
+ font-size: 22px;
+ font-weight: 400;
+ line-height: 50px;
+ list-style: none;
+ margin: 0;
+ padding: 0 25px;
+ position: relative;
+}
+
+.tab-carousel .tab-nav li a,
+.tab-carousel .tab-nav li a:hover {
+ color: #333 !important;
+ padding: 10px 10px 13px 10px;
+ position: relative;
+ z-index: 1000;
+}
+
+.tab-carousel .tab-nav li:after {
+ background: #ddd;
+ bottom: 0;
+ content: '';
+ height: 4px;
+ left: 0;
+ position: absolute;
+ width: 100%;
+ z-index: 0;
+}
+
+.tab-carousel .tab-nav .highlight {
+ position: absolute;
+ height: 4px;
+ width: 100px;
+ bottom: 0;
+ background: #33b5e5;
+}
+
+.tab-carousel .tab-carousel-content {
+ position: relative;
+ overflow: hidden;
+ white-space: nowrap;
+}
+
+.tab-carousel .tab-carousel-content [data-tab] {
+ display: inline-block;
+ white-space: normal;
+}
+
+
+
+/*
+ Resource styling for the tab carousel. The tab carousel contains either
+ a 3 column layout of resources or a single full-width resource. The
+ latter has the 18x12 class applied to it and can be styled differently
+ that way.
+*/
+
+.tab-carousel .resource .image {
+ width: 100%;
+ height: 250px;
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-position: 50% 50%;
+}
+
+.tab-carousel .resource .info .title {
+ font-size: 18px;
+ line-height: 24px;
+}
+
+.tab-carousel .resource .info .summary,
+.tab-carousel .resource .info .cta {
+ line-height: 24px;
+ font-size: 16px;
+}
+
+.tab-carousel .resource-card-18x12 {
+ position: relative;
+ padding-left: 450px;
+ box-sizing: border-box;
+ display: table-cell;
+ vertical-align: middle;
+}
+
+.tab-carousel .resource-card-18x12 .image {
+ position: absolute;
+ width: 420px;
+ height: 100%;
+ left: 0;
+ top: 0;
+}
+
+.tab-carousel .resource-card-18x12 .info {
+ display: inline-block;
+}
+
+.tab-carousel .resource-card-18x12 .info .title {
+ margin-bottom: 26px;
+}
+
+
+
+
+
+/*
+ Styles for the entity link used in the actions bar and in the cta of
+ the resources that appear in the tab carousel.
+*/
+.actions-bar a:after,
+.resource .cta:after {
+ content: '›';
+ font-weight: 400;
+ font-size: 22px;
+ left: 5px;
+ line-height: 1;
+ position: relative;
+ top: 1px;
+ transition: left 190ms ease-out;
+}
+
+.actions-bar a:hover:after,
+.resource .cta:hover:after {
+ left: 10px;
+}
+
+
+
+
+/*
+ Styles for the actions bar.
+*/
+.actions-bar {
+ background: #9acd00;
+ margin: 0 -10px;
+ margin-top:-20px;
+ text-align: center;
+}
+
+.actions-bar .actions {
+ padding: 30px 0 30px;
+ text-align: justify;
+ font-size: 0.1px;
+ line-height: 0.1px;
+ margin: 0 10px;
+}
+
+.actions-bar .actions:after {
+ content: '';
+ width: 100%;
+ display: inline-block;
+}
+
+.actions-bar .actions > div {
+ display: inline-block;
+}
+
+.actions-bar a {
+ font-size: 21px;
+ line-height: 27px;
+ color: #fff;
+ font-weight: 300;
+ -webkit-font-smoothing: antialiased;
+}
+
+.actions-bar a:after {
+ top: 0px;
+ font-size: 22px;
+}
+
+.actions-bar a:hover {
+ color: #fff !important;
+}
+
+
+
+
+
+/*
+ Specific styles for new home page layout of the carousels.
+*/
+
+/* Big blue button */
+a.home-new-cta-btn,
+.home-new-carousel-1 .resource-card-18x6 .cta {
+ white-space: nowrap;
+ display: inline-block;
+ padding: 14px 32px;
+ font-size: 18px;
+ font-weight: 500;
+ line-height: 24px;
+ cursor: pointer;
+ background: #33b5e6;
+ border-radius: 4px;
+ margin-top: 20px;
+ color: #fff;
+ transition: 0.2s background-color ease-in-out;
+}
+
+.home-new-carousel-1 .resource-card-18x6 .cta:after {
+ display: none; /* Hide the entity for this button */
+}
+
+a.home-new-cta-btn:hover,
+.home-new-carousel-1 .resource-card-18x6 .cta:hover {
+ color: #fff !important;
+ background: #2d9fca;
+}
+
+.home-new-carousel-1 .resource-card-18x6 .cta {
+ position: absolute;
+ bottom: 20px;
+ left: 16px;
+}
+
+/* Fullscreen carousel. */
+.home-new-carousel-1 {
+ max-height: 700px; /* Set max height so doesn't get too long */
+ margin-top: 20px;
+}
+
+.home-new-carousel-1 .fullscreen-carousel-content {
+ min-height: 450px; /* Set min height for all content */
+}
+
+.home-new-carousel-1 .hero {
+ background: #000;
+}
+
+.home-new-carousel-1 .hero-bg {
+ background-image: url(/home-new/images/hero.jpg);
+ background-position: right center;
+ opacity: 0.85;
+}
+
+/*
+ Styling for special top card of full screen layout resource layout.
+ We need to specifically style the 18x6 card to adjust its size and layout,
+ since it's not a standard card, not sure if this is unique to the home page
+ layout or should be namespaced within the fullscreen-carousel container.
+*/
+.home-new-carousel-1 .resource-flow-layout.col-16 .resource-card-18x6 {
+ height: 334px;
+}
+
+.home-new-carousel-1 .resource-card-18x6 .card-bg {
+ width: 636px;
+ height: 100%;
+}
+
+.home-new-carousel-1 .resource-card-18x6 .card-info {
+ right: 0px;
+ left: 636px;
+ height: 100%;
+ top: 0px;
+ padding: 15px 22px;
+}
+
+.home-new-carousel-1 .resource-card-18x6 .card-info .util {
+ display: none;
+}
+
+.home-new-carousel-1 .resource-card-18x6 .card-info .title {
+ font-size: 20px;
+ font-weight: 500;
+ margin-top: 15px;
+ margin-bottom: 15px;
+}
+
+.home-new-carousel-1 .resource-card-18x6 .card-info .text {
+ font-size: 15px;
+ line-height: 21px;
+}
+
+
+/* Tabbed carousel. */
+.home-new-carousel-2 {
+ margin: 35px auto 100px auto;
+}
+
+.home-new-carousel-2 h1 {
+ font-size: 47px;
+ font-weight: 100;
+ line-height: 54px;
+ text-align: center;
+}
\ No newline at end of file
diff --git a/tools/droiddoc/templates-sdk/assets/js/docs.js b/tools/droiddoc/templates-sdk/assets/js/docs.js
index 4b5dee2..c10b848 100644
--- a/tools/droiddoc/templates-sdk/assets/js/docs.js
+++ b/tools/droiddoc/templates-sdk/assets/js/docs.js
@@ -3429,7 +3429,10 @@
sortOrder: $widget.data('sortorder'),
query: $widget.data('query'),
section: $widget.data('section'),
- sizeCols: sizeCols
+ sizeCols: sizeCols,
+ /* Added by LFL 6/6/14 */
+ resourceStyle: $widget.data('resourcestyle') || 'card',
+ stackSort: $widget.data('stacksort') || 'true'
};
// run the search for the set of resources to show
@@ -3441,9 +3444,13 @@
} else if (isCarousel) {
drawResourcesCarouselWidget($widget, opts, resources);
} else if (isStack) {
- var sections = buildSectionList(opts);
+ /* Looks like this got removed and is not used, so repurposing for the
+ homepage style layout.
+ Modified by LFL 6/6/14
+ */
+ //var sections = buildSectionList(opts);
opts['numStacks'] = $widget.data('numstacks');
- drawResourcesStackWidget($widget, opts, resources, sections);
+ drawResourcesStackWidget($widget, opts, resources/*, sections*/);
}
}
@@ -3462,10 +3469,8 @@
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)
+ .attr('href', cleanUrl(resources[i].url))
.decorateResourceCard(resources[i],plusone);
$('<li>').css(css)
@@ -3484,7 +3489,9 @@
});
};
- /* Initializes a Resource Card Stack Widget (column-based layout) */
+ /* Initializes a Resource Card Stack Widget (column-based layout)
+ Modified by LFL 6/6/14
+ */
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
@@ -3502,59 +3509,87 @@
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
+ if (sections) {
+ for (var i = 0; i < sections.length; ++i) {
+ if (!sections[i].sections || !sections[i].sections.length) {
+ // Render it as a resource card
+ sectionResources.push(
+ $('<a>')
+ .addClass('resource-card section-card')
+ .attr('href', cleanUrl(sections[i].resource.url))
+ .decorateResourceCard(sections[i].resource,plusone)[0]
+ );
- sectionResources.push(
- $('<a>')
- .addClass('resource-card section-card')
- .attr('href', urlPrefix + sections[i].resource.url)
- .decorateResourceCard(sections[i].resource,plusone)[0]
- );
-
- } else {
- cards.push(
- $('<div>')
- .addClass('resource-card section-card-menu')
- .decorateResourceSection(sections[i],plusone)[0]
- );
+ } else {
+ cards.push(
+ $('<div>')
+ .addClass('resource-card section-card-menu')
+ .decorateResourceSection(sections[i],plusone)[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],plusone);
-
+ var $card = createResourceElement(resources[i], opts);
+
+ if (opts.resourceStyle.indexOf('related') > -1) {
+ $card.addClass('related-card');
+ }
+
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;
+ if (opts.stackSort != 'false') {
+ 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;
+ 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]));
+ $stacks[minIndex].append($(cards[i]));
+ }
}
};
+
+ /*
+ Create a resource card using the given resource object and a list of html
+ configured options. Returns a jquery object containing the element.
+ */
+ function createResourceElement(resource, opts, plusone) {
+ var $el;
+
+ // The difference here is that generic cards are not entirely clickable
+ // so its a div instead of an a tag, also the generic one is not given
+ // the resource-card class so it appears with a transparent background
+ // and can be styled in whatever way the css setup.
+ if (opts.resourceStyle == 'generic') {
+ $el = $('<div>')
+ .addClass('resource')
+ .attr('href', cleanUrl(resource.url))
+ .decorateResource(resource, opts);
+ } else {
+ var cls = 'resource resource-card';
+
+ $el = $('<a>')
+ .addClass(cls)
+ .attr('href', cleanUrl(resource.url))
+ .decorateResourceCard(resource, plusone);
+ }
+
+ return $el;
+ }
/* Initializes a flow widget, see distribute.scss for generating accompanying css */
function drawResourcesFlowWidget($widget, opts, resources) {
@@ -3587,12 +3622,12 @@
// 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);
+ var $card = createResourceElement(resources[i], opts, plusone);
+
+ $card.addClass('resource-card-' + cardSize +
+ ' resource-card-' + resource.type);
+
if (isStack) {
$card.addClass('resource-card-' + isStack[1] + 'x' + isStack[2]);
if (++stackCount == parseInt(isStack[3])) {
@@ -3603,8 +3638,7 @@
stackCount = 0;
}
- $card.decorateResourceCard(resource,plusone)
- .appendTo($stackDiv || $widget);
+ $card.appendTo($stackDiv || $widget);
} while (++i < resources.length && stackCount > 0);
}
@@ -3743,6 +3777,15 @@
}
return true;
}
+
+ function cleanUrl(url)
+ {
+ if (url && url.indexOf('//') === -1) {
+ url = toRoot + url;
+ }
+
+ return url;
+ }
function parseResourceQuery(query) {
@@ -3791,42 +3834,55 @@
})();
(function($) {
+
+ /*
+ Utility method for creating dom for the description area of a card.
+ Used in decorateResourceCard and decorateResource.
+ */
+ function buildResourceCardDescription(resource, plusone) {
+ var $description = $('<div>').addClass('description ellipsis');
+
+ $description.append($('<div>').addClass('text').html(resource.summary));
+
+ if (resource.cta) {
+ $description.append($('<a>').addClass('cta').html(resource.cta));
+ }
+
+ if (plusone) {
+ var plusurl = resource.url.indexOf("//") > -1 ? resource.url :
+ "//developer.android.com/" + resource.url;
+
+ $description.append($('<div>').addClass('util')
+ .append($('<div>').addClass('g-plusone')
+ .attr('data-size', 'small')
+ .attr('data-align', 'right')
+ .attr('data-href', plusurl)));
+ }
+
+ return $description;
+ }
+
+
/* Simple jquery function to create dom for a standard resource card */
$.fn.decorateResourceCard = function(resource,plusone) {
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;
+ var imgUrl = resource.image ||
+ 'assets/images/resource-card-default-android.jpg';
+
+ if (imgUrl.indexOf('//') === -1) {
+ imgUrl = toRoot + imgUrl;
}
- //add linkout logic here. check url or type, assign a class, map to css :after
- $('<div>')
- .addClass('card-bg')
- .css('background-image', 'url(' + (imgUrl || toRoot + 'assets/images/resource-card-default-android.jpg') + ')')
+
+ $('<div>').addClass('card-bg')
+ .css('background-image', 'url(' + (imgUrl || toRoot +
+ 'assets/images/resource-card-default-android.jpg') + ')')
.appendTo(this);
- if (!plusone) {
- $('<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 ellipsis')
- .append($('<div>').addClass('text').html(resource.summary))
- .append($('<div>').addClass('util')))
- .appendTo(this);
- } else {
- var plusurl = resource.url.indexOf("//") > -1 ? resource.url : "//developer.android.com/" + resource.url;
- $('<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 ellipsis')
- .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', plusurl))))
- .appendTo(this);
- }
+
+ $('<div>').addClass('card-info' + (!resource.summary ? ' empty-desc' : ''))
+ .append($('<div>').addClass('section').text(section))
+ .append($('<div>').addClass('title').html(resource.title))
+ .append(buildResourceCardDescription(resource, plusone))
+ .appendTo(this);
return this;
};
@@ -3909,7 +3965,39 @@
return this;
};
+
+
+
+
+ /* Render other types of resource styles that are not cards. */
+ $.fn.decorateResource = function(resource, opts) {
+ var imgUrl = resource.image ||
+ 'assets/images/resource-card-default-android.jpg';
+ var linkUrl = resource.url;
+
+ if (imgUrl.indexOf('//') === -1) {
+ imgUrl = toRoot + imgUrl;
+ }
+
+ if (linkUrl && linkUrl.indexOf('//') === -1) {
+ linkUrl = toRoot + linkUrl;
+ }
+
+ $(this).append(
+ $('<div>').addClass('image')
+ .css('background-image', 'url(' + imgUrl + ')'),
+ $('<div>').addClass('info').append(
+ $('<h4>').addClass('title').html(resource.title),
+ $('<p>').addClass('summary').html(resource.summary),
+ $('<a>').attr('href', linkUrl).addClass('cta').html('Learn More')
+ )
+ );
+
+ return this;
+ };
})(jQuery);
+
+
/* Calculate the vertical area remaining */
(function($) {
$.fn.ellipsisfade= function(lineHeight) {
@@ -3931,3 +4019,189 @@
return this;
};
}) (jQuery);
+
+/*
+ Fullscreen Carousel
+
+ The following allows for an area at the top of the page that takes over the
+ entire browser height except for its top offset and an optional bottom
+ padding specified as a data attribute.
+
+ HTML:
+
+ <div class="fullscreen-carousel">
+ <div class="fullscreen-carousel-content">
+ <!-- content here -->
+ </div>
+ <div class="fullscreen-carousel-content">
+ <!-- content here -->
+ </div>
+
+ etc ...
+
+ </div>
+
+ Control over how the carousel takes over the screen can mostly be defined in
+ a css file. Setting min-height on the .fullscreen-carousel-content elements
+ will prevent them from shrinking to far vertically when the browser is very
+ short, and setting max-height on the .fullscreen-carousel itself will prevent
+ the area from becoming to long in the case that the browser is stretched very
+ tall.
+
+ There is limited functionality for having multiple sections since that request
+ was removed, but it is possible to add .next-arrow and .prev-arrow elements to
+ scroll between multiple content areas.
+*/
+
+(function() {
+ $(document).ready(function() {
+ $('.fullscreen-carousel').each(function() {
+ initWidget(this);
+ });
+ });
+
+ function initWidget(widget) {
+ var $widget = $(widget);
+
+ var topOffset = $widget.offset().top;
+ var padBottom = parseInt($widget.data('paddingbottom')) || 0;
+ var maxHeight = 0;
+ var minHeight = 0;
+ var $content = $widget.find('.fullscreen-carousel-content');
+ var $nextArrow = $widget.find('.next-arrow');
+ var $prevArrow = $widget.find('.prev-arrow');
+ var $curSection = $($content[0]);
+
+ if ($content.length <= 1) {
+ $nextArrow.hide();
+ $prevArrow.hide();
+ } else {
+ $nextArrow.click(function() {
+ var index = ($content.index($curSection) + 1);
+ $curSection.hide();
+ $curSection = $($content[index >= $content.length ? 0 : index]);
+ $curSection.show();
+ });
+
+ $prevArrow.click(function() {
+ var index = ($content.index($curSection) - 1);
+ $curSection.hide();
+ $curSection = $($content[index < 0 ? $content.length - 1 : 0]);
+ $curSection.show();
+ });
+ }
+
+ // Just hide all content sections except first.
+ $content.each(function(index) {
+ if ($(this).height() > minHeight) minHeight = $(this).height();
+ $(this).css({position: 'absolute', display: index > 0 ? 'none' : ''});
+ });
+
+ // Register for changes to window size, and trigger.
+ $(window).resize(resizeWidget);
+ resizeWidget();
+
+ function resizeWidget() {
+ var height = $(window).height() - topOffset - padBottom;
+ $widget.width($(window).width());
+ $widget.height(height < minHeight ? minHeight :
+ (maxHeight && height > maxHeight ? maxHeight : height));
+ }
+ }
+})();
+
+
+
+
+
+/*
+ Tab Carousel
+
+ The following allows tab widgets to be installed via the html below. Each
+ tab content section should have a data-tab attribute matching one of the
+ nav items'. Also each tab content section should have a width matching the
+ tab carousel.
+
+ HTML:
+
+ <div class="tab-carousel">
+ <ul class="tab-nav">
+ <li><a href="#" data-tab="handsets">Handsets</a>
+ <li><a href="#" data-tab="wearable">Wearable</a>
+ <li><a href="#" data-tab="tv">TV</a>
+ </ul>
+
+ <div class="tab-carousel-content">
+ <div data-tab="handsets">
+ <!--Full width content here-->
+ </div>
+
+ <div data-tab="wearable">
+ <!--Full width content here-->
+ </div>
+
+ <div data-tab="tv">
+ <!--Full width content here-->
+ </div>
+ </div>
+ </div>
+
+*/
+(function() {
+ $(document).ready(function() {
+ $('.tab-carousel').each(function() {
+ initWidget(this);
+ });
+ });
+
+ function initWidget(widget) {
+ var $widget = $(widget);
+ var $nav = $widget.find('.tab-nav');
+ var $anchors = $nav.find('[data-tab]');
+ var $li = $nav.find('li');
+ var $contentContainer = $widget.find('.tab-carousel-content');
+ var $tabs = $contentContainer.find('[data-tab]');
+ var $curTab = $($tabs[0]); // Current tab is first tab.
+ var width = $widget.width();
+
+ // Setup nav interactivity.
+ $anchors.click(function(evt) {
+ evt.preventDefault();
+ var query = '[data-tab=' + $(this).data('tab') + ']';
+ transitionWidget($tabs.filter(query));
+ });
+
+ // Add highlight for navigation on first item.
+ var $highlight = $('<div>').addClass('highlight')
+ .css({left:$li.position().left + 'px', width:$li.outerWidth() + 'px'})
+ .appendTo($nav);
+
+ // Store height since we will change contents to absolute.
+ $contentContainer.height($contentContainer.height());
+
+ // Absolutely position tabs so they're ready for transition.
+ $tabs.each(function(index) {
+ $(this).css({position: 'absolute', left: index > 0 ? width + 'px' : '0'});
+ });
+
+ function transitionWidget($toTab) {
+ if (!$curTab.is($toTab)) {
+ var curIndex = $tabs.index($curTab[0]);
+ var toIndex = $tabs.index($toTab[0]);
+ var dir = toIndex > curIndex ? 1 : -1;
+
+ // Animate content sections.
+ $toTab.css({left:(width * dir) + 'px'});
+ $curTab.animate({left:(width * -dir) + 'px'});
+ $toTab.animate({left:'0'});
+
+ // Animate navigation highlight.
+ $highlight.animate({left:$($li[toIndex]).position().left + 'px',
+ width:$($li[toIndex]).outerWidth() + 'px'})
+
+ // Store new current section.
+ $curTab = $toTab;
+ }
+ }
+ }
+})();
\ No newline at end of file
diff --git a/tools/droiddoc/templates-sdk/components/masthead.cs b/tools/droiddoc/templates-sdk/components/masthead.cs
index 8dc6ed9..55aaeb9 100644
--- a/tools/droiddoc/templates-sdk/components/masthead.cs
+++ b/tools/droiddoc/templates-sdk/components/masthead.cs
@@ -1,4 +1,7 @@
<?cs def:custom_masthead() ?>
+<?cs if:preview ?>
+ <?cs call:preview_masthead() ?>
+<?cs else ?>
<a name="top"></a>
<?cs if:!devsite ?><?cs # leave out the global header for devsite; it is in devsite template ?>
<!-- Header -->
@@ -247,5 +250,51 @@
</div>
</div>
-<?cs /if ?><?cs # end if/else !devsite ?><?cs
+<?cs /if ?><?cs # end if/else !devsite ?>
+<?cs /if ?><?cs # end if/else preview ?><?cs
/def ?>
+
+<?cs def:preview_masthead() ?>
+<a name="top"></a>
+
+
+<!-- Header -->
+<div id="header-wrapper">
+ <div id="header">
+ <div class="wrap" id="header-wrap">
+ <div class="col_3 logo landing-logo" style="width:240px">
+ <a href="<?cs var:toroot ?>index.html">
+ <img src="<?cs var:toroot ?>preview/images/android.png"
+ style="margin-top:8px" height="16" alt="L Developer Preview" />
+ </a>
+ </div>
+ <div class="col-8" style="margin:0"><h1 style="margin: 8px 0 0 0px;padding:0;line-height:16px;
+color:#666;font-weight:100;font-size:24px;">L Developer Preview</h1></div>
+
+ <?cs # ADD SEARCH AND MENU ?>
+ <?cs call:header_search_widget() ?>
+
+ </div><!-- end header-wrap -->
+ </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> <!--end header-wrapper -->
+
+<div id="sticky-header">
+ <div>
+ <a class="logo" href="#top"></a>
+ <a class="top" href="#top"></a>
+ <ul class="breadcrumb">
+ <?cs # More <li> elements added here with javascript ?>
+ <?cs if:!section.landing ?><li class="current"><?cs var:page.title ?></li><?cs
+ /if ?>
+ </ul>
+ </div>
+</div>
+
+ <?cs
+/def ?>
\ No newline at end of file
diff --git a/tools/droiddoc/templates-sdk/customizations.cs b/tools/droiddoc/templates-sdk/customizations.cs
index 27822d5..79cdd89 100644
--- a/tools/droiddoc/templates-sdk/customizations.cs
+++ b/tools/droiddoc/templates-sdk/customizations.cs
@@ -290,6 +290,22 @@
</script>
<?cs /def ?>
+<?cs
+def:preview_nav() ?>
+ <div class="wrap clearfix" id="body-content">
+ <div class="col-4" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
+ <div id="devdoc-nav" class="scroll-pane">
+ <?cs
+ include:"../../../../frameworks/base/docs/html/preview/preview_toc.cs" ?>
+ </div>
+ </div> <!-- end side-nav -->
+ <script>
+ $(document).ready(function() {
+ scrollIntoView("devdoc-nav");
+ });
+ </script>
+<?cs /def ?>
+
<?cs # The default side navigation for the reference docs ?><?cs
def:default_left_nav() ?>
<?cs if:reference.gcm || reference.gms ?>
@@ -537,6 +553,8 @@
call:distribute_nav() ?><?cs
elif:wear ?><?cs
call:wear_nav() ?><?cs
+ elif:preview ?><?cs
+ call:preview_nav() ?><?cs
else ?><?cs
call:default_left_nav() ?> <?cs
/if ?><?cs
diff --git a/tools/droiddoc/templates-sdk/head_tag.cs b/tools/droiddoc/templates-sdk/head_tag.cs
index fb6aa73..d8d3f49 100644
--- a/tools/droiddoc/templates-sdk/head_tag.cs
+++ b/tools/droiddoc/templates-sdk/head_tag.cs
@@ -40,7 +40,7 @@
title="roboto">
<link href="<?cs var:toroot ?>assets/css/default.css" rel="stylesheet" type="text/css">
-<?cs if:reference && !(reference.gms || reference.gcm || wear) ?>
+<?cs if:reference && !(reference.gms || reference.gcm || preview) ?>
<!-- FULLSCREEN STYLESHEET -->
<link href="<?cs var:toroot ?>assets/css/fullscreen.css" rel="stylesheet" class="fullscreen"
type="text/css">