docs.js revision 633f322b38c9a16aa0cac78a1f2a3fb6b1cacf86
1var classesNav; 2var devdocNav; 3var sidenav; 4var cookie_namespace = 'android_developer'; 5var NAV_PREF_TREE = "tree"; 6var NAV_PREF_PANELS = "panels"; 7var nav_pref; 8var isMobile = false; // true if mobile, so we can adjust some layout 9var mPagePath; // initialized in ready() function 10 11var basePath = getBaseUri(location.pathname); 12var SITE_ROOT = toRoot + basePath.substring(1,basePath.indexOf("/",1)); 13var GOOGLE_DATA; // combined data for google service apis, used for search suggest 14 15// Ensure that all ajax getScript() requests allow caching 16$.ajaxSetup({ 17 cache: true 18}); 19 20/****** ON LOAD SET UP STUFF *********/ 21 22$(document).ready(function() { 23 24 // load json file for JD doc search suggestions 25 $.getScript(toRoot + 'jd_lists_unified.js'); 26 // load json file for Android API search suggestions 27 $.getScript(toRoot + 'reference/lists.js'); 28 // load json files for Google services API suggestions 29 $.getScript(toRoot + 'reference/gcm_lists.js', function(data, textStatus, jqxhr) { 30 // once the GCM json (GCM_DATA) is loaded, load the GMS json (GMS_DATA) and merge the data 31 if(jqxhr.status === 200) { 32 $.getScript(toRoot + 'reference/gms_lists.js', function(data, textStatus, jqxhr) { 33 if(jqxhr.status === 200) { 34 // combine GCM and GMS data 35 GOOGLE_DATA = GMS_DATA; 36 var start = GOOGLE_DATA.length; 37 for (var i=0; i<GCM_DATA.length; i++) { 38 GOOGLE_DATA.push({id:start+i, label:GCM_DATA[i].label, 39 link:GCM_DATA[i].link, type:GCM_DATA[i].type}); 40 } 41 } 42 }); 43 } 44 }); 45 46 // setup keyboard listener for search shortcut 47 $('body').keyup(function(event) { 48 if (event.which == 191) { 49 $('#search_autocomplete').focus(); 50 } 51 }); 52 53 // init the fullscreen toggle click event 54 $('#nav-swap .fullscreen').click(function(){ 55 if ($(this).hasClass('disabled')) { 56 toggleFullscreen(true); 57 } else { 58 toggleFullscreen(false); 59 } 60 }); 61 62 // initialize the divs with custom scrollbars 63 $('.scroll-pane').jScrollPane( {verticalGutter:0} ); 64 65 // add HRs below all H2s (except for a few other h2 variants) 66 $('h2').not('#qv h2') 67 .not('#tb h2') 68 .not('.sidebox h2') 69 .not('#devdoc-nav h2') 70 .not('h2.norule').css({marginBottom:0}) 71 .after('<hr/>'); 72 73 // set up the search close button 74 $('.search .close').click(function() { 75 $searchInput = $('#search_autocomplete'); 76 $searchInput.attr('value', ''); 77 $(this).addClass("hide"); 78 $("#search-container").removeClass('active'); 79 $("#search_autocomplete").blur(); 80 search_focus_changed($searchInput.get(), false); 81 hideResults(); 82 }); 83 84 // Set up quicknav 85 var quicknav_open = false; 86 $("#btn-quicknav").click(function() { 87 if (quicknav_open) { 88 $(this).removeClass('active'); 89 quicknav_open = false; 90 collapse(); 91 } else { 92 $(this).addClass('active'); 93 quicknav_open = true; 94 expand(); 95 } 96 }) 97 98 var expand = function() { 99 $('#header-wrap').addClass('quicknav'); 100 $('#quicknav').stop().show().animate({opacity:'1'}); 101 } 102 103 var collapse = function() { 104 $('#quicknav').stop().animate({opacity:'0'}, 100, function() { 105 $(this).hide(); 106 $('#header-wrap').removeClass('quicknav'); 107 }); 108 } 109 110 111 //Set up search 112 $("#search_autocomplete").focus(function() { 113 $("#search-container").addClass('active'); 114 }) 115 $("#search-container").mouseover(function() { 116 $("#search-container").addClass('active'); 117 $("#search_autocomplete").focus(); 118 }) 119 $("#search-container").mouseout(function() { 120 if ($("#search_autocomplete").is(":focus")) return; 121 if ($("#search_autocomplete").val() == '') { 122 setTimeout(function(){ 123 $("#search-container").removeClass('active'); 124 $("#search_autocomplete").blur(); 125 },250); 126 } 127 }) 128 $("#search_autocomplete").blur(function() { 129 if ($("#search_autocomplete").val() == '') { 130 $("#search-container").removeClass('active'); 131 } 132 }) 133 134 135 // prep nav expandos 136 var pagePath = document.location.pathname; 137 // account for intl docs by removing the intl/*/ path 138 if (pagePath.indexOf("/intl/") == 0) { 139 pagePath = pagePath.substr(pagePath.indexOf("/",6)); // start after intl/ to get last / 140 } 141 142 if (pagePath.indexOf(SITE_ROOT) == 0) { 143 if (pagePath == '' || pagePath.charAt(pagePath.length - 1) == '/') { 144 pagePath += 'index.html'; 145 } 146 } 147 148 // Need a copy of the pagePath before it gets changed in the next block; 149 // it's needed to perform proper tab highlighting in offline docs (see rootDir below) 150 var pagePathOriginal = pagePath; 151 if (SITE_ROOT.match(/\.\.\//) || SITE_ROOT == '') { 152 // If running locally, SITE_ROOT will be a relative path, so account for that by 153 // finding the relative URL to this page. This will allow us to find links on the page 154 // leading back to this page. 155 var pathParts = pagePath.split('/'); 156 var relativePagePathParts = []; 157 var upDirs = (SITE_ROOT.match(/(\.\.\/)+/) || [''])[0].length / 3; 158 for (var i = 0; i < upDirs; i++) { 159 relativePagePathParts.push('..'); 160 } 161 for (var i = 0; i < upDirs; i++) { 162 relativePagePathParts.push(pathParts[pathParts.length - (upDirs - i) - 1]); 163 } 164 relativePagePathParts.push(pathParts[pathParts.length - 1]); 165 pagePath = relativePagePathParts.join('/'); 166 } else { 167 // Otherwise the page path is already an absolute URL 168 } 169 170 // Highlight the header tabs... 171 // highlight Design tab 172 if ($("body").hasClass("design")) { 173 $("#header li.design a").addClass("selected"); 174 $("#sticky-header").addClass("design"); 175 176 // highlight About tabs 177 } else if ($("body").hasClass("about")) { 178 var rootDir = pagePathOriginal.substring(1,pagePathOriginal.indexOf('/', 1)); 179 if (rootDir == "about") { 180 $("#nav-x li.about a").addClass("selected"); 181 } else if (rootDir == "wear") { 182 $("#nav-x li.wear a").addClass("selected"); 183 } else if (rootDir == "tv") { 184 $("#nav-x li.tv a").addClass("selected"); 185 } else if (rootDir == "auto") { 186 $("#nav-x li.auto a").addClass("selected"); 187 } 188 // highlight Develop tab 189 } else if ($("body").hasClass("develop") || $("body").hasClass("google")) { 190 $("#header li.develop a").addClass("selected"); 191 $("#sticky-header").addClass("develop"); 192 // In Develop docs, also highlight appropriate sub-tab 193 var rootDir = pagePathOriginal.substring(1,pagePathOriginal.indexOf('/', 1)); 194 if (rootDir == "training") { 195 $("#nav-x li.training a").addClass("selected"); 196 } else if (rootDir == "guide") { 197 $("#nav-x li.guide a").addClass("selected"); 198 } else if (rootDir == "reference") { 199 // If the root is reference, but page is also part of Google Services, select Google 200 if ($("body").hasClass("google")) { 201 $("#nav-x li.google a").addClass("selected"); 202 } else { 203 $("#nav-x li.reference a").addClass("selected"); 204 } 205 } else if ((rootDir == "tools") || (rootDir == "sdk")) { 206 $("#nav-x li.tools a").addClass("selected"); 207 } else if ($("body").hasClass("google")) { 208 $("#nav-x li.google a").addClass("selected"); 209 } else if ($("body").hasClass("samples")) { 210 $("#nav-x li.samples a").addClass("selected"); 211 } 212 213 // highlight Distribute tab 214 } else if ($("body").hasClass("distribute")) { 215 $("#header li.distribute a").addClass("selected"); 216 $("#sticky-header").addClass("distribute"); 217 218 var baseFrag = pagePathOriginal.indexOf('/', 1) + 1; 219 var secondFrag = pagePathOriginal.substring(baseFrag, pagePathOriginal.indexOf('/', baseFrag)); 220 if (secondFrag == "users") { 221 $("#nav-x li.users a").addClass("selected"); 222 } else if (secondFrag == "engage") { 223 $("#nav-x li.engage a").addClass("selected"); 224 } else if (secondFrag == "monetize") { 225 $("#nav-x li.monetize a").addClass("selected"); 226 } else if (secondFrag == "tools") { 227 $("#nav-x li.disttools a").addClass("selected"); 228 } else if (secondFrag == "stories") { 229 $("#nav-x li.stories a").addClass("selected"); 230 } else if (secondFrag == "essentials") { 231 $("#nav-x li.essentials a").addClass("selected"); 232 } else if (secondFrag == "googleplay") { 233 $("#nav-x li.googleplay a").addClass("selected"); 234 } 235 } else if ($("body").hasClass("about")) { 236 $("#sticky-header").addClass("about"); 237 } 238 239 // set global variable so we can highlight the sidenav a bit later (such as for google reference) 240 // and highlight the sidenav 241 mPagePath = pagePath; 242 highlightSidenav(); 243 buildBreadcrumbs(); 244 245 // set up prev/next links if they exist 246 var $selNavLink = $('#nav').find('a[href="' + pagePath + '"]'); 247 var $selListItem; 248 if ($selNavLink.length) { 249 $selListItem = $selNavLink.closest('li'); 250 251 // set up prev links 252 var $prevLink = []; 253 var $prevListItem = $selListItem.prev('li'); 254 255 var crossBoundaries = ($("body.design").length > 0) || ($("body.guide").length > 0) ? true : 256false; // navigate across topic boundaries only in design docs 257 if ($prevListItem.length) { 258 if ($prevListItem.hasClass('nav-section') || crossBoundaries) { 259 // jump to last topic of previous section 260 $prevLink = $prevListItem.find('a:last'); 261 } else if (!$selListItem.hasClass('nav-section')) { 262 // jump to previous topic in this section 263 $prevLink = $prevListItem.find('a:eq(0)'); 264 } 265 } else { 266 // jump to this section's index page (if it exists) 267 var $parentListItem = $selListItem.parents('li'); 268 $prevLink = $selListItem.parents('li').find('a'); 269 270 // except if cross boundaries aren't allowed, and we're at the top of a section already 271 // (and there's another parent) 272 if (!crossBoundaries && $parentListItem.hasClass('nav-section') 273 && $selListItem.hasClass('nav-section')) { 274 $prevLink = []; 275 } 276 } 277 278 // set up next links 279 var $nextLink = []; 280 var startClass = false; 281 var isCrossingBoundary = false; 282 283 if ($selListItem.hasClass('nav-section') && $selListItem.children('div.empty').length == 0) { 284 // we're on an index page, jump to the first topic 285 $nextLink = $selListItem.find('ul:eq(0)').find('a:eq(0)'); 286 287 // if there aren't any children, go to the next section (required for About pages) 288 if($nextLink.length == 0) { 289 $nextLink = $selListItem.next('li').find('a'); 290 } else if ($('.topic-start-link').length) { 291 // as long as there's a child link and there is a "topic start link" (we're on a landing) 292 // then set the landing page "start link" text to be the first doc title 293 $('.topic-start-link').text($nextLink.text().toUpperCase()); 294 } 295 296 // If the selected page has a description, then it's a class or article homepage 297 if ($selListItem.find('a[description]').length) { 298 // this means we're on a class landing page 299 startClass = true; 300 } 301 } else { 302 // jump to the next topic in this section (if it exists) 303 $nextLink = $selListItem.next('li').find('a:eq(0)'); 304 if ($nextLink.length == 0) { 305 isCrossingBoundary = true; 306 // no more topics in this section, jump to the first topic in the next section 307 $nextLink = $selListItem.parents('li:eq(0)').next('li').find('a:eq(0)'); 308 if (!$nextLink.length) { // Go up another layer to look for next page (lesson > class > course) 309 $nextLink = $selListItem.parents('li:eq(1)').next('li.nav-section').find('a:eq(0)'); 310 if ($nextLink.length == 0) { 311 // if that doesn't work, we're at the end of the list, so disable NEXT link 312 $('.next-page-link').attr('href','').addClass("disabled") 313 .click(function() { return false; }); 314 // and completely hide the one in the footer 315 $('.content-footer .next-page-link').hide(); 316 } 317 } 318 } 319 } 320 321 if (startClass) { 322 $('.start-class-link').attr('href', $nextLink.attr('href')).removeClass("hide"); 323 324 // if there's no training bar (below the start button), 325 // then we need to add a bottom border to button 326 if (!$("#tb").length) { 327 $('.start-class-link').css({'border-bottom':'1px solid #DADADA'}); 328 } 329 } else if (isCrossingBoundary && !$('body.design').length) { // Design always crosses boundaries 330 $('.content-footer.next-class').show(); 331 $('.next-page-link').attr('href','') 332 .removeClass("hide").addClass("disabled") 333 .click(function() { return false; }); 334 // and completely hide the one in the footer 335 $('.content-footer .next-page-link').hide(); 336 if ($nextLink.length) { 337 $('.next-class-link').attr('href',$nextLink.attr('href')) 338 .removeClass("hide") 339 .append(": " + $nextLink.html()); 340 $('.next-class-link').find('.new').empty(); 341 } 342 } else { 343 $('.next-page-link').attr('href', $nextLink.attr('href')) 344 .removeClass("hide"); 345 // for the footer link, also add the next page title 346 $('.content-footer .next-page-link').append(": " + $nextLink.html()); 347 } 348 349 if (!startClass && $prevLink.length) { 350 var prevHref = $prevLink.attr('href'); 351 if (prevHref == SITE_ROOT + 'index.html') { 352 // Don't show Previous when it leads to the homepage 353 } else { 354 $('.prev-page-link').attr('href', $prevLink.attr('href')).removeClass("hide"); 355 } 356 } 357 358 } 359 360 361 362 // Set up the course landing pages for Training with class names and descriptions 363 if ($('body.trainingcourse').length) { 364 var $classLinks = $selListItem.find('ul li a').not('#nav .nav-section .nav-section ul a'); 365 366 // create an array for all the class descriptions 367 var $classDescriptions = new Array($classLinks.length); 368 var lang = getLangPref(); 369 $classLinks.each(function(index) { 370 var langDescr = $(this).attr(lang + "-description"); 371 if (typeof langDescr !== 'undefined' && langDescr !== false) { 372 // if there's a class description in the selected language, use that 373 $classDescriptions[index] = langDescr; 374 } else { 375 // otherwise, use the default english description 376 $classDescriptions[index] = $(this).attr("description"); 377 } 378 }); 379 380 var $olClasses = $('<ol class="class-list"></ol>'); 381 var $liClass; 382 var $imgIcon; 383 var $h2Title; 384 var $pSummary; 385 var $olLessons; 386 var $liLesson; 387 $classLinks.each(function(index) { 388 $liClass = $('<li></li>'); 389 $h2Title = $('<a class="title" href="'+$(this).attr('href')+'"><h2>' + $(this).html()+'</h2><span></span></a>'); 390 $pSummary = $('<p class="description">' + $classDescriptions[index] + '</p>'); 391 392 $olLessons = $('<ol class="lesson-list"></ol>'); 393 394 $lessons = $(this).closest('li').find('ul li a'); 395 396 if ($lessons.length) { 397 $imgIcon = $('<img src="'+toRoot+'assets/images/resource-tutorial.png" ' 398 + ' width="64" height="64" alt=""/>'); 399 $lessons.each(function(index) { 400 $olLessons.append('<li><a href="'+$(this).attr('href')+'">' + $(this).html()+'</a></li>'); 401 }); 402 } else { 403 $imgIcon = $('<img src="'+toRoot+'assets/images/resource-article.png" ' 404 + ' width="64" height="64" alt=""/>'); 405 $pSummary.addClass('article'); 406 } 407 408 $liClass.append($h2Title).append($imgIcon).append($pSummary).append($olLessons); 409 $olClasses.append($liClass); 410 }); 411 $('.jd-descr').append($olClasses); 412 } 413 414 // Set up expand/collapse behavior 415 initExpandableNavItems("#nav"); 416 417 418 $(".scroll-pane").scroll(function(event) { 419 event.preventDefault(); 420 return false; 421 }); 422 423 /* Resize nav height when window height changes */ 424 $(window).resize(function() { 425 if ($('#side-nav').length == 0) return; 426 var stylesheet = $('link[rel="stylesheet"][class="fullscreen"]'); 427 setNavBarLeftPos(); // do this even if sidenav isn't fixed because it could become fixed 428 // make sidenav behave when resizing the window and side-scolling is a concern 429 if (sticky) { 430 if ((stylesheet.attr("disabled") == "disabled") || stylesheet.length == 0) { 431 updateSideNavPosition(); 432 } else { 433 updateSidenavFullscreenWidth(); 434 } 435 } 436 resizeNav(); 437 }); 438 439 440 var navBarLeftPos; 441 if ($('#devdoc-nav').length) { 442 setNavBarLeftPos(); 443 } 444 445 446 // Set up play-on-hover <video> tags. 447 $('video.play-on-hover').bind('click', function(){ 448 $(this).get(0).load(); // in case the video isn't seekable 449 $(this).get(0).play(); 450 }); 451 452 // Set up tooltips 453 var TOOLTIP_MARGIN = 10; 454 $('acronym,.tooltip-link').each(function() { 455 var $target = $(this); 456 var $tooltip = $('<div>') 457 .addClass('tooltip-box') 458 .append($target.attr('title')) 459 .hide() 460 .appendTo('body'); 461 $target.removeAttr('title'); 462 463 $target.hover(function() { 464 // in 465 var targetRect = $target.offset(); 466 targetRect.width = $target.width(); 467 targetRect.height = $target.height(); 468 469 $tooltip.css({ 470 left: targetRect.left, 471 top: targetRect.top + targetRect.height + TOOLTIP_MARGIN 472 }); 473 $tooltip.addClass('below'); 474 $tooltip.show(); 475 }, function() { 476 // out 477 $tooltip.hide(); 478 }); 479 }); 480 481 // Set up <h2> deeplinks 482 $('h2').click(function() { 483 var id = $(this).attr('id'); 484 if (id) { 485 document.location.hash = id; 486 } 487 }); 488 489 //Loads the +1 button 490 var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; 491 po.src = 'https://apis.google.com/js/plusone.js'; 492 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); 493 494 495 // Revise the sidenav widths to make room for the scrollbar 496 // which avoids the visible width from changing each time the bar appears 497 var $sidenav = $("#side-nav"); 498 var sidenav_width = parseInt($sidenav.innerWidth()); 499 500 $("#devdoc-nav #nav").css("width", sidenav_width - 4 + "px"); // 4px is scrollbar width 501 502 503 $(".scroll-pane").removeAttr("tabindex"); // get rid of tabindex added by jscroller 504 505 if ($(".scroll-pane").length > 1) { 506 // Check if there's a user preference for the panel heights 507 var cookieHeight = readCookie("reference_height"); 508 if (cookieHeight) { 509 restoreHeight(cookieHeight); 510 } 511 } 512 513 // Resize once loading is finished 514 resizeNav(); 515 // Check if there's an anchor that we need to scroll into view. 516 // A delay is needed, because some browsers do not immediately scroll down to the anchor 517 window.setTimeout(offsetScrollForSticky, 100); 518 519 /* init the language selector based on user cookie for lang */ 520 loadLangPref(); 521 changeNavLang(getLangPref()); 522 523 /* setup event handlers to ensure the overflow menu is visible while picking lang */ 524 $("#language select") 525 .mousedown(function() { 526 $("div.morehover").addClass("hover"); }) 527 .blur(function() { 528 $("div.morehover").removeClass("hover"); }); 529 530 /* some global variable setup */ 531 resizePackagesNav = $("#resize-packages-nav"); 532 classesNav = $("#classes-nav"); 533 devdocNav = $("#devdoc-nav"); 534 535 var cookiePath = ""; 536 if (location.href.indexOf("/reference/") != -1) { 537 cookiePath = "reference_"; 538 } else if (location.href.indexOf("/guide/") != -1) { 539 cookiePath = "guide_"; 540 } else if (location.href.indexOf("/tools/") != -1) { 541 cookiePath = "tools_"; 542 } else if (location.href.indexOf("/training/") != -1) { 543 cookiePath = "training_"; 544 } else if (location.href.indexOf("/design/") != -1) { 545 cookiePath = "design_"; 546 } else if (location.href.indexOf("/distribute/") != -1) { 547 cookiePath = "distribute_"; 548 } 549 550}); 551// END of the onload event 552 553 554function initExpandableNavItems(rootTag) { 555 $(rootTag + ' li.nav-section .nav-section-header').click(function() { 556 var section = $(this).closest('li.nav-section'); 557 if (section.hasClass('expanded')) { 558 /* hide me and descendants */ 559 section.find('ul').slideUp(250, function() { 560 // remove 'expanded' class from my section and any children 561 section.closest('li').removeClass('expanded'); 562 $('li.nav-section', section).removeClass('expanded'); 563 resizeNav(); 564 }); 565 } else { 566 /* show me */ 567 // first hide all other siblings 568 var $others = $('li.nav-section.expanded', $(this).closest('ul')).not('.sticky'); 569 $others.removeClass('expanded').children('ul').slideUp(250); 570 571 // now expand me 572 section.closest('li').addClass('expanded'); 573 section.children('ul').slideDown(250, function() { 574 resizeNav(); 575 }); 576 } 577 }); 578 579 // Stop expand/collapse behavior when clicking on nav section links 580 // (since we're navigating away from the page) 581 // This selector captures the first instance of <a>, but not those with "#" as the href. 582 $('.nav-section-header').find('a:eq(0)').not('a[href="#"]').click(function(evt) { 583 window.location.href = $(this).attr('href'); 584 return false; 585 }); 586} 587 588 589/** Create the list of breadcrumb links in the sticky header */ 590function buildBreadcrumbs() { 591 var $breadcrumbUl = $("#sticky-header ul.breadcrumb"); 592 // Add the secondary horizontal nav item, if provided 593 var $selectedSecondNav = $("div#nav-x ul.nav-x a.selected").clone().removeClass("selected"); 594 if ($selectedSecondNav.length) { 595 $breadcrumbUl.prepend($("<li>").append($selectedSecondNav)) 596 } 597 // Add the primary horizontal nav 598 var $selectedFirstNav = $("div#header-wrap ul.nav-x a.selected").clone().removeClass("selected"); 599 // If there's no header nav item, use the logo link and title from alt text 600 if ($selectedFirstNav.length < 1) { 601 $selectedFirstNav = $("<a>") 602 .attr('href', $("div#header .logo a").attr('href')) 603 .text($("div#header .logo img").attr('alt')); 604 } 605 $breadcrumbUl.prepend($("<li>").append($selectedFirstNav)); 606} 607 608 609 610/** Highlight the current page in sidenav, expanding children as appropriate */ 611function highlightSidenav() { 612 // if something is already highlighted, undo it. This is for dynamic navigation (Samples index) 613 if ($("ul#nav li.selected").length) { 614 unHighlightSidenav(); 615 } 616 // look for URL in sidenav, including the hash 617 var $selNavLink = $('#nav').find('a[href="' + mPagePath + location.hash + '"]'); 618 619 // If the selNavLink is still empty, look for it without the hash 620 if ($selNavLink.length == 0) { 621 $selNavLink = $('#nav').find('a[href="' + mPagePath + '"]'); 622 } 623 624 var $selListItem; 625 if ($selNavLink.length) { 626 // Find this page's <li> in sidenav and set selected 627 $selListItem = $selNavLink.closest('li'); 628 $selListItem.addClass('selected'); 629 630 // Traverse up the tree and expand all parent nav-sections 631 $selNavLink.parents('li.nav-section').each(function() { 632 $(this).addClass('expanded'); 633 $(this).children('ul').show(); 634 }); 635 } 636} 637 638function unHighlightSidenav() { 639 $("ul#nav li.selected").removeClass("selected"); 640 $('ul#nav li.nav-section.expanded').removeClass('expanded').children('ul').hide(); 641} 642 643function toggleFullscreen(enable) { 644 var delay = 20; 645 var enabled = true; 646 var stylesheet = $('link[rel="stylesheet"][class="fullscreen"]'); 647 if (enable) { 648 // Currently NOT USING fullscreen; enable fullscreen 649 stylesheet.removeAttr('disabled'); 650 $('#nav-swap .fullscreen').removeClass('disabled'); 651 $('#devdoc-nav').css({left:''}); 652 setTimeout(updateSidenavFullscreenWidth,delay); // need to wait a moment for css to switch 653 enabled = true; 654 } else { 655 // Currently USING fullscreen; disable fullscreen 656 stylesheet.attr('disabled', 'disabled'); 657 $('#nav-swap .fullscreen').addClass('disabled'); 658 setTimeout(updateSidenavFixedWidth,delay); // need to wait a moment for css to switch 659 enabled = false; 660 } 661 writeCookie("fullscreen", enabled, null, null); 662 setNavBarLeftPos(); 663 resizeNav(delay); 664 updateSideNavPosition(); 665 setTimeout(initSidenavHeightResize,delay); 666} 667 668 669function setNavBarLeftPos() { 670 navBarLeftPos = $('#body-content').offset().left; 671} 672 673 674function updateSideNavPosition() { 675 var newLeft = $(window).scrollLeft() - navBarLeftPos; 676 $('#devdoc-nav').css({left: -newLeft}); 677 $('#devdoc-nav .totop').css({left: -(newLeft - parseInt($('#side-nav').css('margin-left')))}); 678} 679 680// TODO: use $(document).ready instead 681function addLoadEvent(newfun) { 682 var current = window.onload; 683 if (typeof window.onload != 'function') { 684 window.onload = newfun; 685 } else { 686 window.onload = function() { 687 current(); 688 newfun(); 689 } 690 } 691} 692 693var agent = navigator['userAgent'].toLowerCase(); 694// If a mobile phone, set flag and do mobile setup 695if ((agent.indexOf("mobile") != -1) || // android, iphone, ipod 696 (agent.indexOf("blackberry") != -1) || 697 (agent.indexOf("webos") != -1) || 698 (agent.indexOf("mini") != -1)) { // opera mini browsers 699 isMobile = true; 700} 701 702 703$(document).ready(function() { 704 $("pre:not(.no-pretty-print)").addClass("prettyprint"); 705 prettyPrint(); 706}); 707 708 709 710 711/* ######### RESIZE THE SIDENAV HEIGHT ########## */ 712 713function resizeNav(delay) { 714 var $nav = $("#devdoc-nav"); 715 var $window = $(window); 716 var navHeight; 717 718 // Get the height of entire window and the total header height. 719 // Then figure out based on scroll position whether the header is visible 720 var windowHeight = $window.height(); 721 var scrollTop = $window.scrollTop(); 722 var headerHeight = $('#header-wrapper').outerHeight(); 723 var headerVisible = scrollTop < stickyTop; 724 725 // get the height of space between nav and top of window. 726 // Could be either margin or top position, depending on whether the nav is fixed. 727 var topMargin = (parseInt($nav.css('margin-top')) || parseInt($nav.css('top'))) + 1; 728 // add 1 for the #side-nav bottom margin 729 730 // Depending on whether the header is visible, set the side nav's height. 731 if (headerVisible) { 732 // The sidenav height grows as the header goes off screen 733 navHeight = windowHeight - (headerHeight - scrollTop) - topMargin; 734 } else { 735 // Once header is off screen, the nav height is almost full window height 736 navHeight = windowHeight - topMargin; 737 } 738 739 740 741 $scrollPanes = $(".scroll-pane"); 742 if ($scrollPanes.length > 1) { 743 // subtract the height of the api level widget and nav swapper from the available nav height 744 navHeight -= ($('#api-nav-header').outerHeight(true) + $('#nav-swap').outerHeight(true)); 745 746 $("#swapper").css({height:navHeight + "px"}); 747 if ($("#nav-tree").is(":visible")) { 748 $("#nav-tree").css({height:navHeight}); 749 } 750 751 var classesHeight = navHeight - parseInt($("#resize-packages-nav").css("height")) - 10 + "px"; 752 //subtract 10px to account for drag bar 753 754 // if the window becomes small enough to make the class panel height 0, 755 // then the package panel should begin to shrink 756 if (parseInt(classesHeight) <= 0) { 757 $("#resize-packages-nav").css({height:navHeight - 10}); //subtract 10px for drag bar 758 $("#packages-nav").css({height:navHeight - 10}); 759 } 760 761 $("#classes-nav").css({'height':classesHeight, 'margin-top':'10px'}); 762 $("#classes-nav .jspContainer").css({height:classesHeight}); 763 764 765 } else { 766 $nav.height(navHeight); 767 } 768 769 if (delay) { 770 updateFromResize = true; 771 delayedReInitScrollbars(delay); 772 } else { 773 reInitScrollbars(); 774 } 775 776} 777 778var updateScrollbars = false; 779var updateFromResize = false; 780 781/* Re-initialize the scrollbars to account for changed nav size. 782 * This method postpones the actual update by a 1/4 second in order to optimize the 783 * scroll performance while the header is still visible, because re-initializing the 784 * scroll panes is an intensive process. 785 */ 786function delayedReInitScrollbars(delay) { 787 // If we're scheduled for an update, but have received another resize request 788 // before the scheduled resize has occured, just ignore the new request 789 // (and wait for the scheduled one). 790 if (updateScrollbars && updateFromResize) { 791 updateFromResize = false; 792 return; 793 } 794 795 // We're scheduled for an update and the update request came from this method's setTimeout 796 if (updateScrollbars && !updateFromResize) { 797 reInitScrollbars(); 798 updateScrollbars = false; 799 } else { 800 updateScrollbars = true; 801 updateFromResize = false; 802 setTimeout('delayedReInitScrollbars()',delay); 803 } 804} 805 806/* Re-initialize the scrollbars to account for changed nav size. */ 807function reInitScrollbars() { 808 var pane = $(".scroll-pane").each(function(){ 809 var api = $(this).data('jsp'); 810 if (!api) { setTimeout(reInitScrollbars,300); return;} 811 api.reinitialise( {verticalGutter:0} ); 812 }); 813 $(".scroll-pane").removeAttr("tabindex"); // get rid of tabindex added by jscroller 814} 815 816 817/* Resize the height of the nav panels in the reference, 818 * and save the new size to a cookie */ 819function saveNavPanels() { 820 var basePath = getBaseUri(location.pathname); 821 var section = basePath.substring(1,basePath.indexOf("/",1)); 822 writeCookie("height", resizePackagesNav.css("height"), section, null); 823} 824 825 826 827function restoreHeight(packageHeight) { 828 $("#resize-packages-nav").height(packageHeight); 829 $("#packages-nav").height(packageHeight); 830 // var classesHeight = navHeight - packageHeight; 831 // $("#classes-nav").css({height:classesHeight}); 832 // $("#classes-nav .jspContainer").css({height:classesHeight}); 833} 834 835 836 837/* ######### END RESIZE THE SIDENAV HEIGHT ########## */ 838 839 840 841 842 843/** Scroll the jScrollPane to make the currently selected item visible 844 This is called when the page finished loading. */ 845function scrollIntoView(nav) { 846 var $nav = $("#"+nav); 847 var element = $nav.jScrollPane({/* ...settings... */}); 848 var api = element.data('jsp'); 849 850 if ($nav.is(':visible')) { 851 var $selected = $(".selected", $nav); 852 if ($selected.length == 0) { 853 // If no selected item found, exit 854 return; 855 } 856 // get the selected item's offset from its container nav by measuring the item's offset 857 // relative to the document then subtract the container nav's offset relative to the document 858 var selectedOffset = $selected.offset().top - $nav.offset().top; 859 if (selectedOffset > $nav.height() * .8) { // multiply nav height by .8 so we move up the item 860 // if it's more than 80% down the nav 861 // scroll the item up by an amount equal to 80% the container nav's height 862 api.scrollTo(0, selectedOffset - ($nav.height() * .8), false); 863 } 864 } 865} 866 867 868 869 870 871 872/* Show popup dialogs */ 873function showDialog(id) { 874 $dialog = $("#"+id); 875 $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>'); 876 $dialog.wrapInner('<div/>'); 877 $dialog.removeClass("hide"); 878} 879 880 881 882 883 884/* ######### COOKIES! ########## */ 885 886function readCookie(cookie) { 887 var myCookie = cookie_namespace+"_"+cookie+"="; 888 if (document.cookie) { 889 var index = document.cookie.indexOf(myCookie); 890 if (index != -1) { 891 var valStart = index + myCookie.length; 892 var valEnd = document.cookie.indexOf(";", valStart); 893 if (valEnd == -1) { 894 valEnd = document.cookie.length; 895 } 896 var val = document.cookie.substring(valStart, valEnd); 897 return val; 898 } 899 } 900 return 0; 901} 902 903function writeCookie(cookie, val, section, expiration) { 904 if (val==undefined) return; 905 section = section == null ? "_" : "_"+section+"_"; 906 if (expiration == null) { 907 var date = new Date(); 908 date.setTime(date.getTime()+(10*365*24*60*60*1000)); // default expiration is one week 909 expiration = date.toGMTString(); 910 } 911 var cookieValue = cookie_namespace + section + cookie + "=" + val 912 + "; expires=" + expiration+"; path=/"; 913 document.cookie = cookieValue; 914} 915 916/* ######### END COOKIES! ########## */ 917 918 919var sticky = false; 920var stickyTop; 921var prevScrollLeft = 0; // used to compare current position to previous position of horiz scroll 922/* Sets the vertical scoll position at which the sticky bar should appear. 923 This method is called to reset the position when search results appear or hide */ 924function setStickyTop() { 925 stickyTop = $('#header-wrapper').outerHeight() - $('#sticky-header').outerHeight(); 926} 927 928/* 929 * Displays sticky nav bar on pages when dac header scrolls out of view 930 */ 931$(window).scroll(function(event) { 932 933 setStickyTop(); 934 var hiding = false; 935 var $stickyEl = $('#sticky-header'); 936 var $menuEl = $('.menu-container'); 937 // Exit if there's no sidenav 938 if ($('#side-nav').length == 0) return; 939 // Exit if the mouse target is a DIV, because that means the event is coming 940 // from a scrollable div and so there's no need to make adjustments to our layout 941 if ($(event.target).nodeName == "DIV") { 942 return; 943 } 944 945 var top = $(window).scrollTop(); 946 // we set the navbar fixed when the scroll position is beyond the height of the site header... 947 var shouldBeSticky = top >= stickyTop; 948 // ... except if the document content is shorter than the sidenav height. 949 // (this is necessary to avoid crazy behavior on OSX Lion due to overscroll bouncing) 950 if ($("#doc-col").height() < $("#side-nav").height()) { 951 shouldBeSticky = false; 952 } 953 // Account for horizontal scroll 954 var scrollLeft = $(window).scrollLeft(); 955 // When the sidenav is fixed and user scrolls horizontally, reposition the sidenav to match 956 if (sticky && (scrollLeft != prevScrollLeft)) { 957 updateSideNavPosition(); 958 prevScrollLeft = scrollLeft; 959 } 960 961 // Don't continue if the header is sufficently far away 962 // (to avoid intensive resizing that slows scrolling) 963 if (sticky == shouldBeSticky) { 964 return; 965 } 966 967 // If sticky header visible and position is now near top, hide sticky 968 if (sticky && !shouldBeSticky) { 969 sticky = false; 970 hiding = true; 971 // make the sidenav static again 972 $('#devdoc-nav') 973 .removeClass('fixed') 974 .css({'width':'auto','margin':''}) 975 .prependTo('#side-nav'); 976 // delay hide the sticky 977 $menuEl.removeClass('sticky-menu'); 978 $stickyEl.fadeOut(250); 979 hiding = false; 980 981 // update the sidenaav position for side scrolling 982 updateSideNavPosition(); 983 } else if (!sticky && shouldBeSticky) { 984 sticky = true; 985 $stickyEl.fadeIn(10); 986 $menuEl.addClass('sticky-menu'); 987 988 // make the sidenav fixed 989 var width = $('#devdoc-nav').width(); 990 $('#devdoc-nav') 991 .addClass('fixed') 992 .css({'width':width+'px'}) 993 .prependTo('#body-content'); 994 995 // update the sidenaav position for side scrolling 996 updateSideNavPosition(); 997 998 } else if (hiding && top < 15) { 999 $menuEl.removeClass('sticky-menu'); 1000 $stickyEl.hide(); 1001 hiding = false; 1002 } 1003 resizeNav(250); // pass true in order to delay the scrollbar re-initialization for performance 1004}); 1005 1006/* 1007 * Manages secion card states and nav resize to conclude loading 1008 */ 1009(function() { 1010 $(document).ready(function() { 1011 1012 // Stack hover states 1013 $('.section-card-menu').each(function(index, el) { 1014 var height = $(el).height(); 1015 $(el).css({height:height+'px', position:'relative'}); 1016 var $cardInfo = $(el).find('.card-info'); 1017 1018 $cardInfo.css({position: 'absolute', bottom:'0px', left:'0px', right:'0px', overflow:'visible'}); 1019 }); 1020 1021 }); 1022 1023})(); 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038/* MISC LIBRARY FUNCTIONS */ 1039 1040 1041 1042 1043 1044function toggle(obj, slide) { 1045 var ul = $("ul:first", obj); 1046 var li = ul.parent(); 1047 if (li.hasClass("closed")) { 1048 if (slide) { 1049 ul.slideDown("fast"); 1050 } else { 1051 ul.show(); 1052 } 1053 li.removeClass("closed"); 1054 li.addClass("open"); 1055 $(".toggle-img", li).attr("title", "hide pages"); 1056 } else { 1057 ul.slideUp("fast"); 1058 li.removeClass("open"); 1059 li.addClass("closed"); 1060 $(".toggle-img", li).attr("title", "show pages"); 1061 } 1062} 1063 1064 1065function buildToggleLists() { 1066 $(".toggle-list").each( 1067 function(i) { 1068 $("div:first", this).append("<a class='toggle-img' href='#' title='show pages' onClick='toggle(this.parentNode.parentNode, true); return false;'></a>"); 1069 $(this).addClass("closed"); 1070 }); 1071} 1072 1073 1074 1075function hideNestedItems(list, toggle) { 1076 $list = $(list); 1077 // hide nested lists 1078 if($list.hasClass('showing')) { 1079 $("li ol", $list).hide('fast'); 1080 $list.removeClass('showing'); 1081 // show nested lists 1082 } else { 1083 $("li ol", $list).show('fast'); 1084 $list.addClass('showing'); 1085 } 1086 $(".more,.less",$(toggle)).toggle(); 1087} 1088 1089 1090/* Call this to add listeners to a <select> element for Studio/Eclipse/Other docs */ 1091function setupIdeDocToggle() { 1092 $( "select.ide" ).change(function() { 1093 var selected = $(this).find("option:selected").attr("value"); 1094 $(".select-ide").hide(); 1095 $(".select-ide."+selected).show(); 1096 1097 $("select.ide").val(selected); 1098 }); 1099} 1100 1101 1102 1103 1104 1105 1106 1107 1108 1109 1110 1111 1112 1113 1114 1115 1116 1117 1118 1119 1120 1121 1122 1123 1124/* REFERENCE NAV SWAP */ 1125 1126 1127function getNavPref() { 1128 var v = readCookie('reference_nav'); 1129 if (v != NAV_PREF_TREE) { 1130 v = NAV_PREF_PANELS; 1131 } 1132 return v; 1133} 1134 1135function chooseDefaultNav() { 1136 nav_pref = getNavPref(); 1137 if (nav_pref == NAV_PREF_TREE) { 1138 $("#nav-panels").toggle(); 1139 $("#panel-link").toggle(); 1140 $("#nav-tree").toggle(); 1141 $("#tree-link").toggle(); 1142 } 1143} 1144 1145function swapNav() { 1146 if (nav_pref == NAV_PREF_TREE) { 1147 nav_pref = NAV_PREF_PANELS; 1148 } else { 1149 nav_pref = NAV_PREF_TREE; 1150 init_default_navtree(toRoot); 1151 } 1152 var date = new Date(); 1153 date.setTime(date.getTime()+(10*365*24*60*60*1000)); // keep this for 10 years 1154 writeCookie("nav", nav_pref, "reference", date.toGMTString()); 1155 1156 $("#nav-panels").toggle(); 1157 $("#panel-link").toggle(); 1158 $("#nav-tree").toggle(); 1159 $("#tree-link").toggle(); 1160 1161 resizeNav(); 1162 1163 // Gross nasty hack to make tree view show up upon first swap by setting height manually 1164 $("#nav-tree .jspContainer:visible") 1165 .css({'height':$("#nav-tree .jspContainer .jspPane").height() +'px'}); 1166 // Another nasty hack to make the scrollbar appear now that we have height 1167 resizeNav(); 1168 1169 if ($("#nav-tree").is(':visible')) { 1170 scrollIntoView("nav-tree"); 1171 } else { 1172 scrollIntoView("packages-nav"); 1173 scrollIntoView("classes-nav"); 1174 } 1175} 1176 1177 1178 1179/* ############################################ */ 1180/* ########## LOCALIZATION ############ */ 1181/* ############################################ */ 1182 1183function getBaseUri(uri) { 1184 var intlUrl = (uri.substring(0,6) == "/intl/"); 1185 if (intlUrl) { 1186 base = uri.substring(uri.indexOf('intl/')+5,uri.length); 1187 base = base.substring(base.indexOf('/')+1, base.length); 1188 //alert("intl, returning base url: /" + base); 1189 return ("/" + base); 1190 } else { 1191 //alert("not intl, returning uri as found."); 1192 return uri; 1193 } 1194} 1195 1196function requestAppendHL(uri) { 1197//append "?hl=<lang> to an outgoing request (such as to blog) 1198 var lang = getLangPref(); 1199 if (lang) { 1200 var q = 'hl=' + lang; 1201 uri += '?' + q; 1202 window.location = uri; 1203 return false; 1204 } else { 1205 return true; 1206 } 1207} 1208 1209 1210function changeNavLang(lang) { 1211 var $links = $("#devdoc-nav,#header,#nav-x,.training-nav-top,.content-footer").find("a["+lang+"-lang]"); 1212 $links.each(function(i){ // for each link with a translation 1213 var $link = $(this); 1214 if (lang != "en") { // No need to worry about English, because a language change invokes new request 1215 // put the desired language from the attribute as the text 1216 $link.text($link.attr(lang+"-lang")) 1217 } 1218 }); 1219} 1220 1221function changeLangPref(lang, submit) { 1222 var date = new Date(); 1223 expires = date.toGMTString(date.setTime(date.getTime()+(10*365*24*60*60*1000))); 1224 // keep this for 50 years 1225 //alert("expires: " + expires) 1226 writeCookie("pref_lang", lang, null, expires); 1227 1228 // ####### TODO: Remove this condition once we're stable on devsite ####### 1229 // This condition is only needed if we still need to support legacy GAE server 1230 if (devsite) { 1231 // Switch language when on Devsite server 1232 if (submit) { 1233 $("#setlang").submit(); 1234 } 1235 } else { 1236 // Switch language when on legacy GAE server 1237 if (submit) { 1238 window.location = getBaseUri(location.pathname); 1239 } 1240 } 1241} 1242 1243function loadLangPref() { 1244 var lang = readCookie("pref_lang"); 1245 if (lang != 0) { 1246 $("#language").find("option[value='"+lang+"']").attr("selected",true); 1247 } 1248} 1249 1250function getLangPref() { 1251 var lang = $("#language").find(":selected").attr("value"); 1252 if (!lang) { 1253 lang = readCookie("pref_lang"); 1254 } 1255 return (lang != 0) ? lang : 'en'; 1256} 1257 1258/* ########## END LOCALIZATION ############ */ 1259 1260 1261 1262 1263 1264 1265/* Used to hide and reveal supplemental content, such as long code samples. 1266 See the companion CSS in android-developer-docs.css */ 1267function toggleContent(obj) { 1268 var div = $(obj).closest(".toggle-content"); 1269 var toggleMe = $(".toggle-content-toggleme:eq(0)",div); 1270 if (div.hasClass("closed")) { // if it's closed, open it 1271 toggleMe.slideDown(); 1272 $(".toggle-content-text:eq(0)", obj).toggle(); 1273 div.removeClass("closed").addClass("open"); 1274 $(".toggle-content-img:eq(0)", div).attr("title", "hide").attr("src", toRoot 1275 + "assets/images/triangle-opened.png"); 1276 } else { // if it's open, close it 1277 toggleMe.slideUp('fast', function() { // Wait until the animation is done before closing arrow 1278 $(".toggle-content-text:eq(0)", obj).toggle(); 1279 div.removeClass("open").addClass("closed"); 1280 div.find(".toggle-content").removeClass("open").addClass("closed") 1281 .find(".toggle-content-toggleme").hide(); 1282 $(".toggle-content-img", div).attr("title", "show").attr("src", toRoot 1283 + "assets/images/triangle-closed.png"); 1284 }); 1285 } 1286 return false; 1287} 1288 1289 1290/* New version of expandable content */ 1291function toggleExpandable(link,id) { 1292 if($(id).is(':visible')) { 1293 $(id).slideUp(); 1294 $(link).removeClass('expanded'); 1295 } else { 1296 $(id).slideDown(); 1297 $(link).addClass('expanded'); 1298 } 1299} 1300 1301function hideExpandable(ids) { 1302 $(ids).slideUp(); 1303 $(ids).prev('h4').find('a.expandable').removeClass('expanded'); 1304} 1305 1306 1307 1308 1309 1310/* 1311 * Slideshow 1.0 1312 * Used on /index.html and /develop/index.html for carousel 1313 * 1314 * Sample usage: 1315 * HTML - 1316 * <div class="slideshow-container"> 1317 * <a href="" class="slideshow-prev">Prev</a> 1318 * <a href="" class="slideshow-next">Next</a> 1319 * <ul> 1320 * <li class="item"><img src="images/marquee1.jpg"></li> 1321 * <li class="item"><img src="images/marquee2.jpg"></li> 1322 * <li class="item"><img src="images/marquee3.jpg"></li> 1323 * <li class="item"><img src="images/marquee4.jpg"></li> 1324 * </ul> 1325 * </div> 1326 * 1327 * <script type="text/javascript"> 1328 * $('.slideshow-container').dacSlideshow({ 1329 * auto: true, 1330 * btnPrev: '.slideshow-prev', 1331 * btnNext: '.slideshow-next' 1332 * }); 1333 * </script> 1334 * 1335 * Options: 1336 * btnPrev: optional identifier for previous button 1337 * btnNext: optional identifier for next button 1338 * btnPause: optional identifier for pause button 1339 * auto: whether or not to auto-proceed 1340 * speed: animation speed 1341 * autoTime: time between auto-rotation 1342 * easing: easing function for transition 1343 * start: item to select by default 1344 * scroll: direction to scroll in 1345 * pagination: whether or not to include dotted pagination 1346 * 1347 */ 1348 1349 (function($) { 1350 $.fn.dacSlideshow = function(o) { 1351 1352 //Options - see above 1353 o = $.extend({ 1354 btnPrev: null, 1355 btnNext: null, 1356 btnPause: null, 1357 auto: true, 1358 speed: 500, 1359 autoTime: 12000, 1360 easing: null, 1361 start: 0, 1362 scroll: 1, 1363 pagination: true 1364 1365 }, o || {}); 1366 1367 //Set up a carousel for each 1368 return this.each(function() { 1369 1370 var running = false; 1371 var animCss = o.vertical ? "top" : "left"; 1372 var sizeCss = o.vertical ? "height" : "width"; 1373 var div = $(this); 1374 var ul = $("ul", div); 1375 var tLi = $("li", ul); 1376 var tl = tLi.size(); 1377 var timer = null; 1378 1379 var li = $("li", ul); 1380 var itemLength = li.size(); 1381 var curr = o.start; 1382 1383 li.css({float: o.vertical ? "none" : "left"}); 1384 ul.css({margin: "0", padding: "0", position: "relative", "list-style-type": "none", "z-index": "1"}); 1385 div.css({position: "relative", "z-index": "2", left: "0px"}); 1386 1387 var liSize = o.vertical ? height(li) : width(li); 1388 var ulSize = liSize * itemLength; 1389 var divSize = liSize; 1390 1391 li.css({width: li.width(), height: li.height()}); 1392 ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize)); 1393 1394 div.css(sizeCss, divSize+"px"); 1395 1396 //Pagination 1397 if (o.pagination) { 1398 var pagination = $("<div class='pagination'></div>"); 1399 var pag_ul = $("<ul></ul>"); 1400 if (tl > 1) { 1401 for (var i=0;i<tl;i++) { 1402 var li = $("<li>"+i+"</li>"); 1403 pag_ul.append(li); 1404 if (i==o.start) li.addClass('active'); 1405 li.click(function() { 1406 go(parseInt($(this).text())); 1407 }) 1408 } 1409 pagination.append(pag_ul); 1410 div.append(pagination); 1411 } 1412 } 1413 1414 //Previous button 1415 if(o.btnPrev) 1416 $(o.btnPrev).click(function(e) { 1417 e.preventDefault(); 1418 return go(curr-o.scroll); 1419 }); 1420 1421 //Next button 1422 if(o.btnNext) 1423 $(o.btnNext).click(function(e) { 1424 e.preventDefault(); 1425 return go(curr+o.scroll); 1426 }); 1427 1428 //Pause button 1429 if(o.btnPause) 1430 $(o.btnPause).click(function(e) { 1431 e.preventDefault(); 1432 if ($(this).hasClass('paused')) { 1433 startRotateTimer(); 1434 } else { 1435 pauseRotateTimer(); 1436 } 1437 }); 1438 1439 //Auto rotation 1440 if(o.auto) startRotateTimer(); 1441 1442 function startRotateTimer() { 1443 clearInterval(timer); 1444 timer = setInterval(function() { 1445 if (curr == tl-1) { 1446 go(0); 1447 } else { 1448 go(curr+o.scroll); 1449 } 1450 }, o.autoTime); 1451 $(o.btnPause).removeClass('paused'); 1452 } 1453 1454 function pauseRotateTimer() { 1455 clearInterval(timer); 1456 $(o.btnPause).addClass('paused'); 1457 } 1458 1459 //Go to an item 1460 function go(to) { 1461 if(!running) { 1462 1463 if(to<0) { 1464 to = itemLength-1; 1465 } else if (to>itemLength-1) { 1466 to = 0; 1467 } 1468 curr = to; 1469 1470 running = true; 1471 1472 ul.animate( 1473 animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , o.speed, o.easing, 1474 function() { 1475 running = false; 1476 } 1477 ); 1478 1479 $(o.btnPrev + "," + o.btnNext).removeClass("disabled"); 1480 $( (curr-o.scroll<0 && o.btnPrev) 1481 || 1482 (curr+o.scroll > itemLength && o.btnNext) 1483 || 1484 [] 1485 ).addClass("disabled"); 1486 1487 1488 var nav_items = $('li', pagination); 1489 nav_items.removeClass('active'); 1490 nav_items.eq(to).addClass('active'); 1491 1492 1493 } 1494 if(o.auto) startRotateTimer(); 1495 return false; 1496 }; 1497 }); 1498 }; 1499 1500 function css(el, prop) { 1501 return parseInt($.css(el[0], prop)) || 0; 1502 }; 1503 function width(el) { 1504 return el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight'); 1505 }; 1506 function height(el) { 1507 return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom'); 1508 }; 1509 1510 })(jQuery); 1511 1512 1513/* 1514 * dacSlideshow 1.0 1515 * Used on develop/index.html for side-sliding tabs 1516 * 1517 * Sample usage: 1518 * HTML - 1519 * <div class="slideshow-container"> 1520 * <a href="" class="slideshow-prev">Prev</a> 1521 * <a href="" class="slideshow-next">Next</a> 1522 * <ul> 1523 * <li class="item"><img src="images/marquee1.jpg"></li> 1524 * <li class="item"><img src="images/marquee2.jpg"></li> 1525 * <li class="item"><img src="images/marquee3.jpg"></li> 1526 * <li class="item"><img src="images/marquee4.jpg"></li> 1527 * </ul> 1528 * </div> 1529 * 1530 * <script type="text/javascript"> 1531 * $('.slideshow-container').dacSlideshow({ 1532 * auto: true, 1533 * btnPrev: '.slideshow-prev', 1534 * btnNext: '.slideshow-next' 1535 * }); 1536 * </script> 1537 * 1538 * Options: 1539 * btnPrev: optional identifier for previous button 1540 * btnNext: optional identifier for next button 1541 * auto: whether or not to auto-proceed 1542 * speed: animation speed 1543 * autoTime: time between auto-rotation 1544 * easing: easing function for transition 1545 * start: item to select by default 1546 * scroll: direction to scroll in 1547 * pagination: whether or not to include dotted pagination 1548 * 1549 */ 1550 (function($) { 1551 $.fn.dacTabbedList = function(o) { 1552 1553 //Options - see above 1554 o = $.extend({ 1555 speed : 250, 1556 easing: null, 1557 nav_id: null, 1558 frame_id: null 1559 }, o || {}); 1560 1561 //Set up a carousel for each 1562 return this.each(function() { 1563 1564 var curr = 0; 1565 var running = false; 1566 var animCss = "margin-left"; 1567 var sizeCss = "width"; 1568 var div = $(this); 1569 1570 var nav = $(o.nav_id, div); 1571 var nav_li = $("li", nav); 1572 var nav_size = nav_li.size(); 1573 var frame = div.find(o.frame_id); 1574 var content_width = $(frame).find('ul').width(); 1575 //Buttons 1576 $(nav_li).click(function(e) { 1577 go($(nav_li).index($(this))); 1578 }) 1579 1580 //Go to an item 1581 function go(to) { 1582 if(!running) { 1583 curr = to; 1584 running = true; 1585 1586 frame.animate({ 'margin-left' : -(curr*content_width) }, o.speed, o.easing, 1587 function() { 1588 running = false; 1589 } 1590 ); 1591 1592 1593 nav_li.removeClass('active'); 1594 nav_li.eq(to).addClass('active'); 1595 1596 1597 } 1598 return false; 1599 }; 1600 }); 1601 }; 1602 1603 function css(el, prop) { 1604 return parseInt($.css(el[0], prop)) || 0; 1605 }; 1606 function width(el) { 1607 return el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight'); 1608 }; 1609 function height(el) { 1610 return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom'); 1611 }; 1612 1613 })(jQuery); 1614 1615 1616 1617 1618 1619/* ######################################################## */ 1620/* ################ SEARCH SUGGESTIONS ################## */ 1621/* ######################################################## */ 1622 1623 1624 1625var gSelectedIndex = -1; // the index position of currently highlighted suggestion 1626var gSelectedColumn = -1; // which column of suggestion lists is currently focused 1627 1628var gMatches = new Array(); 1629var gLastText = ""; 1630var gInitialized = false; 1631var ROW_COUNT_FRAMEWORK = 20; // max number of results in list 1632var gListLength = 0; 1633 1634 1635var gGoogleMatches = new Array(); 1636var ROW_COUNT_GOOGLE = 15; // max number of results in list 1637var gGoogleListLength = 0; 1638 1639var gDocsMatches = new Array(); 1640var ROW_COUNT_DOCS = 100; // max number of results in list 1641var gDocsListLength = 0; 1642 1643function onSuggestionClick(link) { 1644 // When user clicks a suggested document, track it 1645 ga('send', 'event', 'Suggestion Click', 'clicked: ' + $(link).text(), 1646 'from: ' + $("#search_autocomplete").val()); 1647} 1648 1649function set_item_selected($li, selected) 1650{ 1651 if (selected) { 1652 $li.attr('class','jd-autocomplete jd-selected'); 1653 } else { 1654 $li.attr('class','jd-autocomplete'); 1655 } 1656} 1657 1658function set_item_values(toroot, $li, match) 1659{ 1660 var $link = $('a',$li); 1661 $link.html(match.__hilabel || match.label); 1662 $link.attr('href',toroot + match.link); 1663} 1664 1665function set_item_values_jd(toroot, $li, match) 1666{ 1667 var $link = $('a',$li); 1668 $link.html(match.title); 1669 $link.attr('href',toroot + match.url); 1670} 1671 1672function new_suggestion($list) { 1673 var $li = $("<li class='jd-autocomplete'></li>"); 1674 $list.append($li); 1675 1676 $li.mousedown(function() { 1677 window.location = this.firstChild.getAttribute("href"); 1678 }); 1679 $li.mouseover(function() { 1680 $('.search_filtered_wrapper li').removeClass('jd-selected'); 1681 $(this).addClass('jd-selected'); 1682 gSelectedColumn = $(".search_filtered:visible").index($(this).closest('.search_filtered')); 1683 gSelectedIndex = $("li", $(".search_filtered:visible")[gSelectedColumn]).index(this); 1684 }); 1685 $li.append("<a onclick='onSuggestionClick(this)'></a>"); 1686 $li.attr('class','show-item'); 1687 return $li; 1688} 1689 1690function sync_selection_table(toroot) 1691{ 1692 var $li; //list item jquery object 1693 var i; //list item iterator 1694 1695 // if there are NO results at all, hide all columns 1696 if (!(gMatches.length > 0) && !(gGoogleMatches.length > 0) && !(gDocsMatches.length > 0)) { 1697 $('.suggest-card').hide(300); 1698 return; 1699 } 1700 1701 // if there are api results 1702 if ((gMatches.length > 0) || (gGoogleMatches.length > 0)) { 1703 // reveal suggestion list 1704 $('.suggest-card.dummy').show(); 1705 $('.suggest-card.reference').show(); 1706 var listIndex = 0; // list index position 1707 1708 // reset the lists 1709 $(".search_filtered_wrapper.reference li").remove(); 1710 1711 // ########### ANDROID RESULTS ############# 1712 if (gMatches.length > 0) { 1713 1714 // determine android results to show 1715 gListLength = gMatches.length < ROW_COUNT_FRAMEWORK ? 1716 gMatches.length : ROW_COUNT_FRAMEWORK; 1717 for (i=0; i<gListLength; i++) { 1718 var $li = new_suggestion($(".suggest-card.reference ul")); 1719 set_item_values(toroot, $li, gMatches[i]); 1720 set_item_selected($li, i == gSelectedIndex); 1721 } 1722 } 1723 1724 // ########### GOOGLE RESULTS ############# 1725 if (gGoogleMatches.length > 0) { 1726 // show header for list 1727 $(".suggest-card.reference ul").append("<li class='header'>in Google Services:</li>"); 1728 1729 // determine google results to show 1730 gGoogleListLength = gGoogleMatches.length < ROW_COUNT_GOOGLE ? gGoogleMatches.length : ROW_COUNT_GOOGLE; 1731 for (i=0; i<gGoogleListLength; i++) { 1732 var $li = new_suggestion($(".suggest-card.reference ul")); 1733 set_item_values(toroot, $li, gGoogleMatches[i]); 1734 set_item_selected($li, i == gSelectedIndex); 1735 } 1736 } 1737 } else { 1738 $('.suggest-card.reference').hide(); 1739 $('.suggest-card.dummy').hide(); 1740 } 1741 1742 // ########### JD DOC RESULTS ############# 1743 if (gDocsMatches.length > 0) { 1744 // reset the lists 1745 $(".search_filtered_wrapper.docs li").remove(); 1746 1747 // determine google results to show 1748 // NOTE: The order of the conditions below for the sugg.type MUST BE SPECIFIC: 1749 // The order must match the reverse order that each section appears as a card in 1750 // the suggestion UI... this may be only for the "develop" grouped items though. 1751 gDocsListLength = gDocsMatches.length < ROW_COUNT_DOCS ? gDocsMatches.length : ROW_COUNT_DOCS; 1752 for (i=0; i<gDocsListLength; i++) { 1753 var sugg = gDocsMatches[i]; 1754 var $li; 1755 if (sugg.type == "design") { 1756 $li = new_suggestion($(".suggest-card.design ul")); 1757 } else 1758 if (sugg.type == "distribute") { 1759 $li = new_suggestion($(".suggest-card.distribute ul")); 1760 } else 1761 if (sugg.type == "samples") { 1762 $li = new_suggestion($(".suggest-card.develop .child-card.samples")); 1763 } else 1764 if (sugg.type == "training") { 1765 $li = new_suggestion($(".suggest-card.develop .child-card.training")); 1766 } else 1767 if (sugg.type == "about"||"guide"||"tools"||"google") { 1768 $li = new_suggestion($(".suggest-card.develop .child-card.guides")); 1769 } else { 1770 continue; 1771 } 1772 1773 set_item_values_jd(toroot, $li, sugg); 1774 set_item_selected($li, i == gSelectedIndex); 1775 } 1776 1777 // add heading and show or hide card 1778 if ($(".suggest-card.design li").length > 0) { 1779 $(".suggest-card.design ul").prepend("<li class='header'>Design:</li>"); 1780 $(".suggest-card.design").show(300); 1781 } else { 1782 $('.suggest-card.design').hide(300); 1783 } 1784 if ($(".suggest-card.distribute li").length > 0) { 1785 $(".suggest-card.distribute ul").prepend("<li class='header'>Distribute:</li>"); 1786 $(".suggest-card.distribute").show(300); 1787 } else { 1788 $('.suggest-card.distribute').hide(300); 1789 } 1790 if ($(".child-card.guides li").length > 0) { 1791 $(".child-card.guides").prepend("<li class='header'>Guides:</li>"); 1792 $(".child-card.guides li").appendTo(".suggest-card.develop ul"); 1793 } 1794 if ($(".child-card.training li").length > 0) { 1795 $(".child-card.training").prepend("<li class='header'>Training:</li>"); 1796 $(".child-card.training li").appendTo(".suggest-card.develop ul"); 1797 } 1798 if ($(".child-card.samples li").length > 0) { 1799 $(".child-card.samples").prepend("<li class='header'>Samples:</li>"); 1800 $(".child-card.samples li").appendTo(".suggest-card.develop ul"); 1801 } 1802 1803 if ($(".suggest-card.develop li").length > 0) { 1804 $(".suggest-card.develop").show(300); 1805 } else { 1806 $('.suggest-card.develop').hide(300); 1807 } 1808 1809 } else { 1810 $('.search_filtered_wrapper.docs .suggest-card:not(.dummy)').hide(300); 1811 } 1812} 1813 1814/** Called by the search input's onkeydown and onkeyup events. 1815 * Handles navigation with keyboard arrows, Enter key to invoke search, 1816 * otherwise invokes search suggestions on key-up event. 1817 * @param e The JS event 1818 * @param kd True if the event is key-down 1819 * @param toroot A string for the site's root path 1820 * @returns True if the event should bubble up 1821 */ 1822function search_changed(e, kd, toroot) 1823{ 1824 var currentLang = getLangPref(); 1825 var search = document.getElementById("search_autocomplete"); 1826 var text = search.value.replace(/(^ +)|( +$)/g, ''); 1827 // get the ul hosting the currently selected item 1828 gSelectedColumn = gSelectedColumn >= 0 ? gSelectedColumn : 0; 1829 var $columns = $(".search_filtered_wrapper").find(".search_filtered:visible"); 1830 var $selectedUl = $columns[gSelectedColumn]; 1831 1832 // show/hide the close button 1833 if (text != '') { 1834 $(".search .close").removeClass("hide"); 1835 } else { 1836 $(".search .close").addClass("hide"); 1837 } 1838 // 27 = esc 1839 if (e.keyCode == 27) { 1840 // close all search results 1841 if (kd) $('.search .close').trigger('click'); 1842 return true; 1843 } 1844 // 13 = enter 1845 else if (e.keyCode == 13) { 1846 if (gSelectedIndex < 0) { 1847 $('.suggest-card').hide(); 1848 if ($("#searchResults").is(":hidden") && (search.value != "")) { 1849 // if results aren't showing (and text not empty), return true to allow search to execute 1850 $('body,html').animate({scrollTop:0}, '500', 'swing'); 1851 return true; 1852 } else { 1853 // otherwise, results are already showing, so allow ajax to auto refresh the results 1854 // and ignore this Enter press to avoid the reload. 1855 return false; 1856 } 1857 } else if (kd && gSelectedIndex >= 0) { 1858 // click the link corresponding to selected item 1859 $("a",$("li",$selectedUl)[gSelectedIndex]).get()[0].click(); 1860 return false; 1861 } 1862 } 1863 // If Google results are showing, return true to allow ajax search to execute 1864 else if ($("#searchResults").is(":visible")) { 1865 // Also, if search_results is scrolled out of view, scroll to top to make results visible 1866 if ((sticky ) && (search.value != "")) { 1867 $('body,html').animate({scrollTop:0}, '500', 'swing'); 1868 } 1869 return true; 1870 } 1871 // 38 UP ARROW 1872 else if (kd && (e.keyCode == 38)) { 1873 // if the next item is a header, skip it 1874 if ($($("li", $selectedUl)[gSelectedIndex-1]).hasClass("header")) { 1875 gSelectedIndex--; 1876 } 1877 if (gSelectedIndex >= 0) { 1878 $('li', $selectedUl).removeClass('jd-selected'); 1879 gSelectedIndex--; 1880 $('li:nth-child('+(gSelectedIndex+1)+')', $selectedUl).addClass('jd-selected'); 1881 // If user reaches top, reset selected column 1882 if (gSelectedIndex < 0) { 1883 gSelectedColumn = -1; 1884 } 1885 } 1886 return false; 1887 } 1888 // 40 DOWN ARROW 1889 else if (kd && (e.keyCode == 40)) { 1890 // if the next item is a header, skip it 1891 if ($($("li", $selectedUl)[gSelectedIndex+1]).hasClass("header")) { 1892 gSelectedIndex++; 1893 } 1894 if ((gSelectedIndex < $("li", $selectedUl).length-1) || 1895 ($($("li", $selectedUl)[gSelectedIndex+1]).hasClass("header"))) { 1896 $('li', $selectedUl).removeClass('jd-selected'); 1897 gSelectedIndex++; 1898 $('li:nth-child('+(gSelectedIndex+1)+')', $selectedUl).addClass('jd-selected'); 1899 } 1900 return false; 1901 } 1902 // Consider left/right arrow navigation 1903 // NOTE: Order of suggest columns are reverse order (index position 0 is on right) 1904 else if (kd && $columns.length > 1 && gSelectedColumn >= 0) { 1905 // 37 LEFT ARROW 1906 // go left only if current column is not left-most column (last column) 1907 if (e.keyCode == 37 && gSelectedColumn < $columns.length - 1) { 1908 $('li', $selectedUl).removeClass('jd-selected'); 1909 gSelectedColumn++; 1910 $selectedUl = $columns[gSelectedColumn]; 1911 // keep or reset the selected item to last item as appropriate 1912 gSelectedIndex = gSelectedIndex > 1913 $("li", $selectedUl).length-1 ? 1914 $("li", $selectedUl).length-1 : gSelectedIndex; 1915 // if the corresponding item is a header, move down 1916 if ($($("li", $selectedUl)[gSelectedIndex]).hasClass("header")) { 1917 gSelectedIndex++; 1918 } 1919 // set item selected 1920 $('li:nth-child('+(gSelectedIndex+1)+')', $selectedUl).addClass('jd-selected'); 1921 return false; 1922 } 1923 // 39 RIGHT ARROW 1924 // go right only if current column is not the right-most column (first column) 1925 else if (e.keyCode == 39 && gSelectedColumn > 0) { 1926 $('li', $selectedUl).removeClass('jd-selected'); 1927 gSelectedColumn--; 1928 $selectedUl = $columns[gSelectedColumn]; 1929 // keep or reset the selected item to last item as appropriate 1930 gSelectedIndex = gSelectedIndex > 1931 $("li", $selectedUl).length-1 ? 1932 $("li", $selectedUl).length-1 : gSelectedIndex; 1933 // if the corresponding item is a header, move down 1934 if ($($("li", $selectedUl)[gSelectedIndex]).hasClass("header")) { 1935 gSelectedIndex++; 1936 } 1937 // set item selected 1938 $('li:nth-child('+(gSelectedIndex+1)+')', $selectedUl).addClass('jd-selected'); 1939 return false; 1940 } 1941 } 1942 1943 // if key-up event and not arrow down/up/left/right, 1944 // read the search query and add suggestions to gMatches 1945 else if (!kd && (e.keyCode != 40) 1946 && (e.keyCode != 38) 1947 && (e.keyCode != 37) 1948 && (e.keyCode != 39)) { 1949 gSelectedIndex = -1; 1950 gMatches = new Array(); 1951 matchedCount = 0; 1952 gGoogleMatches = new Array(); 1953 matchedCountGoogle = 0; 1954 gDocsMatches = new Array(); 1955 matchedCountDocs = 0; 1956 1957 // Search for Android matches 1958 for (var i=0; i<DATA.length; i++) { 1959 var s = DATA[i]; 1960 if (text.length != 0 && 1961 s.label.toLowerCase().indexOf(text.toLowerCase()) != -1) { 1962 gMatches[matchedCount] = s; 1963 matchedCount++; 1964 } 1965 } 1966 rank_autocomplete_api_results(text, gMatches); 1967 for (var i=0; i<gMatches.length; i++) { 1968 var s = gMatches[i]; 1969 } 1970 1971 1972 // Search for Google matches 1973 for (var i=0; i<GOOGLE_DATA.length; i++) { 1974 var s = GOOGLE_DATA[i]; 1975 if (text.length != 0 && 1976 s.label.toLowerCase().indexOf(text.toLowerCase()) != -1) { 1977 gGoogleMatches[matchedCountGoogle] = s; 1978 matchedCountGoogle++; 1979 } 1980 } 1981 rank_autocomplete_api_results(text, gGoogleMatches); 1982 for (var i=0; i<gGoogleMatches.length; i++) { 1983 var s = gGoogleMatches[i]; 1984 } 1985 1986 highlight_autocomplete_result_labels(text); 1987 1988 1989 1990 // Search for matching JD docs 1991 if (text.length >= 3) { 1992 // Regex to match only the beginning of a word 1993 var textRegex = new RegExp("\\b" + text.toLowerCase(), "g"); 1994 1995 1996 // Search for Training classes 1997 for (var i=0; i<TRAINING_RESOURCES.length; i++) { 1998 // current search comparison, with counters for tag and title, 1999 // used later to improve ranking 2000 var s = TRAINING_RESOURCES[i]; 2001 s.matched_tag = 0; 2002 s.matched_title = 0; 2003 var matched = false; 2004 2005 // Check if query matches any tags; work backwards toward 1 to assist ranking 2006 for (var j = s.keywords.length - 1; j >= 0; j--) { 2007 // it matches a tag 2008 if (s.keywords[j].toLowerCase().match(textRegex)) { 2009 matched = true; 2010 s.matched_tag = j + 1; // add 1 to index position 2011 } 2012 } 2013 // Don't consider doc title for lessons (only for class landing pages), 2014 // unless the lesson has a tag that already matches 2015 if ((s.lang == currentLang) && 2016 (!(s.type == "training" && s.url.indexOf("index.html") == -1) || matched)) { 2017 // it matches the doc title 2018 if (s.title.toLowerCase().match(textRegex)) { 2019 matched = true; 2020 s.matched_title = 1; 2021 } 2022 } 2023 if (matched) { 2024 gDocsMatches[matchedCountDocs] = s; 2025 matchedCountDocs++; 2026 } 2027 } 2028 2029 2030 // Search for API Guides 2031 for (var i=0; i<GUIDE_RESOURCES.length; i++) { 2032 // current search comparison, with counters for tag and title, 2033 // used later to improve ranking 2034 var s = GUIDE_RESOURCES[i]; 2035 s.matched_tag = 0; 2036 s.matched_title = 0; 2037 var matched = false; 2038 2039 // Check if query matches any tags; work backwards toward 1 to assist ranking 2040 for (var j = s.keywords.length - 1; j >= 0; j--) { 2041 // it matches a tag 2042 if (s.keywords[j].toLowerCase().match(textRegex)) { 2043 matched = true; 2044 s.matched_tag = j + 1; // add 1 to index position 2045 } 2046 } 2047 // Check if query matches the doc title, but only for current language 2048 if (s.lang == currentLang) { 2049 // if query matches the doc title 2050 if (s.title.toLowerCase().match(textRegex)) { 2051 matched = true; 2052 s.matched_title = 1; 2053 } 2054 } 2055 if (matched) { 2056 gDocsMatches[matchedCountDocs] = s; 2057 matchedCountDocs++; 2058 } 2059 } 2060 2061 2062 // Search for Tools Guides 2063 for (var i=0; i<TOOLS_RESOURCES.length; i++) { 2064 // current search comparison, with counters for tag and title, 2065 // used later to improve ranking 2066 var s = TOOLS_RESOURCES[i]; 2067 s.matched_tag = 0; 2068 s.matched_title = 0; 2069 var matched = false; 2070 2071 // Check if query matches any tags; work backwards toward 1 to assist ranking 2072 for (var j = s.keywords.length - 1; j >= 0; j--) { 2073 // it matches a tag 2074 if (s.keywords[j].toLowerCase().match(textRegex)) { 2075 matched = true; 2076 s.matched_tag = j + 1; // add 1 to index position 2077 } 2078 } 2079 // Check if query matches the doc title, but only for current language 2080 if (s.lang == currentLang) { 2081 // if query matches the doc title 2082 if (s.title.toLowerCase().match(textRegex)) { 2083 matched = true; 2084 s.matched_title = 1; 2085 } 2086 } 2087 if (matched) { 2088 gDocsMatches[matchedCountDocs] = s; 2089 matchedCountDocs++; 2090 } 2091 } 2092 2093 2094 // Search for About docs 2095 for (var i=0; i<ABOUT_RESOURCES.length; i++) { 2096 // current search comparison, with counters for tag and title, 2097 // used later to improve ranking 2098 var s = ABOUT_RESOURCES[i]; 2099 s.matched_tag = 0; 2100 s.matched_title = 0; 2101 var matched = false; 2102 2103 // Check if query matches any tags; work backwards toward 1 to assist ranking 2104 for (var j = s.keywords.length - 1; j >= 0; j--) { 2105 // it matches a tag 2106 if (s.keywords[j].toLowerCase().match(textRegex)) { 2107 matched = true; 2108 s.matched_tag = j + 1; // add 1 to index position 2109 } 2110 } 2111 // Check if query matches the doc title, but only for current language 2112 if (s.lang == currentLang) { 2113 // if query matches the doc title 2114 if (s.title.toLowerCase().match(textRegex)) { 2115 matched = true; 2116 s.matched_title = 1; 2117 } 2118 } 2119 if (matched) { 2120 gDocsMatches[matchedCountDocs] = s; 2121 matchedCountDocs++; 2122 } 2123 } 2124 2125 2126 // Search for Design guides 2127 for (var i=0; i<DESIGN_RESOURCES.length; i++) { 2128 // current search comparison, with counters for tag and title, 2129 // used later to improve ranking 2130 var s = DESIGN_RESOURCES[i]; 2131 s.matched_tag = 0; 2132 s.matched_title = 0; 2133 var matched = false; 2134 2135 // Check if query matches any tags; work backwards toward 1 to assist ranking 2136 for (var j = s.keywords.length - 1; j >= 0; j--) { 2137 // it matches a tag 2138 if (s.keywords[j].toLowerCase().match(textRegex)) { 2139 matched = true; 2140 s.matched_tag = j + 1; // add 1 to index position 2141 } 2142 } 2143 // Check if query matches the doc title, but only for current language 2144 if (s.lang == currentLang) { 2145 // if query matches the doc title 2146 if (s.title.toLowerCase().match(textRegex)) { 2147 matched = true; 2148 s.matched_title = 1; 2149 } 2150 } 2151 if (matched) { 2152 gDocsMatches[matchedCountDocs] = s; 2153 matchedCountDocs++; 2154 } 2155 } 2156 2157 2158 // Search for Distribute guides 2159 for (var i=0; i<DISTRIBUTE_RESOURCES.length; i++) { 2160 // current search comparison, with counters for tag and title, 2161 // used later to improve ranking 2162 var s = DISTRIBUTE_RESOURCES[i]; 2163 s.matched_tag = 0; 2164 s.matched_title = 0; 2165 var matched = false; 2166 2167 // Check if query matches any tags; work backwards toward 1 to assist ranking 2168 for (var j = s.keywords.length - 1; j >= 0; j--) { 2169 // it matches a tag 2170 if (s.keywords[j].toLowerCase().match(textRegex)) { 2171 matched = true; 2172 s.matched_tag = j + 1; // add 1 to index position 2173 } 2174 } 2175 // Check if query matches the doc title, but only for current language 2176 if (s.lang == currentLang) { 2177 // if query matches the doc title 2178 if (s.title.toLowerCase().match(textRegex)) { 2179 matched = true; 2180 s.matched_title = 1; 2181 } 2182 } 2183 if (matched) { 2184 gDocsMatches[matchedCountDocs] = s; 2185 matchedCountDocs++; 2186 } 2187 } 2188 2189 2190 // Search for Google guides 2191 for (var i=0; i<GOOGLE_RESOURCES.length; i++) { 2192 // current search comparison, with counters for tag and title, 2193 // used later to improve ranking 2194 var s = GOOGLE_RESOURCES[i]; 2195 s.matched_tag = 0; 2196 s.matched_title = 0; 2197 var matched = false; 2198 2199 // Check if query matches any tags; work backwards toward 1 to assist ranking 2200 for (var j = s.keywords.length - 1; j >= 0; j--) { 2201 // it matches a tag 2202 if (s.keywords[j].toLowerCase().match(textRegex)) { 2203 matched = true; 2204 s.matched_tag = j + 1; // add 1 to index position 2205 } 2206 } 2207 // Check if query matches the doc title, but only for current language 2208 if (s.lang == currentLang) { 2209 // if query matches the doc title 2210 if (s.title.toLowerCase().match(textRegex)) { 2211 matched = true; 2212 s.matched_title = 1; 2213 } 2214 } 2215 if (matched) { 2216 gDocsMatches[matchedCountDocs] = s; 2217 matchedCountDocs++; 2218 } 2219 } 2220 2221 2222 // Search for Samples 2223 for (var i=0; i<SAMPLES_RESOURCES.length; i++) { 2224 // current search comparison, with counters for tag and title, 2225 // used later to improve ranking 2226 var s = SAMPLES_RESOURCES[i]; 2227 s.matched_tag = 0; 2228 s.matched_title = 0; 2229 var matched = false; 2230 // Check if query matches any tags; work backwards toward 1 to assist ranking 2231 for (var j = s.keywords.length - 1; j >= 0; j--) { 2232 // it matches a tag 2233 if (s.keywords[j].toLowerCase().match(textRegex)) { 2234 matched = true; 2235 s.matched_tag = j + 1; // add 1 to index position 2236 } 2237 } 2238 // Check if query matches the doc title, but only for current language 2239 if (s.lang == currentLang) { 2240 // if query matches the doc title.t 2241 if (s.title.toLowerCase().match(textRegex)) { 2242 matched = true; 2243 s.matched_title = 1; 2244 } 2245 } 2246 if (matched) { 2247 gDocsMatches[matchedCountDocs] = s; 2248 matchedCountDocs++; 2249 } 2250 } 2251 2252 // Rank/sort all the matched pages 2253 rank_autocomplete_doc_results(text, gDocsMatches); 2254 } 2255 2256 // draw the suggestions 2257 sync_selection_table(toroot); 2258 return true; // allow the event to bubble up to the search api 2259 } 2260} 2261 2262/* Order the jd doc result list based on match quality */ 2263function rank_autocomplete_doc_results(query, matches) { 2264 query = query || ''; 2265 if (!matches || !matches.length) 2266 return; 2267 2268 var _resultScoreFn = function(match) { 2269 var score = 1.0; 2270 2271 // if the query matched a tag 2272 if (match.matched_tag > 0) { 2273 // multiply score by factor relative to position in tags list (max of 3) 2274 score *= 3 / match.matched_tag; 2275 2276 // if it also matched the title 2277 if (match.matched_title > 0) { 2278 score *= 2; 2279 } 2280 } else if (match.matched_title > 0) { 2281 score *= 3; 2282 } 2283 2284 return score; 2285 }; 2286 2287 for (var i=0; i<matches.length; i++) { 2288 matches[i].__resultScore = _resultScoreFn(matches[i]); 2289 } 2290 2291 matches.sort(function(a,b){ 2292 var n = b.__resultScore - a.__resultScore; 2293 if (n == 0) // lexicographical sort if scores are the same 2294 n = (a.label < b.label) ? -1 : 1; 2295 return n; 2296 }); 2297} 2298 2299/* Order the result list based on match quality */ 2300function rank_autocomplete_api_results(query, matches) { 2301 query = query || ''; 2302 if (!matches || !matches.length) 2303 return; 2304 2305 // helper function that gets the last occurence index of the given regex 2306 // in the given string, or -1 if not found 2307 var _lastSearch = function(s, re) { 2308 if (s == '') 2309 return -1; 2310 var l = -1; 2311 var tmp; 2312 while ((tmp = s.search(re)) >= 0) { 2313 if (l < 0) l = 0; 2314 l += tmp; 2315 s = s.substr(tmp + 1); 2316 } 2317 return l; 2318 }; 2319 2320 // helper function that counts the occurrences of a given character in 2321 // a given string 2322 var _countChar = function(s, c) { 2323 var n = 0; 2324 for (var i=0; i<s.length; i++) 2325 if (s.charAt(i) == c) ++n; 2326 return n; 2327 }; 2328 2329 var queryLower = query.toLowerCase(); 2330 var queryAlnum = (queryLower.match(/\w+/) || [''])[0]; 2331 var partPrefixAlnumRE = new RegExp('\\b' + queryAlnum); 2332 var partExactAlnumRE = new RegExp('\\b' + queryAlnum + '\\b'); 2333 2334 var _resultScoreFn = function(result) { 2335 // scores are calculated based on exact and prefix matches, 2336 // and then number of path separators (dots) from the last 2337 // match (i.e. favoring classes and deep package names) 2338 var score = 1.0; 2339 var labelLower = result.label.toLowerCase(); 2340 var t; 2341 t = _lastSearch(labelLower, partExactAlnumRE); 2342 if (t >= 0) { 2343 // exact part match 2344 var partsAfter = _countChar(labelLower.substr(t + 1), '.'); 2345 score *= 200 / (partsAfter + 1); 2346 } else { 2347 t = _lastSearch(labelLower, partPrefixAlnumRE); 2348 if (t >= 0) { 2349 // part prefix match 2350 var partsAfter = _countChar(labelLower.substr(t + 1), '.'); 2351 score *= 20 / (partsAfter + 1); 2352 } 2353 } 2354 2355 return score; 2356 }; 2357 2358 for (var i=0; i<matches.length; i++) { 2359 // if the API is deprecated, default score is 0; otherwise, perform scoring 2360 if (matches[i].deprecated == "true") { 2361 matches[i].__resultScore = 0; 2362 } else { 2363 matches[i].__resultScore = _resultScoreFn(matches[i]); 2364 } 2365 } 2366 2367 matches.sort(function(a,b){ 2368 var n = b.__resultScore - a.__resultScore; 2369 if (n == 0) // lexicographical sort if scores are the same 2370 n = (a.label < b.label) ? -1 : 1; 2371 return n; 2372 }); 2373} 2374 2375/* Add emphasis to part of string that matches query */ 2376function highlight_autocomplete_result_labels(query) { 2377 query = query || ''; 2378 if ((!gMatches || !gMatches.length) && (!gGoogleMatches || !gGoogleMatches.length)) 2379 return; 2380 2381 var queryLower = query.toLowerCase(); 2382 var queryAlnumDot = (queryLower.match(/[\w\.]+/) || [''])[0]; 2383 var queryRE = new RegExp( 2384 '(' + queryAlnumDot.replace(/\./g, '\\.') + ')', 'ig'); 2385 for (var i=0; i<gMatches.length; i++) { 2386 gMatches[i].__hilabel = gMatches[i].label.replace( 2387 queryRE, '<b>$1</b>'); 2388 } 2389 for (var i=0; i<gGoogleMatches.length; i++) { 2390 gGoogleMatches[i].__hilabel = gGoogleMatches[i].label.replace( 2391 queryRE, '<b>$1</b>'); 2392 } 2393} 2394 2395function search_focus_changed(obj, focused) 2396{ 2397 if (!focused) { 2398 if(obj.value == ""){ 2399 $(".search .close").addClass("hide"); 2400 } 2401 $(".suggest-card").hide(); 2402 } 2403} 2404 2405function submit_search() { 2406 var query = document.getElementById('search_autocomplete').value; 2407 location.hash = 'q=' + query; 2408 loadSearchResults(); 2409 $("#searchResults").slideDown('slow', setStickyTop); 2410 return false; 2411} 2412 2413 2414function hideResults() { 2415 $("#searchResults").slideUp('fast', setStickyTop); 2416 $(".search .close").addClass("hide"); 2417 location.hash = ''; 2418 2419 $("#search_autocomplete").val("").blur(); 2420 2421 // reset the ajax search callback to nothing, so results don't appear unless ENTER 2422 searchControl.setSearchStartingCallback(this, function(control, searcher, query) {}); 2423 2424 // forcefully regain key-up event control (previously jacked by search api) 2425 $("#search_autocomplete").keyup(function(event) { 2426 return search_changed(event, false, toRoot); 2427 }); 2428 2429 return false; 2430} 2431 2432 2433 2434/* ########################################################## */ 2435/* ################ CUSTOM SEARCH ENGINE ################## */ 2436/* ########################################################## */ 2437 2438var searchControl; 2439google.load('search', '1', {"callback" : function() { 2440 searchControl = new google.search.SearchControl(); 2441 } }); 2442 2443function loadSearchResults() { 2444 document.getElementById("search_autocomplete").style.color = "#000"; 2445 2446 searchControl = new google.search.SearchControl(); 2447 2448 // use our existing search form and use tabs when multiple searchers are used 2449 drawOptions = new google.search.DrawOptions(); 2450 drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED); 2451 drawOptions.setInput(document.getElementById("search_autocomplete")); 2452 2453 // configure search result options 2454 searchOptions = new google.search.SearcherOptions(); 2455 searchOptions.setExpandMode(GSearchControl.EXPAND_MODE_OPEN); 2456 2457 // configure each of the searchers, for each tab 2458 devSiteSearcher = new google.search.WebSearch(); 2459 devSiteSearcher.setUserDefinedLabel("All"); 2460 devSiteSearcher.setSiteRestriction("001482626316274216503:zu90b7s047u"); 2461 2462 designSearcher = new google.search.WebSearch(); 2463 designSearcher.setUserDefinedLabel("Design"); 2464 designSearcher.setSiteRestriction("http://developer.android.com/design/"); 2465 2466 trainingSearcher = new google.search.WebSearch(); 2467 trainingSearcher.setUserDefinedLabel("Training"); 2468 trainingSearcher.setSiteRestriction("http://developer.android.com/training/"); 2469 2470 guidesSearcher = new google.search.WebSearch(); 2471 guidesSearcher.setUserDefinedLabel("Guides"); 2472 guidesSearcher.setSiteRestriction("http://developer.android.com/guide/"); 2473 2474 referenceSearcher = new google.search.WebSearch(); 2475 referenceSearcher.setUserDefinedLabel("Reference"); 2476 referenceSearcher.setSiteRestriction("http://developer.android.com/reference/"); 2477 2478 googleSearcher = new google.search.WebSearch(); 2479 googleSearcher.setUserDefinedLabel("Google Services"); 2480 googleSearcher.setSiteRestriction("http://developer.android.com/google/"); 2481 2482 blogSearcher = new google.search.WebSearch(); 2483 blogSearcher.setUserDefinedLabel("Blog"); 2484 blogSearcher.setSiteRestriction("http://android-developers.blogspot.com"); 2485 2486 // add each searcher to the search control 2487 searchControl.addSearcher(devSiteSearcher, searchOptions); 2488 searchControl.addSearcher(designSearcher, searchOptions); 2489 searchControl.addSearcher(trainingSearcher, searchOptions); 2490 searchControl.addSearcher(guidesSearcher, searchOptions); 2491 searchControl.addSearcher(referenceSearcher, searchOptions); 2492 searchControl.addSearcher(googleSearcher, searchOptions); 2493 searchControl.addSearcher(blogSearcher, searchOptions); 2494 2495 // configure result options 2496 searchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET); 2497 searchControl.setLinkTarget(google.search.Search.LINK_TARGET_SELF); 2498 searchControl.setTimeoutInterval(google.search.SearchControl.TIMEOUT_SHORT); 2499 searchControl.setNoResultsString(google.search.SearchControl.NO_RESULTS_DEFAULT_STRING); 2500 2501 // upon ajax search, refresh the url and search title 2502 searchControl.setSearchStartingCallback(this, function(control, searcher, query) { 2503 updateResultTitle(query); 2504 var query = document.getElementById('search_autocomplete').value; 2505 location.hash = 'q=' + query; 2506 }); 2507 2508 // once search results load, set up click listeners 2509 searchControl.setSearchCompleteCallback(this, function(control, searcher, query) { 2510 addResultClickListeners(); 2511 }); 2512 2513 // draw the search results box 2514 searchControl.draw(document.getElementById("leftSearchControl"), drawOptions); 2515 2516 // get query and execute the search 2517 searchControl.execute(decodeURI(getQuery(location.hash))); 2518 2519 document.getElementById("search_autocomplete").focus(); 2520 addTabListeners(); 2521} 2522// End of loadSearchResults 2523 2524 2525google.setOnLoadCallback(function(){ 2526 if (location.hash.indexOf("q=") == -1) { 2527 // if there's no query in the url, don't search and make sure results are hidden 2528 $('#searchResults').hide(); 2529 return; 2530 } else { 2531 // first time loading search results for this page 2532 $('#searchResults').slideDown('slow', setStickyTop); 2533 $(".search .close").removeClass("hide"); 2534 loadSearchResults(); 2535 } 2536}, true); 2537 2538/* Adjust the scroll position to account for sticky header, only if the hash matches an id. 2539 This does not handle <a name=""> tags. Some CSS fixes those, but only for reference docs. */ 2540function offsetScrollForSticky() { 2541 var hash = escape(location.hash.substr(1)); 2542 var $matchingElement = $("#"+hash); 2543 // Sanity check that hash is a real hash and that there's an element with that ID on the page 2544 if ((hash.indexOf("#") == 0) && $matchingElement.length) { 2545 // If the position of the target element is near the top of the page (<20px, where we expect it 2546 // to be because we need to move it down 60px to become in view), then move it down 60px 2547 if (Math.abs($matchingElement.offset().top - $(window).scrollTop()) < 20) { 2548 $(window).scrollTop($(window).scrollTop() - 60); 2549 } 2550 } 2551} 2552 2553// when an event on the browser history occurs (back, forward, load) requery hash and do search 2554$(window).hashchange( function(){ 2555 // If the hash isn't a search query or there's an error in the query, 2556 // then adjust the scroll position to account for sticky header, then exit. 2557 if ((location.hash.indexOf("q=") == -1) || (query == "undefined")) { 2558 // If the results pane is open, close it. 2559 if (!$("#searchResults").is(":hidden")) { 2560 hideResults(); 2561 } 2562 offsetScrollForSticky(); 2563 return; 2564 } 2565 2566 // Otherwise, we have a search to do 2567 var query = decodeURI(getQuery(location.hash)); 2568 searchControl.execute(query); 2569 $('#searchResults').slideDown('slow', setStickyTop); 2570 $("#search_autocomplete").focus(); 2571 $(".search .close").removeClass("hide"); 2572 2573 updateResultTitle(query); 2574}); 2575 2576function updateResultTitle(query) { 2577 $("#searchTitle").html("Results for <em>" + escapeHTML(query) + "</em>"); 2578} 2579 2580// forcefully regain key-up event control (previously jacked by search api) 2581$("#search_autocomplete").keyup(function(event) { 2582 return search_changed(event, false, toRoot); 2583}); 2584 2585// add event listeners to each tab so we can track the browser history 2586function addTabListeners() { 2587 var tabHeaders = $(".gsc-tabHeader"); 2588 for (var i = 0; i < tabHeaders.length; i++) { 2589 $(tabHeaders[i]).attr("id",i).click(function() { 2590 /* 2591 // make a copy of the page numbers for the search left pane 2592 setTimeout(function() { 2593 // remove any residual page numbers 2594 $('#searchResults .gsc-tabsArea .gsc-cursor-box.gs-bidi-start-align').remove(); 2595 // move the page numbers to the left position; make a clone, 2596 // because the element is drawn to the DOM only once 2597 // and because we're going to remove it (previous line), 2598 // we need it to be available to move again as the user navigates 2599 $('#searchResults .gsc-webResult .gsc-cursor-box.gs-bidi-start-align:visible') 2600 .clone().appendTo('#searchResults .gsc-tabsArea'); 2601 }, 200); 2602 */ 2603 }); 2604 } 2605 setTimeout(function(){$(tabHeaders[0]).click()},200); 2606} 2607 2608// add analytics tracking events to each result link 2609function addResultClickListeners() { 2610 $("#searchResults a.gs-title").each(function(index, link) { 2611 // When user clicks enter for Google search results, track it 2612 $(link).click(function() { 2613 ga('send', 'event', 'Google Click', 'clicked: ' + $(this).text(), 2614 'from: ' + $("#search_autocomplete").val()); 2615 }); 2616 }); 2617} 2618 2619 2620function getQuery(hash) { 2621 var queryParts = hash.split('='); 2622 return queryParts[1]; 2623} 2624 2625/* returns the given string with all HTML brackets converted to entities 2626 TODO: move this to the site's JS library */ 2627function escapeHTML(string) { 2628 return string.replace(/</g,"<") 2629 .replace(/>/g,">"); 2630} 2631 2632 2633 2634 2635 2636 2637 2638/* ######################################################## */ 2639/* ################# JAVADOC REFERENCE ################### */ 2640/* ######################################################## */ 2641 2642/* Initialize some droiddoc stuff, but only if we're in the reference */ 2643if (location.pathname.indexOf("/reference") == 0) { 2644 if(!(location.pathname.indexOf("/reference-gms/packages.html") == 0) 2645 && !(location.pathname.indexOf("/reference-gcm/packages.html") == 0) 2646 && !(location.pathname.indexOf("/reference/com/google") == 0)) { 2647 $(document).ready(function() { 2648 // init available apis based on user pref 2649 changeApiLevel(); 2650 initSidenavHeightResize() 2651 }); 2652 } 2653} 2654 2655var API_LEVEL_COOKIE = "api_level"; 2656var minLevel = 1; 2657var maxLevel = 1; 2658 2659/******* SIDENAV DIMENSIONS ************/ 2660 2661 function initSidenavHeightResize() { 2662 // Change the drag bar size to nicely fit the scrollbar positions 2663 var $dragBar = $(".ui-resizable-s"); 2664 $dragBar.css({'width': $dragBar.parent().width() - 5 + "px"}); 2665 2666 $( "#resize-packages-nav" ).resizable({ 2667 containment: "#nav-panels", 2668 handles: "s", 2669 alsoResize: "#packages-nav", 2670 resize: function(event, ui) { resizeNav(); }, /* resize the nav while dragging */ 2671 stop: function(event, ui) { saveNavPanels(); } /* once stopped, save the sizes to cookie */ 2672 }); 2673 2674 } 2675 2676function updateSidenavFixedWidth() { 2677 if (!sticky) return; 2678 $('#devdoc-nav').css({ 2679 'width' : $('#side-nav').css('width'), 2680 'margin' : $('#side-nav').css('margin') 2681 }); 2682 $('#devdoc-nav a.totop').css({'display':'block','width':$("#nav").innerWidth()+'px'}); 2683 2684 initSidenavHeightResize(); 2685} 2686 2687function updateSidenavFullscreenWidth() { 2688 if (!sticky) return; 2689 $('#devdoc-nav').css({ 2690 'width' : $('#side-nav').css('width'), 2691 'margin' : $('#side-nav').css('margin') 2692 }); 2693 $('#devdoc-nav .totop').css({'left': 'inherit'}); 2694 2695 initSidenavHeightResize(); 2696} 2697 2698function buildApiLevelSelector() { 2699 maxLevel = SINCE_DATA.length; 2700 var userApiLevel = parseInt(readCookie(API_LEVEL_COOKIE)); 2701 userApiLevel = userApiLevel == 0 ? maxLevel : userApiLevel; // If there's no cookie (zero), use the max by default 2702 2703 minLevel = parseInt($("#doc-api-level").attr("class")); 2704 // Handle provisional api levels; the provisional level will always be the highest possible level 2705 // Provisional api levels will also have a length; other stuff that's just missing a level won't, 2706 // so leave those kinds of entities at the default level of 1 (for example, the R.styleable class) 2707 if (isNaN(minLevel) && minLevel.length) { 2708 minLevel = maxLevel; 2709 } 2710 var select = $("#apiLevelSelector").html("").change(changeApiLevel); 2711 for (var i = maxLevel-1; i >= 0; i--) { 2712 var option = $("<option />").attr("value",""+SINCE_DATA[i]).append(""+SINCE_DATA[i]); 2713 // if (SINCE_DATA[i] < minLevel) option.addClass("absent"); // always false for strings (codenames) 2714 select.append(option); 2715 } 2716 2717 // get the DOM element and use setAttribute cuz IE6 fails when using jquery .attr('selected',true) 2718 var selectedLevelItem = $("#apiLevelSelector option[value='"+userApiLevel+"']").get(0); 2719 selectedLevelItem.setAttribute('selected',true); 2720} 2721 2722function changeApiLevel() { 2723 maxLevel = SINCE_DATA.length; 2724 var selectedLevel = maxLevel; 2725 2726 selectedLevel = parseInt($("#apiLevelSelector option:selected").val()); 2727 toggleVisisbleApis(selectedLevel, "body"); 2728 2729 var date = new Date(); 2730 date.setTime(date.getTime()+(10*365*24*60*60*1000)); // keep this for 10 years 2731 var expiration = date.toGMTString(); 2732 writeCookie(API_LEVEL_COOKIE, selectedLevel, null, expiration); 2733 2734 if (selectedLevel < minLevel) { 2735 var thing = ($("#jd-header").html().indexOf("package") != -1) ? "package" : "class"; 2736 $("#naMessage").show().html("<div><p><strong>This " + thing 2737 + " requires API level " + minLevel + " or higher.</strong></p>" 2738 + "<p>This document is hidden because your selected API level for the documentation is " 2739 + selectedLevel + ". You can change the documentation API level with the selector " 2740 + "above the left navigation.</p>" 2741 + "<p>For more information about specifying the API level your app requires, " 2742 + "read <a href='" + toRoot + "training/basics/supporting-devices/platforms.html'" 2743 + ">Supporting Different Platform Versions</a>.</p>" 2744 + "<input type='button' value='OK, make this page visible' " 2745 + "title='Change the API level to " + minLevel + "' " 2746 + "onclick='$(\"#apiLevelSelector\").val(\"" + minLevel + "\");changeApiLevel();' />" 2747 + "</div>"); 2748 } else { 2749 $("#naMessage").hide(); 2750 } 2751} 2752 2753function toggleVisisbleApis(selectedLevel, context) { 2754 var apis = $(".api",context); 2755 apis.each(function(i) { 2756 var obj = $(this); 2757 var className = obj.attr("class"); 2758 var apiLevelIndex = className.lastIndexOf("-")+1; 2759 var apiLevelEndIndex = className.indexOf(" ", apiLevelIndex); 2760 apiLevelEndIndex = apiLevelEndIndex != -1 ? apiLevelEndIndex : className.length; 2761 var apiLevel = className.substring(apiLevelIndex, apiLevelEndIndex); 2762 if (apiLevel.length == 0) { // for odd cases when the since data is actually missing, just bail 2763 return; 2764 } 2765 apiLevel = parseInt(apiLevel); 2766 2767 // Handle provisional api levels; if this item's level is the provisional one, set it to the max 2768 var selectedLevelNum = parseInt(selectedLevel) 2769 var apiLevelNum = parseInt(apiLevel); 2770 if (isNaN(apiLevelNum)) { 2771 apiLevelNum = maxLevel; 2772 } 2773 2774 // Grey things out that aren't available and give a tooltip title 2775 if (apiLevelNum > selectedLevelNum) { 2776 obj.addClass("absent").attr("title","Requires API Level \"" 2777 + apiLevel + "\" or higher. To reveal, change the target API level " 2778 + "above the left navigation."); 2779 } 2780 else obj.removeClass("absent").removeAttr("title"); 2781 }); 2782} 2783 2784 2785 2786 2787/* ################# SIDENAV TREE VIEW ################### */ 2788 2789function new_node(me, mom, text, link, children_data, api_level) 2790{ 2791 var node = new Object(); 2792 node.children = Array(); 2793 node.children_data = children_data; 2794 node.depth = mom.depth + 1; 2795 2796 node.li = document.createElement("li"); 2797 mom.get_children_ul().appendChild(node.li); 2798 2799 node.label_div = document.createElement("div"); 2800 node.label_div.className = "label"; 2801 if (api_level != null) { 2802 $(node.label_div).addClass("api"); 2803 $(node.label_div).addClass("api-level-"+api_level); 2804 } 2805 node.li.appendChild(node.label_div); 2806 2807 if (children_data != null) { 2808 node.expand_toggle = document.createElement("a"); 2809 node.expand_toggle.href = "javascript:void(0)"; 2810 node.expand_toggle.onclick = function() { 2811 if (node.expanded) { 2812 $(node.get_children_ul()).slideUp("fast"); 2813 node.plus_img.src = me.toroot + "assets/images/triangle-closed-small.png"; 2814 node.expanded = false; 2815 } else { 2816 expand_node(me, node); 2817 } 2818 }; 2819 node.label_div.appendChild(node.expand_toggle); 2820 2821 node.plus_img = document.createElement("img"); 2822 node.plus_img.src = me.toroot + "assets/images/triangle-closed-small.png"; 2823 node.plus_img.className = "plus"; 2824 node.plus_img.width = "8"; 2825 node.plus_img.border = "0"; 2826 node.expand_toggle.appendChild(node.plus_img); 2827 2828 node.expanded = false; 2829 } 2830 2831 var a = document.createElement("a"); 2832 node.label_div.appendChild(a); 2833 node.label = document.createTextNode(text); 2834 a.appendChild(node.label); 2835 if (link) { 2836 a.href = me.toroot + link; 2837 } else { 2838 if (children_data != null) { 2839 a.className = "nolink"; 2840 a.href = "javascript:void(0)"; 2841 a.onclick = node.expand_toggle.onclick; 2842 // This next line shouldn't be necessary. I'll buy a beer for the first 2843 // person who figures out how to remove this line and have the link 2844 // toggle shut on the first try. --joeo@android.com 2845 node.expanded = false; 2846 } 2847 } 2848 2849 2850 node.children_ul = null; 2851 node.get_children_ul = function() { 2852 if (!node.children_ul) { 2853 node.children_ul = document.createElement("ul"); 2854 node.children_ul.className = "children_ul"; 2855 node.children_ul.style.display = "none"; 2856 node.li.appendChild(node.children_ul); 2857 } 2858 return node.children_ul; 2859 }; 2860 2861 return node; 2862} 2863 2864 2865 2866 2867function expand_node(me, node) 2868{ 2869 if (node.children_data && !node.expanded) { 2870 if (node.children_visited) { 2871 $(node.get_children_ul()).slideDown("fast"); 2872 } else { 2873 get_node(me, node); 2874 if ($(node.label_div).hasClass("absent")) { 2875 $(node.get_children_ul()).addClass("absent"); 2876 } 2877 $(node.get_children_ul()).slideDown("fast"); 2878 } 2879 node.plus_img.src = me.toroot + "assets/images/triangle-opened-small.png"; 2880 node.expanded = true; 2881 2882 // perform api level toggling because new nodes are new to the DOM 2883 var selectedLevel = $("#apiLevelSelector option:selected").val(); 2884 toggleVisisbleApis(selectedLevel, "#side-nav"); 2885 } 2886} 2887 2888function get_node(me, mom) 2889{ 2890 mom.children_visited = true; 2891 for (var i in mom.children_data) { 2892 var node_data = mom.children_data[i]; 2893 mom.children[i] = new_node(me, mom, node_data[0], node_data[1], 2894 node_data[2], node_data[3]); 2895 } 2896} 2897 2898function this_page_relative(toroot) 2899{ 2900 var full = document.location.pathname; 2901 var file = ""; 2902 if (toroot.substr(0, 1) == "/") { 2903 if (full.substr(0, toroot.length) == toroot) { 2904 return full.substr(toroot.length); 2905 } else { 2906 // the file isn't under toroot. Fail. 2907 return null; 2908 } 2909 } else { 2910 if (toroot != "./") { 2911 toroot = "./" + toroot; 2912 } 2913 do { 2914 if (toroot.substr(toroot.length-3, 3) == "../" || toroot == "./") { 2915 var pos = full.lastIndexOf("/"); 2916 file = full.substr(pos) + file; 2917 full = full.substr(0, pos); 2918 toroot = toroot.substr(0, toroot.length-3); 2919 } 2920 } while (toroot != "" && toroot != "/"); 2921 return file.substr(1); 2922 } 2923} 2924 2925function find_page(url, data) 2926{ 2927 var nodes = data; 2928 var result = null; 2929 for (var i in nodes) { 2930 var d = nodes[i]; 2931 if (d[1] == url) { 2932 return new Array(i); 2933 } 2934 else if (d[2] != null) { 2935 result = find_page(url, d[2]); 2936 if (result != null) { 2937 return (new Array(i).concat(result)); 2938 } 2939 } 2940 } 2941 return null; 2942} 2943 2944function init_default_navtree(toroot) { 2945 // load json file for navtree data 2946 $.getScript(toRoot + 'navtree_data.js', function(data, textStatus, jqxhr) { 2947 // when the file is loaded, initialize the tree 2948 if(jqxhr.status === 200) { 2949 init_navtree("tree-list", toroot, NAVTREE_DATA); 2950 } 2951 }); 2952 2953 // perform api level toggling because because the whole tree is new to the DOM 2954 var selectedLevel = $("#apiLevelSelector option:selected").val(); 2955 toggleVisisbleApis(selectedLevel, "#side-nav"); 2956} 2957 2958function init_navtree(navtree_id, toroot, root_nodes) 2959{ 2960 var me = new Object(); 2961 me.toroot = toroot; 2962 me.node = new Object(); 2963 2964 me.node.li = document.getElementById(navtree_id); 2965 me.node.children_data = root_nodes; 2966 me.node.children = new Array(); 2967 me.node.children_ul = document.createElement("ul"); 2968 me.node.get_children_ul = function() { return me.node.children_ul; }; 2969 //me.node.children_ul.className = "children_ul"; 2970 me.node.li.appendChild(me.node.children_ul); 2971 me.node.depth = 0; 2972 2973 get_node(me, me.node); 2974 2975 me.this_page = this_page_relative(toroot); 2976 me.breadcrumbs = find_page(me.this_page, root_nodes); 2977 if (me.breadcrumbs != null && me.breadcrumbs.length != 0) { 2978 var mom = me.node; 2979 for (var i in me.breadcrumbs) { 2980 var j = me.breadcrumbs[i]; 2981 mom = mom.children[j]; 2982 expand_node(me, mom); 2983 } 2984 mom.label_div.className = mom.label_div.className + " selected"; 2985 addLoadEvent(function() { 2986 scrollIntoView("nav-tree"); 2987 }); 2988 } 2989} 2990 2991 2992 2993 2994 2995 2996 2997 2998/* TODO: eliminate redundancy with non-google functions */ 2999function init_google_navtree(navtree_id, toroot, root_nodes) 3000{ 3001 var me = new Object(); 3002 me.toroot = toroot; 3003 me.node = new Object(); 3004 3005 me.node.li = document.getElementById(navtree_id); 3006 me.node.children_data = root_nodes; 3007 me.node.children = new Array(); 3008 me.node.children_ul = document.createElement("ul"); 3009 me.node.get_children_ul = function() { return me.node.children_ul; }; 3010 //me.node.children_ul.className = "children_ul"; 3011 me.node.li.appendChild(me.node.children_ul); 3012 me.node.depth = 0; 3013 3014 get_google_node(me, me.node); 3015} 3016 3017function new_google_node(me, mom, text, link, children_data, api_level) 3018{ 3019 var node = new Object(); 3020 var child; 3021 node.children = Array(); 3022 node.children_data = children_data; 3023 node.depth = mom.depth + 1; 3024 node.get_children_ul = function() { 3025 if (!node.children_ul) { 3026 node.children_ul = document.createElement("ul"); 3027 node.children_ul.className = "tree-list-children"; 3028 node.li.appendChild(node.children_ul); 3029 } 3030 return node.children_ul; 3031 }; 3032 node.li = document.createElement("li"); 3033 3034 mom.get_children_ul().appendChild(node.li); 3035 3036 3037 if(link) { 3038 child = document.createElement("a"); 3039 3040 } 3041 else { 3042 child = document.createElement("span"); 3043 child.className = "tree-list-subtitle"; 3044 3045 } 3046 if (children_data != null) { 3047 node.li.className="nav-section"; 3048 node.label_div = document.createElement("div"); 3049 node.label_div.className = "nav-section-header-ref"; 3050 node.li.appendChild(node.label_div); 3051 get_google_node(me, node); 3052 node.label_div.appendChild(child); 3053 } 3054 else { 3055 node.li.appendChild(child); 3056 } 3057 if(link) { 3058 child.href = me.toroot + link; 3059 } 3060 node.label = document.createTextNode(text); 3061 child.appendChild(node.label); 3062 3063 node.children_ul = null; 3064 3065 return node; 3066} 3067 3068function get_google_node(me, mom) 3069{ 3070 mom.children_visited = true; 3071 var linkText; 3072 for (var i in mom.children_data) { 3073 var node_data = mom.children_data[i]; 3074 linkText = node_data[0]; 3075 3076 if(linkText.match("^"+"com.google.android")=="com.google.android"){ 3077 linkText = linkText.substr(19, linkText.length); 3078 } 3079 mom.children[i] = new_google_node(me, mom, linkText, node_data[1], 3080 node_data[2], node_data[3]); 3081 } 3082} 3083 3084 3085 3086 3087 3088 3089/****** NEW version of script to build google and sample navs dynamically ******/ 3090// TODO: update Google reference docs to tolerate this new implementation 3091 3092var NODE_NAME = 0; 3093var NODE_HREF = 1; 3094var NODE_GROUP = 2; 3095var NODE_TAGS = 3; 3096var NODE_CHILDREN = 4; 3097 3098function init_google_navtree2(navtree_id, data) 3099{ 3100 var $containerUl = $("#"+navtree_id); 3101 for (var i in data) { 3102 var node_data = data[i]; 3103 $containerUl.append(new_google_node2(node_data)); 3104 } 3105 3106 // Make all third-generation list items 'sticky' to prevent them from collapsing 3107 $containerUl.find('li li li.nav-section').addClass('sticky'); 3108 3109 initExpandableNavItems("#"+navtree_id); 3110} 3111 3112function new_google_node2(node_data) 3113{ 3114 var linkText = node_data[NODE_NAME]; 3115 if(linkText.match("^"+"com.google.android")=="com.google.android"){ 3116 linkText = linkText.substr(19, linkText.length); 3117 } 3118 var $li = $('<li>'); 3119 var $a; 3120 if (node_data[NODE_HREF] != null) { 3121 $a = $('<a href="' + toRoot + node_data[NODE_HREF] + '" title="' + linkText + '" >' 3122 + linkText + '</a>'); 3123 } else { 3124 $a = $('<a href="#" onclick="return false;" title="' + linkText + '" >' 3125 + linkText + '/</a>'); 3126 } 3127 var $childUl = $('<ul>'); 3128 if (node_data[NODE_CHILDREN] != null) { 3129 $li.addClass("nav-section"); 3130 $a = $('<div class="nav-section-header">').append($a); 3131 if (node_data[NODE_HREF] == null) $a.addClass('empty'); 3132 3133 for (var i in node_data[NODE_CHILDREN]) { 3134 var child_node_data = node_data[NODE_CHILDREN][i]; 3135 $childUl.append(new_google_node2(child_node_data)); 3136 } 3137 $li.append($childUl); 3138 } 3139 $li.prepend($a); 3140 3141 return $li; 3142} 3143 3144 3145 3146 3147 3148 3149 3150 3151 3152 3153 3154function showGoogleRefTree() { 3155 init_default_google_navtree(toRoot); 3156 init_default_gcm_navtree(toRoot); 3157} 3158 3159function init_default_google_navtree(toroot) { 3160 // load json file for navtree data 3161 $.getScript(toRoot + 'gms_navtree_data.js', function(data, textStatus, jqxhr) { 3162 // when the file is loaded, initialize the tree 3163 if(jqxhr.status === 200) { 3164 init_google_navtree("gms-tree-list", toroot, GMS_NAVTREE_DATA); 3165 highlightSidenav(); 3166 resizeNav(); 3167 } 3168 }); 3169} 3170 3171function init_default_gcm_navtree(toroot) { 3172 // load json file for navtree data 3173 $.getScript(toRoot + 'gcm_navtree_data.js', function(data, textStatus, jqxhr) { 3174 // when the file is loaded, initialize the tree 3175 if(jqxhr.status === 200) { 3176 init_google_navtree("gcm-tree-list", toroot, GCM_NAVTREE_DATA); 3177 highlightSidenav(); 3178 resizeNav(); 3179 } 3180 }); 3181} 3182 3183function showSamplesRefTree() { 3184 init_default_samples_navtree(toRoot); 3185} 3186 3187function init_default_samples_navtree(toroot) { 3188 // load json file for navtree data 3189 $.getScript(toRoot + 'samples_navtree_data.js', function(data, textStatus, jqxhr) { 3190 // when the file is loaded, initialize the tree 3191 if(jqxhr.status === 200) { 3192 // hack to remove the "about the samples" link then put it back in 3193 // after we nuke the list to remove the dummy static list of samples 3194 var $firstLi = $("#nav.samples-nav > li:first-child").clone(); 3195 $("#nav.samples-nav").empty(); 3196 $("#nav.samples-nav").append($firstLi); 3197 3198 init_google_navtree2("nav.samples-nav", SAMPLES_NAVTREE_DATA); 3199 highlightSidenav(); 3200 resizeNav(); 3201 if ($("#jd-content #samples").length) { 3202 showSamples(); 3203 } 3204 } 3205 }); 3206} 3207 3208/* TOGGLE INHERITED MEMBERS */ 3209 3210/* Toggle an inherited class (arrow toggle) 3211 * @param linkObj The link that was clicked. 3212 * @param expand 'true' to ensure it's expanded. 'false' to ensure it's closed. 3213 * 'null' to simply toggle. 3214 */ 3215function toggleInherited(linkObj, expand) { 3216 var base = linkObj.getAttribute("id"); 3217 var list = document.getElementById(base + "-list"); 3218 var summary = document.getElementById(base + "-summary"); 3219 var trigger = document.getElementById(base + "-trigger"); 3220 var a = $(linkObj); 3221 if ( (expand == null && a.hasClass("closed")) || expand ) { 3222 list.style.display = "none"; 3223 summary.style.display = "block"; 3224 trigger.src = toRoot + "assets/images/triangle-opened.png"; 3225 a.removeClass("closed"); 3226 a.addClass("opened"); 3227 } else if ( (expand == null && a.hasClass("opened")) || (expand == false) ) { 3228 list.style.display = "block"; 3229 summary.style.display = "none"; 3230 trigger.src = toRoot + "assets/images/triangle-closed.png"; 3231 a.removeClass("opened"); 3232 a.addClass("closed"); 3233 } 3234 return false; 3235} 3236 3237/* Toggle all inherited classes in a single table (e.g. all inherited methods) 3238 * @param linkObj The link that was clicked. 3239 * @param expand 'true' to ensure it's expanded. 'false' to ensure it's closed. 3240 * 'null' to simply toggle. 3241 */ 3242function toggleAllInherited(linkObj, expand) { 3243 var a = $(linkObj); 3244 var table = $(a.parent().parent().parent()); // ugly way to get table/tbody 3245 var expandos = $(".jd-expando-trigger", table); 3246 if ( (expand == null && a.text() == "[Expand]") || expand ) { 3247 expandos.each(function(i) { 3248 toggleInherited(this, true); 3249 }); 3250 a.text("[Collapse]"); 3251 } else if ( (expand == null && a.text() == "[Collapse]") || (expand == false) ) { 3252 expandos.each(function(i) { 3253 toggleInherited(this, false); 3254 }); 3255 a.text("[Expand]"); 3256 } 3257 return false; 3258} 3259 3260/* Toggle all inherited members in the class (link in the class title) 3261 */ 3262function toggleAllClassInherited() { 3263 var a = $("#toggleAllClassInherited"); // get toggle link from class title 3264 var toggles = $(".toggle-all", $("#body-content")); 3265 if (a.text() == "[Expand All]") { 3266 toggles.each(function(i) { 3267 toggleAllInherited(this, true); 3268 }); 3269 a.text("[Collapse All]"); 3270 } else { 3271 toggles.each(function(i) { 3272 toggleAllInherited(this, false); 3273 }); 3274 a.text("[Expand All]"); 3275 } 3276 return false; 3277} 3278 3279/* Expand all inherited members in the class. Used when initiating page search */ 3280function ensureAllInheritedExpanded() { 3281 var toggles = $(".toggle-all", $("#body-content")); 3282 toggles.each(function(i) { 3283 toggleAllInherited(this, true); 3284 }); 3285 $("#toggleAllClassInherited").text("[Collapse All]"); 3286} 3287 3288 3289/* HANDLE KEY EVENTS 3290 * - Listen for Ctrl+F (Cmd on Mac) and expand all inherited members (to aid page search) 3291 */ 3292var agent = navigator['userAgent'].toLowerCase(); 3293var mac = agent.indexOf("macintosh") != -1; 3294 3295$(document).keydown( function(e) { 3296var control = mac ? e.metaKey && !e.ctrlKey : e.ctrlKey; // get ctrl key 3297 if (control && e.which == 70) { // 70 is "F" 3298 ensureAllInheritedExpanded(); 3299 } 3300}); 3301 3302 3303 3304 3305 3306 3307/* On-demand functions */ 3308 3309/** Move sample code line numbers out of PRE block and into non-copyable column */ 3310function initCodeLineNumbers() { 3311 var numbers = $("#codesample-block a.number"); 3312 if (numbers.length) { 3313 $("#codesample-line-numbers").removeClass("hidden").append(numbers); 3314 } 3315 3316 $(document).ready(function() { 3317 // select entire line when clicked 3318 $("span.code-line").click(function() { 3319 if (!shifted) { 3320 selectText(this); 3321 } 3322 }); 3323 // invoke line link on double click 3324 $(".code-line").dblclick(function() { 3325 document.location.hash = $(this).attr('id'); 3326 }); 3327 // highlight the line when hovering on the number 3328 $("#codesample-line-numbers a.number").mouseover(function() { 3329 var id = $(this).attr('href'); 3330 $(id).css('background','#e7e7e7'); 3331 }); 3332 $("#codesample-line-numbers a.number").mouseout(function() { 3333 var id = $(this).attr('href'); 3334 $(id).css('background','none'); 3335 }); 3336 }); 3337} 3338 3339// create SHIFT key binder to avoid the selectText method when selecting multiple lines 3340var shifted = false; 3341$(document).bind('keyup keydown', function(e){shifted = e.shiftKey; return true;} ); 3342 3343// courtesy of jasonedelman.com 3344function selectText(element) { 3345 var doc = document 3346 , range, selection 3347 ; 3348 if (doc.body.createTextRange) { //ms 3349 range = doc.body.createTextRange(); 3350 range.moveToElementText(element); 3351 range.select(); 3352 } else if (window.getSelection) { //all others 3353 selection = window.getSelection(); 3354 range = doc.createRange(); 3355 range.selectNodeContents(element); 3356 selection.removeAllRanges(); 3357 selection.addRange(range); 3358 } 3359} 3360 3361 3362 3363 3364/** Display links and other information about samples that match the 3365 group specified by the URL */ 3366function showSamples() { 3367 var group = $("#samples").attr('class'); 3368 $("#samples").html("<p>Here are some samples for <b>" + group + "</b> apps:</p>"); 3369 3370 var $ul = $("<ul>"); 3371 $selectedLi = $("#nav li.selected"); 3372 3373 $selectedLi.children("ul").children("li").each(function() { 3374 var $li = $("<li>").append($(this).find("a").first().clone()); 3375 $ul.append($li); 3376 }); 3377 3378 $("#samples").append($ul); 3379 3380} 3381 3382 3383 3384/* ########################################################## */ 3385/* ################### RESOURCE CARDS ##################### */ 3386/* ########################################################## */ 3387 3388/** Handle resource queries, collections, and grids (sections). Requires 3389 jd_tag_helpers.js and the *_unified_data.js to be loaded. */ 3390 3391(function() { 3392 // Prevent the same resource from being loaded more than once per page. 3393 var addedPageResources = {}; 3394 3395 $(document).ready(function() { 3396 $('.resource-widget').each(function() { 3397 initResourceWidget(this); 3398 }); 3399 3400 /* Pass the line height to ellipsisfade() to adjust the height of the 3401 text container to show the max number of lines possible, without 3402 showing lines that are cut off. This works with the css ellipsis 3403 classes to fade last text line and apply an ellipsis char. */ 3404 3405 //card text currently uses 15px line height. 3406 var lineHeight = 15; 3407 $('.card-info .text').ellipsisfade(lineHeight); 3408 }); 3409 3410 /* 3411 Three types of resource layouts: 3412 Flow - Uses a fixed row-height flow using float left style. 3413 Carousel - Single card slideshow all same dimension absolute. 3414 Stack - Uses fixed columns and flexible element height. 3415 */ 3416 function initResourceWidget(widget) { 3417 var $widget = $(widget); 3418 var isFlow = $widget.hasClass('resource-flow-layout'), 3419 isCarousel = $widget.hasClass('resource-carousel-layout'), 3420 isStack = $widget.hasClass('resource-stack-layout'); 3421 3422 // find size of widget by pulling out its class name 3423 var sizeCols = 1; 3424 var m = $widget.get(0).className.match(/\bcol-(\d+)\b/); 3425 if (m) { 3426 sizeCols = parseInt(m[1], 10); 3427 } 3428 3429 var opts = { 3430 cardSizes: ($widget.data('cardsizes') || '').split(','), 3431 maxResults: parseInt($widget.data('maxresults') || '100', 10), 3432 itemsPerPage: $widget.data('itemsperpage'), 3433 sortOrder: $widget.data('sortorder'), 3434 query: $widget.data('query'), 3435 section: $widget.data('section'), 3436 sizeCols: sizeCols, 3437 /* Added by LFL 6/6/14 */ 3438 resourceStyle: $widget.data('resourcestyle') || 'card', 3439 stackSort: $widget.data('stacksort') || 'true' 3440 }; 3441 3442 // run the search for the set of resources to show 3443 3444 var resources = buildResourceList(opts); 3445 3446 if (isFlow) { 3447 drawResourcesFlowWidget($widget, opts, resources); 3448 } else if (isCarousel) { 3449 drawResourcesCarouselWidget($widget, opts, resources); 3450 } else if (isStack) { 3451 /* Looks like this got removed and is not used, so repurposing for the 3452 homepage style layout. 3453 Modified by LFL 6/6/14 3454 */ 3455 //var sections = buildSectionList(opts); 3456 opts['numStacks'] = $widget.data('numstacks'); 3457 drawResourcesStackWidget($widget, opts, resources/*, sections*/); 3458 } 3459 } 3460 3461 /* Initializes a Resource Carousel Widget */ 3462 function drawResourcesCarouselWidget($widget, opts, resources) { 3463 $widget.empty(); 3464 var plusone = true; //always show plusone on carousel 3465 3466 $widget.addClass('resource-card slideshow-container') 3467 .append($('<a>').addClass('slideshow-prev').text('Prev')) 3468 .append($('<a>').addClass('slideshow-next').text('Next')); 3469 3470 var css = { 'width': $widget.width() + 'px', 3471 'height': $widget.height() + 'px' }; 3472 3473 var $ul = $('<ul>'); 3474 3475 for (var i = 0; i < resources.length; ++i) { 3476 var $card = $('<a>') 3477 .attr('href', cleanUrl(resources[i].url)) 3478 .decorateResourceCard(resources[i],plusone); 3479 3480 $('<li>').css(css) 3481 .append($card) 3482 .appendTo($ul); 3483 } 3484 3485 $('<div>').addClass('frame') 3486 .append($ul) 3487 .appendTo($widget); 3488 3489 $widget.dacSlideshow({ 3490 auto: true, 3491 btnPrev: '.slideshow-prev', 3492 btnNext: '.slideshow-next' 3493 }); 3494 }; 3495 3496 /* Initializes a Resource Card Stack Widget (column-based layout) 3497 Modified by LFL 6/6/14 3498 */ 3499 function drawResourcesStackWidget($widget, opts, resources, sections) { 3500 // Don't empty widget, grab all items inside since they will be the first 3501 // items stacked, followed by the resource query 3502 var plusone = true; //by default show plusone on section cards 3503 var cards = $widget.find('.resource-card').detach().toArray(); 3504 var numStacks = opts.numStacks || 1; 3505 var $stacks = []; 3506 var urlString; 3507 3508 for (var i = 0; i < numStacks; ++i) { 3509 $stacks[i] = $('<div>').addClass('resource-card-stack') 3510 .appendTo($widget); 3511 } 3512 3513 var sectionResources = []; 3514 3515 // Extract any subsections that are actually resource cards 3516 if (sections) { 3517 for (var i = 0; i < sections.length; ++i) { 3518 if (!sections[i].sections || !sections[i].sections.length) { 3519 // Render it as a resource card 3520 sectionResources.push( 3521 $('<a>') 3522 .addClass('resource-card section-card') 3523 .attr('href', cleanUrl(sections[i].resource.url)) 3524 .decorateResourceCard(sections[i].resource,plusone)[0] 3525 ); 3526 3527 } else { 3528 cards.push( 3529 $('<div>') 3530 .addClass('resource-card section-card-menu') 3531 .decorateResourceSection(sections[i],plusone)[0] 3532 ); 3533 } 3534 } 3535 } 3536 3537 cards = cards.concat(sectionResources); 3538 3539 for (var i = 0; i < resources.length; ++i) { 3540 var $card = createResourceElement(resources[i], opts); 3541 3542 if (opts.resourceStyle.indexOf('related') > -1) { 3543 $card.addClass('related-card'); 3544 } 3545 3546 cards.push($card[0]); 3547 } 3548 3549 if (opts.stackSort != 'false') { 3550 for (var i = 0; i < cards.length; ++i) { 3551 // Find the stack with the shortest height, but give preference to 3552 // left to right order. 3553 var minHeight = $stacks[0].height(); 3554 var minIndex = 0; 3555 3556 for (var j = 1; j < numStacks; ++j) { 3557 var height = $stacks[j].height(); 3558 if (height < minHeight - 45) { 3559 minHeight = height; 3560 minIndex = j; 3561 } 3562 } 3563 3564 $stacks[minIndex].append($(cards[i])); 3565 } 3566 } 3567 3568 }; 3569 3570 /* 3571 Create a resource card using the given resource object and a list of html 3572 configured options. Returns a jquery object containing the element. 3573 */ 3574 function createResourceElement(resource, opts, plusone) { 3575 var $el; 3576 3577 // The difference here is that generic cards are not entirely clickable 3578 // so its a div instead of an a tag, also the generic one is not given 3579 // the resource-card class so it appears with a transparent background 3580 // and can be styled in whatever way the css setup. 3581 if (opts.resourceStyle == 'generic') { 3582 $el = $('<div>') 3583 .addClass('resource') 3584 .attr('href', cleanUrl(resource.url)) 3585 .decorateResource(resource, opts); 3586 } else { 3587 var cls = 'resource resource-card'; 3588 3589 $el = $('<a>') 3590 .addClass(cls) 3591 .attr('href', cleanUrl(resource.url)) 3592 .decorateResourceCard(resource, plusone); 3593 } 3594 3595 return $el; 3596 } 3597 3598 /* Initializes a flow widget, see distribute.scss for generating accompanying css */ 3599 function drawResourcesFlowWidget($widget, opts, resources) { 3600 $widget.empty(); 3601 var cardSizes = opts.cardSizes || ['6x6']; 3602 var i = 0, j = 0; 3603 var plusone = true; // by default show plusone on resource cards 3604 3605 while (i < resources.length) { 3606 var cardSize = cardSizes[j++ % cardSizes.length]; 3607 cardSize = cardSize.replace(/^\s+|\s+$/,''); 3608 // Some card sizes do not get a plusone button, such as where space is constrained 3609 // or for cards commonly embedded in docs (to improve overall page speed). 3610 plusone = !((cardSize == "6x2") || (cardSize == "6x3") || 3611 (cardSize == "9x2") || (cardSize == "9x3") || 3612 (cardSize == "12x2") || (cardSize == "12x3")); 3613 3614 // A stack has a third dimension which is the number of stacked items 3615 var isStack = cardSize.match(/(\d+)x(\d+)x(\d+)/); 3616 var stackCount = 0; 3617 var $stackDiv = null; 3618 3619 if (isStack) { 3620 // Create a stack container which should have the dimensions defined 3621 // by the product of the items inside. 3622 $stackDiv = $('<div>').addClass('resource-card-stack resource-card-' + isStack[1] 3623 + 'x' + isStack[2] * isStack[3]) .appendTo($widget); 3624 } 3625 3626 // Build each stack item or just a single item 3627 do { 3628 var resource = resources[i]; 3629 3630 var $card = createResourceElement(resources[i], opts, plusone); 3631 3632 $card.addClass('resource-card-' + cardSize + 3633 ' resource-card-' + resource.type); 3634 3635 if (isStack) { 3636 $card.addClass('resource-card-' + isStack[1] + 'x' + isStack[2]); 3637 if (++stackCount == parseInt(isStack[3])) { 3638 $card.addClass('resource-card-row-stack-last'); 3639 stackCount = 0; 3640 } 3641 } else { 3642 stackCount = 0; 3643 } 3644 3645 $card.appendTo($stackDiv || $widget); 3646 3647 } while (++i < resources.length && stackCount > 0); 3648 } 3649 } 3650 3651 /* Build a site map of resources using a section as a root. */ 3652 function buildSectionList(opts) { 3653 if (opts.section && SECTION_BY_ID[opts.section]) { 3654 return SECTION_BY_ID[opts.section].sections || []; 3655 } 3656 return []; 3657 } 3658 3659 function buildResourceList(opts) { 3660 var maxResults = opts.maxResults || 100; 3661 3662 var query = opts.query || ''; 3663 var expressions = parseResourceQuery(query); 3664 var addedResourceIndices = {}; 3665 var results = []; 3666 3667 for (var i = 0; i < expressions.length; i++) { 3668 var clauses = expressions[i]; 3669 3670 // build initial set of resources from first clause 3671 var firstClause = clauses[0]; 3672 var resources = []; 3673 switch (firstClause.attr) { 3674 case 'type': 3675 resources = ALL_RESOURCES_BY_TYPE[firstClause.value]; 3676 break; 3677 case 'lang': 3678 resources = ALL_RESOURCES_BY_LANG[firstClause.value]; 3679 break; 3680 case 'tag': 3681 resources = ALL_RESOURCES_BY_TAG[firstClause.value]; 3682 break; 3683 case 'collection': 3684 var urls = RESOURCE_COLLECTIONS[firstClause.value].resources || []; 3685 resources = urls.map(function(url){ return ALL_RESOURCES_BY_URL[url]; }); 3686 break; 3687 case 'section': 3688 var urls = SITE_MAP[firstClause.value].sections || []; 3689 resources = urls.map(function(url){ return ALL_RESOURCES_BY_URL[url]; }); 3690 break; 3691 } 3692 // console.log(firstClause.attr + ':' + firstClause.value); 3693 resources = resources || []; 3694 3695 // use additional clauses to filter corpus 3696 if (clauses.length > 1) { 3697 var otherClauses = clauses.slice(1); 3698 resources = resources.filter(getResourceMatchesClausesFilter(otherClauses)); 3699 } 3700 3701 // filter out resources already added 3702 if (i > 1) { 3703 resources = resources.filter(getResourceNotAlreadyAddedFilter(addedResourceIndices)); 3704 } 3705 3706 // add to list of already added indices 3707 for (var j = 0; j < resources.length; j++) { 3708 // console.log(resources[j].title); 3709 addedResourceIndices[resources[j].index] = 1; 3710 } 3711 3712 // concat to final results list 3713 results = results.concat(resources); 3714 } 3715 3716 if (opts.sortOrder && results.length) { 3717 var attr = opts.sortOrder; 3718 3719 if (opts.sortOrder == 'random') { 3720 var i = results.length, j, temp; 3721 while (--i) { 3722 j = Math.floor(Math.random() * (i + 1)); 3723 temp = results[i]; 3724 results[i] = results[j]; 3725 results[j] = temp; 3726 } 3727 } else { 3728 var desc = attr.charAt(0) == '-'; 3729 if (desc) { 3730 attr = attr.substring(1); 3731 } 3732 results = results.sort(function(x,y) { 3733 return (desc ? -1 : 1) * (parseInt(x[attr], 10) - parseInt(y[attr], 10)); 3734 }); 3735 } 3736 } 3737 3738 results = results.filter(getResourceNotAlreadyAddedFilter(addedPageResources)); 3739 results = results.slice(0, maxResults); 3740 3741 for (var j = 0; j < results.length; ++j) { 3742 addedPageResources[results[j].index] = 1; 3743 } 3744 3745 return results; 3746 } 3747 3748 3749 function getResourceNotAlreadyAddedFilter(addedResourceIndices) { 3750 return function(resource) { 3751 return !addedResourceIndices[resource.index]; 3752 }; 3753 } 3754 3755 3756 function getResourceMatchesClausesFilter(clauses) { 3757 return function(resource) { 3758 return doesResourceMatchClauses(resource, clauses); 3759 }; 3760 } 3761 3762 3763 function doesResourceMatchClauses(resource, clauses) { 3764 for (var i = 0; i < clauses.length; i++) { 3765 var map; 3766 switch (clauses[i].attr) { 3767 case 'type': 3768 map = IS_RESOURCE_OF_TYPE[clauses[i].value]; 3769 break; 3770 case 'lang': 3771 map = IS_RESOURCE_IN_LANG[clauses[i].value]; 3772 break; 3773 case 'tag': 3774 map = IS_RESOURCE_TAGGED[clauses[i].value]; 3775 break; 3776 } 3777 3778 if (!map || (!!clauses[i].negative ? map[resource.index] : !map[resource.index])) { 3779 return clauses[i].negative; 3780 } 3781 } 3782 return true; 3783 } 3784 3785 function cleanUrl(url) 3786 { 3787 if (url && url.indexOf('//') === -1) { 3788 url = toRoot + url; 3789 } 3790 3791 return url; 3792 } 3793 3794 3795 function parseResourceQuery(query) { 3796 // Parse query into array of expressions (expression e.g. 'tag:foo + type:video') 3797 var expressions = []; 3798 var expressionStrs = query.split(',') || []; 3799 for (var i = 0; i < expressionStrs.length; i++) { 3800 var expr = expressionStrs[i] || ''; 3801 3802 // Break expression into clauses (clause e.g. 'tag:foo') 3803 var clauses = []; 3804 var clauseStrs = expr.split(/(?=[\+\-])/); 3805 for (var j = 0; j < clauseStrs.length; j++) { 3806 var clauseStr = clauseStrs[j] || ''; 3807 3808 // Get attribute and value from clause (e.g. attribute='tag', value='foo') 3809 var parts = clauseStr.split(':'); 3810 var clause = {}; 3811 3812 clause.attr = parts[0].replace(/^\s+|\s+$/g,''); 3813 if (clause.attr) { 3814 if (clause.attr.charAt(0) == '+') { 3815 clause.attr = clause.attr.substring(1); 3816 } else if (clause.attr.charAt(0) == '-') { 3817 clause.negative = true; 3818 clause.attr = clause.attr.substring(1); 3819 } 3820 } 3821 3822 if (parts.length > 1) { 3823 clause.value = parts[1].replace(/^\s+|\s+$/g,''); 3824 } 3825 3826 clauses.push(clause); 3827 } 3828 3829 if (!clauses.length) { 3830 continue; 3831 } 3832 3833 expressions.push(clauses); 3834 } 3835 3836 return expressions; 3837 } 3838})(); 3839 3840(function($) { 3841 3842 /* 3843 Utility method for creating dom for the description area of a card. 3844 Used in decorateResourceCard and decorateResource. 3845 */ 3846 function buildResourceCardDescription(resource, plusone) { 3847 var $description = $('<div>').addClass('description ellipsis'); 3848 3849 $description.append($('<div>').addClass('text').html(resource.summary)); 3850 3851 if (resource.cta) { 3852 $description.append($('<a>').addClass('cta').html(resource.cta)); 3853 } 3854 3855 if (plusone) { 3856 var plusurl = resource.url.indexOf("//") > -1 ? resource.url : 3857 "//developer.android.com/" + resource.url; 3858 3859 $description.append($('<div>').addClass('util') 3860 .append($('<div>').addClass('g-plusone') 3861 .attr('data-size', 'small') 3862 .attr('data-align', 'right') 3863 .attr('data-href', plusurl))); 3864 } 3865 3866 return $description; 3867 } 3868 3869 3870 /* Simple jquery function to create dom for a standard resource card */ 3871 $.fn.decorateResourceCard = function(resource,plusone) { 3872 var section = resource.group || resource.type; 3873 var imgUrl = resource.image || 3874 'assets/images/resource-card-default-android.jpg'; 3875 3876 if (imgUrl.indexOf('//') === -1) { 3877 imgUrl = toRoot + imgUrl; 3878 } 3879 3880 $('<div>').addClass('card-bg') 3881 .css('background-image', 'url(' + (imgUrl || toRoot + 3882 'assets/images/resource-card-default-android.jpg') + ')') 3883 .appendTo(this); 3884 3885 $('<div>').addClass('card-info' + (!resource.summary ? ' empty-desc' : '')) 3886 .append($('<div>').addClass('section').text(section)) 3887 .append($('<div>').addClass('title').html(resource.title)) 3888 .append(buildResourceCardDescription(resource, plusone)) 3889 .appendTo(this); 3890 3891 return this; 3892 }; 3893 3894 /* Simple jquery function to create dom for a resource section card (menu) */ 3895 $.fn.decorateResourceSection = function(section,plusone) { 3896 var resource = section.resource; 3897 //keep url clean for matching and offline mode handling 3898 var urlPrefix = resource.image.indexOf("//") > -1 ? "" : toRoot; 3899 var $base = $('<a>') 3900 .addClass('card-bg') 3901 .attr('href', resource.url) 3902 .append($('<div>').addClass('card-section-icon') 3903 .append($('<div>').addClass('icon')) 3904 .append($('<div>').addClass('section').html(resource.title))) 3905 .appendTo(this); 3906 3907 var $cardInfo = $('<div>').addClass('card-info').appendTo(this); 3908 3909 if (section.sections && section.sections.length) { 3910 // Recurse the section sub-tree to find a resource image. 3911 var stack = [section]; 3912 3913 while (stack.length) { 3914 if (stack[0].resource.image) { 3915 $base.css('background-image', 'url(' + urlPrefix + stack[0].resource.image + ')'); 3916 break; 3917 } 3918 3919 if (stack[0].sections) { 3920 stack = stack.concat(stack[0].sections); 3921 } 3922 3923 stack.shift(); 3924 } 3925 3926 var $ul = $('<ul>') 3927 .appendTo($cardInfo); 3928 3929 var max = section.sections.length > 3 ? 3 : section.sections.length; 3930 3931 for (var i = 0; i < max; ++i) { 3932 3933 var subResource = section.sections[i]; 3934 if (!plusone) { 3935 $('<li>') 3936 .append($('<a>').attr('href', subResource.url) 3937 .append($('<div>').addClass('title').html(subResource.title)) 3938 .append($('<div>').addClass('description ellipsis') 3939 .append($('<div>').addClass('text').html(subResource.summary)) 3940 .append($('<div>').addClass('util')))) 3941 .appendTo($ul); 3942 } else { 3943 $('<li>') 3944 .append($('<a>').attr('href', subResource.url) 3945 .append($('<div>').addClass('title').html(subResource.title)) 3946 .append($('<div>').addClass('description ellipsis') 3947 .append($('<div>').addClass('text').html(subResource.summary)) 3948 .append($('<div>').addClass('util') 3949 .append($('<div>').addClass('g-plusone') 3950 .attr('data-size', 'small') 3951 .attr('data-align', 'right') 3952 .attr('data-href', resource.url))))) 3953 .appendTo($ul); 3954 } 3955 } 3956 3957 // Add a more row 3958 if (max < section.sections.length) { 3959 $('<li>') 3960 .append($('<a>').attr('href', resource.url) 3961 .append($('<div>') 3962 .addClass('title') 3963 .text('More'))) 3964 .appendTo($ul); 3965 } 3966 } else { 3967 // No sub-resources, just render description? 3968 } 3969 3970 return this; 3971 }; 3972 3973 3974 3975 3976 /* Render other types of resource styles that are not cards. */ 3977 $.fn.decorateResource = function(resource, opts) { 3978 var imgUrl = resource.image || 3979 'assets/images/resource-card-default-android.jpg'; 3980 var linkUrl = resource.url; 3981 3982 if (imgUrl.indexOf('//') === -1) { 3983 imgUrl = toRoot + imgUrl; 3984 } 3985 3986 if (linkUrl && linkUrl.indexOf('//') === -1) { 3987 linkUrl = toRoot + linkUrl; 3988 } 3989 3990 $(this).append( 3991 $('<div>').addClass('image') 3992 .css('background-image', 'url(' + imgUrl + ')'), 3993 $('<div>').addClass('info').append( 3994 $('<h4>').addClass('title').html(resource.title), 3995 $('<p>').addClass('summary').html(resource.summary), 3996 $('<a>').attr('href', linkUrl).addClass('cta').html('Learn More') 3997 ) 3998 ); 3999 4000 return this; 4001 }; 4002})(jQuery); 4003 4004 4005/* Calculate the vertical area remaining */ 4006(function($) { 4007 $.fn.ellipsisfade= function(lineHeight) { 4008 this.each(function() { 4009 // get element text 4010 var $this = $(this); 4011 var remainingHeight = $this.parent().parent().height(); 4012 $this.parent().siblings().each(function () 4013 { 4014 if ($(this).is(":visible")) { 4015 var h = $(this).height(); 4016 remainingHeight = remainingHeight - h; 4017 } 4018 }); 4019 4020 adjustedRemainingHeight = ((remainingHeight)/lineHeight>>0)*lineHeight 4021 $this.parent().css({'height': adjustedRemainingHeight}); 4022 $this.css({'height': "auto"}); 4023 }); 4024 4025 return this; 4026 }; 4027}) (jQuery); 4028 4029/* 4030 Fullscreen Carousel 4031 4032 The following allows for an area at the top of the page that takes over the 4033 entire browser height except for its top offset and an optional bottom 4034 padding specified as a data attribute. 4035 4036 HTML: 4037 4038 <div class="fullscreen-carousel"> 4039 <div class="fullscreen-carousel-content"> 4040 <!-- content here --> 4041 </div> 4042 <div class="fullscreen-carousel-content"> 4043 <!-- content here --> 4044 </div> 4045 4046 etc ... 4047 4048 </div> 4049 4050 Control over how the carousel takes over the screen can mostly be defined in 4051 a css file. Setting min-height on the .fullscreen-carousel-content elements 4052 will prevent them from shrinking to far vertically when the browser is very 4053 short, and setting max-height on the .fullscreen-carousel itself will prevent 4054 the area from becoming to long in the case that the browser is stretched very 4055 tall. 4056 4057 There is limited functionality for having multiple sections since that request 4058 was removed, but it is possible to add .next-arrow and .prev-arrow elements to 4059 scroll between multiple content areas. 4060*/ 4061 4062(function() { 4063 $(document).ready(function() { 4064 $('.fullscreen-carousel').each(function() { 4065 initWidget(this); 4066 }); 4067 }); 4068 4069 function initWidget(widget) { 4070 var $widget = $(widget); 4071 4072 var topOffset = $widget.offset().top; 4073 var padBottom = parseInt($widget.data('paddingbottom')) || 0; 4074 var maxHeight = 0; 4075 var minHeight = 0; 4076 var $content = $widget.find('.fullscreen-carousel-content'); 4077 var $nextArrow = $widget.find('.next-arrow'); 4078 var $prevArrow = $widget.find('.prev-arrow'); 4079 var $curSection = $($content[0]); 4080 4081 if ($content.length <= 1) { 4082 $nextArrow.hide(); 4083 $prevArrow.hide(); 4084 } else { 4085 $nextArrow.click(function() { 4086 var index = ($content.index($curSection) + 1); 4087 $curSection.hide(); 4088 $curSection = $($content[index >= $content.length ? 0 : index]); 4089 $curSection.show(); 4090 }); 4091 4092 $prevArrow.click(function() { 4093 var index = ($content.index($curSection) - 1); 4094 $curSection.hide(); 4095 $curSection = $($content[index < 0 ? $content.length - 1 : 0]); 4096 $curSection.show(); 4097 }); 4098 } 4099 4100 // Just hide all content sections except first. 4101 $content.each(function(index) { 4102 if ($(this).height() > minHeight) minHeight = $(this).height(); 4103 $(this).css({position: 'absolute', display: index > 0 ? 'none' : ''}); 4104 }); 4105 4106 // Register for changes to window size, and trigger. 4107 $(window).resize(resizeWidget); 4108 resizeWidget(); 4109 4110 function resizeWidget() { 4111 var height = $(window).height() - topOffset - padBottom; 4112 $widget.width($(window).width()); 4113 $widget.height(height < minHeight ? minHeight : 4114 (maxHeight && height > maxHeight ? maxHeight : height)); 4115 } 4116 } 4117})(); 4118 4119 4120 4121 4122 4123/* 4124 Tab Carousel 4125 4126 The following allows tab widgets to be installed via the html below. Each 4127 tab content section should have a data-tab attribute matching one of the 4128 nav items'. Also each tab content section should have a width matching the 4129 tab carousel. 4130 4131 HTML: 4132 4133 <div class="tab-carousel"> 4134 <ul class="tab-nav"> 4135 <li><a href="#" data-tab="handsets">Handsets</a> 4136 <li><a href="#" data-tab="wearable">Wearable</a> 4137 <li><a href="#" data-tab="tv">TV</a> 4138 </ul> 4139 4140 <div class="tab-carousel-content"> 4141 <div data-tab="handsets"> 4142 <!--Full width content here--> 4143 </div> 4144 4145 <div data-tab="wearable"> 4146 <!--Full width content here--> 4147 </div> 4148 4149 <div data-tab="tv"> 4150 <!--Full width content here--> 4151 </div> 4152 </div> 4153 </div> 4154 4155*/ 4156(function() { 4157 $(document).ready(function() { 4158 $('.tab-carousel').each(function() { 4159 initWidget(this); 4160 }); 4161 }); 4162 4163 function initWidget(widget) { 4164 var $widget = $(widget); 4165 var $nav = $widget.find('.tab-nav'); 4166 var $anchors = $nav.find('[data-tab]'); 4167 var $li = $nav.find('li'); 4168 var $contentContainer = $widget.find('.tab-carousel-content'); 4169 var $tabs = $contentContainer.find('[data-tab]'); 4170 var $curTab = $($tabs[0]); // Current tab is first tab. 4171 var width = $widget.width(); 4172 4173 // Setup nav interactivity. 4174 $anchors.click(function(evt) { 4175 evt.preventDefault(); 4176 var query = '[data-tab=' + $(this).data('tab') + ']'; 4177 transitionWidget($tabs.filter(query)); 4178 }); 4179 4180 // Add highlight for navigation on first item. 4181 var $highlight = $('<div>').addClass('highlight') 4182 .css({left:$li.position().left + 'px', width:$li.outerWidth() + 'px'}) 4183 .appendTo($nav); 4184 4185 // Store height since we will change contents to absolute. 4186 $contentContainer.height($contentContainer.height()); 4187 4188 // Absolutely position tabs so they're ready for transition. 4189 $tabs.each(function(index) { 4190 $(this).css({position: 'absolute', left: index > 0 ? width + 'px' : '0'}); 4191 }); 4192 4193 function transitionWidget($toTab) { 4194 if (!$curTab.is($toTab)) { 4195 var curIndex = $tabs.index($curTab[0]); 4196 var toIndex = $tabs.index($toTab[0]); 4197 var dir = toIndex > curIndex ? 1 : -1; 4198 4199 // Animate content sections. 4200 $toTab.css({left:(width * dir) + 'px'}); 4201 $curTab.animate({left:(width * -dir) + 'px'}); 4202 $toTab.animate({left:'0'}); 4203 4204 // Animate navigation highlight. 4205 $highlight.animate({left:$($li[toIndex]).position().left + 'px', 4206 width:$($li[toIndex]).outerWidth() + 'px'}) 4207 4208 // Store new current section. 4209 $curTab = $toTab; 4210 } 4211 } 4212 } 4213})();