diff --git a/tools/droiddoc/templates-sdk-dev/assets/css/default.css b/tools/droiddoc/templates-sdk-dev/assets/css/default.css index 43449d4da..e422d75ce 100644 --- a/tools/droiddoc/templates-sdk-dev/assets/css/default.css +++ b/tools/droiddoc/templates-sdk-dev/assets/css/default.css @@ -86,6 +86,11 @@ body { #page-footer #copyright { margin-bottom: 10px; } +.hide-text { + position: absolute; + text-indent: -9999px; +} + #nav-container { width: 160px; min-height: 10px; @@ -150,10 +155,44 @@ img { max-width: 100%; vertical-align: middle; } + video { + cursor: pointer; + margin-bottom: 10px; /* same as img */ max-width: 100%; object-fit: cover; } + +.video-wrapper { + line-height: 0; + margin-bottom: 10px; /* same as img */ + position: relative; +} + +.video-wrapper video { + margin:0; +} + +.video-wrapper:before { + background: rgba(0, 0, 0, 0.5) url(//material-design.storage.googleapis.com/images/play.svg) no-repeat center center; + background-size: 72px 72px; + bottom: 0; + content: ""; + left: 0; + position: absolute; + right: 0; + top: 0; + transition: opacity .2s; +} + +.video-wrapper:hover:before { + opacity: .7; +} + +.video-wrapper.playing:before { + opacity: 0; +} + q { quotes: none; } @@ -283,7 +322,8 @@ li p, li pre, li ul, li ol, -li dl { +li dl, +#body-content li img { margin-top: 6px; margin-bottom: 6px; } @@ -346,6 +386,10 @@ th { border:solid 1px #DDD; font-weight: normal; } +tr.alt th { + color:inherit; + background-color: #e0e0e0; +} tr:first-of-type th:first-of-type:empty { visibility: hidden; } @@ -355,8 +399,18 @@ a.external-link { padding-right:16px; } -#jd-content img { - margin-bottom:15px; +#body-content img { + margin-bottom:12px; +} + +#body-content p>img { + margin-bottom:0; +} + +#body-content img.inline-icon { + vertical-align:sub; + margin:0; + height:16px; } em { @@ -1007,6 +1061,35 @@ scroll top left; overflow:hidden; } +#api-info-block { + color: #999; + float: right; + font-size: 12px; + font-weight: normal; + line-height: 14px; + margin: 20px 0 0; + max-width: 80%; + padding: 0 10px 6px; + text-align: right; +} + +#api-info-block a, +#api-info-block a:active, +#api-info-block a:visited { + color: #222; +} + +#jd-header { + font-size: 12px; + margin: 20px 0 12px; + padding: 0 0 12px; +} + +#jd-header h1 { + margin: 0; + padding: 0 0 6px; +} + #jd-content .framed-wear-square img { height:222px; @@ -1218,6 +1301,12 @@ color-stop(50%, #acbc00), color-stop(50%, #bdde00), color-stop(100%, #bdde00)); .locales form { margin: 0; } + +.locales select, +.locales option { + text-transform: capitalize; +} + .locales select, .sites select { line-height: 3.08; margin: 0px 0; @@ -1439,6 +1528,7 @@ color-stop(50%, #acbc00), color-stop(50%, #bdde00), color-stop(100%, #bdde00)); #tb ol, #tb ul, +#tb p, #qv ul { list-style-type: none; margin:0 15px 10px 15px; @@ -1451,10 +1541,6 @@ color-stop(50%, #acbc00), color-stop(50%, #bdde00), color-stop(100%, #bdde00)); position: relative; } -#tb p { - margin:0 15px 10px; -} - #qv ol { list-style:none; margin:0 15px 15px; @@ -1472,8 +1558,7 @@ color-stop(50%, #acbc00), color-stop(50%, #bdde00), color-stop(100%, #bdde00)); } .sidebox p, -#qv p, -#tb p { +#qv p { margin: 0 0 10px; } @@ -1837,26 +1922,34 @@ a:visited { #doc-content-container { margin-left: 291px } + #doc-header, #doc-content { - padding: 1em 2em; + padding: 0; } + #doc-header { background: #f7f7f7; } + #doc-header h1 { line-height: 0; padding-bottom: 15px; } + + #api-info-block { float: right; font-weight: bold; } + #api-info-block a, #api-info-block a:active, #api-info-block a:visited { color: #222; } + #api-info-block a:hover, #api-info-block a:focus { color: #33B5E5; } + #api-nav-header { height:19px; /* plus 16px padding = 35; same as #nav li */ font-size:14px; @@ -1867,6 +1960,7 @@ a:visited { background: rgba(0, 0, 0, 0.05); /* matches #nav li.expanded */ line-height: 19px; /* Fix regression after page line-height is bumped to 24px */ } + #api-nav-title { padding:0 5px; white-space:nowrap; @@ -1890,6 +1984,7 @@ a:visited { display: inline-block; overflow: hidden; } + #api-level-toggle select { border: 0; appearance:none; @@ -2075,7 +2170,7 @@ div#codesample-resource .noDisplay-message:after { Styles for project structure (treeview) page */ .structure-dir { -background-image:url(../../assets/images/folder.png); +background-image:url(../images/folder.png); background-repeat:no-repeat; background-position:16px 2px; margin:.25em 0 0 0; @@ -2089,7 +2184,7 @@ background-position:16px 2px; } .structure-java{ -background-image:url(../../assets/images/file-java.png); +background-image:url(../images/file-java.png); background-repeat:no-repeat; background-position:0px 2px; margin:.3em 0 0 0; @@ -2097,7 +2192,7 @@ background-position:0px 2px; } .structure-file { -background-image:url(../../assets/images/file-generic.png); +background-image:url(../images/file-generic.png); background-repeat:no-repeat; background-position:0px 2px; margin:.3em 0 0 0; @@ -2105,7 +2200,7 @@ background-position:0px 2px; } .structure-xml { -background-image:url(../../assets/images/file-xml.png); +background-image:url(../images/file-xml.png); background-repeat:no-repeat; background-position:0px 2px; margin:.3em 0 0 0; @@ -2113,7 +2208,7 @@ background-position:0px 2px; } .structure-img { -background-image:url(../../assets/images/file-image.png); +background-image:url(../images/file-image.png); background-repeat:no-repeat; background-position:0px 2px; margin:.3em 0 0 0; @@ -2121,7 +2216,7 @@ background-position:0px 2px; } .structure-manifest { -background-image:url(../../assets/images/file-manifest.png); +background-image:url(../images/file-manifest.png); background-repeat:no-repeat; margin:.0 0 0 1.25em; padding:0 0 0 22px; @@ -2219,6 +2314,25 @@ table.blank th, table.blank td { list-style:none; margin-left:0; } + +ol.callouts { + counter-reset: item; + list-style-type: none; + margin-left:44px; +} +ol.callouts>li:before { + counter-increment: item; + content: counter(item); + position: absolute; + color:#fff; + font-weight:bold; + background-image:url(../images/styles/callout-bg_2x.png); + background-size:24px; + width:16px; + padding-left:8px; + margin-left:-34px; +} + #tb .nolist { margin-left:15px; } @@ -2481,20 +2595,20 @@ a.notice-developers div, a.notice-designers-video div, a.notice-designers div { min-height:40px; - background:url('../images/styles/notice-developers@2x.png') no-repeat 10px 10px; + background:url('../images/styles/notice-developers_2x.png') no-repeat 10px 10px; background-size:40px 40px; padding:10px 10px 10px 60px; } a.notice-designers div { - background:url('../images/styles/notice-designers@2x.png') no-repeat 10px 10px; + background:url('../images/styles/notice-designers_2x.png') no-repeat 10px 10px; background-size:40px 40px; } a.notice-designers-video div { - background:url('../images/styles/notice-designers-video@2x.png') no-repeat 10px 10px; + background:url('../images/styles/notice-designers-video_2x.png') no-repeat 10px 10px; background-size:40px 40px; } a.notice-developers-video div { - background:url('../images/styles/notice-developers-video@2x.png') no-repeat 10px 10px; + background:url('../images/styles/notice-developers-video_2x.png') no-repeat 10px 10px; background-size:40px 40px; } a.notice-developers-video:hover, @@ -3209,11 +3323,16 @@ table.jd-tagtable th { } /* offset the tags to account for sticky nav */ -body.reference a[name] { +body.reference a[name]:not(.nav-start-marker) { visibility: hidden; display: block; position: relative; top: -56px; + +} + +.nav-start-marker { + position: absolute; } @@ -4805,7 +4924,7 @@ a.home-new-cta-btn:hover, background-color: #fff; background-position: 50% 53%; background-size: cover; - background-image: url(../../assets/images/home/android_m_hero_1200.jpg); + background-image: url(../images/home/android_m_hero_1200.jpg); box-sizing: border-box; font-size: 16px; min-height: 550px; @@ -5117,45 +5236,124 @@ a.home-new-cta-btn:hover, left: 0; overflow: hidden; background: #fefefe; - padding: 6px 12px; } - .card-info .section { - color: #898989; - font-size: 11px; - font-weight: 700; - letter-spacing: .3px; - line-height: 20px; - text-transform: uppercase; } - .card-info .title { - color: #333; - font-size: 18px; - font-weight: 500; - line-height: 23px; - margin-bottom: 7px; - max-height: 46px; - overflow: hidden; - text-overflow: ellipsis; - white-space: normal; } - .card-info .description { - overflow: hidden; } - .card-info .description .text { - color: #666; - font-size: 14px; - height: 60px; - line-height: 20px; - overflow: hidden; - width: 100%; } - .card-info .description .util { - position: absolute; - right: 5px; - bottom: 70px; - opacity: 0; - -webkit-transition: opacity 0.5s; - transition: opacity 0.5s; } - .card-info.empty-desc .title { - white-space: normal; - overflow: visible; } - .card-info.empty-desc .description { - display: none; } + padding: 6px 12px; +} + +.card-info .section { + color: #898989; + font-size: 11px; + font-weight: 700; + letter-spacing: .3px; + line-height: 20px; + text-transform: uppercase; +} + +.card-info .title { + color: #333; + font-size: 18px; + font-weight: 500; + line-height: 23px; + margin-bottom: 7px; + max-height: 46px; + overflow: hidden; + text-overflow: ellipsis; + white-space: normal; +} + +.card-info .description { + overflow: hidden; +} + +.card-info .description .text { + color: #666; + font-size: 14px; + height: 60px; + line-height: 20px; + overflow: hidden; + width: 100%; +} + +.card-info .description .util { + position: absolute; + right: 5px; + bottom: 70px; + opacity: 0; + -webkit-transition: opacity 0.5s; + transition: opacity 0.5s; +} + +.card-info.empty-desc .title { + white-space: normal; + overflow: visible; +} + +.card-info.empty-desc .description { + display: none; +} + +/* Resource card with icon instead of bg image */ +.resource-widget-card-icon { + text-align: center; +} + +.card-icon { + margin: 20px 0 0; +} + +.resource-widget-card-icon .card-info { + height: 210px; +} + +.resource-widget-card-icon .card-info .title { + color: #333; + line-height: 24px; +} + +.resource-widget-card-icon .card-bg { + background: none; + bottom: 220px; + opacity: 1; + top: 30px; + -webkit-transition: opacity .3s; + transition: opacity .3s; +} + +.resource-widget-card-icon .resource-card:hover .card-bg { + opacity: .5; +} + +.resource-widget-card-icon .card-bg img { + max-height: 100%; +} + +.resource-widget-card-icon .card-bg::after { + background: transparent; +} + +@media (min-width: 1210px) { + .resource-widget-card-icon .resource { + height: 240px; + } + .resource-widget-card-icon .card-bg { + bottom: 160px; + } + .resource-widget-card-icon .card-info { + height: 160px; + } +} + +@media (max-width: 979px) { + .resource-widget-card-icon .resource { + height: 240px; + } + .resource-widget-card-icon .card-bg { + bottom: 160px; + } + + .resource-widget-card-icon .card-info { + height: 160px; + } +} /* Truncate card summaries at bounding box and * and apply ellipsis at lower right */ @@ -5544,26 +5742,54 @@ a.home-new-cta-btn:hover, height: 558px; } /* 1/3 row items */ -.resource-card-3x2 > .card-bg, .resource-card-6x2 > .card-bg, .resource-card-9x2 > .card-bg, .resource-card-12x2 > .card-bg, .resource-card-15x2 > .card-bg, .resource-card-18x2 > .card-bg { +.resource-card-3x2 > .card-bg, +.resource-card-6x2 > .card-bg, +.resource-card-9x2 > .card-bg, +.resource-card-12x2 > .card-bg, +.resource-card-15x2 > .card-bg, +.resource-card-18x2 > .card-bg { left: 0; top: 0; width: 90px; height: 100%; position: absolute; - display: block; } + display: block; +} .resource-card-3x2 > .card-info, .resource-card-6x2 > .card-info, .resource-card-9x2 > .card-info, .resource-card-12x2 > .card-info, .resource-card-15x2 > .card-info, .resource-card-18x2 > .card-info { height: 100%; left: 90px; padding: 6px 12px; - overflow: hidden; } - .resource-card-3x2 > .card-info .title, .resource-card-6x2 > .card-info .title, .resource-card-9x2 > .card-info .title, .resource-card-12x2 > .card-info .title, .resource-card-15x2 > .card-info .title, .resource-card-18x2 > .card-info .title { - max-height: 69px; - white-space: normal; } - .resource-card-3x2 > .card-info .description, .resource-card-6x2 > .card-info .description, .resource-card-9x2 > .card-info .description, .resource-card-12x2 > .card-info .description, .resource-card-15x2 > .card-info .description, .resource-card-18x2 > .card-info .description { - display: none; } - .resource-card-3x2 > .card-info .text, .resource-card-6x2 > .card-info .text, .resource-card-9x2 > .card-info .text, .resource-card-12x2 > .card-info .text, .resource-card-15x2 > .card-info .text, .resource-card-18x2 > .card-info .text { - height: auto; } + overflow: hidden; +} + +.resource-card-3x2 > .card-info .title, +.resource-card-6x2 > .card-info .title, +.resource-card-9x2 > .card-info .title, +.resource-card-12x2 > .card-info .title, +.resource-card-15x2 > .card-info .title, +.resource-card-18x2 > .card-info .title { + max-height: 69px; + white-space: normal; +} + +.resource-card-3x2 > .card-info .description, +.resource-card-6x2 > .card-info .description, +.resource-card-9x2 > .card-info .description, +.resource-card-12x2 > .card-info .description, +.resource-card-15x2 > .card-info .description, +.resource-card-18x2 > .card-info .description { + display: none; +} + +.resource-card-3x2 > .card-info .text, +.resource-card-6x2 > .card-info .text, +.resource-card-9x2 > .card-info .text, +.resource-card-12x2 > .card-info .text, +.resource-card-15x2 > .card-info .text, +.resource-card-18x2 > .card-info .text { + height: auto; +} /* Override to show the description instead of the content section */ .no-section .resource-card-3x2 > .card-info .section, @@ -5716,6 +5942,12 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .dac-button.dac-large, .landing-button { padding: 12px 24px; } +.landing-button-wrap { + float: left; + margin-right: 40px; + width: auto; +} + .dac-fab, .dac-button-social { background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); @@ -5825,67 +6057,130 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] margin-top: 96px; padding-bottom: 20px; position: relative; - /* Modifier for landing pages, to snuggle closer to sections. */ } - .dac-footer a { - color: #999; } - .dac-footer p { - margin: 7px 0 0; } - .dac-footer-main { - padding: 30px 0; } +} + +.dac-footer a { + color: #999; +} + +.dac-footer p { + margin: 7px 0 0; +} + +.dac-footer-main { + padding: 30px 0; +} + +.dac-footer-reachout { + text-align: right; +} + +.dac-footer-contact, +.dac-footer-social { + display: inline-block; +} + +.dac-footer .dac-footer-getnews, +.dac-footer .dac-footer-contact-link { + color: #000; + cursor: pointer; + font-size: 20px; + font-weight: 300; + margin: 8px 0; + vertical-align: middle; +} + +.dac-footer .dac-footer-contact-link, +.dac-footer .dac-footer-social-link { + margin-left: 16px; + margin-right: 0; +} + +.dac-footer-getnews > .dac-fab, .dac-footer-getnews > .dac-button-social { + margin-left: 4px; +} + +.dac-footer-separator { + background: #f0f0f0; + margin: 0 0 12px; +} + +.dac-footer-links { + float: left; + margin: 10px 0 60px; + width: 50%; +} + +.dac-footer-links a + a:before { + content: '|'; + cursor: default; + margin: 0 10px 0 8px; +} + +.devsite-utility-footer-language { + float: right; + margin: 10px 0 60px; + width: 50%; +} + +.dac-footer .locales { + float: right; + margin: 0; +} + +.dac-footer .locales select { + background-color: #f0f0f0; + border-radius: 3px; + font-size: 12px; + height: auto; + margin-top: -2px; + padding: 8px 12px; + width: 146px; +} + +.dac-footer.dac-landing { + margin-top: 0; + border-top: 0; +} + +@media (max-width: 719px) { .dac-footer-reachout { - text-align: right; } - .dac-footer-contact, .dac-footer-social { - display: inline-block; } - .dac-footer .dac-footer-getnews, - .dac-footer .dac-footer-contact-link { - color: #000; - cursor: pointer; - font-size: 20px; - font-weight: 300; - margin: 8px 0; - vertical-align: middle; } + text-align: left; + } + + .dac-footer-social { + display: block; + } + + .dac-footer-social-link, + .dac-footer-contact-link { + display: inline-block; + } + .dac-footer .dac-footer-contact-link, .dac-footer .dac-footer-social-link { - margin-left: 16px; - margin-right: 0; } - .dac-footer-getnews > .dac-fab, .dac-footer-getnews > .dac-button-social { - margin-left: 4px; } - .dac-footer-separator { - background: #f0f0f0; - margin: 0 0 12px; } - .dac-footer-links a + a:before { - content: '|'; - cursor: default; - margin: 0 10px 0 8px; } + margin-left: 0; + margin-right: 16px; + } + + .dac-footer-links { + display: block; + float: none; + width: 100%; + } + + .devsite-utility-footer-language { + float: none; + margin: 0 0 20px; + width: 100%; + } + .dac-footer .locales { - float: right; - margin: 0; } - .dac-footer .locales select { - background-color: #f0f0f0; - border-radius: 3px; - font-size: 12px; - height: auto; - margin-top: -2px; - padding: 8px 12px; - width: 146px; } - .dac-footer.dac-landing { - margin-top: 0; - border-top: 0; } - @media (max-width: 719px) { - .dac-footer-reachout { - text-align: left; } - .dac-footer-social { - display: block; } - .dac-footer-social-link, .dac-footer-contact-link { - display: inline-block; } - .dac-footer .dac-footer-contact-link, - .dac-footer .dac-footer-social-link { - margin-left: 0; - margin-right: 16px; } - .dac-footer .locales { - display: block; - float: none; - margin-top: 15px; } } + display: block; + float: none; + margin-top: 15px; + } +} /* ============================================================================= Columns @@ -5893,11 +6188,14 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .wrap { margin: 0 auto; max-width: 940px; - clear: both; } - .dac-fullscreen-mode .wrap { - max-width: none; } + clear: both; +} -.dac-full-screen-mode .dac-search-open .wrap { +.dac-fullscreen-mode .wrap { + max-width: none; +} + +.dac-fullscreen-mode .dac-search-open .wrap { max-width: 940px; } @@ -6569,11 +6867,11 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] z-index: 61; } -.dac-ndk { +.dac-ndk .dac-header { background: #00bcd4; } -.dac-studio { +.dac-studio .dac-header { background: #424242; } @@ -6637,12 +6935,12 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] display: inline-block; } - /* Do not show nav toggle and up-nav button for left nav - in Studio docs, when header tabs are visible */ - body.studio .dac-nav-back-button { + /* Do not show nav toggle and up-nav button for left nav, + when header tabs are visible (when no sub navigation) */ + body.no-subnav .dac-nav-back-button { display:none; } - body.studio .dac-nav-sub { + body.no-subnav .dac-nav-sub { top: 0 !important; } } @@ -6663,7 +6961,8 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] font-weight: 500; } -.dac-header-tab:hover { +.dac-header-tab:hover, +.dac-header-tab:focus { color: #fff; } @@ -6757,7 +7056,7 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] display: inline-block; } -body.studio .dac-header-crumbs { +body.no-crumbs .dac-header-crumbs { display:none; } @@ -6822,6 +7121,10 @@ body.studio .dac-header-crumbs { transition: width 300ms, right 100ms, margin 100ms; } +.dac-studio .dac-header-search { + right: 20px; /* move searchbar farther right, because there's no button */ +} + .dac-header-search-inner { margin: 0 auto; max-width: 940px; @@ -6881,9 +7184,6 @@ body.studio .dac-header-crumbs { width: 100%; } -.dac-studio .dac-header-search { - right:150px; -} .dac-studio .dac-header-search-input { background: rgba(255, 255, 255, 0.3); } @@ -6998,6 +7298,7 @@ body.studio .dac-header-crumbs { } @media (min-width: 720px) and (max-width: 979px) { + .dac-studio .dac-header-search, .dac-header-search { right: 20px; width: 200px; @@ -7168,10 +7469,33 @@ body.studio .dac-header-crumbs { z-index: 1; } -.dac-nav-back-button, .dac-nav-back-button:hover, .dac-nav-back-button:active { +.dac-nav-back-button, +.dac-nav-back-button:hover, +.dac-nav-back-button:active, +.dac-nav-back-button:focus { color: rgba(255, 255, 255, 0.7); } +/* The back button in Studio and NDK left nav */ +.dac-nav-back-button.back-to-dev { + background: none; + color: #444; + position: relative !important; + top: -16px; +} + +.dac-nav-back-button.back-to-dev:hover, +.dac-nav-back-button.back-to-dev:active, +.dac-nav-back-button.back-to-dev:focus { + color: rgba(68, 68, 68, .7); +} + +.dac-nav-back-button:focus .dac-nav-back { + outline-color: rgb(77, 144, 254); + outline-offset: 15px; + outline-style: auto; +} + .dac-nav-back-button > .dac-sprite, .dac-nav-back-button > .dac-modal-header-close:before, .paging-links .dac-nav-back-button > .prev-page-link:before, .paging-links .dac-nav-back-button > .next-page-link:before, .paging-links .dac-nav-back-button > .next-class-link:before, .paging-links .dac-nav-back-button > .start-class-link:after { opacity: .7; } @@ -7335,7 +7659,8 @@ body.studio .dac-header-crumbs { .dac-nav-link { color: #444; display: block; - font-size: 18px; + font-size: 14px; + text-transform: uppercase; font-weight: 500; letter-spacing: .24px; padding: 5px 20px; @@ -7356,6 +7681,7 @@ body.studio .dac-header-crumbs { font-size: 12px; font-weight: 400; padding-left: 40px; + text-transform: none; } .dac-nav-link.selected { @@ -7406,18 +7732,18 @@ body.studio .dac-header-crumbs { padding-left: 250px; } - /* Do not show nav toggle for Studio on large screens */ - body.studio .dac-nav-toggle { + /* Do not show nav toggle on large screens (when no subnav) */ + body.no-subnav .dac-nav-toggle { display:none; } - body.studio .dac-header-logo { + body.no-subnav .dac-header-logo { padding-left:20px; } - /* And if the page has no subcomponent, don't show left nav at all */ - body.studio.None .dac-nav { + /* ...If the page is also full-width, then don't show left nav at all */ + body.no-subnav.full-width .dac-nav { display: none; } - body.studio.None #body-content { + body.no-subnav.full-width #body-content { padding-left:0; } } @@ -7436,6 +7762,10 @@ body.studio .dac-header-crumbs { height: 100%; } +.data-reference-resources-wrapper { + display: none; +} + .dac-reference-nav { height: calc(100% - 36px); overflow: hidden; @@ -7480,11 +7810,12 @@ body.studio .dac-header-crumbs { padding: 0 0 0 13px; } -.dac-reference-nav-resource, .dac-reference-nav-toggle { +.dac-reference-nav-resource, +.dac-reference-nav-toggle { color: #505050; cursor: pointer; display: block; - font-size: 13px; + font-size: 12px; line-height: 1; overflow: hidden; margin: 0; @@ -7581,7 +7912,7 @@ body.studio .dac-header-crumbs { display: none; } -#nav .nav-section-header:after { +#nav .nav-section-header .toggle-icon { background: transparent url(../images/styles/disclosure_down.png) no-repeat scroll 50% 50%; content: ''; height: 34px; @@ -7616,7 +7947,7 @@ body.studio .dac-header-crumbs { padding: 0 10px; } -#nav li.expanded > .nav-section-header:after { +#nav li.expanded > .nav-section-header .toggle-icon { content: ''; background: transparent url(../images/styles/disclosure_up.png) no-repeat scroll 50% 50%; width: 34px; @@ -7774,7 +8105,26 @@ body.studio .dac-header-crumbs { top: 0; } +.dac-hero { + background-size: cover; + position: relative; +} + +.dac-hero-headline { + background-color: #fff; + bottom: 25px; + float: none !important; + padding: 0 10px 10px; + position: absolute; + right: 0; + z-index: 2; +} + @media (max-width: 719px) { + .dac-hero-headline { + bottom: 0; + } + .dac-hero.dac-darken::before { background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9) 80%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9) 80%); @@ -7804,6 +8154,10 @@ body.studio .dac-header-crumbs { margin: 0 0 14px; } +.dac-studio .dac-hero-title { + padding-top:0; +} + @media (max-width: 719px) { .dac-hero-title { font-size: 28px; @@ -7838,6 +8192,24 @@ body.studio .dac-header-crumbs { margin-left: -8px; } +.dac-hero-cta.col-16 { + line-height: 1.4em; + margin-top: 20px; + padding-left: 0; + position: relative; +} + +.dac-hero-cta.col-16 .dac-sprite { + position: absolute; + left: 0; + top: -3px; +} + +.dac-hero-cta.col-16 .dac-sprite-text { + position: relative; + left: 12px; +} + @media (max-width: 719px) { .dac-hero-cta { line-height: 28px; @@ -7849,16 +8221,16 @@ body.studio .dac-header-crumbs { } /* Android Studio download page */ -section#features { +.dac-studio section#features { padding-top:0; } -.wrap.feature { +.dac-studio .wrap.feature { margin:80px auto; } -.dac-section-links.feature-more { +.dac-studio .dac-section-links.feature-more { margin-top:-20px; } -.dac-toggle-content .wrap.feature { +.dac-studio .dac-toggle-content .wrap.feature { margin-top:0; } @@ -7873,12 +8245,12 @@ section#features { } /* Android Studio download page */ - .feature .dac-hero-figure, - .feature .dac-hero-figure img { + .dac-studio .feature .dac-hero-figure, + .dac-studio .feature .dac-hero-figure img { height:auto; max-height:none; } - .feature .dac-hero-figure img { + .dac-studio .feature .dac-hero-figure img { width:90%; margin:0 auto; } @@ -9028,6 +9400,33 @@ ul.dac-search-results-reference.is-expanded li[data-toggle="show-more"] { background-color: #dc4d38; } +.dac-blue.dac-hero, +.dac-blue.dac-section { + background-color: #0277bd; +} + +.dac-blue.dac-invert .dac-hero-description, +.dac-blue.dac-invert .dac-section-subtitle { + color: #fff; +} + +.dac-dark-gray.dac-hero, +.dac-dark-gray.dac-section { + background-color: #455a64; +} + +.dac-bg-opacity::after { + background-color: rgba(0, 0, 0, .3); + content : ""; + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; +} + .dac-hero-cta, .dac-section-title, .dac-section-links { color: #212121; color: rgba(0, 0, 0, 0.87); @@ -9055,6 +9454,47 @@ ul.dac-search-results-reference.is-expanded li[data-toggle="show-more"] { color: rgba(255, 255, 255, 0.7); } +.dac-hero.dac-no-min-height { + min-height: 0; +} + +.dac-hero-half-bg { + background-size: cover; + background-repeat: no-repeat; + float: right; + height: 440px; +} + +.dac-hero-half-bg-centered { + background-position: center; + background-repeat: no-repeat; + background-size: cover; + float: right; + height: 440px; +} + +@media only screen and (-webkit-min-device-pixel-ratio: 2), +only screen and (-moz-min-device-pixel-ratio: 2), +only screen and (min-device-pixel-ratio: 2), +only screen and (min-resolution: 192dpi), +only screen and (min-resolution: 2dppx) { + .dac-hero-half-bg, + .dac-hero-half-bg-centered { + background-size: "" ""; + } +} + +@media (max-width: 719px) { + .dac-hero-half-bg, + .dac-hero-half-bg-centered { + background-position: center; + background-size: auto 100%; + float: none; + height: 200px; + margin-top: 32px; + } +} + .dac-section { background-position: 50% 50%; background-size: cover; @@ -9070,7 +9510,8 @@ ul.dac-search-results-reference.is-expanded li[data-toggle="show-more"] { } } -.dac-section.dac-small { +.dac-section.dac-small, +.dac-hero.dac-small { padding-bottom: 32px; padding-top: 32px; } @@ -9146,34 +9587,76 @@ $spritesheet: width height image $spritesheet-sprites; */ .dac-sprite, .dac-modal-header-close:before, .paging-links .prev-page-link:before, .paging-links .next-page-link:before, .paging-links .next-class-link:before, .paging-links .start-class-link:after, .Video-button--picture-in-picture, .Video-button--close, a.video-shadowbox-button.white::after, #tb li:before, #qv li:before { - background-image: url(/assets/images/sprite.png); + background-image: url(../images/sprite.png); display: inline-block; - vertical-align: middle; } - @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx), (min-resolution: 144px) { - .dac-sprite, .dac-modal-header-close:before, .paging-links .prev-page-link:before, .paging-links .next-page-link:before, .paging-links .next-class-link:before, .paging-links .start-class-link:after, .Video-button--picture-in-picture, .Video-button--close, a.video-shadowbox-button.white::after, #tb li:before, - #qv li:before { - background-image: url(/assets/images/sprite@2x.png); - background-size: 36px 883px; } } + vertical-align: middle; +} -.dac-sprite.dac-auto-chevron, .dac-auto-chevron.dac-modal-header-close:before, .paging-links .dac-auto-chevron.prev-page-link:before, .paging-links .dac-auto-chevron.next-page-link:before, .paging-links .dac-auto-chevron.next-class-link:before, .paging-links .dac-auto-chevron.start-class-link:after { +@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx), (min-resolution: 144px) { + + .dac-sprite, + .dac-modal-header-close:before, + .paging-links .prev-page-link:before, + .paging-links .next-page-link:before, + .paging-links .next-class-link:before, + .paging-links .start-class-link:after, + .Video-button--picture-in-picture, + .Video-button--close, + a.video-shadowbox-button.white::after, + #tb li:before, + #qv li:before { + background-image: url(../images/sprite_2x.png); + background-size: 36px 900px; + } +} + +.dac-chevron { + background-size: 9px 39px; + display: inline-block; + height: 13px; + text-indent: -9999px; + width: 9px; +} + +.dac-sprite.dac-auto-chevron, +.dac-auto-chevron.dac-modal-header-close:before, +.paging-links .dac-auto-chevron.prev-page-link:before, +.paging-links .dac-auto-chevron.next-page-link:before, +.paging-links .dac-auto-chevron.next-class-link:before, +.paging-links .dac-auto-chevron.start-class-link:after { background-position: 0px -669px; height: 24px; width: 24px; - vertical-align: -6px; } - .dac-invert .dac-sprite.dac-auto-chevron, .dac-invert .dac-auto-chevron.dac-modal-header-close:before, .dac-invert .paging-links .dac-auto-chevron.prev-page-link:before, .paging-links .dac-invert .dac-auto-chevron.prev-page-link:before, .dac-invert .paging-links .dac-auto-chevron.next-page-link:before, .paging-links .dac-invert .dac-auto-chevron.next-page-link:before, .dac-invert .paging-links .dac-auto-chevron.next-class-link:before, .paging-links .dac-invert .dac-auto-chevron.next-class-link:before, .dac-invert .paging-links .dac-auto-chevron.start-class-link:after, .paging-links .dac-invert .dac-auto-chevron.start-class-link:after { - background-position: 0px -513px; - height: 24px; - width: 24px; } + vertical-align: -6px; +} + +.dac-invert .dac-sprite.dac-auto-chevron, .dac-invert .dac-auto-chevron.dac-modal-header-close:before, .dac-invert .paging-links .dac-auto-chevron.prev-page-link:before, .paging-links .dac-invert .dac-auto-chevron.prev-page-link:before, .dac-invert .paging-links .dac-auto-chevron.next-page-link:before, .paging-links .dac-invert .dac-auto-chevron.next-page-link:before, .dac-invert .paging-links .dac-auto-chevron.next-class-link:before, .paging-links .dac-invert .dac-auto-chevron.next-class-link:before, .dac-invert .paging-links .dac-auto-chevron.start-class-link:after, .paging-links .dac-invert .dac-auto-chevron.start-class-link:after { + background-position: 0px -513px; + height: 24px; + width: 24px; +} .dac-sprite.dac-auto-chevron-large, .dac-auto-chevron-large.dac-modal-header-close:before, .paging-links .dac-auto-chevron-large.prev-page-link:before, .paging-links .dac-auto-chevron-large.next-page-link:before, .paging-links .dac-auto-chevron-large.next-class-link:before, .paging-links .dac-auto-chevron-large.start-class-link:after { background-position: 0px -695px; height: 36px; width: 36px; - vertical-align: -10px; } - .dac-invert .dac-sprite.dac-auto-chevron-large, .dac-invert .dac-auto-chevron-large.dac-modal-header-close:before, .dac-invert .paging-links .dac-auto-chevron-large.prev-page-link:before, .paging-links .dac-invert .dac-auto-chevron-large.prev-page-link:before, .dac-invert .paging-links .dac-auto-chevron-large.next-page-link:before, .paging-links .dac-invert .dac-auto-chevron-large.next-page-link:before, .dac-invert .paging-links .dac-auto-chevron-large.next-class-link:before, .paging-links .dac-invert .dac-auto-chevron-large.next-class-link:before, .dac-invert .paging-links .dac-auto-chevron-large.start-class-link:after, .paging-links .dac-invert .dac-auto-chevron-large.start-class-link:after { - background-position: 0px -771px; - height: 36px; - width: 36px; } + vertical-align: -10px; +} + +.dac-invert .dac-sprite.dac-auto-chevron-large, +.dac-invert .dac-auto-chevron-large.dac-modal-header-close:before, +.dac-invert .paging-links .dac-auto-chevron-large.prev-page-link:before, +.paging-links .dac-invert .dac-auto-chevron-large.prev-page-link:before, +.dac-invert .paging-links .dac-auto-chevron-large.next-page-link:before, +.paging-links .dac-invert .dac-auto-chevron-large.next-page-link:before, +.dac-invert .paging-links .dac-auto-chevron-large.next-class-link:before, +.paging-links .dac-invert .dac-auto-chevron-large.next-class-link:before, +.dac-invert .paging-links .dac-auto-chevron-large.start-class-link:after, +.paging-links .dac-invert .dac-auto-chevron-large.start-class-link:after { + background-position: 0px -771px; + height: 36px; + width: 36px; +} .dac-sprite.dac-auto-unfold-less, .dac-auto-unfold-less.dac-modal-header-close:before, .paging-links .dac-auto-unfold-less.prev-page-link:before, .paging-links .dac-auto-unfold-less.next-page-link:before, .paging-links .dac-auto-unfold-less.next-class-link:before, .paging-links .dac-auto-unfold-less.start-class-link:after { background-position: 0px -487px; @@ -9295,6 +9778,13 @@ $spritesheet: width height image $spritesheet-sprites; height: 16px; width: 16px; } +/* The back button in Studio and NDK left nav */ +.dac-nav-back-button.back-to-dev .dac-sprite.dac-nav-back { + background-position: 0px -884px; + height: 16px; + width: 16px; +} + .dac-sprite.dac-nav-forward-blue, .dac-nav-forward-blue.dac-modal-header-close:before, .paging-links .dac-nav-forward-blue.prev-page-link:before, .paging-links .next-page-link:before, .paging-links .next-class-link:before, .paging-links .start-class-link:after { background-position: 0px -159px; height: 16px; @@ -9385,42 +9875,73 @@ $spritesheet: width height image $spritesheet-sprites; background: #ffebc3; border-top: 1px solid #e5d4a1; display: none; - color: rgba(0, 0, 0, 0.87); + color: rgba(0, 0, 0, .87); line-height: 1.4; - padding: 10px; } - .dac-toast.dac-visible { - display: block; } - .dac-toast-wrap { - box-sizing: border-box; - margin: 0 auto; - max-width: 940px; - padding-right: 20px; - position: relative; } + padding: 10px; +} + +.dac-toast.dac-visible { + display: block; +} + +.dac-toast-wrap { + box-sizing: border-box; + margin: 0 auto; + max-width: 940px; + padding-right: 20px; + position: relative; +} + +.dac-toast-close-btn { + background-color: transparent; + border: none; + border-radius: 0; + cursor: pointer; + opacity: .4; + padding: 0; + position: absolute; + right: 0; + top: -2px; +} + +.dac-toast-close-btn:hover, +.dac-toast-close-btn:focus, +.dac-toast-close-btn:active { + opacity: 1; + outline: none; +} + +.dac-toast-close-btn .dac-button.dac-raised.dac-primary{ + margin: 0; + padding: 0; +} + +.dac-toast-group { + bottom: 0; + left: 0; + position: fixed; + right: 0; + z-index: 60; +} + +.dac-toast.dac-danger { + background-color: #ffccbc; + border-top-color: #e5b7a9; +} + +.dac-toast.dac-success { + background-color: #cdedc8; + border-top-color: #c6d5b4; +} + +@media (max-width: 719px) { .dac-toast-close-btn { - background-color: transparent; - border: none; - border-radius: 0; - cursor: pointer; - opacity: .4; - padding: 0; - position: absolute; - right: 0; - top: 1px; } - .dac-toast-close-btn:hover, .dac-toast-close-btn:focus, .dac-toast-close-btn:active { - outline: none; - opacity: 1; } - .dac-toast-group { - bottom: 0; - left: 0; - position: fixed; - right: 0; - z-index: 60; } - .dac-toast.dac-danger { - background-color: #ffccbc; - border-top-color: #e5b7a9; } - .dac-toast.dac-success { - background-color: #cdedc8; - border-top-color: #c6d5b4; } + position: relative; + top: 0; + margin: 10px 0 0; + display: block; + } +} .dac-tab-item { box-sizing: border-box; @@ -9910,32 +10431,22 @@ a.video-shadowbox-button.white:hover::after { top: -4px; } -/** CSS Fixes for DevSite (akassay@) */ -.dac-button-social, -.dac-fab:not('.dac-scroll-button') { - position: relative; +#skip-to-main { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; } -.dac-button-social .dac-sprite, -.dac-fab .dac-sprite, -.play-button .dac-sprite { - margin-top: -7px; - position: relative; - top: 50%; -} - -.dac-fab .dac-sprite.dac-arrow-down-gray { - margin-top: -3px; -} - -.dac-button-social .dac-sprite.dac-gplus { - margin-top: -17px; -} - -.play-button .dac-sprite { - margin-top: -10px; -} - -.dac-nav-link-forward { - padding: 9px 0; +#skip-to-main:focus { + background: #fff; + clip: auto; + height: auto; + padding: 10px; + width: auto; + z-index: 10000; } diff --git a/tools/droiddoc/templates-sdk-dev/assets/js/docs.js b/tools/droiddoc/templates-sdk-dev/assets/js/docs.js index efcc36380..5ed947c7c 100644 --- a/tools/droiddoc/templates-sdk-dev/assets/js/docs.js +++ b/tools/droiddoc/templates-sdk-dev/assets/js/docs.js @@ -5,6 +5,14 @@ var mPagePath; // initialized in ready() function var basePath = getBaseUri(location.pathname); var SITE_ROOT = toRoot + basePath.substring(1, basePath.indexOf("/", 1)); +// TODO(akassay) generate this var in the reference doc build. +var API_LEVELS = ['1', '2', '3', '4', '5', '6', '7', '8', '9', + '10', '11', '12', '13', '14', '15', '16', + '17', '18', '19', '20', '21', '22', '23', '24']; +var METADATA = METADATA || {}; +var RESERVED_METADATA_CATEGORY_NAMES = ['extras', 'carousel', 'collections', + 'searchHeroCollections']; + // Ensure that all ajax getScript() requests allow caching $.ajaxSetup({ cache: true @@ -15,8 +23,7 @@ $.ajaxSetup({ $(document).ready(function() { // prep nav expandos - var pagePath = devsite ? - location.href.replace(location.hash, '') : document.location.pathname; + var pagePath = location.href.replace(location.hash, ''); // account for intl docs by removing the intl/*/ path if (pagePath.indexOf("/intl/") == 0) { pagePath = pagePath.substr(pagePath.indexOf("/", 6)); // start after intl/ to get last / @@ -53,6 +60,9 @@ $(document).ready(function() { // set global variable so we can highlight the sidenav a bit later (such as for google reference) // and highlight the sidenav mPagePath = pagePath; + + // Check for params and remove them. + mPagePath = mPagePath.split('?')[0]; highlightSidenav(); // set up prev/next links if they exist @@ -160,8 +170,12 @@ false; // navigate across topic boundaries only in design docs $('.next-page-link').attr('href', $nextLink.attr('href')) .removeClass("hide"); // for the footer link, also add the previous and next page titles - $('.content-footer .prev-page-link').append($prevLink.html()); - $('.content-footer .next-page-link').append($nextLink.html()); + if ($prevLink.length) { + $('.content-footer .prev-page-link').append($prevLink.html()); + } + if ($nextLink.length) { + $('.content-footer .next-page-link').append($nextLink.html()); + } } if (!startClass && $prevLink.length) { @@ -172,7 +186,6 @@ false; // navigate across topic boundaries only in design docs $('.prev-page-link').attr('href', $prevLink.attr('href')).removeClass("hide"); } } - } // Set up the course landing pages for Training with class names and descriptions @@ -231,6 +244,12 @@ false; // navigate across topic boundaries only in design docs $(this).get(0).play(); }); + // Set up play-on-click for

This API" + - " requires API level " + minLevel + " or higher.

" + - "

This document is hidden because your selected API level for the documentation is " + - selectedLevel + ". You can change the documentation API level with the selector " + - "above the left navigation.

" + - "

For more information about specifying the API level your app requires, " + - "read Supporting Different Platform Versions.

" + - "" + - "
"); - } else { - $("#naMessage").hide(); + // Show the API notice dialog, set number values and button event + $('#api-unavailable').trigger('modal-open'); + $('#api-unavailable .selected-level').text(selectedLevel); + $('#api-unavailable .api-level').text(minLevel); + $('#api-unavailable button.ok').attr('onclick','$("#apiLevelSelector").val("' + minLevel + '");changeApiLevel();'); } } @@ -1248,6 +1259,10 @@ function showSamples() { $selectedLi.children("ul").children("li").each(function() { var $li = $("
  • ").append($(this).find("a").first().clone()); + var $samplesLink = $li.find("a"); + if ($samplesLink.text().endsWith('/')) { + $samplesLink.text($samplesLink.text().slice(0,-1)); + } $ul.append($li); }); @@ -1563,7 +1578,8 @@ function showSamples() { // Record number of pages viewed in analytics. if (!firstPage) { var clicks = Math.ceil((i - initialResults) / opts.itemsPerPage); - ga('send', 'event', 'Cards', 'Click More', clicks); + devsite.analytics.trackAnalyticsEvent('event', + 'Cards', 'Click More', clicks); } } @@ -1585,8 +1601,7 @@ function showSamples() { $widget.toggleClass('dac-has-less', false); opts.currentIndex = Math.min(opts.initialResults, resources.length); - - ga('send', 'event', 'Cards', 'Click Less'); + devsite.analytics.trackAnalyticsEvent('event', 'Cards', 'Click Less'); } /* A decorator for event functions which finds the surrounding widget and it's options */ @@ -2215,7 +2230,8 @@ function showSamples() { } } - $(document).on('click.blog-reader', 'a[href*="blogspot.com/"]', wrapLinkWithReader); + $(document).on('click.blog-reader', 'a.resource-card[href*="blogspot.com/"]', + wrapLinkWithReader); })(jQuery, window); (function($) { @@ -2547,11 +2563,13 @@ function showSamples() { if (checkbox.checked) { this.chipsEl_.append(this.chipForItem(item)); - ga('send', 'event', 'Filters', 'Check', $(checkbox).val()); + devsite.analytics.trackAnalyticsEvent('event', + 'Filters', 'Check', $(checkbox).val()); } else { item.data('chip.dac-filter').remove(); this.addToItemValue(item, -1); - ga('send', 'event', 'Filters', 'Uncheck', $(checkbox).val()); + devsite.analytics.trackAnalyticsEvent('event', + 'Filters', 'Uncheck', $(checkbox).val()); } this.draw_(this.filteredResources()); @@ -3280,20 +3298,9 @@ function getBaseUri(uri) { function changeLangPref(targetLang, submit) { window.writeCookie('pref_lang', targetLang, null); -//DD $('#language').find('option[value="' + targetLang + '"]').attr('selected', true); - // ####### TODO: Remove this condition once we're stable on devsite ####### - // This condition is only needed if we still need to support legacy GAE server - if (window.devsite) { - // Switch language when on Devsite server - if (submit) { - $('#setlang').submit(); - } - } else { - // Switch language when on legacy GAE server - if (submit) { - window.location = getBaseUri(location.pathname); - } + if (submit) { + $('#setlang').submit(); } } // Redundant usage to appease jshint. @@ -3378,24 +3385,11 @@ window.changeLangPref = changeLangPref; return lang; })(); var localeTarget = (function() { - var localeTarget = locale; - if (window.devsite) { - if (getQueryVariable('hl')) { - var target = getQueryVariable('hl'); - if (!(target === 0) || (LANGUAGES.indexOf(target) === -1)) { - localeTarget = target; - } - } - } else { - if (location.pathname.substring(0,6) == "/intl/") { - var target = location.pathname.split('/')[2]; - if (!(target === 0) || (LANGUAGES.indexOf(target) === -1)) { - localeTarget = target; - } - } + var lang = getQueryVariable('hl'); + if (lang === false || LANGUAGES.indexOf(lang) === -1) { + lang = locale; } - - return localeTarget; + return lang; })(); /** @@ -3899,14 +3893,14 @@ switch (window.getLangPref()) { }; Modal.prototype.close_ = function() { + // When closing the modal for Android Studio downloads, reload the page + // because otherwise we might get stuck with post-download dialog state + if ($("[data-modal='studio_tos'].dac-active").length) { + location.reload(); + } this.el.removeClass('dac-active'); $('body').removeClass('dac-modal-open'); this.isOpen = false; - // When closing the modal for Android Studio downloads, reload the page - // because otherwise we might get stuck with post-download dialog state - if ($("[data-modal='studio_tos']").length) { - location.reload(); - } }; Modal.prototype.open_ = function() { @@ -3952,13 +3946,29 @@ switch (window.getLangPref()) { // Check if url anchor is targetting a toggle to open the modal. if (location.hash) { - $(location.hash + '[data-modal-toggle]').trigger('click'); + var $elem = $(document.getElementById(location.hash.substr(1))); + if ($elem.attr('data-modal-toggle')) { + $elem.trigger('click'); + } } - if (window.getLangTarget() !== window.getLangPref()) { - $('#langform').trigger('modal-open'); - $("#langform button.yes").attr("onclick","window.changeLangPref('" + window.getLangTarget() + "', true); return false;"); - $("#langform button.no").attr("onclick","window.changeLangPref('" + window.getLangPref() + "', true); return false;"); + var isTargetLangValid = false; + $(ANDROID_LANGUAGES).each(function(index, langCode) { + if (langCode == window.getLangTarget()) { + isTargetLangValid = true; + return; + } + }); + if (window.getLangTarget() !== window.getLangPref() && isTargetLangValid) { + $('#langform').trigger('modal-open'); + $("#langform button.yes").attr("onclick","window.changeLangPref('" + window.getLangTarget() + "', true); return false;"); + $("#langform button.no").attr("onclick","window.changeLangPref('" + window.getLangPref() + "', true); return false;"); + } + + /* Check the current API level, but only if we're in the reference */ + if (location.pathname.indexOf('/reference') == 0) { + // init available apis based on user pref + changeApiLevel(); } }); })(jQuery); @@ -4093,7 +4103,12 @@ switch (window.getLangPref()) { var forwardLink = $('') .addClass('dac-nav-link-forward') .html(icon) - .on('click', swap_); + .attr('tabindex', 0) + .on('click keypress', function(e) { + if (e.type == 'keypress' && e.which == 13 || e.type == 'click') { + swap_(e); + } + }); /** * @constructor @@ -4147,8 +4162,11 @@ switch (window.getLangPref()) { // Setup sub navigation collapse/expand function initCollapsedNavs(toggleIcons) { toggleIcons.each(setInitiallyActive_($('body'))); - toggleIcons.on('click', handleSubNavToggle_); - + toggleIcons.on('click keypress', function(e) { + if (e.type == 'keypress' && e.which == 13 || e.type == 'click') { + handleSubNavToggle_(e); + } + }); } function setInitiallyActive_(body) { @@ -4165,6 +4183,10 @@ switch (window.getLangPref()) { var expanded = expandedNavs.indexOf(landingPageClass) >= 0; landingPageClass = landingPageClass === 'home' ? 'about' : landingPageClass; + if (landingPageClass == 'about' && location.pathname == '/index.html') { + expanded = true; + } + // TODO: Should read from localStorage var visible = body.hasClass(landingPageClass) || expanded; @@ -4220,17 +4242,28 @@ switch (window.getLangPref()) { * @param {jQuery} el - The DOM element. */ function buildReferenceNav(el) { + var supportLibraryPath = '/reference/android/support/'; + var currPath = location.pathname; + + if (currPath.indexOf(supportLibraryPath) > -1) { + updateSupportLibrariesNav(supportLibraryPath, currPath); + } var namespaceList = el.find('[data-reference-namespaces]'); - var resources = el.find('[data-reference-resources]'); + var resources = $('[data-reference-resources]').detach(); var selected = namespaceList.find('.selected'); + resources.appendTo(el); // Links should be toggleable. namespaceList.find('a').addClass('dac-reference-nav-toggle dac-closed'); + // Set the path for the navtree data to use. + var navtree_filepath = getNavtreeFilePath(supportLibraryPath, currPath); + // Load in all resources - $.getScript('/navtree_data.js', function(data, textStatus, xhr) { + $.getScript(navtree_filepath, function(data, textStatus, xhr) { if (xhr.status === 200) { - namespaceList.on('click', 'a.dac-reference-nav-toggle', toggleResourcesHandler); + namespaceList.on( + 'click', 'a.dac-reference-nav-toggle', toggleResourcesHandler); } }); @@ -4243,13 +4276,14 @@ switch (window.getLangPref()) { var overview = addResourcesToView(resources, selected); // Currently viewing Overview - if (location.pathname === overview.attr('href')) { + if (location.href === overview.attr('href')) { overview.parent().addClass('selected'); } // Open currently selected resource var listsToOpen = selected.children().eq(1); - listsToOpen = listsToOpen.add(listsToOpen.find('.selected').parent()).show(); + listsToOpen = listsToOpen.add( + listsToOpen.find('.selected').parent()).show(); // Mark dropdowns as open listsToOpen.prev().removeClass('dac-closed'); @@ -4258,20 +4292,45 @@ switch (window.getLangPref()) { namespaceList.scrollIntoView(selected); } + function getNavtreeFilePath(supportLibraryPath, currPath) { + var navtree_filepath = ''; + var navtree_filename = 'navtree_data.js'; + if (currPath.indexOf(supportLibraryPath + 'test') > -1) { + navtree_filepath = supportLibraryPath + 'test/' + navtree_filename; + } else if (currPath.indexOf(supportLibraryPath + 'wearable') > -1) { + navtree_filepath = supportLibraryPath + 'wearable/' + navtree_filename; + } else { + navtree_filepath = '/' + navtree_filename; + } + return navtree_filepath; + } + + function updateSupportLibrariesNav(supportLibraryPath, currPath) { + var navTitle = ''; + if (currPath.indexOf(supportLibraryPath + 'test') > -1) { + navTitle = 'Test Support APIs'; + } else if (currPath.indexOf(supportLibraryPath + 'wearable') > -1) { + navTitle = 'Wearable Support APIs'; + } + $('#api-nav-title').text(navTitle); + $('#api-level-toggle').hide(); + } + /** * Handles the toggling of resources. * @param {Event} event */ function toggleResourcesHandler(event) { event.preventDefault(); - var el = $(this); + if (event.type == 'click' || event.type == 'keypress' && event.which == 13) { + var el = $(this); + // If resources for given namespace is not present, fetch correct data. + if (this.tagName === 'A' && !this.hasResources) { + addResourcesToView(buildResourcesViewForData(getDataForNamespace(el.text())), el.parent()); + } - // If resources for given namespace is not present, fetch correct data. - if (this.tagName === 'A' && !this.hasResources) { - addResourcesToView(buildResourcesViewForData(getDataForNamespace(el.text())), el.parent()); + el.toggleClass('dac-closed').next().slideToggle(200); } - - el.toggleClass('dac-closed').next().slideToggle(200); } /** @@ -4331,9 +4390,9 @@ switch (window.getLangPref()) { .find('a') .addClass('dac-reference-nav-resource') .end() - .find('h2') + .find('h2').attr('tabindex', 0) .addClass('dac-reference-nav-toggle dac-closed') - .on('click', toggleResourcesHandler) + .on('click keypress', toggleResourcesHandler) .end() .add(resources.find('ul')) .addClass('dac-reference-nav-resources') @@ -4343,11 +4402,31 @@ switch (window.getLangPref()) { return overview; } + function setActiveReferencePackage(el) { + var packageLinkEls = el.find('[data-reference-namespaces] a'); + var selected = null; + var highestMatchCount = 0; + packageLinkEls.each(function(index, linkEl) { + var matchCount = 0; + $(location.pathname.split('/')).each(function(index, subpath) { + if (linkEl.href.indexOf('/' + subpath + '/') > -1) { + matchCount++; + } + }); + if (matchCount > highestMatchCount) { + selected = linkEl; + highestMatchCount = matchCount; + } + }); + $(selected).parent().addClass('selected'); + } + /** * jQuery plugin */ $.fn.dacReferenceNav = function() { return this.each(function() { + setActiveReferencePackage($(this)); buildReferenceNav($(this)); }); }; @@ -4389,7 +4468,7 @@ $.fn.scrollIntoView = function(target) { var parentNavEl; var selected; // In NDK docs, highlight appropriate sub-nav - if (body.hasClass('ndk')) { + if (body.hasClass('dac-ndk')) { if (body.hasClass('guide')) { selected = navEl.find('> li.guides > a').addClass('selected'); } else if (body.hasClass('reference')) { @@ -4399,8 +4478,10 @@ $.fn.scrollIntoView = function(target) { } else if (body.hasClass('downloads')) { selected = navEl.find('> li.downloads > a').addClass('selected'); } - } else if (body.hasClass('studio')) { - if (body.hasClass('features')) { + } else if (body.hasClass('dac-studio')) { + if (body.hasClass('download')) { + selected = navEl.find('> li.download > a').addClass('selected'); + } else if (body.hasClass('features')) { selected = navEl.find('> li.features > a').addClass('selected'); } else if (body.hasClass('guide')) { selected = navEl.find('> li.guide > a').addClass('selected'); @@ -4410,7 +4491,7 @@ $.fn.scrollIntoView = function(target) { } else if (body.hasClass('design')) { selected = navEl.find('> li.design > a').addClass('selected'); // highlight Home nav - } else if (body.hasClass('about')) { + } else if (body.hasClass('about') || location.pathname == '/index.html') { parentNavEl = navEl.find('> li.home > a'); parentNavEl.addClass('has-subnav'); // In Home docs, also highlight appropriate sub-nav @@ -4438,8 +4519,6 @@ $.fn.scrollIntoView = function(target) { } else { selected = subNavEl.find('li.reference > a').addClass('selected'); } - } else if ((urlSegments[1] === 'tools') || (urlSegments[1] === 'sdk')) { - selected = subNavEl.find('li.tools > a').addClass('selected'); } else if (body.hasClass('google')) { selected = subNavEl.find('li.google > a').addClass('selected'); } else if (body.hasClass('samples')) { @@ -4502,6 +4581,11 @@ $.fn.scrollIntoView = function(target) { */ function toggleSidebarVisibility(body) { var wasClosed = ('' + localStorage.getItem('navigation-open')) === 'false'; + // Override the local storage setting for navigation-open for child sites + // with no-subnav class. + if (document.body.classList.contains('no-subnav')) { + wasClosed = false; + } if (wasClosed) { body.removeClass(ToggleNav.DEFAULTS_.activeClass); @@ -4746,28 +4830,66 @@ window.metadata.prepare = (function() { // Get current language. var locale = getLangPref(); - // Merge english resources. - METADATA.all = mergeArrays( - METADATA.en.about, - METADATA.en.design, - METADATA.en.distribute, - METADATA.en.develop, - YOUTUBE_RESOURCES, - BLOGGER_RESOURCES, - METADATA.en.extras - ); + if (useDevsiteMetadata) { + var all_keys = Object.keys(METADATA['en']); + METADATA.all = [] + + $(all_keys).each(function(index, category) { + if (RESERVED_METADATA_CATEGORY_NAMES.indexOf(category) == -1) { + METADATA.all = mergeArrays( + METADATA.all, + METADATA.en[category] + ); + } + }); + + METADATA.all = mergeArrays( + METADATA.all, + YOUTUBE_RESOURCES, + BLOGGER_RESOURCES, + METADATA.en.extras + ); + } else { + METADATA.all = mergeArrays( + METADATA.en.about, + METADATA.en.design, + METADATA.en.distribute, + METADATA.en.develop, + YOUTUBE_RESOURCES, + BLOGGER_RESOURCES, + METADATA.en.extras + ); + } // Merge local language resources. if (locale !== 'en' && METADATA[locale]) { - METADATA.all = mergeArrays( - METADATA.all, - METADATA[locale].about, - METADATA[locale].design, - METADATA[locale].distribute, - METADATA[locale].develop, - METADATA[locale].extras - ); + if (useDevsiteMetadata) { + all_keys = Object.keys(METADATA[locale]); + $(all_keys).each(function(index, category) { + if (RESERVED_METADATA_CATEGORY_NAMES.indexOf(category) == -1) { + METADATA.all = mergeArrays( + METADATA.all, + METADATA.en[category] + ); + } + }); + + METADATA.all = mergeArrays( + METADATA.all, + METADATA[locale].extras + ); + } else { + METADATA.all = mergeArrays( + METADATA.all, + METADATA[locale].about, + METADATA[locale].design, + METADATA[locale].distribute, + METADATA[locale].develop, + METADATA[locale].extras + ); + + } } mergeMetadataMap('collections', locale); @@ -4778,7 +4900,8 @@ window.metadata.prepare = (function() { createIndices(METADATA.all, locale); // Reference metadata. - METADATA.androidReference = window.DATA; + METADATA.androidReference = mergeArrays( + window.DATA, window.SUPPORT_WEARABLE_DATA, window.SUPPORT_TEST_DATA); METADATA.googleReference = mergeArrays(window.GMS_DATA, window.GCM_DATA); }; })(); @@ -5478,20 +5601,9 @@ window.metadata.search = (function() { var ROW_COUNT_GOOGLE_EXPANDED = 8; function onSuggestionClick(e) { - var normalClick = e.which === 1 && !e.ctrlKey && !e.shiftKey && !e.metaKey; - if (normalClick) { - e.preventDefault(); - } - - // When user clicks a suggested document, track it - var url = $(e.currentTarget).attr('href'); - ga('send', 'event', 'Suggestion Click', 'clicked: ' + url, - 'query: ' + $('#search_autocomplete').val().toLowerCase(), - {hitCallback: function() { - if (normalClick) { - document.location = url; - } - }}); + devsite.analytics.trackAnalyticsEvent('event', + 'Suggestion Click', 'clicked: ' + $(e.currentTarget).attr('href'), + 'query: ' + $('#search_autocomplete').val().toLowerCase()); } function buildLink(match) { @@ -5526,7 +5638,7 @@ window.metadata.search = (function() { function renderAndroidResults(list, gMatches, query) { list.empty(); - var header = $('
  • android
    • '); + var header = $('
  • android APIs
    • '); list.append(header); if (gMatches.length > 0) { @@ -5647,16 +5759,18 @@ window.metadata.search = (function() { this.searchResultsHero = $('#dac-search-results-hero'); this.searchResultsReference = $('#dac-search-results-reference'); this.searchHeader = $('[data-search]').data('search-input.dac'); + this.pageNav = $('a[name=navigation]'); this.currQueryReferenceResults = {}; + this.isOpen = false; } Search.prototype.init = function() { - if (!devsite && this.checkRedirectToIndex()) { return; } - this.searchHistory = window.dacStore('search-history'); this.searchInput.focus(this.onSearchChanged.bind(this)); - this.searchInput.keydown(this.handleKeyboardShortcut.bind(this)); + this.searchInput.keypress(this.handleKeyboardShortcut.bind(this)); + this.pageNav.keyup(this.handleTabbedToNav.bind(this)); + this.searchResults.keyup(this.handleKeyboardShortcut.bind(this)); this.searchInput.on('input', this.onSearchChanged.bind(this)); this.searchClear.click(this.clear.bind(this)); this.searchClose.click(this.close.bind(this)); @@ -5713,6 +5827,12 @@ window.metadata.search = (function() { } }; + Search.prototype.handleTabbedToNav = function(event) { + if (this.isOpen) { + this.searchClose.trigger('click'); + } + } + Search.prototype.goToResult = function(relativeIndex) { var links = this.searchResults.find('a').filter(':visible'); var selectedLink = this.searchResults.find('.dac-selected'); @@ -5775,6 +5895,8 @@ window.metadata.search = (function() { this.removeQueryFromUrl(); this.searchInput.blur(); this.hideOverlay(); + this.pageNav.focus(); + this.isOpen = false; }; Search.prototype.getUrlQuery = function() { @@ -5859,6 +5981,7 @@ window.metadata.search = (function() { }; Search.prototype.showOverlay = function() { + this.isOpen = true; this.body.addClass('dac-modal-open dac-search-open'); }; @@ -5956,7 +6079,11 @@ window.dacStore = (function(window) { this.initiallyActive = this.containers.children('.' + this.options.activeClass).eq(0); this.el.on('swap-content', this.swap.bind(this)); this.el.on('swap-reset', this.reset.bind(this)); - this.el.find(this.options.swapButton).on('click', this.swap.bind(this)); + this.el.find(this.options.swapButton).on('click keypress', function(e) { + if (e.type == 'keypress' && e.which == 13 || e.type == 'click') { + this.swap(); + } + }.bind(this)); } /** @@ -6008,6 +6135,7 @@ window.dacStore = (function(window) { if (!this.options.dynamic) { container.children().toggleClass(this.options.activeClass); this.complete.bind(this); + $('.' + this.options.activeClass).focus(); return; } @@ -6139,7 +6267,7 @@ window.dacStore = (function(window) { */ Toast.prototype.closeBtn = function() { this.closeBtnEl = this.closeBtnEl || $(''); return this.closeBtnEl; }; @@ -6461,23 +6589,27 @@ window.dacStore = (function(window) { // Video starts, send the video ID if (event.data === YT.PlayerState.PLAYING) { if (this.mPlayerPaused) { - ga('send', 'event', 'Videos', 'Resume', videoId); + devsite.analytics.trackAnalyticsEvent('event', + 'Videos', 'Resume', videoId); } else { // track the start playing event so we know from which page the video was selected - ga('send', 'event', 'Videos', 'Start: ' + videoId, 'on: ' + document.location.href); + devsite.analytics.trackAnalyticsEvent('event', + 'Videos', 'Start: ' + videoId, 'on: ' + document.location.href); } this.mPlayerPaused = false; } // Video paused, send video ID and video elapsed time if (event.data === YT.PlayerState.PAUSED) { - ga('send', 'event', 'Videos', 'Paused', videoId, currentTime); + devsite.analytics.trackAnalyticsEvent('event', + 'Videos', 'Paused: ' + videoId, 'on: ' + currentTime); this.mPlayerPaused = true; } // Video finished, send video ID and video elapsed time if (event.data === YT.PlayerState.ENDED) { - ga('send', 'event', 'Videos', 'Finished', videoId, currentTime); + devsite.analytics.trackAnalyticsEvent('event', + 'Videos', 'Finished: ' + videoId, 'on: ' + currentTime); this.mPlayerPaused = true; } }; diff --git a/tools/droiddoc/templates-sdk-dev/components/masthead.cs b/tools/droiddoc/templates-sdk-dev/components/masthead.cs index c1e270674..1fef96594 100644 --- a/tools/droiddoc/templates-sdk-dev/components/masthead.cs +++ b/tools/droiddoc/templates-sdk-dev/components/masthead.cs @@ -51,6 +51,26 @@ >Downloads + + /if ?> Back to Android Developers @@ -92,7 +117,9 @@ # ADD SEARCH AND MENU ?> @@ -147,8 +174,9 @@
    -
    +
    data-swap-container> + +
    diff --git a/tools/droiddoc/templates-sdk-dev/customizations.cs b/tools/droiddoc/templates-sdk-dev/customizations.cs index a747d3f0d..0b938ac5d 100644 --- a/tools/droiddoc/templates-sdk-dev/customizations.cs +++ b/tools/droiddoc/templates-sdk-dev/customizations.cs @@ -151,10 +151,14 @@ def:search_results() ?> def:custom_left_nav() ?> + Back -
    + +
    style="top:0 !important;">