diff options
| author | smain@google.com <smain@google.com> | 2016-08-31 11:30:02 -0700 |
|---|---|---|
| committer | smain@google.com <smain@google.com> | 2016-08-31 11:30:02 -0700 |
| commit | 4f3a05a2c6bc26a1747d143ae0f69eac05936c61 (patch) | |
| tree | 196b09826c968bfb07619443ec5a5e05c4884b02 /tools/droiddoc | |
| parent | 6d00e69c3ff9329c09f71e45370ad0bf581a668d (diff) | |
| download | platform_build-4f3a05a2c6bc26a1747d143ae0f69eac05936c61.tar.gz platform_build-4f3a05a2c6bc26a1747d143ae0f69eac05936c61.tar.bz2 platform_build-4f3a05a2c6bc26a1747d143ae0f69eac05936c61.zip | |
Merge all of templates-sdk-dev into templates-sdk.
I actually just deleted templates-sdk/ then made a copy of templates-sdk-dev/
and then renamed it to templates-sdk/. So this is a clean copy.
Once this goes through cleanly, I'll delete templates-sdk-dev/ and update
all doc targets to use templates-sdk/.
Change-Id: I276695969e02fcf718370564e84b077a9d43725e
Diffstat (limited to 'tools/droiddoc')
33 files changed, 9094 insertions, 6740 deletions
diff --git a/tools/droiddoc/templates-sdk/assets/css/default.css b/tools/droiddoc/templates-sdk/assets/css/default.css index accf7bffa4..e422d75cec 100644 --- a/tools/droiddoc/templates-sdk/assets/css/default.css +++ b/tools/droiddoc/templates-sdk/assets/css/default.css @@ -30,7 +30,7 @@ body { font: 14px/24px Roboto, sans-serif; font-weight: 400; letter-spacing:.1; - padding:0 20px; + padding: 0 20px; } @media (max-width: 719px) { @@ -40,7 +40,8 @@ body { } body { - padding: 0 10px; + padding-left: 10px; + padding-right: 10px; } } @@ -85,21 +86,17 @@ body { #page-footer #copyright { margin-bottom: 10px; } +.hide-text { + position: absolute; + text-indent: -9999px; +} + #nav-container { width: 160px; min-height: 10px; margin-right: 20px; float: left; } -#nav { - margin:0; - padding:0 0 30px; -} - -#side-nav { - padding-top: 20px; -} - #devdoc-nav h2 { border:0; } @@ -158,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; } @@ -191,11 +222,12 @@ h1, h2, h3 { h1 { font-size: 44px; line-height: 56px; - margin: 24px 0 12px; font-weight: 300; + margin: 0; + padding: 24px 0 12px; } h1.short { - margin-right:320px; + padding-right:320px; } @media (max-width: 719px) { h1 { @@ -208,30 +240,49 @@ h2 { font-size: 28px; font-weight: 400; line-height: 32px; - margin: 24px 0 16px; + margin: 0; + padding: 12px 0 16px; } h3 { font-size: 24px; line-height: 32px; font-weight: 400; - margin: 16px 0; + margin: 0; + padding: 8px 0 12px; } h4 { font-size: 18px; line-height: 24px; - margin: 12px 0; + margin: 0; + padding: 4px 0 8px; font-weight: 500; } h5, h6 { font-size: 16px; line-height: 24px; - margin: 8px 0; + margin: 0; + padding: 4px 0 8px; +} +th>h3 { + font-size:inherit; + line-height:inherit; + font-weight:inherit; + margin:0; + padding:0; + color:inherit; } hr { /* applied to the bottom of h2 elements */ height: 1px; margin: 7px 0 12px; border: 0; - background: #e5e5e5; + background: rgba(0, 0, 0, 0.1); +} +h2[id], h3[id], h4[id], h5[id], h6[id] { + margin-top: -64px; + border-top: 64px solid transparent; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; } p, pre, table, form { margin: 0 0 12px; @@ -271,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; } @@ -283,15 +335,10 @@ pre strong, pre b, a strong, a b, a code { } pre, code { color: #060; - font: 13px/18px Consolas, "Liberation Mono", Menlo, Courier, monospace; + font: 13px/18px Consolas, "Liberation Mono", Menlo, Monaco, Courier, monospace; -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; } -code { - background-color: #f7f7f7; - padding: 3px 5px; -} - legend { display: none; } @@ -339,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; } @@ -348,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 { @@ -385,7 +446,7 @@ video.with-shadow { margin-left: 0; } .layout-content-col h3, .layout-content-col h4 { - margin-top:0; } + padding-top:0; } .layout-content-col.span-1 { width: 40px; } @@ -474,158 +535,6 @@ video.with-shadow { .vspace.size-16 { height: 160px; } -/* nav */ -#nav { - /* section header divs */ - /* expanded section header divs */ - /* sublinks */ } - #nav li { - list-style-type: none; - font-size: 12px; - margin:0; - padding:0; - line-height: 18px; } - #nav a { - color: #505050; - text-decoration: none; - word-wrap:break-word; } - #nav .nav-section-header { - position: relative; - margin-bottom: 1px; - padding: 0 30px 0 0; } - #nav li.selected a { - color: #039BE5; - } - #nav li.selected ul li a { - /* don't highlight child items */ - color: #505050; } - #nav .nav-section .nav-section .nav-section-header { - /* no white line between second level sections */ - margin-bottom: 0; } - /* section header links */ - #nav > li > div > a { - display: block; - font-weight: 700; - padding: 13px 0 12px 10px; } - #nav .nav-section-header:after { - content: ''; - background: transparent url(../images/styles/disclosure_down.png) no-repeat scroll 50% 50%; - width: 34px; - height: 34px; - display: block; - position: absolute; - top: 6px; - right: 0; } - #nav .nav-section-header.empty { - padding:0; } - #nav .nav-section-header.empty:after { - display: none; } - /* nested nav headers */ - #nav .nav-section .nav-section { - position: relative; - padding: 0; - margin: 0; } - #nav .nav-section li a { - /* first gen child (2nd level li) */ - display:block; - font-weight: 700; - text-transform: none; - padding: 13px 5px 13px 10px; - } - #nav .nav-section li li a { - /* second gen child (3rd level li) */ - font-weight: 400; - padding: 7px 5px 7px 10px; - } - #nav li.expanded .nav-section-header { - background: #f0f0f0; } - #nav li.expanded .nav-section-header.empty { - background: none; } - #nav li.expanded li .nav-section-header { - background: none; } - #nav li.expanded li ul { - /* 3rd level ul */ - padding:6px 0 1px 20px; - } - #nav li.expanded > .nav-section-header:after { - content: ''; - background: transparent url(../images/styles/disclosure_up.png) no-repeat scroll 50% 50%; - width: 34px; - height: 34px; } - #nav li.expanded li ul.tree-list-children { - padding: 0; - } - #nav li.expanded li ul.tree-list-children .tree-list-children { - padding:0 0 0 10px; - } - #nav li span.tree-list-subtitle { - display:inline-block; - padding:5px 0 0 10px; - color:#555; - text-transform:uppercase; - font-size:12px; - } - #nav li span.tree-list-subtitle:before { - content: '—'; - } - #nav li span.tree-list-subtitle:after { - content: '—'; - } - #nav li span.tree-list-subtitle.package { - padding-top:15px; - cursor:default; - } - #nav li span.tree-list-subtitle.package:before { - content: ''; - } - #nav li span.tree-list-subtitle.package:after { - content: ''; - } - #nav li ul.tree-list-children.classes { - padding-left:10px; - } - #nav li ul { - display:none; - overflow: hidden; - margin: 0; } - #nav li ul.animate-height-in { - -webkit-transition: height 0.25s ease-in; - -moz-transition: height 0.25s ease-in; - transition: height 0.25s ease-in; } - #nav li ul.animate-height-out { - -webkit-transition: height 0.25s ease-out; - -moz-transition: height 0.25s ease-out; - transition: height 0.25s ease-out; } - #nav li ul li { - padding: 0; } - #nav li li li { - padding: 0; } - #nav li.expanded ul { - } - #nav li ul > li { - padding:0; - } - #nav li ul > li:last-child { - padding-bottom:5px; - } - #nav li ul.tree-list-children > li:last-child { - padding-bottom:0; - } - #nav li.expanded ul > li { - background:#f7f7f7; } - #nav li.expanded ul > li li { - background:inherit; } - #nav li ul.tree-list-children ul { - display:block; } - -#nav.samples-nav li li li a { - padding-top:3px; - padding-bottom:3px; -} -#nav.samples-nav li li ul > li:last-child { - padding-bottom:3px; -} - .new, .new-child { font-size: .78em; @@ -682,13 +591,10 @@ a.back-link { } .paging-links { position: relative; - height:30px; } - .paging-links a { - position: absolute; } + min-height:30px; } .paging-links a, .training-nav-top a { text-decoration: none; } - .paging-links .prev-page-link:before, .training-nav-top .prev-page-link:before, a.back-link:before { content: ''; @@ -697,14 +603,9 @@ a.back-link { height: 10px; display: inline-block; margin-right: 5px; } - .paging-links .prev-page-link { - left: -15px; } - .paging-links .next-page-link { - right: 0; } - .next-page-link:after, - .start-class-link:after, - .start-course-link:after, - .next-class-link:after, + .training-nav-top .next-page-link:after, + .training-nav-top .start-class-link:after, + .training-nav-top .start-course-link:after, .go-link:after { content: ''; background: transparent url(../images/styles/disclosure_right.png) no-repeat scroll 50% 50%; @@ -717,7 +618,7 @@ a.back-link { .next-page-link.inline:after { content: none; } - .content-footer .paging-links .next-page-link { + .content-footer { left:0; } @@ -757,8 +658,7 @@ a.back-link { } .training-nav-top a.start-class-link, - .training-nav-top a.start-course-link, - .paging-links a.start-class-link { + .training-nav-top a.start-course-link { width:100%; } @@ -780,7 +680,6 @@ a.back-link { font-size: 20px; font-weight: 500; height: 32px; - margin: 0; padding: 52px 16px 12px; position: relative; } @@ -802,7 +701,7 @@ a.back-link { color: currentColor; font-size: inherit; font-weight: inherit; - margin:0 0 10px; + padding:0 0 10px; display:block; float:left; width:675px; @@ -898,7 +797,7 @@ div#title-tabs-wrapper { } h1.with-title-tabs { display:inline-block; - margin:0 0 -1px 0; + margin-bottom: -1px; padding:0 60px 0 0; border-bottom:1px solid #F9F9F9; } @@ -979,7 +878,7 @@ h3:target { animation-timing-function: ease-out; } .design ol h4 { - margin-bottom:0; + padding-bottom:0; } .design ol { counter-reset: item; } @@ -1162,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; @@ -1248,15 +1176,6 @@ scroll top left; .download-button:active { background-color: #006699; } -.button.disabled, -.button.disabled:hover, -.button.disabled:active { - background:#ebebeb; - color:#999 !important; - border-color:#999; - cursor:default; -} - /* UI tables and other things found in Writing style and Settings pattern */ .ui-table { width: 100%; @@ -1382,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; @@ -1438,7 +1363,7 @@ color-stop(50%, #acbc00), color-stop(50%, #bdde00), color-stop(100%, #bdde00)); /* bump up spacing above subheadings */ h2 { - margin-top: 40px !important; + padding-top: 40px !important; } /* print link URLs where possible and give links default text color */ @@ -1577,7 +1502,8 @@ color-stop(50%, #acbc00), color-stop(50%, #bdde00), color-stop(100%, #bdde00)); width:226px; font-size:13px; line-height:18px; - border-left:3px solid #a9e27d; + border-left:3px solid #96ca7c; + border-left-color: rgba(106, 179, 68, .7); /* #6ab344 * 70% */ float:right; padding:0 0 0 20px; margin:0 0 1em 20px; @@ -1588,7 +1514,7 @@ color-stop(50%, #acbc00), color-stop(50%, #bdde00), color-stop(100%, #bdde00)); .sidebox h4, .sidebox h5 { font-weight:bold; - margin:0 0 10px; + padding: 0 0 10px; line-height: 16px; } @@ -1602,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; @@ -1614,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; @@ -1635,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; } @@ -1647,7 +1569,7 @@ color-stop(50%, #acbc00), color-stop(50%, #bdde00), color-stop(100%, #bdde00)); h3.rel-resources { -margin:1.25em auto; + padding:1.25em auto; } /* -------------------------------------------------------------------------- @@ -1823,7 +1745,7 @@ div.sdk-terms.fullsize { div.sdk-terms h3, div.sdk-terms h2 { - margin:0; + padding: 0; } div#sdk-terms-form { @@ -1846,6 +1768,46 @@ pre { border: solid 1px #ddd; background: #f7f7f7; } + +p.package-name { + margin:1em 0; +} + +h1.api-title { + padding-bottom:0; +} + +h2.api-section { + margin: 60px 0 0; +} + +h2.api-section+hr { + margin-bottom: 30px; +} + +h3.api-name { + margin: 80px 0 12px; + padding: 0; +} + +/* remove top padding when this h3 (visibly) follows an h2. + This accounts for the variation in structure, + including the collapsed mobile headings */ +h2+hr+div>div>a+div>h3.api-name, +h2+hr+a+div>h3.api-name, +h2+hr+a+h3.api-name { + margin-top: 0; +} + +pre.api-signature, +code.api-signature { + color:inherit; + padding:0; + margin:1em 0; + border:0; + background:transparent; +} + .str { color: #800; } /* Code string */ .kwd { color: #008; } .typ { color: #606; } @@ -1897,8 +1859,7 @@ Three-Pane padding: 0 0 0 4px; } #packages-nav li a, #packages-nav li a:active, #packages-nav li a:visited, -#classes-nav li li a, #classes-nav li li a:active, #classes-nav li li a:visited, -#nav-tree li a, #nav-tree li a:active, #nav-tree li a:visited { +#classes-nav li li a, #classes-nav li li a:active, #classes-nav li li a:visited { color: #222; font-weight: normal; } @@ -1909,8 +1870,7 @@ Three-Pane #packages-nav li.selected a, #packages-nav li.selected a:active, #packages-nav li.selected a:visited, #classes-nav li li.selected a, #classes-nav li li.selected a:active, #classes-nav li li.selected -a:visited, -#nav-tree li div.selected { +a:visited { font-weight: 500; color: #0099cc; background-color:#fff; } @@ -1918,10 +1878,7 @@ a:visited, #classes-nav li.selected ul li a { /* don't highlight child items */ color: #555555; } -#nav-tree li div.selected a { - font-weight: 500; - color: #0099cc; -} + #nav-swap { height:30px; border-top:1px solid #ccc; @@ -1951,72 +1908,6 @@ a:visited, cursor:pointer; } - -/* nav tree */ -#swapper, #nav-tree, #tree-list { - overflow:hidden; - margin-left:0; -} - -#nav-tree ul { - list-style:none; - padding:0; - margin:10px 0; -} - -#nav-tree ul li div { - padding:0 0 0 4px; -} - -#side-nav #nav-tree ul li a, -#side-nav #nav-tree ul li span.no-children { - padding: 0; - margin: 0; -} - -#nav-tree .plus { - margin: 0 3px 0 0; -} - -#nav-tree ul ul { - list-style: none; - margin: 0; - padding: 0 0 0 0; -} - -#nav-tree ul li { - margin: 0; - padding: 0 0 0 0; - white-space: nowrap; -} - -#nav-tree .children_ul { - padding:0; - margin:0; -} -#nav-tree .children_ul li div { - padding:0 0 0 10px; -} -#nav-tree .children_ul .children_ul li div { - padding:0 0 0 20px; -} - -#nav-tree a.nolink { - color: #222; - text-decoration: none; -} - -#nav-tree span.label { - width: 100%; -} - -#nav-tree { - overflow-x: auto; - overflow-y: scroll; - outline:0; -} - - /* Content */ #doc-col { margin-right:0; @@ -2031,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; - margin-bottom: 15px; + 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; @@ -2061,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; @@ -2084,6 +1984,7 @@ a:visited, display: inline-block; overflow: hidden; } + #api-level-toggle select { border: 0; appearance:none; @@ -2091,10 +1992,11 @@ a:visited, -webkit-appearance: none; background: transparent url(../images/arrows-up-down.png) 23px 5px no-repeat; color: #222; - height: 19px; - line-height: 19px; + /* remove the lines below after xp testing + height: 19px; + line-height: 19px; */ padding: 0; - margin:1px 0 0 0; + margin: .5px 0 0 0; width:150%; font-size:13px; vertical-align:top; @@ -2268,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; @@ -2282,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; @@ -2290,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; @@ -2298,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; @@ -2306,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; @@ -2314,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; @@ -2384,33 +2286,6 @@ div.sampleLine { }*/ /* -------------------------------------------------------------------------- -Butterbar -*/ -#butterbar-wrapper { - position:absolute; - top:0; - left:0; - width:100%; -} -#butterbar { - width:100%; - margin:0 auto; -} -#butterbar-message { - background-color:rgba(255, 187, 51, .4); - font-size:13px; - padding: 5px 0; - text-align:center; -} -a#butterbar-message { - cursor:pointer; - display:block; -} -a#butterbar-message:hover { - text-decoration:underline; -} - -/* -------------------------------------------------------------------------- Misc and article typography */ @@ -2439,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; } @@ -2597,27 +2491,30 @@ p.warning, div.warning { } p.note, div.note { - border-color: #66c2ff; + border-color: #4eb9ed; + border-color: rgba(3, 155, 229, .7); /* #039be5 * 70% */ } p.caution, div.caution { - border-color: #f81; + border-color: #ffbc4c; + border-color: rgba(255, 160, 0, .7); /* #ffa000 * 70% */ } p.warning, div.warning { - border-color: #f55; + border-color: #f48684; + border-color: rgba(239, 83, 80, .7); /* #ef5350 * 70% */ } div.note.design { - border-left: 4px solid #33B5E5; + border-left: 4px solid #00bcd4; } div.note.develop { - border-left: 4px solid #F80; + border-left: 4px solid #ff7043; } div.note.distribute { - border-left: 4px solid #9C0; + border-left: 4px solid #afb42b; } .note p, .caution p, .warning p { @@ -2629,13 +2526,10 @@ div.note.distribute { } .summary-table { - background-color:#e1e4e6; + background-color:#eceff1; padding:1em; margin-bottom:1.5em; } -.summary-table p { - font-size:.98em; -} .summary-table h5 { line-height:1em; @@ -2701,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, @@ -2732,7 +2626,7 @@ a.notice-designers h3 { font-weight:bold; text-transform:uppercase; color:#000 !important; - margin:0 0 1px; + padding:0 0 1px; } a.notice-developers-video p, a.notice-developers p, @@ -2886,7 +2780,7 @@ div#naMessage div { z-index:99; width:450px; position:fixed; - margin:50px 0; + margin:80px 0; padding:4em 4em 3em; background:#FFF; border:1px solid #999; @@ -3074,8 +2968,7 @@ Feature Boxes .feature-box h4, .dialog h4 { - margin: 15px 18px 10px; - padding:0; + padding: 15px 18px 10px; } .feature-box p, @@ -3152,19 +3045,6 @@ Page-Specific Styles padding:0 0 0 4px; } -#jd-header { - padding: 0 0 12px; - margin: 20px 0 12px; - font-size:12px; - padding-bottom:12px; - border-bottom:solid 1px #ccc; -} - -#jd-header h1 { - margin:0; - padding:0 0 6px 0; -} - /* not sure if this is needed in the ref docs, disabling for now .jd-descr h2 { margin:16px 0; @@ -3185,12 +3065,11 @@ links to summary tables) */ #api-info-block { font-size:12px; margin:20px 0 0; - padding:0 10px 6px; font-weight:normal; float:right; text-align:right; color:#999; - max-width:80%; + max-width:300px; font-size: 12px; line-height:14px; } @@ -3205,12 +3084,17 @@ links to summary tables) */ } /* inheritance table */ +table.inhtable>tbody>tr>td { + padding-left:0; +} +table.inhtable>tbody>tr>td div:first-of-type { + padding-left:12px; +} + .jd-inheritance-table { border-spacing:0; - margin:0; + margin:1em 0; padding:0; - font-size:12px; - line-height:14px; background-color:transparent; } .jd-inheritance-table tr td { @@ -3220,23 +3104,13 @@ links to summary tables) */ background-color:transparent; } .jd-inheritance-table .jd-inheritance-space { - font-weight:bold; - width:1em; + width:2em; } .jd-inheritance-table .jd-inheritance-interface-cell { padding-left: 17px; } - -.jd-sumtable a { - text-decoration:none; -} - -.jd-sumtable a:hover { - text-decoration:underline; -} - /* the link inside a sumtable for "Show All/Hide All" */ .toggle-all { display:block; @@ -3246,11 +3120,10 @@ links to summary tables) */ } /* adjustments for in/direct subclasses tables */ -.jd-sumtable.jd-sumtable-subclasses { +.jd-sumtable-subclasses { margin: 1em 0 0 0; max-width:968px; background-color:transparent; - font-size:13px; } /* extra space between end of method name and open-paren */ @@ -3258,11 +3131,6 @@ links to summary tables) */ margin-right: 2px; } -/* right alignment for the return type in sumtable */ -.jd-sumtable .jd-typecol { - text-align:right; -} - /* adjustments for the expando table-in-table */ .jd-sumtable-expando { margin:.5em 0; @@ -3283,7 +3151,9 @@ links to summary tables) */ .jd-sumtable-subclasses div#subclasses-direct, .jd-sumtable-subclasses div#subclasses-indirect { - margin:0 0 0 13px; + /* left margin matches width of the toggle image, + so this section aligns with the text above */ + margin:0 0 0 34px; } @@ -3344,7 +3214,7 @@ attrs, methods, etc. */ h4.jd-details-title { font-size:1.15em; background-color: #E2E2E2; - margin:4em 0 .6em; + margin:1.5em 0 .6em; padding:3px 95px 3px 3px; /* room for api-level */ } body.google h4.jd-details-title { @@ -3352,13 +3222,9 @@ body.google h4.jd-details-title { padding-top:5px; border-top: 1px solid #ccc; } -body.google table.jd-sumtable th { - background-color: #FFF; - color:#000; -} h4.jd-tagtitle { - margin:0; + padding:0; } h4 .normal { @@ -3368,7 +3234,7 @@ h4 .normal { /* API reference: heading for "Parameters", "See Also", etc., in details sections */ h5.jd-tagtitle { - margin:0 0 .25em 0; + padding:0 0 .25em 0; font-size:1em; } @@ -3399,7 +3265,7 @@ div.api-level { color:#999; float:right; padding:0 8px 0; - margin-top:-30px; + margin-top:-35px; } table.jd-tagtable td, @@ -3411,372 +3277,6 @@ table.jd-tagtable th { color:inherit; } - -/* SEARCH FILTER */ - -.menu-container { - position:relative; -} -#search_autocomplete { - font-weight:normal; -} - -.search_filtered_wrapper { - position: absolute; - right: 18px; - top: 64px; -} -.suggest-card { - float:right; - position:relative; - width:170px; - min-height:90px; - border: solid 1px #C5C5C5; - background: white; - margin-right:-5px; - -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); - -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); - box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); -} -.suggest-card.reference { - z-index: 998; - width: auto; -} -.suggest-card.develop { - z-index:997; - border-top: solid 4px #ff7043; -} -.suggest-card.design { - z-index:996; - border-top: solid 4px #00bcd4; -} -.suggest-card.distribute { - z-index:995; - border-top: solid 4px #afb42b; -} -.child-card { - width:100%; -} -.suggest-card.dummy { - width:172px; - float:right; - border:0; - background:transparent; - -moz-box-shadow: none; - -webkit-box-shadow: none; - box-shadow: none; -} - -ul.search_filtered { - min-width:100%; - list-style: none; - margin: 5px 0; - padding: 0; -} -.search_filtered .jd-selected { - background:#efefef; - cursor:pointer; -} -.search_filtered .jd-selected, -.search_filtered .jd-selected a { - color:#039BE5 !important; -} - -.no-display { - display: none; -} - -.search_filtered li.jd-autocomplete { - font-size: 0.81em; - border: none; - margin: 0; - padding: 0; - line-height:1.5em; -} - -.search_filtered li a { - padding: 2px 10px; - color:#222 !important; - display:inline-block; - line-height:12px; -} - -.search_filtered li.header { - font-weight:bold; - color:#444; - border: none; - margin: 0; - padding: 2px 10px; - line-height:1.5em; -} -.search_filtered li.header.small { - font-size:0.85em; -} - -.suggest-card.reference -.search_filtered li.header { - color:#aaa; - font-size: 0.81em; -} - -.search_filtered li.header:first-child { - margin: 0 0 2px; -} - -@media (max-width: 719px) { - .search_filtered_wrapper { - left: 24px; - right: 24px; - top: 44px; - } - - .suggest-card { - box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.1); - float: none; - margin-right: 0; - min-height: 0; - max-height: 204px; - overflow: hidden; - } - - .suggest-card.develop, - .suggest-card.design, - .suggest-card.distribute { - display: none !important; - } - - ul.search_filtered { - margin: 0; - } - - .search_filtered li.jd-autocomplete { - border-top: solid 1px #C5C5C5; - font-size: inherit; - text-align: left; - } - - .search_filtered li.jd-autocomplete:first-child { - border-top: 0; - } - - .search_filtered li a { - display: block; - overflow: hidden; - padding: 14px 10px; - text-overflow: ellipsis; - white-space: nowrap; - } -} - -.show-item { - display: table-row; -} -.hide-item { - display: hidden; -} - - - -/* SEARCH RESULTS */ - - -#leftSearchControl .gsc-twiddle { - background-image : none; -} - -#leftSearchControl td, #searchForm td { - border: 0px solid #000; - padding:0; -} - -#leftSearchControl .gsc-resultsHeader .gsc-title { - padding-left : 0px; - font-weight : bold; - font-size : 13px; - color:#006699; - display : none; -} - -#leftSearchControl .gsc-resultsHeader div.gsc-results-selector { - display : none; -} - -#leftSearchControl .gsc-resultsRoot { - padding-top : 6px; -} - -#leftSearchControl div.gs-visibleUrl-long { - display : block; - color:#006699; -} - -#leftSearchControl .gsc-webResult { - padding:0 0 20px 0; -} - -.gsc-webResult div.gs-visibleUrl-short, -table.gsc-branding, -.gsc-clear-button { - display : none; -} - -.gsc-cursor-box .gsc-cursor div.gsc-cursor-page, -.gsc-cursor-box .gsc-trailing-more-results a.gsc-trailing-more-results, -#leftSearchControl a, -#leftSearchControl a b { - color:#006699; -} - -.gsc-resultsHeader { - display: none; -} - -/* Disable built in search forms */ -.gsc-control form.gsc-search-box { - display : none; -} -table.gsc-search-box { - margin:6px 0 0 0; - border-collapse:collapse; -} - -td.gsc-input { - padding:0 2px; - width:100%; - vertical-align:middle; -} - -input.gsc-input { - border:1px solid #BCCDF0; - width:99%; - padding-left:2px; - font-size:.95em; -} - -td.gsc-search-button { - text-align: right; - padding:0; - vertical-align:top; -} - - -#searchResults { - overflow:hidden; /* because the repositioned page links makes the section think it needs to scroll -(it doesn't) */ - height:auto; -} - -#searchResults .gsc-control { - position:relative; - width:auto; - padding:0 0 10px; -} - -#searchResults .gsc-tabsArea { - position: relative; - white-space: nowrap; - float: left; - width: 25%; -} - -#searchResults .gsc-above-wrapper-area { - display:none; -} - -#searchResults .gsc-resultsbox-visible { - box-sizing: border-box; - float: left; - padding-left:20px; - width: 75%; -} - -@media (max-width: 719px) { - #searchResults .gsc-tabsArea { - display: none; - } - - #searchResults .gsc-resultsbox-visible { - float: none; - padding-left: 0; - width: auto; - } -} - -#searchResults .gsc-tabHeader { - margin-top: 4px; - padding: 3px 6px; - position:relative; - width:auto; - display:block; -} - -#searchResults h2#searchTitle { - padding:0; - margin:30px 0 5px; - border:none; -} - -#searchResults h2#searchTitle em { - font-style:normal; - color:#33B5E5; -} - -#searchResults .gsc-table-result { - margin:5px 0 10px 0; - background-color:transparent; -} -#searchResults .gs-web-image-box, .gs-promotion-image-box { - width:120px; -} -#searchResults .gs-web-image-box img.gs-image, .gs-promotion-image-box img.gs-promotion-image { - max-width:120px; -} - -#searchResults .gsc-table-result .gsc-thumbnail { - padding:0 20px 0 0; -} - -#searchResults td { - background-color:transparent; -} - -#searchResults .gsc-expansionArea { - position:relative; -} -#searchResults .gsc-tabsArea .gsc-cursor-box { - width:200px; - padding:20px 0 0 1px; -} -#searchResults .gsc-cursor-page { - display:inline-block; - float:left; - margin:-1px 0 0 -1px; - padding:0; - height:27px; - width:27px; - text-align:center; - line-height:2; -} - -#searchResults .gsc-tabHeader.gsc-tabhInactive, -#searchResults .gsc-cursor-page { - background: #F0F0F0; - border: 0; - color: #039BE5; -} - -#searchResults .gsc-tabHeader.gsc-tabhActive, -#searchResults .gsc-tabHeader.gsc-tabhActive:hover, -#searchResults .gsc-cursor-page.gsc-cursor-current-page, -#searchResults .gsc-cursor-page.gsc-cursor-current-page:hover { - background-color: #039BE5; - border: 0; - color: #fff; -} - - - - /************ STICKY NAV BAR ******************/ #context { @@ -3823,11 +3323,16 @@ td.gsc-search-button { } /* offset the <a name=""> 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; } @@ -4130,7 +3635,7 @@ body.reference a[name] { #landing h1 { - margin:17px 0 20px 0 !important; + padding:17px 0 20px 0 !important; } a.download-sdk { @@ -4326,7 +3831,7 @@ a.download-sdk { } .slideshow-develop .content-right h2 { padding:0; - margin-bottom:10px; + padding-bottom:10px; border:none; font-size:24px; } @@ -4419,7 +3924,7 @@ a.download-sdk { .feed .feed-container .feed-frame li.playlist-video h5 { font-size:12px; line-height:13px; - margin:0; + padding:0; } .feed .feed-container .feed-frame li.playlist-video p { margin:5px 0 0; @@ -4517,7 +4022,7 @@ a.download-sdk { margin-bottom:0; } .landing-banner h1 { - margin-top:16px; + padding-top:16px; padding-bottom:24px; } .landing-docs, @@ -4531,7 +4036,7 @@ a.download-sdk { color:#555; text-transform:uppercase; border-bottom:1px solid #CCC; - margin:0 0 20px; + padding:0 0 20px; } .landing-docs a { color:#333 !important; @@ -4572,8 +4077,7 @@ a.download-sdk { color:#555; text-transform:uppercase; border-bottom:none; - margin:0 0 1em; - padding:5px 0 0; + padding:5px 0 1em; } @@ -4681,8 +4185,7 @@ a.download-sdk { color:#555; text-transform:uppercase; border-bottom:1px solid #CCC; - padding:8px 0 0 1px; - margin-bottom:14px; + padding:8px 0 14px 1px; clear:both; } @@ -4727,7 +4230,7 @@ a.download-sdk { line-height: 80px; text-align: center; letter-spacing: -1px; - margin-bottom: 6px; + padding-bottom: 6px; } .landing-pre-h1 { @@ -5063,149 +4566,6 @@ a.download-sdk { } - -/** - * VIDEO - */ - -#video-container { - display:none; - position:fixed; - top:0; - left:0; - width:100%; - height:100%; - background-color:rgba(0,0,0,0.8); - z-index:9999; -} - -#video-frame { - max-width:940px; - height:100%; - margin:72px auto; - display:none; - position:relative; -} - -.video-close { - cursor: pointer; - position: absolute; - right: -49px; - top: -49px; - pointer-events: all; -} - -#icon-video-close { - background-image: url("../images/close-white.png"); - background-image: -webkit-image-set(url(../images/close-white.png) 1x, url(../images/close-white_2x.png) 2x); - background-repeat: no-repeat; - background-position: 0 0; - background-size: 36px 36px; - height: 36px; - width: 36px; - display:block; -} - -#icon-video-close:hover { - background-image: url("../images/close-grey.png"); - background-image: -webkit-image-set(url(../images/close-grey.png) 1x, url(../images/close-grey_2x.png) 2x); -} - -/* Preload the hover images */ -a.video-shadowbox-button.white:after { - display:none; - content:url("../images/close-grey.png") url("../images/close-grey_2x.png"); -} - -a.video-shadowbox-button.white { - background-image: url("../images/play-circle-white.png"); - background-image: -webkit-image-set(url(../images/play-circle-white.png) 1x, url(../images/play-circle-white_2x.png) 2x); - background-size: 36px 36px; - background-repeat: no-repeat; - background-position: right; - padding: 16px 42px 16px 8px; - font-size: 18px; - font-weight: 500; - line-height: 24px; - color: #fff; - text-decoration:none; -} - -a.video-shadowbox-button.white:hover { - color:#bababa !important; - background-image: url("../images/play-circle-grey.png"); - background-image: -webkit-image-set(url(../images/play-circle-grey.png) 1x, url(../images/play-circle-grey_2x.png) 2x); -} - -/* Preload the hover images */ -a.video-shadowbox-button.white:after { - display:none; - content:url("../images/play-circle-grey.png") url("../images/play-circle-grey_2x.png"); -} - -/* - * Responsive YouTube embeds from DevSite - * - * When applied to a <div> that wraps a video, "video-wrapper" forces the video - * to float right at 50% of the column width on desktop, but appear as a block - * element at 100% of the column width on smaller screens. - * "video-wrapper-full-width" works the same but is always 100% width. - */ -.video-wrapper, -.video-wrapper-left { - float: right; - margin: 0 0 40px 40px; - padding-top: calc(((100% - 40px) / 2) / 16 * 9); /* 16:9 including margin */ - position: relative; - width: calc((100% - 40px) / 2); /* 50% including margin */ -} - -/* - * "video-wrapper-left" forces 50% without the float - * This is useful for heading content when you want the video to - * appear next to an element that is already floated right - * (e.g. tb-wrapper <div>) - */ -.video-wrapper-left { - float: none; - margin: 16px 0 20px 0; -} - -.video-wrapper-full-width { - margin: 16px 0; - padding-top: 56.25%; /* Forces div to 16:9 at 100% width */ - position: relative; - width: 100%; -} - -.video-wrapper embed, -.video-wrapper iframe, -.video-wrapper object, -.video-wrapper-full-width embed, -.video-wrapper-full-width iframe, -.video-wrapper-full-width object, -.video-wrapper-left embed, -.video-wrapper-left iframe, -.video-wrapper-left object { - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 100%; -} - -@media screen and (max-width: 1000px) { - - .video-wrapper, - .video-wrapper-left { - float: none; - margin: 16px 0; - padding-top: 56.25%; /* Forces div to 16:9 at 100% width */ - width: 100%; - } -} - - /****************** Styles for d.a.c/index: *******************/ @@ -5246,7 +4606,7 @@ Styles for d.a.c/index: font-size: 60px; line-height: 68px; letter-spacing: -1px; - margin-top: 0; + padding-top: 0; } .fullscreen-carousel .hero p { @@ -5385,62 +4745,6 @@ Styles for d.a.c/index: margin-bottom: 26px; } - -/* - Styles for the actions bar. -*/ -.actions-bar { - background: #b0bec5; - text-align: center; -} - -.actions-bar .actions { - padding: 24px 0; - font-size: 0.1px; - line-height: 0.1px; -} - -.actions-bar .actions:after { - content: ''; - width: 100%; - display: inline-block; -} - -.actions-bar .actions > div { - display: inline-block; - margin: 0 16px; -} - -.actions-bar .actions a { - color: #fff; - font-size: 24px; - font-weight: 300; - line-height: 50px; - -webkit-transition: opacity .3s; - transition: opacity .3s; -} - -.actions-bar .actions a:hover { - opacity: .54; -} - -.actions-bar .actions .dac-sprite { - margin: 0 -8px 0 -12px; -} - -@media (max-width: 719px) { - .actions-bar { - text-align: left; - } - - .actions-bar .actions > div { - display: block; - margin: 0; - } -} - - - /* Specific styles for new home page layout of the carousels. */ @@ -5602,7 +4906,100 @@ a.home-new-cta-btn:hover, display:none; } -.dac-visible-mobile-block, .dac-mobile-only, .dac-visible-mobile-inline, .dac-visible-mobile-inline-block, .dac-visible-tablet-block, .dac-visible-tablet-inline, .dac-visible-tablet-inline-block, .dac-visible-desktop-block, .dac-visible-desktop-inline, .dac-visible-desktop-inline-block { +#tb li:before, #qv li:before { + background-position: 0px -196px; + height: 24px; + width: 24px; + content: ''; + left: -8px; + opacity: .7; + position: absolute; + top: -4px; +} + +/* CHANGE EXISTING SELECTOR FOR ANDROID M HERO ONLY + REMOVE THE BELOW STYLES WHEN THE ANDROID M CAROUSEL + GRAPHIC ON THE MAIN LANDING IS TAKEN DOWN */ +.dac-hero.mprev { + background-color: #fff; + background-position: 50% 53%; + background-size: cover; + background-image: url(../images/home/android_m_hero_1200.jpg); + box-sizing: border-box; + font-size: 16px; + min-height: 550px; + padding-top: 88px; +} +.dac-hero.dac-darken.mprev::before { + background: rgba(0, 0, 0, 0.3); + bottom: 0; + content: ''; + display: block; + left: 0; + position: absolute; + right: 0; + top: 0; +} + +.dac-hero.dac-darken.mprev::before { + background: -webkit-linear-gradient(top, rgba(0, 0, 0, .05), rgba(0, 0, 0, .05), #000 950px); + background: linear-gradient(to bottom, rgba(0, 0, 0, .05), rgba(0, 0, 0, 0.05), #000 950px); +} + +@media (max-width: 719px) { + .dac-hero.dac-darken.mprev { + background-size: auto 600px; + background-position: 55% 0; + background-repeat: no-repeat; + } + + .dac-hero-figure.mprev { + height: 10px; + margin: 15px 0; + } +} + +@media (max-width: 719px) { + .dac-hero.dac-darken.mprev { + background-size: auto 600px; + background-position: 55% 0; + background-repeat: no-repeat; + } + + .dac-hero-figure.mprev { + height: 10px; + margin: 15px 0; + } +} + +@media (max-width: 1200px) { + .dac-hero.dac-darken.mprev { + background-size: auto 700px; + background-position: 55% 0; + background-repeat: no-repeat; + } + + .dac-hero-cta.mprev { + white-space:nowrap; + } +} + +@charset "UTF-8"; +/** + * Fades out an element. + * Applies visibility hidden when the transition is finished. + * + * Use opacity: 1; to show the element. + */ +.dac-visible-mobile-block, .dac-mobile-only, +.dac-visible-mobile-inline, +.dac-visible-mobile-inline-block, +.dac-visible-tablet-block, +.dac-visible-tablet-inline, +.dac-visible-tablet-inline-block, +.dac-visible-desktop-block, +.dac-visible-desktop-inline, +.dac-visible-desktop-inline-block { display: none !important; } @@ -5665,6 +5062,13 @@ a.home-new-cta-btn:hover, } /** + * Hide from browsers/screenreaders on all sizes. + */ +.dac-hidden { + display: none !important; +} + +/** * Break strings when their length exceeds the width of their container. */ .dac-text-break { @@ -5754,8 +5158,6 @@ a.home-new-cta-btn:hover, box-sizing: border-box; display: none; height: 70px; - left: 50%; - margin-left: -35px; line-height: 65px; padding-left: 4px; position: absolute; @@ -5763,11 +5165,20 @@ a.home-new-cta-btn:hover, text-align: center; -webkit-transition: opacity .5s; transition: opacity .5s; - top: 50px; width: 70px; z-index: 1; } + .resource-card-6x2 .play-button { + display: block; + left: 10px; + top: 15px; + -webkit-transform: scale(0.73); + -ms-transform: scale(0.73); + transform: scale(0.73); } .resource-card-6x6 .play-button { - display: block; } + display: block; + left: 50%; + margin-left: -35px; + top: 50px; } /* Styling for background image including tinting and section icons in stacks */ .card-bg { @@ -5825,46 +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: 24px; - margin-bottom: 2px; - max-height: 48px; - overflow: hidden; - padding-bottom: 5px; - 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 */ @@ -5959,7 +5448,7 @@ a.home-new-cta-btn:hover, /*text-transform: uppercase;*/ color: #898989; font-size: 17px; - line-height: 24px; + line-height: 23px; margin-bottom: 6px; } .resource-stack-layout .section-card { height: 284px; } @@ -6253,31 +5742,62 @@ 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: 48px; - 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, .no-section .resource-card-6x2 > .card-info .section { +.no-section .resource-card-3x2 > .card-info .section, +.no-section .resource-card-6x2 > .card-info .section { display: none; } -.no-section .resource-card-3x2 > .card-info .description, .no-section .resource-card-6x2 > .card-info .description { +.no-section .resource-card-3x2 > .card-info .description, +.no-section .resource-card-6x2 > .card-info .description { display: block; } /* 1/2 row items */ @@ -6297,7 +5817,7 @@ a.home-new-cta-btn:hover, .resource-card-3x3 > .card-info .section, .resource-card-6x3 > .card-info .section, .resource-card-9x3 > .card-info .section, .resource-card-12x3 > .card-info .section, .resource-card-15x3 > .card-info .section, .resource-card-18x3 > .card-info .section { display: none; } .resource-card-3x3 > .card-info .title, .resource-card-6x3 > .card-info .title, .resource-card-9x3 > .card-info .title, .resource-card-12x3 > .card-info .title, .resource-card-15x3 > .card-info .title, .resource-card-18x3 > .card-info .title { - max-height: 96px; + max-height: 92px; white-space: normal; } .resource-card-3x3 > .card-info .text, .resource-card-6x3 > .card-info .text, .resource-card-9x3 > .card-info .text, .resource-card-12x3 > .card-info .text, .resource-card-15x3 > .card-info .text, .resource-card-18x3 > .card-info .text { height: auto; } @@ -6329,16 +5849,31 @@ a.home-new-cta-btn:hover, /* Example of card menu tinting */ .resource-widget[data-section=distribute\/tools] .section-card-menu .card-bg:after { background: rgba(126, 55, 148, 0.4) !important; } + .resource-widget[data-section=distribute\/tools] .section-card-menu .card-section-icon .icon { background-color: #7e3794 !important; } + .resource-widget[data-section=distribute\/tools] .section-card-menu .card-info ul li { border-top-color: #7e3794 !important; } /* tinting for stacks */ -div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-menu .card-info ul li { +div.jd-descr > .resource-widget[data-section=distribute\/tools] +.section-card-menu .card-info ul li { border-top-color: #7e3794 !important; } -.dac-fab, .button, .landing-button, .dac-button { +/* Show more/less */ +.dac-show-more, +.dac-show-less { + display: none !important; } + +.dac-has-more .dac-show-more { + display: inline-block !important; } + +.dac-has-less .dac-show-less { + display: inline-block !important; } + +.dac-fab, .dac-button-social, .button, .landing-button, +.dac-button { background: transparent; border: 0; border-radius: 3px; @@ -6369,18 +5904,17 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me user-select: none; white-space: nowrap; } -.button, .landing-button, .dac-button.dac-raised { +.button, .landing-button, +.dac-button.dac-raised { background-color: #FAFAFA; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); } .dac-button.dac-raised.dac-primary, .landing-secondary, .button { background-color: #039bef; } .dac-button.dac-raised.dac-primary:hover, .landing-secondary:hover, .button:hover { - background-color: #0288d1; - color:#fff; } + background-color: #0288d1; } .dac-button.dac-raised.dac-primary:active, .landing-secondary:active, .button:active { - background-color: #0277bd; - color:#fff; } + background-color: #0277bd; } .dac-button.dac-raised.dac-primary.disabled, .button.disabled { background-color: #bbb; } @@ -6392,35 +5926,114 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me background-color: #822517; } .dac-button.dac-raised.dac-green, .landing-button.green { - background-color: #90C653; } - -.dac-button.dac-raised.dac-primary, .landing-secondary, .button, .dac-button.dac-raised.dac-red, .landing-primary, .dac-button.dac-raised.dac-green, .landing-button.green { + background-color: #90c653; } + .dac-button.dac-raised.dac-green:hover, .landing-button.green:hover { + background-color: #79b03b; } + .dac-button.dac-raised.dac-green:active, .landing-button.green:active { + background-color: #699933; } + +.dac-button.dac-raised.dac-primary, .landing-secondary, .button, +.dac-button.dac-raised.dac-red, +.landing-primary, +.dac-button.dac-raised.dac-green, +.landing-button.green { color: #fff; } .dac-button.dac-large, .landing-button { padding: 12px 24px; } -.dac-fab { +.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); border-radius: 50%; - font-size: 0; height: 36px; line-height: 36px; + margin: 0; min-width: 0; overflow: hidden; padding: 0; vertical-align: middle; width: 36px; } - .dac-fab:hover, a:hover > .dac-fab { + .dac-fab:hover, .dac-button-social:hover, + a:hover > .dac-fab, + a:hover > .dac-button-social { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.26); } - .dac-fab.dac-primary { + .dac-fab > .dac-sprite, .dac-button-social > .dac-sprite, .dac-fab > .dac-modal-header-close:before, .dac-button-social > .dac-modal-header-close:before, .paging-links .dac-fab > .prev-page-link:before, .paging-links .dac-button-social > .prev-page-link:before, .paging-links .dac-fab > .next-page-link:before, .paging-links .dac-button-social > .next-page-link:before, .paging-links .dac-fab > .next-class-link:before, .paging-links .dac-button-social > .next-class-link:before, .paging-links .dac-fab > .start-class-link:after, .paging-links .dac-button-social > .start-class-link:after { + margin-top: -2px; } + .dac-fab.dac-primary, .dac-primary.dac-button-social { background: #00c7a0; } - .dac-fab.dac-large { + .dac-fab.dac-large, .dac-large.dac-button-social { height: 54px; line-height: 54px; width: 54px; } +.dac-button-social { + background: #ccc; + box-shadow: none; + position: relative; + overflow: hidden; } + .dac-button-social::after { + background: rgba(0, 0, 0, 0.2); + border-radius: 50%; + bottom: 0; + content: ''; + display: block; + left: 0; + opacity: 0; + position: absolute; + right: 0; + top: 0; + -webkit-transition: opacity .3s; + transition: opacity .3s; } + .dac-button-social:hover { + box-shadow: none; } + .dac-button-social:active::after { + opacity: 1; } + .dac-button-social:focus.dac-rss, .dac-button-social:hover.dac-rss { + background: #ff9800; } + .dac-button-social:focus.dac-youtube, .dac-button-social:hover.dac-youtube { + background: #f44336; } + .dac-button-social:focus.dac-gplus, .dac-button-social:hover.dac-gplus { + background: #f44336; } + .dac-button-social:focus.dac-twitter, .dac-button-social:hover.dac-twitter { + background: #55acee; } + +.dac-action { + display: inline-block; + margin: 0 16px; } + .dac-action-link { + color: inherit; + font-size: 24px; + font-weight: 300; + line-height: 50px; + -webkit-transition: opacity .3s; + transition: opacity .3s; } + .dac-action-link:hover { + color: inherit; + opacity: .54; } + .dac-action-sprite { + margin-left: -12px; + margin-right: -8px; } + .dac-actions { + list-style-type: none; + margin: 0; + padding-bottom: 24px; + padding-top: 24px; + text-align: center; } + @media (max-width: 719px) { + .dac-actions { + text-align: left; } } + @media (max-width: 719px) { + .dac-action { + display: block; + margin: 0; } } + .dac-scroll-button { height: 54px; line-height: 54px; @@ -6444,64 +6057,130 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me 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; } - .dac-footer .dac-footer-contact-link, .dac-footer .dac-footer-social-link { - margin-left: 16px; - margin-right: 0; } - .dac-footer-getnews > .dac-fab { - 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; } + 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-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 @@ -6509,7 +6188,16 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me .wrap { margin: 0 auto; max-width: 940px; - clear: both; } + clear: both; +} + +.dac-fullscreen-mode .wrap { + max-width: none; +} + +.dac-fullscreen-mode .dac-search-open .wrap { + max-width: 940px; +} .cols { margin-left: -10px; @@ -6950,7 +6638,7 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me .col-push-15of16 { left: 93.75%; } -@media (max-width: 960px) and (min-width: 720px) { +@media (max-width: 959px) and (min-width: 720px) { .col-tablet-1of1, .col-tablet-2of2, .col-tablet-3of3, .col-tablet-4of4, .col-tablet-5of5, .col-tablet-6of6, .col-tablet-8of8, .col-tablet-10of10, .col-tablet-12of12, .col-tablet-16of16 { width: 100%; } .col-tablet-1of2, .col-tablet-2of4, .col-tablet-3of6, .col-tablet-4of8, .col-tablet-5of10, .col-tablet-6of12, .col-tablet-8of16 { @@ -7145,69 +6833,87 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me left: 93.75%; } } .col-3-wide { - width: 33.33333333%; } + width: 33.3333333333%; } @media (max-width: 719px) { /* Remove .col-12 and .col-13 backward compatibility support as soon as it's been removed. */ -[class*=col-], .col-12 [class*=col-], .col-13 [class*=col-] { +[class*=col-], + .col-12 [class*=col-], + .col-13 [class*=col-] { float: none; left: 0; width: auto; } } +/** + * Fades out an element. + * Applies visibility hidden when the transition is finished. + * + * Use opacity: 1; to show the element. + */ /* Header component */ .dac-header { - background: #fff; - height: 64px; - margin: 0 -20px; -} - -@media (max-width: 719px) { - .dac-header { - margin: 0 -10px; - } -} - -.about .dac-header, .distribute .dac-header, .develop .dac-header { - height: 128px; -} - -.dac-header-inner { - background: #fff; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07); box-sizing: border-box; + background: #6ab344; height: 64px; + margin: 0; left: 0; + position: fixed; right: 0; top: 0; - z-index: 52; + -webkit-transition: background 200ms; + transition: background 200ms; + z-index: 61; } -.dac-header.dac-sub .dac-header-inner { - border-bottom: 1px solid #e5e5e5; - box-shadow: none; +.dac-ndk .dac-header { + background: #00bcd4; } -.dac-header.is-sticky .dac-header-inner { - position: fixed; - -webkit-animation: .3s dac-header-show; - animation: .3s dac-header-show; +.dac-studio .dac-header { + background: #424242; +} + +.dac-search-mode .dac-header { + background: #b0bec5; + -webkit-transition: background 200ms; + transition: background 200ms; +} + +.dac-search-mode .dac-header-logo, + .dac-search-mode .dac-header-console-btn { + opacity: 0; + visibility: hidden; + -webkit-transition: visibility 0s linear 200ms, opacity 200ms linear; + transition: visibility 0s linear 200ms, opacity 200ms linear; } .dac-header-logo { - border-right: 1px solid #e5e5e5; display: block; font-size: 20px; - font-weight: 300; + font-weight: 400; float: left; letter-spacing: .3px; line-height: 36px; - margin-right: 16px; - padding: 14px 24px 14px; + opacity: 1; + padding: 13px 48px 15px 0; } .dac-header-logo, .dac-header-logo:hover, .dac-header-logo:focus { - color: #444; + color: #fff; +} + +@media (min-width: 980px) { + .dac-header-logo { + border-right: 1px solid rgba(0, 0, 0, 0.1); + } +} + +@media (min-width: 720px) and (max-width: 979px) { + .dac-header-logo { + padding-right: 10px; + } } .dac-header-logo-image { @@ -7215,26 +6921,96 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me vertical-align: top; } +.dac-header-tabs { + list-style: none; + margin: 0 10px; + display: none; + opacity: 1; + -webkit-transition: opacity 200ms linear 200ms; + transition: opacity 200ms linear 200ms; +} + +@media (min-width: 720px) { + .dac-header-tabs { + display: inline-block; + } + + /* 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.no-subnav .dac-nav-sub { + top: 0 !important; + } +} + +.dac-header-tabs li { + display: inline-block; +} + +.dac-header-tab { + display: inline-block; + line-height: 64px; + height: 64px; + padding: 0 9px; + color: #fff; + color: rgba(255, 255, 255, 0.7); + font-size: 14px; + text-transform: uppercase; + font-weight: 500; +} + +.dac-header-tab:hover, +.dac-header-tab:focus { + color: #fff; +} + +.dac-header-tab.selected { + border-bottom: 4px solid #fff; + height: 60px; + color: #fff; +} + +.dac-search-mode .dac-header-tabs { + opacity: 0; + -webkit-transition: opacity 0ms linear 0ms; + transition: opacity 0ms linear 0ms; +} + .dac-header-console-btn { - border: 1px solid #c5c5c5; border-radius: 3px; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.11); - background: #fff; + box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2); float: right; font-size: 14px; + font-weight: 500; line-height: 28px; - margin: 17px 30px 17px 10px; - padding: 0 10px; + margin: 13px 13px 12px 24px; + opacity: 1; + padding: 4px 10px; position: relative; - z-index: 52; + text-transform: uppercase; + -webkit-transition: box-shadow .2s; + transition: box-shadow .2s; + z-index: 60; } -.dac-header-console-btn > .dac-sprite { +@media (min-width: 720px) and (max-width: 979px) { + .dac-header-console-btn { + display: none; + } +} + +.dac-header-console-btn > .dac-sprite, .dac-header-console-btn > .dac-modal-header-close:before, .paging-links .dac-header-console-btn > .prev-page-link:before, .paging-links .dac-header-console-btn > .next-page-link:before, .paging-links .dac-header-console-btn > .next-class-link:before, .paging-links .dac-header-console-btn > .start-class-link:after { margin-right: 5px; } .dac-header-console-btn, .dac-header-console-btn:hover, .dac-header-console-btn:focus { - color: #666; + color: #fff; +} + +.dac-header-console-btn:hover { + box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3); } .dac-header-console-btn:focus { @@ -7242,25 +7018,30 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me outline: 0; } +.dac-studio .dac-header-console-btn { + color:#fff; + background:rgba(255, 255, 255, 0.3); +} +.dac-studio .dac-header-console-btn:hover { + background:rgba(255, 255, 255, 0.5); +} +.dac-studio .dac-header-console-btn:focus { + background:rgba(255, 255, 255, 0.7); + color:#000; +} + @media (max-width: 719px) { .dac-header { - height: 64px !important; text-align: center; } - .dac-header-inner { - position: fixed; - } - .dac-header-logo { border-right: 0; display: inline-block; margin-right: 0; float: none; - } - - .dac-header.dac-sub { - display: none; + padding-left: 0; + padding-right: 0; } .dac-header-console-btn { @@ -7268,57 +7049,41 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me } } -@-webkit-keyframes dac-header-show { - 0% { - -webkit-transform: translateY(-64px); - transform: translateY(-64px); - } - - 100% { - -webkit-transform: translateY(0); - transform: translateY(0); - } -} - -@keyframes dac-header-show { - 0% { - -webkit-transform: translateY(-64px); - transform: translateY(-64px); - } - - 100% { - -webkit-transform: translateY(0); - transform: translateY(0); - } -} - /* Header Breadcrumbs component */ .dac-header-crumbs { - display: none; list-style-type: none; - margin: 0; + margin: 23px 0 -13px 0; + display: inline-block; } -.is-sticky .dac-header-crumbs { - display: block; +body.no-crumbs .dac-header-crumbs { + display:none; +} + +.dac-header-crumbs.dac-has-content { + opacity: 1; } .dac-header-crumbs-item { float: left; position: relative; margin: 0; - padding-left: 10px; + padding: 0; +} + +.dac-header-crumbs-item i, .dac-header-crumbs-item .dac-nav-link-forward { + display: none; } .dac-header-crumbs-item:before { - color: #444; - content: '>'; - font-weight: 300; - font-size: 20px; - left: 0; - line-height: 28px; - padding: 16px 0; + content: ''; + background: transparent url(../images/styles/disclosure_right.png) no-repeat scroll 50% 50%; + width: 10px; + height: 10px; + display: inline-block; position: absolute; + top: 12px; + left: -15px; } .dac-header-crumbs-item:first-child:before { @@ -7326,201 +7091,579 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me } .dac-header-crumbs-link { - color: #444; display: block; font-size: 16px; - font-weight: 300; line-height: 32px; - padding: 16px 16px; - -webkit-transition: background-color 0.35s cubic-bezier(0.35, 0, 0.25, 1); - transition: background-color 0.35s cubic-bezier(0.35, 0, 0.25, 1); + padding: 0 20px 0 0; } -.dac-header-crumbs-link:hover, .dac-header-crumbs-link:focus { - color: rgba(68, 68, 68, 0.7); +.dac-header-crumbs-link, .dac-header-crumbs-link:hover, .dac-header-crumbs-link:focus { + color: #666; } .dac-header-crumbs-link:focus { - background: rgba(63, 81, 181, 0.1); outline: 0; + text-decoration: underline; } .dac-header-crumbs-link.current { - color: #6ab344; font-weight: 400; } -.dac-header-crumbs-link.current.ndk { - color: #00BCD4; -} - -@media (max-width: 719px) { - .dac-header-crumbs { - display: none; - } -} - /* Header site search component */ .dac-header-search { - background: #fff; - border-left: 1px solid #e5e5e5; - display: block; - float: right; - height: 28px; - padding: 18px 0; - position: relative; - overflow: hidden; - -webkit-transition: width 0.4s ease, left 0.4s ease; - transition: width 0.4s ease, left 0.4s ease; - width: 64px; - z-index: 52; + bottom: 64px; + position: absolute; + right: 220px; + top: 0; + width: 238px; + -webkit-transition: width 300ms, right 100ms, margin 100ms; + transition: width 300ms, right 100ms, margin 100ms; } -.dac-header-search:hover, .dac-header-search.active { - width: 228px; +.dac-studio .dac-header-search { + right: 20px; /* move searchbar farther right, because there's no button */ } .dac-header-search-inner { - width: 228px; + margin: 0 auto; + max-width: 940px; + position: relative; + width: 100%; } -.dac-header-search-btn { - left: 20px; - position: absolute; - top: 20px; - opacity: .54; -} +@media (min-width: 980px) { + .dac-header-search-inner::after { + background: -webkit-linear-gradient(right, #6ab344, rgba(106, 179, 68, 0)); + background: linear-gradient(to left, #6ab344, rgba(106, 179, 68, 0)); + content: ''; + display: block; + height: 64px; + position: absolute; + right: 100%; + top: 0; + -webkit-transition: opacity 200ms, -webkit-transform 300ms; + transition: opacity 200ms, transform 300ms; + -webkit-transform-origin: right center; + -ms-transform-origin: right center; + transform-origin: right center; + width: 64px; + } + .dac-studio .dac-header-search-inner::after { + background: -webkit-linear-gradient(right, #424242, rgba(66, 66, 66, 0)); + background: linear-gradient(to left, #424242, rgba(66, 66, 66, 0)); + } -.dac-header-search-form { - left: 54px; - opacity: 0; - position: absolute; - right: 24px; - top: 20px; - -webkit-transition: opacity .4s; - transition: opacity .4s; + .dac-search-mode .dac-header-search-inner::after { + opacity: 0; + -webkit-transform: scaleX(0); + -ms-transform: scaleX(0); + transform: scaleX(0); + } } -.dac-header-search:hover .dac-header-search-form, .dac-header-search.active .dac-header-search-form { - opacity: 1; +.dac-header-search-icon { + left: 8px; + pointer-events: none; + position: absolute; + top: 18px; } .dac-header-search-input { - background-color: transparent; + background: #77be53; + border-radius: 3px; border: none; - border-bottom: 1px solid #CCC; - border-radius: 0; box-sizing: border-box; - color: #2f2f2f; + color: #fff; font-size: 14px; - height: 24px; - outline: none; - padding: 4px 20px 4px 0; + font-weight: 600; + margin: 13px 0; + padding: 9px 36px 10px; + -webkit-transition: background 200ms, color 200ms; + transition: background 200ms, color 200ms; width: 100%; - z-index: 1500; } -.dac-header-search-input:focus { - color: #222; - font-weight: bold; - outline: 0; +.dac-studio .dac-header-search-input { + background: rgba(255, 255, 255, 0.3); } -.dac-header-search-close { +.dac-header-search-close, .dac-header-search-clear { + background: none; + border: none; + cursor: pointer; + font-size: 0; + outline: none; position: absolute; - right: 4px; - bottom: 4px; - width: 16px; - height: 16px; margin: 0; - text-indent: -1000em; - background: url(../images/close.png) no-repeat 0 0; - z-index: 9999; } -.dac-header-search-close:hover, .dac-header-search-close:focus { - background-position: -16px 0; - cursor: pointer; +.dac-header-search-clear { + display: inline-block; + opacity: .4; + padding: 8px; + top: 15px; + right: 0; +} + +.dac-header-search-clear:hover, .dac-header-search-clear:focus { + opacity: .8; +} + +.dac-header-search-close { + left: -45px; + top: 20px; + -webkit-transform: translateX(45px); + -ms-transform: translateX(45px); + transform: translateX(45px); + visibility: hidden; +} + +.dac-header-search ::-webkit-input-placeholder { + color: #fff; + font-weight: 300; + -webkit-transition: color 200ms; + transition: color 200ms; +} + +.dac-header-search :-moz-placeholder { + color: #fff; + font-weight: 300; + transition: color 200ms; +} + +.dac-header-search ::-moz-placeholder { + color: #fff; + font-weight: 300; + transition: color 200ms; +} + +.dac-header-search :-ms-input-placeholder { + color: #fff; + font-weight: 300; + transition: color 200ms; +} + +.dac-header-search-input:focus { + outline: 0; +} + +.dac-search-mode .dac-header-search { + width: 940px; + right: 50%; + margin-right: -470px; +} + +.dac-search-mode .dac-header-search .dac-header-search-input::after { + background: -webkit-linear-gradient(right, #b0bec5, rgba(176, 190, 197, 0)); + background: linear-gradient(to left, #b0bec5, rgba(176, 190, 197, 0)); +} + +.dac-search-mode .dac-header-search .dac-header-search-close { + -webkit-transition: -webkit-transform 200ms ease-out 300ms; + transition: transform 200ms ease-out 300ms; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + visibility: visible; +} + +.dac-search-mode .dac-header-search .dac-header-search-icon { + left: 23px; +} + +.dac-search-mode .dac-header-search .dac-header-search-input { + background: #fff; + border-radius: 0; + font-size: 18px; + color: #666; + padding-left: 55px; + margin-top: 11px; +} + +.dac-search-mode .dac-header-search ::-webkit-input-placeholder { + color: #505050; +} + +.dac-search-mode .dac-header-search :-moz-placeholder { + color: #505050; +} + +.dac-search-mode .dac-header-search ::-moz-placeholder { + color: #505050; +} + +.dac-search-mode .dac-header-search :-ms-input-placeholder { + color: #505050; +} + +@media (min-width: 720px) and (max-width: 979px) { + .dac-studio .dac-header-search, + .dac-header-search { + right: 20px; + width: 200px; + -webkit-transition: left 200ms, right 200ms, width 200ms; + transition: left 200ms, right 200ms, width 200ms; + } + + .dac-search-mode .dac-header-search { + left: 60px; + right: 0; + width: 100%; + } + + .dac-search-mode .dac-header-search .dac-header-search-inner { + margin: 0; + width: calc(100% - 60px - 10px); + } + + .dac-header-search-close { + left: -42px; + } } @media (max-width: 719px) { .dac-header-search { - position: absolute; + bottom: 0; + border-radius: 0; + border-left: 1px solid rgba(0, 0, 0, 0.1); + cursor: pointer; left: calc(100% - 64px); + margin: 0; + overflow: hidden; + padding-left: 10px; + padding-right: 10px; + position: absolute; right: 0; top: 0; - width: auto; } - .dac-header-search:hover, .dac-header-search.active { - left: 64px; - width: auto; + .dac-header-search-input { + background: none; + cursor: pointer; + opacity: 0; + } + + .dac-search-mode .dac-header-search { + background: #b0bec5; + cursor: default; + overflow: visible; + left: 60px; + right: 0; + width: 100%; + -webkit-transition: left 200ms, right 200ms, width 200ms; + transition: left 200ms, right 200ms, width 200ms; + padding: 0; + border: none; + } + + .dac-search-mode .dac-header-search .dac-header-search-inner { + margin: 0; + width: calc(100% - 60px - 10px); } + + .dac-search-mode .dac-header-search .dac-header-search-input { + opacity: 1; + } +} + +.highlighted em { + color: #333; + font-style: normal; + font-weight: 700; +} + +.card-info .title.highlighted { + color: #666; } /* Main navigation component */ -.is-sticky .dac-nav, .dac-nav-head, .dac-nav-toggle { +.dac-nav-sidebar { + background: #f5f8fa; + border-right: 1px solid rgba(0, 0, 0, 0.1); + bottom: 0; + left: 0; + overflow: hidden; + padding: 0; + position: fixed; + top: 64px; + -webkit-transform: translate(-100%, 0); + -ms-transform: translate(-100%, 0); + transform: translate(-100%, 0); + width: 250px; + z-index: 60; +} + +.dac-nav-animating .dac-nav-sidebar { + -webkit-transition: -webkit-transform .3s; + transition: transform .3s; +} + +.dac-nav-open .dac-nav-sidebar { + -webkit-transform: translate(0, 0); + -ms-transform: translate(0, 0); + transform: translate(0, 0); +} + +.dac-search-mode .dac-nav-sidebar { + -webkit-transition: -webkit-transform .3s; + transition: transform .3s; + -webkit-transform: translate(-100%, 0); + -ms-transform: translate(-100%, 0); + transform: translate(-100%, 0); +} + +.dac-nav .dac-swap-section { + -webkit-transition-duration: .3s; + transition-duration: .3s; +} + +.dac-nav-back { + margin-top: -3px; + margin-right: 10px; +} + +.dac-nav-fullscreen { + background: transparent; + border: none; + bottom: 100%; + cursor: pointer; display: none; + opacity: .8; + outline: none; + padding: 20px 15px; + position: absolute; + right: 0; +} + +@media (min-width: 980px) { + .dac-nav-fullscreen { + display: inline-block; + } +} + +.dac-nav-fullscreen:hover { + opacity: 1; +} + +.dac-nav-sub-slider { + cursor: pointer; + opacity: .5; + position: absolute; + right: 7px; + top: 5px; +} + +.dac-nav-back-button { + background: #546e7a; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + display: block; + font-weight: 500; + font-size: 18px; + left: 0; + margin: 0; + padding: 20px; + position: absolute !important; + right: 0; + top: 0; + z-index: 1; +} + +.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; +} + +.dac-nav-logo { + font-size: 20px; + font-weight: 300; + letter-spacing: .3px; + line-height: 36px; + margin: 0; + padding: 14px 24px; +} + +.dac-nav-logo, .dac-nav-logo:hover, .dac-nav-logo:focus { + color: #444; } .dac-nav-list { + bottom: 0; + left: 0; list-style-type: none; - left: 192px; margin: 0; - position: absolute; + -webkit-overflow-scrolling: touch; + overflow-y: scroll; + padding: 16px 0; + position: absolute !important; right: 0; - top: 0; - z-index: 51; + top: 0 !important; + scrollbar-face-color: #b7baba; + scrollbar-track-color: #e5e8e9; } -.dac-nav-item { - float: left; +.dac-nav-list::-webkit-scrollbar { + width: 4px; + height: 4px; +} + +.dac-nav-list::-webkit-scrollbar-thumb { + background: #b7baba; +} + +.dac-nav-list::-webkit-scrollbar-track { + background: #e5e8e9; +} + +.dac-nav-secondary { margin: 0; } +.dac-nav-item { + list-style-type: none; + margin: 0 0 10px; + position: relative; +} + +.dac-nav-secondary .dac-nav-item { + margin-bottom: 0; +} + .dac-nav-head { - margin-bottom: 10px; + display: block; + font-size: 16px; + font-weight: 300; + letter-spacing: .24px; + line-height: 32px; + margin-bottom: 20px; + margin-top: 0; } .dac-nav-dimmer { background: #000; - display: none; + display: block; height: 100%; left: 0; opacity: 0; position: fixed; top: 0; - -webkit-transition: visibility 0s linear .3s, opacity .3s linear; - transition: visibility 0s linear .3s, opacity .3s linear; -webkit-transform: translateZ(0); transform: translateZ(0); visibility: hidden; width: 100%; - z-index: 52; + z-index: 60; +} + +.dac-nav-animating .dac-nav-dimmer { + -webkit-transition: visibility 0s linear .3s, opacity .3s linear; + transition: visibility 0s linear .3s, opacity .3s linear; +} + +.dac-nav-open .dac-nav-dimmer { + opacity: .8; + -webkit-transition-delay: 0s; + transition-delay: 0s; + visibility: visible; +} + +@media (min-width: 980px) { + .dac-nav-dimmer { + display: none; + } } .dac-nav-hamburger { display: inline-block; + float: left; height: 15px; - width: 16px; + padding: 22px 20px; + width: 18px; +} + +@media (max-width: 719px) { + .dac-nav-hamburger { + border-right: 1px solid rgba(0, 0, 0, 0.1); + left: 0; + padding-bottom: 27px; + position: absolute; + top: 0; + } } .dac-nav-hamburger-top, .dac-nav-hamburger-mid, .dac-nav-hamburger-bot { - background: #999; + background: rgba(0, 0, 0, 0.4); display: block; - height: 3px; + height: 2px; margin: 3px 0 0; + opacity: .5; width: 100%; } +.dac-studio .dac-nav-hamburger-top, +.dac-studio .dac-nav-hamburger-mid, +.dac-studio .dac-nav-hamburger-bot { + background: rgba(256, 256, 256, 0.4); +} + +.dac-nav-animating .dac-nav-hamburger-top, .dac-nav-animating .dac-nav-hamburger-mid, .dac-nav-animating .dac-nav-hamburger-bot { + -webkit-transition: opacity .3s; + transition: opacity .3s; +} + +@media (max-width: 719px) { + .dac-nav-hamburger-top, .dac-nav-hamburger-mid, .dac-nav-hamburger-bot { + background: #fff; + opacity: 1; + } +} + +.dac-nav-open .dac-nav-hamburger-top, + .dac-nav-open .dac-nav-hamburger-mid, + .dac-nav-open .dac-nav-hamburger-bot { + opacity: 1; +} + +.dac-search-mode .dac-nav-hamburger { + opacity: 0; + visibility: hidden; + -webkit-transition: visibility 0s linear 200ms, opacity 200ms linear; + transition: visibility 0s linear 200ms, opacity 200ms linear; +} + .dac-nav-link { color: #444; display: block; - font-size: 16px; - font-weight: 300; + font-size: 14px; + text-transform: uppercase; + font-weight: 500; letter-spacing: .24px; - line-height: 32px; - padding: 18px 16px 14px; + padding: 5px 20px; -webkit-transition: background-color 0.35s cubic-bezier(0.35, 0, 0.25, 1); transition: background-color 0.35s cubic-bezier(0.35, 0, 0.25, 1); } @@ -7534,161 +7677,410 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me outline: 0; } -.dac-nav-link.has-subnav, .dac-nav-link.selected { - border-bottom: 3px solid #6ab344; - font-weight: 500; - padding-bottom: 11px; +.dac-nav-secondary .dac-nav-link { + font-size: 12px; + font-weight: 400; + padding-left: 40px; + text-transform: none; } -.dac-nav-link.has-subnav.ndk, .dac-nav-link.selected.ndk { - border-bottom: 3px solid #00BCD4; +.dac-nav-link.selected { + background: rgba(63, 81, 181, 0.1); + color: #039bef; + position: relative; } -.dac-nav-secondary { - border-bottom: 1px solid #e5e5e5; +.dac-nav-link-forward { + background: #546E7A; + color: #fff; + cursor: pointer; + display: inline-block; + line-height: 34px; + padding: 0; + position: absolute; + right: 0; + top: 0; + text-align: center; + width: 34px; +} + +.dac-nav-link-forward > .dac-nav-forward { + opacity: .7; + vertical-align: -3px; +} + +.dac-nav-sub { + bottom: 0; + left: 0; + position: absolute !important; + top: 65px !important; + right: 0; + z-index: 1; +} + +#body-content { + padding-top: 64px; +} + +.dac-nav-animating #body-content { + -webkit-transition: padding .3s; + transition: padding .3s; +} + +@media (min-width: 980px) { + .dac-nav-open #body-content { + padding-left: 250px; + } + + /* Do not show nav toggle on large screens (when no subnav) */ + body.no-subnav .dac-nav-toggle { + display:none; + } + body.no-subnav .dac-header-logo { + padding-left:20px; + } + /* ...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.no-subnav.full-width #body-content { + padding-left:0; + } +} + +.dac-nav-open { + overflow: hidden; +} + +@media (min-width: 980px) { + .dac-nav-open { + overflow: visible; + } +} + +#devdoc-nav { + height: 100%; +} + +.data-reference-resources-wrapper { display: none; - left: -192px; +} + +.dac-reference-nav { + height: calc(100% - 36px); + overflow: hidden; + position: relative; +} + +.dac-reference-nav ul, + .dac-reference-nav li { + margin: 0; list-style-type: none; +} + +.dac-reference-nav-list { + bottom: 0; + overflow: hidden; + overflow-y: scroll; + left: 0; + padding: 10px; + padding-left: 20px; + position: absolute; + right: 0; + top: 0; + scrollbar-face-color: #9da4a7; + scrollbar-track-color: #c4cdd1; +} + +.dac-reference-nav-list::-webkit-scrollbar { + width: 4px; + height: 4px; +} + +.dac-reference-nav-list::-webkit-scrollbar-thumb { + background: #9da4a7; +} + +.dac-reference-nav-list::-webkit-scrollbar-track { + background: #c4cdd1; +} + +.dac-reference-nav-resources { + display: none; + padding: 0 0 0 13px; +} + +.dac-reference-nav-resource, +.dac-reference-nav-toggle { + color: #505050; + cursor: pointer; + display: block; + font-size: 12px; + line-height: 1; + overflow: hidden; margin: 0; + padding: 3px 0; + position: relative; + text-overflow: ellipsis; + white-space: nowrap; +} + +.dac-reference-nav-toggle { + margin-left: -12px; + padding-left: 12px; +} + +.selected > .dac-reference-nav-resource { + color: #039bef; + font-weight: 600; +} + +.dac-reference-nav-toggle::before { + background: transparent url(../images/styles/disclosure_up.png) no-repeat center center; + content: ''; + display: block; + height: 19px; + left: 0; position: absolute; - top: 64px; + top: 0; + width: 8px; +} + +.dac-reference-nav-toggle.dac-closed::before { + -webkit-transform: scaleY(-1); + -ms-transform: scaleY(-1); + transform: scaleY(-1); +} + +/* nav */ +#nav { + background: #cfd8dc; + bottom: 0; + left: 0; + margin: 0; + -webkit-overflow-scrolling: touch; + overflow-y: scroll; + position: absolute !important; right: 0; + top: 0 !important; + padding: 10px; + scrollbar-face-color: #9da4a7; + scrollbar-track-color: #c4cdd1; + /* section header links */ + /* nested nav headers */ +} + +#nav::-webkit-scrollbar { + width: 4px; + height: 4px; } -.dac-nav-link.has-subnav + .dac-nav-secondary, .dac-nav-link.selected + .dac-nav-secondary { +#nav::-webkit-scrollbar-thumb { + background: #9da4a7; +} + +#nav::-webkit-scrollbar-track { + background: #c4cdd1; +} + +#nav li { + font-size: 12px; + line-height: 18px; + list-style-type: none; + margin: 0; + padding: 0; +} + +#nav a { + color: #505050; + text-decoration: none; + word-wrap: break-word; +} + +#nav .nav-section-header { + padding: 0 30px 0 0; + position: relative; + -webkit-transition: background-color .1s; + transition: background-color .1s; +} + +#nav .nav-section-header.empty { + padding: 0; +} + +#nav .nav-section-header.empty::after { + display: none; +} + +#nav .nav-section-header .toggle-icon { + background: transparent url(../images/styles/disclosure_down.png) no-repeat scroll 50% 50%; + content: ''; + height: 34px; display: block; + position: absolute; + right: 0; + top: 1px; + width: 34px; } -.dac-nav-secondary .dac-nav-link { - color: #666; - padding: 17px 16px 15px; +#nav li.selected a { + color: #0288D1; } -.dac-nav-secondary .dac-nav-link:hover, .dac-nav-secondary .dac-nav-link:focus { - color: rgba(102, 102, 102, 0.7); +#nav li.selected ul li a { + color: #505050; } -@media (min-width: 720px) and (max-width: 979px) { - .dac-nav-secondary .dac-nav-link { - padding-left: 8px; - padding-right: 8px; - } +#nav li.expanded .nav-section-header { + background: #bac2c6; } -.dac-nav-secondary .dac-nav-link.selected { - border: none; +#nav li.expanded .nav-section-header.empty { + background: none; +} + +#nav li.expanded li .nav-section-header { + background: none; +} + +#nav li.expanded li ul { + padding: 0 10px; +} + +#nav li.expanded > .nav-section-header .toggle-icon { + content: ''; + background: transparent url(../images/styles/disclosure_up.png) no-repeat scroll 50% 50%; + width: 34px; + height: 34px; +} + +#nav li.expanded li ul.tree-list-children { + padding: 0; +} + +#nav li.expanded li ul.tree-list-children .tree-list-children { + padding: 0 0 0 10px; +} + +#nav .nav-section .nav-section .nav-section-header { + /* no white line between second level sections */ + margin-bottom: 0; +} + +#nav > li > div > a { + display: block; font-weight: 700; + padding: 10px; } -.dac-nav-secondary .dac-nav-link.selected.ndk { - border: none; +#nav .nav-section .nav-section { + position: relative; + padding: 0; + margin: 0; +} + +#nav .nav-section li a { + /* first gen child (2nd level li) */ + display: block; font-weight: 700; + text-transform: none; + padding: 10px; } -@media (max-width: 719px) { - .dac-nav-open { - overflow: hidden; - } +#nav .nav-section li li a { + /* second gen child (3rd level li) */ + font-weight: 400; + padding: 6px 6px 6px 10px; +} - .dac-nav-toggle { - border-right: 1px solid #e5e5e5; - display: inline-block; - position: absolute; - left: 0; - line-height: 64px; - text-align: center; - width: 64px; - } +#nav li span.tree-list-subtitle { + display: inline-block; + color: #555; + font-size: 12px; + padding: 10px; + text-transform: uppercase; +} - .dac-nav-head, .dac-nav-secondary, .dac-nav-dimmer { - display: block; - } +#nav li span.tree-list-subtitle:before { + content: '—'; +} - .dac-nav-dimmer.dac-nav-open { - opacity: .8; - -webkit-transition-delay: 0s; - transition-delay: 0s; - visibility: visible; - } +#nav li span.tree-list-subtitle:after { + content: '—'; +} - .dac-nav-list { - background: #fff; - bottom: 0; - left: auto; - max-width: 280px; - -webkit-overflow-scrolling: touch; - overflow-y: scroll; - padding: 0 0 20px 0; - position: fixed; - right: 100%; - top: 0; - -webkit-transition: -webkit-transform .3s ease; - transition: transform .3s ease; - width: 85%; - z-index: 52; - } +#nav li span.tree-list-subtitle.package { + padding-top: 15px; + cursor: default; +} - .dac-nav-list.dac-nav-open { - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - } +#nav li span.tree-list-subtitle.package:before { + content: ''; +} - .dac-nav-secondary { - border: none; - position: static; - width: 100%; - } +#nav li span.tree-list-subtitle.package:after { + content: ''; +} - .dac-nav-item { - float: none; - } +#nav li ul.tree-list-children.classes { + padding-left: 10px; +} - .dac-nav-link { - display: block; - font-size: 12px; - font-weight: 600; - color: #333; - padding: 0 20px; - } +#nav li ul { + display: none; + overflow: hidden; + margin: 0; +} - .dac-nav-link.selected { - color: #09f; - } +#nav li ul.animate-height-in { + -webkit-transition: height 0.25s ease-in; + transition: height 0.25s ease-in; +} - .dac-nav-secondary .dac-nav-link { - font-weight: 400; - margin-left: 20px; - margin-right: 20px; - padding: 0 20px; - } +#nav li ul.animate-height-out { + -webkit-transition: height 0.25s ease-out; + transition: height 0.25s ease-out; +} - .dac-nav-link.has-subnav, .dac-nav-link.selected { - border: none; - padding: 0 20px; - } +#nav li ul li { + padding: 0; +} - .dac-nav-link.has-subnav.ndk, .dac-nav-link.selected.ndk { - border: none; - padding: 0 20px; - } +#nav li li li { + padding: 0; +} - .dac-logo-image { - margin-right: 5px; - vertical-align: top; - } +#nav li ul > li { + padding: 0; +} - .dac-nav-logo { - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.04); - font-size: 20px; - font-weight: 300; - letter-spacing: .3px; - line-height: 36px; - padding: 14px 24px; - } +#nav li ul > li:last-child { + padding-bottom: 5px; +} - .dac-nav-logo, .dac-nav-logo:hover, .dac-nav-logo:focus { - color: #444; - } +#nav li ul.tree-list-children > li:last-child { + padding-bottom: 0; +} + +#nav li.expanded ul > li { + background: #c4cdd1; +} + +#nav li.expanded ul > li li { + background: inherit; +} + +#nav li ul.tree-list-children ul { + display: block; +} + +#nav.samples-nav li li li a { + padding-top: 3px; + padding-bottom: 3px; +} + +#nav.samples-nav li li ul > li:last-child { + padding-bottom: 3px; } /* Hero carousel */ @@ -7713,7 +8105,26 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me 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%); @@ -7743,6 +8154,10 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me margin: 0 0 14px; } +.dac-studio .dac-hero-title { + padding-top:0; +} + @media (max-width: 719px) { .dac-hero-title { font-size: 28px; @@ -7773,10 +8188,28 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me opacity: .54; } -.dac-hero-cta .dac-sprite { +.dac-hero-cta .dac-sprite, .dac-hero-cta .dac-modal-header-close:before, .dac-hero-cta .paging-links .prev-page-link:before, .paging-links .dac-hero-cta .prev-page-link:before, .dac-hero-cta .paging-links .next-page-link:before, .paging-links .dac-hero-cta .next-page-link:before, .dac-hero-cta .paging-links .next-class-link:before, .paging-links .dac-hero-cta .next-class-link:before, .dac-hero-cta .paging-links .start-class-link:after, .paging-links .dac-hero-cta .start-class-link:after { 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; @@ -7788,16 +8221,16 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me } /* 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; } @@ -7812,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; } @@ -7837,7 +8270,8 @@ section#features { will-change: opacity; } -.dac-hero-carousel > .dac-hero, .dac-hero-carousel > .dac-hero .wrap { +.dac-hero-carousel > .dac-hero, + .dac-hero-carousel > .dac-hero .wrap { opacity: 0; } @@ -7854,7 +8288,8 @@ section#features { transition: opacity .5s .5s; } -.dac-hero-carousel > .dac-hero.out, .dac-hero-carousel > .dac-hero.out .wrap { +.dac-hero-carousel > .dac-hero.out, + .dac-hero-carousel > .dac-hero.out .wrap { -webkit-transition: opacity 0s .5s; transition: opacity 0s .5s; opacity: 0; @@ -8019,19 +8454,24 @@ section#features { transition: transform .2s; } -.dac-focused > .dac-form-floatlabel, .dac-has-value > .dac-form-floatlabel { +.dac-focused > .dac-form-floatlabel, + .dac-has-value > .dac-form-floatlabel { cursor: default; - -webkit-transform: translate3d(0, 0, 0) scale(.75); - transform: translate3d(0, 0, 0) scale(.75); + -webkit-transform: translate3d(0, 0, 0) scale(0.75); + transform: translate3d(0, 0, 0) scale(0.75); } .dac-form-radio, .dac-form-checkbox { opacity: 0; position: absolute; + visibility: hidden; } .dac-form-radio-group, .dac-form-checkbox-group { display: table; +} + +.dac-form-radio-group + .dac-form-radio-group, .dac-form-checkbox-group + .dac-form-radio-group, .dac-form-radio-group + .dac-form-checkbox-group, .dac-form-checkbox-group + .dac-form-checkbox-group { margin-top: 10px; } @@ -8049,14 +8489,17 @@ section#features { .dac-form-radio-button::after, .dac-form-radio-button::before, .dac-form-checkbox-button::after, .dac-form-checkbox-button::before { box-sizing: border-box; content: ''; - border-radius: 50%; display: block; - height: 100%; position: absolute; +} + +.dac-form-radio-button::after, .dac-form-radio-button::before { + border-radius: 50%; + height: 100%; width: 100%; } -.dac-form-radio-button::before, .dac-form-checkbox-button::before { +.dac-form-radio-button::before { background: rgba(0, 0, 0, 0.7); -webkit-transform: translateZ(0) scale(0); transform: translateZ(0) scale(0); @@ -8064,21 +8507,57 @@ section#features { transition: transform .3s; } -.dac-form-radio-button::after, .dac-form-checkbox-button::after { +.dac-form-radio-button::after { border: 2px solid rgba(0, 0, 0, 0.7); } -.dac-form-radio:checked + .dac-form-radio-button::before, .dac-form-checkbox:checked + .dac-form-checkbox-button::before { - -webkit-transform: translateZ(0) scale(.5); - transform: translateZ(0) scale(.5); +.dac-form-radio:checked + .dac-form-radio-button::before { + -webkit-transform: translateZ(0) scale(0.5); + transform: translateZ(0) scale(0.5); } -.dac-form-radio:focus + .dac-form-radio-button::after, .dac-form-checkbox:focus + .dac-form-checkbox-button::after { +.dac-form-radio:focus + .dac-form-radio-button::after { border: 2px solid #09f; } -.dac-form-checkbox-button::after, .dac-form-checkbox-button::before { - border-radius: 0; +.dac-form-checkbox-button::before { + border: 1px solid #6c6e6f; + border-radius: 3px; + height: 100%; + -webkit-transition: background .1s ease-out, box-shadow .3s ease-out; + transition: background .1s ease-out, box-shadow .3s ease-out; + width: 100%; +} + +.dac-form-checkbox-button::after { + border-bottom: 2px solid #fff; + border-left: 2px solid #fff; + bottom: 7px; + height: 7px; + left: 3px; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + width: 12px; +} + +.dac-form-checkbox:checked + .dac-form-checkbox-button::before { + background: #6c6e6f; + -webkit-transition-timing-function: ease-in; + transition-timing-function: ease-in; +} + +.dac-form-checkbox:focus + .dac-form-checkbox-button::before, + .dac-form-checkbox:active + .dac-form-checkbox-button::before { + box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05); +} + +.dac-form-label { + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } @media (max-width: 719px) { @@ -8087,42 +8566,144 @@ section#features { } } -/* Media component */ -.dac-media { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-flow: row wrap; - -ms-flex-flow: row wrap; - flex-flow: row wrap; +/* Filter Resources Component*/ +.dac-filter { + color: #505050; + margin-bottom: 20px; + position: relative; } -.dac-media-figure { +.dac-filter.dac-filter-section { + margin-top: -45px; + text-align: right; +} + +@media (max-width: 719px) { + .dac-filter.dac-filter-section { + margin-top: 0; + text-align: left; + } +} + +.dac-filter-title { + color: #666; + cursor: default; + display: inline-block; + font-size: 12px; + font-weight: 500; + line-height: 24px; margin: 0; + text-transform: uppercase; } -.dac-media-body { - -webkit-box-flex: 1; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; +@media (max-width: 719px) { + .dac-filter-title { + margin-bottom: 20px; + } +} + +.dac-filter-message { + color: #78868d; + font-size: 18px; + margin: 0 10px 10px; +} + +.dac-filter-count { + background: #6ab344; + border-radius: 50%; + color: #fff; + display: inline-block; + font-size: 12px; + font-weight: 600; + height: 24px; + text-align: center; + width: 24px; +} + +.dac-filter-count.dac-disabled { + visibility: hidden; +} + +.dac-filter-chip { + background: #bfc7cb; + border-radius: 15px; + color: #333; + cursor: default; + display: inline-block; + line-height: 21px; + margin: 0 10px 10px 0; + padding: 4px 26px 4px 10px; + position: relative; +} + +.dac-filter-chip-close { + background-color: transparent; + border: none; + cursor: pointer; + outline: 0; + padding: 3px; + position: absolute; + right: 5px; + top: 5px; +} + +.dac-filter-chip-close-icon { + opacity: .7; + margin-top: -2px; + -webkit-transform: scale(0.57142857); + -ms-transform: scale(0.57142857); + transform: scale(0.57142857); +} + +.dac-filter-chip-close:hover > .dac-filter-chip-close-icon { + opacity: 1; +} + +.dac-filter-chips { + border-top: 1px solid rgba(0, 0, 0, 0.1); + margin: 0; + list-style-type: none; + padding: 10px 0 0; + position: relative; + text-align: left; +} + +.dac-filter-item { + box-sizing: border-box; + float: left; + margin-bottom: 20px; + padding: 0 10px; + width: 33.33333333%; } -.no-flexbox .dac-media { +@media (min-width: 720px) and (max-width: 979px) { + .dac-filter-item { + width: 50%; + } +} + +@media (max-width: 719px) { + .dac-filter-item { + width: 100%; + } +} + +/* Media component */ +.dac-media { display: table; width: 100%; } -.no-flexbox .dac-media-body, .no-flexbox .dac-media-figure { +.dac-media-body, .dac-media-figure { display: table-cell; + vertical-align: top; } -.no-flexbox .dac-media-figure { +.dac-media-figure { padding: 0; } -.no-flexbox .dac-media-body { +.dac-media-body { width: 100%; } @@ -8141,6 +8722,11 @@ section#features { transition: opacity 1s, transform .5s; } +.dac-swap-section.dac-no-anim { + -webkit-transition: none; + transition: none; +} + .dac-swap-section.dac-up { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); @@ -8176,19 +8762,19 @@ section#features { /* Modal component */ .dac-modal { + opacity: 0; + visibility: hidden; + -webkit-transition: visibility 0s linear 300ms, opacity 300ms linear; + transition: visibility 0s linear 300ms, opacity 300ms linear; background: rgba(0, 0, 0, 0.8); bottom: 0; left: 0; - opacity: 0; overflow-x: hidden; overflow-y: auto; position: fixed; right: 0; top: 0; - -webkit-transition: visibility 0s linear .3s, opacity .3s linear; - transition: visibility 0s linear .3s, opacity .3s linear; - visibility: hidden; - z-index: 52; + z-index: 70; } .dac-modal.dac-active { @@ -8223,57 +8809,73 @@ section#features { .dac-modal-window { background: #fff; - border-radius: 5px; box-sizing: border-box; margin: 20px auto; -webkit-transition: -webkit-transform .3s; transition: transform .3s; - -webkit-transform: translate(0, -30px); - -ms-transform: translate(0, -30px); - transform: translate(0, -30px); + -webkit-transform: translate3d(0, -30px, 0); + transform: translate3d(0, -30px, 0); width: 960px; } .dac-modal.dac-active .dac-modal-window { - -webkit-transform: translate(0, 0); - -ms-transform: translate(0, 0); - transform: translate(0, 0); + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } .dac-modal-header { background: #00695c; - border-top-left-radius: 5px; - border-top-right-radius: 5px; padding: 35px 35px 30px; position: relative; } -.dac-modal-header-close { +.dac-has-small-header .dac-modal-header { + padding: 10px 20px; +} + +.dac-modal-header-actions { + padding: 8px; + position: absolute; + right: 5px; + top: 5px; +} + +.dac-modal-header-open, .dac-modal-header-close { background: none; border: none; cursor: pointer; line-height: 0; outline: 0; opacity: .7; - padding: 8px; - position: absolute; - right: 5px; -webkit-transition: background-color .3s; transition: background-color .3s; - top: 5px; } -.dac-modal-header-close:active { +.dac-modal-header-open:active, .dac-modal-header-close:active { background: rgba(255, 255, 255, 0.2); } +.dac-modal-header-close:before { + content: ''; + top: -1px; + position: relative; +} + +.dac-modal-header-open { + margin: 10px; +} + .dac-modal-header-title { color: #fff; font-size: 24px; font-weight: 300; line-height: 32px; - margin: 0; - padding-right: 150px; + padding: 0 150px 0 0; +} + +.dac-has-small-header .dac-modal-header-title { + font-size: 16px; + font-weight: 500; } .dac-modal-header-subtitle { @@ -8333,6 +8935,10 @@ section#features { text-align: right; } + .dac-modal-header-actions { + top: 1px; + } + .dac-modal-content { padding: 10px; } @@ -8388,6 +8994,367 @@ section#features { } } +.dac-blog-reader { + padding: 50px 90px; +} + +.dac-blog-reader-title { + color: #333; + font-size: 45px; + font-weight: 300; + line-height: 1.2; + padding: 10px 0; +} + +.dac-blog-reader-date { + color: #b8b8b8; + font-size: 12px; + font-weight: 600; + line-height: 1; + text-transform: uppercase; +} + +.dac-blog-reader-text > p:first-child i { + display: inline-block; + margin-bottom: 40px; +} + +.dac-blog-reader-text li { + margin-bottom: 0; +} + +.dac-blog-reader-text iframe { + margin-left: auto !important; + margin-right: auto !important; + max-width: 100%; +} + +@media (max-width: 719px) { + .dac-blog-reader { + padding: 30px 20px; + } +} + +.dac-custom-search { + background: #fff; + margin: 0 -10px; + padding: 20px 10px; + z-index: 1; +} + +.dac-custom-search .dac-fab, .dac-custom-search .dac-button-social { + top: -48px; +} + +.dac-custom-search-section-title { + color: #505050; +} + +.dac-custom-search-entry { + margin-bottom: 36px; + margin-top: 24px; + margin-left:10px; +} + +.dac-custom-search-entry.cols:after { + clear: none; } + +.dac-custom-search-image-wrapper { + float: left; + position: relative; +} + +.dac-custom-search-image { + background-size: cover; + height: 112px; + width:150px; + margin-right:15px; +} + +.dac-custom-search-text-wrapper { + position: relative; +} + +.dac-custom-search-title { + color: #333; + font-size: 14px; + font-weight: 700; + line-height: 24px; + padding: 0; + clear:none; +} + +.dac-custom-search-title a { + color: inherit; +} + +.dac-custom-search-section { + color: #999; + font-size: 16px; + font-variant: small-caps; + font-weight: 700; + margin: -5px 0 0 0; +} + +.dac-custom-search-snippet { + color: #666; + margin: 0; +} + +.dac-custom-search-link { + font-weight: 500; + word-wrap: break-word; + width: 100%; +} + +.dac-custom-search-load-more { + background: none; + border: none; + color: #333; + cursor: pointer; + display: block; + font-size: 14px; + font-weight: 700; + margin: 75px auto; + outline: none; + padding: 10px; +} + +.dac-custom-search-load-more:hover { + opacity: 0.7; +} + +.dac-custom-search-no-results { + color: #999; +} + +.dac-search-hero { + font-size: 16px; + padding: 50px 0 14px 0; +} + +.dac-search-results { + opacity: 0; + visibility: hidden; + -webkit-transition: visibility 0s linear 300ms, opacity 300ms linear; + transition: visibility 0s linear 300ms, opacity 300ms linear; + background-color: #fff; + bottom: 0; + left: 0; + overflow-y: auto; + padding: 0 10px; + position: fixed; + right: 0; + -webkit-transition: opacity 100ms; + transition: opacity 100ms; + top: 64px; + z-index: 50; +} + +.dac-nav-animating .dac-search-results { + -webkit-transition: opacity 100ms, padding .3s; + transition: opacity 100ms, padding .3s; +} + +.dac-search-results * { + box-sizing: border-box; +} + +.dac-search-open .dac-search-results { + opacity: 1; + visibility: visible; +} + +.dac-search-results-content { + background: #eceff1; + margin: 0 -10px; + padding: 0 10px; +} + +.dac-search-results-for { + margin-bottom: -5px; + overflow: hidden; + padding-top: 5px; +} + +.dac-search-results-for span { + color: #039bef; +} + +.dac-search-mode .dac-search-results-for { + display: none; +} + +.dac-search-results-history { + background: #eceff1; + min-height: 100%; + margin: 0 -10px; + padding: 0 10px; +} + +.dac-search-results-hero { + padding-top: 20px; +} + +.dac-search-results-metadata { + padding-bottom: 40px; +} + +#dac-search-results-reference { + float:right; + z-index:999; +} + +@media (max-width: 719px) { + #dac-search-results-reference { + float:none; + } +} + +.dac-search-results-reference { + background: white; + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.21); + margin: 0 0 20px 0; + overflow: hidden; + padding: 6px 0 4px; +} + +.dac-search-results-reference .namespace { + color: #666; +} + +.dac-search-results-reference.is-expanded { + height: auto; +} + +.dac-search-results-reference-header { + color: #999; + font-size: 16px; + font-variant: small-caps; + font-weight: 700; + margin: 0; + padding: 18px 12px 0; + text-transform: lowercase; +} + +.dac-search-results-reference-header:first-child { + padding-top: 0; +} + +.dac-search-results-reference-entry { + margin: 0; +} + +.dac-search-results-reference-entry a { + color: #333; + display: block; + font-size: 0.81em; + line-height: 1.5em; + padding: 0 12px 5px 12px; + width: 100%; + white-space: nowrap; +} + +ul.dac-search-results-reference { +list-style: none; +} + +ul.dac-search-results-reference li[data-toggle="show-more"] { + cursor:pointer; +} + +ul.dac-search-results-reference.is-expanded li[data-toggle="show-more"] { + display:none; +} + +.dac-search-results-reference-entry a:hover { + background-color: #eceff1; +} + +.dac-search-results-reference-entry em { + font-style: normal; + font-weight: 700; +} + +.dac-search-results-reference-entry-empty { + color: #999; + font-size: 0.81em; + margin: 0; + padding: 2px 12px 14px; +} + +.dac-search-results-resources { + margin: 0; +} + +.dac-search-results-resources .resource-card { + border-right: 2px solid #999; +} + +.dac-search-results-resources .resource-card-about { + border-right: 2px solid #6ab344; +} + +.dac-search-results-resources .resource-card-about .section { + color: #6ab344; +} + +.dac-search-results-resources .resource-card-develop { + border-right: 2px solid #ff7043; +} + +.dac-search-results-resources .resource-card-develop .section { + color: #ff7043; +} + +.dac-search-results-resources .resource-card-design { + border-right: 2px solid #00bcd4; +} + +.dac-search-results-resources .resource-card-design .section { + color: #00bcd4; +} + +.dac-search-results-resources .resource-card-distribute { + border-right: 2px solid #afb42b; +} + +.dac-search-results-resources .resource-card-distribute .section { + color: #afb42b; +} + +@media (max-width: 719px) { + .dac-search-results-reference.no-results { + display: none; + } +} + +@media (min-width: 980px) { + .dac-nav-open.dac-search-open .dac-search-results { + padding-left: 260px; + } + + .dac-search-mode.dac-search-open .dac-search-results { + padding-left: 10px; + } +} + +.dac-selected { + color: #039bef !important; +} + +.dac-selected em { + color: #039bef; +} + +.resource-card.dac-selected { + box-shadow: 0px 1px 10px 0px rgba(3, 155, 239, 0.7); +} + +.resource-card.dac-selected em { + color: #333; +} + .dac-expand, .dac-section { margin-left: -20px; margin-right: -20px; @@ -8405,7 +9372,7 @@ section#features { } .dac-invert { - color: #b2b2b2; + color: #b3b3b3; color: rgba(255, 255, 255, 0.7); } @@ -8418,7 +9385,11 @@ section#features { } .dac-gray.dac-hero, .dac-gray.dac-section { - background-color: #b0bec5; + background-color: #d8dfe2; +} + +.dac-gray-dark.dac-hero, .dac-gray-dark.dac-section { + background-color: #b0bec5; } .dac-dark.dac-hero, .dac-dark.dac-section { @@ -8429,6 +9400,33 @@ section#features { 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); @@ -8438,11 +9436,11 @@ section#features { color: white; } -.dac-hero-cta .dac-sprite, .dac-section-title .dac-sprite, .dac-section-links .dac-sprite { +.dac-hero-cta .dac-sprite, .dac-section-title .dac-sprite, .dac-section-links .dac-sprite, .dac-hero-cta .dac-modal-header-close:before, .dac-section-title .dac-modal-header-close:before, .dac-section-links .dac-modal-header-close:before, .dac-hero-cta .paging-links .prev-page-link:before, .paging-links .dac-hero-cta .prev-page-link:before, .dac-section-title .paging-links .prev-page-link:before, .paging-links .dac-section-title .prev-page-link:before, .dac-section-links .paging-links .prev-page-link:before, .paging-links .dac-section-links .prev-page-link:before, .dac-hero-cta .paging-links .next-page-link:before, .paging-links .dac-hero-cta .next-page-link:before, .dac-section-title .paging-links .next-page-link:before, .paging-links .dac-section-title .next-page-link:before, .dac-section-links .paging-links .next-page-link:before, .paging-links .dac-section-links .next-page-link:before, .dac-hero-cta .paging-links .next-class-link:before, .paging-links .dac-hero-cta .next-class-link:before, .dac-section-title .paging-links .next-class-link:before, .paging-links .dac-section-title .next-class-link:before, .dac-section-links .paging-links .next-class-link:before, .paging-links .dac-section-links .next-class-link:before, .dac-hero-cta .paging-links .start-class-link:after, .paging-links .dac-hero-cta .start-class-link:after, .dac-section-title .paging-links .start-class-link:after, .paging-links .dac-section-title .start-class-link:after, .dac-section-links .paging-links .start-class-link:after, .paging-links .dac-section-links .start-class-link:after { opacity: .87; } -.dac-invert .dac-hero-cta .dac-sprite, .dac-invert .dac-section-title .dac-sprite, .dac-invert .dac-section-links .dac-sprite { +.dac-invert .dac-hero-cta .dac-sprite, .dac-invert .dac-section-title .dac-sprite, .dac-invert .dac-section-links .dac-sprite, .dac-invert .dac-hero-cta .dac-modal-header-close:before, .dac-invert .dac-section-title .dac-modal-header-close:before, .dac-invert .dac-section-links .dac-modal-header-close:before, .dac-invert .dac-hero-cta .paging-links .prev-page-link:before, .paging-links .dac-invert .dac-hero-cta .prev-page-link:before, .dac-invert .dac-section-title .paging-links .prev-page-link:before, .paging-links .dac-invert .dac-section-title .prev-page-link:before, .dac-invert .dac-section-links .paging-links .prev-page-link:before, .paging-links .dac-invert .dac-section-links .prev-page-link:before, .dac-invert .dac-hero-cta .paging-links .next-page-link:before, .paging-links .dac-invert .dac-hero-cta .next-page-link:before, .dac-invert .dac-section-title .paging-links .next-page-link:before, .paging-links .dac-invert .dac-section-title .next-page-link:before, .dac-invert .dac-section-links .paging-links .next-page-link:before, .paging-links .dac-invert .dac-section-links .next-page-link:before, .dac-invert .dac-hero-cta .paging-links .next-class-link:before, .paging-links .dac-invert .dac-hero-cta .next-class-link:before, .dac-invert .dac-section-title .paging-links .next-class-link:before, .paging-links .dac-invert .dac-section-title .next-class-link:before, .dac-invert .dac-section-links .paging-links .next-class-link:before, .paging-links .dac-invert .dac-section-links .next-class-link:before, .dac-invert .dac-hero-cta .paging-links .start-class-link:after, .paging-links .dac-invert .dac-hero-cta .start-class-link:after, .dac-invert .dac-section-title .paging-links .start-class-link:after, .paging-links .dac-invert .dac-section-title .start-class-link:after, .dac-invert .dac-section-links .paging-links .start-class-link:after, .paging-links .dac-invert .dac-section-links .start-class-link:after { opacity: 1; } @@ -8452,10 +9450,51 @@ section#features { } .dac-invert .dac-hero-tag, .dac-invert .dac-hero-description, .dac-invert .dac-section-subtitle { - color: #b2b2b2; + color: #b3b3b3; 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; @@ -8471,20 +9510,26 @@ section#features { } } -.dac-section.dac-small { +.dac-section.dac-small, +.dac-hero.dac-small { padding-bottom: 32px; padding-top: 32px; } +.dac-section.dac-slim { + padding-bottom: 0; + padding-top: 0; +} + .dac-section-title { text-align: center; - margin-bottom: 40px; - margin-top: 0; + padding-bottom: 40px; + padding-top: 0; } .dac-section-subtitle { font-size: 16px; - margin-bottom: 40px; + padding-bottom: 40px; margin-top: -24px; text-align: center; } @@ -8505,6 +9550,7 @@ section#features { } .dac-section-link { + cursor: pointer; display: inline-block; margin: 0 32px; -webkit-transition: opacity .3s; @@ -8539,184 +9585,475 @@ $icon-home: x y offset_x offset_y width height total_width total_height image_pa At the bottom of this section, we provide information about the spritesheet itself $spritesheet: width height image $spritesheet-sprites; */ -.dac-sprite, #tb li:before, #qv li:before { - background-image: url(../../assets/images/sprite.png); +.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.png); display: inline-block; - vertical-align: middle; } - @media screen and (min-device-pixel-ratio: 1.5) { - .dac-sprite, #tb li:before, #qv li:before { - background-image: url(../../assets/images/sprite-2x.png); - background-size: 50% 50%; } } + vertical-align: middle; +} -.dac-sprite.dac-auto-chevron { - background-position: 0px -196px; +@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 { - background-position: 0px -222px; - height: 24px; - width: 24px; } -.dac-sprite.dac-auto-chevron-large { - background-position: 0px -404px; + 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 { - background-position: 0px -442px; - height: 36px; - width: 36px; } -.dac-sprite.dac-auto-unfold-less { - background-position: 0px -352px; +} + +.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; height: 24px; width: 24px; vertical-align: -6px; } - .dac-invert .dac-sprite.dac-auto-unfold-less { - background-position: 0px -326px; + .dac-invert .dac-sprite.dac-auto-unfold-less, .dac-invert .dac-auto-unfold-less.dac-modal-header-close:before, .dac-invert .paging-links .dac-auto-unfold-less.prev-page-link:before, .paging-links .dac-invert .dac-auto-unfold-less.prev-page-link:before, .dac-invert .paging-links .dac-auto-unfold-less.next-page-link:before, .paging-links .dac-invert .dac-auto-unfold-less.next-page-link:before, .dac-invert .paging-links .dac-auto-unfold-less.next-class-link:before, .paging-links .dac-invert .dac-auto-unfold-less.next-class-link:before, .dac-invert .paging-links .dac-auto-unfold-less.start-class-link:after, .paging-links .dac-invert .dac-auto-unfold-less.start-class-link:after { + background-position: 0px -565px; height: 24px; width: 24px; } -.dac-sprite.dac-auto-unfold-more { - background-position: 0px -300px; + +.dac-sprite.dac-auto-unfold-more, .dac-auto-unfold-more.dac-modal-header-close:before, .paging-links .dac-auto-unfold-more.prev-page-link:before, .paging-links .dac-auto-unfold-more.next-page-link:before, .paging-links .dac-auto-unfold-more.next-class-link:before, .paging-links .dac-auto-unfold-more.start-class-link:after { + background-position: 0px -539px; height: 24px; width: 24px; vertical-align: -6px; } - .dac-invert .dac-sprite.dac-auto-unfold-more { - background-position: 0px -378px; + .dac-invert .dac-sprite.dac-auto-unfold-more, .dac-invert .dac-auto-unfold-more.dac-modal-header-close:before, .dac-invert .paging-links .dac-auto-unfold-more.prev-page-link:before, .paging-links .dac-invert .dac-auto-unfold-more.prev-page-link:before, .dac-invert .paging-links .dac-auto-unfold-more.next-page-link:before, .paging-links .dac-invert .dac-auto-unfold-more.next-page-link:before, .dac-invert .paging-links .dac-auto-unfold-more.next-class-link:before, .paging-links .dac-invert .dac-auto-unfold-more.next-class-link:before, .dac-invert .paging-links .dac-auto-unfold-more.start-class-link:after, .paging-links .dac-invert .dac-auto-unfold-more.start-class-link:after { + background-position: 0px -305px; height: 24px; width: 24px; } -.dac-sprite.dac-arrow-down-gray { +.dac-sprite.dac-arrow-down-gray, .dac-arrow-down-gray.dac-modal-header-close:before, .paging-links .dac-arrow-down-gray.prev-page-link:before, .paging-links .dac-arrow-down-gray.next-page-link:before, .paging-links .dac-arrow-down-gray.next-class-link:before, .paging-links .dac-arrow-down-gray.start-class-link:after { background-position: 0px 0px; height: 11px; width: 19px; } -.dac-sprite.dac-arrow-right { - background-position: 0px -128px; +.dac-sprite.dac-arrow-right, .dac-arrow-right.dac-modal-header-close:before, .paging-links .dac-arrow-right.prev-page-link:before, .paging-links .dac-arrow-right.next-page-link:before, .paging-links .dac-arrow-right.next-class-link:before, .paging-links .dac-arrow-right.start-class-link:after { + background-position: 0px -215px; height: 18px; width: 11px; } -.dac-sprite.dac-chevron-large-right-black { - background-position: 0px -404px; +.dac-sprite.dac-back-arrow, .dac-back-arrow.dac-modal-header-close:before, .paging-links .dac-back-arrow.prev-page-link:before, .paging-links .dac-back-arrow.next-page-link:before, .paging-links .dac-back-arrow.next-class-link:before, .paging-links .dac-back-arrow.start-class-link:after { + background-position: 0px -123px; + height: 16px; + width: 16px; } + +.dac-sprite.dac-chevron-large-right-black, .dac-chevron-large-right-black.dac-modal-header-close:before, .paging-links .dac-chevron-large-right-black.prev-page-link:before, .paging-links .dac-chevron-large-right-black.next-page-link:before, .paging-links .dac-chevron-large-right-black.next-class-link:before, .paging-links .dac-chevron-large-right-black.start-class-link:after { + background-position: 0px -695px; height: 36px; width: 36px; } -.dac-sprite.dac-chevron-large-right-white { - background-position: 0px -442px; +.dac-sprite.dac-chevron-large-right-white, .dac-chevron-large-right-white.dac-modal-header-close:before, .paging-links .dac-chevron-large-right-white.prev-page-link:before, .paging-links .dac-chevron-large-right-white.next-page-link:before, .paging-links .dac-chevron-large-right-white.next-class-link:before, .paging-links .dac-chevron-large-right-white.start-class-link:after { + background-position: 0px -771px; height: 36px; width: 36px; } -.dac-sprite.dac-chevron-right-black { - background-position: 0px -196px; +.dac-sprite.dac-chevron-right-black, .dac-chevron-right-black.dac-modal-header-close:before, .paging-links .dac-chevron-right-black.prev-page-link:before, .paging-links .dac-chevron-right-black.next-page-link:before, .paging-links .dac-chevron-right-black.next-class-link:before, .paging-links .dac-chevron-right-black.start-class-link:after { + background-position: 0px -669px; + height: 24px; + width: 24px; } + +.dac-sprite.dac-chevron-right-white, .dac-chevron-right-white.dac-modal-header-close:before, .paging-links .dac-chevron-right-white.prev-page-link:before, .paging-links .dac-chevron-right-white.next-page-link:before, .paging-links .dac-chevron-right-white.next-class-link:before, .paging-links .dac-chevron-right-white.start-class-link:after { + background-position: 0px -513px; height: 24px; width: 24px; } -.dac-sprite.dac-chevron-right-white { - background-position: 0px -222px; +.dac-sprite.dac-close-black, .dac-close-black.dac-modal-header-close:before, .paging-links .dac-close-black.prev-page-link:before, .paging-links .dac-close-black.next-page-link:before, .paging-links .dac-close-black.next-class-link:before, .paging-links .dac-close-black.start-class-link:after { + background-position: 0px -89px; + height: 14px; + width: 14px; } + +.dac-sprite.dac-close-video-white, .dac-modal-header-close:before, .paging-links .dac-close-video-white.prev-page-link:before, .paging-links .prev-page-link.dac-modal-header-close:before, .paging-links .dac-close-video-white.next-page-link:before, .paging-links .next-page-link.dac-modal-header-close:before, .paging-links .dac-close-video-white.next-class-link:before, .paging-links .next-class-link.dac-modal-header-close:before, .paging-links .dac-close-video-white.start-class-link:after { + background-position: 0px -435px; height: 24px; width: 24px; } -.dac-sprite.dac-close { +.dac-sprite.dac-close, .dac-close.dac-modal-header-close:before, .paging-links .dac-close.prev-page-link:before, .paging-links .dac-close.next-page-link:before, .paging-links .dac-close.next-class-link:before, .paging-links .dac-close.start-class-link:after { background-position: 0px -27px; height: 12px; width: 12px; } -.dac-sprite.dac-expand-less-black { - background-position: 0px -248px; +.dac-sprite.dac-enlarge-video-white, .dac-enlarge-video-white.dac-modal-header-close:before, .paging-links .dac-enlarge-video-white.prev-page-link:before, .paging-links .dac-enlarge-video-white.next-page-link:before, .paging-links .dac-enlarge-video-white.next-class-link:before, .paging-links .dac-enlarge-video-white.start-class-link:after { + background-position: 0px -409px; height: 24px; width: 24px; } -.dac-sprite.dac-expand-more-black { - background-position: 0px -170px; +.dac-sprite.dac-expand-less-black, .dac-expand-less-black.dac-modal-header-close:before, .paging-links .dac-expand-less-black.prev-page-link:before, .paging-links .dac-expand-less-black.next-page-link:before, .paging-links .dac-expand-less-black.next-class-link:before, .paging-links .dac-expand-less-black.start-class-link:after { + background-position: 0px -383px; height: 24px; width: 24px; } -.dac-sprite.dac-google-play { - background-position: 0px -108px; - height: 18px; - width: 16px; } +.dac-sprite.dac-expand-more-black, .dac-expand-more-black.dac-modal-header-close:before, .paging-links .dac-expand-more-black.prev-page-link:before, .paging-links .dac-expand-more-black.next-page-link:before, .paging-links .dac-expand-more-black.next-class-link:before, .paging-links .dac-expand-more-black.start-class-link:after { + background-position: 0px -357px; + height: 24px; + width: 24px; } -.dac-sprite.dac-gplus { - background-position: 0px -89px; - height: 17px; - width: 16px; } +.dac-sprite.dac-fullscreen-exit, .dac-fullscreen-exit.dac-modal-header-close:before, .paging-links .dac-fullscreen-exit.prev-page-link:before, .paging-links .dac-fullscreen-exit.next-page-link:before, .paging-links .dac-fullscreen-exit.next-class-link:before, .paging-links .dac-fullscreen-exit.start-class-link:after { + background-position: 0px -331px; + height: 24px; + width: 24px; } + +.dac-sprite.dac-fullscreen, .dac-fullscreen.dac-modal-header-close:before, .paging-links .dac-fullscreen.prev-page-link:before, .paging-links .dac-fullscreen.next-page-link:before, .paging-links .dac-fullscreen.next-class-link:before, .paging-links .dac-fullscreen.start-class-link:after { + background-position: 0px -279px; + height: 24px; + width: 24px; } -.dac-sprite.dac-mail { +.dac-sprite.dac-google-play, .dac-google-play.dac-modal-header-close:before, .paging-links .dac-google-play.prev-page-link:before, .paging-links .dac-google-play.next-page-link:before, .paging-links .dac-google-play.next-class-link:before, .paging-links .dac-google-play.start-class-link:after { + background-position: 0px -235px; + height: 20px; + width: 17px; } + +.dac-sprite.dac-gplus, .dac-gplus.dac-modal-header-close:before, .paging-links .dac-gplus.prev-page-link:before, .paging-links .dac-gplus.next-page-link:before, .paging-links .dac-gplus.next-class-link:before, .paging-links .dac-gplus.start-class-link:after { + background-position: 0px -809px; + height: 36px; + width: 36px; } + +.dac-sprite.dac-mail, .dac-mail.dac-modal-header-close:before, .paging-links .dac-mail.prev-page-link:before, .paging-links .dac-mail.next-page-link:before, .paging-links .dac-mail.next-class-link:before, .paging-links .dac-mail.start-class-link:after { background-position: 0px -13px; height: 12px; width: 16px; } -.dac-sprite.dac-play-white { - background-position: 0px -148px; +.dac-sprite.dac-nav-back-blue, .dac-nav-back-blue.dac-modal-header-close:before, .paging-links .prev-page-link:before, .paging-links .dac-nav-back-blue.next-page-link:before, .paging-links .dac-nav-back-blue.next-class-link:before, .paging-links .dac-nav-back-blue.start-class-link:after { + background-position: 0px -105px; + height: 16px; + width: 16px; } + +.dac-sprite.dac-nav-back, .dac-nav-back.dac-modal-header-close:before, .paging-links .dac-nav-back.prev-page-link:before, .paging-links .dac-nav-back.next-page-link:before, .paging-links .dac-nav-back.next-class-link:before, .paging-links .dac-nav-back.start-class-link:after { + background-position: 0px -177px; + 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; + width: 16px; } + +.dac-sprite.dac-nav-forward, .dac-nav-forward.dac-modal-header-close:before, .paging-links .dac-nav-forward.prev-page-link:before, .paging-links .dac-nav-forward.next-page-link:before, .paging-links .dac-nav-forward.next-class-link:before, .paging-links .dac-nav-forward.start-class-link:after { + background-position: 0px -141px; + height: 16px; + width: 16px; } + +.dac-sprite.dac-open-in-new, .dac-open-in-new.dac-modal-header-close:before, .paging-links .dac-open-in-new.prev-page-link:before, .paging-links .dac-open-in-new.next-page-link:before, .paging-links .dac-open-in-new.next-class-link:before, .paging-links .dac-open-in-new.start-class-link:after { + background-position: 0px -195px; + height: 18px; + width: 18px; } + +.dac-sprite.dac-picture-in-picture-white, .dac-picture-in-picture-white.dac-modal-header-close:before, .paging-links .dac-picture-in-picture-white.prev-page-link:before, .paging-links .dac-picture-in-picture-white.next-page-link:before, .paging-links .dac-picture-in-picture-white.next-class-link:before, .paging-links .dac-picture-in-picture-white.start-class-link:after { + background-position: 0px -461px; + height: 24px; + width: 24px; } + +.dac-sprite.dac-play-circle-grey, .dac-play-circle-grey.dac-modal-header-close:before, .paging-links .dac-play-circle-grey.prev-page-link:before, .paging-links .dac-play-circle-grey.next-page-link:before, .paging-links .dac-play-circle-grey.next-class-link:before, .paging-links .dac-play-circle-grey.start-class-link:after { + background-position: 0px -733px; + height: 36px; + width: 36px; } + +.dac-sprite.dac-play-circle-white, .dac-play-circle-white.dac-modal-header-close:before, .paging-links .dac-play-circle-white.prev-page-link:before, .paging-links .dac-play-circle-white.next-page-link:before, .paging-links .dac-play-circle-white.next-class-link:before, .paging-links .dac-play-circle-white.start-class-link:after { + background-position: 0px -847px; + height: 36px; + width: 36px; } + +.dac-sprite.dac-play-white, .dac-play-white.dac-modal-header-close:before, .paging-links .dac-play-white.prev-page-link:before, .paging-links .dac-play-white.next-page-link:before, .paging-links .dac-play-white.next-class-link:before, .paging-links .dac-play-white.start-class-link:after { + background-position: 0px -257px; height: 20px; width: 16px; } -.dac-sprite.dac-rss { +.dac-sprite.dac-rss, .dac-rss.dac-modal-header-close:before, .paging-links .dac-rss.prev-page-link:before, .paging-links .dac-rss.next-page-link:before, .paging-links .dac-rss.next-class-link:before, .paging-links .dac-rss.start-class-link:after { background-position: 0px -41px; height: 14px; width: 14px; } -.dac-sprite.dac-search { - background-position: 0px -274px; +.dac-sprite.dac-search-white, .dac-search-white.dac-modal-header-close:before, .paging-links .dac-search-white.prev-page-link:before, .paging-links .dac-search-white.next-page-link:before, .paging-links .dac-search-white.next-class-link:before, .paging-links .dac-search-white.start-class-link:after { + background-position: 0px -591px; + height: 24px; + width: 24px; } + +.dac-sprite.dac-search, .dac-search.dac-modal-header-close:before, .paging-links .dac-search.prev-page-link:before, .paging-links .dac-search.next-page-link:before, .paging-links .dac-search.next-class-link:before, .paging-links .dac-search.start-class-link:after { + background-position: 0px -617px; height: 24px; width: 24px; } -.dac-sprite.dac-twitter { +.dac-sprite.dac-star-outline, .dac-star-outline.dac-modal-header-close:before, .paging-links .dac-star-outline.prev-page-link:before, .paging-links .dac-star-outline.next-page-link:before, .paging-links .dac-star-outline.next-class-link:before, .paging-links .dac-star-outline.start-class-link:after { + background-position: 0px -643px; + height: 24px; + width: 24px; } + +.dac-sprite.dac-twitter, .dac-twitter.dac-modal-header-close:before, .paging-links .dac-twitter.prev-page-link:before, .paging-links .dac-twitter.next-page-link:before, .paging-links .dac-twitter.next-class-link:before, .paging-links .dac-twitter.start-class-link:after { background-position: 0px -73px; height: 14px; width: 16px; } -.dac-sprite.dac-unfold-less-white { - background-position: 0px -326px; +.dac-sprite.dac-unfold-less-white, .dac-unfold-less-white.dac-modal-header-close:before, .paging-links .dac-unfold-less-white.prev-page-link:before, .paging-links .dac-unfold-less-white.next-page-link:before, .paging-links .dac-unfold-less-white.next-class-link:before, .paging-links .dac-unfold-less-white.start-class-link:after { + background-position: 0px -565px; height: 24px; width: 24px; } -.dac-sprite.dac-unfold-less { - background-position: 0px -352px; +.dac-sprite.dac-unfold-less, .dac-unfold-less.dac-modal-header-close:before, .paging-links .dac-unfold-less.prev-page-link:before, .paging-links .dac-unfold-less.next-page-link:before, .paging-links .dac-unfold-less.next-class-link:before, .paging-links .dac-unfold-less.start-class-link:after { + background-position: 0px -487px; height: 24px; width: 24px; } -.dac-sprite.dac-unfold-more-white { - background-position: 0px -378px; +.dac-sprite.dac-unfold-more-white, .dac-unfold-more-white.dac-modal-header-close:before, .paging-links .dac-unfold-more-white.prev-page-link:before, .paging-links .dac-unfold-more-white.next-page-link:before, .paging-links .dac-unfold-more-white.next-class-link:before, .paging-links .dac-unfold-more-white.start-class-link:after { + background-position: 0px -305px; height: 24px; width: 24px; } -.dac-sprite.dac-unfold-more { - background-position: 0px -300px; +.dac-sprite.dac-unfold-more, .dac-unfold-more.dac-modal-header-close:before, .paging-links .dac-unfold-more.prev-page-link:before, .paging-links .dac-unfold-more.next-page-link:before, .paging-links .dac-unfold-more.next-class-link:before, .paging-links .dac-unfold-more.start-class-link:after { + background-position: 0px -539px; height: 24px; width: 24px; } -.dac-sprite.dac-youtube { +.dac-sprite.dac-youtube, .dac-youtube.dac-modal-header-close:before, .paging-links .dac-youtube.prev-page-link:before, .paging-links .dac-youtube.next-page-link:before, .paging-links .dac-youtube.next-class-link:before, .paging-links .dac-youtube.start-class-link:after { background-position: 0px -57px; height: 14px; width: 18px; } +/* Toast Component */ +.dac-toast { + background: #ffebc3; + border-top: 1px solid #e5d4a1; + display: none; + 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; +} + +.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 { + position: relative; + top: 0; + margin: 10px 0 0; + display: block; + } +} + +.dac-tab-item { + box-sizing: border-box; + cursor: pointer; + display: table-cell; + margin: 0; + padding: 8px 12px; + position: relative; + text-align: left; } + @media (max-width: 719px) { + .dac-tab-item { + padding-right: 12px; + text-align: center; + width: 33.33333333%; } } + +.dac-tab-title { + color: #333; + display: inline-block; + font-size: 16px; + font-weight: 500; + margin: 0; } + +.dac-tab-arrow { + margin-top: -2px; } + @media (max-width: 719px) { + .dac-tab-arrow { + position: absolute; + visibility: hidden; } } + +.dac-tab-bar { + display: inline-block; + list-style-type: none; + margin: 0 0 0 12px; + vertical-align: middle; + overflow: hidden; } + @media (max-width: 719px) { + .dac-tab-bar { + display: table; + margin-left: 0; + width: 100%; } } + +.dac-tab-views { + list-style-type: none; + margin: 0; } + +.dac-tab-view { + background: #fff; + display: none; + overflow: hidden; + margin: 0 0 10px; + padding: 20px 10px 0; + text-align: left; } + +.dac-tab-item.dac-active { + background: #fff; } + +.dac-tab-item.dac-active .dac-tab-arrow { + -webkit-transform: scaleY(-1); + -ms-transform: scaleY(-1); + transform: scaleY(-1); } + +.dac-tab-view.dac-active { + display: block; } + .dac-toggle-expand { cursor: pointer; display: inline-block; } + .dac-toggle-collapse { cursor: pointer; display: none; } + .dac-toggle.is-expanded .dac-toggle-expand { display: none; } + .dac-toggle.is-expanded .dac-toggle-collapse { display: inline-block; } + .dac-toggle-content { clear: left; overflow: hidden; max-height: 0; -webkit-transition: .3s max-height; transition: .3s max-height; } + .dac-toggle.is-expanded .dac-toggle-content { max-height: none; } + .dac-toggle.dac-mobile .dac-toggle-content { max-height: none; } + @media (max-width: 719px) { .dac-toggle.dac-mobile .dac-toggle-content { max-height: 0; } .dac-toggle.is-expanded .dac-toggle-content { max-height: none; } } -.dac-visible-mobile-block, .dac-mobile-only, .dac-visible-mobile-inline, .dac-visible-mobile-inline-block, .dac-visible-tablet-block, .dac-visible-tablet-inline, .dac-visible-tablet-inline-block, .dac-visible-desktop-block, .dac-visible-desktop-inline, .dac-visible-desktop-inline-block { +/** + * Fades out an element. + * Applies visibility hidden when the transition is finished. + * + * Use opacity: 1; to show the element. + */ +.dac-visible-mobile-block, .dac-mobile-only, +.dac-visible-mobile-inline, +.dac-visible-mobile-inline-block, +.dac-visible-tablet-block, +.dac-visible-tablet-inline, +.dac-visible-tablet-inline-block, +.dac-visible-desktop-block, +.dac-visible-desktop-inline, +.dac-visible-desktop-inline-block { display: none !important; } @media (max-width: 719px) { @@ -8753,6 +10090,12 @@ $spritesheet: width height image $spritesheet-sprites; position: relative !important; } /** + * Hide from browsers/screenreaders on all sizes. + */ +.dac-hidden { + display: none !important; } + +/** * Break strings when their length exceeds the width of their container. */ .dac-text-break { @@ -8820,164 +10163,290 @@ $spritesheet: width height image $spritesheet-sprites; width: 10000px !important; } -#tb li:before, #qv li:before { - background-position: 0px -196px; - height: 24px; - width: 24px; - content: ''; - left: -8px; - opacity: .7; - position: absolute; - top: -4px; +.Video { + display: none; } -/* CHANGE EXISTING SELECTOR FOR ANDROID M HERO ONLY - REMOVE THE BELOW STYLES WHEN THE ANDROID M CAROUSEL - GRAPHIC ON THE MAIN LANDING IS TAKEN DOWN */ -.dac-hero.mprev { - background-color: #fff; - background-position: 50% 53%; - background-size: cover; - background-image: url(../../assets/images/home/android_m_hero_1200.jpg); - box-sizing: border-box; - font-size: 16px; - min-height: 550px; - padding-top: 88px; +.Video-overlay { + background-color: rgba(0, 0, 0, 0.8); + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + z-index: 9999; } -.dac-hero.dac-darken.mprev::before { - background: rgba(0, 0, 0, 0.3); + +.Video-container { + width: 90vw; + height: 50.625vw; + max-height: calc(90vh - 29.25px); + max-width: calc(160vh - 52px); + margin: auto; + position: fixed; + top: -52px; + right: 0; bottom: 0; - content: ''; - display: block; left: 0; + z-index: 9999; +} + +@media (min-width: 1422.22222222px) and (min-height: 800px) { + .Video-container { + width: 1280px; + height: 720px; + } +} + +.Video-controls { + background: #28655F; + height: 52px; + margin: 0 auto; + position: relative; + box-shadow: 2px 3px 12px 0px rgba(0, 0, 0, 0.4); +} + +.Video-frame { + position: relative; + height: 100%; + background: black; + box-shadow: 2px 3px 12px 0px rgba(0, 0, 0, 0.4); +} + +.Video-loading { + color: rgba(255, 255, 255, 0.35); + font-size: 16px; + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} + +#youTubePlayer { + max-height: 720px; position: absolute; - right: 0; top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; } -.dac-hero.dac-darken.mprev::before { - background: -webkit-linear-gradient(top, rgba(0, 0, 0, .05), rgba(0, 0, 0, .05), #000 950px); - background: linear-gradient(to bottom, rgba(0, 0, 0, .05), rgba(0, 0, 0, 0.05), #000 950px); +.Video-button { + background-color: transparent; + border: none; + display: inline-block; + height: 100%; + width: 52px; + outline: none; + cursor: pointer; + -webkit-transition: opacity 200ms; + transition: opacity 200ms; } -@media (max-width: 719px) { +.Video-button:hover { + opacity: 0.8; +} - .dac-hero.dac-darken.mprev { - background-size: auto 600px; - background-position: 55% 0; - background-repeat: no-repeat; +.Video-button--picture-in-picture { + background-position: 0px -461px; + height: 24px; + width: 24px; + display: none; + position: absolute; + right: 64px; + top: 14px; +} + +.Video-button--close { + background-position: 0px -435px; + height: 24px; + width: 24px; + position: absolute; + right: 14px; + top: 14px; +} + +@media (min-width: 720px) { + .Video--picture-in-picture .Video-overlay { + display: none; } - .dac-hero-figure.mprev { - height: 10px; - margin: 15px 0; + .Video--picture-in-picture .Video-container { + top: auto; + left: auto; + bottom: 20px; + right: 20px; + width: 40%; + max-width: 420px; + height: auto; } -} -@media (max-width: 719px) { + .Video--picture-in-picture .Video-button--picture-in-picture { + background-position: 0px -409px; + height: 24px; + width: 24px; + } - .dac-hero.dac-darken.mprev { - background-size: auto 600px; - background-position: 55% 0; - background-repeat: no-repeat; + .Video--picture-in-picture .Video-frame { + padding-bottom: 56.25%; } - .dac-hero-figure.mprev { - height: 10px; - margin: 15px 0; + .Video-button--picture-in-picture { + display: inline-block; } } -@media (max-width: 1200px) { +a.video-shadowbox-button.white { + padding: 16px 42px 16px 8px; + font-size: 18px; + font-weight: 500; + line-height: 24px; + color: #fff; + text-decoration: none; +} - .dac-hero.dac-darken.mprev { - background-size: auto 700px; - background-position: 55% 0; - background-repeat: no-repeat; +a.video-shadowbox-button.white::after { + content: ''; + background-position: 0px -847px; + height: 36px; + width: 36px; +} + +a.video-shadowbox-button.white:hover { + color: #bababa !important; +} + +a.video-shadowbox-button.white:hover::after { + background-position: 0px -733px; + height: 36px; + width: 36px; +} + +#video-frame, #video-container { + display: none; +} + +@media (max-width: 720px) { + .wide-table { + overflow-x: auto; } - .dac-hero-cta.mprev { - white-space:nowrap; + .wide-table table { + display: inline-table; + margin-right: 0; } } -/** Custom search API styles */ -.dac-custom-search { - background: #fff; - margin: 0 -10px; - padding: 20px 10px; - z-index: 1; +/* New CSS that isn't part of a component */ +.paging-links { + box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2); + margin: 30px 0; + padding: 0 40px; + /* Start class link doesn't have a caption */ } + +.paging-links .start-class-link, .paging-links .next-class-link, .paging-links .prev-page-link, .paging-links .next-page-link { + font-size: 20px; + font-weight: 500; + display: inline-block; + width: calc(50% - 2px); + position: relative; + padding: 46px 0 36px 0; } -.dac-custom-search-section-title { - color: #505050; +@media (max-width: 719px) { + .paging-links .start-class-link, .paging-links .next-class-link, .paging-links .prev-page-link, .paging-links .next-page-link { + width: 100%; + } } -.dac-custom-search-entry { - margin-bottom: 36px; - margin-top: 24px; +.paging-links .start-class-link { + padding: 36px 0; } -.dac-custom-search-image { - background-size: cover; - height: 112px; +.paging-links .start-class-link, .paging-links .next-class-link { + text-align: center; + width: 100%; +} + +.paging-links .prev-page-link .page-link-caption { + left: 0; +} + +.paging-links .prev-page-link:before { + content: ''; + left: -24px; + position: absolute; + bottom: 41px; } @media (max-width: 719px) { - .dac-custom-search-image { + .paging-links .prev-page-link { display: none; } } -.dac-custom-search-title { - color: #333; - font-size: 14px; - font-weight: 700; - line-height: 24px; - margin: 0; - padding: 0; -} - -.dac-custom-search-title a { - color: inherit; +.paging-links .next-page-link, .paging-links .next-class-link { + text-align: right; } -.dac-custom-search-section { - color: #999; - font-size: 16px; - font-variant: small-caps; - font-weight: 700; - margin: -5px 0 0 0; +.paging-links .next-page-link .page-link-caption, .paging-links .next-class-link .page-link-caption { + right: 0; } -.dac-custom-search-snippet { - color: #666; - margin: 0; +.paging-links .next-page-link:before, .paging-links .next-class-link:before { + content: ''; + right: -24px; + position: absolute; + bottom: 41px; } -.dac-custom-search-link { - font-weight: 500; - word-wrap: break-word; - width: 100%; +.paging-links .start-class-link:after { + content: ''; + right: -12px; + position: relative; + bottom: 3px; } -.dac-custom-search-load-more { - background: none; - border: none; - color: #333; - cursor: pointer; - display: block; +.paging-links .page-link-caption { + position: absolute; + top: 26px; font-size: 14px; font-weight: 700; - margin: 75px auto; - outline: none; - padding: 10px; + opacity: 0.54; } -.dac-custom-search-load-more:hover { - opacity: 0.7; +#tb li:before, +#qv li:before { + background-position: 0px -669px; + height: 24px; + width: 24px; + content: ''; + left: -8px; + opacity: .7; + position: absolute; + top: -4px; } -.dac-custom-search-no-results { - color: #999; +#skip-to-main { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +#skip-to-main:focus { + background: #fff; + clip: auto; + height: auto; + padding: 10px; + width: auto; + z-index: 10000; } diff --git a/tools/droiddoc/templates-sdk/assets/images/android_logo.png b/tools/droiddoc/templates-sdk/assets/images/android_logo.png Binary files differindex 5f19215cf2..53f59c69ec 100644 --- a/tools/droiddoc/templates-sdk/assets/images/android_logo.png +++ b/tools/droiddoc/templates-sdk/assets/images/android_logo.png diff --git a/tools/droiddoc/templates-sdk/assets/images/android_logo@2x.png b/tools/droiddoc/templates-sdk/assets/images/android_logo@2x.png Binary files differindex 04132cc03e..85b92110a9 100644 --- a/tools/droiddoc/templates-sdk/assets/images/android_logo@2x.png +++ b/tools/droiddoc/templates-sdk/assets/images/android_logo@2x.png diff --git a/tools/droiddoc/templates-sdk/assets/images/play-circle-grey.png b/tools/droiddoc/templates-sdk/assets/images/play-circle-grey.png Binary files differdeleted file mode 100644 index 5e7e7ba694..0000000000 --- a/tools/droiddoc/templates-sdk/assets/images/play-circle-grey.png +++ /dev/null diff --git a/tools/droiddoc/templates-sdk/assets/images/play-circle-grey_2x.png b/tools/droiddoc/templates-sdk/assets/images/play-circle-grey_2x.png Binary files differdeleted file mode 100644 index 3e01635e88..0000000000 --- a/tools/droiddoc/templates-sdk/assets/images/play-circle-grey_2x.png +++ /dev/null diff --git a/tools/droiddoc/templates-sdk/assets/images/play-circle-white.png b/tools/droiddoc/templates-sdk/assets/images/play-circle-white.png Binary files differdeleted file mode 100644 index 017d84644b..0000000000 --- a/tools/droiddoc/templates-sdk/assets/images/play-circle-white.png +++ /dev/null diff --git a/tools/droiddoc/templates-sdk/assets/images/play-circle-white_2x.png b/tools/droiddoc/templates-sdk/assets/images/play-circle-white_2x.png Binary files differdeleted file mode 100644 index e48c1fd241..0000000000 --- a/tools/droiddoc/templates-sdk/assets/images/play-circle-white_2x.png +++ /dev/null diff --git a/tools/droiddoc/templates-sdk/assets/images/sprite.png b/tools/droiddoc/templates-sdk/assets/images/sprite.png Binary files differindex 7fef43e754..562b23cd9a 100644 --- a/tools/droiddoc/templates-sdk/assets/images/sprite.png +++ b/tools/droiddoc/templates-sdk/assets/images/sprite.png diff --git a/tools/droiddoc/templates-sdk/assets/images/sprite@2x.png b/tools/droiddoc/templates-sdk/assets/images/sprite@2x.png Binary files differnew file mode 100644 index 0000000000..2019e0282d --- /dev/null +++ b/tools/droiddoc/templates-sdk/assets/images/sprite@2x.png diff --git a/tools/droiddoc/templates-sdk/assets/js/android_3p-bundle.js b/tools/droiddoc/templates-sdk/assets/js/android_3p-bundle.js index a67b5b0d8c..70d6c2f0a1 100644 --- a/tools/droiddoc/templates-sdk/assets/js/android_3p-bundle.js +++ b/tools/droiddoc/templates-sdk/assets/js/android_3p-bundle.js @@ -2763,4 +2763,10 @@ jQuery.effects||function(a,b){function c(b){var c;return b&&b.constructor==Array * https://github.com/jquery/jquery-ui * Includes: jquery.effects.transfer.js * Copyright (c) 2012 AUTHORS.txt; Licensed MIT, GPL */ -(function(a,b){a.effects.transfer=function(b){return this.queue(function(){var c=a(this),d=a(b.options.to),e=d.offset(),f={top:e.top,left:e.left,height:d.innerHeight(),width:d.innerWidth()},g=c.offset(),h=a('<div class="ui-effects-transfer"></div>').appendTo(document.body).addClass(b.options.className).css({top:g.top,left:g.left,height:c.innerHeight(),width:c.innerWidth(),position:"absolute"}).animate(f,b.duration,b.options.easing,function(){h.remove(),b.callback&&b.callback.apply(c[0],arguments),c.dequeue()})})}})(jQuery);;
\ No newline at end of file +(function(a,b){a.effects.transfer=function(b){return this.queue(function(){var c=a(this),d=a(b.options.to),e=d.offset(),f={top:e.top,left:e.left,height:d.innerHeight(),width:d.innerWidth()},g=c.offset(),h=a('<div class="ui-effects-transfer"></div>').appendTo(document.body).addClass(b.options.className).css({top:g.top,left:g.left,height:c.innerHeight(),width:c.innerWidth(),position:"absolute"}).animate(f,b.duration,b.options.easing,function(){h.remove(),b.callback&&b.callback.apply(c[0],arguments),c.dequeue()})})}})(jQuery);; +/*! (c) 2012 Airbnb, Inc. +* +* polyglot.js 0.4.3 may be freely distributed under the terms of the BSD +* license. For all licensing information, details, and documention: +* http://airbnb.github.com/polyglot.js */ +(function(e,t){typeof define=="function"&&define.amd?define([],function(){return t(e)}):typeof exports=="object"?module.exports=t(e):e.Polyglot=t(e)})(this,function(e){"use strict";function t(e){e=e||{},this.phrases={},this.extend(e.phrases||{}),this.currentLocale=e.locale||"en",this.allowMissing=!!e.allowMissing,this.warn=e.warn||c}function s(e){var t,n,r,i={};for(t in e)if(e.hasOwnProperty(t)){n=e[t];for(r in n)i[n[r]]=t}return i}function o(e){var t=/^\s+|\s+$/g;return e.replace(t,"")}function u(e,t,r){var i,s,u;return r!=null&&e?(s=e.split(n),u=s[f(t,r)]||s[0],i=o(u)):i=e,i}function a(e){var t=s(i);return t[e]||t.en}function f(e,t){return r[a(e)](t)}function l(e,t){for(var n in t)n!=="_"&&t.hasOwnProperty(n)&&(e=e.replace(new RegExp("%\\{"+n+"\\}","g"),t[n]));return e}function c(t){e.console&&e.console.warn&&e.console.warn("WARNING: "+t)}function h(e){var t={};for(var n in e)t[n]=e[n];return t}t.VERSION="0.4.3",t.prototype.locale=function(e){return e&&(this.currentLocale=e),this.currentLocale},t.prototype.extend=function(e,t){var n;for(var r in e)e.hasOwnProperty(r)&&(n=e[r],t&&(r=t+"."+r),typeof n=="object"?this.extend(n,r):this.phrases[r]=n)},t.prototype.clear=function(){this.phrases={}},t.prototype.replace=function(e){this.clear(),this.extend(e)},t.prototype.t=function(e,t){var n,r;return t=t==null?{}:t,typeof t=="number"&&(t={smart_count:t}),typeof this.phrases[e]=="string"?n=this.phrases[e]:typeof t._=="string"?n=t._:this.allowMissing?n=e:(this.warn('Missing translation for key: "'+e+'"'),r=e),typeof n=="string"&&(t=h(t),r=u(n,this.currentLocale,t.smart_count),r=l(r,t)),r},t.prototype.has=function(e){return e in this.phrases};var n="||||",r={chinese:function(e){return 0},german:function(e){return e!==1?1:0},french:function(e){return e>1?1:0},russian:function(e){return e%10===1&&e%100!==11?0:e%10>=2&&e%10<=4&&(e%100<10||e%100>=20)?1:2},czech:function(e){return e===1?0:e>=2&&e<=4?1:2},polish:function(e){return e===1?0:e%10>=2&&e%10<=4&&(e%100<10||e%100>=20)?1:2},icelandic:function(e){return e%10!==1||e%100===11?1:0}},i={chinese:["fa","id","ja","ko","lo","ms","th","tr","zh"],german:["da","de","en","es","fi","el","he","hu","it","nl","no","pt","sv"],french:["fr","tl","pt-br"],russian:["hr","ru"],czech:["cs"],polish:["pl"],icelandic:["is"]};return t}); diff --git a/tools/droiddoc/templates-sdk/assets/js/docs.js b/tools/droiddoc/templates-sdk/assets/js/docs.js index ee3ebee21e..5ed947c7cd 100644 --- a/tools/droiddoc/templates-sdk/assets/js/docs.js +++ b/tools/droiddoc/templates-sdk/assets/js/docs.js @@ -1,16 +1,17 @@ -var classesNav; -var devdocNav; -var sidenav; var cookie_namespace = 'android_developer'; -var NAV_PREF_TREE = "tree"; -var NAV_PREF_PANELS = "panels"; -var nav_pref; var isMobile = false; // true if mobile, so we can adjust some layout var mPagePath; // initialized in ready() function var basePath = getBaseUri(location.pathname); -var SITE_ROOT = toRoot + basePath.substring(1,basePath.indexOf("/",1)); -var GOOGLE_DATA; // combined data for google service apis, used for search suggest +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({ @@ -21,102 +22,11 @@ $.ajaxSetup({ $(document).ready(function() { - // show lang dialog if the URL includes /intl/ - //if (location.pathname.substring(0,6) == "/intl/") { - // var lang = location.pathname.split('/')[2]; - // if (lang != getLangPref()) { - // $("#langMessage a.yes").attr("onclick","changeLangPref('" + lang - // + "', true); $('#langMessage').hide(); return false;"); - // $("#langMessage .lang." + lang).show(); - // $("#langMessage").show(); - // } - //} - - // load json file for JD doc search suggestions - $.getScript(toRoot + 'jd_lists_unified.js'); - // load json file for Android API search suggestions - $.getScript(toRoot + 'reference/lists.js'); - // load json files for Google services API suggestions - $.getScript(toRoot + 'reference/gcm_lists.js', function(data, textStatus, jqxhr) { - // once the GCM json (GCM_DATA) is loaded, load the GMS json (GMS_DATA) and merge the data - if(jqxhr.status === 200) { - $.getScript(toRoot + 'reference/gms_lists.js', function(data, textStatus, jqxhr) { - if(jqxhr.status === 200) { - // combine GCM and GMS data - GOOGLE_DATA = GMS_DATA; - var start = GOOGLE_DATA.length; - for (var i=0; i<GCM_DATA.length; i++) { - GOOGLE_DATA.push({id:start+i, label:GCM_DATA[i].label, - link:GCM_DATA[i].link, type:GCM_DATA[i].type}); - } - } - }); - } - }); - - // setup keyboard listener for search shortcut - $('body').keyup(function(event) { - if (event.which == 191 && $(event.target).is(':not(:input)')) { - $('#search_autocomplete').focus(); - } - }); - - // init the fullscreen toggle click event - $('#nav-swap .fullscreen').click(function(){ - if ($(this).hasClass('disabled')) { - toggleFullscreen(true); - } else { - toggleFullscreen(false); - } - }); - - // initialize the divs with custom scrollbars - if (window.innerWidth >= 720) { - $('.scroll-pane').jScrollPane({verticalGutter: 0}); - } - - // set up the search close button - $('#search-close').on('click touchend', function() { - $searchInput = $('#search_autocomplete'); - $searchInput.attr('value', ''); - $(this).addClass("hide"); - $("#search-container").removeClass('active'); - $("#search_autocomplete").blur(); - search_focus_changed($searchInput.get(), false); - hideResults(); - }); - - - //Set up search - $("#search_autocomplete").focus(function() { - $("#search-container").addClass('active'); - }) - $("#search-container").on('mouseover touchend', function(e) { - if ($(e.target).is('#search-close')) { return; } - $("#search-container").addClass('active'); - $("#search_autocomplete").focus(); - }) - $("#search-container").mouseout(function() { - if ($("#search_autocomplete").is(":focus")) return; - if ($("#search_autocomplete").val() == '') { - setTimeout(function(){ - $("#search-container").removeClass('active'); - $("#search_autocomplete").blur(); - },250); - } - }) - $("#search_autocomplete").blur(function() { - if ($("#search_autocomplete").val() == '') { - $("#search-container").removeClass('active'); - } - }) - - // prep nav expandos - var pagePath = 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 / + pagePath = pagePath.substr(pagePath.indexOf("/", 6)); // start after intl/ to get last / } if (pagePath.indexOf(SITE_ROOT) == 0) { @@ -147,97 +57,13 @@ $(document).ready(function() { // Otherwise the page path is already an absolute URL } - // Highlight the header tabs... - // highlight Design tab - var urlSegments = pagePathOriginal.split('/'); - var navEl = $(".dac-nav-list"); - var subNavEl = navEl.find(".dac-nav-secondary"); - var parentNavEl; - - if ($("body").hasClass("design")) { - navEl.find("> li.design > a").addClass("selected"); - // highlight About tabs - } else if ($("body").hasClass("about")) { - if (urlSegments[1] == "about" || urlSegments[1] == "wear" || urlSegments[1] == "tv" || urlSegments[1] == "auto") { - navEl.find("> li.home > a").addClass('has-subnav'); - subNavEl.find("li." + urlSegments[1] + " > a").addClass("selected"); - } else { - navEl.find("> li.home > a").addClass('selected'); - } - -// highlight NDK tabs - } else if ($("body").hasClass("ndk")) { - parentNavEl = navEl.find("> li.ndk > a"); - parentNavEl.addClass('has-subnav'); - if ($("body").hasClass("guide")) { - navEl.find("> li.guides > a").addClass("selected ndk"); - } else if ($("body").hasClass("reference")) { - navEl.find("> li.reference > a").addClass("selected ndk"); - } else if ($("body").hasClass("samples")) { - navEl.find("> li.samples > a").addClass("selected ndk"); - } else if ($("body").hasClass("downloads")) { - navEl.find("> li.downloads > a").addClass("selected ndk"); - } - - // highlight Develop tab - } else if ($("body").hasClass("develop") || $("body").hasClass("google")) { - parentNavEl = navEl.find("> li.develop > a"); - parentNavEl.addClass('has-subnav'); - - // In Develop docs, also highlight appropriate sub-tab - if (urlSegments[1] == "training") { - subNavEl.find("li.training > a").addClass("selected"); - } else if (urlSegments[1] == "guide") { - subNavEl.find("li.guide > a").addClass("selected"); - } else if (urlSegments[1] == "reference") { - // If the root is reference, but page is also part of Google Services, select Google - if ($("body").hasClass("google")) { - subNavEl.find("li.google > a").addClass("selected"); - } else { - subNavEl.find("li.reference > a").addClass("selected"); - } - } else if ((urlSegments[1] == "tools") || (urlSegments[1] == "sdk")) { - subNavEl.find("li.tools > a").addClass("selected"); - } else if ($("body").hasClass("google")) { - subNavEl.find("li.google > a").addClass("selected"); - } else if ($("body").hasClass("samples")) { - subNavEl.find("li.samples > a").addClass("selected"); - } else if ($("body").hasClass("preview")) { - subNavEl.find("li.preview > a").addClass("selected"); - } else { - parentNavEl.removeClass('has-subnav').addClass("selected"); - } - // highlight Distribute tab - } else if ($("body").hasClass("distribute")) { - parentNavEl = navEl.find("> li.distribute > a"); - parentNavEl.addClass('has-subnav'); - - if (urlSegments[2] == "users") { - subNavEl.find("li.users > a").addClass("selected"); - } else if (urlSegments[2] == "engage") { - subNavEl.find("li.engage > a").addClass("selected"); - } else if (urlSegments[2] == "monetize") { - subNavEl.find("li.monetize > a").addClass("selected"); - } else if (urlSegments[2] == "analyze") { - subNavEl.find("li.analyze > a").addClass("selected"); - } else if (urlSegments[2] == "tools") { - subNavEl.find("li.essentials > a").addClass("selected"); - } else if (urlSegments[2] == "stories") { - subNavEl.find("li.stories > a").addClass("selected"); - } else if (urlSegments[2] == "essentials") { - subNavEl.find("li.essentials > a").addClass("selected"); - } else if (urlSegments[2] == "googleplay") { - subNavEl.find("li.googleplay > a").addClass("selected"); - } else { - parentNavEl.removeClass('has-subnav').addClass("selected"); - } - } - // set global variable so we can highlight the sidenav a bit later (such as for google reference) // and highlight the sidenav mPagePath = pagePath; + + // Check for params and remove them. + mPagePath = mPagePath.split('?')[0]; highlightSidenav(); - buildBreadcrumbs(); // set up prev/next links if they exist var $selNavLink = $('#nav').find('a[href="' + pagePath + '"]'); @@ -266,8 +92,8 @@ false; // navigate across topic boundaries only in design docs // except if cross boundaries aren't allowed, and we're at the top of a section already // (and there's another parent) - if (!crossBoundaries && $parentListItem.hasClass('nav-section') - && $selListItem.hasClass('nav-section')) { + if (!crossBoundaries && $parentListItem.hasClass('nav-section') && + $selListItem.hasClass('nav-section')) { $prevLink = []; } } @@ -282,7 +108,7 @@ false; // navigate across topic boundaries only in design docs $nextLink = $selListItem.find('ul:eq(0)').find('a:eq(0)'); // if there aren't any children, go to the next section (required for About pages) - if($nextLink.length == 0) { + if ($nextLink.length == 0) { $nextLink = $selListItem.next('li').find('a'); } else if ($('.topic-start-link').length) { // as long as there's a child link and there is a "topic start link" (we're on a landing) @@ -306,7 +132,7 @@ false; // navigate across topic boundaries only in design docs $nextLink = $selListItem.parents('li:eq(1)').next('li.nav-section').find('a:eq(0)'); if ($nextLink.length == 0) { // if that doesn't work, we're at the end of the list, so disable NEXT link - $('.next-page-link').attr('href','').addClass("disabled") + $('.next-page-link').attr('href', '').addClass("disabled") .click(function() { return false; }); // and completely hide the one in the footer $('.content-footer .next-page-link').hide(); @@ -325,22 +151,31 @@ false; // navigate across topic boundaries only in design docs } } else if (isCrossingBoundary && !$('body.design').length) { // Design always crosses boundaries $('.content-footer.next-class').show(); - $('.next-page-link').attr('href','') + $('.next-page-link').attr('href', '') .removeClass("hide").addClass("disabled") .click(function() { return false; }); // and completely hide the one in the footer $('.content-footer .next-page-link').hide(); + $('.content-footer .prev-page-link').hide(); + if ($nextLink.length) { - $('.next-class-link').attr('href',$nextLink.attr('href')) - .removeClass("hide") - .append(": " + $nextLink.html()); + $('.next-class-link').attr('href', $nextLink.attr('href')) + .removeClass("hide"); + + $('.content-footer .next-class-link').append($nextLink.html()); + $('.next-class-link').find('.new').empty(); } } else { $('.next-page-link').attr('href', $nextLink.attr('href')) .removeClass("hide"); - // for the footer link, also add the next page title - $('.content-footer .next-page-link').append(": " + $nextLink.html()); + // for the footer link, also add the previous and next page titles + 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) { @@ -351,11 +186,8 @@ 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 if ($('body.trainingcourse').length) { var $classLinks = $selListItem.find('ul li a').not('#nav .nav-section .nav-section ul a'); @@ -382,7 +214,7 @@ false; // navigate across topic boundaries only in design docs var $liLesson; $classLinks.each(function(index) { $liClass = $('<li class="clearfix"></li>'); - $h2Title = $('<a class="title" href="'+$(this).attr('href')+'"><h2 class="norule">' + $(this).html()+'</h2><span></span></a>'); + $h2Title = $('<a class="title" href="' + $(this).attr('href') + '"><h2 class="norule">' + $(this).html() + '</h2><span></span></a>'); $pSummary = $('<p class="description">' + $classDescriptions[index] + '</p>'); $olLessons = $('<ol class="lesson-list"></ol>'); @@ -391,7 +223,7 @@ false; // navigate across topic boundaries only in design docs if ($lessons.length) { $lessons.each(function(index) { - $olLessons.append('<li><a href="'+$(this).attr('href')+'">' + $(this).html()+'</a></li>'); + $olLessons.append('<li><a href="' + $(this).attr('href') + '">' + $(this).html() + '</a></li>'); }); } else { $pSummary.addClass('article'); @@ -400,39 +232,24 @@ false; // navigate across topic boundaries only in design docs $liClass.append($h2Title).append($pSummary).append($olLessons); $olClasses.append($liClass); }); - $('.jd-descr').append($olClasses); + $('#classes').append($olClasses); } // Set up expand/collapse behavior initExpandableNavItems("#nav"); - - $(".scroll-pane").scroll(function(event) { - event.preventDefault(); - return false; - }); - - /* Resize nav height when window height changes */ - $(window).resize(function() { - if ($('#side-nav').length == 0) return; - setNavBarDimensions(); // do this even if sidenav isn't fixed because it could become fixed - // make sidenav behave when resizing the window and side-scolling is a concern - updateSideNavDimensions(); - checkSticky(); - resizeNav(250); - }); - - if ($('#devdoc-nav').length) { - setNavBarDimensions(); - } - - // Set up play-on-hover <video> tags. - $('video.play-on-hover').bind('click', function(){ + $('video.play-on-hover').bind('click', function() { $(this).get(0).load(); // in case the video isn't seekable $(this).get(0).play(); }); + // Set up play-on-click for <video> tags with a "video-wrapper". + $('.video-wrapper > video').bind('click', function() { + this.play(); + $(this.parentElement).addClass('playing'); + }); + // Set up tooltips var TOOLTIP_MARGIN = 10; $('acronym,.tooltip-link').each(function() { @@ -476,220 +293,20 @@ false; // navigate across topic boundaries only in design docs }); //Loads the +1 button - var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; - po.src = 'https://apis.google.com/js/plusone.js'; - var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); - - $(".scroll-pane").removeAttr("tabindex"); // get rid of tabindex added by jscroller - - if ($(".scroll-pane").length > 1) { - // Check if there's a user preference for the panel heights - var cookieHeight = readCookie("reference_height"); - if (cookieHeight) { - restoreHeight(cookieHeight); - } - } - - // Resize once loading is finished - resizeNav(); - // Check if there's an anchor that we need to scroll into view. - // A delay is needed, because some browsers do not immediately scroll down to the anchor - window.setTimeout(offsetScrollForSticky, 100); - - /* init the language selector based on user cookie for lang */ - loadLangPref(); - changeNavLang(getLangPref()); - - /* setup event handlers to ensure the overflow menu is visible while picking lang */ - $("#language select") - .mousedown(function() { - $("div.morehover").addClass("hover"); }) - .blur(function() { - $("div.morehover").removeClass("hover"); }); - - /* some global variable setup */ - resizePackagesNav = $("#resize-packages-nav"); - classesNav = $("#classes-nav"); - devdocNav = $("#devdoc-nav"); - - var cookiePath = ""; - if (location.href.indexOf("/reference/") != -1) { - cookiePath = "reference_"; - } else if (location.href.indexOf("/guide/") != -1) { - cookiePath = "guide_"; - } else if (location.href.indexOf("/tools/") != -1) { - cookiePath = "tools_"; - } else if (location.href.indexOf("/training/") != -1) { - cookiePath = "training_"; - } else if (location.href.indexOf("/design/") != -1) { - cookiePath = "design_"; - } else if (location.href.indexOf("/distribute/") != -1) { - cookiePath = "distribute_"; - } - - - /* setup shadowbox for any videos that want it */ - var $videoLinks = $("a.video-shadowbox-button, a.notice-developers-video"); - if ($videoLinks.length) { - // if there's at least one, add the shadowbox HTML to the body - $('body').prepend( -'<div id="video-container">'+ - '<div id="video-frame">'+ - '<div class="video-close">'+ - '<span id="icon-video-close" onclick="closeVideo()"> </span>'+ - '</div>'+ - '<div id="youTubePlayer"></div>'+ - '</div>'+ -'</div>'); - - // loads the IFrame Player API code asynchronously. - $.getScript("https://www.youtube.com/iframe_api"); - - $videoLinks.each(function() { - var videoId = $(this).attr('href').split('?v=')[1]; - $(this).click(function(event) { - event.preventDefault(); - startYouTubePlayer(videoId); - }); - }); - } + //var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; + //po.src = 'https://apis.google.com/js/plusone.js'; + //var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); }); // END of the onload event - -var youTubePlayer; -function onYouTubeIframeAPIReady() { -} - -/* Returns the height the shadowbox video should be. It's based on the current - height of the "video-frame" element, which is 100% height for the window. - Then minus the margin so the video isn't actually the full window height. */ -function getVideoHeight() { - var frameHeight = $("#video-frame").height(); - var marginTop = $("#video-frame").css('margin-top').split('px')[0]; - return frameHeight - (marginTop * 2); -} - -var mPlayerPaused = false; - -function startYouTubePlayer(videoId) { - $("#video-container").show(); - $("#video-frame").show(); - mPlayerPaused = false; - - // compute the size of the player so it's centered in window - var maxWidth = 940; // the width of the web site content - var videoAspect = .5625; // based on 1280x720 resolution - var maxHeight = maxWidth * videoAspect; - var videoHeight = getVideoHeight(); - var videoWidth = videoHeight / videoAspect; - if (videoWidth > maxWidth) { - videoWidth = maxWidth; - videoHeight = maxHeight; - } - $("#video-frame").css('width', videoWidth); - - // check if we've already created this player - if (youTubePlayer == null) { - // check if there's a start time specified - var idAndHash = videoId.split("#"); - var startTime = 0; - if (idAndHash.length > 1) { - startTime = idAndHash[1].split("t=")[1] != undefined ? idAndHash[1].split("t=")[1] : 0; - } - // enable localized player - var lang = getLangPref(); - var captionsOn = lang == 'en' ? 0 : 1; - - youTubePlayer = new YT.Player('youTubePlayer', { - height: videoHeight, - width: videoWidth, - videoId: idAndHash[0], - playerVars: {start: startTime, hl: lang, cc_load_policy: captionsOn}, - events: { - 'onReady': onPlayerReady, - 'onStateChange': onPlayerStateChange - } - }); - } else { - // reset the size in case the user adjusted the window since last play - youTubePlayer.setSize(videoWidth, videoHeight); - // if a video different from the one already playing was requested, cue it up - if (videoId != youTubePlayer.getVideoUrl().split('?v=')[1].split('&')[0].split('%')[0]) { - youTubePlayer.cueVideoById(videoId); - } - youTubePlayer.playVideo(); - } -} - -function onPlayerReady(event) { - event.target.playVideo(); - mPlayerPaused = false; -} - -function closeVideo() { - try { - youTubePlayer.pauseVideo(); - } catch(e) { - } - $("#video-container").fadeOut(200); -} - -/* Track youtube playback for analytics */ -function onPlayerStateChange(event) { - // Video starts, send the video ID - if (event.data == YT.PlayerState.PLAYING) { - if (mPlayerPaused) { - ga('send', 'event', 'Videos', 'Resume', - youTubePlayer.getVideoUrl().split('?v=')[1].split('&')[0].split('%')[0]); - } else { - // track the start playing event so we know from which page the video was selected - ga('send', 'event', 'Videos', 'Start: ' + - youTubePlayer.getVideoUrl().split('?v=')[1].split('&')[0].split('%')[0], - 'on: ' + document.location.href); - } - mPlayerPaused = false; - } - // Video paused, send video ID and video elapsed time - if (event.data == YT.PlayerState.PAUSED) { - ga('send', 'event', 'Videos', 'Paused', - youTubePlayer.getVideoUrl().split('?v=')[1].split('&')[0].split('%')[0], - youTubePlayer.getCurrentTime()); - mPlayerPaused = true; - } - // Video finished, send video ID and video elapsed time - if (event.data == YT.PlayerState.ENDED) { - ga('send', 'event', 'Videos', 'Finished', - youTubePlayer.getVideoUrl().split('?v=')[1].split('&')[0].split('%')[0], - youTubePlayer.getCurrentTime()); - mPlayerPaused = true; - } -} - - - function initExpandableNavItems(rootTag) { - $(rootTag + ' li.nav-section .nav-section-header').click(function() { - var section = $(this).closest('li.nav-section'); - if (section.hasClass('expanded')) { - /* hide me and descendants */ - section.find('ul').slideUp(250, function() { - // remove 'expanded' class from my section and any children - section.closest('li').removeClass('expanded'); - $('li.nav-section', section).removeClass('expanded'); - resizeNav(); - }); - } else { - /* show me */ - // first hide all other siblings - var $others = $('li.nav-section.expanded', $(this).closest('ul')).not('.sticky'); - $others.removeClass('expanded').children('ul').slideUp(250); - - // now expand me - section.closest('li').addClass('expanded'); - section.children('ul').slideDown(250, function() { - resizeNav(); - }); + var toggleIcon = $( + rootTag + ' li.nav-section .nav-section-header .toggle-icon, ' + + rootTag + ' li.nav-section .nav-section-header a[href="#"]'); + + toggleIcon.on('click keypress', function(e) { + if (e.type == 'keypress' && e.which == 13 || e.type == 'click') { + doNavToggle(this); } }); @@ -702,35 +319,27 @@ function initExpandableNavItems(rootTag) { }); } +function doNavToggle(el) { + var section = $(el).closest('li.nav-section'); + if (section.hasClass('expanded')) { + /* hide me and descendants */ + section.find('ul').slideUp(250, function() { + // remove 'expanded' class from my section and any children + section.closest('li').removeClass('expanded'); + $('li.nav-section', section).removeClass('expanded'); + }); + } else { + /* show me */ + // first hide all other siblings + var $others = $('li.nav-section.expanded', $(el).closest('ul')).not('.sticky'); + $others.removeClass('expanded').children('ul').slideUp(250); -/** Create the list of breadcrumb links in the sticky header */ -function buildBreadcrumbs() { - var $breadcrumbUl = $(".dac-header-crumbs"); - var primaryNavLink = ".dac-nav-list > .dac-nav-item > .dac-nav-link"; - - // Add the secondary horizontal nav item, if provided - var $selectedSecondNav = $(".dac-nav-secondary .dac-nav-link.selected").clone() - .attr('class', 'dac-header-crumbs-link'); - - if ($selectedSecondNav.length) { - $breadcrumbUl.prepend($('<li class="dac-header-crumbs-item">').append($selectedSecondNav)); - } - - // Add the primary horizontal nav - var $selectedFirstNav = $(primaryNavLink + ".selected, " + primaryNavLink + ".has-subnav").clone() - .attr('class', 'dac-header-crumbs-link'); - - // If there's no header nav item, use the logo link and title from alt text - if ($selectedFirstNav.length < 1) { - $selectedFirstNav = $('<a class="dac-header-crumbs-link">') - .attr('href', $("div#header .logo a").attr('href')) - .text($("div#header .logo img").attr('alt')); + // now expand me + section.closest('li').addClass('expanded'); + section.children('ul').slideDown(250); } - $breadcrumbUl.prepend($('<li class="dac-header-crumbs-item">').append($selectedFirstNav)); } - - /** Highlight the current page in sidenav, expanding children as appropriate */ function highlightSidenav() { // if something is already highlighted, undo it. This is for dynamic navigation (Samples index) @@ -746,6 +355,8 @@ function highlightSidenav() { } var $selListItem; + var breadcrumb = []; + if ($selNavLink.length) { // Find this page's <li> in sidenav and set selected $selListItem = $selNavLink.closest('li'); @@ -755,8 +366,20 @@ function highlightSidenav() { $selNavLink.parents('li.nav-section').each(function() { $(this).addClass('expanded'); $(this).children('ul').show(); + + var link = $(this).find('a').first(); + + if (!$(this).is($selListItem)) { + breadcrumb.unshift(link) + } }); + + $('#nav').scrollIntoView($selNavLink); } + + breadcrumb.forEach(function(link) { + link.dacCrumbs(); + }); } function unHighlightSidenav() { @@ -764,59 +387,6 @@ function unHighlightSidenav() { $('ul#nav li.nav-section.expanded').removeClass('expanded').children('ul').hide(); } -function toggleFullscreen(enable) { - var delay = 20; - var enabled = true; - var stylesheet = $('link[rel="stylesheet"][class="fullscreen"]'); - if (enable) { - // Currently NOT USING fullscreen; enable fullscreen - stylesheet.removeAttr('disabled'); - $('#nav-swap .fullscreen').removeClass('disabled'); - $('#devdoc-nav').css({left:''}); - setTimeout(updateSidenavFullscreenWidth,delay); // need to wait a moment for css to switch - enabled = true; - } else { - // Currently USING fullscreen; disable fullscreen - stylesheet.attr('disabled', 'disabled'); - $('#nav-swap .fullscreen').addClass('disabled'); - setTimeout(updateSidenavFixedWidth,delay); // need to wait a moment for css to switch - enabled = false; - } - writeCookie("fullscreen", enabled, null); - setNavBarDimensions(); - resizeNav(delay); - updateSideNavDimensions(); - setTimeout(initSidenavHeightResize,delay); -} - -// TODO: Refactor into a closure. -var navBarLeftPos; -var navBarWidth; -function setNavBarDimensions() { - navBarLeftPos = $('#body-content').offset().left; - navBarWidth = $('#side-nav').width(); -} - - -function updateSideNavDimensions() { - var newLeft = $(window).scrollLeft() - navBarLeftPos; - $('#devdoc-nav').css({left: -newLeft, width: navBarWidth}); - $('#devdoc-nav .totop').css({left: -(newLeft - parseInt($('#side-nav').css('padding-left')))}); -} - -// TODO: use $(document).ready instead -function addLoadEvent(newfun) { - var current = window.onload; - if (typeof window.onload != 'function') { - window.onload = newfun; - } else { - window.onload = function() { - current(); - newfun(); - } - } -} - var agent = navigator['userAgent'].toLowerCase(); // If a mobile phone, set flag and do mobile setup if ((agent.indexOf("mobile") != -1) || // android, iphone, ipod @@ -826,195 +396,23 @@ if ((agent.indexOf("mobile") != -1) || // android, iphone, ipod isMobile = true; } - $(document).ready(function() { $("pre:not(.no-pretty-print)").addClass("prettyprint"); prettyPrint(); }); - - - -/* ######### RESIZE THE SIDENAV ########## */ - -function resizeNav(delay) { - var $nav = $("#devdoc-nav"); - var $window = $(window); - var navHeight; - - // Get the height of entire window and the total header height. - // Then figure out based on scroll position whether the header is visible - var windowHeight = $window.height(); - var scrollTop = $window.scrollTop(); - var headerHeight = $('#header-wrapper').outerHeight(); - var headerVisible = scrollTop < stickyTop; - - // get the height of space between nav and top of window. - // Could be either margin or top position, depending on whether the nav is fixed. - var topMargin = (parseInt($nav.css('top')) || 20) + 1; - // add 1 for the #side-nav bottom margin - - // Depending on whether the header is visible, set the side nav's height. - if (headerVisible) { - // The sidenav height grows as the header goes off screen - navHeight = windowHeight - (headerHeight - scrollTop) - topMargin; - } else { - // Once header is off screen, the nav height is almost full window height - navHeight = windowHeight - topMargin; - } - - - - $scrollPanes = $(".scroll-pane"); - if ($window.width() < 720) { - $nav.css('height', ''); - } else if ($scrollPanes.length > 1) { - // subtract the height of the api level widget and nav swapper from the available nav height - navHeight -= ($('#api-nav-header').outerHeight(true) + $('#nav-swap').outerHeight(true)); - - $("#swapper").css({height:navHeight + "px"}); - if ($("#nav-tree").is(":visible")) { - $("#nav-tree").css({height:navHeight}); - } - - var classesHeight = navHeight - parseInt($("#resize-packages-nav").css("height")) - 10 + "px"; - //subtract 10px to account for drag bar - - // if the window becomes small enough to make the class panel height 0, - // then the package panel should begin to shrink - if (parseInt(classesHeight) <= 0) { - $("#resize-packages-nav").css({height:navHeight - 10}); //subtract 10px for drag bar - $("#packages-nav").css({height:navHeight - 10}); - } - - $("#classes-nav").css({'height':classesHeight, 'margin-top':'10px'}); - $("#classes-nav .jspContainer").css({height:classesHeight}); - - - } else { - $nav.height(navHeight); - } - - if (delay) { - updateFromResize = true; - delayedReInitScrollbars(delay); - } else { - reInitScrollbars(); - } - -} - -var updateScrollbars = false; -var updateFromResize = false; - -/* Re-initialize the scrollbars to account for changed nav size. - * This method postpones the actual update by a 1/4 second in order to optimize the - * scroll performance while the header is still visible, because re-initializing the - * scroll panes is an intensive process. - */ -function delayedReInitScrollbars(delay) { - // If we're scheduled for an update, but have received another resize request - // before the scheduled resize has occured, just ignore the new request - // (and wait for the scheduled one). - if (updateScrollbars && updateFromResize) { - updateFromResize = false; - return; - } - - // We're scheduled for an update and the update request came from this method's setTimeout - if (updateScrollbars && !updateFromResize) { - reInitScrollbars(); - updateScrollbars = false; - } else { - updateScrollbars = true; - updateFromResize = false; - setTimeout('delayedReInitScrollbars()',delay); - } -} - -/* Re-initialize the scrollbars to account for changed nav size. */ -function reInitScrollbars() { - var pane = $(".scroll-pane").each(function(){ - var api = $(this).data('jsp'); - if (!api) {return;} - api.reinitialise( {verticalGutter:0} ); - }); - $(".scroll-pane").removeAttr("tabindex"); // get rid of tabindex added by jscroller -} - - -/* Resize the height of the nav panels in the reference, - * and save the new size to a cookie */ -function saveNavPanels() { - var basePath = getBaseUri(location.pathname); - var section = basePath.substring(1,basePath.indexOf("/",1)); - writeCookie("height", resizePackagesNav.css("height"), section); -} - - - -function restoreHeight(packageHeight) { - $("#resize-packages-nav").height(packageHeight); - $("#packages-nav").height(packageHeight); - // var classesHeight = navHeight - packageHeight; - // $("#classes-nav").css({height:classesHeight}); - // $("#classes-nav .jspContainer").css({height:classesHeight}); -} - - - -/* ######### END RESIZE THE SIDENAV HEIGHT ########## */ - - - - - -/** Scroll the jScrollPane to make the currently selected item visible - This is called when the page finished loading. */ -function scrollIntoView(nav) { - return; - var $nav = $("#"+nav); - var element = $nav.jScrollPane({/* ...settings... */}); - var api = element.data('jsp'); - - if ($nav.is(':visible')) { - var $selected = $(".selected", $nav); - if ($selected.length == 0) { - // If no selected item found, exit - return; - } - // get the selected item's offset from its container nav by measuring the item's offset - // relative to the document then subtract the container nav's offset relative to the document - var selectedOffset = $selected.offset().top - $nav.offset().top + 60; - if (selectedOffset > $nav.height() * .8) { // multiply nav height by .8 so we move up the item - // if it's more than 80% down the nav - // scroll the item up by an amount equal to 80% the container nav's height - api.scrollTo(0, selectedOffset - ($nav.height() * .8), false); - } - } -} - - - - - - /* Show popup dialogs */ function showDialog(id) { - $dialog = $("#"+id); + $dialog = $("#" + id); $dialog.prepend('<div class="box-border"><div class="top"> <div class="left"></div> <div class="right"></div></div><div class="bottom"> <div class="left"></div> <div class="right"></div> </div> </div>'); $dialog.wrapInner('<div/>'); $dialog.removeClass("hide"); } - - - - /* ######### COOKIES! ########## */ function readCookie(cookie) { - var myCookie = cookie_namespace+"_"+cookie+"="; + var myCookie = cookie_namespace + "_" + cookie + "="; if (document.cookie) { var index = document.cookie.indexOf(myCookie); if (index != -1) { @@ -1031,98 +429,16 @@ function readCookie(cookie) { } function writeCookie(cookie, val, section) { - if (val==undefined) return; - section = section == null ? "_" : "_"+section+"_"; - var age = 2*365*24*60*60; // set max-age to 2 years - var cookieValue = cookie_namespace + section + cookie + "=" + val - + "; max-age=" + age +"; path=/"; + if (val == undefined) return; + section = section == null ? "_" : "_" + section + "_"; + var age = 2 * 365 * 24 * 60 * 60; // set max-age to 2 years + var cookieValue = cookie_namespace + section + cookie + "=" + val + + "; max-age=" + age + "; path=/"; document.cookie = cookieValue; } /* ######### END COOKIES! ########## */ - -var sticky = false; -var stickyTop; -var prevScrollLeft = 0; // used to compare current position to previous position of horiz scroll -/* Sets the vertical scoll position at which the sticky bar should appear. - This method is called to reset the position when search results appear or hide */ -function setStickyTop() { - stickyTop = $('#header-wrapper').outerHeight() - $('#header > .dac-header-inner').outerHeight(); -} - -/* - * Displays sticky nav bar on pages when dac header scrolls out of view - */ -$(window).scroll(function(event) { - // Exit if the mouse target is a DIV, because that means the event is coming - // from a scrollable div and so there's no need to make adjustments to our layout - if ($(event.target).nodeName == "DIV") { - return; - } - - checkSticky(); -}); - -function checkSticky() { - setStickyTop(); - var $headerEl = $('#header'); - // Exit if there's no sidenav - if ($('#side-nav').length == 0) return; - - var top = $(window).scrollTop(); - // we set the navbar fixed when the scroll position is beyond the height of the site header... - var shouldBeSticky = top > stickyTop; - // ... except if the document content is shorter than the sidenav height. - // (this is necessary to avoid crazy behavior on OSX Lion due to overscroll bouncing) - if ($("#doc-col").height() < $("#side-nav").height()) { - shouldBeSticky = false; - } - // Nor on mobile - if (window.innerWidth < 720) { - shouldBeSticky = false; - } - // Account for horizontal scroll - var scrollLeft = $(window).scrollLeft(); - // When the sidenav is fixed and user scrolls horizontally, reposition the sidenav to match - if (sticky && (scrollLeft != prevScrollLeft)) { - updateSideNavDimensions(); - prevScrollLeft = scrollLeft; - } - - // Don't continue if the header is sufficently far away - // (to avoid intensive resizing that slows scrolling) - if (sticky == shouldBeSticky) { - return; - } - - // If sticky header visible and position is now near top, hide sticky - if (sticky && !shouldBeSticky) { - sticky = false; - // make the sidenav static again - $('#devdoc-nav') - .removeClass('fixed') - .css({'width':'auto','margin':''}); - // delay hide the sticky - $headerEl.removeClass('is-sticky'); - - // update the sidenaav position for side scrolling - updateSideNavDimensions(); - } else if (!sticky && shouldBeSticky) { - sticky = true; - $headerEl.addClass('is-sticky'); - - // make the sidenav fixed - $('#devdoc-nav') - .addClass('fixed'); - - // update the sidenaav position for side scrolling - updateSideNavDimensions(); - - } - resizeNav(250); // pass true in order to delay the scrollbar re-initialization for performance -} - /* * Manages secion card states and nav resize to conclude loading */ @@ -1132,7 +448,7 @@ function checkSticky() { // Stack hover states $('.section-card-menu').each(function(index, el) { var height = $(el).height(); - $(el).css({height:height+'px', position:'relative'}); + $(el).css({height:height + 'px', position:'relative'}); var $cardInfo = $(el).find('.card-info'); $cardInfo.css({position: 'absolute', bottom:'0px', left:'0px', right:'0px', overflow:'visible'}); @@ -1142,25 +458,8 @@ function checkSticky() { })(); - - - - - - - - - - - - - /* MISC LIBRARY FUNCTIONS */ - - - - function toggle(obj, slide) { var ul = $("ul:first", obj); var li = ul.parent(); @@ -1181,7 +480,6 @@ function toggle(obj, slide) { } } - function buildToggleLists() { $(".toggle-list").each( function(i) { @@ -1190,12 +488,10 @@ function buildToggleLists() { }); } - - function hideNestedItems(list, toggle) { $list = $(list); // hide nested lists - if($list.hasClass('showing')) { + if ($list.hasClass('showing')) { $("li ol", $list).hide('fast'); $list.removeClass('showing'); // show nested lists @@ -1203,207 +499,47 @@ function hideNestedItems(list, toggle) { $("li ol", $list).show('fast'); $list.addClass('showing'); } - $(".more,.less",$(toggle)).toggle(); + $(".more,.less", $(toggle)).toggle(); } - /* Call this to add listeners to a <select> element for Studio/Eclipse/Other docs */ function setupIdeDocToggle() { - $( "select.ide" ).change(function() { + $("select.ide").change(function() { var selected = $(this).find("option:selected").attr("value"); $(".select-ide").hide(); - $(".select-ide."+selected).show(); + $(".select-ide." + selected).show(); $("select.ide").val(selected); }); } - - - - - - - - - - - - - - - - - - - - - - - -/* REFERENCE NAV SWAP */ - - -function getNavPref() { - var v = readCookie('reference_nav'); - if (v != NAV_PREF_TREE) { - v = NAV_PREF_PANELS; - } - return v; -} - -function chooseDefaultNav() { - nav_pref = getNavPref(); - if (nav_pref == NAV_PREF_TREE) { - $("#nav-panels").toggle(); - $("#panel-link").toggle(); - $("#nav-tree").toggle(); - $("#tree-link").toggle(); - } -} - -function swapNav() { - if (nav_pref == NAV_PREF_TREE) { - nav_pref = NAV_PREF_PANELS; - } else { - nav_pref = NAV_PREF_TREE; - init_default_navtree(toRoot); - } - writeCookie("nav", nav_pref, "reference"); - - $("#nav-panels").toggle(); - $("#panel-link").toggle(); - $("#nav-tree").toggle(); - $("#tree-link").toggle(); - - resizeNav(); - - // Gross nasty hack to make tree view show up upon first swap by setting height manually - $("#nav-tree .jspContainer:visible") - .css({'height':$("#nav-tree .jspContainer .jspPane").height() +'px'}); - // Another nasty hack to make the scrollbar appear now that we have height - resizeNav(); - - if ($("#nav-tree").is(':visible')) { - scrollIntoView("nav-tree"); - } else { - scrollIntoView("packages-nav"); - scrollIntoView("classes-nav"); - } -} - - - -/* ############################################ */ -/* ########## LOCALIZATION ############ */ -/* ############################################ */ - -function getBaseUri(uri) { - var intlUrl = (uri.substring(0,6) == "/intl/"); - if (intlUrl) { - base = uri.substring(uri.indexOf('intl/')+5,uri.length); - base = base.substring(base.indexOf('/')+1, base.length); - //alert("intl, returning base url: /" + base); - return ("/" + base); - } else { - //alert("not intl, returning uri as found."); - return uri; - } -} - -function requestAppendHL(uri) { -//append "?hl=<lang> to an outgoing request (such as to blog) - var lang = getLangPref(); - if (lang) { - var q = 'hl=' + lang; - uri += '?' + q; - window.location = uri; - return false; - } else { - return true; - } -} - - -function changeNavLang(lang) { - if (lang === 'en') { return; } - - var $links = $("a[" + lang + "-lang],p[" + lang + "-lang]"); - $links.each(function(){ // for each link with a translation - var $link = $(this); - // put the desired language from the attribute as the text - $link.text($link.attr(lang + '-lang')) - }); -} - -function changeLangPref(lang, submit) { - writeCookie("pref_lang", lang, null); - - // ####### 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 (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); - } - } -} - -function loadLangPref() { - var lang = readCookie("pref_lang"); - if (lang != 0) { - $("#language").find("option[value='"+lang+"']").attr("selected",true); - } -} - -function getLangPref() { - var lang = $("#language").find(":selected").attr("value"); - if (!lang) { - lang = readCookie("pref_lang"); - } - return (lang != 0) ? lang : 'en'; -} - -/* ########## END LOCALIZATION ############ */ - - - - - - /* Used to hide and reveal supplemental content, such as long code samples. See the companion CSS in android-developer-docs.css */ function toggleContent(obj) { var div = $(obj).closest(".toggle-content"); - var toggleMe = $(".toggle-content-toggleme:eq(0)",div); + var toggleMe = $(".toggle-content-toggleme:eq(0)", div); if (div.hasClass("closed")) { // if it's closed, open it toggleMe.slideDown(); $(".toggle-content-text:eq(0)", obj).toggle(); div.removeClass("closed").addClass("open"); - $(".toggle-content-img:eq(0)", div).attr("title", "hide").attr("src", toRoot - + "assets/images/styles/disclosure_up.png"); + $(".toggle-content-img:eq(0)", div).attr("title", "hide").attr("src", toRoot + + "assets/images/styles/disclosure_up.png"); } else { // if it's open, close it toggleMe.slideUp('fast', function() { // Wait until the animation is done before closing arrow $(".toggle-content-text:eq(0)", obj).toggle(); div.removeClass("open").addClass("closed"); div.find(".toggle-content").removeClass("open").addClass("closed") .find(".toggle-content-toggleme").hide(); - $(".toggle-content-img", div).attr("title", "show").attr("src", toRoot - + "assets/images/styles/disclosure_down.png"); + $(".toggle-content-img", div).attr("title", "show").attr("src", toRoot + + "assets/images/styles/disclosure_down.png"); }); } return false; } - /* New version of expandable content */ -function toggleExpandable(link,id) { - if($(id).is(':visible')) { +function toggleExpandable(link, id) { + if ($(id).is(':visible')) { $(id).slideUp(); $(link).removeClass('expanded'); } else { @@ -1417,10 +553,6 @@ function hideExpandable(ids) { $(ids).prev('h4').find('a.expandable').removeClass('expanded'); } - - - - /* * Slideshow 1.0 * Used on /index.html and /develop/index.html for carousel @@ -1460,169 +592,164 @@ function hideExpandable(ids) { * */ - (function($) { - $.fn.dacSlideshow = function(o) { - - //Options - see above - o = $.extend({ - btnPrev: null, - btnNext: null, - btnPause: null, - auto: true, - speed: 500, - autoTime: 12000, - easing: null, - start: 0, - scroll: 1, - pagination: true - - }, o || {}); - - //Set up a carousel for each - return this.each(function() { - - var running = false; - var animCss = o.vertical ? "top" : "left"; - var sizeCss = o.vertical ? "height" : "width"; - var div = $(this); - var ul = $("ul", div); - var tLi = $("li", ul); - var tl = tLi.size(); - var timer = null; - - var li = $("li", ul); - var itemLength = li.size(); - var curr = o.start; - - li.css({float: o.vertical ? "none" : "left"}); - ul.css({margin: "0", padding: "0", position: "relative", "list-style-type": "none", "z-index": "1"}); - div.css({position: "relative", "z-index": "2", left: "0px"}); - - var liSize = o.vertical ? height(li) : width(li); - var ulSize = liSize * itemLength; - var divSize = liSize; - - li.css({width: li.width(), height: li.height()}); - ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize)); - - div.css(sizeCss, divSize+"px"); - - //Pagination - if (o.pagination) { - var pagination = $("<div class='pagination'></div>"); - var pag_ul = $("<ul></ul>"); - if (tl > 1) { - for (var i=0;i<tl;i++) { - var li = $("<li>"+i+"</li>"); - pag_ul.append(li); - if (i==o.start) li.addClass('active'); - li.click(function() { - go(parseInt($(this).text())); - }) - } - pagination.append(pag_ul); - div.append(pagination); - } - } - - //Previous button - if(o.btnPrev) +(function($) { + $.fn.dacSlideshow = function(o) { + + //Options - see above + o = $.extend({ + btnPrev: null, + btnNext: null, + btnPause: null, + auto: true, + speed: 500, + autoTime: 12000, + easing: null, + start: 0, + scroll: 1, + pagination: true + + }, o || {}); + + //Set up a carousel for each + return this.each(function() { + + var running = false; + var animCss = o.vertical ? "top" : "left"; + var sizeCss = o.vertical ? "height" : "width"; + var div = $(this); + var ul = $("ul", div); + var tLi = $("li", ul); + var tl = tLi.size(); + var timer = null; + + var li = $("li", ul); + var itemLength = li.size(); + var curr = o.start; + + li.css({float: o.vertical ? "none" : "left"}); + ul.css({margin: "0", padding: "0", position: "relative", "list-style-type": "none", "z-index": "1"}); + div.css({position: "relative", "z-index": "2", left: "0px"}); + + var liSize = o.vertical ? height(li) : width(li); + var ulSize = liSize * itemLength; + var divSize = liSize; + + li.css({width: li.width(), height: li.height()}); + ul.css(sizeCss, ulSize + "px").css(animCss, -(curr * liSize)); + + div.css(sizeCss, divSize + "px"); + + //Pagination + if (o.pagination) { + var pagination = $("<div class='pagination'></div>"); + var pag_ul = $("<ul></ul>"); + if (tl > 1) { + for (var i = 0; i < tl; i++) { + var li = $("<li>" + i + "</li>"); + pag_ul.append(li); + if (i == o.start) li.addClass('active'); + li.click(function() { + go(parseInt($(this).text())); + }) + } + pagination.append(pag_ul); + div.append(pagination); + } + } + + //Previous button + if (o.btnPrev) $(o.btnPrev).click(function(e) { - e.preventDefault(); - return go(curr-o.scroll); + e.preventDefault(); + return go(curr - o.scroll); }); - //Next button - if(o.btnNext) + //Next button + if (o.btnNext) $(o.btnNext).click(function(e) { - e.preventDefault(); - return go(curr+o.scroll); + e.preventDefault(); + return go(curr + o.scroll); }); - //Pause button - if(o.btnPause) + //Pause button + if (o.btnPause) $(o.btnPause).click(function(e) { - e.preventDefault(); - if ($(this).hasClass('paused')) { - startRotateTimer(); - } else { - pauseRotateTimer(); - } + e.preventDefault(); + if ($(this).hasClass('paused')) { + startRotateTimer(); + } else { + pauseRotateTimer(); + } }); - //Auto rotation - if(o.auto) startRotateTimer(); - - function startRotateTimer() { - clearInterval(timer); - timer = setInterval(function() { - if (curr == tl-1) { - go(0); - } else { - go(curr+o.scroll); - } - }, o.autoTime); - $(o.btnPause).removeClass('paused'); - } - - function pauseRotateTimer() { - clearInterval(timer); - $(o.btnPause).addClass('paused'); - } - - //Go to an item - function go(to) { - if(!running) { - - if(to<0) { - to = itemLength-1; - } else if (to>itemLength-1) { - to = 0; - } - curr = to; - - running = true; - - ul.animate( - animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , o.speed, o.easing, - function() { - running = false; - } - ); + //Auto rotation + if (o.auto) startRotateTimer(); - $(o.btnPrev + "," + o.btnNext).removeClass("disabled"); - $( (curr-o.scroll<0 && o.btnPrev) - || - (curr+o.scroll > itemLength && o.btnNext) - || - [] - ).addClass("disabled"); + function startRotateTimer() { + clearInterval(timer); + timer = setInterval(function() { + if (curr == tl - 1) { + go(0); + } else { + go(curr + o.scroll); + } + }, o.autoTime); + $(o.btnPause).removeClass('paused'); + } + function pauseRotateTimer() { + clearInterval(timer); + $(o.btnPause).addClass('paused'); + } + + //Go to an item + function go(to) { + if (!running) { - var nav_items = $('li', pagination); - nav_items.removeClass('active'); - nav_items.eq(to).addClass('active'); + if (to < 0) { + to = itemLength - 1; + } else if (to > itemLength - 1) { + to = 0; + } + curr = to; + running = true; - } - if(o.auto) startRotateTimer(); - return false; - }; - }); - }; + ul.animate( + animCss == "left" ? {left: -(curr * liSize)} : {top: -(curr * liSize)} , o.speed, o.easing, + function() { + running = false; + } + ); - function css(el, prop) { - return parseInt($.css(el[0], prop)) || 0; - }; - function width(el) { - return el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight'); - }; - function height(el) { - return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom'); - }; + $(o.btnPrev + "," + o.btnNext).removeClass("disabled"); + $((curr - o.scroll < 0 && o.btnPrev) || + (curr + o.scroll > itemLength && o.btnNext) || + [] + ).addClass("disabled"); - })(jQuery); + var nav_items = $('li', pagination); + nav_items.removeClass('active'); + nav_items.eq(to).addClass('active'); + } + if (o.auto) startRotateTimer(); + return false; + }; + }); + }; + + function css(el, prop) { + return parseInt($.css(el[0], prop)) || 0; + }; + function width(el) { + return el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight'); + }; + function height(el) { + return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom'); + }; + +})(jQuery); /* * dacSlideshow 1.0 @@ -1661,1267 +788,81 @@ function hideExpandable(ids) { * pagination: whether or not to include dotted pagination * */ - (function($) { - $.fn.dacTabbedList = function(o) { - - //Options - see above - o = $.extend({ - speed : 250, - easing: null, - nav_id: null, - frame_id: null - }, o || {}); - - //Set up a carousel for each - return this.each(function() { - - var curr = 0; - var running = false; - var animCss = "margin-left"; - var sizeCss = "width"; - var div = $(this); - - var nav = $(o.nav_id, div); - var nav_li = $("li", nav); - var nav_size = nav_li.size(); - var frame = div.find(o.frame_id); - var content_width = $(frame).find('ul').width(); - //Buttons - $(nav_li).click(function(e) { +(function($) { + $.fn.dacTabbedList = function(o) { + + //Options - see above + o = $.extend({ + speed : 250, + easing: null, + nav_id: null, + frame_id: null + }, o || {}); + + //Set up a carousel for each + return this.each(function() { + + var curr = 0; + var running = false; + var animCss = "margin-left"; + var sizeCss = "width"; + var div = $(this); + + var nav = $(o.nav_id, div); + var nav_li = $("li", nav); + var nav_size = nav_li.size(); + var frame = div.find(o.frame_id); + var content_width = $(frame).find('ul').width(); + //Buttons + $(nav_li).click(function(e) { go($(nav_li).index($(this))); }) - //Go to an item - function go(to) { - if(!running) { - curr = to; - running = true; + //Go to an item + function go(to) { + if (!running) { + curr = to; + running = true; - frame.animate({ 'margin-left' : -(curr*content_width) }, o.speed, o.easing, + frame.animate({'margin-left' : -(curr * content_width)}, o.speed, o.easing, function() { - running = false; + running = false; } ); + nav_li.removeClass('active'); + nav_li.eq(to).addClass('active'); - nav_li.removeClass('active'); - nav_li.eq(to).addClass('active'); - - - } - return false; - }; - }); - }; - - function css(el, prop) { - return parseInt($.css(el[0], prop)) || 0; - }; - function width(el) { - return el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight'); - }; - function height(el) { - return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom'); - }; - - })(jQuery); - - - - - -/* ######################################################## */ -/* ################ SEARCH SUGGESTIONS ################## */ -/* ######################################################## */ - - - -var gSelectedIndex = -1; // the index position of currently highlighted suggestion -var gSelectedColumn = -1; // which column of suggestion lists is currently focused - -var gMatches = new Array(); -var gLastText = ""; -var gInitialized = false; -var ROW_COUNT_FRAMEWORK = 20; // max number of results in list -var gListLength = 0; - - -var gGoogleMatches = new Array(); -var ROW_COUNT_GOOGLE = 15; // max number of results in list -var gGoogleListLength = 0; - -var gDocsMatches = new Array(); -var ROW_COUNT_DOCS = 100; // max number of results in list -var gDocsListLength = 0; - -function onSuggestionClick(link) { - // When user clicks a suggested document, track it - ga('send', 'event', 'Suggestion Click', 'clicked: ' + $(link).attr('href'), - 'query: ' + $("#search_autocomplete").val().toLowerCase()); -} - -function set_item_selected($li, selected) -{ - if (selected) { - $li.attr('class','jd-autocomplete jd-selected'); - } else { - $li.attr('class','jd-autocomplete'); - } -} - -function set_item_values(toroot, $li, match) -{ - var $link = $('a',$li); - $link.html(match.__hilabel || match.label); - $link.attr('href',toroot + match.link); -} - -function set_item_values_jd(toroot, $li, match) -{ - var $link = $('a',$li); - $link.html(match.title); - $link.attr('href',toroot + match.url); -} - -function new_suggestion($list) { - var $li = $("<li class='jd-autocomplete'></li>"); - $list.append($li); - - $li.mousedown(function() { - window.location = this.firstChild.getAttribute("href"); - }); - $li.mouseover(function() { - $('.search_filtered_wrapper li').removeClass('jd-selected'); - $(this).addClass('jd-selected'); - gSelectedColumn = $(".search_filtered:visible").index($(this).closest('.search_filtered')); - gSelectedIndex = $("li", $(".search_filtered:visible")[gSelectedColumn]).index(this); - }); - $li.append("<a onclick='onSuggestionClick(this)'></a>"); - $li.attr('class','show-item'); - return $li; -} - -function sync_selection_table(toroot) -{ - var $li; //list item jquery object - var i; //list item iterator - - // if there are NO results at all, hide all columns - if (!(gMatches.length > 0) && !(gGoogleMatches.length > 0) && !(gDocsMatches.length > 0)) { - $('.suggest-card').hide(300); - return; - } - - // if there are api results - if ((gMatches.length > 0) || (gGoogleMatches.length > 0)) { - // reveal suggestion list - $('.suggest-card.reference').show(); - var listIndex = 0; // list index position - - // reset the lists - $(".suggest-card.reference li").remove(); - - // ########### ANDROID RESULTS ############# - if (gMatches.length > 0) { - - // determine android results to show - gListLength = gMatches.length < ROW_COUNT_FRAMEWORK ? - gMatches.length : ROW_COUNT_FRAMEWORK; - for (i=0; i<gListLength; i++) { - var $li = new_suggestion($(".suggest-card.reference ul")); - set_item_values(toroot, $li, gMatches[i]); - set_item_selected($li, i == gSelectedIndex); - } - } - - // ########### GOOGLE RESULTS ############# - if (gGoogleMatches.length > 0) { - // show header for list - $(".suggest-card.reference ul").append("<li class='header'>in Google Services:</li>"); - - // determine google results to show - gGoogleListLength = gGoogleMatches.length < ROW_COUNT_GOOGLE ? gGoogleMatches.length : ROW_COUNT_GOOGLE; - for (i=0; i<gGoogleListLength; i++) { - var $li = new_suggestion($(".suggest-card.reference ul")); - set_item_values(toroot, $li, gGoogleMatches[i]); - set_item_selected($li, i == gSelectedIndex); - } - } - } else { - $('.suggest-card.reference').hide(); - } - - // ########### JD DOC RESULTS ############# - if (gDocsMatches.length > 0) { - // reset the lists - $(".suggest-card:not(.reference) li").remove(); - - // determine google results to show - // NOTE: The order of the conditions below for the sugg.type MUST BE SPECIFIC: - // The order must match the reverse order that each section appears as a card in - // the suggestion UI... this may be only for the "develop" grouped items though. - gDocsListLength = gDocsMatches.length < ROW_COUNT_DOCS ? gDocsMatches.length : ROW_COUNT_DOCS; - for (i=0; i<gDocsListLength; i++) { - var sugg = gDocsMatches[i]; - var $li; - if (sugg.type == "design") { - $li = new_suggestion($(".suggest-card.design ul")); - } else - if (sugg.type == "distribute") { - $li = new_suggestion($(".suggest-card.distribute ul")); - } else - if (sugg.type == "samples") { - $li = new_suggestion($(".suggest-card.develop .child-card.samples")); - } else - if (sugg.type == "training") { - $li = new_suggestion($(".suggest-card.develop .child-card.training")); - } else - if (sugg.type == "about"||"guide"||"tools"||"google") { - $li = new_suggestion($(".suggest-card.develop .child-card.guides")); - } else { - continue; - } - - set_item_values_jd(toroot, $li, sugg); - set_item_selected($li, i == gSelectedIndex); - } - - // add heading and show or hide card - if ($(".suggest-card.design li").length > 0) { - $(".suggest-card.design ul").prepend("<li class='header'>Design:</li>"); - $(".suggest-card.design").show(300); - } else { - $('.suggest-card.design').hide(300); - } - if ($(".suggest-card.distribute li").length > 0) { - $(".suggest-card.distribute ul").prepend("<li class='header'>Distribute:</li>"); - $(".suggest-card.distribute").show(300); - } else { - $('.suggest-card.distribute').hide(300); - } - if ($(".child-card.guides li").length > 0) { - $(".child-card.guides").prepend("<li class='header'>Guides:</li>"); - $(".child-card.guides li").appendTo(".suggest-card.develop ul"); - } - if ($(".child-card.training li").length > 0) { - $(".child-card.training").prepend("<li class='header'>Training:</li>"); - $(".child-card.training li").appendTo(".suggest-card.develop ul"); - } - if ($(".child-card.samples li").length > 0) { - $(".child-card.samples").prepend("<li class='header'>Samples:</li>"); - $(".child-card.samples li").appendTo(".suggest-card.develop ul"); - } - - if ($(".suggest-card.develop li").length > 0) { - $(".suggest-card.develop").show(300); - } else { - $('.suggest-card.develop').hide(300); } - - } else { - $('.suggest-card:not(.reference)').hide(300); - } -} - -/** Called by the search input's onkeydown and onkeyup events. - * Handles navigation with keyboard arrows, Enter key to invoke search, - * otherwise invokes search suggestions on key-up event. - * @param e The JS event - * @param kd True if the event is key-down - * @param toroot A string for the site's root path - * @returns True if the event should bubble up - */ -function search_changed(e, kd, toroot) -{ - var currentLang = getLangPref(); - var search = document.getElementById("search_autocomplete"); - var text = search.value.replace(/(^ +)|( +$)/g, ''); - // get the ul hosting the currently selected item - gSelectedColumn = gSelectedColumn >= 0 ? gSelectedColumn : 0; - var $columns = $(".search_filtered_wrapper").find(".search_filtered:visible"); - var $selectedUl = $columns[gSelectedColumn]; - - // show/hide the close button - if (text != '') { - $("#search-close").removeClass("hide"); - } else { - $("#search-close").addClass("hide"); - } - // 27 = esc - if (e.keyCode == 27) { - // close all search results - if (kd) $('#search-close').trigger('click'); - return true; - } - // 13 = enter - else if (e.keyCode == 13) { - if (gSelectedIndex < 0) { - $('.suggest-card').hide(); - if ($("#searchResults").is(":hidden") && (search.value != "")) { - // if results aren't showing (and text not empty), return true to allow search to execute - $('body,html').animate({scrollTop:0}, '500', 'swing'); - return true; - } else { - // otherwise, results are already showing, so allow ajax to auto refresh the results - // and ignore this Enter press to avoid the reload. - return false; - } - } else if (kd && gSelectedIndex >= 0) { - // click the link corresponding to selected item - $("a",$("li",$selectedUl)[gSelectedIndex]).get()[0].click(); - return false; - } - } - // If Google results are showing, return true to allow ajax search to execute - else if ($("#searchResults").is(":visible")) { - // Also, if search_results is scrolled out of view, scroll to top to make results visible - if ((sticky ) && (search.value != "")) { - $('body,html').animate({scrollTop:0}, '500', 'swing'); - } - return true; - } - // 38 UP ARROW - else if (kd && (e.keyCode == 38)) { - // if the next item is a header, skip it - if ($($("li", $selectedUl)[gSelectedIndex-1]).hasClass("header")) { - gSelectedIndex--; - } - if (gSelectedIndex >= 0) { - $('li', $selectedUl).removeClass('jd-selected'); - gSelectedIndex--; - $('li:nth-child('+(gSelectedIndex+1)+')', $selectedUl).addClass('jd-selected'); - // If user reaches top, reset selected column - if (gSelectedIndex < 0) { - gSelectedColumn = -1; - } - } - return false; - } - // 40 DOWN ARROW - else if (kd && (e.keyCode == 40)) { - // if the next item is a header, skip it - if ($($("li", $selectedUl)[gSelectedIndex+1]).hasClass("header")) { - gSelectedIndex++; - } - if ((gSelectedIndex < $("li", $selectedUl).length-1) || - ($($("li", $selectedUl)[gSelectedIndex+1]).hasClass("header"))) { - $('li', $selectedUl).removeClass('jd-selected'); - gSelectedIndex++; - $('li:nth-child('+(gSelectedIndex+1)+')', $selectedUl).addClass('jd-selected'); - } - return false; - } - // Consider left/right arrow navigation - // NOTE: Order of suggest columns are reverse order (index position 0 is on right) - else if (kd && $columns.length > 1 && gSelectedColumn >= 0) { - // 37 LEFT ARROW - // go left only if current column is not left-most column (last column) - if (e.keyCode == 37 && gSelectedColumn < $columns.length - 1) { - $('li', $selectedUl).removeClass('jd-selected'); - gSelectedColumn++; - $selectedUl = $columns[gSelectedColumn]; - // keep or reset the selected item to last item as appropriate - gSelectedIndex = gSelectedIndex > - $("li", $selectedUl).length-1 ? - $("li", $selectedUl).length-1 : gSelectedIndex; - // if the corresponding item is a header, move down - if ($($("li", $selectedUl)[gSelectedIndex]).hasClass("header")) { - gSelectedIndex++; - } - // set item selected - $('li:nth-child('+(gSelectedIndex+1)+')', $selectedUl).addClass('jd-selected'); - return false; - } - // 39 RIGHT ARROW - // go right only if current column is not the right-most column (first column) - else if (e.keyCode == 39 && gSelectedColumn > 0) { - $('li', $selectedUl).removeClass('jd-selected'); - gSelectedColumn--; - $selectedUl = $columns[gSelectedColumn]; - // keep or reset the selected item to last item as appropriate - gSelectedIndex = gSelectedIndex > - $("li", $selectedUl).length-1 ? - $("li", $selectedUl).length-1 : gSelectedIndex; - // if the corresponding item is a header, move down - if ($($("li", $selectedUl)[gSelectedIndex]).hasClass("header")) { - gSelectedIndex++; - } - // set item selected - $('li:nth-child('+(gSelectedIndex+1)+')', $selectedUl).addClass('jd-selected'); return false; - } - } - - // if key-up event and not arrow down/up/left/right, - // read the search query and add suggestions to gMatches - else if (!kd && (e.keyCode != 40) - && (e.keyCode != 38) - && (e.keyCode != 37) - && (e.keyCode != 39)) { - gSelectedIndex = -1; - gMatches = new Array(); - matchedCount = 0; - gGoogleMatches = new Array(); - matchedCountGoogle = 0; - gDocsMatches = new Array(); - matchedCountDocs = 0; - - // Search for Android matches - for (var i=0; i<DATA.length; i++) { - var s = DATA[i]; - if (text.length != 0 && - s.label.toLowerCase().indexOf(text.toLowerCase()) != -1) { - gMatches[matchedCount] = s; - matchedCount++; - } - } - rank_autocomplete_api_results(text, gMatches); - for (var i=0; i<gMatches.length; i++) { - var s = gMatches[i]; - } - - - // Search for Google matches - for (var i=0; i<GOOGLE_DATA.length; i++) { - var s = GOOGLE_DATA[i]; - if (text.length != 0 && - s.label.toLowerCase().indexOf(text.toLowerCase()) != -1) { - gGoogleMatches[matchedCountGoogle] = s; - matchedCountGoogle++; - } - } - rank_autocomplete_api_results(text, gGoogleMatches); - for (var i=0; i<gGoogleMatches.length; i++) { - var s = gGoogleMatches[i]; - } - - highlight_autocomplete_result_labels(text); - - - - // Search for matching JD docs - if (text.length >= 2) { - // match only the beginning of a word - var queryStr = text.toLowerCase(); - - // Search for Training classes - for (var i=0; i<TRAINING_RESOURCES.length; i++) { - // current search comparison, with counters for tag and title, - // used later to improve ranking - var s = TRAINING_RESOURCES[i]; - s.matched_tag = 0; - s.matched_title = 0; - var matched = false; - - // Check if query matches any tags; work backwards toward 1 to assist ranking - for (var j = s.keywords.length - 1; j >= 0; j--) { - // it matches a tag - if (s.keywords[j].toLowerCase().indexOf(queryStr) == 0) { - matched = true; - s.matched_tag = j + 1; // add 1 to index position - } - } - // Don't consider doc title for lessons (only for class landing pages), - // unless the lesson has a tag that already matches - if ((s.lang == currentLang) && - (!(s.type == "training" && s.url.indexOf("index.html") == -1) || matched)) { - // it matches the doc title - if (s.title.toLowerCase().indexOf(queryStr) == 0) { - matched = true; - s.matched_title = 1; - } - } - if (matched) { - gDocsMatches[matchedCountDocs] = s; - matchedCountDocs++; - } - } - - - // Search for API Guides - for (var i=0; i<GUIDE_RESOURCES.length; i++) { - // current search comparison, with counters for tag and title, - // used later to improve ranking - var s = GUIDE_RESOURCES[i]; - s.matched_tag = 0; - s.matched_title = 0; - var matched = false; - - // Check if query matches any tags; work backwards toward 1 to assist ranking - for (var j = s.keywords.length - 1; j >= 0; j--) { - // it matches a tag - if (s.keywords[j].toLowerCase().indexOf(queryStr) == 0) { - - matched = true; - s.matched_tag = j + 1; // add 1 to index position - } - } - // Check if query matches the doc title, but only for current language - if (s.lang == currentLang) { - // if query matches the doc title - if (s.title.toLowerCase().indexOf(queryStr) == 0) { - matched = true; - s.matched_title = 1; - } - } - if (matched) { - gDocsMatches[matchedCountDocs] = s; - matchedCountDocs++; - } - } - - - // Search for Tools Guides - for (var i=0; i<TOOLS_RESOURCES.length; i++) { - // current search comparison, with counters for tag and title, - // used later to improve ranking - var s = TOOLS_RESOURCES[i]; - s.matched_tag = 0; - s.matched_title = 0; - var matched = false; - - // Check if query matches any tags; work backwards toward 1 to assist ranking - for (var j = s.keywords.length - 1; j >= 0; j--) { - // it matches a tag - if (s.keywords[j].toLowerCase().indexOf(queryStr) == 0) { - matched = true; - s.matched_tag = j + 1; // add 1 to index position - } - } - // Check if query matches the doc title, but only for current language - if (s.lang == currentLang) { - // if query matches the doc title - if (s.title.toLowerCase().indexOf(queryStr) == 0) { - matched = true; - s.matched_title = 1; - } - } - if (matched) { - gDocsMatches[matchedCountDocs] = s; - matchedCountDocs++; - } - } - - - // Search for About docs - for (var i=0; i<ABOUT_RESOURCES.length; i++) { - // current search comparison, with counters for tag and title, - // used later to improve ranking - var s = ABOUT_RESOURCES[i]; - s.matched_tag = 0; - s.matched_title = 0; - var matched = false; - - // Check if query matches any tags; work backwards toward 1 to assist ranking - for (var j = s.keywords.length - 1; j >= 0; j--) { - // it matches a tag - if (s.keywords[j].toLowerCase().indexOf(queryStr) == 0) { - matched = true; - s.matched_tag = j + 1; // add 1 to index position - } - } - // Check if query matches the doc title, but only for current language - if (s.lang == currentLang) { - // if query matches the doc title - if (s.title.toLowerCase().indexOf(queryStr) == 0) { - matched = true; - s.matched_title = 1; - } - } - if (matched) { - gDocsMatches[matchedCountDocs] = s; - matchedCountDocs++; - } - } - - - // Search for Design guides - for (var i=0; i<DESIGN_RESOURCES.length; i++) { - // current search comparison, with counters for tag and title, - // used later to improve ranking - var s = DESIGN_RESOURCES[i]; - s.matched_tag = 0; - s.matched_title = 0; - var matched = false; - - // Check if query matches any tags; work backwards toward 1 to assist ranking - for (var j = s.keywords.length - 1; j >= 0; j--) { - // it matches a tag - if (s.keywords[j].toLowerCase().indexOf(queryStr) == 0) { - matched = true; - s.matched_tag = j + 1; // add 1 to index position - } - } - // Check if query matches the doc title, but only for current language - if (s.lang == currentLang) { - // if query matches the doc title - if (s.title.toLowerCase().indexOf(queryStr) == 0) { - matched = true; - s.matched_title = 1; - } - } - if (matched) { - gDocsMatches[matchedCountDocs] = s; - matchedCountDocs++; - } - } - - - // Search for Distribute guides - for (var i=0; i<DISTRIBUTE_RESOURCES.length; i++) { - // current search comparison, with counters for tag and title, - // used later to improve ranking - var s = DISTRIBUTE_RESOURCES[i]; - s.matched_tag = 0; - s.matched_title = 0; - var matched = false; - - // Check if query matches any tags; work backwards toward 1 to assist ranking - for (var j = s.keywords.length - 1; j >= 0; j--) { - // it matches a tag - if (s.keywords[j].toLowerCase().indexOf(queryStr) == 0) { - matched = true; - s.matched_tag = j + 1; // add 1 to index position - } - } - // Check if query matches the doc title, but only for current language - if (s.lang == currentLang) { - // if query matches the doc title - if (s.title.toLowerCase().indexOf(queryStr) == 0) { - matched = true; - s.matched_title = 1; - } - } - if (matched) { - gDocsMatches[matchedCountDocs] = s; - matchedCountDocs++; - } - } - - - // Search for Google guides - for (var i=0; i<GOOGLE_RESOURCES.length; i++) { - // current search comparison, with counters for tag and title, - // used later to improve ranking - var s = GOOGLE_RESOURCES[i]; - s.matched_tag = 0; - s.matched_title = 0; - var matched = false; - - // Check if query matches any tags; work backwards toward 1 to assist ranking - for (var j = s.keywords.length - 1; j >= 0; j--) { - // it matches a tag - if (s.keywords[j].toLowerCase().indexOf(queryStr) == 0) { - matched = true; - s.matched_tag = j + 1; // add 1 to index position - } - } - // Check if query matches the doc title, but only for current language - if (s.lang == currentLang) { - // if query matches the doc title - if (s.title.toLowerCase().indexOf(queryStr) == 0) { - matched = true; - s.matched_title = 1; - } - } - if (matched) { - gDocsMatches[matchedCountDocs] = s; - matchedCountDocs++; - } - } - - - // Search for Samples - for (var i=0; i<SAMPLES_RESOURCES.length; i++) { - // current search comparison, with counters for tag and title, - // used later to improve ranking - var s = SAMPLES_RESOURCES[i]; - s.matched_tag = 0; - s.matched_title = 0; - var matched = false; - // Check if query matches any tags; work backwards toward 1 to assist ranking - for (var j = s.keywords.length - 1; j >= 0; j--) { - // it matches a tag - if (s.keywords[j].toLowerCase().indexOf(queryStr) == 0) { - matched = true; - s.matched_tag = j + 1; // add 1 to index position - } - } - // Check if query matches the doc title, but only for current language - if (s.lang == currentLang) { - // if query matches the doc title.t - if (s.title.toLowerCase().indexOf(queryStr) == 0) { - matched = true; - s.matched_title = 1; - } - } - if (matched) { - gDocsMatches[matchedCountDocs] = s; - matchedCountDocs++; - } - } - - // Search for Preview Guides - for (var i=0; i<PREVIEW_RESOURCES.length; i++) { - // current search comparison, with counters for tag and title, - // used later to improve ranking - var s = PREVIEW_RESOURCES[i]; - s.matched_tag = 0; - s.matched_title = 0; - var matched = false; - - // Check if query matches any tags; work backwards toward 1 to assist ranking - for (var j = s.keywords.length - 1; j >= 0; j--) { - // it matches a tag - if (s.keywords[j].toLowerCase().indexOf(queryStr) == 0) { - matched = true; - s.matched_tag = j + 1; // add 1 to index position - } - } - // Check if query matches the doc title, but only for current language - if (s.lang == currentLang) { - // if query matches the doc title - if (s.title.toLowerCase().indexOf(queryStr) == 0) { - matched = true; - s.matched_title = 1; - } - } - if (matched) { - gDocsMatches[matchedCountDocs] = s; - matchedCountDocs++; - } - } - - // Rank/sort all the matched pages - rank_autocomplete_doc_results(text, gDocsMatches); - } - - // draw the suggestions - sync_selection_table(toroot); - return true; // allow the event to bubble up to the search api - } -} - -/* Order the jd doc result list based on match quality */ -function rank_autocomplete_doc_results(query, matches) { - query = query || ''; - if (!matches || !matches.length) - return; - - var _resultScoreFn = function(match) { - var score = 1.0; - - // if the query matched a tag - if (match.matched_tag > 0) { - // multiply score by factor relative to position in tags list (max of 3) - score *= 3 / match.matched_tag; - - // if it also matched the title - if (match.matched_title > 0) { - score *= 2; - } - } else if (match.matched_title > 0) { - score *= 3; - } - - return score; - }; - - for (var i=0; i<matches.length; i++) { - matches[i].__resultScore = _resultScoreFn(matches[i]); - } - - matches.sort(function(a,b){ - var n = b.__resultScore - a.__resultScore; - if (n == 0) // lexicographical sort if scores are the same - n = (a.label < b.label) ? -1 : 1; - return n; - }); -} - -/* Order the result list based on match quality */ -function rank_autocomplete_api_results(query, matches) { - query = query || ''; - if (!matches || !matches.length) - return; - - // helper function that gets the last occurence index of the given regex - // in the given string, or -1 if not found - var _lastSearch = function(s, re) { - if (s == '') - return -1; - var l = -1; - var tmp; - while ((tmp = s.search(re)) >= 0) { - if (l < 0) l = 0; - l += tmp; - s = s.substr(tmp + 1); - } - return l; - }; - - // helper function that counts the occurrences of a given character in - // a given string - var _countChar = function(s, c) { - var n = 0; - for (var i=0; i<s.length; i++) - if (s.charAt(i) == c) ++n; - return n; - }; - - var queryLower = query.toLowerCase(); - var queryAlnum = (queryLower.match(/\w+/) || [''])[0]; - var partPrefixAlnumRE = new RegExp('\\b' + queryAlnum); - var partExactAlnumRE = new RegExp('\\b' + queryAlnum + '\\b'); - - var _resultScoreFn = function(result) { - // scores are calculated based on exact and prefix matches, - // and then number of path separators (dots) from the last - // match (i.e. favoring classes and deep package names) - var score = 1.0; - var labelLower = result.label.toLowerCase(); - var t; - t = _lastSearch(labelLower, partExactAlnumRE); - if (t >= 0) { - // exact part match - var partsAfter = _countChar(labelLower.substr(t + 1), '.'); - score *= 200 / (partsAfter + 1); - } else { - t = _lastSearch(labelLower, partPrefixAlnumRE); - if (t >= 0) { - // part prefix match - var partsAfter = _countChar(labelLower.substr(t + 1), '.'); - score *= 20 / (partsAfter + 1); - } - } - - return score; - }; - - for (var i=0; i<matches.length; i++) { - // if the API is deprecated, default score is 0; otherwise, perform scoring - if (matches[i].deprecated == "true") { - matches[i].__resultScore = 0; - } else { - matches[i].__resultScore = _resultScoreFn(matches[i]); - } - } - - matches.sort(function(a,b){ - var n = b.__resultScore - a.__resultScore; - if (n == 0) // lexicographical sort if scores are the same - n = (a.label < b.label) ? -1 : 1; - return n; - }); -} - -/* Add emphasis to part of string that matches query */ -function highlight_autocomplete_result_labels(query) { - query = query || ''; - if ((!gMatches || !gMatches.length) && (!gGoogleMatches || !gGoogleMatches.length)) - return; - - var queryLower = query.toLowerCase(); - var queryAlnumDot = (queryLower.match(/[\w\.]+/) || [''])[0]; - var queryRE = new RegExp( - '(' + queryAlnumDot.replace(/\./g, '\\.') + ')', 'ig'); - for (var i=0; i<gMatches.length; i++) { - gMatches[i].__hilabel = gMatches[i].label.replace( - queryRE, '<b>$1</b>'); - } - for (var i=0; i<gGoogleMatches.length; i++) { - gGoogleMatches[i].__hilabel = gGoogleMatches[i].label.replace( - queryRE, '<b>$1</b>'); - } -} - -function search_focus_changed(obj, focused) -{ - if (!focused) { - if(obj.value == ""){ - $("#search-close").addClass("hide"); - } - $(".suggest-card").hide(); - } -} - -function submit_search() { - var query = escapeHTML(document.getElementById('search_autocomplete').value); - location.hash = 'q=' + query; - searchControl.query = query; - searchControl.init(); - searchControl.trackSearchRequest(query); - $("#searchResults").slideDown('slow', setStickyTop); - return false; -} - -function hideResults() { - $("#searchResults").slideUp('fast', setStickyTop); - $("#search-close").addClass("hide"); - location.hash = ''; - - $("#search_autocomplete").val("").blur(); - - // reset the ajax search callback to nothing, so results don't appear unless ENTER - searchControl.reset(); - - return false; -} - -/* ########################################################## */ -/* ################ CUSTOM SEARCH ENGINE ################## */ -/* ########################################################## */ -var searchControl = null; -var dacsearch = dacsearch || {}; - -/** - * The custom search engine API. - * @constructor - */ -dacsearch.CustomSearchEngine = function() { - /** - * The last response from Google CSE. - * @private {Object} - */ - this.resultQuery_ = {}; - - /** @private {?Element} */ - this.searchResultEl_ = null; - - /** @private {?Element} */ - this.searchInputEl_ = null; - - /** @private {string} */ - this.query = ''; -}; - -/** - * Initializes DAC's Google custom search engine. - * @export - */ -dacsearch.CustomSearchEngine.prototype.init = function() { - this.searchResultEl_ = $('#leftSearchControl'); - this.searchResultEl_.empty(); - this.searchInputEl_ = $('#search_autocomplete'); - this.searchInputEl_.focus().val(this.query); - this.getResults_(); - this.bindEvents_(); -}; - - -/** - * Binds the keyup event to the search input. - * @private - */ -dacsearch.CustomSearchEngine.prototype.bindEvents_ = function() { - this.searchInputEl_.keyup(this.debounce_(function(e) { - var code = e.which; - if (code != 13) { - this.query = escapeHTML(this.searchInputEl_.val()); - location.hash = 'q=' + encodeURI(this.query); - this.searchResultEl_.empty(); - this.getResults_(); - } - }.bind(this), 250)); -}; - - -/** - * Resets the search control. - */ -dacsearch.CustomSearchEngine.prototype.reset = function() { - this.query = ''; - this.searchInputEl_.off('keyup'); - this.searchResultEl_.empty(); - this.updateResultTitle_(); -}; - - -/** - * Updates the search query text at the top of the results. - * @private - */ -dacsearch.CustomSearchEngine.prototype.updateResultTitle_ = function() { - $("#searchTitle").html("Results for <em>" + this.query + "</em>"); -}; - - -/** - * Makes the CSE api call and gets the results. - * @param {number=} opt_start The optional start index. - * @private - */ -dacsearch.CustomSearchEngine.prototype.getResults_ = function(opt_start) { - var lang = getLangPref(); - // Fix zh-cn to be zh-CN. - lang = lang.replace(/-\w+/, function(m) { return m.toUpperCase(); }); - var cseUrl = 'https://content.googleapis.com/customsearch/v1?'; - var searchParams = { - cx: '000521750095050289010:zpcpi1ea4s8', - key: 'AIzaSyCFhbGnjW06dYwvRCU8h_zjdpS4PYYbEe8', - q: this.query, - start: opt_start || 1, - num: 6, - hl: lang, - fields: 'queries,items(pagemap,link,title,htmlSnippet,formattedUrl)' - }; - - $.get(cseUrl + $.param(searchParams), function(data) { - this.resultQuery_ = data; - this.renderResults_(data); - this.updateResultTitle_(this.query); - }.bind(this)); -}; - - -/** - * Renders the results. - * @private - */ -dacsearch.CustomSearchEngine.prototype.renderResults_ = function(results) { - var el = this.searchResultEl_; - - if (!results.items) { - el.append($('<div>').text('No results')); - return; - } - - for (var i = 0; i < results.items.length; i++) { - var item = results.items[i]; - var hasImage = item.pagemap && item.pagemap.cse_thumbnail; - var sectionMatch = item.link.match(/developer\.android\.com\/(\w*)/); - var section = (sectionMatch && sectionMatch[1]) || 'blog'; - - var entry = $('<div>').addClass('dac-custom-search-entry cols'); - - if (hasImage) { - var image = item.pagemap.cse_thumbnail[0]; - entry.append($('<div>').addClass('col-1of6') - .append($('<div>').addClass('dac-custom-search-image').css( - 'background-image', 'url(' + image.src + ')'))); - } - - var linkTitleEl = $('<a>').text(item.title).attr('href', item.link); - linkTitleEl.click(function(e) { - ga('send', 'event', 'Google Custom Search', - 'clicked: ' + linkTitleEl.attr('href'), - 'query: ' + $("#search_autocomplete").val().toLowerCase()); - }); - - var linkUrlEl = $('<a>').addClass('dac-custom-search-link').text( - item.formattedUrl).attr('href', item.link); - linkUrlEl.click(function(e) { - ga('send', 'event', 'Google Custom Search', - 'clicked: ' + linkUrlEl.attr('href'), - 'query: ' + $("#search_autocomplete").val().toLowerCase()); + }; }); - - - entry.append($('<div>').addClass(hasImage ? 'col-5of6' : 'col-6of6') - .append($('<p>').addClass('dac-custom-search-section').text(section)) - .append( - linkTitleEl.wrap('<h2>').parent().addClass('dac-custom-search-title')) - .append($('<p>').addClass('dac-custom-search-snippet') - .html(item.htmlSnippet.replace(/<br>/g, ''))).append(linkUrlEl)); - - el.append(entry); - } - - if ($('#dac-custom-search-load-more')) { - $('#dac-custom-search-load-more').remove(); - } - - if (results.queries.nextPage) { - var loadMoreButton = $('<button id="dac-custom-search-load-more">') - .addClass('dac-custom-search-load-more') - .text('Load more') - .click(function() { - this.loadMoreResults_(); - }.bind(this)); - - el.append(loadMoreButton); - } -}; - - -/** - * Loads more results. - * @private - */ -dacsearch.CustomSearchEngine.prototype.loadMoreResults_ = function() { - this.query = this.resultQuery_.queries.request[0].searchTerms; - var start = this.resultQuery_.queries.nextPage[0].startIndex; - var loadMoreButton = this.searchResultEl_.find( - '#dac-custom-search-load-more'); - loadMoreButton.text('Loading more...'); - this.getResults_(start); - this.trackSearchRequest(this.query + ' startIndex = ' + start); -}; - - -/** - * Tracks a search request. - * @param {string} query The query for the request, - * includes start index if loading more results. - */ -dacsearch.CustomSearchEngine.prototype.trackSearchRequest = function(query) { - ga('send', 'event', 'Google Custom Search Submit', 'submit search query', - 'query: ' + query); -}; - - -/** - * Returns a function, that, as long as it continues to be invoked, will not - * be triggered. The function will be called after it stops being called for - * N milliseconds. - * @param {Function} func The function to debounce. - * @param {number} wait The number of milliseconds to wait before calling the function. - * @private - */ -dacsearch.CustomSearchEngine.prototype.debounce_ = function(func, wait) { - var timeout; - return function() { - var context = this, args = arguments; - var later = function() { - timeout = null; - func.apply(context, args); - }; - clearTimeout(timeout); - timeout = setTimeout(later, wait); }; -}; - - -google.setOnLoadCallback(function(){ - searchControl = new dacsearch.CustomSearchEngine(); - if (location.hash.indexOf("q=") == -1) { - // if there's no query in the url, don't search and make sure results are hidden - $('#searchResults').hide(); - return; - } else { - // first time loading search results for this page - searchControl.query = escapeHTML(decodeURI(location.hash.split('q=')[1])); - searchControl.init(); - searchControl.trackSearchRequest(searchControl.query); - $('#searchResults').slideDown('slow', setStickyTop); - $("#search-close").removeClass("hide"); - } -}, true); - -/* Adjust the scroll position to account for sticky header, only if the hash matches an id. - This does not handle <a name=""> tags. Some CSS fixes those, but only for reference docs. */ -function offsetScrollForSticky() { - // Ignore if there's no search bar (some special pages have no header) - if ($("#search-container").length < 1) return; - - var hash = escape(location.hash.substr(1)); - var $matchingElement = $("#"+hash); - // Sanity check that there's an element with that ID on the page - if ($matchingElement.length) { - // If the position of the target element is near the top of the page (<20px, where we expect it - // to be because we need to move it down 60px to become in view), then move it down 60px - if (Math.abs($matchingElement.offset().top - $(window).scrollTop()) < 20) { - $(window).scrollTop($(window).scrollTop() - 60); - } - } -} - -// when an event on the browser history occurs (back, forward, load) requery hash and do search -$(window).hashchange( function(){ - // Ignore if there's no search bar (some special pages have no header) - if ($("#search-container").length < 1) return; - - // If the hash isn't a search query or there's an error in the query, - // then adjust the scroll position to account for sticky header, then exit. - if ((location.hash.indexOf("q=") == -1) || (searchControl.query == "undefined")) { - // If the results pane is open, close it. - if (!$("#searchResults").is(":hidden")) { - hideResults(); - } - offsetScrollForSticky(); - return; - } - - $('#searchResults').slideDown('slow', setStickyTop); - $("#search_autocomplete").focus(); - $("#search-close").removeClass("hide"); -}); - -/* returns the given string with all HTML brackets converted to entities - TODO: move this to the site's JS library */ -function escapeHTML(string) { - return string.replace(/</g,"<") - .replace(/>/g,">"); -} - - - - + function css(el, prop) { + return parseInt($.css(el[0], prop)) || 0; + }; + function width(el) { + return el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight'); + }; + function height(el) { + return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom'); + }; +})(jQuery); /* ######################################################## */ /* ################# JAVADOC REFERENCE ################### */ /* ######################################################## */ -/* Initialize some droiddoc stuff, but only if we're in the reference */ -if (location.pathname.indexOf("/reference") == 0) { - if(!(location.pathname.indexOf("/reference-gms/packages.html") == 0) - && !(location.pathname.indexOf("/reference-gcm/packages.html") == 0) - && !(location.pathname.indexOf("/reference/com/google") == 0)) { - $(document).ready(function() { - // init available apis based on user pref - changeApiLevel(); - initSidenavHeightResize() - }); - } -} + var API_LEVEL_COOKIE = "api_level"; var minLevel = 1; var maxLevel = 1; -/******* SIDENAV DIMENSIONS ************/ - - function initSidenavHeightResize() { - // Change the drag bar size to nicely fit the scrollbar positions - var $dragBar = $(".ui-resizable-s"); - $dragBar.css({'width': $dragBar.parent().width() - 5 + "px"}); - - $( "#resize-packages-nav" ).resizable({ - containment: "#nav-panels", - handles: "s", - alsoResize: "#packages-nav", - resize: function(event, ui) { resizeNav(); }, /* resize the nav while dragging */ - stop: function(event, ui) { saveNavPanels(); } /* once stopped, save the sizes to cookie */ - }); - - } - -function updateSidenavFixedWidth() { - if (!sticky) return; - $('#devdoc-nav').css({ - 'width' : $('#side-nav').css('width'), - 'margin' : $('#side-nav').css('margin') - }); - $('#devdoc-nav a.totop').css({'display':'block','width':$("#nav").innerWidth()+'px'}); - - initSidenavHeightResize(); -} - -function updateSidenavFullscreenWidth() { - if (!sticky) return; - $('#devdoc-nav').css({ - 'width' : $('#side-nav').css('width'), - 'margin' : $('#side-nav').css('margin') - }); - $('#devdoc-nav .totop').css({'left': 'inherit'}); - - initSidenavHeightResize(); -} - function buildApiLevelSelector() { - maxLevel = SINCE_DATA.length; + maxLevel = API_LEVELS.length; var userApiLevel = parseInt(readCookie(API_LEVEL_COOKIE)); userApiLevel = userApiLevel == 0 ? maxLevel : userApiLevel; // If there's no cookie (zero), use the max by default @@ -2933,19 +874,20 @@ function buildApiLevelSelector() { minLevel = maxLevel; } var select = $("#apiLevelSelector").html("").change(changeApiLevel); - for (var i = maxLevel-1; i >= 0; i--) { - var option = $("<option />").attr("value",""+SINCE_DATA[i]).append(""+SINCE_DATA[i]); - // if (SINCE_DATA[i] < minLevel) option.addClass("absent"); // always false for strings (codenames) + for (var i = maxLevel - 1; i >= 0; i--) { + var option = $("<option />").attr("value", "" + API_LEVELS[i]).append("" + API_LEVELS[i]); + // if (API_LEVELS[i] < minLevel) option.addClass("absent"); // always false for strings (codenames) select.append(option); } // get the DOM element and use setAttribute cuz IE6 fails when using jquery .attr('selected',true) - var selectedLevelItem = $("#apiLevelSelector option[value='"+userApiLevel+"']").get(0); - selectedLevelItem.setAttribute('selected',true); + var selectedLevelItem = $("#apiLevelSelector option[value='" + userApiLevel + "']").get(0); + selectedLevelItem.setAttribute('selected', true); } function changeApiLevel() { - maxLevel = SINCE_DATA.length; + maxLevel = API_LEVELS.length; + minLevel = parseInt($('#doc-api-level').attr('class')); var selectedLevel = maxLevel; selectedLevel = parseInt($("#apiLevelSelector option:selected").val()); @@ -2954,30 +896,20 @@ function changeApiLevel() { writeCookie(API_LEVEL_COOKIE, selectedLevel, null); if (selectedLevel < minLevel) { - var thing = ($("#jd-header").html().indexOf("package") != -1) ? "package" : "class"; - $("#naMessage").show().html("<div><p><strong>This " + thing - + " requires API level " + minLevel + " or higher.</strong></p>" - + "<p>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.</p>" - + "<p>For more information about specifying the API level your app requires, " - + "read <a href='" + toRoot + "training/basics/supporting-devices/platforms.html'" - + ">Supporting Different Platform Versions</a>.</p>" - + "<input type='button' value='OK, make this page visible' " - + "title='Change the API level to " + minLevel + "' " - + "onclick='$(\"#apiLevelSelector\").val(\"" + minLevel + "\");changeApiLevel();' />" - + "</div>"); - } 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();'); } } function toggleVisisbleApis(selectedLevel, context) { - var apis = $(".api",context); + var apis = $(".api", context); apis.each(function(i) { var obj = $(this); var className = obj.attr("class"); - var apiLevelIndex = className.lastIndexOf("-")+1; + var apiLevelIndex = className.lastIndexOf("-") + 1; var apiLevelEndIndex = className.indexOf(" ", apiLevelIndex); apiLevelEndIndex = apiLevelEndIndex != -1 ? apiLevelEndIndex : className.length; var apiLevel = className.substring(apiLevelIndex, apiLevelEndIndex); @@ -2990,236 +922,21 @@ function toggleVisisbleApis(selectedLevel, context) { var selectedLevelNum = parseInt(selectedLevel) var apiLevelNum = parseInt(apiLevel); if (isNaN(apiLevelNum)) { - apiLevelNum = maxLevel; + apiLevelNum = maxLevel; } // Grey things out that aren't available and give a tooltip title if (apiLevelNum > selectedLevelNum) { - obj.addClass("absent").attr("title","Requires API Level \"" - + apiLevel + "\" or higher. To reveal, change the target API level " - + "above the left navigation."); - } - else obj.removeClass("absent").removeAttr("title"); + obj.addClass("absent").attr("title", "Requires API Level \"" + + apiLevel + "\" or higher. To reveal, change the target API level " + + "above the left navigation."); + } else obj.removeClass("absent").removeAttr("title"); }); } - - - /* ################# SIDENAV TREE VIEW ################### */ - -function new_node(me, mom, text, link, children_data, api_level) -{ - var node = new Object(); - node.children = Array(); - node.children_data = children_data; - node.depth = mom.depth + 1; - - node.li = document.createElement("li"); - mom.get_children_ul().appendChild(node.li); - - node.label_div = document.createElement("div"); - node.label_div.className = "label"; - if (api_level != null) { - $(node.label_div).addClass("api"); - $(node.label_div).addClass("api-level-"+api_level); - } - node.li.appendChild(node.label_div); - - if (children_data != null) { - node.expand_toggle = document.createElement("a"); - node.expand_toggle.href = "javascript:void(0)"; - node.expand_toggle.onclick = function() { - if (node.expanded) { - $(node.get_children_ul()).slideUp("fast"); - node.plus_img.src = me.toroot + "assets/images/triangle-closed-small.png"; - node.expanded = false; - } else { - expand_node(me, node); - } - }; - node.label_div.appendChild(node.expand_toggle); - - node.plus_img = document.createElement("img"); - node.plus_img.src = me.toroot + "assets/images/triangle-closed-small.png"; - node.plus_img.className = "plus"; - node.plus_img.width = "8"; - node.plus_img.border = "0"; - node.expand_toggle.appendChild(node.plus_img); - - node.expanded = false; - } - - var a = document.createElement("a"); - node.label_div.appendChild(a); - node.label = document.createTextNode(text); - a.appendChild(node.label); - if (link) { - a.href = me.toroot + link; - } else { - if (children_data != null) { - a.className = "nolink"; - a.href = "javascript:void(0)"; - a.onclick = node.expand_toggle.onclick; - // This next line shouldn't be necessary. I'll buy a beer for the first - // person who figures out how to remove this line and have the link - // toggle shut on the first try. --joeo@android.com - node.expanded = false; - } - } - - - node.children_ul = null; - node.get_children_ul = function() { - if (!node.children_ul) { - node.children_ul = document.createElement("ul"); - node.children_ul.className = "children_ul"; - node.children_ul.style.display = "none"; - node.li.appendChild(node.children_ul); - } - return node.children_ul; - }; - - return node; -} - - - - -function expand_node(me, node) -{ - if (node.children_data && !node.expanded) { - if (node.children_visited) { - $(node.get_children_ul()).slideDown("fast"); - } else { - get_node(me, node); - if ($(node.label_div).hasClass("absent")) { - $(node.get_children_ul()).addClass("absent"); - } - $(node.get_children_ul()).slideDown("fast"); - } - node.plus_img.src = me.toroot + "assets/images/triangle-opened-small.png"; - node.expanded = true; - - // perform api level toggling because new nodes are new to the DOM - var selectedLevel = $("#apiLevelSelector option:selected").val(); - toggleVisisbleApis(selectedLevel, "#side-nav"); - } -} - -function get_node(me, mom) -{ - mom.children_visited = true; - for (var i in mom.children_data) { - var node_data = mom.children_data[i]; - mom.children[i] = new_node(me, mom, node_data[0], node_data[1], - node_data[2], node_data[3]); - } -} - -function this_page_relative(toroot) -{ - var full = document.location.pathname; - var file = ""; - if (toroot.substr(0, 1) == "/") { - if (full.substr(0, toroot.length) == toroot) { - return full.substr(toroot.length); - } else { - // the file isn't under toroot. Fail. - return null; - } - } else { - if (toroot != "./") { - toroot = "./" + toroot; - } - do { - if (toroot.substr(toroot.length-3, 3) == "../" || toroot == "./") { - var pos = full.lastIndexOf("/"); - file = full.substr(pos) + file; - full = full.substr(0, pos); - toroot = toroot.substr(0, toroot.length-3); - } - } while (toroot != "" && toroot != "/"); - return file.substr(1); - } -} - -function find_page(url, data) -{ - var nodes = data; - var result = null; - for (var i in nodes) { - var d = nodes[i]; - if (d[1] == url) { - return new Array(i); - } - else if (d[2] != null) { - result = find_page(url, d[2]); - if (result != null) { - return (new Array(i).concat(result)); - } - } - } - return null; -} - -function init_default_navtree(toroot) { - // load json file for navtree data - $.getScript(toRoot + 'navtree_data.js', function(data, textStatus, jqxhr) { - // when the file is loaded, initialize the tree - if(jqxhr.status === 200) { - init_navtree("tree-list", toroot, NAVTREE_DATA); - } - }); - - // perform api level toggling because because the whole tree is new to the DOM - var selectedLevel = $("#apiLevelSelector option:selected").val(); - toggleVisisbleApis(selectedLevel, "#side-nav"); -} - -function init_navtree(navtree_id, toroot, root_nodes) -{ - var me = new Object(); - me.toroot = toroot; - me.node = new Object(); - - me.node.li = document.getElementById(navtree_id); - me.node.children_data = root_nodes; - me.node.children = new Array(); - me.node.children_ul = document.createElement("ul"); - me.node.get_children_ul = function() { return me.node.children_ul; }; - //me.node.children_ul.className = "children_ul"; - me.node.li.appendChild(me.node.children_ul); - me.node.depth = 0; - - get_node(me, me.node); - - me.this_page = this_page_relative(toroot); - me.breadcrumbs = find_page(me.this_page, root_nodes); - if (me.breadcrumbs != null && me.breadcrumbs.length != 0) { - var mom = me.node; - for (var i in me.breadcrumbs) { - var j = me.breadcrumbs[i]; - mom = mom.children[j]; - expand_node(me, mom); - } - mom.label_div.className = mom.label_div.className + " selected"; - addLoadEvent(function() { - scrollIntoView("nav-tree"); - }); - } -} - - - - - - - - /* TODO: eliminate redundancy with non-google functions */ -function init_google_navtree(navtree_id, toroot, root_nodes) -{ +function init_google_navtree(navtree_id, toroot, root_nodes) { var me = new Object(); me.toroot = toroot; me.node = new Object(); @@ -3240,8 +957,7 @@ function init_google_navtree(navtree_id, toroot, root_nodes) get_google_node(me, me.node); } -function new_google_node(me, mom, text, link, children_data, api_level) -{ +function new_google_node(me, mom, text, link, children_data, api_level) { var node = new Object(); var child; node.children = Array(); @@ -3259,28 +975,25 @@ function new_google_node(me, mom, text, link, children_data, api_level) mom.get_children_ul().appendChild(node.li); - - if(link) { + if (link) { child = document.createElement("a"); - } - else { + } else { child = document.createElement("span"); child.className = "tree-list-subtitle"; } if (children_data != null) { - node.li.className="nav-section"; + node.li.className = "nav-section"; node.label_div = document.createElement("div"); node.label_div.className = "nav-section-header-ref"; node.li.appendChild(node.label_div); get_google_node(me, node); node.label_div.appendChild(child); - } - else { + } else { node.li.appendChild(child); } - if(link) { + if (link) { child.href = me.toroot + link; } node.label = document.createTextNode(text); @@ -3291,27 +1004,21 @@ function new_google_node(me, mom, text, link, children_data, api_level) return node; } -function get_google_node(me, mom) -{ +function get_google_node(me, mom) { mom.children_visited = true; var linkText; for (var i in mom.children_data) { var node_data = mom.children_data[i]; linkText = node_data[0]; - if(linkText.match("^"+"com.google.android")=="com.google.android"){ + if (linkText.match("^" + "com.google.android") == "com.google.android") { linkText = linkText.substr(19, linkText.length); } - mom.children[i] = new_google_node(me, mom, linkText, node_data[1], - node_data[2], node_data[3]); + mom.children[i] = new_google_node(me, mom, linkText, node_data[1], + node_data[2], node_data[3]); } } - - - - - /****** NEW version of script to build google and sample navs dynamically ******/ // TODO: update Google reference docs to tolerate this new implementation @@ -3321,9 +1028,8 @@ var NODE_GROUP = 2; var NODE_TAGS = 3; var NODE_CHILDREN = 4; -function init_google_navtree2(navtree_id, data) -{ - var $containerUl = $("#"+navtree_id); +function init_google_navtree2(navtree_id, data) { + var $containerUl = $("#" + navtree_id); for (var i in data) { var node_data = data[i]; $containerUl.append(new_google_node2(node_data)); @@ -3332,23 +1038,22 @@ function init_google_navtree2(navtree_id, data) // Make all third-generation list items 'sticky' to prevent them from collapsing $containerUl.find('li li li.nav-section').addClass('sticky'); - initExpandableNavItems("#"+navtree_id); + initExpandableNavItems("#" + navtree_id); } -function new_google_node2(node_data) -{ +function new_google_node2(node_data) { var linkText = node_data[NODE_NAME]; - if(linkText.match("^"+"com.google.android")=="com.google.android"){ + if (linkText.match("^" + "com.google.android") == "com.google.android") { linkText = linkText.substr(19, linkText.length); } var $li = $('<li>'); var $a; if (node_data[NODE_HREF] != null) { - $a = $('<a href="' + toRoot + node_data[NODE_HREF] + '" title="' + linkText + '" >' - + linkText + '</a>'); + $a = $('<a href="' + toRoot + node_data[NODE_HREF] + '" title="' + linkText + '" >' + + linkText + '</a>'); } else { - $a = $('<a href="#" onclick="return false;" title="' + linkText + '" >' - + linkText + '/</a>'); + $a = $('<a href="#" onclick="return false;" title="' + linkText + '" >' + + linkText + '/</a>'); } var $childUl = $('<ul>'); if (node_data[NODE_CHILDREN] != null) { @@ -3367,16 +1072,6 @@ function new_google_node2(node_data) return $li; } - - - - - - - - - - function showGoogleRefTree() { init_default_google_navtree(toRoot); init_default_gcm_navtree(toRoot); @@ -3385,49 +1080,22 @@ function showGoogleRefTree() { function init_default_google_navtree(toroot) { // load json file for navtree data $.getScript(toRoot + 'gms_navtree_data.js', function(data, textStatus, jqxhr) { - // when the file is loaded, initialize the tree - if(jqxhr.status === 200) { - init_google_navtree("gms-tree-list", toroot, GMS_NAVTREE_DATA); - highlightSidenav(); - resizeNav(); - } + // when the file is loaded, initialize the tree + if (jqxhr.status === 200) { + init_google_navtree("gms-tree-list", toroot, GMS_NAVTREE_DATA); + highlightSidenav(); + } }); } function init_default_gcm_navtree(toroot) { // load json file for navtree data $.getScript(toRoot + 'gcm_navtree_data.js', function(data, textStatus, jqxhr) { - // when the file is loaded, initialize the tree - if(jqxhr.status === 200) { - init_google_navtree("gcm-tree-list", toroot, GCM_NAVTREE_DATA); - highlightSidenav(); - resizeNav(); - } - }); -} - -function showSamplesRefTree() { - init_default_samples_navtree(toRoot); -} - -function init_default_samples_navtree(toroot) { - // load json file for navtree data - $.getScript(toRoot + 'samples_navtree_data.js', function(data, textStatus, jqxhr) { - // when the file is loaded, initialize the tree - if(jqxhr.status === 200) { - // hack to remove the "about the samples" link then put it back in - // after we nuke the list to remove the dummy static list of samples - var $firstLi = $("#nav.samples-nav > li:first-child").clone(); - $("#nav.samples-nav").empty(); - $("#nav.samples-nav").append($firstLi); - - init_google_navtree2("nav.samples-nav", SAMPLES_NAVTREE_DATA); - highlightSidenav(); - resizeNav(); - if ($("#jd-content #samples").length) { - showSamples(); - } - } + // when the file is loaded, initialize the tree + if (jqxhr.status === 200) { + init_google_navtree("gcm-tree-list", toroot, GCM_NAVTREE_DATA); + highlightSidenav(); + } }); } @@ -3439,25 +1107,25 @@ function init_default_samples_navtree(toroot) { * 'null' to simply toggle. */ function toggleInherited(linkObj, expand) { - var base = linkObj.getAttribute("id"); - var list = document.getElementById(base + "-list"); - var summary = document.getElementById(base + "-summary"); - var trigger = document.getElementById(base + "-trigger"); - var a = $(linkObj); - if ( (expand == null && a.hasClass("closed")) || expand ) { - list.style.display = "none"; - summary.style.display = "block"; - trigger.src = toRoot + "assets/images/styles/disclosure_up.png"; - a.removeClass("closed"); - a.addClass("opened"); - } else if ( (expand == null && a.hasClass("opened")) || (expand == false) ) { - list.style.display = "block"; - summary.style.display = "none"; - trigger.src = toRoot + "assets/images/styles/disclosure_down.png"; - a.removeClass("opened"); - a.addClass("closed"); - } - return false; + var base = linkObj.getAttribute("id"); + var list = document.getElementById(base + "-list"); + var summary = document.getElementById(base + "-summary"); + var trigger = document.getElementById(base + "-trigger"); + var a = $(linkObj); + if ((expand == null && a.hasClass("closed")) || expand) { + list.style.display = "none"; + summary.style.display = "block"; + trigger.src = toRoot + "assets/images/styles/disclosure_up.png"; + a.removeClass("closed"); + a.addClass("opened"); + } else if ((expand == null && a.hasClass("opened")) || (expand == false)) { + list.style.display = "block"; + summary.style.display = "none"; + trigger.src = toRoot + "assets/images/styles/disclosure_down.png"; + a.removeClass("opened"); + a.addClass("closed"); + } + return false; } /* Toggle all inherited classes in a single table (e.g. all inherited methods) @@ -3469,12 +1137,12 @@ function toggleAllInherited(linkObj, expand) { var a = $(linkObj); var table = $(a.parent().parent().parent()); // ugly way to get table/tbody var expandos = $(".jd-expando-trigger", table); - if ( (expand == null && a.text() == "[Expand]") || expand ) { + if ((expand == null && a.text() == "[Expand]") || expand) { expandos.each(function(i) { toggleInherited(this, true); }); a.text("[Collapse]"); - } else if ( (expand == null && a.text() == "[Collapse]") || (expand == false) ) { + } else if ((expand == null && a.text() == "[Collapse]") || (expand == false)) { expandos.each(function(i) { toggleInherited(this, false); }); @@ -3511,25 +1179,19 @@ function ensureAllInheritedExpanded() { $("#toggleAllClassInherited").text("[Collapse All]"); } - /* HANDLE KEY EVENTS * - Listen for Ctrl+F (Cmd on Mac) and expand all inherited members (to aid page search) */ var agent = navigator['userAgent'].toLowerCase(); var mac = agent.indexOf("macintosh") != -1; -$(document).keydown( function(e) { -var control = mac ? e.metaKey && !e.ctrlKey : e.ctrlKey; // get ctrl key +$(document).keydown(function(e) { + var control = mac ? e.metaKey && !e.ctrlKey : e.ctrlKey; // get ctrl key if (control && e.which == 70) { // 70 is "F" ensureAllInheritedExpanded(); } }); - - - - - /* On-demand functions */ /** Move sample code line numbers out of PRE block and into non-copyable column */ @@ -3553,40 +1215,39 @@ function initCodeLineNumbers() { // highlight the line when hovering on the number $("#codesample-line-numbers a.number").mouseover(function() { var id = $(this).attr('href'); - $(id).css('background','#e7e7e7'); + $(id).css('background', '#e7e7e7'); }); $("#codesample-line-numbers a.number").mouseout(function() { var id = $(this).attr('href'); - $(id).css('background','none'); + $(id).css('background', 'none'); }); }); } // create SHIFT key binder to avoid the selectText method when selecting multiple lines var shifted = false; -$(document).bind('keyup keydown', function(e){shifted = e.shiftKey; return true;} ); +$(document).bind('keyup keydown', function(e) { + shifted = e.shiftKey; return true; +}); // courtesy of jasonedelman.com function selectText(element) { - var doc = document - , range, selection - ; - if (doc.body.createTextRange) { //ms - range = doc.body.createTextRange(); - range.moveToElementText(element); - range.select(); - } else if (window.getSelection) { //all others - selection = window.getSelection(); - range = doc.createRange(); - range.selectNodeContents(element); - selection.removeAllRanges(); - selection.addRange(range); - } + var doc = document , + range, selection + ; + if (doc.body.createTextRange) { //ms + range = doc.body.createTextRange(); + range.moveToElementText(element); + range.select(); + } else if (window.getSelection) { //all others + selection = window.getSelection(); + range = doc.createRange(); + range.selectNodeContents(element); + selection.removeAllRanges(); + selection.addRange(range); + } } - - - /** Display links and other information about samples that match the group specified by the URL */ function showSamples() { @@ -3597,16 +1258,18 @@ function showSamples() { $selectedLi = $("#nav li.selected"); $selectedLi.children("ul").children("li").each(function() { - var $li = $("<li>").append($(this).find("a").first().clone()); - $ul.append($li); + var $li = $("<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); }); $("#samples").append($ul); } - - /* ########################################################## */ /* ################### RESOURCE CARDS ##################### */ /* ########################################################## */ @@ -3615,78 +1278,75 @@ function showSamples() { jd_tag_helpers.js and the *_unified_data.js to be loaded. */ (function() { - // Prevent the same resource from being loaded more than once per page. - var addedPageResources = {}; - $(document).ready(function() { // Need to initialize hero carousel before other sections for dedupe // to work correctly. $('[data-carousel-query]').dacCarouselQuery(); - $('.resource-widget').each(function() { - initResourceWidget(this); - }); - - /* Pass the line height to ellipsisfade() to adjust the height of the - text container to show the max number of lines possible, without - showing lines that are cut off. This works with the css ellipsis - classes to fade last text line and apply an ellipsis char. */ - - //card text currently uses 20px line height. - var lineHeight = 20; - $('.card-info .text').ellipsisfade(lineHeight); + // Iterate over all instances and initialize a resource widget. + $('.resource-widget').resourceWidget(); }); - /* - Three types of resource layouts: - Flow - Uses a fixed row-height flow using float left style. - Carousel - Single card slideshow all same dimension absolute. - Stack - Uses fixed columns and flexible element height. - */ - function initResourceWidget(widget) { - var $widget = $(widget); - var isFlow = $widget.hasClass('resource-flow-layout'), - isCarousel = $widget.hasClass('resource-carousel-layout'), - isStack = $widget.hasClass('resource-stack-layout'); - - // remove illegal col-x class which is not relevant anymore thanks to responsive styles. - var m = $widget.get(0).className.match(/\bcol-(\d+)\b/); - if (m && !$widget.is('.cols > *')) { - $widget.removeClass('col-' + m[1]); - } - - var opts = { - cardSizes: ($widget.data('cardsizes') || '').split(','), - maxResults: parseInt($widget.data('maxresults') || '100', 10), - initialResults: $widget.data('initialResults'), - itemsPerPage: $widget.data('itemsperpage'), - sortOrder: $widget.data('sortorder'), - query: $widget.data('query'), - section: $widget.data('section'), + $.fn.widgetOptions = function() { + return { + cardSizes: (this.data('cardsizes') || '').split(','), + maxResults: parseInt(this.data('maxresults'), 10) || Infinity, + initialResults: this.data('initialResults'), + itemsPerPage: this.data('itemsPerPage'), + sortOrder: this.data('sortorder'), + query: this.data('query'), + section: this.data('section'), /* Added by LFL 6/6/14 */ - resourceStyle: $widget.data('resourcestyle') || 'card', - stackSort: $widget.data('stacksort') || 'true' + resourceStyle: this.data('resourcestyle') || 'card', + stackSort: this.data('stacksort') || 'true', + // For filter based resources + allowDuplicates: this.data('allow-duplicates') || 'false' }; + }; - // run the search for the set of resources to show + $.fn.deprecateOldGridStyles = function() { + var m = this.get(0).className.match(/\bcol-(\d+)\b/); + if (m && !this.is('.cols > *')) { + this.removeClass('col-' + m[1]); + } + return this; + } + + /* + * Three types of resource layouts: + * Flow - Uses a fixed row-height flow using float left style. + * Carousel - Single card slideshow all same dimension absolute. + * Stack - Uses fixed columns and flexible element height. + */ + function initResourceWidget(widget, resources, opts) { + var $widget = $(widget).deprecateOldGridStyles(); + var isFlow = $widget.hasClass('resource-flow-layout'); + var isCarousel = $widget.hasClass('resource-carousel-layout'); + var isStack = $widget.hasClass('resource-stack-layout'); + + opts = opts || $widget.widgetOptions(); + resources = resources || metadata.query(opts); - var resources = buildResourceList(opts); + if (opts.maxResults !== undefined) { + resources = resources.slice(0, opts.maxResults); + } if (isFlow) { drawResourcesFlowWidget($widget, opts, resources); } else if (isCarousel) { drawResourcesCarouselWidget($widget, opts, resources); } else if (isStack) { - /* 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*/); + opts.numStacks = $widget.data('numstacks'); + drawResourcesStackWidget($widget, opts, resources); } } + $.fn.resourceWidget = function(resources, options) { + return this.each(function() { + initResourceWidget(this, resources, options); + }); + }; + /* Initializes a Resource Carousel Widget */ function drawResourcesCarouselWidget($widget, opts, resources) { $widget.empty(); @@ -3696,15 +1356,15 @@ function showSamples() { .append($('<a>').addClass('slideshow-prev').text('Prev')) .append($('<a>').addClass('slideshow-next').text('Next')); - var css = { 'width': $widget.width() + 'px', - 'height': $widget.height() + 'px' }; + var css = {'width': $widget.width() + 'px', + 'height': $widget.height() + 'px'}; var $ul = $('<ul>'); for (var i = 0; i < resources.length; ++i) { var $card = $('<a>') .attr('href', cleanUrl(resources[i].url)) - .decorateResourceCard(resources[i],plusone); + .decorateResourceCard(resources[i], plusone); $('<li>').css(css) .append($card) @@ -3720,7 +1380,7 @@ function showSamples() { btnPrev: '.slideshow-prev', btnNext: '.slideshow-next' }); - }; + } /* Initializes a Resource Card Stack Widget (column-based layout) Modified by LFL 6/6/14 @@ -3732,7 +1392,6 @@ function showSamples() { var cards = $widget.find('.resource-card').detach().toArray(); var numStacks = opts.numStacks || 1; var $stacks = []; - var urlString; for (var i = 0; i < numStacks; ++i) { $stacks[i] = $('<div>').addClass('resource-card-stack') @@ -3743,21 +1402,21 @@ function showSamples() { // Extract any subsections that are actually resource cards if (sections) { - for (var i = 0; i < sections.length; ++i) { + for (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] + .decorateResourceCard(sections[i].resource, plusone)[0] ); } else { cards.push( $('<div>') .addClass('resource-card section-card-menu') - .decorateResourceSection(sections[i],plusone)[0] + .decorateResourceSection(sections[i], plusone)[0] ); } } @@ -3765,7 +1424,7 @@ function showSamples() { cards = cards.concat(sectionResources); - for (var i = 0; i < resources.length; ++i) { + for (i = 0; i < resources.length; ++i) { var $card = createResourceElement(resources[i], opts); if (opts.resourceStyle.indexOf('related') > -1) { @@ -3775,8 +1434,8 @@ function showSamples() { cards.push($card[0]); } - if (opts.stackSort != 'false') { - for (var i = 0; i < cards.length; ++i) { + if (opts.stackSort !== 'false') { + for (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(); @@ -3793,8 +1452,7 @@ function showSamples() { $stacks[minIndex].append($(cards[i])); } } - - }; + } /* Create a resource card using the given resource object and a list of html @@ -3807,7 +1465,7 @@ function showSamples() { // 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') { + if (opts.resourceStyle === 'generic') { $el = $('<div>') .addClass('resource') .attr('href', cleanUrl(resource.url)) @@ -3833,39 +1491,54 @@ function showSamples() { column.addClass('col-tablet-1of1'); } if (cardWidth < 18) { - column.addClass('col-mobile-1of1') + column.addClass('col-mobile-1of1'); } return column; } /* Initializes a flow widget, see distribute.scss for generating accompanying css */ function drawResourcesFlowWidget($widget, opts, resources) { + // We'll be doing our own modifications to opts. + opts = $.extend({}, opts); + $widget.empty().addClass('cols'); - var cardSizes = opts.cardSizes || ['6x6']; - var initialResults = opts.initialResults || resources.length; - var i = 0, j = 0; - var plusone = false; // stop showing plusone buttons on cards - var cardParent = $widget; + if (opts.itemsPerPage) { + $('<div class="col-1of1 dac-section-links dac-text-center">') + .append( + $('<div class="dac-section-link dac-show-less" data-toggle="show-less">Less<i class="dac-sprite dac-auto-unfold-less"></i></div>'), + $('<div class="dac-section-link dac-show-more" data-toggle="show-more">More<i class="dac-sprite dac-auto-unfold-more"></i></div>') + ) + .appendTo($widget); + } - while (i < resources.length) { + $widget.data('options.resourceflow', opts); + $widget.data('resources.resourceflow', resources); - if (i === initialResults && initialResults < resources.length) { - // Toggle remaining cards - cardParent = $('<div class="dac-toggle-content clearfix">').appendTo($widget); - $widget.addClass('dac-toggle'); - $('<div class="col-1of1 dac-section-links dac-text-center">') - .append( - $('<div class="dac-section-link" data-toggle="section">') - .append('<span class="dac-toggle-expand">More<i class="dac-sprite dac-auto-unfold-more"></i></span>') - .append('<span class="dac-toggle-collapse">Less<i class="dac-sprite dac-auto-unfold-less"></i></span>') - ) - .appendTo($widget) - } + drawResourceFlowPage($widget, opts, resources); + } + + function drawResourceFlowPage($widget, opts, resources) { + var cardSizes = opts.cardSizes || ['6x6']; // 2015-08-09: dynamic card sizes are deprecated + var i = opts.currentIndex || 0; + var j = 0; + var plusone = false; // stop showing plusone buttons on cards + var firstPage = i === 0; + var initialResults = opts.initialResults || opts.itemsPerPage || resources.length; + var max = firstPage ? initialResults : i + opts.itemsPerPage; + max = Math.min(resources.length, max); + + var page = $('<div class="resource-flow-page">'); + if (opts.itemsPerPage) { + $widget.find('.dac-section-links').before(page); + } else { + $widget.append(page); + } + while (i < max) { var cardSize = cardSizes[j++ % cardSizes.length]; - cardSize = cardSize.replace(/^\s+|\s+$/,''); + cardSize = cardSize.replace(/^\s+|\s+$/, ''); - var column = createResponsiveFlowColumn(cardSize).appendTo(cardParent); + var column = createResponsiveFlowColumn(cardSize).appendTo(page); // A stack has a third dimension which is the number of stacked items var isStack = cardSize.match(/(\d+)x(\d+)x(\d+)/); @@ -3875,8 +1548,8 @@ function showSamples() { if (isStack) { // Create a stack container which should have the dimensions defined // by the product of the items inside. - $stackDiv = $('<div>').addClass('resource-card-stack resource-card-' + isStack[1] - + 'x' + isStack[2] * isStack[3]) .appendTo(column); + $stackDiv = $('<div>').addClass('resource-card-stack resource-card-' + isStack[1] + + 'x' + isStack[2] * isStack[3]) .appendTo(column); } // Build each stack item or just a single item @@ -3886,11 +1559,11 @@ function showSamples() { var $card = createResourceElement(resources[i], opts, plusone); $card.addClass('resource-card-' + cardSize + - ' resource-card-' + resource.type); + ' resource-card-' + resource.type.toLowerCase()); if (isStack) { $card.addClass('resource-card-' + isStack[1] + 'x' + isStack[2]); - if (++stackCount == parseInt(isStack[3])) { + if (++stackCount === parseInt(isStack[3])) { $card.addClass('resource-card-row-stack-last'); stackCount = 0; } @@ -3900,151 +1573,58 @@ function showSamples() { $card.appendTo($stackDiv || column); - } while (++i < resources.length && stackCount > 0); - } - } - - /* Build a site map of resources using a section as a root. */ - function buildSectionList(opts) { - if (opts.section && SECTION_BY_ID[opts.section]) { - return SECTION_BY_ID[opts.section].sections || []; - } - return []; - } - - function buildResourceList(opts) { - return $.queryResources(opts); - } - - $.queryResources = function(opts) { - var maxResults = opts.maxResults || 100; - - var query = opts.query || ''; - var expressions = parseResourceQuery(query); - var addedResourceIndices = {}; - var results = []; - - for (var i = 0; i < expressions.length; i++) { - var clauses = expressions[i]; - - // build initial set of resources from first clause - var firstClause = clauses[0]; - var resources = []; - switch (firstClause.attr) { - case 'type': - resources = ALL_RESOURCES_BY_TYPE[firstClause.value]; - break; - case 'lang': - resources = ALL_RESOURCES_BY_LANG[firstClause.value]; - break; - case 'tag': - resources = ALL_RESOURCES_BY_TAG[firstClause.value]; - break; - case 'collection': - var urls = RESOURCE_COLLECTIONS[firstClause.value].resources || []; - resources = urls.map(function(url){ return ALL_RESOURCES_BY_URL[url]; }); - break; - case 'section': - var urls = SITE_MAP[firstClause.value].sections || []; - resources = urls.map(function(url){ return ALL_RESOURCES_BY_URL[url]; }); - break; - } - // console.log(firstClause.attr + ':' + firstClause.value); - resources = resources || []; - - // use additional clauses to filter corpus - if (clauses.length > 1) { - var otherClauses = clauses.slice(1); - resources = resources.filter(getResourceMatchesClausesFilter(otherClauses)); - } - - // filter out resources already added - if (i > 1) { - resources = resources.filter(getResourceNotAlreadyAddedFilter(addedResourceIndices)); - } - - // add to list of already added indices - for (var j = 0; j < resources.length; j++) { - if (resources[j]) { - addedResourceIndices[resources[j].index] = 1; - } - } - - // concat to final results list - results = results.concat(resources); - } + } while (++i < max && stackCount > 0); - if (opts.sortOrder && results.length) { - var attr = opts.sortOrder; - - if (opts.sortOrder == 'random') { - var i = results.length, j, temp; - while (--i) { - j = Math.floor(Math.random() * (i + 1)); - temp = results[i]; - results[i] = results[j]; - results[j] = temp; - } - } else { - var desc = attr.charAt(0) == '-'; - if (desc) { - attr = attr.substring(1); - } - results = results.sort(function(x,y) { - return (desc ? -1 : 1) * (parseInt(x[attr], 10) - parseInt(y[attr], 10)); - }); + // Record number of pages viewed in analytics. + if (!firstPage) { + var clicks = Math.ceil((i - initialResults) / opts.itemsPerPage); + devsite.analytics.trackAnalyticsEvent('event', + 'Cards', 'Click More', clicks); } } - results = results.filter(getResourceNotAlreadyAddedFilter(addedPageResources)); - results = results.slice(0, maxResults); + opts.currentIndex = i; + $widget.toggleClass('dac-has-more', i < resources.length); + $widget.toggleClass('dac-has-less', !firstPage); - for (var j = 0; j < results.length; ++j) { - addedPageResources[results[j].index] = 1; + $widget.trigger('dac:domchange'); + if (opts.onRenderPage) { + opts.onRenderPage(page); } - - return results; } + function drawResourceFlowReset($widget, opts, resources) { + $widget.find('.resource-flow-page') + .slice(1) + .remove(); + $widget.toggleClass('dac-has-more', true); + $widget.toggleClass('dac-has-less', false); - function getResourceNotAlreadyAddedFilter(addedResourceIndices) { - return function(resource) { - return resource && !addedResourceIndices[resource.index]; - }; + opts.currentIndex = Math.min(opts.initialResults, resources.length); + devsite.analytics.trackAnalyticsEvent('event', 'Cards', 'Click Less'); } + /* A decorator for event functions which finds the surrounding widget and it's options */ + function wrapWithWidget(func) { + return function(e) { + if (e) e.preventDefault(); - function getResourceMatchesClausesFilter(clauses) { - return function(resource) { - return doesResourceMatchClauses(resource, clauses); + var $widget = $(this).closest('.resource-flow-layout'); + var opts = $widget.data('options.resourceflow'); + var resources = $widget.data('resources.resourceflow'); + func($widget, opts, resources); }; } - - function doesResourceMatchClauses(resource, clauses) { - for (var i = 0; i < clauses.length; i++) { - var map; - switch (clauses[i].attr) { - case 'type': - map = IS_RESOURCE_OF_TYPE[clauses[i].value]; - break; - case 'lang': - map = IS_RESOURCE_IN_LANG[clauses[i].value]; - break; - case 'tag': - map = IS_RESOURCE_TAGGED[clauses[i].value]; - break; - } - - if (!map || (!!clauses[i].negative ? map[resource.index] : !map[resource.index])) { - return clauses[i].negative; - } + /* Build a site map of resources using a section as a root. */ + function buildSectionList(opts) { + if (opts.section && SECTION_BY_ID[opts.section]) { + return SECTION_BY_ID[opts.section].sections || []; } - return true; + return []; } - function cleanUrl(url) - { + function cleanUrl(url) { if (url && url.indexOf('//') === -1) { url = toRoot + url; } @@ -4052,53 +1632,16 @@ function showSamples() { return url; } - - function parseResourceQuery(query) { - // Parse query into array of expressions (expression e.g. 'tag:foo + type:video') - var expressions = []; - var expressionStrs = query.split(',') || []; - for (var i = 0; i < expressionStrs.length; i++) { - var expr = expressionStrs[i] || ''; - - // Break expression into clauses (clause e.g. 'tag:foo') - var clauses = []; - var clauseStrs = expr.split(/(?=[\+\-])/); - for (var j = 0; j < clauseStrs.length; j++) { - var clauseStr = clauseStrs[j] || ''; - - // Get attribute and value from clause (e.g. attribute='tag', value='foo') - var parts = clauseStr.split(':'); - var clause = {}; - - clause.attr = parts[0].replace(/^\s+|\s+$/g,''); - if (clause.attr) { - if (clause.attr.charAt(0) == '+') { - clause.attr = clause.attr.substring(1); - } else if (clause.attr.charAt(0) == '-') { - clause.negative = true; - clause.attr = clause.attr.substring(1); - } - } - - if (parts.length > 1) { - clause.value = parts[1].replace(/^\s+|\s+$/g,''); - } - - clauses.push(clause); - } - - if (!clauses.length) { - continue; - } - - expressions.push(clauses); - } - - return expressions; - } + // Delegated events for resources. + $(document).on('click', '.resource-flow-layout [data-toggle="show-more"]', wrapWithWidget(drawResourceFlowPage)); + $(document).on('click', '.resource-flow-layout [data-toggle="show-less"]', wrapWithWidget(drawResourceFlowReset)); })(); (function($) { + // A mapping from category and type values to new values or human presentable strings. + var SECTION_MAP = { + googleplay: 'google play' + }; /* Utility method for creating dom for the description area of a card. @@ -4127,10 +1670,10 @@ function showSamples() { return $description; } - /* Simple jquery function to create dom for a standard resource card */ - $.fn.decorateResourceCard = function(resource,plusone) { - var section = resource.group || resource.type; + $.fn.decorateResourceCard = function(resource, plusone) { + var section = resource.category || resource.type; + section = (SECTION_MAP[section] || section).toLowerCase(); var imgUrl = resource.image || 'assets/images/resource-card-default-android.jpg'; @@ -4138,7 +1681,7 @@ function showSamples() { imgUrl = toRoot + imgUrl; } - if (resource.type === 'youtube') { + if (resource.type === 'youtube' || resource.type === 'video') { $('<div>').addClass('play-button') .append($('<i class="dac-sprite dac-play-white">')) .appendTo(this); @@ -4151,7 +1694,8 @@ function showSamples() { $('<div>').addClass('card-info' + (!resource.summary ? ' empty-desc' : '')) .append($('<div>').addClass('section').text(section)) - .append($('<div>').addClass('title').html(resource.title)) + .append($('<div>').addClass('title' + (resource.title_highlighted ? ' highlighted' : '')) + .html(resource.title_highlighted || resource.title)) .append(buildResourceCardDescription(resource, plusone)) .appendTo(this); @@ -4159,7 +1703,7 @@ function showSamples() { }; /* Simple jquery function to create dom for a resource section card (menu) */ - $.fn.decorateResourceSection = function(section,plusone) { + $.fn.decorateResourceSection = function(section, plusone) { var resource = section.resource; //keep url clean for matching and offline mode handling var urlPrefix = resource.image.indexOf("//") > -1 ? "" : toRoot; @@ -4237,9 +1781,6 @@ function showSamples() { return this; }; - - - /* Render other types of resource styles that are not cards. */ $.fn.decorateResource = function(resource, opts) { var imgUrl = resource.image || @@ -4258,7 +1799,7 @@ function showSamples() { $('<div>').addClass('image') .css('background-image', 'url(' + imgUrl + ')'), $('<div>').addClass('info').append( - $('<h4>').addClass('title').html(resource.title), + $('<h4>').addClass('title').html(resource.title_highlighted || resource.title), $('<p>').addClass('summary').html(resource.summary), $('<a>').attr('href', linkUrl).addClass('cta').html('Learn More') ) @@ -4268,31 +1809,6 @@ function showSamples() { }; })(jQuery); - -/* Calculate the vertical area remaining */ -(function($) { - $.fn.ellipsisfade= function(lineHeight) { - this.each(function() { - // get element text - var $this = $(this); - var remainingHeight = $this.parent().parent().height(); - $this.parent().siblings().each(function () - { - if ($(this).is(":visible")) { - var h = $(this).outerHeight(true); - remainingHeight = remainingHeight - h; - } - }); - - adjustedRemainingHeight = ((remainingHeight)/lineHeight>>0)*lineHeight - $this.parent().css({'height': adjustedRemainingHeight}); - $this.css({'height': "auto"}); - }); - - return this; - }; -}) (jQuery); - /* Fullscreen Carousel @@ -4383,10 +1899,6 @@ function showSamples() { } })(); - - - - /* Tab Carousel @@ -4492,7 +2004,7 @@ function showSamples() { // add HRs below all H2s (except for a few other h2 variants) // Consider doing this with css instead. h2Titles = $('h2').not('#qv h2, #tb h2, .sidebox h2, #devdoc-nav h2, h2.norule'); - h2Titles.css({marginBottom:0}).after('<hr/>'); + h2Titles.css({paddingBottom:0}).after('<hr/>'); // Exit early if on older browser. if (!window.matchMedia) { @@ -4525,7 +2037,7 @@ function showSamples() { // Find all the relevant nodes. var $title = $(this); var $hr = $title.next(); - var $contents = $hr.nextUntil('h2, .next-docs'); + var $contents = allNextUntil($hr[0], 'h2, .next-docs'); var $section = $($title) .add($hr) .add($title.prev('a[name]')) @@ -4554,7 +2066,9 @@ function showSamples() { // Wrap in magic markup. $section = $section.wrapAll('<div class="dac-toggle dac-mobile">').parent(); - $contents.wrapAll('<div class="dac-toggle-content"><div>'); // extra div used for max-height calculation. + + // extra div used for max-height calculation. + $contents.wrapAll('<div class="dac-toggle-content dac-expand"><div>'); // Pre-expand section if requested. if ($title.hasClass('is-expanded')) { @@ -4571,11 +2085,514 @@ function showSamples() { }); } + // Similar to $.fn.nextUntil() except we need all nodes, jQuery skips text nodes. + function allNextUntil(elem, until) { + var matched = []; + + while ((elem = elem.nextSibling) && elem.nodeType !== 9) { + if (elem.nodeType === 1 && jQuery(elem).is(until)) { + break; + } + matched.push(elem); + } + return $(matched); + } + $(function() { initWidget(); }); })(jQuery); +(function($, window) { + 'use strict'; + + // Blogger API info + var apiUrl = 'https://www.googleapis.com/blogger/v3'; + var apiKey = 'AIzaSyCFhbGnjW06dYwvRCU8h_zjdpS4PYYbEe8'; + + // Blog IDs can be found in the markup of the blog posts + var blogs = { + 'android-developers': { + id: '6755709643044947179', + title: 'Android Developers Blog' + } + }; + var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', + 'July', 'August', 'September', 'October', 'November', 'December']; + + var BlogReader = (function() { + var reader; + + function BlogReader() { + this.doneSetup = false; + } + + /** + * Initialize the blog reader and modal. + */ + BlogReader.prototype.setup = function() { + $('#jd-content').append( + '<div id="blog-reader" data-modal="blog-reader" class="dac-modal dac-has-small-header">' + + '<div class="dac-modal-container">' + + '<div class="dac-modal-window">' + + '<header class="dac-modal-header">' + + '<div class="dac-modal-header-actions">' + + '<a href="" class="dac-modal-header-open" target="_blank">' + + '<i class="dac-sprite dac-open-in-new"></i>' + + '</a>' + + '<button class="dac-modal-header-close" data-modal-toggle>' + + '</button>' + + '</div>' + + '<h2 class="norule dac-modal-header-title"></h2>' + + '</header>' + + '<div class="dac-modal-content dac-blog-reader">' + + '<time class="dac-blog-reader-date" pubDate></time>' + + '<h3 class="dac-blog-reader-title"></h3>' + + '<div class="dac-blog-reader-text clearfix"></div>' + + '</div>' + + '</div>' + + '</div>' + + '</div>'); + + this.blogReader = $('#blog-reader').dacModal(); + + this.doneSetup = true; + }; + + BlogReader.prototype.openModal_ = function(blog, post) { + var published = new Date(post.published); + var formattedDate = monthNames[published.getMonth()] + ' ' + published.getDate() + ' ' + published.getFullYear(); + this.blogReader.find('.dac-modal-header-open').attr('href', post.url); + this.blogReader.find('.dac-modal-header-title').text(blog.title); + this.blogReader.find('.dac-blog-reader-title').html(post.title); + this.blogReader.find('.dac-blog-reader-date').html(formattedDate); + this.blogReader.find('.dac-blog-reader-text').html(post.content); + this.blogReader.trigger('modal-open'); + }; + + /** + * Show a blog post in a modal + * @param {string} blogName - The name of the Blogspot blog. + * @param {string} postPath - The path to the blog post. + * @param {bool} secondTry - Has it failed once? + */ + BlogReader.prototype.showPost = function(blogName, postPath, secondTry) { + var blog = blogs[blogName]; + var postUrl = 'https://' + blogName + '.blogspot.com' + postPath; + + var url = apiUrl + '/blogs/' + blog.id + '/posts/bypath?path=' + encodeURIComponent(postPath) + '&key=' + apiKey; + $.ajax(url, {timeout: 650}).done(this.openModal_.bind(this, blog)).fail(function(error) { + // Retry once if we get an error + if (error.status === 500 && !secondTry) { + this.showPost(blogName, postPath, true); + } else { + window.location.href = postUrl; + } + }.bind(this)); + }; + + return { + getReader: function() { + if (!reader) { + reader = new BlogReader(); + } + return reader; + } + }; + })(); + + var blogReader = BlogReader.getReader(); + + function wrapLinkWithReader(e) { + var el = $(e.currentTarget); + if (el.hasClass('dac-modal-header-open')) { + return; + } + + // Only catch links on blogspot.com + var matches = el.attr('href').match(/https?:\/\/([^\.]*).blogspot.com([^$]*)/); + if (matches && matches.length === 3) { + var blogName = matches[1]; + var postPath = matches[2]; + + // Check if we have information about the blog + if (!blogs[blogName]) { + return; + } + + // Setup the first time it's used + if (!blogReader.doneSetup) { + blogReader.setup(); + } + + e.preventDefault(); + blogReader.showPost(blogName, postPath); + } + } + + $(document).on('click.blog-reader', 'a.resource-card[href*="blogspot.com/"]', + wrapLinkWithReader); +})(jQuery, window); + +(function($) { + $.fn.debounce = function(func, wait, immediate) { + var timeout; + + return function() { + var context = this; + var args = arguments; + + var later = function() { + timeout = null; + if (!immediate) { + func.apply(context, args); + } + }; + + var callNow = immediate && !timeout; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + + if (callNow) { + func.apply(context, args); + } + }; + }; +})(jQuery); + +/* Calculate the vertical area remaining */ +(function($) { + $.fn.ellipsisfade = function() { + // Only fetch line-height of first element to avoid recalculate style. + // Will be NaN if no elements match, which is ok. + var lineHeight = parseInt(this.css('line-height'), 10); + + this.each(function() { + // get element text + var $this = $(this); + var remainingHeight = $this.parent().parent().height(); + $this.parent().siblings().each(function() { + var elHeight; + if ($(this).is(':visible')) { + elHeight = $(this).outerHeight(true); + remainingHeight = remainingHeight - elHeight; + } + }); + + var adjustedRemainingHeight = ((remainingHeight) / lineHeight >> 0) * lineHeight; + $this.parent().css({height: adjustedRemainingHeight}); + $this.css({height: 'auto'}); + }); + + return this; + }; + + /* Pass the line height to ellipsisfade() to adjust the height of the + text container to show the max number of lines possible, without + showing lines that are cut off. This works with the css ellipsis + classes to fade last text line and apply an ellipsis char. */ + function updateEllipsis(context) { + if (!(context instanceof jQuery)) { + context = $('html'); + } + + context.find('.card-info .text').ellipsisfade(); + } + + $(window).on('resize', $.fn.debounce(updateEllipsis, 500)); + $(updateEllipsis); + $('html').on('dac:domchange', function(e) { updateEllipsis($(e.target)); }); +})(jQuery); + +/* Filter */ +(function($) { + 'use strict'; + + /** + * A single filter item content. + * @type {string} - Element template. + * @private + */ + var ITEM_STR_ = '<input type="checkbox" value="{{value}}" class="dac-form-checkbox" id="{{id}}">' + + '<label for="{{id}}" class="dac-form-checkbox-button"></label>' + + '<label for="{{id}}" class="dac-form-label">{{name}}</label>'; + + /** + * Template for a chip element. + * @type {*|HTMLElement} + * @private + */ + var CHIP_BASE_ = $('<li class="dac-filter-chip">' + + '<button class="dac-filter-chip-close">' + + '<i class="dac-sprite dac-close-black dac-filter-chip-close-icon"></i>' + + '</button>' + + '</li>'); + + /** + * Component to handle narrowing down resources. + * @param {HTMLElement} el - The DOM element. + * @param {Object} options + * @constructor + */ + function Filter(el, options) { + this.el = $(el); + this.options = $.extend({}, Filter.DEFAULTS_, options); + this.init(); + } + + Filter.DEFAULTS_ = { + activeClass: 'dac-active', + chipsDataAttr: 'filter-chips', + nameDataAttr: 'filter-name', + countDataAttr: 'filter-count', + tabViewDataAttr: 'tab-view', + valueDataAttr: 'filter-value' + }; + + /** + * Draw resource cards. + * @param {Array} resources + * @private + */ + Filter.prototype.draw_ = function(resources) { + var that = this; + + if (resources.length === 0) { + this.containerEl_.html('<p class="dac-filter-message">Nothing matches selected filters.</p>'); + return; + } + + // Draw resources. + that.containerEl_.resourceWidget(resources, that.data_.options); + }; + + /** + * Initialize a Filter component. + */ + Filter.prototype.init = function() { + this.containerEl_ = $(this.options.filter); + + // Setup data settings + this.data_ = {}; + this.data_.chips = {}; + this.data_.options = this.containerEl_.widgetOptions(); + this.data_.all = window.metadata.query(this.data_.options); + + // Initialize filter UI + this.initUi(); + }; + + /** + * Generate a chip for a given filter item. + * @param {Object} item - A single filter option (checkbox container). + * @returns {HTMLElement} A new Chip element. + */ + Filter.prototype.chipForItem = function(item) { + var chip = CHIP_BASE_.clone(); + chip.prepend(this.data_.chips[item.data('filter-value')]); + chip.data('item.dac-filter', item); + item.data('chip.dac-filter', chip); + this.addToItemValue(item, 1); + return chip[0]; + }; + + /** + * Update count of checked filter items. + * @param {Object} item - A single filter option (checkbox container). + * @param {Number} value - Either -1 or 1. + */ + Filter.prototype.addToItemValue = function(item, value) { + var tab = item.parent().data(this.options.tabViewDataAttr); + var countEl = this.countEl_.filter('[data-' + this.options.countDataAttr + '="' + tab + '"]'); + var count = value + parseInt(countEl.text(), 10); + countEl.text(count); + countEl.toggleClass('dac-disabled', count === 0); + }; + + /** + * Set event listeners. + * @private + */ + Filter.prototype.setEventListeners_ = function() { + this.chipsEl_.on('click.dac-filter', '.dac-filter-chip-close', this.closeChipHandler_.bind(this)); + this.tabViewEl_.on('change.dac-filter', ':checkbox', this.toggleCheckboxHandler_.bind(this)); + }; + + /** + * Check filter items that are active by default. + */ + Filter.prototype.activateInitialFilters_ = function() { + var id = (new Date()).getTime(); + var initiallyCheckedValues = this.data_.options.query.replace(/,\s*/g, '+').split('+'); + var chips = document.createDocumentFragment(); + var that = this; + + this.items_.each(function(i) { + var item = $(this); + var opts = item.data(); + that.data_.chips[opts.filterValue] = opts.filterName; + + var checkbox = $(ITEM_STR_.replace(/\{\{name\}\}/g, opts.filterName) + .replace(/\{\{value\}\}/g, opts.filterValue) + .replace(/\{\{id\}\}/g, 'filter-' + id + '-' + (i + 1))); + + if (initiallyCheckedValues.indexOf(opts.filterValue) > -1) { + checkbox[0].checked = true; + chips.appendChild(that.chipForItem(item)); + } + + item.append(checkbox); + }); + + this.chipsEl_.append(chips); + }; + + /** + * Initialize the Filter view + */ + Filter.prototype.initUi = function() { + // Cache DOM elements + this.chipsEl_ = this.el.find('[data-' + this.options.chipsDataAttr + ']'); + this.countEl_ = this.el.find('[data-' + this.options.countDataAttr + ']'); + this.tabViewEl_ = this.el.find('[data-' + this.options.tabViewDataAttr + ']'); + this.items_ = this.el.find('[data-' + this.options.nameDataAttr + ']'); + + // Setup UI + this.draw_(this.data_.all); + this.activateInitialFilters_(); + this.setEventListeners_(); + }; + + /** + * @returns {[types|Array, tags|Array, category|Array]} + */ + Filter.prototype.getActiveClauses = function() { + var tags = []; + var types = []; + var categories = []; + + this.items_.find(':checked').each(function(i, checkbox) { + // Currently, there is implicit business logic here that `tag` is AND'ed together + // while `type` is OR'ed. So , and + do the same thing here. It would be great to + // reuse the same query engine for filters, but it would need more powerful syntax. + // Probably parenthesis, to support "tag:dog + tag:cat + (type:video, type:blog)" + var expression = $(checkbox).val(); + var regex = /(\w+):(\w+)/g; + var match; + + while (match = regex.exec(expression)) { + switch (match[1]) { + case 'category': + categories.push(match[2]); + break; + case 'tag': + tags.push(match[2]); + break; + case 'type': + types.push(match[2]); + break; + } + } + }); + + return [types, tags, categories]; + }; + + /** + * Actual filtering logic. + * @returns {Array} + */ + Filter.prototype.filteredResources = function() { + var data = this.getActiveClauses(); + var types = data[0]; + var tags = data[1]; + var categories = data[2]; + var resources = []; + var resource = {}; + var tag = ''; + var shouldAddResource = true; + + for (var resourceIndex = 0; resourceIndex < this.data_.all.length; resourceIndex++) { + resource = this.data_.all[resourceIndex]; + shouldAddResource = types.indexOf(resource.type) > -1; + + if (categories && categories.length > 0) { + shouldAddResource = shouldAddResource && categories.indexOf(resource.category) > -1; + } + + for (var tagIndex = 0; shouldAddResource && tagIndex < tags.length; tagIndex++) { + tag = tags[tagIndex]; + shouldAddResource = resource.tags.indexOf(tag) > -1; + } + + if (shouldAddResource) { + resources.push(resource); + } + } + + return resources; + }; + + /** + * Close Chip Handler + * @param {Event} event - Click event + * @private + */ + Filter.prototype.closeChipHandler_ = function(event) { + var chip = $(event.currentTarget).parent(); + var checkbox = chip.data('item.dac-filter').find(':first-child')[0]; + checkbox.checked = false; + this.changeStateForCheckbox(checkbox); + }; + + /** + * Handle filter item state change. + * @param {Event} event - Change event + * @private + */ + Filter.prototype.toggleCheckboxHandler_ = function(event) { + this.changeStateForCheckbox(event.currentTarget); + }; + + /** + * Redraw resource view based on new state. + * @param checkbox + */ + Filter.prototype.changeStateForCheckbox = function(checkbox) { + var item = $(checkbox).parent(); + + if (checkbox.checked) { + this.chipsEl_.append(this.chipForItem(item)); + devsite.analytics.trackAnalyticsEvent('event', + 'Filters', 'Check', $(checkbox).val()); + } else { + item.data('chip.dac-filter').remove(); + this.addToItemValue(item, -1); + devsite.analytics.trackAnalyticsEvent('event', + 'Filters', 'Uncheck', $(checkbox).val()); + } + + this.draw_(this.filteredResources()); + }; + + /** + * jQuery plugin + */ + $.fn.dacFilter = function() { + return this.each(function() { + var el = $(this); + new Filter(el, el.data()); + }); + }; + + /** + * Data Attribute API + */ + $(function() { + $('[data-filter]').dacFilter(); + }); +})(jQuery); + (function($) { 'use strict'; @@ -4632,97 +2649,188 @@ function showSamples() { }); })(jQuery); -/* global toRoot, CAROUSEL_OVERRIDE */ (function($) { - // Ordering matters - var TAG_MAP = [ - {from: 'developerstory', to: 'Android Developer Story'}, - {from: 'googleplay', to: 'Google Play'} - ]; + 'use strict'; - function DacCarouselQuery(el) { - this.el = $(el); + /** + * @param {HTMLElement} el - The DOM element. + * @param {Object} options + * @constructor + */ + function Crumbs(selected, options) { + this.options = $.extend({}, Crumbs.DEFAULTS_, options); + this.el = $(this.options.container); - var opts = this.el.data(); - opts.maxResults = parseInt(opts.maxResults || '100', 10); - opts.query = opts.carouselQuery; - var resources = $.queryResources(opts); + // Do not build breadcrumbs for landing site. + if (!selected || location.pathname === '/index.html' || location.pathname === '/') { + return; + } - this.el.empty(); - $(resources).map(function() { - var resource = $.extend({}, this, CAROUSEL_OVERRIDE[this.url]); - var slide = $('<article class="dac-expand dac-hero">'); - var image = cleanUrl(resource.heroImage || resource.image); - var fullBleed = image && !resource.heroColor; + // Cache navigation resources + this.selected = $(selected); + this.selectedParent = this.selected.closest('.dac-nav-secondary').siblings('a'); - // Configure background - slide.css({ - backgroundImage: fullBleed ? 'url(' + image + ')' : '', - backgroundColor: resource.heroColor || '' - }); + // Build the breadcrumb list. + this.init(); + } - // Should copy be inverted - slide.toggleClass('dac-invert', resource.heroInvert || fullBleed); - slide.toggleClass('dac-darken', fullBleed); + Crumbs.DEFAULTS_ = { + container: '.dac-header-crumbs', + crumbItem: $('<li class="dac-header-crumbs-item">'), + linkClass: 'dac-header-crumbs-link' + }; - // Should be clickable - slide.append($('<a class="dac-hero-carousel-action">').attr('href', cleanUrl(resource.url))); + Crumbs.prototype.init = function() { + Crumbs.buildCrumbForLink(this.selected.clone()).appendTo(this.el); - var cols = $('<div class="cols dac-hero-content">'); + if (this.selectedParent.length) { + Crumbs.buildCrumbForLink(this.selectedParent.clone()).prependTo(this.el); + } - // inline image column - var rightCol = $('<div class="col-1of2 col-push-1of2 dac-hero-figure">') - .appendTo(cols); + // Reveal the breadcrumbs + this.el.addClass('dac-has-content'); + }; - if (!fullBleed && image) { - rightCol.append($('<img>').attr('src', image)); - } + /** + * Build a HTML structure for a breadcrumb. + * @param {string} link + * @return {jQuery} + */ + Crumbs.buildCrumbForLink = function(link) { + link.find('br').replaceWith(' '); - // info column - $('<div class="col-1of2 col-pull-1of2">') - .append($('<div class="dac-hero-tag">').text(formatTag(resource))) - .append($('<h1 class="dac-hero-title">').text(formatTitle(resource))) - .append($('<p class="dac-hero-description">').text(resource.summary)) - .append($('<a class="dac-hero-cta">') - .text(formatCTA(resource)) - .attr('href', cleanUrl(resource.url)) - .prepend($('<span class="dac-sprite dac-auto-chevron">')) - ) - .appendTo(cols); + var crumbLink = $('<a>') + .attr('class', Crumbs.DEFAULTS_.linkClass) + .attr('href', link.attr('href')) + .text(link.text()); - slide.append(cols.wrap('<div class="wrap">').parent()); - return slide[0]; - }).prependTo(this.el); + return Crumbs.DEFAULTS_.crumbItem.clone().append(crumbLink); + }; - // Pagination element. - this.el.append('<div class="dac-hero-carousel-pagination"><div class="wrap" data-carousel-pagination>'); + /** + * jQuery plugin + */ + $.fn.dacCrumbs = function(options) { + return this.each(function() { + new Crumbs(this, options); + }); + }; +})(jQuery); - this.el.dacCarousel(); - } +(function($) { + 'use strict'; - function cleanUrl(url) { - if (url && url.indexOf('//') === -1) { - url = toRoot + url; - } - return url; + /** + * @param {HTMLElement} el - The DOM element. + * @param {Object} options + * @constructor + */ + function SearchInput(el, options) { + this.el = $(el); + this.options = $.extend({}, SearchInput.DEFAULTS_, options); + this.body = $('body'); + this.input = this.el.find('input'); + this.close = this.el.find(this.options.closeButton); + this.clear = this.el.find(this.options.clearButton); + this.icon = this.el.find('.' + this.options.iconClass); + this.init(); } - function formatTag(resource) { - // Hmm, need a better more scalable solution for this. - for (var i = 0, mapping; mapping = TAG_MAP[i]; i++) { - if (resource.tags.indexOf(mapping.from) > -1) { - return mapping.to; - } + SearchInput.DEFAULTS_ = { + activeClass: 'dac-active', + activeIconClass: 'dac-search', + closeButton: '[data-search-close]', + clearButton: '[data-search-clear]', + hiddenClass: 'dac-hidden', + iconClass: 'dac-header-search-icon', + searchModeClass: 'dac-search-mode', + transitionDuration: 250 + }; + + SearchInput.prototype.init = function() { + this.input.on('focus.dac-search', this.setActiveState.bind(this)) + .on('input.dac-search', this.checkInputValue.bind(this)); + this.close.on('click.dac-search', this.unsetActiveStateHandler_.bind(this)); + this.clear.on('click.dac-search', this.clearInput.bind(this)); + }; + + SearchInput.prototype.setActiveState = function() { + var that = this; + + this.clear.addClass(this.options.hiddenClass); + this.body.addClass(this.options.searchModeClass); + this.checkInputValue(); + + // Set icon to black after background has faded to white. + setTimeout(function() { + that.icon.addClass(that.options.activeIconClass); + }, this.options.transitionDuration); + }; + + SearchInput.prototype.unsetActiveStateHandler_ = function(event) { + event.preventDefault(); + this.unsetActiveState(); + }; + + SearchInput.prototype.unsetActiveState = function() { + this.icon.removeClass(this.options.activeIconClass); + this.clear.addClass(this.options.hiddenClass); + this.body.removeClass(this.options.searchModeClass); + }; + + SearchInput.prototype.clearInput = function(event) { + event.preventDefault(); + this.input.val(''); + this.clear.addClass(this.options.hiddenClass); + }; + + SearchInput.prototype.checkInputValue = function() { + if (this.input.val().length) { + this.clear.removeClass(this.options.hiddenClass); + } else { + this.clear.addClass(this.options.hiddenClass); } - return resource.type; - } + }; - function formatTitle(resource) { - return resource.title.replace(/android developer story: /i, ''); - } + /** + * jQuery plugin + * @param {object} options - Override default options. + */ + $.fn.dacSearchInput = function() { + return this.each(function() { + var el = $(this); + el.data('search-input.dac', new SearchInput(el, el.data())); + }); + }; - function formatCTA(resource) { - return resource.type === 'youtube' ? 'Watch the video' : 'Learn more'; + /** + * Data Attribute API + */ + $(function() { + $('[data-search]').dacSearchInput(); + }); +})(jQuery); + +/* global METADATA */ +(function($) { + function DacCarouselQuery(el) { + el = $(el); + + var opts = el.data(); + opts.maxResults = parseInt(opts.maxResults || '100', 10); + opts.query = opts.carouselQuery; + var resources = window.metadata.query(opts); + + el.empty(); + $(resources).each(function() { + var resource = $.extend({}, this, METADATA.carousel[this.url]); + el.dacHero(resource); + }); + + // Pagination element. + el.append('<div class="dac-hero-carousel-pagination"><div class="wrap" data-carousel-pagination>'); + + el.dacCarousel(); } // jQuery plugin @@ -4917,16 +3025,860 @@ function showSamples() { }); })(jQuery); +/* global toRoot */ + +(function($) { + // Ordering matters + var TAG_MAP = [ + {from: 'developerstory', to: 'Android Developer Story'}, + {from: 'googleplay', to: 'Google Play'} + ]; + + function DacHero(el, resource, isSearch) { + var slide = $('<article>'); + slide.addClass(isSearch ? 'dac-search-hero' : 'dac-expand dac-hero'); + var image = cleanUrl(resource.heroImage || resource.image); + var fullBleed = image && !resource.heroColor; + + if (!isSearch) { + // Configure background + slide.css({ + backgroundImage: fullBleed ? 'url(' + image + ')' : '', + backgroundColor: resource.heroColor || '' + }); + + // Should copy be inverted + slide.toggleClass('dac-invert', resource.heroInvert || fullBleed); + slide.toggleClass('dac-darken', fullBleed); + + // Should be clickable + slide.append($('<a class="dac-hero-carousel-action">').attr('href', cleanUrl(resource.url))); + } + + var cols = $('<div class="cols dac-hero-content">'); + + // inline image column + var rightCol = $('<div class="col-1of2 col-push-1of2 dac-hero-figure">') + .appendTo(cols); + + if ((!fullBleed || isSearch) && image) { + rightCol.append($('<img>').attr('src', image)); + } + + // info column + $('<div class="col-1of2 col-pull-1of2">') + .append($('<div class="dac-hero-tag">').text(formatTag(resource))) + .append($('<h1 class="dac-hero-title">').text(formatTitle(resource))) + .append($('<p class="dac-hero-description">').text(resource.summary)) + .append($('<a class="dac-hero-cta">') + .text(formatCTA(resource)) + .attr('href', cleanUrl(resource.url)) + .prepend($('<span class="dac-sprite dac-auto-chevron">')) + ) + .appendTo(cols); + + slide.append(cols.wrap('<div class="wrap">').parent()); + el.append(slide); + } + + function cleanUrl(url) { + if (url && url.indexOf('//') === -1) { + url = toRoot + url; + } + return url; + } + + function formatTag(resource) { + // Hmm, need a better more scalable solution for this. + for (var i = 0, mapping; mapping = TAG_MAP[i]; i++) { + if (resource.tags.indexOf(mapping.from) > -1) { + return mapping.to; + } + } + return resource.type; + } + + function formatTitle(resource) { + return resource.title.replace(/android developer story: /i, ''); + } + + function formatCTA(resource) { + return resource.type === 'youtube' ? 'Watch the video' : 'Learn more'; + } + + // jQuery plugin + $.fn.dacHero = function(resource, isSearch) { + return this.each(function() { + var el = $(this); + return new DacHero(el, resource, isSearch); + }); + }; +})(jQuery); + +(function($) { + 'use strict'; + + function highlightString(label, query) { + query = query || ''; + //query = query.replace('<wbr>', '').replace('.', '\\.'); + var queryRE = new RegExp('(' + query + ')', 'ig'); + return label.replace(queryRE, '<em>$1</em>'); + } + + $.fn.highlightMatches = function(query) { + return this.each(function() { + var el = $(this); + var label = el.html(); + var highlighted = highlightString(label, query); + el.html(highlighted); + el.addClass('highlighted'); + }); + }; +})(jQuery); + +/** + * History tracking. + * Track visited urls in localStorage. + */ +(function($) { + var PAGES_TO_STORE_ = 100; + var MIN_NUMBER_OF_PAGES_TO_DISPLAY_ = 6; + var CONTAINER_SELECTOR_ = '.dac-search-results-history-wrap'; + + /** + * Generate resource cards for visited pages. + * @param {HTMLElement} el + * @constructor + */ + function HistoryQuery(el) { + this.el = $(el); + + // Only show history component if enough pages have been visited. + if (getVisitedPages().length < MIN_NUMBER_OF_PAGES_TO_DISPLAY_) { + this.el.closest(CONTAINER_SELECTOR_).addClass('dac-hidden'); + return; + } + + // Rename query + this.el.data('query', this.el.data('history-query')); + + // jQuery method to populate cards. + this.el.resourceWidget(); + } + + /** + * Fetch from localStorage an array of visted pages + * @returns {Array} + */ + function getVisitedPages() { + var visited = localStorage.getItem('visited-pages'); + return visited ? JSON.parse(visited) : []; + } + + /** + * Return a page corresponding to cuurent pathname. If none exists, create one. + * @param {Array} pages + * @param {String} path + * @returns {Object} Page + */ + function getPageForPath(pages, path) { + var page; + + // Backwards lookup for current page, last pages most likely to be visited again. + for (var i = pages.length - 1; i >= 0; i--) { + if (pages[i].path === path) { + page = pages[i]; + + // Remove page object from pages list to ensure correct ordering. + pages.splice(i, 1); + + return page; + } + } + + // If storage limit is exceeded, remove last visited path. + if (pages.length >= PAGES_TO_STORE_) { + pages.shift(); + } + + return {path: path}; + } + + /** + * Add current page to back of visited array, increase hit count by 1. + */ + function addCurrectPage() { + var path = location.pathname; + + // Do not track frontpage visits. + if (path === '/' || path === '/index.html') {return;} + + var pages = getVisitedPages(); + var page = getPageForPath(pages, path); + + // New page visits have no hit count. + page.hit = ~~page.hit + 1; + + // Most recently visted pages are located at the end of the visited array. + pages.push(page); + + localStorage.setItem('visited-pages', JSON.stringify(pages)); + } + + /** + * Hit count compare function. + * @param {Object} a - page + * @param {Object} b - page + * @returns {number} + */ + function byHit(a, b) { + if (a.hit > b.hit) { + return -1; + } else if (a.hit < b.hit) { + return 1; + } + + return 0; + } + + /** + * Return a list of visited urls in a given order. + * @param {String} order - (recent|most-visited) + * @returns {Array} + */ + $.dacGetVisitedUrls = function(order) { + var pages = getVisitedPages(); + + if (order === 'recent') { + pages.reverse(); + } else { + pages.sort(byHit); + } + + return pages.map(function(page) { + return page.path.replace(/^\//, ''); + }); + }; + + // jQuery plugin + $.fn.dacHistoryQuery = function() { + return this.each(function() { + var el = $(this); + var data = el.data('dac.recentlyVisited'); + + if (!data) { + el.data('dac.recentlyVisited', (data = new HistoryQuery(el))); + } + }); + }; + + $(function() { + $('[data-history-query]').dacHistoryQuery(); + // Do not block page rendering. + setTimeout(addCurrectPage, 0); + }); +})(jQuery); + +/* ############################################ */ +/* ########## LOCALIZATION ############ */ +/* ############################################ */ +/** + * Global helpers. + */ +function getBaseUri(uri) { + var intlUrl = (uri.substring(0, 6) === '/intl/'); + if (intlUrl) { + var base = uri.substring(uri.indexOf('intl/') + 5, uri.length); + base = base.substring(base.indexOf('/') + 1, base.length); + return '/' + base; + } else { + return uri; + } +} + +function changeLangPref(targetLang, submit) { + window.writeCookie('pref_lang', targetLang, null); + $('#language').find('option[value="' + targetLang + '"]').attr('selected', true); + if (submit) { + $('#setlang').submit(); + } +} +// Redundant usage to appease jshint. +window.changeLangPref = changeLangPref; + +(function() { + /** + * Whitelisted locales. Should match choices in language dropdown. Repeated here + * as a lot of i18n logic happens before page load and dropdown is ready. + */ + var LANGUAGES = [ + 'en', + 'es', + 'in', + 'ja', + 'ko', + 'pt-br', + 'ru', + 'vi', + 'zh-cn', + 'zh-tw' + ]; + + /** + * Master list of translated strings for template files. + */ + var PHRASES = { + 'newsletter': { + 'title': 'Get the latest Android developer news and tips that will help you find success on Google Play.', + 'requiredHint': '* Required Fields', + 'name': 'Full name', + 'email': 'Email address', + 'company': 'Company / developer name', + 'appUrl': 'One of your Play Store app URLs', + 'business': { + 'label': 'Which best describes your business:', + 'apps': 'Apps', + 'games': 'Games', + 'both': 'Apps & Games' + }, + 'confirmMailingList': 'Add me to the mailing list for the monthly newsletter and occasional emails about ' + + 'development and Google Play opportunities.', + 'privacyPolicy': 'I acknowledge that the information provided in this form will be subject to Google\'s ' + + '<a href="https://www.google.com/policies/privacy/" target="_blank">privacy policy</a>.', + 'languageVal': 'English', + 'successTitle': 'Hooray!', + 'successDetails': 'You have successfully signed up for the latest Android developer news and tips.', + 'languageValTarget': { + 'en': 'English', + 'ar': 'Arabic (العربيّة)', + 'in': 'Indonesian (Bahasa)', + 'fr': 'French (français)', + 'de': 'German (Deutsch)', + 'ja': 'Japanese (日本語)', + 'ko': 'Korean (한국어)', + 'ru': 'Russian (Русский)', + 'es': 'Spanish (español)', + 'th': 'Thai (ภาษาไทย)', + 'tr': 'Turkish (Türkçe)', + 'vi': 'Vietnamese (tiếng Việt)', + 'pt-br': 'Brazilian Portuguese (Português Brasileiro)', + 'zh-cn': 'Simplified Chinese (简体中文)', + 'zh-tw': 'Traditional Chinese (繁體中文)', + }, + 'resetLangTitle': "Browse this site in %{targetLang}?", + 'resetLangTextIntro': 'You requested a page in %{targetLang}, but your language preference for this site is %{lang}.', + 'resetLangTextCta': 'Would you like to change your language preference and browse this site in %{targetLang}? ' + + 'If you want to change your language preference later, use the language menu at the bottom of each page.', + 'resetLangButtonYes': 'Change Language', + 'resetLangButtonNo': 'Not Now' + } + }; + + /** + * Current locale. + */ + var locale = (function() { + var lang = window.readCookie('pref_lang'); + if (lang === 0 || LANGUAGES.indexOf(lang) === -1) { + lang = 'en'; + } + return lang; + })(); + var localeTarget = (function() { + var lang = getQueryVariable('hl'); + if (lang === false || LANGUAGES.indexOf(lang) === -1) { + lang = locale; + } + return lang; + })(); + + /** + * Global function shims for backwards compatibility + */ + window.changeNavLang = function() { + // Already done. + }; + + window.loadLangPref = function() { + // Languages pref already loaded. + }; + + window.getLangPref = function() { + return locale; + }; + + window.getLangTarget = function() { + return localeTarget; + }; + + // Expose polyglot instance for advanced localization. + var polyglot = window.polyglot = new window.Polyglot({ + locale: locale, + phrases: PHRASES + }); + + // When DOM is ready. + $(function() { + // Mark current locale in language picker. + $('#language').find('option[value="' + locale + '"]').attr('selected', true); + + $('html').dacTranslate().on('dac:domchange', function(e) { + $(e.target).dacTranslate(); + }); + }); + + $.fn.dacTranslate = function() { + // Translate strings in template markup: + + // OLD + // Having all translations in HTML does not scale well and bloats every page. + // Need to migrate this to data-l JS translations below. + if (locale !== 'en') { + var $links = this.find('a[' + locale + '-lang]'); + $links.each(function() { // for each link with a translation + var $link = $(this); + // put the desired language from the attribute as the text + $link.text($link.attr(locale + '-lang')); + }); + } + + // NEW + // A simple declarative api for JS translations. Feel free to extend as appropriate. + + // Miscellaneous string compilations + // Build full strings from localized substrings: + var myLocaleTarget = window.getLangTarget(); + var myTargetLang = window.polyglot.t("newsletter.languageValTarget." + myLocaleTarget); + var myLang = window.polyglot.t("newsletter.languageVal"); + var myTargetLangTitleString = window.polyglot.t("newsletter.resetLangTitle", {targetLang: myTargetLang}); + var myResetLangTextIntro = window.polyglot.t("newsletter.resetLangTextIntro", {targetLang: myTargetLang, lang: myLang}); + var myResetLangTextCta = window.polyglot.t("newsletter.resetLangTextCta", {targetLang: myTargetLang}); + //var myResetLangButtonYes = window.polyglot.t("newsletter.resetLangButtonYes", {targetLang: myTargetLang}); + + // Inject strings as text values in dialog components: + $("#langform .dac-modal-header-title").text(myTargetLangTitleString); + $("#langform #resetLangText").text(myResetLangTextIntro); + $("#langform #resetLangCta").text(myResetLangTextCta); + //$("#resetLangButtonYes").attr("data-t", window.polyglot.t(myResetLangButtonYes)); + + // Text: <div data-t="nav.home"></div> + // HTML: <div data-t="privacy" data-t-html></html> + this.find('[data-t]').each(function() { + var el = $(this); + var data = el.data(); + if (data.t) { + el[data.tHtml === '' ? 'html' : 'text'](polyglot.t(data.t)); + } + }); + + return this; + }; +})(); +/* ########## END LOCALIZATION ############ */ + +// Translations. These should eventually be moved into language-specific files and loaded on demand. +// jshint nonbsp:false +switch (window.getLangPref()) { + case 'ar': + window.polyglot.extend({ + 'newsletter': { + 'title': 'Google Play. يمكنك الحصول على آخر الأخبار والنصائح من مطوّري تطبيقات Android، مما يساعدك ' + + 'على تحقيق النجاح على', + 'requiredHint': '* حقول مطلوبة', + 'name': '. الاسم بالكامل ', + 'email': '. عنوان البريد الإلكتروني ', + 'company': '. اسم الشركة / اسم مطوّر البرامج', + 'appUrl': '. أحد عناوين URL لتطبيقاتك في متجر Play', + 'business': { + 'label': '. ما العنصر الذي يوضح طبيعة نشاطك التجاري بدقة؟ ', + 'apps': 'التطبيقات', + 'games': 'الألعاب', + 'both': 'التطبيقات والألعاب' + }, + 'confirmMailingList': 'إضافتي إلى القائمة البريدية للنشرة الإخبارية الشهرية والرسائل الإلكترونية التي يتم' + + ' إرسالها من حين لآخر بشأن التطوير وفرص Google Play.', + 'privacyPolicy': 'أقر بأن المعلومات المقدَّمة في هذا النموذج تخضع لسياسة خصوصية ' + + '<a href="https://www.google.com/intl/ar/policies/privacy/" target="_blank">Google</a>.', + 'languageVal': 'Arabic (العربيّة)', + 'successTitle': 'رائع!', + 'successDetails': 'لقد اشتركت بنجاح للحصول على آخر الأخبار والنصائح من مطوّري برامج Android.' + } + }); + break; + case 'zh-cn': + window.polyglot.extend({ + 'newsletter': { + 'title': '获取最新的 Android 开发者资讯和提示，助您在 Google Play 上取得成功。', + 'requiredHint': '* 必填字段', + 'name': '全名', + 'email': '电子邮件地址', + 'company': '公司/开发者名称', + 'appUrl': '您的某个 Play 商店应用网址', + 'business': { + 'label': '哪一项能够最准确地描述您的业务？', + 'apps': '应用', + 'games': '游戏', + 'both': '应用和游戏' + }, + 'confirmMailingList': '将我添加到邮寄名单，以便接收每月简报以及不定期发送的关于开发和 Google Play 商机的电子邮件。', + 'privacyPolicy': '我确认自己了解在此表单中提供的信息受 <a href="https://www.google.com/intl/zh-CN/' + + 'policies/privacy/" target="_blank">Google</a> 隐私权政策的约束。', + 'languageVal': 'Simplified Chinese (简体中文)', + 'successTitle': '太棒了！', + 'successDetails': '您已成功订阅最新的 Android 开发者资讯和提示。' + } + }); + break; + case 'zh-tw': + window.polyglot.extend({ + 'newsletter': { + 'title': '獲得 Android 開發人員的最新消息和各項秘訣，讓您在 Google Play 上輕鬆邁向成功之路。', + 'requiredHint': '* 必要欄位', + 'name': '全名', + 'email': '電子郵件地址', + 'company': '公司/開發人員名稱', + 'appUrl': '您其中一個 Play 商店應用程式的網址', + 'business': { + 'label': '為您的商家選取最合適的產品類別。', + 'apps': '應用程式', + 'games': '遊戲', + 'both': '應用程式和遊戲' + }, + 'confirmMailingList': '我想加入 Google Play 的郵寄清單，以便接收每月電子報和 Google Play 不定期寄送的電子郵件，' + + '瞭解關於開發和 Google Play 商機的資訊。', + 'privacyPolicy': '我瞭解，我在這張表單中提供的資訊將受到 <a href="' + + 'https://www.google.com/intl/zh-TW/policies/privacy/" target="_blank">Google</a> 隱私權政策.', + 'languageVal': 'Traditional Chinese (繁體中文)', + 'successTitle': '太棒了！', + 'successDetails': '您已經成功訂閱 Android 開發人員的最新消息和各項秘訣。' + } + }); + break; + case 'fr': + window.polyglot.extend({ + 'newsletter': { + 'title': 'Recevez les dernières actualités destinées aux développeurs Android, ainsi que des conseils qui ' + + 'vous mèneront vers le succès sur Google Play.', + 'requiredHint': '* Champs obligatoires', + 'name': 'Nom complet', + 'email': 'Adresse e-mail', + 'company': 'Nom de la société ou du développeur', + 'appUrl': 'Une de vos URL Play Store', + 'business': { + 'label': 'Quelle option décrit le mieux votre activité ?', + 'apps': 'Applications', + 'games': 'Jeux', + 'both': 'Applications et jeux' + }, + 'confirmMailingList': 'Ajoutez-moi à la liste de diffusion de la newsletter mensuelle et tenez-moi informé ' + + 'par des e-mails occasionnels de l\'évolution et des opportunités de Google Play.', + 'privacyPolicy': 'Je comprends que les renseignements fournis dans ce formulaire seront soumis aux <a href="' + + 'https://www.google.com/intl/fr/policies/privacy/" target="_blank">règles de confidentialité</a> de Google.', + 'languageVal': 'French (français)', + 'successTitle': 'Super !', + 'successDetails': 'Vous êtes bien inscrit pour recevoir les actualités et les conseils destinés aux ' + + 'développeurs Android.' + } + }); + break; + case 'de': + window.polyglot.extend({ + 'newsletter': { + 'title': 'Abonniere aktuelle Informationen und Tipps für Android-Entwickler und werde noch erfolgreicher ' + + 'bei Google Play.', + 'requiredHint': '* Pflichtfelder', + 'name': 'Vollständiger Name', + 'email': 'E-Mail-Adresse', + 'company': 'Unternehmens-/Entwicklername', + 'appUrl': 'Eine der URLs deiner Play Store App', + 'business': { + 'label': 'Welche der folgenden Kategorien beschreibt dein Unternehmen am besten?', + 'apps': 'Apps', + 'games': 'Spiele', + 'both': 'Apps und Spiele' + }, + 'confirmMailingList': 'Meine E-Mail-Adresse soll zur Mailingliste hinzugefügt werden, damit ich den ' + + 'monatlichen Newsletter sowie gelegentlich E-Mails zu Entwicklungen und Optionen bei Google Play erhalte.', + 'privacyPolicy': 'Ich bestätige, dass die in diesem Formular bereitgestellten Informationen gemäß der ' + + '<a href="https://www.google.com/intl/de/policies/privacy/" target="_blank">Datenschutzerklärung</a> von ' + + 'Google verwendet werden dürfen.', + 'languageVal': 'German (Deutsch)', + 'successTitle': 'Super!', + 'successDetails': 'Du hast dich erfolgreich angemeldet und erhältst jetzt aktuelle Informationen und Tipps ' + + 'für Android-Entwickler.' + } + }); + break; + case 'in': + window.polyglot.extend({ + 'newsletter': { + 'title': 'Receba as dicas e as notícias mais recentes para os desenvolvedores Android e seja bem-sucedido ' + + 'no Google Play.', + 'requiredHint': '* Bidang Wajib Diisi', + 'name': 'Nama lengkap', + 'email': 'Alamat email', + 'company': 'Nama pengembang / perusahaan', + 'appUrl': 'Salah satu URL aplikasi Play Store Anda', + 'business': { + 'label': 'Dari berikut ini, mana yang paling cocok dengan bisnis Anda?', + 'apps': 'Aplikasi', + 'games': 'Game', + 'both': 'Aplikasi dan Game' + }, + 'confirmMailingList': 'Tambahkan saya ke milis untuk mendapatkan buletin bulanan dan email sesekali mengenai ' + + 'perkembangan dan kesempatan yang ada di Google Play.', + 'privacyPolicy': 'Saya memahami bahwa informasi yang diberikan dalam formulir ini tunduk pada <a href="' + + 'https://www.google.com/intl/in/policies/privacy/" target="_blank">kebijakan privasi</a> Google.', + 'languageVal': 'Indonesian (Bahasa)', + 'successTitle': 'Hore!', + 'successDetails': 'Anda berhasil mendaftar untuk kiat dan berita pengembang Android terbaru.' + } + }); + break; + case 'it': + //window.polyglot.extend({ + // 'newsletter': { + // 'title': 'Receba as dicas e as notícias mais recentes para os desenvolvedores Android e seja bem-sucedido ' + + // 'no Google Play.', + // 'requiredHint': '* Campos obrigatórios', + // 'name': 'Nome completo', + // 'email': 'Endereço de Email', + // 'company': 'Nome da empresa / do desenvolvedor', + // 'appUrl': 'URL de um dos seus apps da Play Store', + // 'business': { + // 'label': 'Qual das seguintes opções melhor descreve sua empresa?', + // 'apps': 'Apps', + // 'games': 'Jogos', + // 'both': 'Apps e Jogos' + // }, + // 'confirmMailingList': 'Inscreva-me na lista de e-mails para que eu receba o boletim informativo mensal, ' + + // 'bem como e-mails ocasionais sobre o desenvolvimento e as oportunidades do Google Play.', + // 'privacyPolicy': 'Reconheço que as informações fornecidas neste formulário estão sujeitas à <a href="' + + // 'https://www.google.com.br/policies/privacy/" target="_blank">Política de Privacidade</a> do Google.', + // 'languageVal': 'Italian (italiano)', + // 'successTitle': 'Uhu!', + // 'successDetails': 'Você se inscreveu para receber as notícias e as dicas mais recentes para os ' + + // 'desenvolvedores Android.', + // } + //}); + break; + case 'ja': + window.polyglot.extend({ + 'newsletter': { + 'title': 'Google Play での成功に役立つ Android デベロッパー向けの最新ニュースやおすすめの情報をお届けします。', + 'requiredHint': '* 必須', + 'name': '氏名', + 'email': 'メールアドレス', + 'company': '会社名 / デベロッパー名', + 'appUrl': 'Play ストア アプリの URL（いずれか 1 つ）', + 'business': { + 'label': 'お客様のビジネスに最もよく当てはまるものをお選びください。', + 'apps': 'アプリ', + 'games': 'ゲーム', + 'both': 'アプリとゲーム' + }, + 'confirmMailingList': '開発や Google Play の最新情報に関する毎月発行のニュースレターや不定期発行のメールを受け取る', + 'privacyPolicy': 'このフォームに入力した情報に <a href="https://www.google.com/intl/ja/policies/privacy/" ' + + 'target="_blank">Google</a> のプライバシー ポリシーが適用', + 'languageVal': 'Japanese (日本語)', + 'successTitle': '完了です！', + 'successDetails': 'Android デベロッパー向けの最新ニュースやおすすめの情報の配信登録が完了しました。' + } + }); + break; + case 'ko': + window.polyglot.extend({ + 'newsletter': { + 'title': 'Google Play에서 성공을 거두는 데 도움이 되는 최신 Android 개발자 소식 및 도움말을 받아 보세요.', + 'requiredHint': '* 필수 입력란', + 'name': '이름', + 'email': '이메일 주소', + 'company': '회사/개발자 이름', + 'appUrl': 'Play 스토어 앱 URL 중 1개', + 'business': { + 'label': '다음 중 내 비즈니스를 가장 잘 설명하는 단어는 무엇인가요?', + 'apps': '앱', + 'games': '게임', + 'both': '앱 및 게임' + }, + 'confirmMailingList': '개발 및 Google Play 관련 소식에 관한 월별 뉴스레터 및 비정기 이메일을 받아보겠습니다.', + 'privacyPolicy': '이 양식에 제공한 정보는 <a href="https://www.google.com/intl/ko/policies/privacy/" ' + + 'target="_blank">Google의</a> 개인정보취급방침에 따라 사용됨을', + 'languageVal':'Korean (한국어)', + 'successTitle': '축하합니다!', + 'successDetails': '최신 Android 개발자 뉴스 및 도움말을 받아볼 수 있도록 가입을 완료했습니다.' + } + }); + break; + case 'pt-br': + window.polyglot.extend({ + 'newsletter': { + 'title': 'Receba as dicas e as notícias mais recentes para os desenvolvedores Android e seja bem-sucedido ' + + 'no Google Play.', + 'requiredHint': '* Campos obrigatórios', + 'name': 'Nome completo', + 'email': 'Endereço de Email', + 'company': 'Nome da empresa / do desenvolvedor', + 'appUrl': 'URL de um dos seus apps da Play Store', + 'business': { + 'label': 'Qual das seguintes opções melhor descreve sua empresa?', + 'apps': 'Apps', + 'games': 'Jogos', + 'both': 'Apps e Jogos' + }, + 'confirmMailingList': 'Inscreva-me na lista de e-mails para que eu receba o boletim informativo mensal, ' + + 'bem como e-mails ocasionais sobre o desenvolvimento e as oportunidades do Google Play.', + 'privacyPolicy': 'Reconheço que as informações fornecidas neste formulário estão sujeitas à <a href="' + + 'https://www.google.com.br/policies/privacy/" target="_blank">Política de Privacidade</a> do Google.', + 'languageVal': 'Brazilian Portuguese (Português Brasileiro)', + 'successTitle': 'Uhu!', + 'successDetails': 'Você se inscreveu para receber as notícias e as dicas mais recentes para os ' + + 'desenvolvedores Android.' + } + }); + break; + case 'ru': + window.polyglot.extend({ + 'newsletter': { + 'title': 'Хотите получать последние новости и советы для разработчиков Google Play? Заполните эту форму.', + 'requiredHint': '* Обязательные поля', + 'name': 'Полное имя', + 'email': 'Адрес электронной почты', + 'company': 'Название компании или имя разработчика', + 'appUrl': 'Ссылка на любое ваше приложение в Google Play', + 'business': { + 'label': 'Что вы создаете?', + 'apps': 'Приложения', + 'games': 'Игры', + 'both': 'Игры и приложения' + }, + 'confirmMailingList': 'Я хочу получать ежемесячную рассылку для разработчиков и другие полезные новости ' + + 'Google Play.', + 'privacyPolicy': 'Я предоставляю эти данные в соответствии с <a href="' + + 'https://www.google.com/intl/ru/policies/privacy/" target="_blank">Политикой конфиденциальности</a> Google.', + 'languageVal': 'Russian (Русский)', + 'successTitle': 'Поздравляем!', + 'successDetails': 'Теперь вы подписаны на последние новости и советы для разработчиков Android.' + } + }); + break; + case 'es': + window.polyglot.extend({ + 'newsletter': { + 'title': 'Recibe las últimas noticias y sugerencias para programadores de Android y logra tener éxito en ' + + 'Google Play.', + 'requiredHint': '* Campos obligatorios', + 'name': 'Dirección de correo electrónico', + 'email': 'Endereço de Email', + 'company': 'Nombre de la empresa o del programador', + 'appUrl': 'URL de una de tus aplicaciones de Play Store', + 'business': { + 'label': '¿Qué describe mejor a tu empresa?', + 'apps': 'Aplicaciones', + 'games': 'Juegos', + 'both': 'Juegos y aplicaciones' + }, + 'confirmMailingList': 'Deseo unirme a la lista de distribución para recibir el boletín informativo mensual ' + + 'y correos electrónicos ocasionales sobre desarrollo y oportunidades de Google Play.', + 'privacyPolicy': 'Acepto que la información que proporcioné en este formulario cumple con la <a href="' + + 'https://www.google.com/intl/es/policies/privacy/" target="_blank">política de privacidad</a> de Google.', + 'languageVal': 'Spanish (español)', + 'successTitle': '¡Felicitaciones!', + 'successDetails': 'El registro para recibir las últimas noticias y sugerencias para programadores de Android ' + + 'se realizó correctamente.' + } + }); + break; + case 'th': + window.polyglot.extend({ + 'newsletter': { + 'title': 'รับข่าวสารล่าสุดสำหรับนักพัฒนาซอฟต์แวร์ Android ตลอดจนเคล็ดลับที่จะช่วยให้คุณประสบความสำเร็จบน ' + + 'Google Play', + 'requiredHint': '* ช่องที่ต้องกรอก', + 'name': 'ชื่อและนามสกุล', + 'email': 'ที่อยู่อีเมล', + 'company': 'ชื่อบริษัท/นักพัฒนาซอฟต์แวร์', + 'appUrl': 'URL แอปใดแอปหนึ่งของคุณใน Play สโตร์', + 'business': { + 'label': 'ข้อใดตรงกับธุรกิจของคุณมากที่สุด', + 'apps': 'แอป', + 'games': 'เกม', + 'both': 'แอปและเกม' + }, + 'confirmMailingList': 'เพิ่มฉันลงในรายชื่ออีเมลเพื่อรับจดหมายข่าวรายเดือนและอีเมลเป็นครั้งคราวเกี่ยวกับก' + + 'ารพัฒนาซอฟต์แวร์และโอกาสใน Google Play', + 'privacyPolicy': 'ฉันรับทราบว่าข้อมูลที่ให้ไว้ในแบบฟอร์มนี้จะเป็นไปตามนโยบายส่วนบุคคลของ ' + + '<a href="https://www.google.com/intl/th/policies/privacy/" target="_blank">Google</a>', + 'languageVal': 'Thai (ภาษาไทย)', + 'successTitle': 'ไชโย!', + 'successDetails': 'คุณลงชื่อสมัครรับข่าวสารและเคล็ดลับล่าสุดสำหรับนักพัฒนาซอฟต์แวร์ Android เสร็จเรียบร้อยแล้ว' + } + }); + break; + case 'tr': + window.polyglot.extend({ + 'newsletter': { + 'title': 'Google Play\'de başarılı olmanıza yardımcı olacak en son Android geliştirici haberleri ve ipuçları.', + 'requiredHint': '* Zorunlu Alanlar', + 'name': 'Tam ad', + 'email': 'E-posta adresi', + 'company': 'Şirket / geliştirici adı', + 'appUrl': 'Play Store uygulama URL\'lerinizden biri', + 'business': { + 'label': 'İşletmenizi en iyi hangisi tanımlar?', + 'apps': 'Uygulamalar', + 'games': 'Oyunlar', + 'both': 'Uygulamalar ve Oyunlar' + }, + 'confirmMailingList': 'Beni, geliştirme ve Google Play fırsatlarıyla ilgili ara sıra gönderilen e-posta ' + + 'iletilerine ilişkin posta listesine ve aylık haber bültenine ekle.', + 'privacyPolicy': 'Bu formda sağlanan bilgilerin Google\'ın ' + + '<a href="https://www.google.com/intl/tr/policies/privacy/" target="_blank">Gizlilik Politikası\'na</a> ' + + 'tabi olacağını kabul ediyorum.', + 'languageVal': 'Turkish (Türkçe)', + 'successTitle': 'Yaşasın!', + 'successDetails': 'En son Android geliştirici haberleri ve ipuçlarına başarıyla kaydoldunuz.' + } + }); + break; + case 'vi': + window.polyglot.extend({ + 'newsletter': { + 'title': 'Nhận tin tức và mẹo mới nhất dành cho nhà phát triển Android sẽ giúp bạn tìm thấy thành công trên ' + + 'Google Play.', + 'requiredHint': '* Các trường bắt buộc', + 'name': 'Tên đầy đủ', + 'email': 'Địa chỉ email', + 'company': 'Tên công ty/nhà phát triển', + 'appUrl': 'Một trong số các URL ứng dụng trên cửa hàng Play của bạn', + 'business': { + 'label': 'Lựa chọn nào sau đây mô tả chính xác nhất doanh nghiệp của bạn?', + 'apps': 'Ứng dụng', + 'games': 'Trò chơi', + 'both': 'Ứng dụng và trò chơi' + }, + 'confirmMailingList': 'Thêm tôi vào danh sách gửi thư cho bản tin hàng tháng và email định kỳ về việc phát ' + + 'triển và cơ hội của Google Play.', + 'privacyPolicy': 'Tôi xác nhận rằng thông tin được cung cấp trong biểu mẫu này tuân thủ chính sách bảo mật ' + + 'của <a href="https://www.google.com/intl/vi/policies/privacy/" target="_blank">Google</a>.', + 'languageVal': 'Vietnamese (tiếng Việt)', + 'successTitle': 'Thật tuyệt!', + 'successDetails': 'Bạn đã đăng ký thành công nhận tin tức và mẹo mới nhất dành cho nhà phát triển của Android.' + } + }); + break; +} + (function($) { 'use strict'; function Modal(el, options) { this.el = $(el); - this.options = $.extend({}, ToggleModal.DEFAULTS_, options); + this.options = $.extend({}, options); this.isOpen = false; this.el.on('click', function(event) { - if (!$.contains($('.dac-modal-window')[0], event.target)) { + if (!$.contains(this.el.find('.dac-modal-window')[0], event.target)) { return this.el.trigger('modal-close'); } }.bind(this)); @@ -4941,14 +3893,14 @@ function showSamples() { }; Modal.prototype.close_ = function() { - 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) { + if ($("[data-modal='studio_tos'].dac-active").length) { location.reload(); } + this.el.removeClass('dac-active'); + $('body').removeClass('dac-modal-open'); + this.isOpen = false; }; Modal.prototype.open_ = function() { @@ -4957,19 +3909,14 @@ function showSamples() { this.isOpen = true; }; - function ToggleModal(el, options) { - this.el = $(el); - this.options = $.extend({}, ToggleModal.DEFAULTS_, options); - this.modal = this.options.modalToggle ? $('[data-modal="' + this.options.modalToggle + '"]') : - this.el.closest('[data-modal]'); - - this.el.on('click', this.clickHandler_.bind(this)); - } - - ToggleModal.prototype.clickHandler_ = function(event) { + function onClickToggleModal(event) { event.preventDefault(); - this.modal.trigger('modal-toggle'); - }; + var toggle = $(event.currentTarget); + var options = toggle.data(); + var modal = options.modalToggle ? $('[data-modal="' + options.modalToggle + '"]') : + toggle.closest('[data-modal]'); + modal.trigger('modal-toggle'); + } /** * jQuery plugin @@ -4995,71 +3942,716 @@ function showSamples() { $(this).dacModal($(this).data()); }); - $('[data-modal-toggle]').each(function() { - $(this).dacToggleModal($(this).data()); + $('html').on('click.modal', '[data-modal-toggle]', onClickToggleModal); + + // Check if url anchor is targetting a toggle to open the modal. + if (location.hash) { + var $elem = $(document.getElementById(location.hash.substr(1))); + if ($elem.attr('data-modal-toggle')) { + $elem.trigger('click'); + } + } + + 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); +/* Fullscreen - Toggle fullscreen mode for reference pages */ +(function($) { + 'use strict'; + + /** + * @param {HTMLElement} el - The DOM element. + * @constructor + */ + function Fullscreen(el) { + this.el = $(el); + this.html = $('html'); + this.icon = this.el.find('.dac-sprite'); + this.isFullscreen = window.readCookie(Fullscreen.COOKIE_) === 'true'; + this.activate_(); + this.el.on('click.dac-fullscreen', this.toggleHandler_.bind(this)); + } + + /** + * Cookie name for storing the state + * @type {string} + * @private + */ + Fullscreen.COOKIE_ = 'fullscreen'; + + /** + * Classes to modify the DOM + * @type {{mode: string, fullscreen: string, fullscreenExit: string}} + * @private + */ + Fullscreen.CLASSES_ = { + mode: 'dac-fullscreen-mode', + fullscreen: 'dac-fullscreen', + fullscreenExit: 'dac-fullscreen-exit' + }; + + /** + * Event listener for toggling fullscreen mode + * @param {MouseEvent} event + * @private + */ + Fullscreen.prototype.toggleHandler_ = function(event) { + event.stopPropagation(); + this.toggle(!this.isFullscreen, true); + }; + + /** + * Change the DOM based on current state. + * @private + */ + Fullscreen.prototype.activate_ = function() { + this.icon.toggleClass(Fullscreen.CLASSES_.fullscreen, !this.isFullscreen); + this.icon.toggleClass(Fullscreen.CLASSES_.fullscreenExit, this.isFullscreen); + this.html.toggleClass(Fullscreen.CLASSES_.mode, this.isFullscreen); + }; + + /** + * Toggle fullscreen mode and store the state in a cookie. + */ + Fullscreen.prototype.toggle = function() { + this.isFullscreen = !this.isFullscreen; + window.writeCookie(Fullscreen.COOKIE_, this.isFullscreen, null); + this.activate_(); + }; + + /** + * jQuery plugin + */ + $.fn.dacFullscreen = function() { + return this.each(function() { + new Fullscreen($(this)); + }); + }; +})(jQuery); + +(function($) { + 'use strict'; + + /** + * @param {HTMLElement} selected - The link that is selected in the nav. + * @constructor + */ + function HeaderTabs(selected) { + + // Don't highlight any tabs on the index page + if (location.pathname === '/index.html' || location.pathname === '/') { + //return; + } + + this.selected = $(selected); + this.selectedParent = this.selected.closest('.dac-nav-secondary').siblings('a'); + this.links = $('.dac-header-tabs a'); + + this.selectActiveTab(); + } + + HeaderTabs.prototype.selectActiveTab = function() { + var section = null; + + if (this.selectedParent.length) { + section = this.selectedParent.text(); + } else { + section = this.selected.text(); + } + + if (section) { + this.links.removeClass('selected'); + + this.links.filter(function() { + return $(this).text() === $.trim(section); + }).addClass('selected'); + } + }; + + /** + * jQuery plugin + */ + $.fn.dacHeaderTabs = function() { + return this.each(function() { + new HeaderTabs(this); + }); + }; +})(jQuery); + +(function($) { + 'use strict'; + var icon = $('<i/>').addClass('dac-sprite dac-nav-forward'); + var config = JSON.parse(window.localStorage.getItem('global-navigation') || '{}'); + var forwardLink = $('<span/>') + .addClass('dac-nav-link-forward') + .html(icon) + .attr('tabindex', 0) + .on('click keypress', function(e) { + if (e.type == 'keypress' && e.which == 13 || e.type == 'click') { + swap_(e); + } + }); + + /** + * @constructor + */ + function Nav(navigation) { + $('.dac-nav-list').dacCurrentPage().dacHeaderTabs().dacSidebarToggle($('body')); + + navigation.find('[data-reference-tree]').dacReferenceNav(); + + setupViews_(navigation.children().eq(0).children()); + + initCollapsedNavs(navigation.find('.dac-nav-sub-slider')); + + $('#dac-main-navigation').scrollIntoView('.selected') + } + + function updateStore(icon) { + var navClass = getCurrentLandingPage_(icon); + var isExpanded = icon.hasClass('dac-expand-less-black'); + var expandedNavs = config.expanded || []; + if (isExpanded) { + expandedNavs.push(navClass); + } else { + expandedNavs = expandedNavs.filter(function(item) { + return item !== navClass; + }); + } + config.expanded = expandedNavs; + window.localStorage.setItem('global-navigation', JSON.stringify(config)); + } + + function toggleSubNav_(icon) { + var isExpanded = icon.hasClass('dac-expand-less-black'); + icon.toggleClass('dac-expand-less-black', !isExpanded); + icon.toggleClass('dac-expand-more-black', isExpanded); + icon.data('sub-navigation.dac').slideToggle(200); + + updateStore(icon); + } + + function handleSubNavToggle_(event) { + event.preventDefault(); + var icon = $(event.target); + toggleSubNav_(icon); + } + + function getCurrentLandingPage_(icon) { + return icon.closest('li')[0].className.replace('dac-nav-item ', ''); + } + + // Setup sub navigation collapse/expand + function initCollapsedNavs(toggleIcons) { + toggleIcons.each(setInitiallyActive_($('body'))); + toggleIcons.on('click keypress', function(e) { + if (e.type == 'keypress' && e.which == 13 || e.type == 'click') { + handleSubNavToggle_(e); + } + }); + } + + function setInitiallyActive_(body) { + var expandedNavs = config.expanded || []; + return function(i, icon) { + icon = $(icon); + var subNav = icon.next(); + + if (!subNav.length) { + return; + } + + var landingPageClass = getCurrentLandingPage_(icon); + 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; + + icon.data('sub-navigation.dac', subNav); + icon.toggleClass('dac-expand-less-black', visible); + icon.toggleClass('dac-expand-more-black', !visible); + subNav.toggle(visible); + }; + } + + function setupViews_(views) { + if (views.length === 1) { + // Active tier 1 nav. + views.addClass('dac-active'); + } else { + // Activate back button and tier 2 nav. + views.slice(0, 2).addClass('dac-active'); + var selectedNav = views.eq(2).find('.selected').after(forwardLink); + var langAttr = selectedNav.attr(window.getLangPref() + '-lang'); + //form the label from locale attr if possible, else set to selectedNav text value + if ((typeof langAttr !== typeof undefined && langAttr !== false) && (langAttr !== '')) { + $('.dac-nav-back-title').text(langAttr); + } else { + $('.dac-nav-back-title').text(selectedNav.text()); + } + } + + // Navigation should animate. + setTimeout(function() { + views.removeClass('dac-no-anim'); + }, 10); + } + + function swap_(event) { + event.preventDefault(); + $(event.currentTarget).trigger('swap-content'); + } + + /** + * jQuery plugin + */ + $.fn.dacNav = function() { + return this.each(function() { + new Nav($(this)); + }); + }; +})(jQuery); + +/* global NAVTREE_DATA */ +(function($) { + /** + * Build the reference navigation with namespace dropdowns. + * @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 = $('[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_filepath, function(data, textStatus, xhr) { + if (xhr.status === 200) { + namespaceList.on( + 'click', 'a.dac-reference-nav-toggle', toggleResourcesHandler); + } + }); + + // No setup required if no resources are present + if (!resources.length) { + return; + } + + // The resources should be a part of selected namespace. + var overview = addResourcesToView(resources, selected); + + // Currently viewing Overview + 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(); + + // Mark dropdowns as open + listsToOpen.prev().removeClass('dac-closed'); + + // Scroll into view + 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(); + 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()); + } + + el.toggleClass('dac-closed').next().slideToggle(200); + } + } + + /** + * @param {String} namespace + * @returns {Array} namespace data + */ + function getDataForNamespace(namespace) { + var namespaceData = NAVTREE_DATA.filter(function(data) { + return data[0] === namespace; + }); + + return namespaceData.length ? namespaceData[0][2] : []; + } + + /** + * Build a list item for a resource + * @param {Array} resource + * @returns {String} + */ + function buildResourceItem(resource) { + return '<li class="api apilevel-' + resource[3] + '"><a href="/' + resource[1] + '">' + resource[0] + '</a></li>'; + } + + /** + * Build resources list items. + * @param {Array} resources + * @returns {String} + */ + function buildResourceList(resources) { + return '<li><h2>' + resources[0] + '</h2><ul>' + resources[2].map(buildResourceItem).join('') + '</ul>'; + } + + /** + * Build a resources view + * @param {Array} data + * @returns {jQuery} resources in an unordered list. + */ + function buildResourcesViewForData(data) { + return $('<ul>' + data.map(buildResourceList).join('') + '</ul>'); + } + + /** + * Add resources to a containing view. + * @param {jQuery} resources + * @param {jQuery} view + * @returns {jQuery} the overview link. + */ + function addResourcesToView(resources, view) { + var namespace = view.children().eq(0); + var overview = $('<a href="' + namespace.attr('href') + '">Overview</a>'); + + // Mark namespace with content; + namespace[0].hasResources = true; + + // Add correct classes / event listeners to resources. + resources.prepend($('<li>').html(overview)) + .find('a') + .addClass('dac-reference-nav-resource') + .end() + .find('h2').attr('tabindex', 0) + .addClass('dac-reference-nav-toggle dac-closed') + .on('click keypress', toggleResourcesHandler) + .end() + .add(resources.find('ul')) + .addClass('dac-reference-nav-resources') + .end() + .appendTo(view); + + 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)); + }); + }; +})(jQuery); + +/** Scroll a container to make a target element visible + This is called when the page finished loading. */ +$.fn.scrollIntoView = function(target) { + if ('string' === typeof target) { + target = this.find(target); + } + if (this.is(':visible')) { + if (target.length == 0) { + // If no selected item found, exit + return; + } + + // get the target element's offset from its container nav by measuring the element's offset + // relative to the document then subtract the container nav's offset relative to the document + var targetOffset = target.offset().top - this.offset().top; + var containerHeight = this.height(); + if (targetOffset > containerHeight * .8) { // multiply nav height by .8 so we move up the item + // if it's more than 80% down the nav + // scroll the item up by an amount equal to 80% the container height + this.scrollTop(targetOffset - (containerHeight * .8)); + } + } +}; + +(function($) { + $.fn.dacCurrentPage = function() { + // Highlight the header tabs... + // highlight Design tab + var baseurl = getBaseUri(window.location.pathname); + var urlSegments = baseurl.split('/'); + var navEl = this; + var body = $('body'); + var subNavEl = navEl.find('.dac-nav-secondary'); + var parentNavEl; + var selected; + // In NDK docs, highlight appropriate sub-nav + if (body.hasClass('dac-ndk')) { + if (body.hasClass('guide')) { + selected = navEl.find('> li.guides > a').addClass('selected'); + } else if (body.hasClass('reference')) { + selected = navEl.find('> li.reference > a').addClass('selected'); + } else if (body.hasClass('samples')) { + selected = navEl.find('> li.samples > a').addClass('selected'); + } else if (body.hasClass('downloads')) { + selected = navEl.find('> li.downloads > a').addClass('selected'); + } + } 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'); + } else if (body.hasClass('preview')) { + selected = navEl.find('> li.preview > a').addClass('selected'); + } + } else if (body.hasClass('design')) { + selected = navEl.find('> li.design > a').addClass('selected'); + // highlight Home nav + } 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 + if (urlSegments[1] === 'wear' || urlSegments[1] === 'tv' || + urlSegments[1] === 'auto') { + selected = subNavEl.find('li.' + urlSegments[1] + ' > a').addClass('selected'); + } else if (urlSegments[1] === 'about') { + selected = subNavEl.find('li.versions > a').addClass('selected'); + } else { + selected = parentNavEl.removeClass('has-subnav').addClass('selected'); + } + // highlight Develop nav + } else if (body.hasClass('develop') || body.hasClass('google')) { + parentNavEl = navEl.find('> li.develop > a'); + parentNavEl.addClass('has-subnav'); + // In Develop docs, also highlight appropriate sub-nav + if (urlSegments[1] === 'training') { + selected = subNavEl.find('li.training > a').addClass('selected'); + } else if (urlSegments[1] === 'guide') { + selected = subNavEl.find('li.guide > a').addClass('selected'); + } else if (urlSegments[1] === 'reference') { + // If the root is reference, but page is also part of Google Services, select Google + if (body.hasClass('google')) { + selected = subNavEl.find('li.google > a').addClass('selected'); + } else { + selected = subNavEl.find('li.reference > a').addClass('selected'); + } + } else if (body.hasClass('google')) { + selected = subNavEl.find('li.google > a').addClass('selected'); + } else if (body.hasClass('samples')) { + selected = subNavEl.find('li.samples > a').addClass('selected'); + } else { + selected = parentNavEl.removeClass('has-subnav').addClass('selected'); + } + // highlight Distribute nav + } else if (body.hasClass('distribute')) { + parentNavEl = navEl.find('> li.distribute > a'); + parentNavEl.addClass('has-subnav'); + // In Distribute docs, also highlight appropriate sub-nav + if (urlSegments[2] === 'users') { + selected = subNavEl.find('li.users > a').addClass('selected'); + } else if (urlSegments[2] === 'engage') { + selected = subNavEl.find('li.engage > a').addClass('selected'); + } else if (urlSegments[2] === 'monetize') { + selected = subNavEl.find('li.monetize > a').addClass('selected'); + } else if (urlSegments[2] === 'analyze') { + selected = subNavEl.find('li.analyze > a').addClass('selected'); + } else if (urlSegments[2] === 'tools') { + selected = subNavEl.find('li.disttools > a').addClass('selected'); + } else if (urlSegments[2] === 'stories') { + selected = subNavEl.find('li.stories > a').addClass('selected'); + } else if (urlSegments[2] === 'essentials') { + selected = subNavEl.find('li.essentials > a').addClass('selected'); + } else if (urlSegments[2] === 'googleplay') { + selected = subNavEl.find('li.googleplay > a').addClass('selected'); + } else { + selected = parentNavEl.removeClass('has-subnav').addClass('selected'); + } + } else if (body.hasClass('preview')) { + selected = navEl.find('> li.preview > a').addClass('selected'); + } + return $(selected); + }; +})(jQuery); + (function($) { 'use strict'; /** * Toggle the visabilty of the mobile navigation. * @param {HTMLElement} el - The DOM element. - * @param options + * @param {Object} options * @constructor */ function ToggleNav(el, options) { this.el = $(el); this.options = $.extend({}, ToggleNav.DEFAULTS_, options); - this.options.target = [this.options.navigation]; + this.body = $(document.body); + this.navigation_ = this.body.find(this.options.navigation); + this.el.on('click', this.clickHandler_.bind(this)); + } - if (this.options.body) {this.options.target.push('body')} - if (this.options.dimmer) {this.options.target.push(this.options.dimmer)} + ToggleNav.BREAKPOINT_ = 980; - this.el.on('click', this.clickHandler_.bind(this)); + /** + * Open on correct sizes + */ + 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); + } else if (window.innerWidth >= ToggleNav.BREAKPOINT_) { + body.addClass(ToggleNav.DEFAULTS_.activeClass); + } else { + body.removeClass(ToggleNav.DEFAULTS_.activeClass); + } } /** * ToggleNav Default Settings - * @type {{body: boolean, dimmer: string, navigation: string, toggleClass: string}} + * @type {{body: boolean, dimmer: string, navigation: string, activeClass: string}} * @private */ ToggleNav.DEFAULTS_ = { body: true, dimmer: '.dac-nav-dimmer', + animatingClass: 'dac-nav-animating', navigation: '[data-dac-nav]', - toggleClass: 'dac-nav-open' + activeClass: 'dac-nav-open' }; /** * The actual toggle logic. - * @param event + * @param {Event} event * @private */ ToggleNav.prototype.clickHandler_ = function(event) { event.preventDefault(); - $(this.options.target.join(', ')).toggleClass(this.options.toggleClass); + var animatingClass = this.options.animatingClass; + var body = this.body; + + body.addClass(animatingClass); + body.toggleClass(this.options.activeClass); + + setTimeout(function() { + body.removeClass(animatingClass); + }, this.navigation_.transitionDuration()); + + if (window.innerWidth >= ToggleNav.BREAKPOINT_) { + localStorage.setItem('navigation-open', body.hasClass(this.options.activeClass)); + } }; /** * jQuery plugin * @param {object} options - Override default options. */ - $.fn.dacToggleMobileNav = function(options) { + $.fn.dacToggleMobileNav = function() { return this.each(function() { - new ToggleNav(this, options); + var el = $(this); + new ToggleNav(el, el.data()); }); }; + $.fn.dacSidebarToggle = function(body) { + toggleSidebarVisibility(body); + $(window).on('resize', toggleSidebarVisibility.bind(null, body)); + }; + /** * Data Attribute API */ - $(window).on('load.aranja', function() { - $('[data-dac-toggle-nav]').each(function() { - $(this).dacToggleMobileNav($(this).data()); - }); + $(function() { + $('[data-dac-toggle-nav]').dacToggleMobileNav(); }); })(jQuery); @@ -5078,6 +4670,7 @@ function showSamples() { .attr('name', 'dac-newsletter-iframe') .attr('src', '') .insertBefore(this.form); + this.el.find('[data-newsletter-language]').val(window.polyglot.t('newsletter.languageVal')); this.form.on('submit', this.submitHandler_.bind(this)); } @@ -5136,6 +4729,652 @@ function showSamples() { }); })(jQuery); +/* globals METADATA, YOUTUBE_RESOURCES, BLOGGER_RESOURCES */ +window.metadata = {}; + +/** + * Prepare metadata and indices for querying. + */ +window.metadata.prepare = (function() { + // Helper functions. + function mergeArrays() { + return Array.prototype.concat.apply([], arguments); + } + + /** + * Creates lookup maps for a resource index. + * I.e. where MAP['some tag'][resource.id] === true when that resource has 'some tag'. + * @param resourceDict + * @returns {{}} + */ + function buildResourceLookupMap(resourceDict) { + var map = {}; + for (var key in resourceDict) { + var dictForKey = {}; + var srcArr = resourceDict[key]; + for (var i = 0; i < srcArr.length; i++) { + dictForKey[srcArr[i].index] = true; + } + map[key] = dictForKey; + } + return map; + } + + /** + * Merges metadata maps for english and the current language into the global store. + */ + function mergeMetadataMap(name, locale) { + if (locale && locale !== 'en' && METADATA[locale]) { + METADATA[name] = $.extend(METADATA.en[name], METADATA[locale][name]); + } else { + METADATA[name] = METADATA.en[name]; + } + } + + /** + * Index all resources by type, url, tag and category. + * @param resources + */ + function createIndices(resources) { + // URL, type, tag and category lookups + var byType = METADATA.byType = {}; + var byUrl = METADATA.byUrl = {}; + var byTag = METADATA.byTag = {}; + var byCategory = METADATA.byCategory = {}; + + for (var i = 0; i < resources.length; i++) { + var res = resources[i]; + + // Store index. + res.index = i; + + // Index by type. + var type = res.type; + if (type) { + byType[type] = byType[type] || []; + byType[type].push(res); + } + + // Index by tag. + var tags = res.tags || []; + for (var j = 0; j < tags.length; j++) { + var tag = tags[j]; + if (tag) { + byTag[tag] = byTag[tag] || []; + byTag[tag].push(res); + } + } + + // Index by category. + var category = res.category; + if (category) { + byCategory[category] = byCategory[category] || []; + byCategory[category].push(res); + } + + // Index by url. + var url = res.url; + if (url) { + res.baseUrl = url.replace(/^intl\/\w+[\/]/, ''); + byUrl[res.baseUrl] = res; + } + } + METADATA.hasType = buildResourceLookupMap(byType); + METADATA.hasTag = buildResourceLookupMap(byTag); + METADATA.hasCategory = buildResourceLookupMap(byCategory); + } + + return function() { + // Only once. + if (METADATA.all) { return; } + + // Get current language. + var locale = getLangPref(); + // Merge english resources. + 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]) { + 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); + mergeMetadataMap('searchHeroCollections', locale); + mergeMetadataMap('carousel', locale); + + // Create query indicies for resources. + createIndices(METADATA.all, locale); + + // Reference metadata. + METADATA.androidReference = mergeArrays( + window.DATA, window.SUPPORT_WEARABLE_DATA, window.SUPPORT_TEST_DATA); + METADATA.googleReference = mergeArrays(window.GMS_DATA, window.GCM_DATA); + }; +})(); + +/* global METADATA, util */ +window.metadata.query = (function($) { + var pageMap = {}; + + function buildResourceList(opts) { + window.metadata.prepare(); + var expressions = parseResourceQuery(opts.query || ''); + var instanceMap = {}; + var results = []; + + for (var i = 0; i < expressions.length; i++) { + var clauses = expressions[i]; + + // Get all resources for first clause + var resources = getResourcesForClause(clauses.shift()); + + // Concat to final results list + results = results.concat(resources.map(filterResources(clauses, i > 0, instanceMap)).filter(filterEmpty)); + } + + // Set correct order + if (opts.sortOrder && results.length) { + results = opts.sortOrder === 'random' ? util.shuffle(results) : results.sort(sortResultsByKey(opts.sortOrder)); + } + + // Slice max results. + if (opts.maxResults !== Infinity) { + results = results.slice(0, opts.maxResults); + } + + // Remove page level duplicates + if (opts.allowDuplicates === undefined || opts.allowDuplicates === 'false') { + results = results.filter(removePageLevelDuplicates); + + for (var index = 0; index < results.length; ++index) { + pageMap[results[index].index] = 1; + } + } + + return results; + } + + function filterResources(clauses, removeDuplicates, map) { + return function(resource) { + var resourceIsAllowed = true; + + // References must be defined. + if (resource === undefined) { + return; + } + + // Get canonical (localized) version of resource if possible. + resource = METADATA.byUrl[resource.baseUrl] || METADATA.byUrl[resource.url] || resource; + + // Filter out resources already used + if (removeDuplicates) { + resourceIsAllowed = !map[resource.index]; + } + + // Must fulfill all criteria + if (clauses.length > 0) { + resourceIsAllowed = resourceIsAllowed && doesResourceMatchClauses(resource, clauses); + } + + // Mark resource as used. + if (resourceIsAllowed) { + map[resource.index] = 1; + } + + return resourceIsAllowed && resource; + }; + } + + function filterEmpty(resource) { + return resource; + } + + function sortResultsByKey(key) { + var desc = key.charAt(0) === '-'; + + if (desc) { + key = key.substring(1); + } + + return function(x, y) { + return (desc ? -1 : 1) * (parseInt(x[key], 10) - parseInt(y[key], 10)); + }; + } + + function getResourcesForClause(clause) { + switch (clause.attr) { + case 'type': + return METADATA.byType[clause.value]; + case 'tag': + return METADATA.byTag[clause.value]; + case 'collection': + var resources = METADATA.collections[clause.value] || {}; + return getResourcesByUrlCollection(resources.resources); + case 'history': + return getResourcesByUrlCollection($.dacGetVisitedUrls(clause.value)); + case 'section': + return getResourcesByUrlCollection([clause.value].sections); + default: + return []; + } + } + + function getResourcesByUrlCollection(resources) { + return (resources || []).map(function(url) { + return METADATA.byUrl[url]; + }); + } + + function removePageLevelDuplicates(resource) { + return resource && !pageMap[resource.index]; + } + + function doesResourceMatchClauses(resource, clauses) { + for (var i = 0; i < clauses.length; i++) { + var map; + switch (clauses[i].attr) { + case 'type': + map = METADATA.hasType[clauses[i].value]; + break; + case 'tag': + map = METADATA.hasTag[clauses[i].value]; + break; + } + + if (!map || (!!clauses[i].negative ? map[resource.index] : !map[resource.index])) { + return clauses[i].negative; + } + } + + return true; + } + + function parseResourceQuery(query) { + // Parse query into array of expressions (expression e.g. 'tag:foo + type:video') + var expressions = []; + var expressionStrs = query.split(',') || []; + for (var i = 0; i < expressionStrs.length; i++) { + var expr = expressionStrs[i] || ''; + + // Break expression into clauses (clause e.g. 'tag:foo') + var clauses = []; + var clauseStrs = expr.split(/(?=[\+\-])/); + for (var j = 0; j < clauseStrs.length; j++) { + var clauseStr = clauseStrs[j] || ''; + + // Get attribute and value from clause (e.g. attribute='tag', value='foo') + var parts = clauseStr.split(':'); + var clause = {}; + + clause.attr = parts[0].replace(/^\s+|\s+$/g, ''); + if (clause.attr) { + if (clause.attr.charAt(0) === '+') { + clause.attr = clause.attr.substring(1); + } else if (clause.attr.charAt(0) === '-') { + clause.negative = true; + clause.attr = clause.attr.substring(1); + } + } + + if (parts.length > 1) { + clause.value = parts[1].replace(/^\s+|\s+$/g, ''); + } + + clauses.push(clause); + } + + if (!clauses.length) { + continue; + } + + expressions.push(clauses); + } + + return expressions; + } + + return buildResourceList; +})(jQuery); + +/* global METADATA, getLangPref */ + +window.metadata.search = (function() { + 'use strict'; + + var currentLang = getLangPref(); + + function search(query) { + window.metadata.prepare(); + return { + android: findDocsMatches(query, METADATA.androidReference), + docs: findDocsMatches(query, METADATA.googleReference), + resources: findResourceMatches(query) + }; + } + + function findDocsMatches(query, data) { + var results = []; + + for (var i = 0; i < data.length; i++) { + var s = data[i]; + if (query.length !== 0 && s.label.toLowerCase().indexOf(query.toLowerCase()) !== -1) { + results.push(s); + } + } + + rankAutocompleteApiResults(query, results); + + return results; + } + + function findResourceMatches(query) { + var results = []; + + // Search for matching JD docs + if (query.length >= 2) { + /* In some langs, spaces may be optional between certain non-Ascii word-glyphs. For + * those langs, only match query at word boundaries if query includes Ascii chars only. + */ + var NO_BOUNDARY_LANGUAGES = ['ja','ko','vi','zh-cn','zh-tw']; + var isAsciiOnly = /^[\u0000-\u007f]*$/.test(query); + var noBoundaries = (NO_BOUNDARY_LANGUAGES.indexOf(window.getLangPref()) !== -1); + var exprBoundary = (!isAsciiOnly && noBoundaries) ? '' : '(?:^|\\s)'; + var queryRegex = new RegExp(exprBoundary + query.toLowerCase(), 'g'); + + var all = METADATA.all; + for (var i = 0; i < all.length; i++) { + // current search comparison, with counters for tag and title, + // used later to improve ranking + var s = all[i]; + s.matched_tag = 0; + s.matched_title = 0; + var matched = false; + + // Check if query matches any tags; work backwards toward 1 to assist ranking + if (s.keywords) { + for (var j = s.keywords.length - 1; j >= 0; j--) { + // it matches a tag + if (s.keywords[j].toLowerCase().match(queryRegex)) { + matched = true; + s.matched_tag = j + 1; // add 1 to index position + } + } + } + + // Check if query matches doc title + if (s.title.toLowerCase().match(queryRegex)) { + matched = true; + s.matched_title = 1; + } + + // Remember the doc if it matches either + if (matched) { + results.push(s); + } + } + + // Improve the current results + results = lookupBetterResult(results); + + // Rank/sort all the matched pages + rankAutocompleteDocResults(results); + + return results; + } + } + + // Replaces a match with another resource by url, if it exists. + function lookupReplacementByUrl(match, url) { + var replacement = METADATA.byUrl[url]; + + // Replacement resource does not exists. + if (!replacement) { return; } + + replacement.matched_title = Math.max(replacement.matched_title, match.matched_title); + replacement.matched_tag = Math.max(replacement.matched_tag, match.matched_tag); + + return replacement; + } + + // Find the localized version of a page if it exists. + function lookupLocalizedVersion(match) { + return METADATA.byUrl[match.baseUrl] || METADATA.byUrl[match.url]; + } + + // Find the main page for a tutorial when matching a subpage. + function lookupTutorialIndex(match) { + // Guard for non index tutorial pages. + if (match.type !== 'training' || match.url.indexOf('index.html') >= 0) { return; } + + var indexUrl = match.url.replace(/[^\/]+$/, 'index.html'); + return lookupReplacementByUrl(match, indexUrl); + } + + // Find related results which are a better match for the user. + function lookupBetterResult(matches) { + var newMatches = []; + + matches = matches.filter(function(match) { + var newMatch = match; + newMatch = lookupTutorialIndex(newMatch) || newMatch; + newMatch = lookupLocalizedVersion(newMatch) || newMatch; + + if (newMatch !== match) { + newMatches.push(newMatch); + } + + return newMatch === match; + }); + + return toUnique(newMatches.concat(matches)); + } + + /* Order the jd doc result list based on match quality */ + function rankAutocompleteDocResults(matches) { + if (!matches || !matches.length) { + return; + } + + var _resultScoreFn = function(match) { + var score = 1.0; + + // if the query matched a tag + if (match.matched_tag > 0) { + // multiply score by factor relative to position in tags list (max of 3) + score *= 3 / match.matched_tag; + + // if it also matched the title + if (match.matched_title > 0) { + score *= 2; + } + } else if (match.matched_title > 0) { + score *= 3; + } + + if (match.lang === currentLang) { + score *= 5; + } + + return score; + }; + + for (var i = 0; i < matches.length; i++) { + matches[i].__resultScore = _resultScoreFn(matches[i]); + } + + matches.sort(function(a, b) { + var n = b.__resultScore - a.__resultScore; + + if (n === 0) { + // lexicographical sort if scores are the same + n = (a.title < b.title) ? -1 : 1; + } + + return n; + }); + } + + /* Order the result list based on match quality */ + function rankAutocompleteApiResults(query, matches) { + query = query || ''; + if (!matches || !matches.length) { + return; + } + + // helper function that gets the last occurence index of the given regex + // in the given string, or -1 if not found + var _lastSearch = function(s, re) { + if (s === '') { + return -1; + } + var l = -1; + var tmp; + while ((tmp = s.search(re)) >= 0) { + if (l < 0) { + l = 0; + } + l += tmp; + s = s.substr(tmp + 1); + } + return l; + }; + + // helper function that counts the occurrences of a given character in + // a given string + var _countChar = function(s, c) { + var n = 0; + for (var i = 0; i < s.length; i++) { + if (s.charAt(i) === c) { + ++n; + } + } + return n; + }; + + var queryLower = query.toLowerCase(); + var queryAlnum = (queryLower.match(/\w+/) || [''])[0]; + var partPrefixAlnumRE = new RegExp('\\b' + queryAlnum); + var partExactAlnumRE = new RegExp('\\b' + queryAlnum + '\\b'); + + var _resultScoreFn = function(result) { + // scores are calculated based on exact and prefix matches, + // and then number of path separators (dots) from the last + // match (i.e. favoring classes and deep package names) + var score = 1.0; + var labelLower = result.label.toLowerCase(); + var t; + var partsAfter; + t = _lastSearch(labelLower, partExactAlnumRE); + if (t >= 0) { + // exact part match + partsAfter = _countChar(labelLower.substr(t + 1), '.'); + score *= 200 / (partsAfter + 1); + } else { + t = _lastSearch(labelLower, partPrefixAlnumRE); + if (t >= 0) { + // part prefix match + partsAfter = _countChar(labelLower.substr(t + 1), '.'); + score *= 20 / (partsAfter + 1); + } + } + + return score; + }; + + for (var i = 0; i < matches.length; i++) { + // if the API is deprecated, default score is 0; otherwise, perform scoring + if (matches[i].deprecated === 'true') { + matches[i].__resultScore = 0; + } else { + matches[i].__resultScore = _resultScoreFn(matches[i]); + } + } + + matches.sort(function(a, b) { + var n = b.__resultScore - a.__resultScore; + + if (n === 0) { + // lexicographical sort if scores are the same + n = (a.label < b.label) ? -1 : 1; + } + + return n; + }); + } + + // Destructive but fast toUnique. + // http://stackoverflow.com/a/25082874 + function toUnique(array) { + var c; + var b = array.length || 1; + + while (c = --b) { + while (c--) { + if (array[b] === array[c]) { + array.splice(c, 1); + } + } + } + return array; + } + + return search; +})(); + (function($) { 'use strict'; @@ -5165,7 +5404,7 @@ function showSamples() { ScrollButton.DEFAULTS_ = { duration: 300, easing: 'swing', - offset: 0, + offset: '.dac-header', scrollContainer: 'html, body' }; @@ -5181,11 +5420,26 @@ function showSamples() { event.preventDefault(); + var position = this.getTargetPosition(); $(this.options.scrollContainer).animate({ - scrollTop: this.target.offset().top - this.options.offset + scrollTop: position - this.options.offset }, this.options); }; + ScrollButton.prototype.getTargetPosition = function() { + if (this.options.scrollContainer === ScrollButton.DEFAULTS_.scrollContainer) { + return this.target.offset().top; + } + var scrollContainer = $(this.options.scrollContainer)[0]; + var currentEl = this.target[0]; + var pos = 0; + while (currentEl !== scrollContainer && currentEl !== null) { + pos += currentEl.offsetTop; + currentEl = currentEl.offsetParent; + } + return pos; + }; + /** * jQuery plugin * @param {object} options - Override default options. @@ -5206,6 +5460,605 @@ function showSamples() { }); })(jQuery); +/* global getLangPref */ +(function($) { + var LANG; + + function getSearchLang() { + if (!LANG) { + LANG = getLangPref(); + + // Fix zh-cn to be zh-CN. + LANG = LANG.replace(/-\w+/, function(m) { return m.toUpperCase(); }); + } + return LANG; + } + + function customSearch(query, start) { + var searchParams = { + // current cse instance: + //cx: '001482626316274216503:zu90b7s047u', + // new cse instance: + cx: '000521750095050289010:zpcpi1ea4s8', + key: 'AIzaSyCFhbGnjW06dYwvRCU8h_zjdpS4PYYbEe8', + q: query, + start: start || 1, + num: 9, + hl: getSearchLang(), + fields: 'queries,items(pagemap,link,title,htmlSnippet,formattedUrl)' + }; + + return $.get('https://content.googleapis.com/customsearch/v1?' + $.param(searchParams)); + } + + function renderResults(el, results, searchAppliance) { + var referenceResults = searchAppliance.getReferenceResults(); + if (!results.items) { + el.append($('<div>').text('No results')); + return; + } + + for (var i = 0; i < results.items.length; i++) { + var item = results.items[i]; + var isDuplicate = false; + $(referenceResults.android).each(function(index, result) { + if (item.link.indexOf(result.link) > -1) { + isDuplicate = true; + return false; + } + }); + + if (!isDuplicate) { + var hasImage = item.pagemap && item.pagemap.cse_thumbnail; + var sectionMatch = item.link.match(/developer\.android\.com\/(\w*)/); + var section = (sectionMatch && sectionMatch[1]) || 'blog'; + + var entry = $('<div>').addClass('dac-custom-search-entry cols'); + + if (hasImage) { + var image = item.pagemap.cse_thumbnail[0]; + entry.append($('<div>').addClass('dac-custom-search-image-wrapper') + .append($('<div>').addClass('dac-custom-search-image').css('background-image', 'url(' + image.src + ')'))); + } + + entry.append($('<div>').addClass('dac-custom-search-text-wrapper') + .append($('<p>').addClass('dac-custom-search-section').text(section)) + .append( + $('<a>').text(item.title).attr('href', item.link).wrap('<h2>').parent().addClass('dac-custom-search-title') + ) + .append($('<p>').addClass('dac-custom-search-snippet').html(item.htmlSnippet.replace(/<br>/g, ''))) + .append($('<a>').addClass('dac-custom-search-link').text(item.formattedUrl).attr('href', item.link))); + + el.append(entry); + } + } + + if (results.queries.nextPage) { + var loadMoreButton = $('<button id="dac-custom-search-load-more">') + .addClass('dac-custom-search-load-more') + .text('Load more') + .click(function() { + loadMoreResults(el, results, searchAppliance); + }); + + el.append(loadMoreButton); + } + }; + + function loadMoreResults(el, results, searchAppliance) { + var query = results.queries.request[0].searchTerms; + var start = results.queries.nextPage[0].startIndex; + var loadMoreButton = el.find('#dac-custom-search-load-more'); + + loadMoreButton.text('Loading more...'); + + customSearch(query, start).then(function(results) { + loadMoreButton.remove(); + renderResults(el, results, searchAppliance); + }); + } + + $.fn.customSearch = function(query, searchAppliance) { + var el = $(this); + + customSearch(query).then(function(results) { + el.empty(); + renderResults(el, results, searchAppliance); + }); + }; +})(jQuery); + +/* global METADATA */ + +(function($) { + $.fn.dacSearchRenderHero = function(resources, query) { + var el = $(this); + el.empty(); + + var resource = METADATA.searchHeroCollections[query]; + + if (resource) { + el.dacHero(resource, true); + el.show(); + + return true; + } else { + el.hide(); + } + }; +})(jQuery); + +(function($) { + $.fn.dacSearchRenderReferences = function(results, query) { + var referenceCard = $('.suggest-card.reference'); + referenceCard.data('searchreferences.dac', {results: results, query: query}); + renderResults(referenceCard, results, query, false); + }; + + var ROW_COUNT_COLLAPSED = 20; + var ROW_COUNT_EXPANDED = 40; + var ROW_COUNT_GOOGLE_COLLAPSED = 1; + var ROW_COUNT_GOOGLE_EXPANDED = 8; + + function onSuggestionClick(e) { + devsite.analytics.trackAnalyticsEvent('event', + 'Suggestion Click', 'clicked: ' + $(e.currentTarget).attr('href'), + 'query: ' + $('#search_autocomplete').val().toLowerCase()); + } + + function buildLink(match) { + var link = $('<a>').attr('href', window.toRoot + match.link); + + var label = match.label; + var classNameStart = label.match(/[A-Z]/) ? label.search(/[A-Z]/) : label.lastIndexOf('.') + 1; + var newLink = '<span class="namespace">' + + label.substr(0, classNameStart) + + '</span>' + + label.substr(classNameStart, label.length); + + link.html(newLink); + return link; + } + + function buildSuggestion(match, query) { + var li = $('<li>').addClass('dac-search-results-reference-entry'); + + var link = buildLink(match); + link.highlightMatches(query); + li.append(link); + return li[0]; + } + + function buildResults(results, query) { + return results.map(function(match) { + return buildSuggestion(match, query); + }); + } + + function renderAndroidResults(list, gMatches, query) { + list.empty(); + + var header = $('<li class="dac-search-results-reference-header">android APIs</li>'); + list.append(header); + + if (gMatches.length > 0) { + list.removeClass('no-results'); + + var resources = buildResults(gMatches, query); + list.append(resources); + return true; + } else { + list.append('<li class="dac-search-results-reference-entry-empty">No results</li>'); + } + } + + function renderGoogleDocsResults(list, gGoogleMatches, query) { + list = $('.suggest-card.reference ul'); + + if (gGoogleMatches.length > 0) { + list.append('<li class="dac-search-results-reference-header">in Google Services</li>'); + + var resources = buildResults(gGoogleMatches, query); + list.append(resources); + + return true; + } + } + + function renderResults(referenceCard, results, query, expanded) { + var list = referenceCard.find('ul'); + list.toggleClass('is-expanded', !!expanded); + + // Figure out how many results we can show in our fixed size box. + var total = expanded ? ROW_COUNT_EXPANDED : ROW_COUNT_COLLAPSED; + var googleCount = expanded ? ROW_COUNT_GOOGLE_EXPANDED : ROW_COUNT_GOOGLE_COLLAPSED; + googleCount = Math.max(googleCount, total - results.android.length); + googleCount = Math.min(googleCount, results.docs.length); + + if (googleCount > 0) { + // If there are google results, reserve space for its header. + googleCount++; + } + + var androidCount = Math.max(0, total - googleCount); + if (androidCount === 0) { + // Reserve space for "No reference results" + googleCount--; + } + + renderAndroidResults(list, results.android.slice(0, androidCount), query); + renderGoogleDocsResults(list, results.docs.slice(0, googleCount - 1), query); + + var totalResults = results.android.length + results.docs.length; + if (totalResults === 0) { + list.addClass('no-results'); + } + + // Tweak see more logic to account for references. + var hasMore = totalResults > ROW_COUNT_COLLAPSED && !util.matchesMedia('mobile'); + if (hasMore) { + // We can't actually show all matches, only as many as the expanded list + // will fit, so we actually lie if the total results count is more + var moreCount = Math.min(totalResults, ROW_COUNT_EXPANDED + ROW_COUNT_GOOGLE_EXPANDED); + var $moreLink = $('<li class="dac-search-results-reference-entry-empty " data-toggle="show-more">see more matches</li>'); + list.append($moreLink.on('click', onToggleMore)); + } + var searchEl = $('#search-resources'); + searchEl.toggleClass('dac-has-more', searchEl.hasClass('dac-has-more') || (hasMore && !expanded)); + searchEl.toggleClass('dac-has-less', searchEl.hasClass('dac-has-less') || (hasMore && expanded)); + } + + function onToggleMore(e) { + var link = $(e.currentTarget); + var referenceCard = $('.suggest-card.reference'); + var data = referenceCard.data('searchreferences.dac'); + + if (util.matchesMedia('mobile')) { return; } + + renderResults(referenceCard, data.results, data.query, link.data('toggle') === 'show-more'); + } + + $(document).on('click', '.dac-search-results-resources [data-toggle="show-more"]', onToggleMore); + $(document).on('click', '.dac-search-results-resources [data-toggle="show-less"]', onToggleMore); + $(document).on('click', '.suggest-card.reference a', onSuggestionClick); +})(jQuery); + +(function($) { + function highlightPage(query, page) { + page.find('.title').highlightMatches(query); + } + + $.fn.dacSearchRenderResources = function(gDocsMatches, query) { + this.resourceWidget(gDocsMatches, { + itemsPerPage: 18, + initialResults: 6, + cardSizes: ['6x2'], + onRenderPage: highlightPage.bind(null, query) + }); + + return this; + }; +})(jQuery); + +/*global metadata */ + +(function($, metadata) { + 'use strict'; + + function Search() { + this.body = $('body'); + this.lastQuery = null; + this.searchResults = $('#search-results'); + this.searchClose = $('[data-search-close]'); + this.searchClear = $('[data-search-clear]'); + this.searchInput = $('#search_autocomplete'); + this.searchResultsContent = $('#dac-search-results-content'); + this.searchResultsFor = $('#search-results-for'); + this.searchResultsHistory = $('#dac-search-results-history'); + this.searchResultsResources = $('#search-resources'); + 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() { + this.searchHistory = window.dacStore('search-history'); + + this.searchInput.focus(this.onSearchChanged.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)); + + this.customSearch = $.fn.debounce(function(query) { + $('#dac-custom-search-results').customSearch(query, this); + }.bind(this), 1000); + // Start search shortcut (/) + $('body').keyup(function(event) { + if (event.which === 191 && $(event.target).is(':not(:input)')) { + this.searchInput.focus(); + } + }.bind(this)); + + $(window).on('popstate', this.onPopState.bind(this)); + $(window).hashchange(this.onHashChange.bind(this)); + this.onHashChange(); + }; + + Search.prototype.checkRedirectToIndex = function() { + var query = this.getUrlQuery(); + var target = window.getLangTarget(); + var prefix = (target !== 'en') ? '/intl/' + target : ''; + var pathname = location.pathname.slice(prefix.length); + if (query != null && pathname !== '/index.html') { + location.href = prefix + '/index.html' + location.hash; + return true; + } + }; + + Search.prototype.handleKeyboardShortcut = function(event) { + // Close (esc) + if (event.which === 27) { + this.searchClose.trigger('click'); + event.preventDefault(); + } + + // Previous result (up arrow) + if (event.which === 38) { + this.previousResult(); + event.preventDefault(); + } + + // Next result (down arrow) + if (event.which === 40) { + this.nextResult(); + event.preventDefault(); + } + + // Navigate to result (enter) + if (event.which === 13) { + this.navigateToResult(); + event.preventDefault(); + } + }; + + 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'); + + if (selectedLink.length) { + var found = $.inArray(selectedLink[0], links); + + selectedLink.removeClass('dac-selected'); + links.eq(found + relativeIndex).addClass('dac-selected'); + return true; + } else { + if (relativeIndex > 0) { + links.first().addClass('dac-selected'); + } + } + }; + + Search.prototype.previousResult = function() { + this.goToResult(-1); + }; + + Search.prototype.nextResult = function() { + this.goToResult(1); + }; + + Search.prototype.navigateToResult = function() { + var query = this.getQuery(); + var selectedLink = this.searchResults.find('.dac-selected'); + + if (selectedLink.length) { + selectedLink[0].click(); + } else { + this.searchHistory.push(query); + this.addQueryToUrl(query); + + var isMobileOrTablet = typeof window.orientation !== 'undefined'; + + if (isMobileOrTablet) { + this.searchInput.blur(); + } + } + }; + + Search.prototype.onHashChange = function() { + var query = this.getUrlQuery(); + if (query != null && query !== this.getQuery()) { + this.searchInput.val(query); + this.onSearchChanged(); + } + }; + + Search.prototype.clear = function() { + this.searchInput.val(''); + window.location.hash = ''; + this.onSearchChanged(); + this.searchInput.focus(); + }; + + Search.prototype.close = function() { + this.removeQueryFromUrl(); + this.searchInput.blur(); + this.hideOverlay(); + this.pageNav.focus(); + this.isOpen = false; + }; + + Search.prototype.getUrlQuery = function() { + var queryMatch = location.hash.match(/q=(.*)&?/); + return queryMatch && queryMatch[1] && decodeURI(queryMatch[1]); + }; + + Search.prototype.getQuery = function() { + return this.searchInput.val().replace(/(^ +)|( +$)/g, ''); + }; + + Search.prototype.getReferenceResults = function() { + return this.currQueryReferenceResults; + }; + + Search.prototype.onSearchChanged = function() { + var query = this.getQuery(); + + this.showOverlay(); + this.render(query); + }; + + Search.prototype.render = function(query) { + if (this.lastQuery === query) { return; } + + if (query.length < 2) { + query = ''; + } + + this.lastQuery = query; + this.searchResultsFor.text(query); + + // CSE results lag behind the metadata/reference results. We need to empty + // the CSE results and add 'Loading' text so user's aren't looking at two + // different sets of search results at one time. + var $loadingEl = + $('<div class="loadingCustomSearchResults">Loading Results...</div>'); + $('#dac-custom-search-results').empty().prepend($loadingEl); + + this.customSearch(query); + var metadataResults = metadata.search(query); + this.searchResultsResources.dacSearchRenderResources(metadataResults.resources, query); + this.searchResultsReference.dacSearchRenderReferences(metadataResults, query); + this.currQueryReferenceResults = metadataResults; + var hasHero = this.searchResultsHero.dacSearchRenderHero(metadataResults.resources, query); + var hasQuery = !!query; + + this.searchResultsReference.toggle(!hasHero); + this.searchResultsContent.toggle(hasQuery); + this.searchResultsHistory.toggle(!hasQuery); + this.addQueryToUrl(query); + this.pushState(); + }; + + Search.prototype.addQueryToUrl = function(query) { + var hash = 'q=' + encodeURI(query); + + if (query) { + if (window.history.replaceState) { + window.history.replaceState(null, '', '#' + hash); + } else { + window.location.hash = hash; + } + } + }; + + Search.prototype.onPopState = function() { + if (!this.getUrlQuery()) { + this.hideOverlay(); + this.searchHeader.unsetActiveState(); + } + }; + + Search.prototype.removeQueryFromUrl = function() { + window.location.hash = ''; + }; + + Search.prototype.pushState = function() { + if (window.history.pushState && !this.lastQuery.length) { + window.history.pushState(null, ''); + } + }; + + Search.prototype.showOverlay = function() { + this.isOpen = true; + this.body.addClass('dac-modal-open dac-search-open'); + }; + + Search.prototype.hideOverlay = function() { + this.body.removeClass('dac-modal-open dac-search-open'); + }; + + $(document).on('ready.aranja', function() { + var search = new Search(); + search.init(); + }); +})(jQuery, metadata); + +window.dacStore = (function(window) { + /** + * Creates a new persistent store. + * If localStorage is unavailable, the items are stored in memory. + * + * @constructor + * @param {string} name The name of the store + * @param {number} maxSize The maximum number of items the store can hold. + */ + var Store = function(name, maxSize) { + var content = []; + + var hasLocalStorage = !!window.localStorage; + + if (hasLocalStorage) { + try { + content = JSON.parse(window.localStorage.getItem(name) || []); + } catch (e) { + // Store contains invalid data + window.localStorage.removeItem(name); + } + } + + function push(item) { + if (content[0] === item) { + return; + } + + content.unshift(item); + + if (maxSize) { + content.splice(maxSize, content.length); + } + + if (hasLocalStorage) { + window.localStorage.setItem(name, JSON.stringify(content)); + } + } + + function all() { + // Return a copy + return content.slice(); + } + + return { + push: push, + all: all + }; + }; + + var stores = { + 'search-history': new Store('search-history', 3) + }; + + /** + * Get a named persistent store. + * @param {string} name + * @return {Store} + */ + return function getStore(name) { + return stores[name]; + }; +})(window); + (function($) { 'use strict'; @@ -5221,10 +6074,16 @@ function showSamples() { function SwapContent(el, options) { this.el = $(el); this.options = $.extend({}, SwapContent.DEFAULTS_, options); + this.options.dynamic = this.options.dynamic === 'true'; this.containers = this.el.find(this.options.container); 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 keypress', function(e) { + if (e.type == 'keypress' && e.which == 13 || e.type == 'click') { + this.swap(); + } + }.bind(this)); } /** @@ -5235,6 +6094,8 @@ function showSamples() { SwapContent.DEFAULTS_ = { activeClass: 'dac-active', container: '[data-swap-container]', + dynamic: 'true', + swapButton: '[data-swap-button]', transitionSpeed: 500 }; @@ -5268,9 +6129,16 @@ function showSamples() { * Perform the swap of content. */ SwapContent.prototype.swap = function() { - console.log(this.containers); this.containers.each(function(index, container) { container = $(container); + + if (!this.options.dynamic) { + container.children().toggleClass(this.options.activeClass); + this.complete.bind(this); + $('.' + this.options.activeClass).focus(); + return; + } + container.height(this.currentHeight(container)).children().toggleClass(this.options.activeClass); container.animate({height: this.currentHeight(container)}, this.options.transitionSpeed, this.complete.bind(this)); @@ -5297,6 +6165,178 @@ function showSamples() { }); })(jQuery); +/* Tabs */ +(function($) { + 'use strict'; + + /** + * @param {HTMLElement} el - The DOM element. + * @param {Object} options + * @constructor + */ + function Tabs(el, options) { + this.el = $(el); + this.options = $.extend({}, Tabs.DEFAULTS_, options); + this.init(); + } + + Tabs.DEFAULTS_ = { + activeClass: 'dac-active', + viewDataAttr: 'tab-view', + itemDataAttr: 'tab-item' + }; + + Tabs.prototype.init = function() { + var itemDataAttribute = '[data-' + this.options.itemDataAttr + ']'; + this.tabEl_ = this.el.find(itemDataAttribute); + this.tabViewEl_ = this.el.find('[data-' + this.options.viewDataAttr + ']'); + this.el.on('click.dac-tabs', itemDataAttribute, this.changeTabs.bind(this)); + }; + + Tabs.prototype.changeTabs = function(event) { + var current = $(event.currentTarget); + var index = current.index(); + + if (current.hasClass(this.options.activeClass)) { + current.add(this.tabViewEl_.eq(index)).removeClass(this.options.activeClass); + } else { + this.tabEl_.add(this.tabViewEl_).removeClass(this.options.activeClass); + current.add(this.tabViewEl_.eq(index)).addClass(this.options.activeClass); + } + }; + + /** + * jQuery plugin + */ + $.fn.dacTabs = function() { + return this.each(function() { + var el = $(this); + new Tabs(el, el.data()); + }); + }; + + /** + * Data Attribute API + */ + $(function() { + $('[data-tabs]').dacTabs(); + }); +})(jQuery); + +/* Toast Component */ +(function($) { + 'use strict'; + /** + * @constant + * @type {String} + */ + var LOCAL_STORAGE_KEY = 'toast-closed-index'; + + /** + * Dictionary from local storage. + */ + var toastDictionary = localStorage.getItem(LOCAL_STORAGE_KEY); + toastDictionary = toastDictionary ? JSON.parse(toastDictionary) : {}; + + /** + * Variable used for caching the body. + */ + var bodyCached; + + /** + * @param {HTMLElement} el - The DOM element. + * @param {Object} options + * @constructor + */ + function Toast(el, options) { + this.el = $(el); + this.options = $.extend({}, Toast.DEFAULTS_, options); + this.init(); + } + + Toast.DEFAULTS_ = { + closeBtnClass: 'dac-toast-close-btn', + closeDuration: 200, + visibleClass: 'dac-visible', + wrapClass: 'dac-toast-wrap' + }; + + /** + * Generate a close button. + * @returns {*|HTMLElement} + */ + Toast.prototype.closeBtn = function() { + this.closeBtnEl = this.closeBtnEl || $('<button class="' + this.options.closeBtnClass + '">' + + '<span class="dac-button dac-raised dac-primary">OK</span>' + + '</button>'); + return this.closeBtnEl; + }; + + /** + * Initialize a new toast element + */ + Toast.prototype.init = function() { + this.hash = this.el.text().replace(/[\s\n\t]/g, '').split('').slice(0, 128).join(''); + + if (toastDictionary[this.hash]) { + return; + } + + this.closeBtn().on('click', this.onClickHandler.bind(this)); + this.el.find('.' + this.options.wrapClass).append(this.closeBtn()); + this.el.addClass(this.options.visibleClass); + this.dynamicPadding(this.el.outerHeight()); + }; + + /** + * Add padding to make sure all page is visible. + */ + Toast.prototype.dynamicPadding = function(val) { + var currentPadding = parseInt(bodyCached.css('padding-bottom') || 0); + bodyCached.css('padding-bottom', val + currentPadding); + }; + + /** + * Remove a toast from the DOM + */ + Toast.prototype.remove = function() { + this.dynamicPadding(-this.el.outerHeight()); + this.el.remove(); + }; + + /** + * Handle removal of the toast. + */ + Toast.prototype.onClickHandler = function() { + // Only fadeout toasts from top of stack. Others are removed immediately. + var duration = this.el.index() === 0 ? this.options.closeDuration : 0; + this.el.fadeOut(duration, this.remove.bind(this)); + + // Save closed state. + toastDictionary[this.hash] = 1; + localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(toastDictionary)); + }; + + /** + * jQuery plugin + * @param {object} options - Override default options. + */ + $.fn.dacToast = function() { + return this.each(function() { + var el = $(this); + new Toast(el, el.data()); + }); + }; + + /** + * Data Attribute API + */ + $(function() { + bodyCached = $('#body-content'); + $('[data-toast]').dacToast(); + }); +})(jQuery); + (function($) { function Toggle(el) { $(el).on('click.dac.togglesection', this.toggle); @@ -5341,8 +6381,12 @@ function showSamples() { // If we're hiding, first set the maxHeight we're transitioning from. if (!visible) { - $el.css('maxHeight', contentHeight + 'px') - .resolveStyles(); + $el.css({ + transitionDuration: '0s', + maxHeight: contentHeight + 'px' + }) + .resolveStyles() + .css('transitionDuration', ''); } // Transition to new state @@ -5350,7 +6394,12 @@ function showSamples() { // Reset maxHeight to css value after transition. setTimeout(function() { - $el.css('maxHeight', ''); + $el.css({ + transitionDuration: '0s', + maxHeight: '' + }) + .resolveStyles() + .css('transitionDuration', ''); }, duration); } @@ -5375,3 +6424,267 @@ function showSamples() { $(document) .on('click.toggle', '[data-toggle="section"]', Toggle.prototype.toggle); })(jQuery); + +(function(window) { + /** + * Media query breakpoints. Should match CSS. + */ + var BREAKPOINTS = { + mobile: [0, 719], + tablet: [720, 959], + desktop: [960, 9999] + }; + + /** + * Fisher-Yates Shuffle (Knuth shuffle). + * @param {Array} input + * @returns {Array} shuffled array. + */ + function shuffle(input) { + for (var i = input.length; i >= 0; i--) { + var randomIndex = Math.floor(Math.random() * (i + 1)); + var randomItem = input[randomIndex]; + input[randomIndex] = input[i]; + input[i] = randomItem; + } + + return input; + } + + /** + * Matches media breakpoints like in CSS. + * @param {string} form of either mobile, tablet or desktop. + */ + function matchesMedia(form) { + var breakpoint = BREAKPOINTS[form]; + return window.innerWidth >= breakpoint[0] && window.innerWidth <= breakpoint[1]; + } + + window.util = { + shuffle: shuffle, + matchesMedia: matchesMedia + }; +})(window); + +(function($, window) { + 'use strict'; + + var YouTubePlayer = (function() { + var player; + + function VideoPlayer() { + this.mPlayerPaused = false; + this.doneSetup = false; + } + + VideoPlayer.prototype.setup = function() { + // loads the IFrame Player API code asynchronously. + $.getScript('https://www.youtube.com/iframe_api'); + + // Add the shadowbox HTML to the body + $('body').prepend( +'<div id="video-player" class="Video">' + + '<div id="video-overlay" class="Video-overlay" />' + + '<div class="Video-container">' + + '<div class="Video-frame">' + + '<span class="Video-loading">Loading…</span>' + + '<div id="youTubePlayer"></div>' + + '</div>' + + '<div class="Video-controls">' + + '<button id="picture-in-picture" class="Video-button Video-button--picture-in-picture">' + + '<button id="close-video" class="Video-button Video-button--close" />' + + '</div>' + + '</div>' + +'</div>'); + + this.videoPlayer = $('#video-player'); + + var pictureInPictureButton = this.videoPlayer.find('#picture-in-picture'); + pictureInPictureButton.on('click.aranja', this.toggleMinimizeVideo.bind(this)); + + var videoOverlay = this.videoPlayer.find('#video-overlay'); + var closeButton = this.videoPlayer.find('#close-video'); + var closeVideo = this.closeVideo.bind(this); + videoOverlay.on('click.aranja', closeVideo); + closeButton.on('click.aranja', closeVideo); + + this.doneSetup = true; + }; + + VideoPlayer.prototype.startYouTubePlayer = function(videoId) { + this.videoPlayer.show(); + + if (!this.isLoaded) { + this.queueVideo = videoId; + return; + } + + this.mPlayerPaused = false; + // check if we've already created this player + if (!this.youTubePlayer) { + // check if there's a start time specified + var idAndHash = videoId.split('#'); + var startTime = 0; + if (idAndHash.length > 1) { + startTime = idAndHash[1].split('t=')[1] !== undefined ? idAndHash[1].split('t=')[1] : 0; + } + // enable localized player + var lang = getLangPref(); + var captionsOn = lang === 'en' ? 0 : 1; + + this.youTubePlayer = new YT.Player('youTubePlayer', { + height: 720, + width: 1280, + videoId: idAndHash[0], + // jscs:disable requireCamelCaseOrUpperCaseIdentifiers + playerVars: {start: startTime, hl: lang, cc_load_policy: captionsOn}, + // jscs:enable + events: { + 'onReady': this.onPlayerReady.bind(this), + 'onStateChange': this.onPlayerStateChange.bind(this) + } + }); + } else { + // if a video different from the one already playing was requested, cue it up + if (videoId !== this.getVideoId()) { + this.youTubePlayer.cueVideoById(videoId); + } + this.youTubePlayer.playVideo(); + } + }; + + VideoPlayer.prototype.onPlayerReady = function(event) { + if (!isMobile) { + event.target.playVideo(); + this.mPlayerPaused = false; + } + }; + + VideoPlayer.prototype.toggleMinimizeVideo = function(event) { + event.stopPropagation(); + this.videoPlayer.toggleClass('Video--picture-in-picture'); + }; + + VideoPlayer.prototype.closeVideo = function() { + try { + this.youTubePlayer.pauseVideo(); + } catch (e) { + } + this.videoPlayer.fadeOut(200, function() { + this.videoPlayer.removeClass('Video--picture-in-picture'); + }.bind(this)); + }; + + VideoPlayer.prototype.getVideoId = function() { + // jscs:disable requireCamelCaseOrUpperCaseIdentifiers + return this.youTubePlayer && this.youTubePlayer.getVideoData().video_id; + // jscs:enable + }; + + /* Track youtube playback for analytics */ + VideoPlayer.prototype.onPlayerStateChange = function(event) { + var videoId = this.getVideoId(); + var currentTime = this.youTubePlayer && this.youTubePlayer.getCurrentTime(); + + // Video starts, send the video ID + if (event.data === YT.PlayerState.PLAYING) { + if (this.mPlayerPaused) { + devsite.analytics.trackAnalyticsEvent('event', + 'Videos', 'Resume', videoId); + } else { + // track the start playing event so we know from which page the video was selected + 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) { + 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) { + devsite.analytics.trackAnalyticsEvent('event', + 'Videos', 'Finished: ' + videoId, 'on: ' + currentTime); + this.mPlayerPaused = true; + } + }; + + return { + getPlayer: function() { + if (!player) { + player = new VideoPlayer(); + } + + return player; + } + }; + })(); + + var videoPlayer = YouTubePlayer.getPlayer(); + + window.onYouTubeIframeAPIReady = function() { + videoPlayer.isLoaded = true; + + if (videoPlayer.queueVideo) { + videoPlayer.startYouTubePlayer(videoPlayer.queueVideo); + } + }; + + function wrapLinkInPlayer(e) { + e.preventDefault(); + + if (!videoPlayer.doneSetup) { + videoPlayer.setup(); + } + + var videoIdMatches = $(e.currentTarget).attr('href').match(/(?:youtu.be\/|v=)([^&]*)/); + var videoId = videoIdMatches && videoIdMatches[1]; + + if (videoId) { + videoPlayer.startYouTubePlayer(videoId); + } + } + + $(document).on('click.video', 'a[href*="youtube.com/watch"], a[href*="youtu.be"]', wrapLinkInPlayer); +})(jQuery, window); + +/** + * Wide table + * + * Wraps tables in a scrollable area so you can read them on mobile. + */ +(function($) { + function initWideTable() { + $('table.jd-sumtable').each(function(i, table) { + $(table).wrap('<div class="dac-expand wide-table">'); + }); + } + + $(function() { + initWideTable(); + }); +})(jQuery); + +/** Utilities */ + +/* returns the given string with all HTML brackets converted to entities + TODO: move this to the site's JS library */ +function escapeHTML(string) { + return string.replace(/</g,"<") + .replace(/>/g,">"); +}; + +function getQueryVariable(variable) { + var query = window.location.search.substring(1); + var vars = query.split("&"); + for (var i=0;i<vars.length;i++) { + var pair = vars[i].split("="); + if(pair[0] == variable){return pair[1];} + } + return(false); +}; diff --git a/tools/droiddoc/templates-sdk/body_tag.cs b/tools/droiddoc/templates-sdk/body_tag.cs new file mode 100644 index 0000000000..5761b71f71 --- /dev/null +++ b/tools/droiddoc/templates-sdk/body_tag.cs @@ -0,0 +1,15 @@ +<body class="gc-documentation <?cs + if:(reference.gms || reference.gcm) + ?>google<?cs + /if ?><?cs + if:(guide||develop||training||reference||tools||sdk) + ?>develop<?cs + if:reference + ?> reference api apilevel-<?cs var:class.since ?><?cs var:package.since ?><?cs + /if ?><?cs + elif:design + ?>design<?cs + elif:distribute + ?>distribute<?cs + /if ?>"> +<div id="doc-api-level" class="<?cs var:class.since ?><?cs var:package.since ?>" style="display:none"></div> diff --git a/tools/droiddoc/templates-sdk/class.cs b/tools/droiddoc/templates-sdk/class.cs index 8312b25de0..dee7a4c9d0 100644 --- a/tools/droiddoc/templates-sdk/class.cs +++ b/tools/droiddoc/templates-sdk/class.cs @@ -1,261 +1,92 @@ -<?cs include:"doctype.cs" ?> +<?cs # THIS CREATES A CLASS OR INTERFACE PAGE FROM .java FILES ?> <?cs include:"macros.cs" ?> <?cs include:"macros_override.cs" ?> -<html<?cs if:devsite ?> devsite<?cs /if ?>> -<?cs include:"head_tag.cs" ?> -<body class="gc-documentation <?cs if:(reference.gms || reference.gcm) ?>google<?cs /if ?> - <?cs if:(guide||develop||training||reference||tools||sdk) ?>develop<?cs - if:reference ?> reference<?cs - /if ?><?cs - elif:design ?>design<?cs - elif:distribute ?>distribute<?cs - /if ?>" itemscope itemtype="http://schema.org/Article"> - <div id="doc-api-level" class="<?cs var:class.since ?>" style="display:none"></div> - <a name="top"></a> -<?cs include:"header.cs" ?> - -<div class="col-12" id="doc-col"> - -<div id="api-info-block"> - -<?cs # are there inherited members ?> -<?cs each:cl=class.inherited ?> - <?cs if:subcount(cl.methods) ?> - <?cs set:inhmethods = #1 ?> - <?cs /if ?> - <?cs if:subcount(cl.constants) ?> - <?cs set:inhconstants = #1 ?> - <?cs /if ?> - <?cs if:subcount(cl.fields) ?> - <?cs set:inhfields = #1 ?> - <?cs /if ?> - <?cs if:subcount(cl.attrs) ?> - <?cs set:inhattrs = #1 ?> - <?cs /if ?> -<?cs /each ?> - -<div class="sum-details-links"> -<?cs if:inhattrs || inhconstants || inhfields || inhmethods || (!class.subclasses.hidden && - (subcount(class.subclasses.direct) || subcount(class.subclasses.indirect))) ?> -Summary: -<?cs if:subcount(class.inners) ?> - <a href="#nestedclasses">Nested Classes</a> - <?cs set:linkcount = #1 ?> -<?cs /if ?> -<?cs if:subcount(class.attrs) ?> - <?cs if:linkcount ?>| <?cs /if ?><a href="#lattrs">XML Attrs</a> - <?cs set:linkcount = #1 ?> -<?cs /if ?> -<?cs if:inhattrs ?> - <?cs if:linkcount ?>| <?cs /if ?><a href="#inhattrs">Inherited XML Attrs</a> - <?cs set:linkcount = #1 ?> -<?cs /if ?> -<?cs if:subcount(class.enumConstants) ?> - <?cs if:linkcount ?>| <?cs /if ?><a href="#enumconstants">Enums</a> - <?cs set:linkcount = #1 ?> -<?cs /if ?> -<?cs if:subcount(class.constants) ?> - <?cs if:linkcount ?>| <?cs /if ?><a href="#constants">Constants</a> - <?cs set:linkcount = #1 ?> -<?cs /if ?> -<?cs if:inhconstants ?> - <?cs if:linkcount ?>| <?cs /if ?><a href="#inhconstants">Inherited Constants</a> - <?cs set:linkcount = #1 ?> -<?cs /if ?> -<?cs if:subcount(class.fields) ?> - <?cs if:linkcount ?>| <?cs /if ?><a href="#lfields">Fields</a> - <?cs set:linkcount = #1 ?> -<?cs /if ?> -<?cs if:inhfields ?> - <?cs if:linkcount ?>| <?cs /if ?><a href="#inhfields">Inherited Fields</a> - <?cs set:linkcount = #1 ?> -<?cs /if ?> -<?cs if:subcount(class.ctors.public) ?> - <?cs if:linkcount ?>| <?cs /if ?><a href="#pubctors">Ctors</a> - <?cs set:linkcount = #1 ?> -<?cs /if ?> -<?cs if:subcount(class.ctors.protected) ?> - <?cs if:linkcount ?>| <?cs /if ?><a href="#proctors">Protected Ctors</a> - <?cs set:linkcount = #1 ?> -<?cs /if ?> -<?cs if:subcount(class.methods.public) ?> - <?cs if:linkcount ?>| <?cs /if ?><a href="#pubmethods">Methods</a> - <?cs set:linkcount = #1 ?> -<?cs /if ?> -<?cs if:subcount(class.methods.protected) ?> - <?cs if:linkcount ?>| <?cs /if ?><a href="#promethods">Protected Methods</a> - <?cs set:linkcount = #1 ?> -<?cs /if ?> -<?cs if:inhmethods ?> - <?cs if:linkcount ?>| <?cs /if ?><a href="#inhmethods">Inherited Methods</a> -<?cs /if ?> -| <a href="#" onclick="return toggleAllClassInherited()" id="toggleAllClassInherited">[Expand All]</a> -<?cs /if ?> -</div><!-- end sum-details-links --> -<div class="api-level"> - <?cs call:since_tags(class) ?><?cs - if:class.deprecatedsince - ?><br>Deprecated since <a href="<?cs var:toroot ?>guide/topics/manifest/uses-sdk-element.html#ApiLevels" - >API level <?cs var:class.deprecatedsince ?></a><?cs - /if ?> - <?cs call:federated_refs(class) ?> -</div> -</div><!-- end api-info-block --> - -<?cs # this next line must be exactly like this to be parsed by eclipse ?> -<!-- ======== START OF CLASS DATA ======== --> - -<div id="jd-header"> - <?cs var:class.scope ?> - <?cs var:class.static ?> - <?cs var:class.final ?> - <?cs var:class.abstract ?> - <?cs var:class.kind ?> -<h1 itemprop="name"><?cs var:class.name ?></h1> - -<?cs set:colspan = subcount(class.inheritance) ?> -<?cs each:supr = class.inheritance ?> - <?cs if:colspan == 2 ?> - extends <?cs call:type_link(supr.short_class) ?><br/> - <?cs /if ?> - <?cs if:last(supr) && subcount(supr.interfaces) ?> - implements - <?cs each:t=supr.interfaces ?> - <?cs call:type_link(t) ?> - <?cs /each ?> - <?cs /if ?> - <?cs set:colspan = colspan-1 ?> -<?cs /each ?> -<?cs call:show_annotations_list(class) ?> - -</div><!-- end header --> - -<div id="naMessage"></div> - -<div id="jd-content" class="api apilevel-<?cs var:class.since ?>"> -<table class="jd-inheritance-table"> -<?cs set:colspan = subcount(class.inheritance) ?> -<?cs each:supr = class.inheritance ?> - <tr> - <?cs loop:i = 1, (subcount(class.inheritance)-colspan), 1 ?> - <td class="jd-inheritance-space"> <?cs if:(subcount(class.inheritance)-colspan) == i ?> ↳<?cs /if ?></td> - <?cs /loop ?> - <td colspan="<?cs var:colspan ?>" class="jd-inheritance-class-cell"><?cs - if:colspan == 1 - ?><?cs call:class_name(class.qualifiedType) ?><?cs - else - ?><?cs call:type_link(supr.class) ?><?cs - /if ?></td> - </tr> - <?cs set:colspan = colspan-1 ?> -<?cs /each ?> -</table> - -<?cs # this next line must be exactly like this to be parsed by eclipse ?> - -<?cs if:subcount(class.subclasses.direct) && !class.subclasses.hidden ?> -<table class="jd-sumtable jd-sumtable-subclasses"><tr><td colspan="12" style="border:none;margin:0;padding:0;"> -<?cs call:expando_trigger("subclasses-direct", "closed") ?>Known Direct Subclasses -<?cs call:expandable_class_list("subclasses-direct", class.subclasses.direct, "list") ?> -</td></tr></table> -<?cs /if ?> - -<?cs if:subcount(class.subclasses.indirect) && !class.subclasses.hidden ?> -<table class="jd-sumtable jd-sumtable-subclasses"><tr><td colspan="12" style="border:none;margin:0;padding:0;"> -<?cs call:expando_trigger("subclasses-indirect", "closed") ?>Known Indirect Subclasses -<?cs call:expandable_class_list("subclasses-indirect", class.subclasses.indirect, "list") ?> -</td></tr></table> -<?cs /if ?> - -<div class="jd-descr"> -<?cs call:deprecated_warning(class) ?> -<?cs if:subcount(class.descr) ?> -<h2>Class Overview</h2> -<p itemprop="articleBody"><?cs call:tag_list(class.descr) ?></p> -<?cs /if ?> - -<?cs call:see_also_tags(class.seeAlso) ?> - -</div><!-- jd-descr --> - - -<?cs # summary macros ?> - -<?cs def:write_method_summary(methods, included) ?> +<?cs +#################### +# MACRO FUNCTION USED ONLY IN THIS TEMPLATE TO GENERATE API REFERENCE +# FIRST, THE FUNCTIONS FOR THE SUMMARY AT THE TOP OF THE PAGE +#################### +?> + +<?cs +# Prints the table cells for the summary of methods. +?><?cs def:write_method_summary(methods, included) ?> <?cs set:count = #1 ?> <?cs each:method = methods ?> - <?cs # The apilevel-N class MUST BE LAST in the sequence of class names ?> - <tr class="<?cs if:count % #2 ?>alt-color<?cs /if ?> api apilevel-<?cs var:method.since ?>" > - <td class="jd-typecol"><nobr> - <?cs var:method.abstract ?> - <?cs var:method.default ?> - <?cs var:method.static ?> - <?cs var:method.final ?> - <?cs call:type_link(method.generic) ?> - <?cs call:type_link(method.returnType) ?></nobr> - </td> - <td class="jd-linkcol" width="100%"><nobr> - <span class="sympad"><?cs call:cond_link(method.name, toroot, method.href, included) ?></span>(<?cs call:parameter_list(method.params) ?>)</nobr> - <?cs if:subcount(method.shortDescr) || subcount(method.deprecated) ?> - <div class="jd-descrdiv"> - <?cs call:short_descr(method) ?> - <?cs call:show_annotations_list(method) ?> - </div> + <?cs # The apilevel-N class MUST BE LAST in the sequence of class names ?> + <tr class="api apilevel-<?cs var:method.since ?>" > + <?cs # leave out this cell if there is no return type = if constructors ?> + <?cs if:subcount(method.returnType) ?> + <td><code> + <?cs var:method.abstract ?> + <?cs var:method.default ?> + <?cs var:method.static ?> + <?cs var:method.final ?> + <?cs call:type_link(method.generic) ?> + <?cs call:type_link(method.returnType) ?></code> + </td> <?cs /if ?> - </td></tr> -<?cs set:count = count + #1 ?> + <td width="100%"> + <code> + <?cs call:cond_link(method.name, toroot, method.href, included) ?>(<?cs call:parameter_list(method.params, 0) ?>) + </code> + <?cs if:subcount(method.shortDescr) || subcount(method.deprecated) ?> + <p><?cs call:short_descr(method) ?> + <?cs call:show_annotations_list(method) ?></p> + <?cs /if ?> + </td> + </tr> + <?cs set:count = count + #1 ?> <?cs /each ?> <?cs /def ?> -<?cs def:write_field_summary(fields, included) ?> +<?cs +# Print the table cells for the summary of fields. +?><?cs def:write_field_summary(fields, included) ?> <?cs set:count = #1 ?> - <?cs each:field=fields ?> - <tr class="<?cs if:count % #2 ?>alt-color<?cs /if ?> api apilevel-<?cs var:field.since ?>" > - <td class="jd-typecol"><nobr> - <?cs var:field.scope ?> - <?cs var:field.static ?> - <?cs var:field.final ?> - <?cs call:type_link(field.type) ?></nobr></td> - <td class="jd-linkcol"><?cs call:cond_link(field.name, toroot, field.href, included) ?></td> - <td class="jd-descrcol" width="100%"> - <?cs call:short_descr(field) ?> - <?cs call:show_annotations_list(field) ?> - </td> - </tr> - <?cs set:count = count + #1 ?> - <?cs /each ?> +<?cs each:field=fields ?> + <tr class="api apilevel-<?cs var:field.since ?>" > + <td><code> + <?cs var:field.scope ?> + <?cs var:field.static ?> + <?cs var:field.final ?> + <?cs call:type_link(field.type) ?></code></td> + <td width="100%"> + <code><?cs call:cond_link(field.name, toroot, field.href, included) ?></code> + <p><?cs call:short_descr(field) ?> + <?cs call:show_annotations_list(field) ?></p> + </td> + </tr> + <?cs set:count = count + #1 ?> +<?cs /each ?> <?cs /def ?> -<?cs def:write_constant_summary(fields, included) ?> +<?cs +# Print the table cells for the summary of constants +?><?cs def:write_constant_summary(fields, included) ?> <?cs set:count = #1 ?> <?cs each:field=fields ?> - <tr class="<?cs if:count % #2 ?>alt-color<?cs /if ?> api apilevel-<?cs var:field.since ?>" > - <td class="jd-typecol"><?cs call:type_link(field.type) ?></td> - <td class="jd-linkcol"><?cs call:cond_link(field.name, toroot, field.href, included) ?></td> - <td class="jd-descrcol" width="100%"> - <?cs call:short_descr(field) ?> - <?cs call:show_annotations_list(field) ?> + <tr class="api apilevel-<?cs var:field.since ?>" > + <td><code><?cs call:type_link(field.type) ?></code></td> + <td width="100%"> + <code><?cs call:cond_link(field.name, toroot, field.href, included) ?></code> + <p><?cs call:short_descr(field) ?> + <?cs call:show_annotations_list(field) ?></p> </td> </tr> <?cs set:count = count + #1 ?> <?cs /each ?> <?cs /def ?> -<?cs def:write_attr_summary(attrs, included) ?> +<?cs +# Print the table cells for the summary of attributes +?><?cs def:write_attr_summary(attrs, included) ?> <?cs set:count = #1 ?> - <tr> - <td><nobr><em>Attribute Name</em></nobr></td> - <td><nobr><em>Related Method</em></nobr></td> - <td><nobr><em>Description</em></nobr></td> - </tr> <?cs each:attr=attrs ?> - <tr class="<?cs if:count % #2 ?>alt-color<?cs /if ?> api apilevel-<?cs var:attr.since ?>" > - <td class="jd-linkcol"><?cs if:included ?><a href="<?cs var:toroot ?><?cs var:attr.href ?>"><?cs /if ?><?cs var:attr.name ?><?cs if:included ?></a><?cs /if ?></td> - <td class="jd-linkcol"><?cs each:m=attr.methods ?> - <?cs call:cond_link(m.name, toroot, m.href, included) ?> - <?cs /each ?> - </td> - <td class="jd-descrcol" width="100%"> + <tr class="api apilevel-<?cs var:attr.since ?>" > + <td><?cs if:included ?><a href="<?cs var:toroot ?><?cs var:attr.href ?>"><?cs /if + ?><code><?cs var:attr.name ?></code><?cs if:included ?></a><?cs /if ?></td> + <td width="100%"> <?cs call:short_descr(attr) ?> <?cs call:show_annotations_list(attr) ?> </td> @@ -264,30 +95,220 @@ Summary: <?cs /each ?> <?cs /def ?> -<?cs def:write_inners_summary(classes) ?> +<?cs +# Print the table cells for the inner classes +?><?cs def:write_inners_summary(classes) ?> <?cs set:count = #1 ?> <?cs each:cl=class.inners ?> - <tr class="<?cs if:count % #2 ?>alt-color<?cs /if ?> api apilevel-<?cs var:cl.since ?>" > - <td class="jd-typecol"><nobr> + <tr class="api apilevel-<?cs var:cl.since ?>" > + <td class="jd-typecol"><code> <?cs var:cl.scope ?> - <?cs var:cl.static ?> - <?cs var:cl.final ?> + <?cs var:cl.static ?> + <?cs var:cl.final ?> <?cs var:cl.abstract ?> - <?cs var:cl.kind ?></nobr></td> - <td class="jd-linkcol"><?cs call:type_link(cl.type) ?></td> + <?cs var:cl.kind ?></code></td> <td class="jd-descrcol" width="100%"> - <?cs call:short_descr(cl) ?> - <?cs call:show_annotations_list(cl) ?> + <code><?cs call:type_link(cl.type) ?></code> + <p><?cs call:short_descr(cl) ?> + <?cs call:show_annotations_list(cl) ?></p> </td> </tr> <?cs set:count = count + #1 ?> <?cs /each ?> <?cs /def ?> +<?cs +################### +# END OF FUNCTIONS FOR API SUMMARY +# START OF FUNCTIONS FOR THE API DETAILS +################### +?> +<?cs +# Print the table cells for the summary of constants +?> +<?cs def:write_field_details(fields) ?> +<?cs each:field=fields ?> +<?cs # this next line must be exactly like this to be parsed by eclipse ?> +<?cs # the A tag in the next line must remain where it is, so that Eclipse can parse the docs ?> +<A NAME="<?cs var:field.anchor ?>"></A> +<?cs # The apilevel-N class MUST BE LAST in the sequence of class names ?> +<div class="api apilevel-<?cs var:field.since ?>"> + <h3 class="api-name"><?cs var:field.name ?></h3> + <div class="api-level"> + <?cs call:since_tags(field) ?> + <?cs call:federated_refs(field) ?> + </div> +<pre class="api-signature no-pretty-print"> +<?cs if:subcount(field.scope) ?><?cs var:field.scope +?> <?cs /if ?><?cs if:subcount(field.static) ?><?cs var:field.static +?> <?cs /if ?><?cs if:subcount(field.final) ?><?cs var:field.final +?> <?cs /if ?><?cs if:subcount(field.type) ?><?cs call:type_link(field.type) +?> <?cs /if ?><?cs var:field.name ?></pre> + <?cs call:show_annotations_list(field) ?> + <?cs call:description(field) ?> + <?cs if:subcount(field.constantValue) ?> + <p>Constant Value: + <?cs if:field.constantValue.isString ?> + <?cs var:field.constantValue.str ?> + <?cs else ?> + <?cs var:field.constantValue.dec ?> + (<?cs var:field.constantValue.hex ?>) + <?cs /if ?> + <?cs /if ?> +</div> +<?cs /each ?> +<?cs /def ?> + +<?cs def:write_method_details(methods) ?> +<?cs each:method=methods ?> +<?cs # the A tag in the next line must remain where it is, so that Eclipse can parse the docs ?> +<A NAME="<?cs var:method.anchor ?>"></A> +<?cs # The apilevel-N class MUST BE LAST in the sequence of class names ?> +<div class="api apilevel-<?cs var:method.since ?>"> + <h3 class="api-name"><?cs var:method.name ?></h3> + <div class="api-level"> + <div><?cs call:since_tags(method) ?></div> + <?cs call:federated_refs(method) ?> + </div> +<pre class="api-signature no-pretty-print"> +<?cs if:subcount(method.scope) ?><?cs var:method.scope +?> <?cs /if ?><?cs if:subcount(method.static) ?><?cs var:method.static +?> <?cs /if ?><?cs if:subcount(method.final) ?><?cs var:method.final +?> <?cs /if ?><?cs if:subcount(method.abstract) ?><?cs var:method.abstract +?> <?cs /if ?><?cs if:subcount(method.returnType) ?><?cs call:type_link(method.returnType) +?> <?cs /if ?><?cs var:method.name ?> (<?cs call:parameter_list(method.params, 1) ?>)</pre> + <?cs call:show_annotations_list(method) ?> + <?cs call:description(method) ?> +</div> +<?cs /each ?> +<?cs /def ?> -<?cs # end macros ?> +<?cs def:write_attr_details(attrs) ?> +<?cs each:attr=attrs ?> +<?cs # the A tag in the next line must remain where it is, so that Eclipse can parse the docs ?> +<A NAME="<?cs var:attr.anchor ?>"></A> +<h3 class="api-name"><?cs var:attr.name ?></h3> +<?cs call:show_annotations_list(attr) ?> +<?cs call:description(attr) ?> +<?cs if:subcount(attr.methods) ?> + <p><b>Related methods:</b></p> + <ul class="nolist"> + <?cs each:m=attr.methods ?> + <li><a href="<?cs var:toroot ?><?cs var:m.href ?>"><?cs var:m.name ?></a></li> + <?cs /each ?> + </ul> +<?cs /if ?> +<?cs /each ?> +<?cs /def ?> +<?cs +######################### +# END OF MACROS +# START OF PAGE PRINTING +######################### +?> +<?cs include:"doctype.cs" ?> +<html<?cs if:devsite ?> devsite<?cs /if ?>> +<?cs include:"head_tag.cs" ?> +<?cs include:"body_tag.cs" ?> +<?cs include:"header.cs" ?> +<?cs include:"page_info.cs" ?> +<?cs # This DIV spans the entire document to provide scope for some scripts ?> +<div class="api apilevel-<?cs var:class.since ?>" id="jd-content"> +<?cs # this next line must be exactly like this to be parsed by eclipse ?> +<!-- ======== START OF CLASS DATA ======== --> +<?cs +# +# Page header with class name and signature +# +?> +<h1 class="api-title"><?cs var:class.name ?></h1> +<p> +<code class="api-signature"> + <?cs var:class.scope ?> + <?cs var:class.static ?> + <?cs var:class.final ?> + <?cs var:class.abstract ?> + <?cs var:class.kind ?> + <?cs var:class.name ?> +</code> +<br> +<?cs set:colspan = subcount(class.inheritance) ?> +<?cs each:supr = class.inheritance ?> +<code class="api-signature"> + <?cs if:colspan == 2 ?> + extends <?cs call:type_link(supr.short_class) ?> + <?cs /if ?> + <?cs if:last(supr) && subcount(supr.interfaces) ?> + implements + <?cs each:t=supr.interfaces ?> + <?cs call:type_link(t) ?><?cs + if: name(t)!=subcount(supr.interfaces)-1 + ?>, <?cs /if ?> + <?cs /each ?> + <?cs /if ?> + <?cs set:colspan = colspan-1 ?> +</code> +<?cs /each ?> +</p><?cs +# +# Class inheritance tree +# +?><table class="jd-inheritance-table"> +<?cs set:colspan = subcount(class.inheritance) ?> +<?cs each:supr = class.inheritance ?> + <tr> + <?cs loop:i = 1, (subcount(class.inheritance)-colspan), 1 ?> + <td class="jd-inheritance-space"> <?cs + if:(subcount(class.inheritance)-colspan) == i + ?> ↳<?cs + /if ?></td> + <?cs /loop ?> + <td colspan="<?cs var:colspan ?>" class="jd-inheritance-class-cell"><?cs + if:colspan == 1 + ?><?cs call:class_name(class.qualifiedType) ?><?cs + else + ?><?cs call:type_link(supr.class) ?><?cs + /if ?> + </td> + </tr> + <?cs set:colspan = colspan-1 ?> +<?cs /each ?> +</table><?cs +# +# Collapsible list of subclasses +# +?><?cs +if:subcount(class.subclasses.direct) && !class.subclasses.hidden ?> + <table class="jd-sumtable jd-sumtable-subclasses"> + <tr><td style="border:none;margin:0;padding:0;"> + <?cs call:expando_trigger("subclasses-direct", "closed") ?>Known Direct Subclasses + <?cs call:expandable_class_list("subclasses-direct", class.subclasses.direct, "list") ?> + </td></tr> + </table> + <?cs /if ?> + <?cs if:subcount(class.subclasses.indirect) && !class.subclasses.hidden ?> + <table class="jd-sumtable jd-sumtable-subclasses"><tr><td colspan="2" style="border:none;margin:0;padding:0;"> + <?cs call:expando_trigger("subclasses-indirect", "closed") ?>Known Indirect Subclasses + <?cs call:expandable_class_list("subclasses-indirect", class.subclasses.indirect, "list") ?> + </td></tr></table><?cs +/if ?> +<?cs call:show_annotations_list(class) ?> +<br><hr><?cs +# +# The long-form class description. +# +?><?cs call:deprecated_warning(class) ?> -<div class="jd-descr"> -<?cs # make sure there's a summary view to display ?> +<?cs if:subcount(class.descr) ?> + <p><?cs call:tag_list(class.descr) ?></p> +<?cs /if ?> + +<?cs call:see_also_tags(class.seeAlso) ?> +<?cs +################# +# CLASS SUMMARY +################# +?> +<?cs # make sure there is a summary view to display ?> <?cs if:subcount(class.inners) || subcount(class.attrs) || inhattrs @@ -301,19 +322,21 @@ Summary: || subcount(class.methods.public) || subcount(class.methods.protected) || inhmethods ?> -<h2>Summary</h2> +<h2 class="api-section">Summary</h2> <?cs if:subcount(class.inners) ?> <?cs # this next line must be exactly like this to be parsed by eclipse ?> <!-- ======== NESTED CLASS SUMMARY ======== --> -<table id="nestedclasses" class="jd-sumtable"><tr><th colspan="12">Nested Classes</th></tr> +<table id="nestedclasses" class="responsive"> +<tr><th colspan="2"><h3>Nested classes</h3></th></tr> <?cs call:write_inners_summary(class.inners) ?> <?cs /if ?> <?cs # this next line must be exactly like this to be parsed by eclipse ?> <?cs if:subcount(class.attrs) ?> <!-- =========== FIELD SUMMARY =========== --> -<table id="lattrs" class="jd-sumtable"><tr><th colspan="12">XML Attributes</th></tr> +<table id="lattrs" class="responsive"> +<tr><th colspan="2"><h3>XML attributes</h3></th></tr> <?cs call:write_attr_summary(class.attrs, 1) ?> <?cs /if ?> @@ -321,15 +344,17 @@ Summary: <?cs if:inhattrs ?> <?cs # this next line must be exactly like this to be parsed by eclipse ?> <!-- =========== FIELD SUMMARY =========== --> -<table id="inhattrs" class="jd-sumtable"><tr><th> - <a href="#" class="toggle-all" onclick="return toggleAllInherited(this, null)">[Expand]</a> - <div style="clear:left;">Inherited XML Attributes</div></th></tr> +<table id="inhattrs" class="responsive inhtable"> +<tr><th><h3>Inherited XML attributes</h3></th></tr> <?cs each:cl=class.inherited ?> <?cs if:subcount(cl.attrs) ?> <tr class="api apilevel-<?cs var:cl.since ?>" > -<td colspan="12"> -<?cs call:expando_trigger("inherited-attrs-"+cl.qualified, "closed") ?>From <?cs var:cl.kind ?> -<?cs call:cond_link(cl.qualified, toroot, cl.link, cl.included) ?> +<td colspan="2"> +<?cs call:expando_trigger("inherited-attrs-"+cl.qualified, "closed") ?>From +<?cs var:cl.kind ?> +<code> + <?cs call:cond_link(cl.qualified, toroot, cl.link, cl.included) ?> +</code> <div id="inherited-attrs-<?cs var:cl.qualified ?>"> <div id="inherited-attrs-<?cs var:cl.qualified ?>-list" class="jd-inheritedlinks"> @@ -348,25 +373,27 @@ Summary: <?cs if:subcount(class.enumConstants) ?> <?cs # this next line must be exactly like this to be parsed by eclipse ?> <!-- =========== ENUM CONSTANT SUMMARY =========== --> -<table id="enumconstants" class="jd-sumtable"><tr><th colspan="12">Enum Values</th></tr> +<table id="enumconstants" class="responsive constants"> + <tr><th colspan="2"><h3>Enum values</h3></th></tr> <?cs set:count = #1 ?> - <?cs each:field=class.enumConstants ?> - <tr class="<?cs if:count % #2 ?>alt-color<?cs /if ?> api apilevel-<?cs var:field.since ?>" > - <td class="jd-descrcol"><?cs call:type_link(field.type) ?> </td> - <td class="jd-linkcol"><?cs call:cond_link(field.name, toroot, field.href, cl.included) ?> </td> - <td class="jd-descrcol" width="100%"> - <?cs call:short_descr(field) ?> - <?cs call:show_annotations_list(field) ?> - </td> - </tr> - <?cs set:count = count + #1 ?> - <?cs /each ?> + <?cs each:field=class.enumConstants ?> + <tr class="api apilevel-<?cs var:field.since ?>" > + <td><code><?cs call:type_link(field.type) ?></code> </td> + <td width="100%"> + <code><?cs call:cond_link(field.name, toroot, field.href, cl.included) ?></code> + <p><?cs call:short_descr(field) ?> + <?cs call:show_annotations_list(field) ?></p> + </td> + </tr> + <?cs set:count = count + #1 ?> + <?cs /each ?> <?cs /if ?> <?cs if:subcount(class.constants) ?> <?cs # this next line must be exactly like this to be parsed by eclipse ?> <!-- =========== ENUM CONSTANT SUMMARY =========== --> -<table id="constants" class="jd-sumtable"><tr><th colspan="12">Constants</th></tr> +<table id="constants" class="responsive constants"> +<tr><th colspan="2"><h3>Constants</h3></th></tr> <?cs call:write_constant_summary(class.constants, 1) ?> </table> <?cs /if ?> @@ -375,25 +402,27 @@ Summary: <?cs if:inhconstants ?> <?cs # this next line must be exactly like this to be parsed by eclipse ?> <!-- =========== ENUM CONSTANT SUMMARY =========== --> -<table id="inhconstants" class="jd-sumtable"><tr><th> - <a href="#" class="toggle-all" onclick="return toggleAllInherited(this, null)">[Expand]</a> - <div style="clear:left;">Inherited Constants</div></th></tr> +<table id="inhconstants" class="responsive constants inhtable"> +<tr><th><h3>Inherited constants</h3></th></tr> <?cs each:cl=class.inherited ?> <?cs if:subcount(cl.constants) ?> -<tr class="api apilevel-<?cs var:cl.since ?>" > -<td colspan="12"> -<?cs call:expando_trigger("inherited-constants-"+cl.qualified, "closed") ?>From <?cs var:cl.kind ?> -<?cs call:cond_link(cl.qualified, toroot, cl.link, cl.included) ?> -<div id="inherited-constants-<?cs var:cl.qualified ?>"> - <div id="inherited-constants-<?cs var:cl.qualified ?>-list" - class="jd-inheritedlinks"> - </div> - <div id="inherited-constants-<?cs var:cl.qualified ?>-summary" style="display: none;"> - <table class="jd-sumtable-expando"> - <?cs call:write_constant_summary(cl.constants, cl.included) ?></table> + <tr class="api apilevel-<?cs var:cl.since ?>" > + <td> + <?cs call:expando_trigger("inherited-constants-"+cl.qualified, "closed") ?>From + <?cs var:cl.kind ?> + <code> + <?cs call:cond_link(cl.qualified, toroot, cl.link, cl.included) ?> + </code> + <div id="inherited-constants-<?cs var:cl.qualified ?>"> + <div id="inherited-constants-<?cs var:cl.qualified ?>-list" + class="jd-inheritedlinks"> + </div> + <div id="inherited-constants-<?cs var:cl.qualified ?>-summary" style="display: none;"> + <table class="jd-sumtable-expando responsive"> + <?cs call:write_constant_summary(cl.constants, cl.included) ?></table> + </div> </div> -</div> -</td></tr> + </td></tr> <?cs /if ?> <?cs /each ?> </table> @@ -402,7 +431,8 @@ Summary: <?cs if:subcount(class.fields) ?> <?cs # this next line must be exactly like this to be parsed by eclipse ?> <!-- =========== FIELD SUMMARY =========== --> -<table id="lfields" class="jd-sumtable"><tr><th colspan="12">Fields</th></tr> +<table id="lfields" class="responsive properties"> +<tr><th colspan="2"><h3>Fields</h3></th></tr> <?cs call:write_field_summary(class.fields, 1) ?> </table> <?cs /if ?> @@ -411,25 +441,27 @@ Summary: <?cs if:inhfields ?> <?cs # this next line must be exactly like this to be parsed by eclipse ?> <!-- =========== FIELD SUMMARY =========== --> -<table id="inhfields" class="jd-sumtable"><tr><th> - <a href="#" class="toggle-all" onclick="return toggleAllInherited(this, null)">[Expand]</a> - <div style="clear:left;">Inherited Fields</div></th></tr> +<table id="inhfields" class="properties inhtable"> +<tr><th><h3>Inherited fields</h3></th></tr> <?cs each:cl=class.inherited ?> <?cs if:subcount(cl.fields) ?> -<tr class="api apilevel-<?cs var:cl.since ?>" > -<td colspan="12"> -<?cs call:expando_trigger("inherited-fields-"+cl.qualified, "closed") ?>From <?cs var:cl.kind ?> -<?cs call:cond_link(cl.qualified, toroot, cl.link, cl.included) ?> -<div id="inherited-fields-<?cs var:cl.qualified ?>"> - <div id="inherited-fields-<?cs var:cl.qualified ?>-list" - class="jd-inheritedlinks"> - </div> - <div id="inherited-fields-<?cs var:cl.qualified ?>-summary" style="display: none;"> - <table class="jd-sumtable-expando"> - <?cs call:write_field_summary(cl.fields, cl.included) ?></table> + <tr class="api apilevel-<?cs var:cl.since ?>" > + <td> + <?cs call:expando_trigger("inherited-fields-"+cl.qualified, "closed") ?>From + <?cs var:cl.kind ?> + <code> + <?cs call:cond_link(cl.qualified, toroot, cl.link, cl.included) ?> + </code> + <div id="inherited-fields-<?cs var:cl.qualified ?>"> + <div id="inherited-fields-<?cs var:cl.qualified ?>-list" + class="jd-inheritedlinks"> + </div> + <div id="inherited-fields-<?cs var:cl.qualified ?>-summary" style="display: none;"> + <table class="jd-sumtable-expando responsive"> + <?cs call:write_field_summary(cl.fields, cl.included) ?></table> + </div> </div> -</div> -</td></tr> + </td></tr> <?cs /if ?> <?cs /each ?> </table> @@ -438,7 +470,8 @@ Summary: <?cs if:subcount(class.ctors.public) ?> <?cs # this next line must be exactly like this to be parsed by eclipse ?> <!-- ======== CONSTRUCTOR SUMMARY ======== --> -<table id="pubctors" class="jd-sumtable"><tr><th colspan="12">Public Constructors</th></tr> +<table id="pubctors" class="responsive constructors"> +<tr><th colspan="2"><h3>Public constructors</h3></th></tr> <?cs call:write_method_summary(class.ctors.public, 1) ?> </table> <?cs /if ?> @@ -446,7 +479,8 @@ Summary: <?cs if:subcount(class.ctors.protected) ?> <?cs # this next line must be exactly like this to be parsed by eclipse ?> <!-- ======== CONSTRUCTOR SUMMARY ======== --> -<table id="proctors" class="jd-sumtable"><tr><th colspan="12">Protected Constructors</th></tr> +<table id="proctors" class="responsive constructors"> +<tr><th colspan="2"><h3>Protected constructors</h3></th></tr> <?cs call:write_method_summary(class.ctors.protected, 1) ?> </table> <?cs /if ?> @@ -454,7 +488,8 @@ Summary: <?cs if:subcount(class.methods.public) ?> <?cs # this next line must be exactly like this to be parsed by eclipse ?> <!-- ========== METHOD SUMMARY =========== --> -<table id="pubmethods" class="jd-sumtable"><tr><th colspan="12">Public Methods</th></tr> +<table id="pubmethods" class="responsive methods"> +<tr><th colspan="2"><h3>Public methods</h3></th></tr> <?cs call:write_method_summary(class.methods.public, 1) ?> </table> <?cs /if ?> @@ -462,7 +497,8 @@ Summary: <?cs if:subcount(class.methods.protected) ?> <?cs # this next line must be exactly like this to be parsed by eclipse ?> <!-- ========== METHOD SUMMARY =========== --> -<table id="promethods" class="jd-sumtable"><tr><th colspan="12">Protected Methods</th></tr> +<table id="promethods" class="reponsive methods"> +<tr><th colspan="2"><h3>Protected methods</h3></th></tr> <?cs call:write_method_summary(class.methods.protected, 1) ?> </table> <?cs /if ?> @@ -471,28 +507,31 @@ Summary: <?cs if:inhmethods ?> <?cs # this next line must be exactly like this to be parsed by eclipse ?> <!-- ========== METHOD SUMMARY =========== --> -<table id="inhmethods" class="jd-sumtable"><tr><th> - <a href="#" class="toggle-all" onclick="return toggleAllInherited(this, null)">[Expand]</a> - <div style="clear:left;">Inherited Methods</div></th></tr> +<table id="inhmethods" class="methods inhtable"> +<tr><th><h3>Inherited methods</h3></th></tr> <?cs each:cl=class.inherited ?> <?cs if:subcount(cl.methods) ?> <tr class="api apilevel-<?cs var:cl.since ?>" > -<td colspan="12"><?cs call:expando_trigger("inherited-methods-"+cl.qualified, "closed") ?> -From <?cs var:cl.kind ?> -<?cs if:cl.included ?> - <a href="<?cs var:toroot ?><?cs var:cl.link ?>"><?cs var:cl.qualified ?></a> -<?cs elif:cl.federated ?> - <a href="<?cs var:cl.link ?>"><?cs var:cl.qualified ?></a> -<?cs else ?> - <?cs var:cl.qualified ?> -<?cs /if ?> +<td colspan="2"> +<?cs call:expando_trigger("inherited-methods-"+cl.qualified, "closed") ?>From +<?cs var:cl.kind ?> +<code> + <?cs if:cl.included ?> + <a href="<?cs var:toroot ?><?cs var:cl.link ?>"><?cs var:cl.qualified ?></a> + <?cs elif:cl.federated ?> + <a href="<?cs var:cl.link ?>"><?cs var:cl.qualified ?></a> + <?cs else ?> + <?cs var:cl.qualified ?> + <?cs /if ?> +</code> <div id="inherited-methods-<?cs var:cl.qualified ?>"> <div id="inherited-methods-<?cs var:cl.qualified ?>-list" class="jd-inheritedlinks"> </div> <div id="inherited-methods-<?cs var:cl.qualified ?>-summary" style="display: none;"> - <table class="jd-sumtable-expando"> - <?cs call:write_method_summary(cl.methods, cl.included) ?></table> + <table class="jd-sumtable-expando responsive"> + <?cs call:write_method_summary(cl.methods, cl.included) ?> + </table> </div> </div> </td></tr> @@ -501,111 +540,16 @@ From <?cs var:cl.kind ?> </table> <?cs /if ?> <?cs /if ?> -</div><!-- jd-descr (summary) --> - -<!-- Details --> - -<?cs def:write_field_details(fields) ?> -<?cs each:field=fields ?> -<?cs # this next line must be exactly like this to be parsed by eclipse ?> -<?cs # the A tag in the next line must remain where it is, so that Eclipse can parse the docs ?> -<A NAME="<?cs var:field.anchor ?>"></A> -<?cs # The apilevel-N class MUST BE LAST in the sequence of class names ?> -<div class="jd-details api apilevel-<?cs var:field.since ?>"> - <h4 class="jd-details-title"> - <span class="normal"> - <?cs var:field.scope ?> - <?cs var:field.static ?> - <?cs var:field.final ?> - <?cs call:type_link(field.type) ?> - </span> - <?cs var:field.name ?> - </h4> - <div class="api-level"> - <?cs call:since_tags(field) ?> - <?cs call:federated_refs(field) ?> - </div> - <div class="jd-details-descr"> - <?cs call:show_annotations_list(field) ?> - <?cs call:description(field) ?> - <?cs if:subcount(field.constantValue) ?> - <div class="jd-tagdata"> - <span class="jd-tagtitle">Constant Value: </span> - <span> - <?cs if:field.constantValue.isString ?> - <?cs var:field.constantValue.str ?> - <?cs else ?> - <?cs var:field.constantValue.dec ?> - (<?cs var:field.constantValue.hex ?>) - <?cs /if ?> - </span> - </div> - <?cs /if ?> - </div> -</div> -<?cs /each ?> -<?cs /def ?> - -<?cs def:write_method_details(methods) ?> -<?cs each:method=methods ?> -<?cs # the A tag in the next line must remain where it is, so that Eclipse can parse the docs ?> -<A NAME="<?cs var:method.anchor ?>"></A> -<?cs # The apilevel-N class MUST BE LAST in the sequence of class names ?> -<div class="jd-details api apilevel-<?cs var:method.since ?>"> - <h4 class="jd-details-title"> - <span class="normal"> - <?cs var:method.scope ?> - <?cs var:method.abstract ?> - <?cs var:method.default ?> - <?cs var:method.static ?> - <?cs var:method.final ?> - <?cs call:type_link(method.returnType) ?> - </span> - <span class="sympad"><?cs var:method.name ?></span> - <span class="normal">(<?cs call:parameter_list(method.params) ?>)</span> - </h4> - <div class="api-level"> - <div><?cs call:since_tags(method) ?></div> - <?cs call:federated_refs(method) ?> - </div> - <div class="jd-details-descr"> - <?cs call:show_annotations_list(method) ?> - <?cs call:description(method) ?> - </div> -</div> -<?cs /each ?> -<?cs /def ?> - -<?cs def:write_attr_details(attrs) ?> -<?cs each:attr=attrs ?> -<?cs # the A tag in the next line must remain where it is, so that Eclipse can parse the docs ?> -<A NAME="<?cs var:attr.anchor ?>"></A> -<div class="jd-details"> - <h4 class="jd-details-title"><?cs var:attr.name ?> - </h4> - <div class="jd-details-descr"> - <?cs call:show_annotations_list(attr) ?> - <?cs call:description(attr) ?> - - <div class="jd-tagdata"> - <h5 class="jd-tagtitle">Related Methods</h5> - <ul class="nolist"> - <?cs each:m=attr.methods ?> - <li><a href="<?cs var:toroot ?><?cs var:m.href ?>"><?cs var:m.name ?></a></li> - <?cs /each ?> - </ul> - </div> - </div> -</div> -<?cs /each ?> -<?cs /def ?> - - +<?cs +################ +# CLASS DETAILS +################ +?> <!-- XML Attributes --> <?cs if:subcount(class.attrs) ?> <?cs # this next line must be exactly like this to be parsed by eclipse ?> <!-- ========= FIELD DETAIL ======== --> -<h2>XML Attributes</h2> +<h2 class="api-section">XML attributes</h2> <?cs call:write_attr_details(class.attrs) ?> <?cs /if ?> @@ -613,7 +557,7 @@ From <?cs var:cl.kind ?> <?cs if:subcount(class.enumConstants) ?> <?cs # this next line must be exactly like this to be parsed by eclipse ?> <!-- ========= ENUM CONSTANTS DETAIL ======== --> -<h2>Enum Values</h2> +<h2 class="api-section">Enum values</h2> <?cs call:write_field_details(class.enumConstants) ?> <?cs /if ?> @@ -621,7 +565,7 @@ From <?cs var:cl.kind ?> <?cs if:subcount(class.constants) ?> <?cs # this next line must be exactly like this to be parsed by eclipse ?> <!-- ========= ENUM CONSTANTS DETAIL ======== --> -<h2>Constants</h2> +<h2 class="api-section">Constants</h2> <?cs call:write_field_details(class.constants) ?> <?cs /if ?> @@ -629,7 +573,7 @@ From <?cs var:cl.kind ?> <?cs if:subcount(class.fields) ?> <?cs # this next line must be exactly like this to be parsed by eclipse ?> <!-- ========= FIELD DETAIL ======== --> -<h2>Fields</h2> +<h2 class="api-section">Fields</h2> <?cs call:write_field_details(class.fields) ?> <?cs /if ?> @@ -637,7 +581,7 @@ From <?cs var:cl.kind ?> <?cs if:subcount(class.ctors.public) ?> <?cs # this next line must be exactly like this to be parsed by eclipse ?> <!-- ========= CONSTRUCTOR DETAIL ======== --> -<h2>Public Constructors</h2> +<h2 class="api-section">Public constructors</h2> <?cs call:write_method_details(class.ctors.public) ?> <?cs /if ?> @@ -645,7 +589,7 @@ From <?cs var:cl.kind ?> <!-- ========= CONSTRUCTOR DETAIL ======== --> <!-- Protected ctors --> <?cs if:subcount(class.ctors.protected) ?> -<h2>Protected Constructors</h2> +<h2 class="api-section">Protected constructors</h2> <?cs call:write_method_details(class.ctors.protected) ?> <?cs /if ?> @@ -653,26 +597,50 @@ From <?cs var:cl.kind ?> <!-- ========= METHOD DETAIL ======== --> <!-- Public methdos --> <?cs if:subcount(class.methods.public) ?> -<h2>Public Methods</h2> +<h2 class="api-section">Public methods</h2> <?cs call:write_method_details(class.methods.public) ?> <?cs /if ?> <?cs # this next line must be exactly like this to be parsed by eclipse ?> <!-- ========= METHOD DETAIL ======== --> <?cs if:subcount(class.methods.protected) ?> -<h2>Protected Methods</h2> +<h2 class="api-section">Protected methods</h2> <?cs call:write_method_details(class.methods.protected) ?> <?cs /if ?> <?cs # the next two lines must be exactly like this to be parsed by eclipse ?> <!-- ========= END OF CLASS DATA ========= --> -<A NAME="navbar_top"></A> -</div> <!-- jd-content --> -<?cs include:"footer.cs" ?> -</div><!-- end doc-content --> +</div><!-- end jd-content --> + +<?cs if:devsite ?> + +<div class="data-reference-resources-wrapper"> + <?cs if:subcount(class.package) ?> + <ul data-reference-resources> + <?cs call:list("Annotations", class.package.annotations) ?> + <?cs call:list("Interfaces", class.package.interfaces) ?> + <?cs call:list("Classes", class.package.classes) ?> + <?cs call:list("Enums", class.package.enums) ?> + <?cs call:list("Exceptions", class.package.exceptions) ?> + <?cs call:list("Errors", class.package.errors) ?> + </ul> + <?cs elif:subcount(package) ?> + <ul data-reference-resources> + <?cs call:class_link_list("Annotations", package.annotations) ?> + <?cs call:class_link_list("Interfaces", package.interfaces) ?> + <?cs call:class_link_list("Classes", package.classes) ?> + <?cs call:class_link_list("Enums", package.enums) ?> + <?cs call:class_link_list("Exceptions", package.exceptions) ?> + <?cs call:class_link_list("Errors", package.errors) ?> + </ul> + <?cs /if ?> +</div> +<?cs /if ?> +<?cs if:!devsite ?> +<?cs include:"footer.cs" ?> <?cs include:"trailer.cs" ?> - +<?cs /if ?> </body> </html> diff --git a/tools/droiddoc/templates-sdk/classes.cs b/tools/droiddoc/templates-sdk/classes.cs index 32966a0fe4..007b57ee43 100644 --- a/tools/droiddoc/templates-sdk/classes.cs +++ b/tools/droiddoc/templates-sdk/classes.cs @@ -1,34 +1,27 @@ -<?cs include:"doctype.cs" ?> +<?cs # THIS CREATES A LIST OF ALL PACKAGES AND NAMES IT packages.html ?> <?cs include:"macros.cs" ?> <?cs include:"macros_override.cs" ?> +<?cs include:"doctype.cs" ?> <html<?cs if:devsite ?> devsite<?cs /if ?>> <?cs include:"head_tag.cs" ?> -<body class="gc-documentation <?cs if:(reference.gms || reference.gcm) ?>google<?cs /if ?> - <?cs if:(guide||develop||training||reference||tools||sdk) ?>develop<?cs - if:reference ?> reference<?cs - /if ?><?cs - elif:design ?>design<?cs - elif:distribute ?>distribute<?cs - /if ?>" itemscope itemtype="http://schema.org/Article"> - <a name="top"></a> +<?cs include:"body_tag.cs" ?> <?cs include:"header.cs" ?> -<div class="col-12" id="doc-col"> - -<div id="jd-header"> <h1><?cs var:page.title ?></h1> -</div> +<p>These are the API classes. See all +<a href="packages.html">API packages</a>.</p> -<div id="jd-content"> -<p>These are the Android API classes. See all <a href="packages.html">API packages</a>.</p> -<div class="jd-letterlist"><?cs each:letter=docs.classes ?> - <a href="#letter_<?cs name:letter ?>"><?cs name:letter ?></a> <?cs /each?> +<div class="jd-letterlist"><?cs + each:letter=docs.classes ?> + <a href="#letter_<?cs name:letter ?>"><?cs + name:letter ?></a> <?cs + /each?> </div> <?cs each:letter=docs.classes ?> <?cs set:count = #1 ?> <h2 id="letter_<?cs name:letter ?>"><?cs name:letter ?></h2> -<table class="jd-sumtable"> +<table> <?cs set:cur_row = #0 ?> <?cs each:cl = letter ?> <tr class="<?cs if:count % #2 ?>alt-color<?cs /if ?> api apilevel-<?cs var:cl.since ?>" > @@ -43,12 +36,34 @@ </table> <?cs /each ?> -</div><!-- end jd-content --> +<?cs if:devsite ?> +<div class="data-reference-resources-wrapper"> + <?cs if:subcount(class.package) ?> + <ul data-reference-resources> + <?cs call:list("Annotations", class.package.annotations) ?> + <?cs call:list("Interfaces", class.package.interfaces) ?> + <?cs call:list("Classes", class.package.classes) ?> + <?cs call:list("Enums", class.package.enums) ?> + <?cs call:list("Exceptions", class.package.exceptions) ?> + <?cs call:list("Errors", class.package.errors) ?> + </ul> + <?cs elif:subcount(package) ?> + <ul data-reference-resources> + <?cs call:class_link_list("Annotations", package.annotations) ?> + <?cs call:class_link_list("Interfaces", package.interfaces) ?> + <?cs call:class_link_list("Classes", package.classes) ?> + <?cs call:class_link_list("Enums", package.enums) ?> + <?cs call:class_link_list("Exceptions", package.exceptions) ?> + <?cs call:class_link_list("Errors", package.errors) ?> + </ul> + <?cs /if ?> +</div> +<?cs /if ?> -<?cs include:"footer.cs" ?> -</div><!-- end doc-content --> +<?cs if:!devsite ?> +<?cs include:"footer.cs" ?> <?cs include:"trailer.cs" ?> - +<?cs /if ?> </body> </html> diff --git a/tools/droiddoc/templates-sdk/components/masthead.cs b/tools/droiddoc/templates-sdk/components/masthead.cs index e17612d908..1fef96594a 100644 --- a/tools/droiddoc/templates-sdk/components/masthead.cs +++ b/tools/droiddoc/templates-sdk/components/masthead.cs @@ -1,55 +1,8 @@ <?cs def:custom_masthead() ?> -<a name="top"></a> - -<!-- dialog to prompt lang pref change when loaded from hardcoded URL -<div id="langMessage" style="display:none"> - <div> - <div class="lang en"> - <p>You requested a page in English, would you like to proceed with this language setting?</p> - </div> - <div class="lang es"> - <p>You requested a page in Spanish (Español), would you like to proceed with this language setting?</p> - </div> - <div class="lang ja"> - <p>You requested a page in Japanese (日本語), would you like to proceed with this language setting?</p> - </div> - <div class="lang ko"> - <p>You requested a page in Korean (한국어), would you like to proceed with this language setting?</p> - </div> - <div class="lang ru"> - <p>You requested a page in Russian (Русский), would you like to proceed with this language setting?</p> - </div> - <div class="lang zh-cn"> - <p>You requested a page in Simplified Chinese (简体中文), would you like to proceed with this language setting?</p> - </div> - <div class="lang zh-tw"> - <p>You requested a page in Traditional Chinese (繁體中文), would you like to proceed with this language setting?</p> - </div> - <a href="#" class="button yes" onclick="return false;"> - <span class="lang en">Yes</span> - <span class="lang es">Sí</span> - <span class="lang ja">Yes</span> - <span class="lang ko">Yes</span> - <span class="lang ru">Yes</span> - <span class="lang zh-cn">是的</span> - <span class="lang zh-tw">没有</span> - </a> - <a href="#" class="button" onclick="$('#langMessage').hide();return false;"> - <span class="lang en">No</span> - <span class="lang es">No</span> - <span class="lang ja">No</span> - <span class="lang ko">No</span> - <span class="lang ru">No</span> - <span class="lang zh-cn">没有</span> - <span class="lang zh-tw">没有</span> - </a> - </div> -</div> --> - -<?cs if:!devsite ?><?cs # leave out the global header for devsite; it is in devsite template ?> + <a name="top"></a> <!-- Header --> <div id="header-wrapper"> - <div class="dac-header" id="header"><?cs call:butter_bar() ?> + <div class="dac-header <?cs if:ndk ?>dac-ndk<?cs /if ?>" id="header"> <div class="dac-header-inner"> <a class="dac-nav-toggle" data-dac-toggle-nav href="javascript:;" title="Open navigation"> <span class="dac-nav-hamburger"> @@ -58,9 +11,10 @@ <span class="dac-nav-hamburger-bot"></span> </span> </a> - <?cs if:ndk ?><a class="dac-header-logo" href="<?cs var:toroot ?>ndk/index.html"> - <img class="dac-header-logo-image" src="<?cs var:toroot ?>assets/images/android_logo_ndk.png" - srcset="<?cs var:toroot ?>assets/images/android_logo_ndk@2x.png 2x" + <?cs if:ndk ?><a class="dac-header-logo" style="width:144px;" href="<?cs var:toroot + ?>ndk/index.html"> + <img class="dac-header-logo-image" src="<?cs var:toroot ?>assets/images/android_logo.png" + srcset="<?cs var:toroot ?>assets/images/android_logo@2x.png 2x" width="32" height="36" alt="Android" /> NDK </a><?cs else ?><a class="dac-header-logo" href="<?cs var:toroot ?>index.html"> <img class="dac-header-logo-image" src="<?cs var:toroot ?>assets/images/android_logo.png" @@ -68,33 +22,107 @@ width="32" height="36" alt="Android" /> Developers </a><?cs /if ?> - <ul class="dac-header-crumbs"> - <?cs # More <li> elements added here with javascript ?> - <?cs if:!section.landing ?><li class="dac-header-crumbs-item"><span class="dac-header-crumbs-link current <?cs - if:ndk ?>ndk<?cs /if ?>"><?cs var:page.title ?></a></li><?cs - /if ?> - </ul> - - <?cs # ADD SEARCH AND MENU ?> - <?cs if:!ndk ?> - <?cs call:header_search_widget() ?> - <?cs /if ?> + <?cs if:ndk + ?><ul class="dac-header-tabs"> + <li> + <a href="<?cs var:toroot ?>ndk/guides/index.html" class="dac-header-tab" + zh-tw-lang="API 指南" + zh-cn-lang="API 指南" + ru-lang="Руководства по API" + ko-lang="API 가이드" + ja-lang="API ガイド" + es-lang="Guías de la API">Guides</a> + </li> + <li> + <a href="<?cs var:toroot ?>ndk/reference/index.html" class="dac-header-tab" + zh-tw-lang="參考資源" + zh-cn-lang="参考" + ru-lang="Справочник" + ko-lang="참조문서" + ja-lang="リファレンス" + es-lang="Referencia">Reference</a> + </li> + <li> + <a href="<?cs var:toroot ?>ndk/samples/index.html" class="dac-header-tab" + >Samples</a> + </li> + <li> + <a href="<?cs var:toroot ?>ndk/downloads/index.html" class="dac-header-tab" + >Downloads</a> + </li> + </ul><?cs else + ?><?cs + # + # For the reference only docs, include just one tab + # + ?><?cs if:referenceonly + ?><ul class="dac-header-tabs"> + <li><a href="<?cs var:toroot ?>reference/packages.html" class="dac-header-tab"><?cs + if:sdk.preview + ?>Android <?cs var:sdk.codename ?> + Preview <?cs var:sdk.preview.version ?><?cs + else + ?>Android <?cs var:sdk.version ?> + r<?cs var:sdk.rel.id ?><?cs + /if ?></a> + </li> + </ul> + <?cs else ?><?cs + # + # End reference only docs, now the online DAC tabs... + # + ?><ul class="dac-header-tabs"> + <li> + <a class="dac-header-tab" href="<?cs var:toroot ?>design/index.html" + zh-tw-lang="設計" + zh-cn-lang="设计" + ru-lang="Проектирование" + ko-lang="디자인" + ja-lang="設計" + es-lang="Diseñar">Design</a> + </li> + <li> + <a class="dac-header-tab" href="<?cs var:toroot ?>develop/index.html" + zh-tw-lang="開發" + zh-cn-lang="开发" + ru-lang="Разработка" + ko-lang="개발" + ja-lang="開発" + es-lang="Desarrollar">Develop</a> + </li> + <li> + <a class="dac-header-tab" href="<?cs var:toroot ?>distribute/index.html" + zh-tw-lang="發佈" + zh-cn-lang="分发" + ru-lang="Распространение" + ko-lang="배포" + ja-lang="配布" + es-lang="Distribuir">Distribute</a> + </li> + </ul><?cs + /if ?><?cs + # + # End if/else reference only docs + # + ?><?cs + /if ?><?cs # end if/else ndk ?> - <?cs if:ndk ?><a class="dac-header-console-btn" href="//developer.android.com"> - <span class="dac-visible-desktop-inline">Back to Android Developers</span> + <?cs if:ndk ?><a class="dac-header-console-btn" href="http://developer.android.com"> + Back to Android Developers </a><?cs else ?><a class="dac-header-console-btn" href="https://play.google.com/apps/publish/"> <span class="dac-sprite dac-google-play"></span> <span class="dac-visible-desktop-inline">Developer</span> Console - </a><?cs /if ?> + </a><?cs /if ?><?cs + # ADD SEARCH AND MENU ?><?cs + if:!ndk ?><?cs + if:!referenceonly ?><?cs + call:header_search_widget() ?><?cs + /if ?><?cs + /if ?> </div><!-- end header-wrap.wrap --> </div><!-- end 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 --> <?cs if:ndk ?> @@ -102,14 +130,10 @@ <nav class="dac-nav"> <div class="dac-nav-dimmer" data-dac-toggle-nav></div> - <ul class="dac-nav-list" data-dac-nav> - <li class="dac-nav-item dac-nav-head"> - <a class="dac-nav-link dac-nav-logo" data-dac-toggle-nav href="javascript:;" title="Close navigation"> - <img class="dac-logo-image" src="<?cs var:toroot ?>assets/images/android_logo_ndk.png" - srcset="<?cs var:toroot ?>assets/images/android_logo_ndk@2x.png 2x" - width="32" height="36" alt="Android" /> NDK - </a> - </li> + <div class="dac-nav-sidebar" data-swap data-dynamic="false" data-transition-speed="300" data-dac-nav> + <div data-swap-container> + <?cs call:custom_left_nav() ?> + <ul id="dac-main-navigation" class="dac-nav-list dac-swap-section dac-left dac-no-anim"> <li class="dac-nav-item guides"> <a class="dac-nav-link" href="<?cs var:toroot ?>ndk/guides/index.html" zh-tw-lang="API 指南" @@ -136,185 +160,163 @@ <a class="dac-nav-link" href="<?cs var:toroot ?>ndk/downloads/index.html" >Downloads</a> </li> - </ul> + </ul> + </div> + </div> </nav> <!-- end NDK navigation--> + + + <?cs else ?> - <!-- Standard DAC Navigation--> + <!-- Navigation--> <nav class="dac-nav"> <div class="dac-nav-dimmer" data-dac-toggle-nav></div> - <ul class="dac-nav-list" data-dac-nav> - <li class="dac-nav-item dac-nav-head"> - <a class="dac-nav-link dac-nav-logo" data-dac-toggle-nav href="javascript:;" title="Close navigation"> - <img class="dac-logo-image" src="<?cs var:toroot ?>assets/images/android_logo.png" - srcset="<?cs var:toroot ?>assets/images/android_logo@2x.png 2x" - width="32" height="36" alt="Android" /> Developers - </a> - </li><?cs - # - # For the reference only docs, include just one tab - # - ?><?cs if:referenceonly ?> - <li class="dac-nav-item develop"> - <a class="dac-nav-link has-subnav" href="<?cs var:toroot ?>reference/packages.html" zh-tw-lang="參考資源" - zh-cn-lang="参考" ru-lang="Справочник" ko-lang="참조문서" ja-lang="リファレンス" - es-lang="Referencia">API Reference</a> - <div class="dac-nav-secondary develop"> - <h1 style="font-size: 20px; line-height: 24px; margin: 20px; color:#444" - ><?cs - if:sdk.preview - ?>Android <?cs var:sdk.codename ?> - Preview <?cs var:sdk.preview.version ?><?cs - else - ?>Android <?cs var:sdk.version ?> - r<?cs var:sdk.rel.id ?><?cs - /if ?></h1> - </div> - </li> - <?cs else ?><?cs - # - # End reference only docs, now the online DAC tabs... - # - ?><li class="dac-nav-item home"> - <a class="dac-nav-link dac-visible-mobile-block" href="<?cs var:toroot ?>index.html">Home</a> - <ul class="dac-nav-secondary about"> - <li class="dac-nav-item about"> - <a class="dac-nav-link" href="<?cs var:toroot ?>about/index.html">Android</a> - </li> - <li class="dac-nav-item wear"> - <a class="dac-nav-link" href="<?cs var:toroot ?>wear/index.html">Wear</a> - </li> - <li class="dac-nav-item tv"> - <a class="dac-nav-link" href="<?cs var:toroot ?>tv/index.html">TV</a> - </li> - <li class="dac-nav-item auto"> - <a class="dac-nav-link" href="<?cs var:toroot ?>auto/index.html">Auto</a> - </li> - </ul> - </li> - <li class="dac-nav-item design"> - <a class="dac-nav-link" href="<?cs var:toroot ?>design/index.html" - zh-tw-lang="設計" - zh-cn-lang="设计" - ru-lang="Проектирование" - ko-lang="디자인" - ja-lang="設計" - es-lang="Diseñar">Design</a> - </li> - <li class="dac-nav-item develop"> - <a class="dac-nav-link" href="<?cs var:toroot ?>develop/index.html" - zh-tw-lang="開發" - zh-cn-lang="开发" - ru-lang="Разработка" - ko-lang="개발" - ja-lang="開発" - es-lang="Desarrollar">Develop</a> - <ul class="dac-nav-secondary develop"> - <li class="dac-nav-item training"> - <a class="dac-nav-link" href="<?cs var:toroot ?>training/index.html" - zh-tw-lang="訓練課程" - zh-cn-lang="培训" - ru-lang="Курсы" - ko-lang="교육" - ja-lang="トレーニング" - es-lang="Capacitación">Training</a> - </li> - <li class="dac-nav-item guide"> - <a class="dac-nav-link" href="<?cs var:toroot ?>guide/index.html" - zh-tw-lang="API 指南" - zh-cn-lang="API 指南" - ru-lang="Руководства по API" - ko-lang="API 가이드" - ja-lang="API ガイド" - es-lang="Guías de la API">API Guides</a> - </li> - <li class="dac-nav-item reference"> - <a class="dac-nav-link" href="<?cs var:toroot ?>reference/packages.html" - zh-tw-lang="參考資源" - zh-cn-lang="参考" - ru-lang="Справочник" - ko-lang="참조문서" - ja-lang="リファレンス" - es-lang="Referencia">Reference</a> - </li> - <li class="dac-nav-item tools"> - <a class="dac-nav-link" href="<?cs var:toroot ?>sdk/index.html" - zh-tw-lang="相關工具" - zh-cn-lang="工具" - ru-lang="Инструменты" - ko-lang="도구" - ja-lang="ツール" - es-lang="Herramientas">Tools</a></li> - <li class="dac-nav-item google"> - <a class="dac-nav-link" href="<?cs var:toroot ?>google/index.html">Google Services</a> - </li> - <?cs if:android.hasSamples ?> - <li class="dac-nav-item samples"> - <a class="dac-nav-link" href="<?cs var:toroot ?>samples/index.html">Samples</a> - </li><?cs /if ?> - <li class="dac-nav-item preview"> - <a class="dac-nav-link" href="<?cs var:toroot ?>preview/index.html">Preview</a> - </li> - </ul> - </li> - <li class="dac-nav-item distribute"> - <a class="dac-nav-link" href="<?cs var:toroot ?>distribute/<?cs if:android.whichdoc == 'offline' ?>googleplay/<?cs /if ?>index.html" - zh-tw-lang="發佈" - zh-cn-lang="分发" - ru-lang="Распространение" - ko-lang="배포" - ja-lang="配布" - es-lang="Distribuir">Distribute</a> - <ul class="dac-nav-secondary distribute"> - <li class="dac-nav-item googleplay"> - <a class="dac-nav-link" href="<?cs var:toroot ?>distribute/googleplay/index.html">Google Play</a></li> - <li class="dac-nav-item essentials"> - <a class="dac-nav-link" href="<?cs var:toroot ?>distribute/essentials/index.html">Essentials</a></li> - <li class="dac-nav-item users"> - <a class="dac-nav-link" href="<?cs var:toroot ?>distribute/users/index.html">Get Users</a></li> - <li class="dac-nav-item engage"> - <a class="dac-nav-link" href="<?cs var:toroot ?>distribute/engage/index.html">Engage & Retain</a></li> - <li class="dac-nav-item monetize"> - <a class="dac-nav-link" href="<?cs var:toroot ?>distribute/monetize/index.html">Earn</a> - </li> - <li class="dac-nav-item analyze"> - <a class="dac-nav-link" href="<?cs var:toroot ?>distribute/analyze/index.html">Analyze</a> - </li> - <li class="dac-nav-item stories"> - <a class="dac-nav-link" href="<?cs var:toroot ?>distribute/stories/index.html">Stories</a> - </li> + <div class="dac-nav-sidebar" data-swap data-dynamic="false" data-transition-speed="300" data-dac-nav> + <div <?cs if:!referenceonly ?>data-swap-container<?cs /if ?>> + <?cs call:custom_left_nav() ?> + <?cs if:!referenceonly ?> + <ul id="dac-main-navigation" class="dac-nav-list dac-swap-section dac-left dac-no-anim"> + <li class="dac-nav-item home"> + <a class="dac-nav-link" href="<?cs var:toroot ?>index.html">Home</a> + <i class="dac-sprite dac-expand-more-black dac-nav-sub-slider"></i> + <ul class="dac-nav-secondary about"> + <li class="dac-nav-item versions"> + <a class="dac-nav-link" href="<?cs var:toroot ?>about/versions/nougat/index.html">Android</a> + </li> + <li class="dac-nav-item wear"> + <a class="dac-nav-link" href="<?cs var:toroot ?>wear/index.html">Wear</a> + </li> + <li class="dac-nav-item tv"> + <a class="dac-nav-link" href="<?cs var:toroot ?>tv/index.html">TV</a> + </li> + <li class="dac-nav-item auto"> + <a class="dac-nav-link" href="<?cs var:toroot ?>auto/index.html">Auto</a> + </li> + </ul> + </li> + <li class="dac-nav-item design"> + <a class="dac-nav-link" href="<?cs var:toroot ?>design/index.html" + zh-tw-lang="設計" + zh-cn-lang="设计" + ru-lang="Проектирование" + ko-lang="디자인" + ja-lang="設計" + es-lang="Diseñar">Design</a> + </li> + <li class="dac-nav-item develop"> + <a class="dac-nav-link" href="<?cs var:toroot ?>develop/index.html" + zh-tw-lang="開發" + zh-cn-lang="开发" + ru-lang="Разработка" + ko-lang="개발" + ja-lang="開発" + es-lang="Desarrollar">Develop</a> + <i class="dac-sprite dac-expand-more-black dac-nav-sub-slider"></i> + <ul class="dac-nav-secondary develop"> + <li class="dac-nav-item training"> + <a class="dac-nav-link" href="<?cs var:toroot ?>training/index.html" + zh-tw-lang="訓練課程" + zh-cn-lang="培训" + ru-lang="Курсы" + ko-lang="교육" + ja-lang="トレーニング" + es-lang="Capacitación">Training</a> + </li> + <li class="dac-nav-item guide"> + <a class="dac-nav-link" href="<?cs var:toroot ?>guide/index.html" + zh-tw-lang="API 指南" + zh-cn-lang="API 指南" + ru-lang="Руководства по API" + ko-lang="API 가이드" + ja-lang="API ガイド" + es-lang="Guías de la API">API Guides</a> + </li> + <li class="dac-nav-item reference"> + <a class="dac-nav-link" href="<?cs var:toroot ?>reference/packages.html" + zh-tw-lang="參考資源" + zh-cn-lang="参考" + ru-lang="Справочник" + ko-lang="참조문서" + ja-lang="リファレンス" + es-lang="Referencia">Reference</a> + </li> + <li class="dac-nav-item tools"> + <a class="dac-nav-link" href="<?cs var:toroot ?>sdk/index.html" + zh-tw-lang="相關工具" + zh-cn-lang="工具" + ru-lang="Инструменты" + ko-lang="도구" + ja-lang="ツール" + es-lang="Herramientas">Tools</a></li> + <li class="dac-nav-item google"> + <a class="dac-nav-link" href="<?cs var:toroot ?>google/index.html">Google Services</a> + </li> + <?cs if:android.hasSamples ?> + <li class="dac-nav-item samples"> + <a class="dac-nav-link" href="<?cs var:toroot ?>samples/index.html">Samples</a> + </li> + <?cs /if ?> + </ul> + </li> + <li class="dac-nav-item distribute"> + <a class="dac-nav-link" href="<?cs var:toroot ?>distribute/<?cs if:android.whichdoc == 'offline' ?>googleplay/<?cs /if ?>index.html" + zh-tw-lang="發佈" + zh-cn-lang="分发" + ru-lang="Распространение" + ko-lang="배포" + ja-lang="配布" + es-lang="Distribuir">Distribute</a> + <i class="dac-sprite dac-expand-more-black dac-nav-sub-slider"></i> + <ul class="dac-nav-secondary distribute"> + <li class="dac-nav-item googleplay"> + <a class="dac-nav-link" href="<?cs var:toroot ?>distribute/googleplay/index.html">Google Play</a></li> + <li class="dac-nav-item essentials"> + <a class="dac-nav-link" href="<?cs var:toroot ?>distribute/essentials/index.html">Essentials</a></li> + <li class="dac-nav-item users"> + <a class="dac-nav-link" href="<?cs var:toroot ?>distribute/users/index.html">Get Users</a></li> + <li class="dac-nav-item engage"> + <a class="dac-nav-link" href="<?cs var:toroot ?>distribute/engage/index.html">Engage & Retain</a></li> + <li class="dac-nav-item monetize"> + <a class="dac-nav-link" href="<?cs var:toroot ?>distribute/monetize/index.html">Earn</a> + </li> + <li class="dac-nav-item analyze"> + <a class="dac-nav-link" href="<?cs var:toroot ?>distribute/analyze/index.html">Analyze</a> + </li> + <li class="dac-nav-item stories"> + <a class="dac-nav-link" href="<?cs var:toroot ?>distribute/stories/index.html">Stories</a> + </li> + </ul> + </li> + <!--<li class="dac-nav-item preview"> + <a class="dac-nav-link" href="<?cs var:toroot ?>preview/index.html">Preview</a> + </li>--> </ul> - </li><?cs - /if ?><?cs - # - # End if/else reference only docs - # - ?> - </ul> + <?cs /if ?><?cs # end if referenceonly ?> + </div> + </div> </nav> <!-- end navigation--> <?cs /if ?> -<?cs /if ?><?cs # end if/else !devsite ?> -<?cs -/def ?><?cs # end custom_masthead() ?> +<!-- Nav Setup --> +<script>$('[data-dac-nav]').dacNav();</script> +<?cs +/def ?><?cs # end custom_masthead() ?><?cs -<?cs # (UN)COMMENT THE INSIDE OF THIS METHOD TO TOGGLE VISIBILITY ?> -<?cs def:butter_bar() ?> +def:toast() ?><?cs -<?cs # HIDE THE BUTTER BAR +# (UN)COMMENT TO TOGGLE VISIBILITY - <div style="height:20px"><!-- spacer to bump header down --></div> - <div id="butterbar-wrapper"> - <div id="butterbar"> - <a href="//googleblog.blogspot.com/" id="butterbar-message"> - The Android 5.0 SDK will be available on October 17th! - </a> + <div class="dac-toast-group"> + <div class="dac-toast" data-toast> + <div class="dac-toast-wrap"> + This is a demo notification <a href="#">Learn more</a>. </div> </div> + </div> -?> - -<?cs /def ?> +?><?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 4cf5abb58e..0b938ac5d1 100644 --- a/tools/droiddoc/templates-sdk/customizations.cs +++ b/tools/droiddoc/templates-sdk/customizations.cs @@ -1,362 +1,33 @@ -<?cs -def:mobile_nav_toggle() ?> - <div class="dac-visible-mobile-block" data-toggle="section"> - <span class="dac-toggle-expand dac-devdoc-toggle"><i class="dac-sprite dac-expand-more-black"></i> Show navigation</span> - <span class="dac-toggle-collapse dac-devdoc-toggle" data-toggle-section><i class="dac-sprite dac-expand-less-black"></i> Hide navigation</span> - </div> +<?cs def:body_content_wrap_start() ?> + <div class="wrap clearfix" id="body-content"> <?cs /def ?><?cs def:fullpage() ?> <div id="body-content"> <div> -<?cs /def ?> -<?cs -def:sdk_nav() ?> - <div class="wrap clearfix" id="body-content"><div class="cols"> - <div class="col-4 dac-toggle dac-mobile" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> - <?cs call:mobile_nav_toggle() ?> - <div class="dac-toggle-content" id="devdoc-nav"> - <div class="scroll-pane"> -<?cs include:"../../../../frameworks/base/docs/html/sdk/sdk_toc.cs" ?> - </div> - </div> - </div> <!-- end side-nav --> -<?cs /def ?><?cs - -def:no_nav() ?> - <div class="wrap clearfix" id="body-content"> - <div> -<?cs /def ?><?cs - -def:tools_nav() ?> - <div class="wrap clearfix" id="body-content"><div class="cols"> - <div class="col-3 dac-toggle dac-mobile" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> - <?cs call:mobile_nav_toggle() ?> - <div class="dac-toggle-content" id="devdoc-nav"> - <div class="scroll-pane"> -<?cs include:"../../../../frameworks/base/docs/html/tools/tools_toc.cs" ?> - </div> - </div> - </div> <!-- end side-nav --> - <script> - $(document).ready(function() { - scrollIntoView("devdoc-nav"); - }); - </script> -<?cs /def ?> -<?cs -def:training_nav() ?> - <div class="wrap clearfix" id="body-content"><div class="cols"> - <div class="col-4 dac-toggle dac-mobile" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> - <?cs call:mobile_nav_toggle() ?> - <div class="dac-toggle-content" id="devdoc-nav"> - <div class="scroll-pane"> -<?cs include:"../../../../frameworks/base/docs/html/training/training_toc.cs" ?> - </div> - </div> - </div> <!-- end side-nav --> - <script> - $(document).ready(function() { - scrollIntoView("devdoc-nav"); - }); - </script> <?cs /def ?><?cs -def:googleplay_nav() ?> - <div class="wrap clearfix" id="body-content"><div class="cols"> - <div class="col-3 dac-toggle dac-mobile" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> - <?cs call:mobile_nav_toggle() ?> - <div class="dac-toggle-content" id="devdoc-nav"> - <div class="scroll-pane"> -<?cs include:"../../../../frameworks/base/docs/html/distribute/googleplay/googleplay_toc.cs" ?> - </div> - </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:reference_default_nav() ?> + <!-- Fullscreen toggler --> + <button data-fullscreen class="dac-nav-fullscreen"> + <i class="dac-sprite dac-fullscreen"></i> + </button> -def:preview_nav() ?> - <div class="wrap clearfix" id="body-content"><div class="cols"> - <div class="col-4 dac-toggle dac-mobile" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> - <?cs call:mobile_nav_toggle() ?> - <div class="dac-toggle-content" id="devdoc-nav"> - <div class="scroll-pane"> -<?cs include:"../../../../frameworks/base/docs/html/preview/preview_toc.cs" ?> - </div> - </div> - </div> <!-- end side-nav --> - <script> - $(document).ready(function() { - scrollIntoView("devdoc-nav"); - }); - </script> -<?cs /def ?><?cs + <script>$('[data-fullscreen]').dacFullscreen();</script> + <!-- End: Fullscreen toggler --> -def:essentials_nav() ?> - <div class="wrap clearfix" id="body-content"><div class="cols"> - <div class="col-3 dac-toggle dac-mobile" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> - <?cs call:mobile_nav_toggle() ?> - <div class="dac-toggle-content" id="devdoc-nav"> - <div class="scroll-pane"> -<?cs include:"../../../../frameworks/base/docs/html/distribute/essentials/essentials_toc.cs" ?> - </div> - </div> - </div> <!-- end side-nav --> - <script> - $(document).ready(function() { - scrollIntoView("devdoc-nav"); - }); - </script> -<?cs /def ?><?cs - -def:users_nav() ?> - <div class="wrap clearfix" id="body-content"><div class="cols"> - <div class="col-3 dac-toggle dac-mobile" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> - <?cs call:mobile_nav_toggle() ?> - <div class="dac-toggle-content" id="devdoc-nav"> - <div class="scroll-pane"> -<?cs include:"../../../../frameworks/base/docs/html/distribute/users/users_toc.cs" ?> - </div> - </div> - </div> <!-- end side-nav --> - <script> - $(document).ready(function() { - scrollIntoView("devdoc-nav"); - }); - </script> -<?cs /def ?><?cs - -def:engage_nav() ?> - <div class="wrap clearfix" id="body-content"><div class="cols"> - <div class="col-3 dac-toggle dac-mobile" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> - <?cs call:mobile_nav_toggle() ?> - <div class="dac-toggle-content" id="devdoc-nav"> - <div class="scroll-pane"> -<?cs include:"../../../../frameworks/base/docs/html/distribute/engage/engage_toc.cs" ?> - </div> - </div> - </div> <!-- end side-nav --> - <script> - $(document).ready(function() { - scrollIntoView("devdoc-nav"); - }); - </script> -<?cs /def ?><?cs - -def:analyze_nav() ?> - <div class="wrap clearfix" id="body-content"><div class="cols"> - <div class="col-3 dac-toggle dac-mobile" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> - <?cs call:mobile_nav_toggle() ?> - <div class="dac-toggle-content" id="devdoc-nav"> - <div class="scroll-pane"> -<?cs include:"../../../../frameworks/base/docs/html/distribute/analyze/analyze_toc.cs" ?> - </div> - </div> - </div> <!-- end side-nav --> - <script> - $(document).ready(function() { - scrollIntoView("devdoc-nav"); - }); - </script> -<?cs /def ?><?cs - -def:monetize_nav() ?> - <div class="wrap clearfix" id="body-content"><div class="cols"> - <div class="col-3 dac-toggle dac-mobile" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> - <?cs call:mobile_nav_toggle() ?> - <div class="dac-toggle-content" id="devdoc-nav"> - <div class="scroll-pane"> -<?cs include:"../../../../frameworks/base/docs/html/distribute/monetize/monetize_toc.cs" ?> - </div> - </div> - </div> <!-- end side-nav --> - <script> - $(document).ready(function() { - scrollIntoView("devdoc-nav"); - }); - </script> -<?cs /def ?><?cs - -def:disttools_nav() ?> - <div class="wrap clearfix" id="body-content"><div class="cols"> - <div class="col-3 dac-toggle dac-mobile" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> - <?cs call:mobile_nav_toggle() ?> - <div class="dac-toggle-content" id="devdoc-nav"> - <div class="scroll-pane"> -<?cs include:"../../../../frameworks/base/docs/html/distribute/tools/disttools_toc.cs" ?> - </div> - </div> - </div> <!-- end side-nav --> - <script> - $(document).ready(function() { - scrollIntoView("devdoc-nav"); - }); - </script> -<?cs /def ?><?cs - -def:stories_nav() ?> - <div class="wrap clearfix" id="body-content"><div class="cols"> - <div class="col-3 dac-toggle dac-mobile" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> - <?cs call:mobile_nav_toggle() ?> - <div class="dac-toggle-content" id="devdoc-nav"> - <div class="scroll-pane"> -<?cs include:"../../../../frameworks/base/docs/html/distribute/stories/stories_toc.cs" ?> - </div> - </div> - </div> <!-- end side-nav --> - <script> - $(document).ready(function() { - scrollIntoView("devdoc-nav"); - }); - </script> -<?cs /def ?><?cs - -def:guide_nav() ?> - <div class="wrap clearfix" id="body-content"><div class="cols"> - <div class="col-4 dac-toggle dac-mobile" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> - <?cs call:mobile_nav_toggle() ?> - <div class="dac-toggle-content" id="devdoc-nav"> - <div class="scroll-pane"> -<?cs include:"../../../../frameworks/base/docs/html/guide/guide_toc.cs" ?> - </div> - </div> - </div> <!-- end side-nav --> - <script> - $(document).ready(function() { - scrollIntoView("devdoc-nav"); - }); - </script> -<?cs /def ?> -<?cs -def:design_nav() ?> - <div class="wrap clearfix" id="body-content"><div class="cols"> - <div class="col-3 dac-toggle dac-mobile" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> - <?cs call:mobile_nav_toggle() ?> - <div class="dac-toggle-content" id="devdoc-nav"> - <div class="scroll-pane"> -<?cs include:"../../../../frameworks/base/docs/html/design/design_toc.cs" ?> - </div> - </div> - </div> <!-- end side-nav --> - <script> - $(document).ready(function() { - scrollIntoView("devdoc-nav"); - }); - </script> -<?cs /def ?> -<?cs -def:distribute_nav() ?> - <div class="wrap clearfix" id="body-content"><div class="cols"> - <div class="col-3 dac-toggle dac-mobile" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> - <?cs call:mobile_nav_toggle() ?> - <div class="dac-toggle-content" id="devdoc-nav"> - <div class="scroll-pane"> -<?cs include:"../../../../frameworks/base/docs/html/distribute/distribute_toc.cs" ?> - </div> - </div> - </div> <!-- end side-nav --> - <script> - $(document).ready(function() { - scrollIntoView("devdoc-nav"); - }); - </script> -<?cs /def ?> - -<?cs -def:samples_nav() ?> - <div class="wrap clearfix" id="body-content"><div class="cols"> - <div class="col-4 dac-toggle dac-mobile" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> - <?cs call:mobile_nav_toggle() ?> - <div class="dac-toggle-content" id="devdoc-nav"> - <div class="scroll-pane"> -<?cs include:"../../../../frameworks/base/docs/html/samples/samples_toc.cs" ?> - </div> - </div> - - </div> <!-- end side-nav --> - <script> - $(document).ready(function() { - scrollIntoView("devdoc-nav"); - }); - </script> -<?cs /def ?> - -<?cs -def:google_nav() ?> - <div class="wrap clearfix" id="body-content"><div class="cols"> - <div class="col-4 dac-toggle dac-mobile" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> - <?cs call:mobile_nav_toggle() ?> - <div class="dac-toggle-content" id="devdoc-nav"> - <div class="scroll-pane"> -<?cs include:"../../../../frameworks/base/docs/html/google/google_toc.cs" ?> - </div> - </div> - <script type="text/javascript"> - showGoogleRefTree(); - - </script> - </div> <!-- end side-nav --> - <script> - $(document).ready(function() { - scrollIntoView("devdoc-nav"); - }); - </script> -<?cs /def ?> - -<?cs -def:about_nav() ?> - <div class="wrap clearfix" id="body-content"><div class="cols"> - <div class="col-3 dac-toggle dac-mobile" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> - <?cs call:mobile_nav_toggle() ?> - <div class="dac-toggle-content" id="devdoc-nav"> - <div class="scroll-pane"> -<?cs include:"../../../../frameworks/base/docs/html/about/about_toc.cs" ?> - </div> - </div> - </div> <!-- end side-nav --> - <script> - $(document).ready(function() { - scrollIntoView("devdoc-nav"); - }); - </script> -<?cs /def ?> - - -<?cs -def:wear_nav() ?> - <div class="wrap clearfix" id="body-content"><div class="cols"> - <div class="col-4 dac-toggle dac-mobile" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> - <?cs call:mobile_nav_toggle() ?> - <div class="dac-toggle-content" id="devdoc-nav"> - <div class="scroll-pane"> -<?cs include:"../../../../frameworks/base/docs/html/wear/wear_toc.cs" ?> - </div> - </div> - </div> <!-- end side-nav --> - <script> - $(document).ready(function() { - scrollIntoView("devdoc-nav"); - }); + <?cs if:reference.gcm || reference.gms ?> + <?cs include:"../../../../frameworks/base/docs/html/google/google_toc.cs" ?> + <script type="text/javascript"> + showGoogleRefTree(); </script> -<?cs /def ?> - - -<?cs # The default side navigation for the reference docs ?><?cs -def:default_left_nav() ?> -<?cs if:reference.gcm || reference.gms ?> - <?cs call:google_nav() ?> -<?cs else ?> - <div class="wrap clearfix" id="body-content"><div class="cols"> - <div class="col-4 dac-hidden-mobile" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> - <div id="devdoc-nav"> + <?cs else ?> + <div id="devdoc-nav"> <div id="api-nav-header"> <div id="api-level-toggle"> <label for="apiLevelCheckbox" class="disabled" - title="Select your target API level to dim unavailable APIs">API level: </label> + title="Select your target API level to dim unavailable APIs">API level: </label> <div class="select-wrapper"> <select id="apiLevelSelector"> <!-- option elements added by buildApiLevelSelector() --> @@ -364,98 +35,46 @@ def:default_left_nav() ?> </div> </div><!-- end toggle --> <div id="api-nav-title">Android APIs</div> - </div><!-- end nav header --> + </div><!-- end nav header --> <script> var SINCE_DATA = [ <?cs each:since = since ?>'<?cs var:since.name ?>'<?cs if:!last(since) ?>, <?cs /if ?><?cs - /each - ?> ]; + /each + ?> ]; buildApiLevelSelector(); </script> - <div id="swapper"> - <div id="nav-panels"> - <div id="resize-packages-nav"> - <div id="packages-nav" class="scroll-pane"> - - <ul> - <?cs call:package_link_list(docs.packages) ?> - </ul><br/> - - </div> <!-- end packages-nav --> - </div> <!-- end resize-packages --> - <div id="classes-nav" class="scroll-pane"> - - -<?cs - if:subcount(class.package) ?> - <ul> - <?cs call:list("Annotations", class.package.annotations) ?> - <?cs call:list("Interfaces", class.package.interfaces) ?> - <?cs call:list("Classes", class.package.classes) ?> - <?cs call:list("Enums", class.package.enums) ?> - <?cs call:list("Exceptions", class.package.exceptions) ?> - <?cs call:list("Errors", class.package.errors) ?> - </ul><?cs - elif:subcount(package) ?> - <ul> - <?cs call:class_link_list("Annotations", package.annotations) ?> - <?cs call:class_link_list("Interfaces", package.interfaces) ?> - <?cs call:class_link_list("Classes", package.classes) ?> - <?cs call:class_link_list("Enums", package.enums) ?> - <?cs call:class_link_list("Exceptions", package.exceptions) ?> - <?cs call:class_link_list("Errors", package.errors) ?> - </ul><?cs - else ?> - <p style="padding:10px">Select a package to view its members</p><?cs - /if ?><br/> - - - </div><!-- end classes --> - </div><!-- end nav-panels --> - <div id="nav-tree" style="display:none" class="scroll-pane"> - <div id="tree-list"></div> - </div><!-- end nav-tree --> - </div><!-- end swapper --> - <div id="nav-swap"> - <a class="fullscreen">fullscreen</a> - <a href='#' onclick='swapNav();return false;'><span id='tree-link'>Use Tree Navigation</span><span id='panel-link' style='display:none'>Use Panel Navigation</span></a> + <div class="dac-reference-nav" data-reference-tree> + <ul class="dac-reference-nav-list" data-reference-namespaces> + <?cs call:package_link_list(docs.packages) ?> + </ul> + + <?cs if:subcount(class.package) ?> + <ul data-reference-resources> + <?cs call:list("Annotations", class.package.annotations) ?> + <?cs call:list("Interfaces", class.package.interfaces) ?> + <?cs call:list("Classes", class.package.classes) ?> + <?cs call:list("Enums", class.package.enums) ?> + <?cs call:list("Exceptions", class.package.exceptions) ?> + <?cs call:list("Errors", class.package.errors) ?> + </ul> + <?cs elif:subcount(package) ?> + <ul data-reference-resources> + <?cs call:class_link_list("Annotations", package.annotations) ?> + <?cs call:class_link_list("Interfaces", package.interfaces) ?> + <?cs call:class_link_list("Classes", package.classes) ?> + <?cs call:class_link_list("Enums", package.enums) ?> + <?cs call:class_link_list("Exceptions", package.exceptions) ?> + <?cs call:class_link_list("Errors", package.errors) ?> + </ul> + <?cs /if ?> </div> - </div> <!-- end devdoc-nav --> - </div> <!-- end side-nav --> - <script type="text/javascript"> - // init fullscreen based on user pref - var fullscreen = readCookie("fullscreen"); - if (fullscreen != 0) { - if (fullscreen == "false") { - toggleFullscreen(false); - } else { - toggleFullscreen(true); - } - } - // init nav version for mobile - if (isMobile) { - swapNav(); // tree view should be used on mobile - $('#nav-swap').hide(); - } else { - chooseDefaultNav(); - if ($("#nav-tree").is(':visible')) { - init_default_navtree("<?cs var:toroot ?>"); - } - } - // scroll the selected page into view - $(document).ready(function() { - scrollIntoView("packages-nav"); - scrollIntoView("classes-nav"); - }); - </script> -<?cs /if ?> - <?cs -/def ?> + </div> + <?cs /if ?> +<?cs /def ?><?cs -<?cs def:ndk_nav() ?> <div class="wrap clearfix" id="body-content"><div class="cols"> <div class="col-3 dac-toggle dac-mobile" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> @@ -471,150 +90,159 @@ elif:samples ?><?cs include:"../../../../frameworks/base/docs/html/ndk/samples/s </div> </div> </div> <!-- end side-nav --> - <script> - $(document).ready(function() { - scrollIntoView("devdoc-nav"); - }); - </script> -<?cs /def ?> +<?cs /def ?><?cs -<?cs def:header_search_widget() ?> - <div class="dac-header-search" id="search-container"> - <div class="dac-header-search-inner"> - <div class="dac-sprite dac-search dac-header-search-btn" id="search-btn"></div> - <form class="dac-header-search-form" onsubmit="return submit_search()"> - <input id="search_autocomplete" type="text" value="" autocomplete="off" name="q" - onfocus="search_focus_changed(this, true)" onblur="search_focus_changed(this, false)" - onkeydown="return search_changed(event, true, '<?cs var:toroot ?>')" - onkeyup="return search_changed(event, false, '<?cs var:toroot ?>')" - class="dac-header-search-input" placeholder="Search" /> - <a class="dac-header-search-close hide" id="search-close">close</a> - </form> - </div><!-- end dac-header-search-inner --> - </div><!-- end dac-header-search --> + <form data-search class="dac-header-search"> + <button class="dac-header-search-close" data-search-close> + <i class="dac-sprite dac-back-arrow"></i> + </button> - <div class="search_filtered_wrapper"> - <div class="suggest-card reference no-display"> - <ul class="search_filtered"> - </ul> + <div class="dac-header-search-inner"> + <i class="dac-sprite dac-search-white dac-header-search-icon"></i> + <input id="search_autocomplete" type="text" value="" autocomplete="off" name="q" class="dac-header-search-input" placeholder="Search" /> + <button class="dac-header-search-clear dac-hidden" data-search-clear> + <i class="dac-sprite dac-close-black"></i> + </button> </div> - <div class="suggest-card develop no-display"> - <ul class="search_filtered"> - </ul> - <div class="child-card guides no-display"> - </div> - <div class="child-card training no-display"> - </div> - <div class="child-card samples no-display"> + </form> +<?cs /def ?><?cs + +def:search_results() ?> + <div id="search-results" class="dac-search-results"> + <div id="dac-search-results-history" class="dac-search-results-history"> + <div class="wrap dac-search-results-history-wrap"> + <div class="cols"> + <div class="col-1of2 col-tablet-1of2 col-mobile-1of1"> + <h2>Most visited</h2> + <div class="resource-flow-layout" data-history-query="history:most/visited" data-maxresults="3" data-cardsizes="18x2"></div> + </div> + + <div class="col-1of2 col-tablet-1of2 col-mobile-1of1"> + <h2>Recently visited</h2> + <div class="resource-flow-layout cols" data-history-query="history:recent" data-allow-duplicates="true" data-maxresults="3" data-cardsizes="18x2"></div> + </div> + </div> </div> </div> - <div class="suggest-card design no-display"> - <ul class="search_filtered"> - </ul> - </div> - <div class="suggest-card distribute no-display"> - <ul class="search_filtered"> - </ul> + + <div id="dac-search-results-content" class="dac-search-results-content"> + <div class="dac-search-results-metadata wrap"> + <div class="dac-search-results-for"> + <h2>Results for <span id="search-results-for"></span></h2> + </div> + + <div id="dac-search-results-hero"></div> + + <div class="dac-search-results-hero cols"> + <div id="dac-search-results-reference" class="col-3of6 col-tablet-1of2 col-mobile-1of1"> + <div class="suggest-card reference no-display"> + <ul class="dac-search-results-reference"> + </ul> + </div> + </div> + <div id="dac-custom-search-results"></div> + </div> + </div> + </div> </div> -<?cs /def ?> - +<?cs /def ?><?cs -<?cs -def:custom_left_nav() ?><?cs - if:ndk ?><?cs - if:fullpage ?><?cs - call:fullpage() ?><?cs - elif:nonavpage ?><?cs - call:no_nav() ?><?cs - elif:guide || reference || samples || downloads ?><?cs - call:ndk_nav() ?><?cs - else ?><?cs - call:default_left_nav() ?> <?cs - /if ?><?cs - else ?><?cs - if:fullpage ?><?cs - call:fullpage() ?><?cs - elif:nonavpage ?><?cs - call:no_nav() ?><?cs - elif:guide ?><?cs - call:guide_nav() ?><?cs - elif:design ?><?cs - call:design_nav() ?><?cs - elif:training ?><?cs - call:training_nav() ?><?cs - elif:tools ?><?cs - call:tools_nav() ?><?cs - elif:google ?><?cs - call:google_nav() ?><?cs - elif:samples ?><?cs - call:samples_nav() ?><?cs - elif:preview ?><?cs - call:preview_nav() ?><?cs - elif:distribute ?><?cs - if:googleplay ?><?cs - call:googleplay_nav() ?><?cs - elif:essentials ?><?cs - call:essentials_nav() ?><?cs - elif:users ?><?cs - call:users_nav() ?><?cs - elif:engage ?><?cs - call:engage_nav() ?><?cs - elif:monetize ?><?cs - call:monetize_nav() ?><?cs - elif:analyze ?><?cs - call:analyze_nav() ?><?cs - elif:disttools ?><?cs - call:disttools_nav() ?><?cs - elif:stories ?><?cs - call:stories_nav() ?><?cs - /if ?><?cs - elif:about ?><?cs - call:about_nav() ?><?cs - elif:distribute ?><?cs - call:distribute_nav() ?><?cs - elif:wear ?><?cs - call:wear_nav() ?><?cs - else ?><?cs - call:default_left_nav() ?> <?cs - /if ?><?cs - /if ?><?cs -/def ?> +def:custom_left_nav() ?> + <?cs if:(!fullpage && !nonavpage) || forcelocalnav ?> + <?cs if:!referenceonly ?> + <a class="dac-nav-back-button dac-swap-section dac-up dac-no-anim" data-swap-button href="javascript:;"> + <i class="dac-sprite dac-nav-back"></i> <span class="dac-nav-back-title">Back</span> + </a> + <?cs /if ?> + <div class="dac-nav-sub dac-swap-section dac-right dac-active" itemscope + itemtype="http://schema.org/SiteNavigationElement" <?cs + if:referenceonly ?>style="top:0 !important;"<?cs /if ?>> + <?cs if:ndk ?> + <?cs if:guide ?> + <?cs include:"../../../../frameworks/base/docs/html/ndk/guides/guides_toc.cs" ?> + <?cs elif:reference ?> + <?cs include:"../../../../frameworks/base/docs/html/ndk/reference/reference_toc.cs" ?> + <?cs elif:downloads ?> + <?cs include:"../../../../frameworks/base/docs/html/ndk/downloads/downloads_toc.cs" ?> + <?cs elif:samples ?> + <?cs include:"../../../../frameworks/base/docs/html/ndk/samples/samples_toc.cs" ?> + <?cs else ?> + <?cs call:reference_default_nav() ?> + <?cs /if ?> + <?cs elif:guide ?> + <?cs include:"../../../../frameworks/base/docs/html/guide/guide_toc.cs" ?> + <?cs elif:design ?> + <?cs include:"../../../../frameworks/base/docs/html/design/design_toc.cs" ?> + <?cs elif:training ?> + <?cs include:"../../../../frameworks/base/docs/html/training/training_toc.cs" ?> + <?cs elif:tools ?> + <?cs include:"../../../../frameworks/base/docs/html/tools/tools_toc.cs" ?> + <?cs elif:google ?> + <?cs include:"../../../../frameworks/base/docs/html/google/google_toc.cs" ?> + <?cs elif:samples ?> + <?cs include:"../../../../frameworks/base/docs/html/samples/samples_toc.cs" ?> + <?cs elif:preview ?> + <?cs include:"../../../../frameworks/base/docs/html/preview/preview_toc.cs" ?> + <?cs elif:preview ?> + <?cs include:"../../../../frameworks/base/docs/html/wear/preview/preview_toc.cs" ?> + <?cs elif:distribute ?> + <?cs if:googleplay ?> + <?cs include:"../../../../frameworks/base/docs/html/distribute/googleplay/googleplay_toc.cs" ?> + <?cs elif:essentials ?> + <?cs include:"../../../../frameworks/base/docs/html/distribute/essentials/essentials_toc.cs" ?> + <?cs elif:users ?> + <?cs include:"../../../../frameworks/base/docs/html/distribute/users/users_toc.cs" ?> + <?cs elif:engage ?> + <?cs include:"../../../../frameworks/base/docs/html/distribute/engage/engage_toc.cs" ?> + <?cs elif:monetize ?> + <?cs include:"../../../../frameworks/base/docs/html/distribute/monetize/monetize_toc.cs" ?> + <?cs elif:analyze ?> + <?cs include:"../../../../frameworks/base/docs/html/distribute/analyze/analyze_toc.cs" ?> + <?cs elif:disttools ?> + <?cs include:"../../../../frameworks/base/docs/html/distribute/tools/disttools_toc.cs" ?> + <?cs elif:stories ?> + <?cs include:"../../../../frameworks/base/docs/html/distribute/stories/stories_toc.cs" ?> + <?cs /if ?> + <?cs elif:about ?> + <?cs include:"../../../../frameworks/base/docs/html/about/about_toc.cs" ?> + <?cs else ?> + <?cs call:reference_default_nav() ?> + <?cs /if ?> + </div> + <?cs /if ?> +<?cs /def ?><?cs -<?cs # appears at the bottom of every page ?><?cs +# appears at the bottom of every page ?><?cs def:custom_cc_copyright() ?> Except as noted, this content is - licensed under <a href="//creativecommons.org/licenses/by/2.5/"> + licensed under <a href="http://creativecommons.org/licenses/by/2.5/"> Creative Commons Attribution 2.5</a>. For details and restrictions, see the <a href="<?cs var:toroot ?>license.html">Content - License</a>.<?cs -/def ?> + License</a>. +<?cs /def ?><?cs -<?cs def:custom_copyright() ?> Except as noted, this content is licensed under <a - href="//www.apache.org/licenses/LICENSE-2.0">Apache 2.0</a>. + href="http://www.apache.org/licenses/LICENSE-2.0">Apache 2.0</a>. For details and restrictions, see the <a href="<?cs var:toroot ?>license.html"> - Content License</a>.<?cs -/def ?> + Content License</a>. +<?cs /def ?><?cs -<?cs def:custom_footerlinks() ?> - <a href="<?cs var:toroot ?>about/index.html">About Android</a> + <a href="<?cs var:toroot ?>about/android.html">About Android</a> <a href="<?cs var:toroot ?>auto/index.html">Auto</a> <a href="<?cs var:toroot ?>tv/index.html">TV</a> <a href="<?cs var:toroot ?>wear/index.html">Wear</a> <a href="<?cs var:toroot ?>legal.html">Legal</a> - <?cs -/def ?> - -<?cs # appears on the right side of the blue bar at the bottom off every page ?><?cs -def:custom_buildinfo() ?><?cs - if:!google && !reference.gcm && !reference.gms ?> - Android <?cs var:sdk.version ?> r<?cs var:sdk.rel.id ?> — <?cs - /if ?> -<script src="<?cs var:toroot ?>timestamp.js" type="text/javascript"></script> -<script>document.write(BUILD_TIMESTAMP)</script> -<?cs /def ?> +<?cs /def ?><?cs +# appears on the right side of the blue bar at the bottom off every page ?><?cs +def:custom_buildinfo() ?> + <?cs if:!google && !reference.gcm && !reference.gms ?> + Android <?cs var:sdk.version ?> r<?cs var:sdk.rel.id ?> — + <?cs /if ?> + <script src="<?cs var:toroot ?>timestamp.js" type="text/javascript"></script> + <script>document.write(BUILD_TIMESTAMP)</script> +<?cs /def ?>
\ No newline at end of file diff --git a/tools/droiddoc/templates-sdk/designpage.cs b/tools/droiddoc/templates-sdk/designpage.cs index d9c2681290..d75ce0ad9c 100644 --- a/tools/droiddoc/templates-sdk/designpage.cs +++ b/tools/droiddoc/templates-sdk/designpage.cs @@ -7,12 +7,12 @@ Android Design<?cs if:page.title ?> - <?cs var:page.title ?><?cs /if ?> </title> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> - <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic"> + <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic"> <link rel="stylesheet" href="<?cs var:toroot ?>assets/yui-3.3.0-reset-min.css"> - <link rel="stylesheet" href="<?cs var:toroot ?>assets/design/default.css?v=19"> + <link rel="stylesheet" href="<?cs var:toroot ?>assets/design/default.css"> <script src="<?cs var:toroot ?>assets/jquery-1.6.2.min.js"></script> <script>var SITE_ROOT = '<?cs var:toroot ?>design';</script> - <script src="<?cs var:toroot ?>assets/design/default.js?v=19"></script> + <script src="<?cs var:toroot ?>assets/design/default.js"></script> </head> <body class="gc-documentation <?cs if:(guide||develop||training||reference||tools||sdk) ?>develop<?cs @@ -42,10 +42,6 @@ <?cs elif:header.title ?><h2><?cs var:header.title ?></h2> <?cs else ?><h2><?cs var:page.title ?></h2> <?cs /if ?> - <div class="paging-links" itemscope itemtype="http://schema.org/SiteNavigationElement"> - <a href="#" class="prev-page-link">Previous</a> - <a href="#" class="next-page-link">Next</a> - </div> </div> <?cs /if ?> @@ -70,16 +66,16 @@ <p id="copyright"> Except as noted, this content is licensed under - <a href="//creativecommons.org/licenses/by/2.5/"> + <a href="http://creativecommons.org/licenses/by/2.5/"> Creative Commons Attribution 2.5</a>.<br> For details and restrictions, see the - <a href="//developer.android.com/license.html">Content License</a>. + <a href="http://developer.android.com/license.html">Content License</a>. </p> <p> - <a href="//www.android.com/terms.html">Site Terms of Service</a> – - <a href="//www.android.com/privacy.html">Privacy Policy</a> – - <a href="//www.android.com/branding.html">Brand Guidelines</a> + <a href="http://www.android.com/terms.html">Site Terms of Service</a> – + <a href="http://www.android.com/privacy.html">Privacy Policy</a> – + <a href="http://www.android.com/branding.html">Brand Guidelines</a> </p> </div> diff --git a/tools/droiddoc/templates-sdk/docpage.cs b/tools/droiddoc/templates-sdk/docpage.cs index d41adaabd1..e8a5ba3fe1 100644 --- a/tools/droiddoc/templates-sdk/docpage.cs +++ b/tools/droiddoc/templates-sdk/docpage.cs @@ -1,10 +1,10 @@ -<?cs include:"doctype.cs" ?> -<?cs include:"macros.cs" ?> -<html<?cs if:devsite ?> devsite<?cs /if ?>> +<?cs if:!devsite ?><?cs + include:"doctype.cs" ?><?cs /if ?><?cs + include:"macros.cs" ?><html<?cs if:devsite ?> devsite<?cs /if ?>> <?cs include:"head_tag.cs" ?> -<body class="gc-documentation - -<?cs # add document classes for navigation header selection (and other stuff) ?> +<body<?cs +if:!devsite ?> class="gc-documentation<?cs +# add document classes for navigation header selection (and other stuff) ?> <?cs if:(google || reference.gms || reference.gcm) ?>google <?cs /if ?><?cs if:ndk ?>ndk<?cs @@ -13,10 +13,9 @@ if:reference ?> reference<?cs /if ?><?cs if:downloads ?> downloads<?cs /if ?><?cs else ?><?cs - if:(guide||develop||training||reference||tools||sdk||google||samples||preview) ?>develop<?cs + if:(guide||develop||training||reference||tools||sdk||google||samples) ?>develop<?cs if:guide ?> guide<?cs /if ?><?cs if:samples ?> samples<?cs /if ?><?cs - if:preview ?> preview<?cs /if ?><?cs elif:(distribute||googleplay||essentials||users||engage||monetize||disttools||stories||analyze) ?>distribute<?cs if:googleplay ?> googleplay<?cs /if ?><?cs if:essentials ?> essentials<?cs /if ?><?cs @@ -26,29 +25,42 @@ if:disttools ?> disttools<?cs /if ?><?cs if:stories ?> stories<?cs /if ?><?cs if:analyze ?> analyze<?cs /if ?><?cs - elif:(about||wear||tv||auto) ?>about<?cs - elif:design ?>design<?cs + elif:(design||vision||material||patterns||devices||designdownloads) ?> design<?cs + if:vision ?> vision<?cs /if ?><?cs + if:material ?> material<?cs /if ?><?cs + if:patterns ?> patterns<?cs /if ?><?cs + if:devices ?> devices<?cs /if ?><?cs + if:designdownloads ?> designdownloads<?cs /if ?><?cs + elif:(about||versions||wear||tv||auto) ?> about<?cs + if:versions ?> versions<?cs /if ?><?cs + if:wear ?> wear<?cs /if ?><?cs + if:tv ?> tv<?cs /if ?><?cs + if:auto ?> auto<?cs /if ?><?cs + elif:(preview) ?> preview<?cs /if ?><?cs if:page.trainingcourse ?> trainingcourse<?cs /if ?><?cs -/if ?>" itemscope itemtype="http://schema.org/Article"><?cs -include:"header.cs" ?> - -<div <?cs - if:fullpage - ?>class="fullpage"<?cs - elif:(design||tools||about||sdk||googleplay||essentials||users||engage||monetize||disttools||stories) && !nonavpage - ?>class="col-13" id="doc-col"<?cs - elif:!nonavpage - ?>class="col-12" id="doc-col"<?cs /if ?> > - -<?cs if:(design||training||walkthru) && !page.trainingcourse && !page.article ?><?cs # header logic for docs that provide previous/next buttons ?> - <?cs if:header.hide ?> - <?cs else ?> - <div class="content-header <?cs if:header.justLinks ?>just-links<?cs /if ?>"> + /if ?>" itemscope itemtype="http://schema.org/Article"><?cs +/if ?>><?cs +include:"header.cs" ?><?cs + +if:(design||training||walkthru) && !page.trainingcourse && !page.article ?><?cs +# header logic for docs that provide previous/next buttons ?><?cs + if:(header.hide||devsite) ?><?cs + else ?> + <div class="content-header <?cs if:header.justLinks ?>just-links<?cs /if ?>"> <?cs if:header.justLinks ?> - <?cs else ?><h1 itemprop="name"><?cs var:page.title ?></h1> - <?cs /if ?> - <?cs if:training ?> + <?cs else ?> + <ul class="dac-header-crumbs"> + <?cs # More <li> elements added here with javascript ?> + </ul> + + <!-- Breadcrumb Setup --> + <script>$('.dac-nav-list').dacCurrentPage().dacCrumbs();</script> + + <h1 itemprop="name"><?cs var:page.title ?> + </h1><?cs + /if ?><?cs + if:training ?> <div class="training-nav-top" itemscope itemtype="http://schema.org/SiteNavigationElement"> <a href="#" class="prev-page-link hide" zh-tw-lang="上一堂課" @@ -74,9 +86,9 @@ include:"header.cs" ?> ja-lang="開始する" es-lang="Empezar" >Get started</a> - </div> - <?cs elif:!page.trainingcourse ?> - <div class="paging-links" itemscope itemtype="http://schema.org/SiteNavigationElement"> + </div><?cs + elif:!page.trainingcourse ?> + <?cs # <div class="paging-linkss" itemscope itemtype="http://schema.org/SiteNavigationElement"> <a href="#" class="prev-page-link hide" zh-tw-lang="上一堂課" zh-cn-lang="上一课" @@ -93,12 +105,12 @@ include:"header.cs" ?> ja-lang="次へ" es-lang="Siguiente" >Next</a> - </div> - <?cs /if ?><?cs # end if training ?> + </div> ?><?cs + /if ?><?cs # end if training ?> </div> - <?cs /if ?><?cs # end if header.hide ?> + <?cs /if ?><?cs # end if header.hide ?><?cs -<?cs elif:samplesProjectIndex ?> +elif:samplesProjectIndex ?> <div id="api-info-block"> <div class="sum-details-links"> Overview @@ -108,18 +120,9 @@ include:"header.cs" ?> </div><!-- end breadcurmb block --> <h1 itemprop="name"><?cs var:projectDir ?></h1> -<?cs else ?> - <?cs if:training ?> -<?cs # horrible horrible hack to move TOC up when the next/prev links are not there ?> -<style> - #tb-wrapper { - margin-top:6px; - } -</style> - <?cs /if ?> - - <?cs if:(!fullpage && !header.hide) ?> - <?cs if:page.landing ?><?cs # header logic for docs that are landing pages ?> +<?cs else ?><?cs + if:(!fullpage && !header.hide && !devsite) ?><?cs + if:page.landing ?><?cs # header logic for docs that are landing pages ?> <div class="landing-banner"> <?cs if:page.landing.image ?><?cs # use two-column layout only if there is an image ?> <div class="cols"> @@ -137,8 +140,15 @@ include:"header.cs" ?> </div> <?cs /if ?> </div> - <?cs else ?> - <?cs if:tab1 ?><div id="title-tabs-wrapper"><?cs /if ?> + <?cs else ?><?cs + if:tab1 ?><div id="title-tabs-wrapper"><?cs /if ?> + <ul class="dac-header-crumbs"> + <?cs # More <li> elements added here with javascript ?> + </ul> + + <!-- Breadcrumb Setup --> + <p><script>$('.dac-nav-list').dacCurrentPage().dacCrumbs();</script></p> + <h1 itemprop="name" <?cs if:tab1 ?>class="with-title-tabs"<?cs /if ?>><?cs var:page.title ?></h1><?cs if:tab1 ?><ul id="title-tabs"> <li class="selected"><a href="<?cs var:tab1.link ?>"><?cs var:tab1 ?></a></li> @@ -148,24 +158,73 @@ include:"header.cs" ?> <li><a href="<?cs var:tab3.link ?>"><?cs var:tab3 ?></a></li><?cs /if ?> </ul> <?cs /if ?> - <?cs if:tab1 ?></div><!-- end tab-wrapper --><?cs /if ?> - <?cs /if ?> - <?cs /if ?> -<?cs /if ?><?cs # end if design ?> + <?cs if:tab1 ?></div><!-- end tab-wrapper --><?cs /if ?><?cs + /if ?><?cs + /if ?><?cs +/if ?><?cs # end if design ?><?cs - <?cs # THIS IS THE MAIN DOC CONTENT ?> +if devsite ?><?cs + if:tab1 ?> + <div id="title-tabs-wrapper"> + <ul id="title-tabs"> + <li class="selected"><a href="<?cs var:tab1.link ?>"><?cs var:tab1 ?></a></li> + <?cs if:tab2 ?> + <li><a href="<?cs var:tab2.link ?>"><?cs var:tab2 ?></a></li><?cs /if ?> + <?cs if:tab3 ?> + <li><a href="<?cs var:tab3.link ?>"><?cs var:tab3 ?></a></li><?cs /if ?> + </ul> + </div><!-- end tab-wrapper --><?cs + /if ?><?cs +/if ?><?cs + +# THIS IS THE MAIN DOC CONTENT ?><?cs + if:!devsite ?> <div id="jd-content"> + <div class="jd-descr" itemprop="articleBody"><?cs + /if ?><?cs + if:(!fullpage && !header.hide && devsite) ?><?cs + if:page.landing ?><?cs # header logic for docs that are landing pages ?> + <div class="landing-banner"> + <?cs if:page.landing.image ?><?cs # use two-column layout only if there is an image ?> + <div class="cols"> + <div class="col-6"> + <img src="<?cs var:toroot ?><?cs var:page.landing.image ?>" alt="" /> + </div> + <div class="col-6"> + <?cs /if ?> + <h1 itemprop="name" style="margin-bottom:0;"><?cs var:page.title ?></h1> + <p itemprop="description"><?cs var:page.landing.intro ?></p> + + <p><a class="next-page-link topic-start-link"></a></p><?cs + if:page.landing.image ?> + </div> + </div><?cs + /if ?> + </div><?cs + /if ?><?cs + /if ?> +<?cs call:tag_list(root.descr) ?><?cs - <div class="jd-descr" itemprop="articleBody"> - <?cs call:tag_list(root.descr) ?> - </div> +if:!devsite ?> + </div><!-- end jd-descr --><?cs +/if ?><?cs - <?cs if:!fullscreen && (design||training||walkthru) && !page.landing && !page.trainingcourse && !footer.hide ?> +if:!fullscreen && (design||training||walkthru) && !page.landing && !page.trainingcourse + && !footer.hide && !devsite?> <div class="content-footer <?cs if:fullpage ?>wrap<?cs /if ?>" itemscope itemtype="http://schema.org/SiteNavigationElement"> <div class="paging-links"> + <a href="#" class="prev-page-link hide" + zh-tw-lang="上一堂課" + zh-cn-lang="上一课" + ru-lang="Предыдущий" + ko-lang="이전" + ja-lang="前へ" + es-lang="Anterior" + ><span class="page-link-caption">Previous</span> + </a> <a href="#" class="next-page-link hide" zh-tw-lang="下一堂課" zh-cn-lang="下一课" @@ -173,7 +232,8 @@ include:"header.cs" ?> ko-lang="다음" ja-lang="次へ" es-lang="Siguiente" - >Next</a> + ><span class="page-link-caption">Next</span> + </a> <a href="#" class="start-class-link hide" zh-tw-lang="開始上課" zh-cn-lang="开始" @@ -182,22 +242,20 @@ include:"header.cs" ?> ja-lang="開始する" es-lang="Empezar" >Get started</a> - <a href="#" class="next-class-link hide">Next class</a> + <a href="#" class="next-class-link hide"> + <span class="page-link-caption">Next class</span> + </a> </div> - </div> - <?cs /if ?> - - </div> <!-- end jd-content --> + </div><?cs + /if ?><?cs +if:!devsite ?> + </div> <!-- end jd-content --><?cs +/if ?><?cs +if:!devsite ?> <?cs include:"footer.cs" ?> -</div><!-- end doc-content --> - <?cs include:"trailer.cs" ?> - <script src="https://developer.android.com/ytblogger_lists_unified.js?v=19" type="text/javascript"></script> - <script src="<?cs var:toroot ?>jd_lists_unified.js?v=19" type="text/javascript"></script> - <script src="<?cs var:toroot ?>jd_extras.js?v=19" type="text/javascript"></script> - <script src="<?cs var:toroot ?>jd_collections.js?v=19" type="text/javascript"></script> - <script src="<?cs var:toroot ?>jd_tag_helpers.js?v=19" type="text/javascript"></script> +<?cs /if ?> </body> </html> diff --git a/tools/droiddoc/templates-sdk/footer.cs b/tools/droiddoc/templates-sdk/footer.cs index 095c7fd64e..af34a1add9 100644 --- a/tools/droiddoc/templates-sdk/footer.cs +++ b/tools/droiddoc/templates-sdk/footer.cs @@ -1,19 +1,20 @@ +<?cs # page footer content ?> <div class="wrap"> <div class="dac-footer<?cs if:fullpage ?> dac-landing<?cs /if ?>"> <div class="cols dac-footer-main"> <div class="col-1of2"> - <a class="dac-footer-getnews" data-modal-toggle="newsletter" href="javascript:;">Get news & tips <span + <a class="dac-footer-getnews" id="newsletter" data-modal-toggle="newsletter" href="javascript:;">Get news & tips <span class="dac-fab dac-primary"><i class="dac-sprite dac-mail"></i></span></a> </div> <div class="col-1of2 dac-footer-reachout"> <div class="dac-footer-contact"> - <a class="dac-footer-contact-link" href="//android-developers.blogspot.com/">Blog</a> + <a class="dac-footer-contact-link" href="http://android-developers.blogspot.com/">Blog</a> <a class="dac-footer-contact-link" href="/support.html">Support</a> </div> <div class="dac-footer-social"> - <a class="dac-fab dac-footer-social-link" href="https://www.youtube.com/user/androiddevelopers"><i class="dac-sprite dac-youtube"></i></a> - <a class="dac-fab dac-footer-social-link" href="https://plus.google.com/+AndroidDevelopers"><i class="dac-sprite dac-gplus"></i></a> - <a class="dac-fab dac-footer-social-link" href="https://twitter.com/AndroidDev"><i class="dac-sprite dac-twitter"></i></a> + <a class="dac-button-social dac-youtube dac-footer-social-link" href="https://www.youtube.com/user/androiddevelopers"><i class="dac-sprite dac-youtube"></i></a> + <a class="dac-button-social dac-gplus dac-footer-social-link" href="https://plus.google.com/+AndroidDevelopers"><i class="dac-sprite dac-gplus"></i></a> + <a class="dac-button-social dac-twitter dac-footer-social-link" href="https://twitter.com/AndroidDev"><i class="dac-sprite dac-twitter"></i></a> </div> </div> </div> @@ -34,7 +35,7 @@ <?cs /if ?> <p class="dac-footer-links"> - <a href="/about/index.html">About Android</a> + <a href="/about/android.html">About Android</a> <a href="/auto/index.html">Auto</a> <a href="/tv/index.html">TV</a> <a href="/wear/index.html">Wear</a> @@ -56,48 +57,54 @@ </span> </p> </div> -</div> <!-- end footer --> +</div> +<!-- end footer --> + +<?cs call:toast() ?> <div data-modal="newsletter" data-newsletter data-swap class="dac-modal newsletter"> <div class="dac-modal-container"> <div class="dac-modal-window"> <header class="dac-modal-header"> - <button class="dac-modal-header-close" data-modal-toggle><i class="dac-sprite dac-close"></i></button> + <div class="dac-modal-header-actions"> + <button class="dac-modal-header-close" data-modal-toggle></button> + </div> <div class="dac-swap" data-swap-container> <section class="dac-swap-section dac-active dac-down"> - <h2 class="norule dac-modal-header-title">Get the latest Android developer news and tips that will help you find success on Google Play.</h2> - <p class="dac-modal-header-subtitle">* Required Fields</p> + <h2 class="norule dac-modal-header-title" data-t="newsletter.title"></h2> + <p class="dac-modal-header-subtitle" data-t="newsletter.requiredHint"></p> </section> <section class="dac-swap-section dac-up"> - <h2 class="norule dac-modal-header-title">Hooray!</h2> + <h2 class="norule dac-modal-header-title" data-t="newsletter.successTitle">Hooray!</h2> </section> </div> </header> <div class="dac-swap" data-swap-container> <section class="dac-swap-section dac-active dac-left"> <form action="https://docs.google.com/forms/d/1QgnkzbEJIDu9lMEea0mxqWrXUJu0oBCLD7ar23V0Yys/formResponse" class="dac-form" method="post" target="dac-newsletter-iframe"> + <input type="hidden" name="entry.935454734" data-newsletter-language> <section class="dac-modal-content"> <fieldset class="dac-form-fieldset"> <div class="cols"> <div class="col-1of2 newsletter-leftCol"> <div class="dac-form-input-group"> - <label for="newsletter-full-name" class="dac-form-floatlabel">Full name</label> + <label for="newsletter-full-name" class="dac-form-floatlabel" data-t="newsletter.name">Full name</label> <input type="text" class="dac-form-input" name="entry.1357890476" id="newsletter-full-name" required> <span class="dac-form-required">*</span> </div> <div class="dac-form-input-group"> - <label for="newsletter-email" class="dac-form-floatlabel">Email address</label> + <label for="newsletter-email" class="dac-form-floatlabel" data-t="newsletter.email">Email address</label> <input type="email" class="dac-form-input" name="entry.472100832" id="newsletter-email" required> <span class="dac-form-required">*</span> </div> </div> <div class="col-1of2 newsletter-rightCol"> <div class="dac-form-input-group"> - <label for="newsletter-company" class="dac-form-floatlabel">Company / developer name</label> + <label for="newsletter-company" class="dac-form-floatlabel" data-t="newsletter.company">Company / developer name</label> <input type="text" class="dac-form-input" name="entry.1664780309" id="newsletter-company"> </div> <div class="dac-form-input-group"> - <label for="newsletter-play-store" class="dac-form-floatlabel">One of your Play Store app URLs</label> + <label for="newsletter-play-store" class="dac-form-floatlabel" data-t="newsletter.appUrl">One of your Play Store app URLs</label> <input type="url" class="dac-form-input" name="entry.47013838" id="newsletter-play-store" required> <span class="dac-form-required">*</span> </div> @@ -107,22 +114,22 @@ <fieldset class="dac-form-fieldset"> <div class="cols"> <div class="col-1of2 newsletter-leftCol"> - <legend class="dac-form-legend">Which best describes your business:<span class="dac-form-required">*</span> + <legend class="dac-form-legend"><span data-t="newsletter.business.label">Which best describes your business:</span><span class="dac-form-required">*</span> </legend> <div class="dac-form-radio-group"> <input type="radio" value="Apps" class="dac-form-radio" name="entry.1796324055" id="newsletter-business-type-app" required> <label for="newsletter-business-type-app" class="dac-form-radio-button"></label> - <label for="newsletter-business-type-app" class="dac-form-label">Apps</label> + <label for="newsletter-business-type-app" class="dac-form-label" data-t="newsletter.business.apps">Apps</label> </div> <div class="dac-form-radio-group"> <input type="radio" value="Games" class="dac-form-radio" name="entry.1796324055" id="newsletter-business-type-games" required> <label for="newsletter-business-type-games" class="dac-form-radio-button"></label> - <label for="newsletter-business-type-games" class="dac-form-label">Games</label> + <label for="newsletter-business-type-games" class="dac-form-label" data-t="newsletter.business.games">Games</label> </div> <div class="dac-form-radio-group"> <input type="radio" value="Apps and Games" class="dac-form-radio" name="entry.1796324055" id="newsletter-business-type-appsgames" required> <label for="newsletter-business-type-appsgames" class="dac-form-radio-button"></label> - <label for="newsletter-business-type-appsgames" class="dac-form-label">Apps & Games</label> + <label for="newsletter-business-type-appsgames" class="dac-form-label" data-t="newsletter.business.both">Apps & Games</label> </div> </div> <div class="col-1of2 newsletter-rightCol newsletter-checkboxes"> @@ -133,7 +140,7 @@ <label for="newsletter-add" class="dac-form-checkbox-button"></label> </div> <div class="dac-media-body"> - <label for="newsletter-add" class="dac-form-label dac-form-aside">Add me to the mailing list for the monthly newsletter and occasional emails about development and Google Play opportunities.<span class="dac-form-required">*</span></label> + <label for="newsletter-add" class="dac-form-label dac-form-aside"><span data-t="newsletter.confirmMailingList"></span><span class="dac-form-required">*</span></label> </div> </div> </div> @@ -144,7 +151,7 @@ <label for="newsletter-terms" class="dac-form-checkbox-button"></label> </div> <div class="dac-media-body"> - <label for="newsletter-terms" class="dac-form-label dac-form-aside">I acknowledge that the information provided in this form will be subject to <a href="https://www.google.com/policies/privacy/">Google's privacy policy</a>.<span class="dac-form-required">*</span></label> + <label for="newsletter-terms" class="dac-form-label dac-form-aside"><span data-t="newsletter.privacyPolicy" data-t-html></span><span class="dac-form-required">*</span></label> </div> </div> </div> @@ -163,12 +170,50 @@ </section> <section class="dac-swap-section dac-right"> <div class="dac-modal-content"> - <p class="newsletter-success-message"> - You have successfully signed up for the latest Android developer news and tips. - </p> + <p class="newsletter-success-message" data-t="newsletter.successDetails"></p> </div> </section> </div> </div> </div> -</div> <!-- end footer --> +</div> +<!-- end newsletter modal --> + +<!-- start reset language header modal --> +<div data-modal="langform" class="dac-modal" id="langform"> + <div class="dac-modal-container"> + <div class="dac-modal-window"> + <header class="dac-modal-header"> + <div class="dac-modal-header-actions"> + <button class="dac-modal-header-close" data-modal-toggle></button> + </div> + <section class="dac-swap-section dac-active dac-down"> + <h2 class="norule dac-modal-header-title"></h2> + </section> + </header> + <section class="dac-swap-section dac-active dac-left"> + <section class="dac-modal-content"> + <fieldset class="dac-form-fieldset"> + <div class="cols"> + <div class="col-2of2 langform-leftCol"> + <p id="resetLangText"></p> + <p id="resetLangCta"></p> + </div> + </div> + </fieldset> + </section> + <footer class="dac-modal-footer" id="langfooter"> + <div class="cols"> + <div class="col-2of5"> + </div> + </div> + <button class="button dac-primary dac-modal-action lang yes" data-t="newsletter.resetLangButtonYes" data-modal-toggle></button> + <button class="button dac-primary dac-modal-action lang no" data-t="newsletter.resetLangButtonNo" data-modal-toggle></button> + </a> + </footer> + </form> + </section> + </div> + </div> +</div> +<!-- end langreset modal --> diff --git a/tools/droiddoc/templates-sdk/head_tag.cs b/tools/droiddoc/templates-sdk/head_tag.cs index 1dbb3c3062..0c5bb78213 100644 --- a/tools/droiddoc/templates-sdk/head_tag.cs +++ b/tools/droiddoc/templates-sdk/head_tag.cs @@ -1,26 +1,161 @@ <head> -<?cs - ####### If building devsite, add some meta data needed for when generating the top nav ######### ?> -<?cs - if:devsite ?><?cs - if:guide||develop||training||reference||tools||sdk||google||samples - ?><meta name="top_category" value="develop" /><?cs - elif:google - ?><meta name="top_category" value="google" /><?cs - elif:reference && !(reference.gms || reference.gcm) - ?><meta name="top_category" value="css-fullscreen" /><?cs - /if ?> - <?cs - /if -?><?cs - # END if/else devsite ?> + <title><?cs +if:devsite ?><?cs + if:page.title ?><?cs + var:html_strip(page.title) ?><?cs + else ?>Android Developers<?cs + /if ?><?cs +else ?><?cs + if:page.title ?><?cs + var:page.title ?> | <?cs + /if ?>Android Developers +<?cs /if ?><?cs +# END if/else devsite ?></title><?cs + ####### If building devsite, add some meta data needed for when generating the top nav ######### ?><?cs +if:devsite ?> + <meta name="top_category" value="<?cs + if:ndk ?>ndk<?cs + elif:(guide||develop||training||reference||tools||sdk||google||reference.gms||reference.gcm||samples) ?>develop<?cs + elif:(topic||libraries||instantapps||perf||arc) ?>develop<?cs + elif:(distribute||googleplay||essentials||users||engage||monetize||disttools||stories||analyze) ?>distribute<?cs + elif:(design||vision||material||patterns||devices||designdownloads) ?>design<?cs + elif:(about||versions||wear||tv||auto) ?>about<?cs + elif:wearpreview ?>about<?cs + elif:work ?>about<?cs + elif:preview ?>preview<?cs + else ?>none<?cs + /if ?>" /><?cs set:dac_subcategory_set = #1 ?> + <meta name="subcategory" value="<?cs + if:ndk ?><?cs + if:guide ?>guide<?cs + elif:samples ?>samples<?cs + if:(samplesDocPage&&!samplesProjectIndex) ?> samples-docpage<?cs /if ?><?cs + elif:reference ?>reference<?cs + elif:downloads ?>downloads<?cs + else ?>none<?cs set:dac_subcategory_set = #0 ?><?cs /if ?><?cs + else ?><?cs + if:(guide||develop||training||reference||tools||sdk||samples) ?><?cs + if:guide ?>guide<?cs + elif:training ?><?cs + if:page.trainingcourse ?>trainingcourse<?cs + else ?>training<?cs /if ?><?cs + elif:reference ?>reference<?cs + elif:samples ?>samples<?cs + if:(samplesDocPage&&!samplesProjectIndex) ?> samples-docpage<?cs /if ?><?cs + else ?>none<?cs set:dac_subcategory_set = #0 ?><?cs /if ?><?cs + elif:(google||reference.gms||reference.gcm) ?>google<?cs + elif:(topic||libraries||perf||arc) ?><?cs + if:libraries ?>libraries<?cs + elif:instantapps ?>instantapps<?cs + elif:perf ?>perf<?cs + elif:arc ?>arc<?cs + else ?>none<?cs set:dac_subcategory_set = #0 ?><?cs /if ?><?cs + elif:(distribute||googleplay||essentials||users||engage||monetize||disttools||stories||analyze) ?><?cs + if:googleplay ?>googleplay<?cs + elif:essentials ?>essentials<?cs + elif:users ?>users<?cs + elif:engage ?>engage<?cs + elif:monetize ?>monetize<?cs + elif:disttools ?>disttools<?cs + elif:stories ?>stories<?cs + elif:analyze ?>analyze<?cs + else ?>none<?cs set:dac_subcategory_set = #0 ?><?cs /if ?><?cs + elif:(about||versions||wear||tv||auto) ?>about<?cs + elif:preview ?>preview<?cs + elif:wearpreview ?>wear<?cs + elif:work ?>work<?cs + elif:design ?>design<?cs + elif:walkthru ?>walkthru<?cs + else ?>none<?cs set:dac_subcategory_set = #0 ?><?cs /if ?><?cs + /if ?>" /><?cs + if:nonavpage ?> + <meta name="hide_toc" value='True' /><?cs + elif: !nonavpage && dac_subcategory_set && !tools && !sdk ?> + <meta name="book_path" value="<?cs + if:ndk ?>/ndk<?cs + if:guide ?>/guides<?cs + elif:samples ?>/samples<?cs + elif:reference ?>/reference<?cs + elif:downloads ?>/downloads<?cs /if ?><?cs + else ?><?cs + if:(guide||develop||training||reference||tools||sdk||samples) ?><?cs + if:guide ?>/guide<?cs + elif:training ?>/training<?cs + elif:reference ?>/reference<?cs + elif:samples ?>/samples<?cs /if ?><?cs + elif:(google||reference.gms||reference.gcm) ?>/google<?cs + elif:(topic||libraries||perf) ?>/topic<?cs + if:libraries ?>/libraries<?cs + elif:instantapps ?>/instant-apps<?cs + elif:perf ?>/performance<?cs + elif:arc ?>/arc<?cs /if ?><?cs + elif:(distribute||googleplay||essentials||users||engage||monetize||disttools||stories||analyze) ?>/distribute<?cs + if:googleplay ?>/googleplay<?cs + elif:essentials ?>/essentials<?cs + elif:users ?>/users<?cs + elif:engage ?>/engage<?cs + elif:monetize ?>/monetize<?cs + elif:disttools ?>/tools<?cs + elif:stories ?>/stories<?cs + elif:analyze ?>/analyze<?cs /if ?><?cs + elif:(about||versions||wear||tv||auto) ?>/about<?cs + elif:preview ?>/preview<?cs + elif:wearpreview ?>/wear/preview<?cs + elif:work ?>/work<?cs + elif:design ?>/design<?cs + elif:reference.testSupport ?>/reference/android/support/test<?cs + elif:reference.wearableSupport ?>/reference/android/support/wearable<?cs + elif:walkthru ?>/walkthru<?cs /if ?><?cs + /if ?>/_book.yaml" /><?cs + /if ?> + <meta name="project_path" value="<?cs + if:(guide||develop||training||reference||tools||sdk||samples) ?><?cs + if:guide ?>/guide<?cs + elif:training ?>/training<?cs + elif:reference ?>/reference<?cs + elif:samples ?>/samples<?cs /if ?><?cs + elif:(google||reference.gms||reference.gcm) ?>/google<?cs + elif:(topic||libraries) ?>/develop<?cs + elif:(distribute||googleplay||essentials||users||engage||monetize||disttools||stories||analyze) ?>/distribute<?cs + if:googleplay ?>/googleplay<?cs + elif:essentials ?>/essentials<?cs + elif:users ?>/users<?cs + elif:engage ?>/engage<?cs + elif:monetize ?>/monetize<?cs + elif:disttools ?>/tools<?cs + elif:stories ?>/stories<?cs + elif:analyze ?>/analyze<?cs + else ?><?cs /if ?><?cs + elif:(about||versions||wear||tv||auto) ?>/about<?cs + elif:wearpreview ?>/wear<?cs + elif:work ?>/work<?cs + elif:preview ?>/preview<?cs + elif:design ?>/design<?cs /if ?>/_project.yaml" /><?cs + + if:page.tags && page.tags != "" ?> + <meta name="keywords" value='<?cs var:page.tags ?>' /><?cs + /if ?><?cs + if:meta.tags && meta.tags != "" ?> + <meta name="meta_tags" value='<?cs var:meta.tags ?>' /><?cs + /if ?><?cs + if:fullpage ?> + <meta name="full_width" value="True" /><?cs + /if ?><?cs + if:page.landing ?> + <meta name="page_type" value="landing" /><?cs + /if ?><?cs + if:page.article ?> + <meta name="page_type" value="article" /><?cs + /if ?><?cs + if:page.image ?> + <meta name="image_path" value='<?cs var:page.image ?>' /><?cs + /if ?><?cs +/if ?><?cs # END if/else devsite ?><?cs + + if:!devsite ?> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <meta content="IE=edge" http-equiv="X-UA-Compatible"> -<?cs - if:page.metaDescription ?> -<meta name="Description" content="<?cs var:page.metaDescription ?>"><?cs - /if ?> <link rel="shortcut icon" type="image/x-icon" href="<?cs var:toroot ?>favicon.ico" /> <link rel="alternate" href="http://developer.android.com/<?cs var:path.canonical ?>" hreflang="en" /> <link rel="alternate" href="http://developer.android.com/intl/es/<?cs var:path.canonical ?>" hreflang="es" /> @@ -32,42 +167,32 @@ <link rel="alternate" href="http://developer.android.com/intl/vi/<?cs var:path.canonical ?>" hreflang="vi" /> <link rel="alternate" href="http://developer.android.com/intl/zh-cn/<?cs var:path.canonical ?>" hreflang="zh-cn" /> <link rel="alternate" href="http://developer.android.com/intl/zh-tw/<?cs var:path.canonical ?>" hreflang="zh-tw" /> +<?cs /if ?><?cs +# END if/else !devsite ?><?cs -<title><?cs - if:page.title ?><?cs - var:page.title ?> | <?cs - /if ?>Android Developers</title> - + if:page.metaDescription ?> + <meta name="description" content="<?cs var:page.metaDescription ?>"><?cs + /if ?><?cs + if:!devsite ?> <!-- STYLESHEETS --> <link rel="stylesheet" href="<?cs -if:android.whichdoc != 'online' ?>https:<?cs +if:android.whichdoc != 'online' ?>http:<?cs /if ?>//fonts.googleapis.com/css?family=Roboto+Condensed"> <link rel="stylesheet" href="<?cs -if:android.whichdoc != 'online' ?>https:<?cs +if:android.whichdoc != 'online' ?>http:<?cs /if ?>//fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold" title="roboto"> <?cs if:ndk ?><link rel="stylesheet" href="<?cs - if:android.whichdoc != 'online' ?>https:<?cs + if:android.whichdoc != 'online' ?>http:<?cs /if ?>//fonts.googleapis.com/css?family=Roboto+Mono:400,500,700" title="roboto-mono" type="text/css"><?cs /if ?> -<link href="<?cs var:toroot ?>assets/css/default.css?v=19" rel="stylesheet" type="text/css"> - -<?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"> -<?cs /if ?> +<link href="<?cs var:toroot ?>assets/css/default.css?v=16" rel="stylesheet" type="text/css"> <!-- JAVASCRIPT --> -<script src="<?cs if:android.whichdoc != 'online' ?>https:<?cs /if ?>//www.google.com/jsapi" type="text/javascript"></script> -<?cs -if:devsite - ?><script src="<?cs var:toroot ?>_static/js/android_3p-bundle.js" type="text/javascript"></script><?cs -else - ?><script src="<?cs var:toroot ?>assets/js/android_3p-bundle.js" type="text/javascript"></script><?cs -/if ?><?cs +<script src="<?cs if:android.whichdoc != 'online' ?>http:<?cs /if ?>//www.google.com/jsapi" type="text/javascript"></script> +<script src="<?cs var:toroot ?>assets/js/android_3p-bundle.js" type="text/javascript"></script><?cs if:page.customHeadTag ?> <?cs var:page.customHeadTag ?><?cs /if ?> @@ -77,14 +202,7 @@ else var devsite = <?cs if:devsite ?>true<?cs else ?>false<?cs /if ?>; var useUpdatedTemplates = <?cs if:useUpdatedTemplates ?>true<?cs else ?>false<?cs /if ?>; </script> -<script src="<?cs var:toroot ?>assets/js/docs.js?v=19" type="text/javascript"></script> - -<?cs if:helpoutsWidget ?> -<script type="text/javascript" src="https://helpouts.google.com/ps/res/embed.js" defer async - data-helpouts-embed data-helpouts-vertical="programming" - data-helpouts-tags="<?cs var:page.tags ?>" data-helpouts-prefix="android" - data-helpouts-standalone="true"></script> -<?cs /if ?> +<script src="<?cs var:toroot ?>assets/js/docs.js?v=17" type="text/javascript"></script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ @@ -96,6 +214,6 @@ else ga('create', 'UA-49880327-2', 'android.com', {'name': 'universal'}); // New tracker); ga('send', 'pageview'); ga('universal.send', 'pageview'); // Send page view for new tracker. -</script> - +</script><?cs /if ?><?cs +# END if/else !devsite ?> </head> diff --git a/tools/droiddoc/templates-sdk/header.cs b/tools/droiddoc/templates-sdk/header.cs index e8301bed93..a9273937f3 100644 --- a/tools/droiddoc/templates-sdk/header.cs +++ b/tools/droiddoc/templates-sdk/header.cs @@ -1,3 +1,11 @@ -<?cs call:custom_masthead() ?> -<?cs call:custom_left_nav() ?> +<?cs if:!devsite ?><?cs # leave out the global header for devsite; it is in devsite template ?> + <?cs call:custom_masthead() ?> + <?cs if:(fullpage) ?> + <?cs call:fullpage() ?> + <?cs else ?> + <?cs call:body_content_wrap_start() ?> + <?cs /if ?> + + <?cs call:search_results() ?> +<?cs /if ?><?cs # end if/else !devsite ?>
\ No newline at end of file diff --git a/tools/droiddoc/templates-sdk/jd_lists_unified.cs b/tools/droiddoc/templates-sdk/jd_lists_unified.cs index 417a5c1b2e..4a6f4f7571 100644 --- a/tools/droiddoc/templates-sdk/jd_lists_unified.cs +++ b/tools/droiddoc/templates-sdk/jd_lists_unified.cs @@ -1 +1,10 @@ +window.METADATA = window.METADATA || {}; +METADATA['<?cs var:metadata.lang ?>'] = {}; + +METADATA['<?cs var:metadata.lang ?>'].about = []; +METADATA['<?cs var:metadata.lang ?>'].design = []; +METADATA['<?cs var:metadata.lang ?>'].develop = []; +METADATA['<?cs var:metadata.lang ?>'].distribute = []; +METADATA['<?cs var:metadata.lang ?>'].extras = []; + <?cs var:reference_tree ?> diff --git a/tools/droiddoc/templates-sdk/lists.cs b/tools/droiddoc/templates-sdk/lists.cs new file mode 100644 index 0000000000..ede8c4351d --- /dev/null +++ b/tools/droiddoc/templates-sdk/lists.cs @@ -0,0 +1,8 @@ +var <?cs + if:reference.testSupport ?>SUPPORT_TEST_<?cs + elif: reference.wearableSupport ?>SUPPORT_WEARABLE_<?cs + /if ?>DATA = [ +<?cs each:page = docs.pages +?> { id:<?cs var: page.id ?>, label:"<?cs var:page.label ?>", link:"<?cs var:page.link ?>", type:"<?cs var:page.type ?>", deprecated:"<?cs var:page.deprecated ?>" }<?cs if:!last(page) ?>,<?cs /if ?> +<?cs /each ?> + ]; diff --git a/tools/droiddoc/templates-sdk/macros_override.cs b/tools/droiddoc/templates-sdk/macros_override.cs index 9d146b1b50..5b92fe3d10 100644 --- a/tools/droiddoc/templates-sdk/macros_override.cs +++ b/tools/droiddoc/templates-sdk/macros_override.cs @@ -35,10 +35,17 @@ </table> <?cs /def ?> -<?cs def:doc_root_override() ?><?cs - if:referenceonly - ?>https://developer.android.com/<?cs - else ?><?cs - var:toroot ?><?cs - /if ?><?cs +<?cs +# Prints a comma separated list of parameters with optional line breaks +?><?cs +def:parameter_list(params, linebreaks) ?><?cs + each:param = params ?><?cs + call:simple_type_link(param.type)?> <?cs + var:param.name ?><?cs + if: name(param)!=subcount(params)-1 + ?>, <?cs if:linebreaks +?> + <?cs /if ?><?cs + /if ?><?cs + /each ?><?cs /def ?>
\ No newline at end of file diff --git a/tools/droiddoc/templates-sdk/package.cs b/tools/droiddoc/templates-sdk/package.cs index 72d5538ad5..d3efdda554 100644 --- a/tools/droiddoc/templates-sdk/package.cs +++ b/tools/droiddoc/templates-sdk/package.cs @@ -1,50 +1,25 @@ -<?cs include:"doctype.cs" ?> +<?cs # THIS CREATES A PACKAGE SUMMARY PAGE FROM EACH package.html FILES + # AND NAMES IT package-summary.html ?> <?cs include:"macros.cs" ?> <?cs include:"macros_override.cs" ?> +<?cs include:"doctype.cs" ?> <html<?cs if:devsite ?> devsite<?cs /if ?>> <?cs include:"head_tag.cs" ?> - -<body class="gc-documentation <?cs if:(reference.gms || reference.gcm) ?>google<?cs /if ?> - <?cs if:(guide||develop||training||reference||tools||sdk) ?>develop<?cs - if:reference ?> reference<?cs - /if ?><?cs - elif:design ?>design<?cs - elif:distribute ?>distribute<?cs - /if ?>"> - <div id="doc-api-level" class="<?cs var:package.since ?>" style="display:none"></div> - <a name="top"></a> +<?cs include:"body_tag.cs" ?> <?cs include:"header.cs" ?> +<?cs include:"page_info.cs" ?> +<div class="api apilevel-<?cs var:package.since ?>" id="jd-content"> -<div class="col-12" id="doc-col"> - -<div id="api-info-block"> -<div class="api-level"> - <?cs call:since_tags(package) ?> - <?cs call:federated_refs(package) ?> -</div> -</div> - -<div id="jd-header"> - package - <h1><?cs var:package.name ?></h1> -</div><!-- end header --> - -<div id="naMessage"></div> - -<div id="jd-content" class="api apilevel-<?cs var:package.since ?>"> +<h1><?cs var:package.name ?></h1> <?cs if:subcount(package.descr) ?> - <div class="jd-descr"> - <?cs call:tag_list(package.descr) ?> - </div> + <?cs call:tag_list(package.descr) ?> <?cs /if ?> <?cs def:class_table(label, classes) ?> <?cs if:subcount(classes) ?> <h2><?cs var:label ?></h2> - <div class="jd-sumtable"> <?cs call:class_link_table(classes) ?> - </div> <?cs /if ?> <?cs /def ?> @@ -55,12 +30,35 @@ <?cs call:class_table("Exceptions", package.exceptions) ?> <?cs call:class_table("Errors", package.errors) ?> -</div><!-- end jd-content --> +</div><!-- end apilevel --> -<?cs include:"footer.cs" ?> -</div><!-- doc-content --> +<?cs if:devsite ?> +<div class="data-reference-resources-wrapper"> + <?cs if:subcount(class.package) ?> + <ul data-reference-resources> + <?cs call:list("Annotations", class.package.annotations) ?> + <?cs call:list("Interfaces", class.package.interfaces) ?> + <?cs call:list("Classes", class.package.classes) ?> + <?cs call:list("Enums", class.package.enums) ?> + <?cs call:list("Exceptions", class.package.exceptions) ?> + <?cs call:list("Errors", class.package.errors) ?> + </ul> + <?cs elif:subcount(package) ?> + <ul data-reference-resources> + <?cs call:class_link_list("Annotations", package.annotations) ?> + <?cs call:class_link_list("Interfaces", package.interfaces) ?> + <?cs call:class_link_list("Classes", package.classes) ?> + <?cs call:class_link_list("Enums", package.enums) ?> + <?cs call:class_link_list("Exceptions", package.exceptions) ?> + <?cs call:class_link_list("Errors", package.errors) ?> + </ul> + <?cs /if ?> +</div> +<?cs /if ?> +<?cs if:!devsite ?> +<?cs include:"footer.cs" ?> <?cs include:"trailer.cs" ?> - +<?cs /if ?> </body> </html> diff --git a/tools/droiddoc/templates-sdk/packages.cs b/tools/droiddoc/templates-sdk/packages.cs index fe6a5aa64a..3fcfb8188d 100644 --- a/tools/droiddoc/templates-sdk/packages.cs +++ b/tools/droiddoc/templates-sdk/packages.cs @@ -1,33 +1,19 @@ -<?cs include:"doctype.cs" ?> +<?cs # THIS CREATES A LIST OF ALL PACKAGES AND NAMES IT packages.html ?> <?cs include:"macros.cs" ?> +<?cs include:"doctype.cs" ?> <html<?cs if:devsite ?> devsite<?cs /if ?>> <?cs include:"head_tag.cs" ?> -<body class="gc-documentation <?cs if:(reference.gms || reference.gcm) ?>google<?cs /if ?> - <?cs if:(guide||develop||training||reference||tools||sdk) ?>develop<?cs - if:reference ?> reference<?cs - /if ?><?cs - elif:design ?>design<?cs - elif:distribute ?>distribute<?cs - /if ?>"> - <a name="top"></a> +<?cs include:"body_tag.cs" ?> <?cs include:"header.cs" ?> -<div class="col-12" id="doc-col"> - -<div id="jd-header"> <h1><?cs var:page.title ?></h1> -</div> - -<div id="jd-content"> - -<div class="jd-descr"> -<p><?cs call:tag_list(root.descr) ?></p> -</div> +<p>These are the API packages. +See all <a href="classes.html">API classes</a>.</p> <?cs set:count = #1 ?> -<table class="jd-sumtable"> +<table> <?cs each:pkg = docs.packages ?> - <tr class="<?cs if:count % #2 ?>alt-color<?cs /if ?> api apilevel-<?cs var:pkg.since ?>" > + <tr class="api apilevel-<?cs var:pkg.since ?>" > <td class="jd-linkcol"><?cs call:package_link(pkg) ?></td> <td class="jd-descrcol" width="100%"><?cs call:tag_list(pkg.shortDescr) ?></td> </tr> @@ -35,12 +21,33 @@ <?cs /each ?> </table> -</div><!-- end jd-content --> +<?cs if:devsite ?> +<div class="data-reference-resources-wrapper"> + <?cs if:subcount(class.package) ?> + <ul data-reference-resources> + <?cs call:list("Annotations", class.package.annotations) ?> + <?cs call:list("Interfaces", class.package.interfaces) ?> + <?cs call:list("Classes", class.package.classes) ?> + <?cs call:list("Enums", class.package.enums) ?> + <?cs call:list("Exceptions", class.package.exceptions) ?> + <?cs call:list("Errors", class.package.errors) ?> + </ul> + <?cs elif:subcount(package) ?> + <ul data-reference-resources> + <?cs call:class_link_list("Annotations", package.annotations) ?> + <?cs call:class_link_list("Interfaces", package.interfaces) ?> + <?cs call:class_link_list("Classes", package.classes) ?> + <?cs call:class_link_list("Enums", package.enums) ?> + <?cs call:class_link_list("Exceptions", package.exceptions) ?> + <?cs call:class_link_list("Errors", package.errors) ?> + </ul> + <?cs /if ?> +</div> +<?cs /if ?> +<?cs if:!devsite ?> <?cs include:"footer.cs" ?> -</div> <!-- end doc-content --> - <?cs include:"trailer.cs" ?> - +<?cs /if ?> </body> </html> diff --git a/tools/droiddoc/templates-sdk/page_info.cs b/tools/droiddoc/templates-sdk/page_info.cs new file mode 100644 index 0000000000..fad1274194 --- /dev/null +++ b/tools/droiddoc/templates-sdk/page_info.cs @@ -0,0 +1,109 @@ +<?cs # optional, more info about the page, such as API level and links ?> +<?cs +# A modal dialog when API level is set too low for this page +?><div id="naMessage"></div> +<?cs +# +# If this is a package summary page... +# +?><?cs +if:subcount(package) +?> +<div id="api-info-block"> +<div class="api-level"> + <?cs call:since_tags(package) ?> + <?cs call:federated_refs(package) ?> +</div> +</div><?cs +# +# Or if this is a class page... +# +?><?cs +elif:subcount(class) +?> +<div id="api-info-block"> +<div class="api-level"> + <?cs call:since_tags(class) ?><?cs + if:class.deprecatedsince + ?><br>Deprecated since <a href="<?cs var:toroot ?>guide/topics/manifest/uses-sdk-element.html#ApiLevels" + >API level <?cs var:class.deprecatedsince ?></a><?cs + /if ?> + <?cs call:federated_refs(class) ?> +</div> + +<?cs # Set variables about whether there are inherited members; no output ?> +<?cs each:cl=class.inherited ?> + <?cs if:subcount(cl.methods) ?> + <?cs set:inhmethods = #1 ?> + <?cs /if ?> + <?cs if:subcount(cl.constants) ?> + <?cs set:inhconstants = #1 ?> + <?cs /if ?> + <?cs if:subcount(cl.fields) ?> + <?cs set:inhfields = #1 ?> + <?cs /if ?> + <?cs if:subcount(cl.attrs) ?> + <?cs set:inhattrs = #1 ?> + <?cs /if ?> +<?cs /each ?> + +<div class="sum-details-links"> +<?cs if:inhattrs || inhconstants || inhfields || inhmethods || (!class.subclasses.hidden && + (subcount(class.subclasses.direct) || subcount(class.subclasses.indirect))) ?> +Summary: +<?cs if:subcount(class.inners) ?> + <a href="#nestedclasses">Nested Classes</a> + <?cs set:linkcount = #1 ?> +<?cs /if ?> +<?cs if:subcount(class.attrs) ?> + <?cs if:linkcount ?>| <?cs /if ?><a href="#lattrs">XML Attrs</a> + <?cs set:linkcount = #1 ?> +<?cs /if ?> +<?cs if:inhattrs ?> + <?cs if:linkcount ?>| <?cs /if ?><a href="#inhattrs">Inherited XML Attrs</a> + <?cs set:linkcount = #1 ?> +<?cs /if ?> +<?cs if:subcount(class.enumConstants) ?> + <?cs if:linkcount ?>| <?cs /if ?><a href="#enumconstants">Enums</a> + <?cs set:linkcount = #1 ?> +<?cs /if ?> +<?cs if:subcount(class.constants) ?> + <?cs if:linkcount ?>| <?cs /if ?><a href="#constants">Constants</a> + <?cs set:linkcount = #1 ?> +<?cs /if ?> +<?cs if:inhconstants ?> + <?cs if:linkcount ?>| <?cs /if ?><a href="#inhconstants">Inherited Constants</a> + <?cs set:linkcount = #1 ?> +<?cs /if ?> +<?cs if:subcount(class.fields) ?> + <?cs if:linkcount ?>| <?cs /if ?><a href="#lfields">Fields</a> + <?cs set:linkcount = #1 ?> +<?cs /if ?> +<?cs if:inhfields ?> + <?cs if:linkcount ?>| <?cs /if ?><a href="#inhfields">Inherited Fields</a> + <?cs set:linkcount = #1 ?> +<?cs /if ?> +<?cs if:subcount(class.ctors.public) ?> + <?cs if:linkcount ?>| <?cs /if ?><a href="#pubctors">Ctors</a> + <?cs set:linkcount = #1 ?> +<?cs /if ?> +<?cs if:subcount(class.ctors.protected) ?> + <?cs if:linkcount ?>| <?cs /if ?><a href="#proctors">Protected Ctors</a> + <?cs set:linkcount = #1 ?> +<?cs /if ?> +<?cs if:subcount(class.methods.public) ?> + <?cs if:linkcount ?>| <?cs /if ?><a href="#pubmethods">Methods</a> + <?cs set:linkcount = #1 ?> +<?cs /if ?> +<?cs if:subcount(class.methods.protected) ?> + <?cs if:linkcount ?>| <?cs /if ?><a href="#promethods">Protected Methods</a> + <?cs set:linkcount = #1 ?> +<?cs /if ?> +<?cs if:inhmethods ?> + <?cs if:linkcount ?>| <?cs /if ?><a href="#inhmethods">Inherited Methods</a> +<?cs /if ?> +| <a href="#" onclick="return toggleAllClassInherited()" id="toggleAllClassInherited">[Expand All]</a> +<?cs /if ?> +</div><!-- end sum-details-links --> +</div><!-- end api-info-block --><?cs +/if ?><?cs # end of if package or class ?>
\ No newline at end of file diff --git a/tools/droiddoc/templates-sdk/sample.cs b/tools/droiddoc/templates-sdk/sample.cs index 7b4bf0f88e..2c5b9d2def 100644 --- a/tools/droiddoc/templates-sdk/sample.cs +++ b/tools/droiddoc/templates-sdk/sample.cs @@ -5,11 +5,6 @@ <body class="gc-documentation develop samples" itemscope itemtype="http://schema.org/Article"> <?cs include:"header.cs" ?> -<div <?cs if:fullpage -?>class="fullpage"<?cs elif:design||tools||about||sdk||distribute -?>class="col-13" id="doc-col"<?cs else -?>class="col-12" id="doc-col"<?cs /if ?> > - <!-- start breadcrumb block --> <div id="api-info-block"> <div class="sum-details-links"> @@ -30,7 +25,7 @@ <div id="pathCrumb"> <?cs each:item = parentdirs ?> <?cs if:LinkifyPathCrumb - ?><a href="<?cs var:toroot ?><?cs var:item.Link ?>"><?cs var:item.Name ?></a> / + ?><a href="<?cs var:toroot ?><?cs var:item.Link ?>"><?cs var:item.Name ?></a> / <?cs else ?><?cs var:item.Name ?> / <?cs /if ?> <?cs /each ?> @@ -135,17 +130,10 @@ </div> <!-- end jd-content --> -<?cs include:"footer.cs" ?> -</div><!-- end doc-content --> - -<?cs include:"trailer.cs" ?> + <?cs if:!devsite ?> + <?cs include:"footer.cs" ?> + <?cs include:"trailer.cs" ?> + <?cs /if ?> </body> </html> - - - - - - - diff --git a/tools/droiddoc/templates-sdk/sampleindex.cs b/tools/droiddoc/templates-sdk/sampleindex.cs index e62d3fe9de..db648ff2a7 100644 --- a/tools/droiddoc/templates-sdk/sampleindex.cs +++ b/tools/droiddoc/templates-sdk/sampleindex.cs @@ -5,11 +5,6 @@ <body class="gc-documentation develop samples" itemscope itemtype="http://schema.org/Article"> <?cs include:"header.cs" ?> -<div <?cs if:fullpage -?>class="fullpage"<?cs elif:design||tools||about||sdk||distribute -?>class="col-13" id="doc-col"<?cs else -?>class="col-12" id="doc-col"<?cs /if ?> > - <!-- start breadcrumb block --> <div id="api-info-block"> <div class="sum-details-links"> @@ -126,7 +121,6 @@ </div> <!-- end jd-content --> <?cs include:"footer.cs" ?> -</div><!-- end doc-content --> <?cs include:"trailer.cs" ?> diff --git a/tools/droiddoc/templates-sdk/samples_navtree_data.cs b/tools/droiddoc/templates-sdk/samples_navtree_data.cs index 24ac7b77cb..b9b42141c9 100644 --- a/tools/droiddoc/templates-sdk/samples_navtree_data.cs +++ b/tools/droiddoc/templates-sdk/samples_navtree_data.cs @@ -1,3 +1,8 @@ -var SAMPLES_NAVTREE_DATA = -<?cs var:reference_tree ?> -; +toc: +- title: About the Samples + path: /samples/index.html + +- title: What's New + path: /samples/new/index.html + +<?cs var:samples_toc_tree ?>
\ No newline at end of file diff --git a/tools/droiddoc/templates-sdk/sdkpage.cs b/tools/droiddoc/templates-sdk/sdkpage.cs deleted file mode 100644 index c6679a677d..0000000000 --- a/tools/droiddoc/templates-sdk/sdkpage.cs +++ /dev/null @@ -1,443 +0,0 @@ -<?cs include:"doctype.cs" ?> -<?cs include:"macros.cs" ?> -<?cs include:"../../../../frameworks/base/docs/html/sdk/sdk_vars.cs" ?> -<html<?cs if:devsite ?> devsite<?cs /if ?>> -<?cs if:sdk.redirect ?> - <head> - <title>Redirecting...</title> - <meta http-equiv="refresh" content="0;url=<?cs var:toroot ?>sdk/<?cs - if:sdk.redirect.path ?><?cs var:sdk.redirect.path ?><?cs - else ?>index.html<?cs /if ?>"> - </head> -<?cs else ?> - <?cs include:"head_tag.cs" ?> -<?cs /if ?> -<body class="gc-documentation - <?cs if:(guide||develop||training||reference||tools||sdk) ?>develop<?cs - elif:design ?>design<?cs - elif:distribute ?>distribute<?cs - /if ?>" itemscope itemtype="http://schema.org/CreativeWork"> - <a name="top"></a> -<?cs include:"header.cs" ?> - - -<div <?cs if:fullpage -?><?cs else -?>class="col-13" id="doc-col"<?cs /if ?> > - -<?cs if:sdk.redirect ?> - -<div class="g-unit"> - <div id="jd-content"> - <p>Redirecting to - <a href="<?cs var:toroot ?>sdk/<?cs - if:sdk.redirect.path ?><?cs var:sdk.redirect.path ?><?cs - else ?>index.html<?cs /if ?>"><?cs - if:sdk.redirect.path ?><?cs var:sdk.redirect.path ?><?cs - else ?>Download the SDK<?cs /if ?> - </a> ...</p> - -<?cs else ?> -<?cs # else, if NOT redirect ... -# -# -# The following is for SDK/NDK pages -# -# -?> - -<?cs if:header.hide ?><?cs else ?> -<h1 itemprop="name"><?cs var:page.title ?></h1> -<?cs /if ?> - <div id="jd-content" itemprop="description"> - -<?cs if:sdk.not_latest_version ?> - <div class="special"> - <p><strong>This is NOT the current Android SDK release.</strong></p> - <p><a href="/sdk/index.html">Download the current Android SDK</a></p> - </div> -<?cs /if ?> - - -<?cs if:ndk ?> -<?cs # -# -# -# -# -# -# -# the following is for the NDK -# -# (nested in if/else redirect) -# -# -# -# -?> - - <table class="download" id="download-table"> - <tr> - <th>Platform</th> - <th>Package</th> - <th style="white-space:nowrap">Size (Bytes)</th> - <th>SHA1 Checksum</th> - </tr> - <tr> - <td>Windows 32-bit</td> - <td> - <a onClick="return onDownload(this)" data-modal-toggle="ndk_tos" - href="//dl.google.com/android/repository/<?cs var:ndk.win32_download ?>"><?cs var:ndk.win32_download ?></a> - </td> - <td><?cs var:ndk.win32_bytes ?></td> - <td><?cs var:ndk.win32_checksum ?></td> - </tr> - <!-- <tr> - <td> - <a onClick="return onDownload(this)" data-modal-toggle="ndk_tos" - href="//dl.google.com/android/ndk/<?cs var:ndk.win32.legacy_download ?>"><?cs var:ndk.win32.legacy_download ?></a> - </td> - <td><?cs var:ndk.win32.legacy_bytes ?></td> - <td><?cs var:ndk.win32.legacy_checksum ?></td> - </tr> --> - <tr> - <td>Windows 64-bit</td> - <td> - <a onClick="return onDownload(this)" data-modal-toggle="ndk_tos" - href="//dl.google.com/android/repository/<?cs var:ndk.win64_download ?>"><?cs var:ndk.win64_download ?></a> - </td> - <td><?cs var:ndk.win64_bytes ?></td> - <td><?cs var:ndk.win64_checksum ?></td> - </tr> - <!-- <tr> - <td> - <a onClick="return onDownload(this)" data-modal-toggle="ndk_tos" - href="//dl.google.com/android/repository/<?cs var:ndk.win64.legacy_download ?>"><?cs var:ndk.win64.legacy_download ?></a> - </td> - <td><?cs var:ndk.win64.legacy_bytes ?></td> - <td><?cs var:ndk.win64.legacy_checksum ?></td> - </tr> --> -<!-- (this item is deprecated) - <tr> - <td>Mac OS X 32-bit</td> - <td> - <a onClick="return onDownload(this)" data-modal-toggle="ndk_tos" - href="//dl.google.com/android/repository/<?cs var:ndk.mac32_download ?>"><?cs var:ndk.mac32_download ?></a> - </td> - <td><?cs var:ndk.mac32_bytes ?></td> - <td><?cs var:ndk.mac32_checksum ?></td> - </tr> --> - <!-- (this item is deprecated) - <tr> - <td> - <a onClick="return onDownload(this)" data-modal-toggle="ndk_tos" - href="//dl.google.com/android/repository/<?cs var:ndk.mac32.legacy_download ?>"><?cs var:ndk.mac32.legacy_download ?></a> - </td> - <td><?cs var:ndk.mac32.legacy_bytes ?></td> - <td><?cs var:ndk.mac32.legacy_checksum ?></td> - </tr> --> - <td>Mac OS X 64-bit</td> - <td> - <a onClick="return onDownload(this)" data-modal-toggle="ndk_tos" - href="//dl.google.com/android/repository/<?cs var:ndk.mac64_download ?>"><?cs var:ndk.mac64_download ?></a> - </td> - <td><?cs var:ndk.mac64_bytes ?></td> - <td><?cs var:ndk.mac64_checksum ?></td> - </tr> - <!-- <tr> - <td> - <a onClick="return onDownload(this)" data-modal-toggle="ndk_tos" - href="//dl.google.com/android/repository/<?cs var:ndk.mac64.legacy_download ?>"><?cs var:ndk.mac64.legacy_download ?></a> - </td> - <td><?cs var:ndk.mac64.legacy_bytes ?></td> - <td><?cs var:ndk.mac64.legacy_checksum ?></td> - </tr> --> - <!-- <tr> - <td> - <a onClick="return onDownload(this)" data-modal-toggle="ndk_tos" - href="//dl.google.com/android/repository/<?cs var:ndk.linux32.legacy_download ?>"><?cs var:ndk.linux32.legacy_download ?></a> - </td> - <td><?cs var:ndk.linux32.legacy_bytes ?></td> - <td><?cs var:ndk.linux32.legacy_checksum ?></td> - </tr> --> - <tr> - <td>Linux 64-bit (x86)</td> - <td> - <a onClick="return onDownload(this)" data-modal-toggle="ndk_tos" - href="//dl.google.com/android/repository/<?cs var:ndk.linux64_download ?>"><?cs var:ndk.linux64_download ?></a> - </td> - <td><?cs var:ndk.linux64_bytes ?></td> - <td><?cs var:ndk.linux64_checksum ?></td> - </tr> - <!-- <tr> - <td> - <a onClick="return onDownload(this)" data-modal-toggle="ndk_tos" - href="//dl.google.com/android/repository/<?cs var:ndk.linux64.legacy_download ?>"><?cs var:ndk.linux64.legacy_download ?></a> - </td> - <td><?cs var:ndk.linux64.legacy_bytes ?></td> - <td><?cs var:ndk.linux64.legacy_checksum ?></td> - </tr> --> - - </table> - - <?cs ######## HERE IS THE JD DOC CONTENT ######### ?> - <?cs call:tag_list(root.descr) ?> - - -<?cs ######## The NDK version of the download script ######### ?> -<script> - function onDownload(link) { - - $("#downloadForRealz").html("Download " + $(link).text()); - $("#downloadForRealz").attr('href',$(link).attr('href')); - - return false; - } - - - function onAgreeChecked() { - if ($("input#agree").is(":checked")) { - $("a#downloadForRealz").removeClass('disabled'); - } else { - $("a#downloadForRealz").addClass('disabled'); - } - } - - - function onDownloadForRealz(link) { - if ($("input#agree").is(':checked')) { - $("div.sdk-terms").slideUp(); - $("h2#tos-header").text('Now downloading...'); - $(".sdk-terms-intro").text('Your download is in progress.'); - $("#sdk-terms-form").fadeOut('slow', function() { - setTimeout(function() { - // close the dialog - $('#ndk_tos').trigger('modal-close'); - // reload to refresh the tos or optionally forward the user - location.reload(); - }, 3000); - }); - ga('send', 'event', 'SDK', 'NDK tools', $("#downloadForRealz").html()); - return true; - } else { - return false; - } - } - - - $(window).hashchange( function(){ - if (location.hash == "") { - location.reload(); - } - }); - -</script> - - <?cs else ?> -<?cs # end if NDK ... -# -# -# -# -# -# -# the following is for the SDK -# -# (nested in if/else redirect and if/else NDK) -# -# -# -# -?> - <?cs if:android.whichdoc == "online" ?> - - -<?cs ######## HERE IS THE JD DOC CONTENT FOR ONLINE ######### ?> -<?cs call:tag_list(root.descr) ?> - - -<?cs ####### TODO: Remove this whole file from processing. ######## ?> - - -<?cs ######## The Android Studio version of the download script ######### ?> -<script> - var os; - var bundlename; - var $toolslink; - - if (navigator.appVersion.indexOf("Mobile")!=-1) { - // Do nothing for any "mobile" user agent - } else if (navigator.appVersion.indexOf("Win")!=-1) { - os = "Windows"; - bundlename = '#win-bundle'; - $toolslink = $('#win-tools'); - } else if (navigator.appVersion.indexOf("Mac")!=-1) { - os = "Mac"; - bundlename = '#mac-bundle'; - $toolslink = $('#mac-tools'); - } else if (navigator.appVersion.indexOf("Linux")!=-1 && navigator.appVersion.indexOf("Android")==-1) { - os = "Linux"; - bundlename = '#linux-bundle'; - $toolslink = $('#linux-tools'); - } - - if (os != undefined) { - $('#not-supported').hide(); - - /* set up primary Android Studio download button */ - idname = bundlename + "-size"; - sizeMB = $(idname).text().split(' MB')[0]; - $('.download-bundle-button > .small').html(" for " + os + " <em>(" + sizeMB + " MB)</em>"); - $('.download-bundle-button').click(function() {return onDownload(this,true,true);}).attr('href', bundlename); - } - - - function onDownload(link, button, bundle) { - - /* set text for download button */ - if (button) { - $("#downloadForRealz").html($(link).text()); - } else { - $("#downloadForRealz").html("Download " + $(link).text()); - } - - $("#downloadForRealz").attr('bundle', bundle); - if (bundle && !button) { - $("a#downloadForRealz").attr("name", "#" + $(link).attr('id')); - } else { - $("h2#tos-header").text('Download the Android SDK Tools'); - $("a#downloadForRealz").attr("name", $(link).attr('href')); - } - - return false; - } - - - function onAgreeChecked() { - /* verify that the TOS is agreed */ - if ($("input#agree").is(":checked")) { - - /* if downloading the bundle */ - if ($("#downloadForRealz").attr('bundle')) { - /* construct the name of the link we want */ - linkId = $("a#downloadForRealz").attr("name"); - /* set the real url for download */ - $("a#downloadForRealz").attr("href", $(linkId).attr("href")); - } else { - $("a#downloadForRealz").attr("href", $("a#downloadForRealz").attr("name")); - } - - /* reveal the download button */ - $("a#downloadForRealz").removeClass('disabled'); - } else { - $("a#downloadForRealz").addClass('disabled'); - } - } - - function onDownloadForRealz(link) { - if ($("input#agree").is(':checked')) { - $("div.sdk-terms").slideUp(); - if ($("#downloadForRealz").attr('bundle') == 'true') { - $("h2#tos-header").text('Now downloading Android Studio!'); - $(".sdk-terms-intro").text('Redirecting to the install instructions...'); - $("#sdk-terms-form").slideUp(function() { - setTimeout(function() { - window.location = "/sdk/installing/index.html"; - }, 2000); - }); - } else { - $("h2#tos-header").text('Now downloading the Android SDK Tools!'); - $(".sdk-terms-intro").html("<p>Because you've chosen to download " + - "only the Android SDK tools (and not Android Studio), there are no " + - "setup procedures to follow.</p><p>For information about how to " + - "keep your SDK tools up to date, refer to the " + - "<a href='/tools/help/sdk-manager.html'>SDK Manager</a> guide.</p>"); - $("#sdk-terms-form").slideUp(); - } - ga('send', 'event', 'SDK', 'IDE and Tools', $("#downloadForRealz").html()); - return true; - } else { - return false; - } - } - - $(window).hashchange( function(){ - if (location.hash == "") { - location.reload(); - } - }); - -</script> - - - - -<?cs # THIS DIV WAS OPENED IN INDEX.JD ?> - - - - - <?cs else ?> <?cs # end if online ?> - - <?cs if:sdk.preview ?><?cs # it's preview offline docs ?> - <p>Welcome developers! We are pleased to provide you with a preview SDK for the upcoming - Android 3.0 release, to give you a head-start on developing applications for it. - </p> - - <p>See the <a - href="<?cs var:toroot ?>sdk/preview/start.html">Getting Started</a> document for more information - about how to set up the preview SDK and get started.</p> - <style type="text/css"> - .non-preview { display:none; } - </style> - - <?cs else ?><?cs # it's normal offline docs ?> - - <?cs ######## HERE IS THE JD DOC CONTENT FOR OFFLINE ######### ?> - <?cs call:tag_list(root.descr) ?> - <style type="text/css"> - body .offline { display:block; } - body .online { display:none; } - </style> - <script> - $('.reqs').show(); - </script> - <?cs /if ?> - - <?cs /if ?> <?cs # end if/else online ?> - -<?cs /if ?> <?cs # end if/else NDK ?> - -<?cs /if ?> <?cs # end if/else redirect ?> - - -</div><!-- end jd-content --> - -<?cs if:!sdk.redirect ?> -<?cs include:"footer.cs" ?> -<?cs /if ?> - -</div><!-- end g-unit --> - -<?cs include:"trailer.cs" ?> -<script src="https://developer.android.com/ytblogger_lists_unified.js?v=17" type="text/javascript"></script> -<script src="/jd_lists_unified.js?v=17" type="text/javascript"></script> -<script src="/jd_extras.js?v=17" type="text/javascript"></script> -<script src="/jd_collections.js?v=17" type="text/javascript"></script> -<script src="/jd_tag_helpers.js?v=17" type="text/javascript"></script> - -<!-- Start of Tag --> -<script type="text/javascript"> -var axel = Math.random() + ""; -var a = axel * 10000000000000; -document.write('<iframe src="https://2507573.fls.doubleclick.net/activityi;src=2507573;type=other026;cat=googl348;ord=' + a + '?" width="1" height="1" frameborder="0" style="display:none"></iframe>'); -</script> -<noscript> -<iframe src="https://2507573.fls.doubleclick.net/activityi;src=2507573;type=other026;cat=googl348;ord=1?" width="1" height="1" frameborder="0" style="display:none"></iframe> -</noscript> -<!-- End of Tag --> -</body> -</html> - - - diff --git a/tools/droiddoc/templates-sdk/trailer.cs b/tools/droiddoc/templates-sdk/trailer.cs index 225b2c1694..2050475fd1 100644 --- a/tools/droiddoc/templates-sdk/trailer.cs +++ b/tools/droiddoc/templates-sdk/trailer.cs @@ -1,4 +1,7 @@ -</div> <!-- end .cols --> <?cs # normally opened by header.cs ?> +<?cs +# Other, non-visible things needed at the end of the page, +# because not every page needs footer content, but does need other stuff +?> </div> <!-- end body-content --> <?cs # normally opened by header.cs ?> <?cs if:carousel ?> @@ -19,3 +22,17 @@ $(".feed").dacTabbedList({ </script> <?cs /if ?> +<script src="https://developer.android.com/ytblogger_lists_unified.js" defer></script> +<script src="/jd_lists_unified_en.js?v=17" defer></script> +<script src="/reference/lists.js?v=17" defer></script> +<script src="/reference/gcm_lists.js?v=17" defer></script> +<script src="/reference/gms_lists.js?v=17" defer></script> +<script> + // Load localized metadata. + (function(lang) { + if (lang === 'en') { return; } + + // Write it to the document so it gets evaluated before DOMContentReady. + document.write('<script src="/jd_lists_unified_' + lang + '.js?v=14" defer></' + 'script>'); + })(getLangPref()) +</script> diff --git a/tools/droiddoc/templates-sdk/yaml_navtree.cs b/tools/droiddoc/templates-sdk/yaml_navtree.cs new file mode 100644 index 0000000000..e5a6404ecc --- /dev/null +++ b/tools/droiddoc/templates-sdk/yaml_navtree.cs @@ -0,0 +1,14 @@ +<?cs + +# print out the yaml nav for the reference docs, only printing the title, +path, and status_text (API level) for each package. + +?> +reference:<?cs +each:page = docs.pages?><?cs + if:page.type == "package"?> +- title: <?cs var:page.label ?> + path: /<?cs var:page.link ?> + status_text: apilevel-<?cs var:page.apilevel ?><?cs + /if?><?cs +/each ?> |
