| var cookie_namespace = 'android_developer'; |
| var isMobile = false; // true if mobile, so we can adjust some layout |
| var mPagePath; // initialized in ready() function |
| |
| var basePath = getBaseUri(location.pathname); |
| var SITE_ROOT = toRoot + basePath.substring(1, basePath.indexOf("/", 1)); |
| |
| // TODO(akassay) generate this var in the reference doc build. |
| var API_LEVELS = ['1', '2', '3', '4', '5', '6', '7', '8', '9', |
| '10', '11', '12', '13', '14', '15', '16', |
| '17', '18', '19', '20', '21', '22', '23', '24', '25', 'O']; |
| var METADATA = METADATA || {}; |
| var RESERVED_METADATA_CATEGORY_NAMES = ['extras', 'carousel', 'collections', |
| 'searchHeroCollections']; |
| |
| // Ensure that all ajax getScript() requests allow caching |
| $.ajaxSetup({ |
| cache: true |
| }); |
| |
| /****** ON LOAD SET UP STUFF *********/ |
| |
| $(document).ready(function() { |
| |
| // prep nav expandos |
| var pagePath = location.href.replace(location.hash, ''); |
| // account for intl docs by removing the intl/*/ path |
| if (pagePath.indexOf("/intl/") == 0) { |
| pagePath = pagePath.substr(pagePath.indexOf("/", 6)); // start after intl/ to get last / |
| } |
| |
| if (pagePath.indexOf(SITE_ROOT) == 0) { |
| if (pagePath == '' || pagePath.charAt(pagePath.length - 1) == '/') { |
| pagePath += 'index.html'; |
| } |
| } |
| |
| // Need a copy of the pagePath before it gets changed in the next block; |
| // it's needed to perform proper tab highlighting in offline docs (see rootDir below) |
| var pagePathOriginal = pagePath; |
| if (SITE_ROOT.match(/\.\.\//) || SITE_ROOT == '') { |
| // If running locally, SITE_ROOT will be a relative path, so account for that by |
| // finding the relative URL to this page. This will allow us to find links on the page |
| // leading back to this page. |
| var pathParts = pagePath.split('/'); |
| var relativePagePathParts = []; |
| var upDirs = (SITE_ROOT.match(/(\.\.\/)+/) || [''])[0].length / 3; |
| for (var i = 0; i < upDirs; i++) { |
| relativePagePathParts.push('..'); |
| } |
| for (var i = 0; i < upDirs; i++) { |
| relativePagePathParts.push(pathParts[pathParts.length - (upDirs - i) - 1]); |
| } |
| relativePagePathParts.push(pathParts[pathParts.length - 1]); |
| pagePath = relativePagePathParts.join('/'); |
| } else { |
| // Otherwise the page path is already an absolute URL |
| } |
| |
| // set global variable so we can highlight the sidenav a bit later (such as for google reference) |
| // and highlight the sidenav |
| mPagePath = pagePath; |
| |
| // Check for params and remove them. |
| mPagePath = mPagePath.split('?')[0]; |
| highlightSidenav(); |
| |
| // set up prev/next links if they exist |
| var $selNavLink = $('#nav').find('a[href="' + pagePath + '"]'); |
| var $selListItem; |
| if ($selNavLink.length) { |
| $selListItem = $selNavLink.closest('li'); |
| |
| // set up prev links |
| var $prevLink = []; |
| var $prevListItem = $selListItem.prev('li'); |
| |
| var crossBoundaries = ($("body.design").length > 0) || ($("body.guide").length > 0) ? true : |
| false; // navigate across topic boundaries only in design docs |
| if ($prevListItem.length) { |
| if ($prevListItem.hasClass('nav-section') || crossBoundaries) { |
| // jump to last topic of previous section |
| $prevLink = $prevListItem.find('a:last'); |
| } else if (!$selListItem.hasClass('nav-section')) { |
| // jump to previous topic in this section |
| $prevLink = $prevListItem.find('a:eq(0)'); |
| } |
| } else { |
| // jump to this section's index page (if it exists) |
| var $parentListItem = $selListItem.parents('li'); |
| $prevLink = $selListItem.parents('li').find('a'); |
| |
| // except if cross boundaries aren't allowed, and we're at the top of a section already |
| // (and there's another parent) |
| if (!crossBoundaries && $parentListItem.hasClass('nav-section') && |
| $selListItem.hasClass('nav-section')) { |
| $prevLink = []; |
| } |
| } |
| |
| // set up next links |
| var $nextLink = []; |
| var startClass = false; |
| var isCrossingBoundary = false; |
| |
| if ($selListItem.hasClass('nav-section') && $selListItem.children('div.empty').length == 0) { |
| // we're on an index page, jump to the first topic |
| $nextLink = $selListItem.find('ul:eq(0)').find('a:eq(0)'); |
| |
| // if there aren't any children, go to the next section (required for About pages) |
| if ($nextLink.length == 0) { |
| $nextLink = $selListItem.next('li').find('a'); |
| } else if ($('.topic-start-link').length) { |
| // as long as there's a child link and there is a "topic start link" (we're on a landing) |
| // then set the landing page "start link" text to be the first doc title |
| $('.topic-start-link').text($nextLink.text().toUpperCase()); |
| } |
| |
| // If the selected page has a description, then it's a class or article homepage |
| if ($selListItem.find('a[description]').length) { |
| // this means we're on a class landing page |
| startClass = true; |
| } |
| } else { |
| // jump to the next topic in this section (if it exists) |
| $nextLink = $selListItem.next('li').find('a:eq(0)'); |
| if ($nextLink.length == 0) { |
| isCrossingBoundary = true; |
| // no more topics in this section, jump to the first topic in the next section |
| $nextLink = $selListItem.parents('li:eq(0)').next('li').find('a:eq(0)'); |
| if (!$nextLink.length) { // Go up another layer to look for next page (lesson > class > course) |
| $nextLink = $selListItem.parents('li:eq(1)').next('li.nav-section').find('a:eq(0)'); |
| if ($nextLink.length == 0) { |
| // if that doesn't work, we're at the end of the list, so disable NEXT link |
| $('.next-page-link').attr('href', '').addClass("disabled") |
| .click(function() { return false; }); |
| // and completely hide the one in the footer |
| $('.content-footer .next-page-link').hide(); |
| } |
| } |
| } |
| } |
| |
| if (startClass) { |
| $('.start-class-link').attr('href', $nextLink.attr('href')).removeClass("hide"); |
| |
| // if there's no training bar (below the start button), |
| // then we need to add a bottom border to button |
| if (!$("#tb").length) { |
| $('.start-class-link').css({'border-bottom':'1px solid #DADADA'}); |
| } |
| } else if (isCrossingBoundary && !$('body.design').length) { // Design always crosses boundaries |
| $('.content-footer.next-class').show(); |
| $('.next-page-link').attr('href', '') |
| .removeClass("hide").addClass("disabled") |
| .click(function() { return false; }); |
| // and completely hide the one in the footer |
| $('.content-footer .next-page-link').hide(); |
| $('.content-footer .prev-page-link').hide(); |
| |
| if ($nextLink.length) { |
| $('.next-class-link').attr('href', $nextLink.attr('href')) |
| .removeClass("hide"); |
| |
| $('.content-footer .next-class-link').append($nextLink.html()); |
| |
| $('.next-class-link').find('.new').empty(); |
| } |
| } else { |
| $('.next-page-link').attr('href', $nextLink.attr('href')) |
| .removeClass("hide"); |
| // for the footer link, also add the previous and next page titles |
| if ($prevLink.length) { |
| $('.content-footer .prev-page-link').append($prevLink.html()); |
| } |
| if ($nextLink.length) { |
| $('.content-footer .next-page-link').append($nextLink.html()); |
| } |
| } |
| |
| if (!startClass && $prevLink.length) { |
| var prevHref = $prevLink.attr('href'); |
| if (prevHref == SITE_ROOT + 'index.html') { |
| // Don't show Previous when it leads to the homepage |
| } else { |
| $('.prev-page-link').attr('href', $prevLink.attr('href')).removeClass("hide"); |
| } |
| } |
| } |
| |
| // Set up the course landing pages for Training with class names and descriptions |
| if ($('body.trainingcourse').length) { |
| var $classLinks = $selListItem.find('ul li a').not('#nav .nav-section .nav-section ul a'); |
| |
| // create an array for all the class descriptions |
| var $classDescriptions = new Array($classLinks.length); |
| var lang = getLangPref(); |
| $classLinks.each(function(index) { |
| var langDescr = $(this).attr(lang + "-description"); |
| if (typeof langDescr !== 'undefined' && langDescr !== false) { |
| // if there's a class description in the selected language, use that |
| $classDescriptions[index] = langDescr; |
| } else { |
| // otherwise, use the default english description |
| $classDescriptions[index] = $(this).attr("description"); |
| } |
| }); |
| |
| var $olClasses = $('<ol class="class-list"></ol>'); |
| var $liClass; |
| var $h2Title; |
| var $pSummary; |
| var $olLessons; |
| var $liLesson; |
| $classLinks.each(function(index) { |
| $liClass = $('<li class="clearfix"></li>'); |
| $h2Title = $('<a class="title" href="' + $(this).attr('href') + '"><h2 class="norule">' + $(this).html() + '</h2><span></span></a>'); |
| $pSummary = $('<p class="description">' + $classDescriptions[index] + '</p>'); |
| |
| $olLessons = $('<ol class="lesson-list"></ol>'); |
| |
| $lessons = $(this).closest('li').find('ul li a'); |
| |
| if ($lessons.length) { |
| $lessons.each(function(index) { |
| $olLessons.append('<li><a href="' + $(this).attr('href') + '">' + $(this).html() + '</a></li>'); |
| }); |
| } else { |
| $pSummary.addClass('article'); |
| } |
| |
| $liClass.append($h2Title).append($pSummary).append($olLessons); |
| $olClasses.append($liClass); |
| }); |
| $('#classes').append($olClasses); |
| } |
| |
| // Set up expand/collapse behavior |
| initExpandableNavItems("#nav"); |
| |
| // Set up play-on-hover <video> tags. |
| $('video.play-on-hover').bind('click', function() { |
| $(this).get(0).load(); // in case the video isn't seekable |
| $(this).get(0).play(); |
| }); |
| |
| // Set up play-on-click for <video> tags with a "video-wrapper". |
| $('.video-wrapper > video').bind('click', function() { |
| this.play(); |
| $(this.parentElement).addClass('playing'); |
| }); |
| |
| // Set up tooltips |
| var TOOLTIP_MARGIN = 10; |
| $('acronym,.tooltip-link').each(function() { |
| var $target = $(this); |
| var $tooltip = $('<div>') |
| .addClass('tooltip-box') |
| .append($target.attr('title')) |
| .hide() |
| .appendTo('body'); |
| $target.removeAttr('title'); |
| |
| $target.hover(function() { |
| // in |
| var targetRect = $target.offset(); |
| targetRect.width = $target.width(); |
| targetRect.height = $target.height(); |
| |
| $tooltip.css({ |
| left: targetRect.left, |
| top: targetRect.top + targetRect.height + TOOLTIP_MARGIN |
| }); |
| $tooltip.addClass('below'); |
| $tooltip.show(); |
| }, function() { |
| // out |
| $tooltip.hide(); |
| }); |
| }); |
| |
| // Set up <h2> deeplinks |
| $('h2').click(function() { |
| var id = $(this).attr('id'); |
| if (id) { |
| if (history && history.replaceState) { |
| // Change url without scrolling. |
| history.replaceState({}, '', '#' + id); |
| } else { |
| document.location.hash = id; |
| } |
| } |
| }); |
| |
| //Loads the +1 button |
| //var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; |
| //po.src = 'https://apis.google.com/js/plusone.js'; |
| //var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); |
| }); |
| // END of the onload event |
| |
| function initExpandableNavItems(rootTag) { |
| var toggleIcon = $( |
| rootTag + ' li.nav-section .nav-section-header .toggle-icon, ' + |
| rootTag + ' li.nav-section .nav-section-header a[href="#"]'); |
| |
| toggleIcon.on('click keypress', function(e) { |
| if (e.type == 'keypress' && e.which == 13 || e.type == 'click') { |
| doNavToggle(this); |
| } |
| }); |
| |
| // Stop expand/collapse behavior when clicking on nav section links |
| // (since we're navigating away from the page) |
| // This selector captures the first instance of <a>, but not those with "#" as the href. |
| $('.nav-section-header').find('a:eq(0)').not('a[href="#"]').click(function(evt) { |
| window.location.href = $(this).attr('href'); |
| return false; |
| }); |
| } |
| |
| function doNavToggle(el) { |
| var section = $(el).closest('li.nav-section'); |
| if (section.hasClass('expanded')) { |
| /* hide me and descendants */ |
| section.find('ul').slideUp(250, function() { |
| // remove 'expanded' class from my section and any children |
| section.closest('li').removeClass('expanded'); |
| $('li.nav-section', section).removeClass('expanded'); |
| }); |
| } else { |
| /* show me */ |
| // first hide all other siblings |
| var $others = $('li.nav-section.expanded', $(el).closest('ul')).not('.sticky'); |
| $others.removeClass('expanded').children('ul').slideUp(250); |
| |
| // now expand me |
| section.closest('li').addClass('expanded'); |
| section.children('ul').slideDown(250); |
| } |
| } |
| |
| /** Highlight the current page in sidenav, expanding children as appropriate */ |
| function highlightSidenav() { |
| // if something is already highlighted, undo it. This is for dynamic navigation (Samples index) |
| if ($("ul#nav li.selected").length) { |
| unHighlightSidenav(); |
| } |
| // look for URL in sidenav, including the hash |
| var $selNavLink = $('#nav').find('a[href="' + mPagePath + location.hash + '"]'); |
| |
| // If the selNavLink is still empty, look for it without the hash |
| if ($selNavLink.length == 0) { |
| $selNavLink = $('#nav').find('a[href="' + mPagePath + '"]'); |
| } |
| |
| var $selListItem; |
| var breadcrumb = []; |
| |
| if ($selNavLink.length) { |
| // Find this page's <li> in sidenav and set selected |
| $selListItem = $selNavLink.closest('li'); |
| $selListItem.addClass('selected'); |
| |
| // Traverse up the tree and expand all parent nav-sections |
| $selNavLink.parents('li.nav-section').each(function() { |
| $(this).addClass('expanded'); |
| $(this).children('ul').show(); |
| |
| var link = $(this).find('a').first(); |
| |
| if (!$(this).is($selListItem)) { |
| breadcrumb.unshift(link) |
| } |
| }); |
| |
| $('#nav').scrollIntoView($selNavLink); |
| } |
| |
| breadcrumb.forEach(function(link) { |
| link.dacCrumbs(); |
| }); |
| } |
| |
| function unHighlightSidenav() { |
| $("ul#nav li.selected").removeClass("selected"); |
| $('ul#nav li.nav-section.expanded').removeClass('expanded').children('ul').hide(); |
| } |
| |
| var agent = navigator['userAgent'].toLowerCase(); |
| // If a mobile phone, set flag and do mobile setup |
| if ((agent.indexOf("mobile") != -1) || // android, iphone, ipod |
| (agent.indexOf("blackberry") != -1) || |
| (agent.indexOf("webos") != -1) || |
| (agent.indexOf("mini") != -1)) { // opera mini browsers |
| isMobile = true; |
| } |
| |
| $(document).ready(function() { |
| $("pre:not(.no-pretty-print)").addClass("prettyprint"); |
| prettyPrint(); |
| }); |
| |
| /* Show popup dialogs */ |
| function showDialog(id) { |
| $dialog = $("#" + id); |
| $dialog.prepend('<div class="box-border"><div class="top"> <div class="left"></div> <div class="right"></div></div><div class="bottom"> <div class="left"></div> <div class="right"></div> </div> </div>'); |
| $dialog.wrapInner('<div/>'); |
| $dialog.removeClass("hide"); |
| } |
| |
| /* ######### COOKIES! ########## */ |
| |
| function readCookie(cookie) { |
| var myCookie = cookie_namespace + "_" + cookie + "="; |
| if (document.cookie) { |
| var index = document.cookie.indexOf(myCookie); |
| if (index != -1) { |
| var valStart = index + myCookie.length; |
| var valEnd = document.cookie.indexOf(";", valStart); |
| if (valEnd == -1) { |
| valEnd = document.cookie.length; |
| } |
| var val = document.cookie.substring(valStart, valEnd); |
| return val; |
| } |
| } |
| return 0; |
| } |
| |
| function writeCookie(cookie, val, section) { |
| if (val == undefined) return; |
| section = section == null ? "_" : "_" + section + "_"; |
| var age = 2 * 365 * 24 * 60 * 60; // set max-age to 2 years |
| var cookieValue = cookie_namespace + section + cookie + "=" + val + |
| "; max-age=" + age + "; path=/"; |
| document.cookie = cookieValue; |
| } |
| |
| /* ######### END COOKIES! ########## */ |
| |
| /* |
| * Manages secion card states and nav resize to conclude loading |
| */ |
| (function() { |
| $(document).ready(function() { |
| |
| // Stack hover states |
| $('.section-card-menu').each(function(index, el) { |
| var height = $(el).height(); |
| $(el).css({height:height + 'px', position:'relative'}); |
| var $cardInfo = $(el).find('.card-info'); |
| |
| $cardInfo.css({position: 'absolute', bottom:'0px', left:'0px', right:'0px', overflow:'visible'}); |
| }); |
| |
| }); |
| |
| })(); |
| |
| /* MISC LIBRARY FUNCTIONS */ |
| |
| function toggle(obj, slide) { |
| var ul = $("ul:first", obj); |
| var li = ul.parent(); |
| if (li.hasClass("closed")) { |
| if (slide) { |
| ul.slideDown("fast"); |
| } else { |
| ul.show(); |
| } |
| li.removeClass("closed"); |
| li.addClass("open"); |
| $(".toggle-img", li).attr("title", "hide pages"); |
| } else { |
| ul.slideUp("fast"); |
| li.removeClass("open"); |
| li.addClass("closed"); |
| $(".toggle-img", li).attr("title", "show pages"); |
| } |
| } |
| |
| function buildToggleLists() { |
| $(".toggle-list").each( |
| function(i) { |
| $("div:first", this).append("<a class='toggle-img' href='#' title='show pages' onClick='toggle(this.parentNode.parentNode, true); return false;'></a>"); |
| $(this).addClass("closed"); |
| }); |
| } |
| |
| function hideNestedItems(list, toggle) { |
| $list = $(list); |
| // hide nested lists |
| if ($list.hasClass('showing')) { |
| $("li ol", $list).hide('fast'); |
| $list.removeClass('showing'); |
| // show nested lists |
| } else { |
| $("li ol", $list).show('fast'); |
| $list.addClass('showing'); |
| } |
| $(".more,.less", $(toggle)).toggle(); |
| } |
| |
| /* Call this to add listeners to a <select> element for Studio/Eclipse/Other docs */ |
| function setupIdeDocToggle() { |
| $("select.ide").change(function() { |
| var selected = $(this).find("option:selected").attr("value"); |
| $(".select-ide").hide(); |
| $(".select-ide." + selected).show(); |
| |
| $("select.ide").val(selected); |
| }); |
| } |
| |
| /* Used to hide and reveal supplemental content, such as long code samples. |
| See the companion CSS in android-developer-docs.css */ |
| function toggleContent(obj) { |
| var div = $(obj).closest(".toggle-content"); |
| var toggleMe = $(".toggle-content-toggleme:eq(0)", div); |
| if (div.hasClass("closed")) { // if it's closed, open it |
| toggleMe.slideDown(); |
| $(".toggle-content-text:eq(0)", obj).toggle(); |
| div.removeClass("closed").addClass("open"); |
| $(".toggle-content-img:eq(0)", div).attr("title", "hide").attr("src", toRoot + |
| "assets/images/styles/disclosure_up.png"); |
| } else { // if it's open, close it |
| toggleMe.slideUp('fast', function() { // Wait until the animation is done before closing arrow |
| $(".toggle-content-text:eq(0)", obj).toggle(); |
| div.removeClass("open").addClass("closed"); |
| div.find(".toggle-content").removeClass("open").addClass("closed") |
| .find(".toggle-content-toggleme").hide(); |
| $(".toggle-content-img", div).attr("title", "show").attr("src", toRoot + |
| "assets/images/styles/disclosure_down.png"); |
| }); |
| } |
| return false; |
| } |
| |
| /* New version of expandable content */ |
| function toggleExpandable(link, id) { |
| if ($(id).is(':visible')) { |
| $(id).slideUp(); |
| $(link).removeClass('expanded'); |
| } else { |
| $(id).slideDown(); |
| $(link).addClass('expanded'); |
| } |
| } |
| |
| function hideExpandable(ids) { |
| $(ids).slideUp(); |
| $(ids).prev('h4').find('a.expandable').removeClass('expanded'); |
| } |
| |
| /* |
| * Slideshow 1.0 |
| * Used on /index.html and /develop/index.html for carousel |
| * |
| * Sample usage: |
| * HTML - |
| * <div class="slideshow-container"> |
| * <a href="" class="slideshow-prev">Prev</a> |
| * <a href="" class="slideshow-next">Next</a> |
| * <ul> |
| * <li class="item"><img src="images/marquee1.jpg"></li> |
| * <li class="item"><img src="images/marquee2.jpg"></li> |
| * <li class="item"><img src="images/marquee3.jpg"></li> |
| * <li class="item"><img src="images/marquee4.jpg"></li> |
| * </ul> |
| * </div> |
| * |
| * <script type="text/javascript"> |
| * $('.slideshow-container').dacSlideshow({ |
| * auto: true, |
| * btnPrev: '.slideshow-prev', |
| * btnNext: '.slideshow-next' |
| * }); |
| * </script> |
| * |
| * Options: |
| * btnPrev: optional identifier for previous button |
| * btnNext: optional identifier for next button |
| * btnPause: optional identifier for pause button |
| * auto: whether or not to auto-proceed |
| * speed: animation speed |
| * autoTime: time between auto-rotation |
| * easing: easing function for transition |
| * start: item to select by default |
| * scroll: direction to scroll in |
| * pagination: whether or not to include dotted pagination |
| * |
| */ |
| |
| (function($) { |
| $.fn.dacSlideshow = function(o) { |
| |
| //Options - see above |
| o = $.extend({ |
| btnPrev: null, |
| btnNext: null, |
| btnPause: null, |
| auto: true, |
| speed: 500, |
| autoTime: 12000, |
| easing: null, |
| start: 0, |
| scroll: 1, |
| pagination: true |
| |
| }, o || {}); |
| |
| //Set up a carousel for each |
| return this.each(function() { |
| |
| var running = false; |
| var animCss = o.vertical ? "top" : "left"; |
| var sizeCss = o.vertical ? "height" : "width"; |
| var div = $(this); |
| var ul = $("ul", div); |
| var tLi = $("li", ul); |
| var tl = tLi.size(); |
| var timer = null; |
| |
| var li = $("li", ul); |
| var itemLength = li.size(); |
| var curr = o.start; |
| |
| li.css({float: o.vertical ? "none" : "left"}); |
| ul.css({margin: "0", padding: "0", position: "relative", "list-style-type": "none", "z-index": "1"}); |
| div.css({position: "relative", "z-index": "2", left: "0px"}); |
| |
| var liSize = o.vertical ? height(li) : width(li); |
| var ulSize = liSize * itemLength; |
| var divSize = liSize; |
| |
| li.css({width: li.width(), height: li.height()}); |
| ul.css(sizeCss, ulSize + "px").css(animCss, -(curr * liSize)); |
| |
| div.css(sizeCss, divSize + "px"); |
| |
| //Pagination |
| if (o.pagination) { |
| var pagination = $("<div class='pagination'></div>"); |
| var pag_ul = $("<ul></ul>"); |
| if (tl > 1) { |
| for (var i = 0; i < tl; i++) { |
| var li = $("<li>" + i + "</li>"); |
| pag_ul.append(li); |
| if (i == o.start) li.addClass('active'); |
| li.click(function() { |
| go(parseInt($(this).text())); |
| }) |
| } |
| pagination.append(pag_ul); |
| div.append(pagination); |
| } |
| } |
| |
| //Previous button |
| if (o.btnPrev) |
| $(o.btnPrev).click(function(e) { |
| e.preventDefault(); |
| return go(curr - o.scroll); |
| }); |
| |
| //Next button |
| if (o.btnNext) |
| $(o.btnNext).click(function(e) { |
| e.preventDefault(); |
| return go(curr + o.scroll); |
| }); |
| |
| //Pause button |
| if (o.btnPause) |
| $(o.btnPause).click(function(e) { |
| e.preventDefault(); |
| if ($(this).hasClass('paused')) { |
| startRotateTimer(); |
| } else { |
| pauseRotateTimer(); |
| } |
| }); |
| |
| //Auto rotation |
| if (o.auto) startRotateTimer(); |
| |
| function startRotateTimer() { |
| clearInterval(timer); |
| timer = setInterval(function() { |
| if (curr == tl - 1) { |
| go(0); |
| } else { |
| go(curr + o.scroll); |
| } |
| }, o.autoTime); |
| $(o.btnPause).removeClass('paused'); |
| } |
| |
| function pauseRotateTimer() { |
| clearInterval(timer); |
| $(o.btnPause).addClass('paused'); |
| } |
| |
| //Go to an item |
| function go(to) { |
| if (!running) { |
| |
| if (to < 0) { |
| to = itemLength - 1; |
| } else if (to > itemLength - 1) { |
| to = 0; |
| } |
| curr = to; |
| |
| running = true; |
| |
| ul.animate( |
| animCss == "left" ? {left: -(curr * liSize)} : {top: -(curr * liSize)} , o.speed, o.easing, |
| function() { |
| running = false; |
| } |
| ); |
| |
| $(o.btnPrev + "," + o.btnNext).removeClass("disabled"); |
| $((curr - o.scroll < 0 && o.btnPrev) || |
| (curr + o.scroll > itemLength && o.btnNext) || |
| [] |
| ).addClass("disabled"); |
| |
| var nav_items = $('li', pagination); |
| nav_items.removeClass('active'); |
| nav_items.eq(to).addClass('active'); |
| |
| } |
| if (o.auto) startRotateTimer(); |
| return false; |
| }; |
| }); |
| }; |
| |
| function css(el, prop) { |
| return parseInt($.css(el[0], prop)) || 0; |
| }; |
| function width(el) { |
| return el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight'); |
| }; |
| function height(el) { |
| return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom'); |
| }; |
| |
| })(jQuery); |
| |
| /* |
| * dacSlideshow 1.0 |
| * Used on develop/index.html for side-sliding tabs |
| * |
| * Sample usage: |
| * HTML - |
| * <div class="slideshow-container"> |
| * <a href="" class="slideshow-prev">Prev</a> |
| * <a href="" class="slideshow-next">Next</a> |
| * <ul> |
| * <li class="item"><img src="images/marquee1.jpg"></li> |
| * <li class="item"><img src="images/marquee2.jpg"></li> |
| * <li class="item"><img src="images/marquee3.jpg"></li> |
| * <li class="item"><img src="images/marquee4.jpg"></li> |
| * </ul> |
| * </div> |
| * |
| * <script type="text/javascript"> |
| * $('.slideshow-container').dacSlideshow({ |
| * auto: true, |
| * btnPrev: '.slideshow-prev', |
| * btnNext: '.slideshow-next' |
| * }); |
| * </script> |
| * |
| * Options: |
| * btnPrev: optional identifier for previous button |
| * btnNext: optional identifier for next button |
| * auto: whether or not to auto-proceed |
| * speed: animation speed |
| * autoTime: time between auto-rotation |
| * easing: easing function for transition |
| * start: item to select by default |
| * scroll: direction to scroll in |
| * pagination: whether or not to include dotted pagination |
| * |
| */ |
| (function($) { |
| $.fn.dacTabbedList = function(o) { |
| |
| //Options - see above |
| o = $.extend({ |
| speed : 250, |
| easing: null, |
| nav_id: null, |
| frame_id: null |
| }, o || {}); |
| |
| //Set up a carousel for each |
| return this.each(function() { |
| |
| var curr = 0; |
| var running = false; |
| var animCss = "margin-left"; |
| var sizeCss = "width"; |
| var div = $(this); |
| |
| var nav = $(o.nav_id, div); |
| var nav_li = $("li", nav); |
| var nav_size = nav_li.size(); |
| var frame = div.find(o.frame_id); |
| var content_width = $(frame).find('ul').width(); |
| //Buttons |
| $(nav_li).click(function(e) { |
| go($(nav_li).index($(this))); |
| }) |
| |
| //Go to an item |
| function go(to) { |
| if (!running) { |
| curr = to; |
| running = true; |
| |
| frame.animate({'margin-left' : -(curr * content_width)}, o.speed, o.easing, |
| function() { |
| running = false; |
| } |
| ); |
| |
| nav_li.removeClass('active'); |
| nav_li.eq(to).addClass('active'); |
| |
| } |
| return false; |
| }; |
| }); |
| }; |
| |
| function css(el, prop) { |
| return parseInt($.css(el[0], prop)) || 0; |
| }; |
| function width(el) { |
| return el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight'); |
| }; |
| function height(el) { |
| return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom'); |
| }; |
| |
| })(jQuery); |
| |
| /* ######################################################## */ |
| /* ################# JAVADOC REFERENCE ################### */ |
| /* ######################################################## */ |
| |
| |
| |
| var API_LEVEL_COOKIE = "api_level"; |
| var minLevel = 1; |
| var maxLevel = 1; |
| |
| function buildApiLevelSelector() { |
| maxLevel = API_LEVELS.length; |
| var userApiLevel = parseInt(readCookie(API_LEVEL_COOKIE)); |
| userApiLevel = userApiLevel == 0 ? maxLevel : userApiLevel; // If there's no cookie (zero), use the max by default |
| |
| minLevel = parseInt($("#doc-api-level").attr("class")); |
| // Handle provisional api levels; the provisional level will always be the highest possible level |
| // Provisional api levels will also have a length; other stuff that's just missing a level won't, |
| // so leave those kinds of entities at the default level of 1 (for example, the R.styleable class) |
| if (isNaN(minLevel) && minLevel.length) { |
| minLevel = maxLevel; |
| } |
| var select = $("#apiLevelSelector").html("").change(changeApiLevel); |
| for (var i = maxLevel - 1; i >= 0; i--) { |
| var option = $("<option />").attr("value", "" + API_LEVELS[i]).append("" + API_LEVELS[i]); |
| // if (API_LEVELS[i] < minLevel) option.addClass("absent"); // always false for strings (codenames) |
| select.append(option); |
| } |
| |
| // get the DOM element and use setAttribute cuz IE6 fails when using jquery .attr('selected',true) |
| var selectedLevelItem = $("#apiLevelSelector option[value='" + userApiLevel + "']").get(0); |
| selectedLevelItem.setAttribute('selected', true); |
| } |
| |
| function changeApiLevel() { |
| maxLevel = API_LEVELS.length; |
| minLevel = parseInt($('#doc-api-level').attr('class')); |
| var selectedLevel = maxLevel; |
| |
| selectedLevel = parseInt($("#apiLevelSelector option:selected").val()); |
| toggleVisisbleApis(selectedLevel, "body"); |
| |
| writeCookie(API_LEVEL_COOKIE, selectedLevel, null); |
| |
| if (selectedLevel < minLevel) { |
| // Show the API notice dialog, set number values and button event |
| $('#api-unavailable').trigger('modal-open'); |
| $('#api-unavailable .selected-level').text(selectedLevel); |
| $('#api-unavailable .api-level').text(minLevel); |
| $('#api-unavailable button.ok').attr('onclick','$("#apiLevelSelector").val("' + minLevel + '");changeApiLevel();'); |
| } |
| } |
| |
| function toggleVisisbleApis(selectedLevel, context) { |
| var apis = $(".api", context); |
| apis.each(function(i) { |
| var obj = $(this); |
| var className = obj.attr("class"); |
| var apiLevelIndex = className.lastIndexOf("-") + 1; |
| var apiLevelEndIndex = className.indexOf(" ", apiLevelIndex); |
| apiLevelEndIndex = apiLevelEndIndex != -1 ? apiLevelEndIndex : className.length; |
| var apiLevel = className.substring(apiLevelIndex, apiLevelEndIndex); |
| if (apiLevel.length == 0) { // for odd cases when the since data is actually missing, just bail |
| return; |
| } |
| apiLevel = parseInt(apiLevel); |
| |
| // Handle provisional api levels; if this item's level is the provisional one, set it to the max |
| var selectedLevelNum = parseInt(selectedLevel) |
| var apiLevelNum = parseInt(apiLevel); |
| if (isNaN(apiLevelNum)) { |
| apiLevelNum = maxLevel; |
| } |
| |
| // Grey things out that aren't available and give a tooltip title |
| if (apiLevelNum > selectedLevelNum) { |
| obj.addClass("absent").attr("title", "Requires API Level \"" + |
| apiLevel + "\" or higher. To reveal, change the target API level " + |
| "above the left navigation."); |
| } else obj.removeClass("absent").removeAttr("title"); |
| }); |
| } |
| |
| /* ################# SIDENAV TREE VIEW ################### */ |
| /* TODO: eliminate redundancy with non-google functions */ |
| function init_google_navtree(navtree_id, toroot, root_nodes) { |
| var me = new Object(); |
| me.toroot = toroot; |
| me.node = new Object(); |
| |
| me.node.li = document.getElementById(navtree_id); |
| if (!me.node.li) { |
| return; |
| } |
| |
| me.node.children_data = root_nodes; |
| me.node.children = new Array(); |
| me.node.children_ul = document.createElement("ul"); |
| me.node.get_children_ul = function() { return me.node.children_ul; }; |
| //me.node.children_ul.className = "children_ul"; |
| me.node.li.appendChild(me.node.children_ul); |
| me.node.depth = 0; |
| |
| get_google_node(me, me.node); |
| } |
| |
| function new_google_node(me, mom, text, link, children_data, api_level) { |
| var node = new Object(); |
| var child; |
| node.children = Array(); |
| node.children_data = children_data; |
| node.depth = mom.depth + 1; |
| node.get_children_ul = function() { |
| if (!node.children_ul) { |
| node.children_ul = document.createElement("ul"); |
| node.children_ul.className = "tree-list-children"; |
| node.li.appendChild(node.children_ul); |
| } |
| return node.children_ul; |
| }; |
| node.li = document.createElement("li"); |
| |
| mom.get_children_ul().appendChild(node.li); |
| |
| if (link) { |
| child = document.createElement("a"); |
| |
| } else { |
| child = document.createElement("span"); |
| child.className = "tree-list-subtitle"; |
| |
| } |
| if (children_data != null) { |
| node.li.className = "nav-section"; |
| node.label_div = document.createElement("div"); |
| node.label_div.className = "nav-section-header-ref"; |
| node.li.appendChild(node.label_div); |
| get_google_node(me, node); |
| node.label_div.appendChild(child); |
| } else { |
| node.li.appendChild(child); |
| } |
| if (link) { |
| child.href = me.toroot + link; |
| } |
| node.label = document.createTextNode(text); |
| child.appendChild(node.label); |
| |
| node.children_ul = null; |
| |
| return node; |
| } |
| |
| function get_google_node(me, mom) { |
| mom.children_visited = true; |
| var linkText; |
| for (var i in mom.children_data) { |
| var node_data = mom.children_data[i]; |
| linkText = node_data[0]; |
| |
| if (linkText.match("^" + "com.google.android") == "com.google.android") { |
| linkText = linkText.substr(19, linkText.length); |
| } |
| mom.children[i] = new_google_node(me, mom, linkText, node_data[1], |
| node_data[2], node_data[3]); |
| } |
| } |
| |
| /****** NEW version of script to build google and sample navs dynamically ******/ |
| // TODO: update Google reference docs to tolerate this new implementation |
| |
| var NODE_NAME = 0; |
| var NODE_HREF = 1; |
| var NODE_GROUP = 2; |
| var NODE_TAGS = 3; |
| var NODE_CHILDREN = 4; |
| |
| function init_google_navtree2(navtree_id, data) { |
| var $containerUl = $("#" + navtree_id); |
| for (var i in data) { |
| var node_data = data[i]; |
| $containerUl.append(new_google_node2(node_data)); |
| } |
| |
| // Make all third-generation list items 'sticky' to prevent them from collapsing |
| $containerUl.find('li li li.nav-section').addClass('sticky'); |
| |
| initExpandableNavItems("#" + navtree_id); |
| } |
| |
| function new_google_node2(node_data) { |
| var linkText = node_data[NODE_NAME]; |
| if (linkText.match("^" + "com.google.android") == "com.google.android") { |
| linkText = linkText.substr(19, linkText.length); |
| } |
| var $li = $('<li>'); |
| var $a; |
| if (node_data[NODE_HREF] != null) { |
| $a = $('<a href="' + toRoot + node_data[NODE_HREF] + '" title="' + linkText + '" >' + |
| linkText + '</a>'); |
| } else { |
| $a = $('<a href="#" onclick="return false;" title="' + linkText + '" >' + |
| linkText + '/</a>'); |
| } |
| var $childUl = $('<ul>'); |
| if (node_data[NODE_CHILDREN] != null) { |
| $li.addClass("nav-section"); |
| $a = $('<div class="nav-section-header">').append($a); |
| if (node_data[NODE_HREF] == null) $a.addClass('empty'); |
| |
| for (var i in node_data[NODE_CHILDREN]) { |
| var child_node_data = node_data[NODE_CHILDREN][i]; |
| $childUl.append(new_google_node2(child_node_data)); |
| } |
| $li.append($childUl); |
| } |
| $li.prepend($a); |
| |
| return $li; |
| } |
| |
| function showGoogleRefTree() { |
| init_default_google_navtree(toRoot); |
| init_default_gcm_navtree(toRoot); |
| } |
| |
| function init_default_google_navtree(toroot) { |
| // load json file for navtree data |
| $.getScript(toRoot + 'gms_navtree_data.js', function(data, textStatus, jqxhr) { |
| // when the file is loaded, initialize the tree |
| if (jqxhr.status === 200) { |
| init_google_navtree("gms-tree-list", toroot, GMS_NAVTREE_DATA); |
| highlightSidenav(); |
| } |
| }); |
| } |
| |
| function init_default_gcm_navtree(toroot) { |
| // load json file for navtree data |
| $.getScript(toRoot + 'gcm_navtree_data.js', function(data, textStatus, jqxhr) { |
| // when the file is loaded, initialize the tree |
| if (jqxhr.status === 200) { |
| init_google_navtree("gcm-tree-list", toroot, GCM_NAVTREE_DATA); |
| highlightSidenav(); |
| } |
| }); |
| } |
| |
| /* TOGGLE INHERITED MEMBERS */ |
| |
| /* Toggle an inherited class (arrow toggle) |
| * @param linkObj The link that was clicked. |
| * @param expand 'true' to ensure it's expanded. 'false' to ensure it's closed. |
| * 'null' to simply toggle. |
| */ |
| function toggleInherited(linkObj, expand) { |
| var base = linkObj.getAttribute("id"); |
| var list = document.getElementById(base + "-list"); |
| var summary = document.getElementById(base + "-summary"); |
| var trigger = document.getElementById(base + "-trigger"); |
| var a = $(linkObj); |
| if ((expand == null && a.hasClass("closed")) || expand) { |
| list.style.display = "none"; |
| summary.style.display = "block"; |
| trigger.src = toRoot + "assets/images/styles/disclosure_up.png"; |
| a.removeClass("closed"); |
| a.addClass("opened"); |
| } else if ((expand == null && a.hasClass("opened")) || (expand == false)) { |
| list.style.display = "block"; |
| summary.style.display = "none"; |
| trigger.src = toRoot + "assets/images/styles/disclosure_down.png"; |
| a.removeClass("opened"); |
| a.addClass("closed"); |
| } |
| return false; |
| } |
| |
| /* Toggle all inherited classes in a single table (e.g. all inherited methods) |
| * @param linkObj The link that was clicked. |
| * @param expand 'true' to ensure it's expanded. 'false' to ensure it's closed. |
| * 'null' to simply toggle. |
| */ |
| function toggleAllInherited(linkObj, expand) { |
| var a = $(linkObj); |
| var table = $(a.parent().parent().parent()); // ugly way to get table/tbody |
| var expandos = $(".jd-expando-trigger", table); |
| if ((expand == null && a.text() == "[Expand]") || expand) { |
| expandos.each(function(i) { |
| toggleInherited(this, true); |
| }); |
| a.text("[Collapse]"); |
| } else if ((expand == null && a.text() == "[Collapse]") || (expand == false)) { |
| expandos.each(function(i) { |
| toggleInherited(this, false); |
| }); |
| a.text("[Expand]"); |
| } |
| return false; |
| } |
| |
| /* Toggle all inherited members in the class (link in the class title) |
| */ |
| function toggleAllClassInherited() { |
| var a = $("#toggleAllClassInherited"); // get toggle link from class title |
| var toggles = $(".toggle-all", $("#body-content")); |
| if (a.text() == "[Expand All]") { |
| toggles.each(function(i) { |
| toggleAllInherited(this, true); |
| }); |
| a.text("[Collapse All]"); |
| } else { |
| toggles.each(function(i) { |
| toggleAllInherited(this, false); |
| }); |
| a.text("[Expand All]"); |
| } |
| return false; |
| } |
| |
| /* Expand all inherited members in the class. Used when initiating page search */ |
| function ensureAllInheritedExpanded() { |
| var toggles = $(".toggle-all", $("#body-content")); |
| toggles.each(function(i) { |
| toggleAllInherited(this, true); |
| }); |
| $("#toggleAllClassInherited").text("[Collapse All]"); |
| } |
| |
| /* HANDLE KEY EVENTS |
| * - Listen for Ctrl+F (Cmd on Mac) and expand all inherited members (to aid page search) |
| */ |
| var agent = navigator['userAgent'].toLowerCase(); |
| var mac = agent.indexOf("macintosh") != -1; |
| |
| $(document).keydown(function(e) { |
| var control = mac ? e.metaKey && !e.ctrlKey : e.ctrlKey; // get ctrl key |
| if (control && e.which == 70) { // 70 is "F" |
| ensureAllInheritedExpanded(); |
| } |
| }); |
| |
| /* On-demand functions */ |
| |
| /** Move sample code line numbers out of PRE block and into non-copyable column */ |
| function initCodeLineNumbers() { |
| var numbers = $("#codesample-block a.number"); |
| if (numbers.length) { |
| $("#codesample-line-numbers").removeClass("hidden").append(numbers); |
| } |
| |
| $(document).ready(function() { |
| // select entire line when clicked |
| $("span.code-line").click(function() { |
| if (!shifted) { |
| selectText(this); |
| } |
| }); |
| // invoke line link on double click |
| $(".code-line").dblclick(function() { |
| document.location.hash = $(this).attr('id'); |
| }); |
| // highlight the line when hovering on the number |
| $("#codesample-line-numbers a.number").mouseover(function() { |
| var id = $(this).attr('href'); |
| $(id).css('background', '#e7e7e7'); |
| }); |
| $("#codesample-line-numbers a.number").mouseout(function() { |
| var id = $(this).attr('href'); |
| $(id).css('background', 'none'); |
| }); |
| }); |
| } |
| |
| // create SHIFT key binder to avoid the selectText method when selecting multiple lines |
| var shifted = false; |
| $(document).bind('keyup keydown', function(e) { |
| shifted = e.shiftKey; return true; |
| }); |
| |
| // courtesy of jasonedelman.com |
| function selectText(element) { |
| var doc = document , |
| range, selection |
| ; |
| if (doc.body.createTextRange) { //ms |
| range = doc.body.createTextRange(); |
| range.moveToElementText(element); |
| range.select(); |
| } else if (window.getSelection) { //all others |
| selection = window.getSelection(); |
| range = doc.createRange(); |
| range.selectNodeContents(element); |
| selection.removeAllRanges(); |
| selection.addRange(range); |
| } |
| } |
| |
| /** Display links and other information about samples that match the |
| group specified by the URL */ |
| function showSamples() { |
| var group = $("#samples").attr('class'); |
| $("#samples").html("<p>Here are some samples for <b>" + group + "</b> apps:</p>"); |
| |
| var $ul = $("<ul>"); |
| $selectedLi = $("#nav li.selected"); |
| |
| $selectedLi.children("ul").children("li").each(function() { |
| var $li = $("<li>").append($(this).find("a").first().clone()); |
| var $samplesLink = $li.find("a"); |
| if ($samplesLink.text().endsWith('/')) { |
| $samplesLink.text($samplesLink.text().slice(0,-1)); |
| } |
| $ul.append($li); |
| }); |
| |
| $("#samples").append($ul); |
| |
| } |
| |
| /* ########################################################## */ |
| /* ################### RESOURCE CARDS ##################### */ |
| /* ########################################################## */ |
| |
| /** Handle resource queries, collections, and grids (sections). Requires |
| jd_tag_helpers.js and the *_unified_data.js to be loaded. */ |
| |
| (function() { |
| $(document).ready(function() { |
| // Need to initialize hero carousel before other sections for dedupe |
| // to work correctly. |
| $('[data-carousel-query]').dacCarouselQuery(); |
| |
| // Iterate over all instances and initialize a resource widget. |
| $('.resource-widget').resourceWidget(); |
| }); |
| |
| $.fn.widgetOptions = function() { |
| return { |
| cardSizes: (this.data('cardsizes') || '').split(','), |
| maxResults: parseInt(this.data('maxresults'), 10) || Infinity, |
| initialResults: this.data('initialResults'), |
| itemsPerPage: this.data('itemsPerPage'), |
| sortOrder: this.data('sortorder'), |
| query: this.data('query'), |
| section: this.data('section'), |
| /* Added by LFL 6/6/14 */ |
| resourceStyle: this.data('resourcestyle') || 'card', |
| stackSort: this.data('stacksort') || 'true', |
| // For filter based resources |
| allowDuplicates: this.data('allow-duplicates') || 'false' |
| }; |
| }; |
| |
| $.fn.deprecateOldGridStyles = function() { |
| var m = this.get(0).className.match(/\bcol-(\d+)\b/); |
| if (m && !this.is('.cols > *')) { |
| this.removeClass('col-' + m[1]); |
| } |
| return this; |
| } |
| |
| /* |
| * Three types of resource layouts: |
| * Flow - Uses a fixed row-height flow using float left style. |
| * Carousel - Single card slideshow all same dimension absolute. |
| * Stack - Uses fixed columns and flexible element height. |
| */ |
| function initResourceWidget(widget, resources, opts) { |
| var $widget = $(widget).deprecateOldGridStyles(); |
| var isFlow = $widget.hasClass('resource-flow-layout'); |
| var isCarousel = $widget.hasClass('resource-carousel-layout'); |
| var isStack = $widget.hasClass('resource-stack-layout'); |
| |
| opts = opts || $widget.widgetOptions(); |
| resources = resources || metadata.query(opts); |
| |
| if (opts.maxResults !== undefined) { |
| resources = resources.slice(0, opts.maxResults); |
| } |
| |
| if (isFlow) { |
| drawResourcesFlowWidget($widget, opts, resources); |
| } else if (isCarousel) { |
| drawResourcesCarouselWidget($widget, opts, resources); |
| } else if (isStack) { |
| opts.numStacks = $widget.data('numstacks'); |
| drawResourcesStackWidget($widget, opts, resources); |
| } |
| } |
| |
| $.fn.resourceWidget = function(resources, options) { |
| return this.each(function() { |
| initResourceWidget(this, resources, options); |
| }); |
| }; |
| |
| /* Initializes a Resource Carousel Widget */ |
| function drawResourcesCarouselWidget($widget, opts, resources) { |
| $widget.empty(); |
| var plusone = false; // stop showing plusone buttons on cards |
| |
| $widget.addClass('resource-card slideshow-container') |
| .append($('<a>').addClass('slideshow-prev').text('Prev')) |
| .append($('<a>').addClass('slideshow-next').text('Next')); |
| |
| var css = {'width': $widget.width() + 'px', |
| 'height': $widget.height() + 'px'}; |
| |
| var $ul = $('<ul>'); |
| |
| for (var i = 0; i < resources.length; ++i) { |
| var $card = $('<a>') |
| .attr('href', cleanUrl(resources[i].url)) |
| .decorateResourceCard(resources[i], plusone); |
| |
| $('<li>').css(css) |
| .append($card) |
| .appendTo($ul); |
| } |
| |
| $('<div>').addClass('frame') |
| .append($ul) |
| .appendTo($widget); |
| |
| $widget.dacSlideshow({ |
| auto: true, |
| btnPrev: '.slideshow-prev', |
| btnNext: '.slideshow-next' |
| }); |
| } |
| |
| /* Initializes a Resource Card Stack Widget (column-based layout) |
| Modified by LFL 6/6/14 |
| */ |
| function drawResourcesStackWidget($widget, opts, resources, sections) { |
| // Don't empty widget, grab all items inside since they will be the first |
| // items stacked, followed by the resource query |
| var plusone = false; // stop showing plusone buttons on cards |
| var cards = $widget.find('.resource-card').detach().toArray(); |
| var numStacks = opts.numStacks || 1; |
| var $stacks = []; |
| |
| for (var i = 0; i < numStacks; ++i) { |
| $stacks[i] = $('<div>').addClass('resource-card-stack') |
| .appendTo($widget); |
| } |
| |
| var sectionResources = []; |
| |
| // Extract any subsections that are actually resource cards |
| if (sections) { |
| for (i = 0; i < sections.length; ++i) { |
| if (!sections[i].sections || !sections[i].sections.length) { |
| // Render it as a resource card |
| sectionResources.push( |
| $('<a>') |
| .addClass('resource-card section-card') |
| .attr('href', cleanUrl(sections[i].resource.url)) |
| .decorateResourceCard(sections[i].resource, plusone)[0] |
| ); |
| |
| } else { |
| cards.push( |
| $('<div>') |
| .addClass('resource-card section-card-menu') |
| .decorateResourceSection(sections[i], plusone)[0] |
| ); |
| } |
| } |
| } |
| |
| cards = cards.concat(sectionResources); |
| |
| for (i = 0; i < resources.length; ++i) { |
| var $card = createResourceElement(resources[i], opts); |
| |
| if (opts.resourceStyle.indexOf('related') > -1) { |
| $card.addClass('related-card'); |
| } |
| |
| cards.push($card[0]); |
| } |
| |
| if (opts.stackSort !== 'false') { |
| for (i = 0; i < cards.length; ++i) { |
| // Find the stack with the shortest height, but give preference to |
| // left to right order. |
| var minHeight = $stacks[0].height(); |
| var minIndex = 0; |
| |
| for (var j = 1; j < numStacks; ++j) { |
| var height = $stacks[j].height(); |
| if (height < minHeight - 45) { |
| minHeight = height; |
| minIndex = j; |
| } |
| } |
| |
| $stacks[minIndex].append($(cards[i])); |
| } |
| } |
| } |
| |
| /* |
| Create a resource card using the given resource object and a list of html |
| configured options. Returns a jquery object containing the element. |
| */ |
| function createResourceElement(resource, opts, plusone) { |
| var $el; |
| |
| // The difference here is that generic cards are not entirely clickable |
| // so its a div instead of an a tag, also the generic one is not given |
| // the resource-card class so it appears with a transparent background |
| // and can be styled in whatever way the css setup. |
| if (opts.resourceStyle === 'generic') { |
| $el = $('<div>') |
| .addClass('resource') |
| .attr('href', cleanUrl(resource.url)) |
| .decorateResource(resource, opts); |
| } else { |
| var cls = 'resource resource-card'; |
| |
| $el = $('<a>') |
| .addClass(cls) |
| .attr('href', cleanUrl(resource.url)) |
| .decorateResourceCard(resource, plusone); |
| } |
| |
| return $el; |
| } |
| |
| function createResponsiveFlowColumn(cardSize) { |
| var cardWidth = parseInt(cardSize.match(/(\d+)/)[1], 10); |
| var column = $('<div>').addClass('col-' + (cardWidth / 3) + 'of6'); |
| if (cardWidth < 9) { |
| column.addClass('col-tablet-1of2'); |
| } else if (cardWidth > 9 && cardWidth < 18) { |
| column.addClass('col-tablet-1of1'); |
| } |
| if (cardWidth < 18) { |
| column.addClass('col-mobile-1of1'); |
| } |
| return column; |
| } |
| |
| /* Initializes a flow widget, see distribute.scss for generating accompanying css */ |
| function drawResourcesFlowWidget($widget, opts, resources) { |
| // We'll be doing our own modifications to opts. |
| opts = $.extend({}, opts); |
| |
| $widget.empty().addClass('cols'); |
| if (opts.itemsPerPage) { |
| $('<div class="col-1of1 dac-section-links dac-text-center">') |
| .append( |
| $('<div class="dac-section-link dac-show-less" data-toggle="show-less">Less<i class="dac-sprite dac-auto-unfold-less"></i></div>'), |
| $('<div class="dac-section-link dac-show-more" data-toggle="show-more">More<i class="dac-sprite dac-auto-unfold-more"></i></div>') |
| ) |
| .appendTo($widget); |
| } |
| |
| $widget.data('options.resourceflow', opts); |
| $widget.data('resources.resourceflow', resources); |
| |
| drawResourceFlowPage($widget, opts, resources); |
| } |
| |
| function drawResourceFlowPage($widget, opts, resources) { |
| var cardSizes = opts.cardSizes || ['6x6']; // 2015-08-09: dynamic card sizes are deprecated |
| var i = opts.currentIndex || 0; |
| var j = 0; |
| var plusone = false; // stop showing plusone buttons on cards |
| var firstPage = i === 0; |
| var initialResults = opts.initialResults || opts.itemsPerPage || resources.length; |
| var max = firstPage ? initialResults : i + opts.itemsPerPage; |
| max = Math.min(resources.length, max); |
| |
| var page = $('<div class="resource-flow-page">'); |
| if (opts.itemsPerPage) { |
| $widget.find('.dac-section-links').before(page); |
| } else { |
| $widget.append(page); |
| } |
| |
| while (i < max) { |
| var cardSize = cardSizes[j++ % cardSizes.length]; |
| cardSize = cardSize.replace(/^\s+|\s+$/, ''); |
| |
| var column = createResponsiveFlowColumn(cardSize).appendTo(page); |
| |
| // A stack has a third dimension which is the number of stacked items |
| var isStack = cardSize.match(/(\d+)x(\d+)x(\d+)/); |
| var stackCount = 0; |
| var $stackDiv = null; |
| |
| if (isStack) { |
| // Create a stack container which should have the dimensions defined |
| // by the product of the items inside. |
| $stackDiv = $('<div>').addClass('resource-card-stack resource-card-' + isStack[1] + |
| 'x' + isStack[2] * isStack[3]) .appendTo(column); |
| } |
| |
| // Build each stack item or just a single item |
| do { |
| var resource = resources[i]; |
| |
| var $card = createResourceElement(resources[i], opts, plusone); |
| |
| $card.addClass('resource-card-' + cardSize + |
| ' resource-card-' + resource.type.toLowerCase()); |
| |
| if (isStack) { |
| $card.addClass('resource-card-' + isStack[1] + 'x' + isStack[2]); |
| if (++stackCount === parseInt(isStack[3])) { |
| $card.addClass('resource-card-row-stack-last'); |
| stackCount = 0; |
| } |
| } else { |
| stackCount = 0; |
| } |
| |
| $card.appendTo($stackDiv || column); |
| |
| } while (++i < max && stackCount > 0); |
| |
| // Record number of pages viewed in analytics. |
| if (!firstPage) { |
| var clicks = Math.ceil((i - initialResults) / opts.itemsPerPage); |
| devsite.analytics.trackAnalyticsEvent('event', |
| 'Cards', 'Click More', clicks); |
| } |
| } |
| |
| opts.currentIndex = i; |
| $widget.toggleClass('dac-has-more', i < resources.length); |
| $widget.toggleClass('dac-has-less', !firstPage); |
| |
| $widget.trigger('dac:domchange'); |
| if (opts.onRenderPage) { |
| opts.onRenderPage(page); |
| } |
| } |
| |
| function drawResourceFlowReset($widget, opts, resources) { |
| $widget.find('.resource-flow-page') |
| .slice(1) |
| .remove(); |
| $widget.toggleClass('dac-has-more', true); |
| $widget.toggleClass('dac-has-less', false); |
| |
| opts.currentIndex = Math.min(opts.initialResults, resources.length); |
| devsite.analytics.trackAnalyticsEvent('event', 'Cards', 'Click Less'); |
| } |
| |
| /* A decorator for event functions which finds the surrounding widget and it's options */ |
| function wrapWithWidget(func) { |
| return function(e) { |
| if (e) e.preventDefault(); |
| |
| var $widget = $(this).closest('.resource-flow-layout'); |
| var opts = $widget.data('options.resourceflow'); |
| var resources = $widget.data('resources.resourceflow'); |
| func($widget, opts, resources); |
| }; |
| } |
| |
| /* Build a site map of resources using a section as a root. */ |
| function buildSectionList(opts) { |
| if (opts.section && SECTION_BY_ID[opts.section]) { |
| return SECTION_BY_ID[opts.section].sections || []; |
| } |
| return []; |
| } |
| |
| function cleanUrl(url) { |
| if (url && url.indexOf('//') === -1) { |
| url = toRoot + url; |
| } |
| |
| return url; |
| } |
| |
| // Delegated events for resources. |
| $(document).on('click', '.resource-flow-layout [data-toggle="show-more"]', wrapWithWidget(drawResourceFlowPage)); |
| $(document).on('click', '.resource-flow-layout [data-toggle="show-less"]', wrapWithWidget(drawResourceFlowReset)); |
| })(); |
| |
| (function($) { |
| // A mapping from category and type values to new values or human presentable strings. |
| var SECTION_MAP = { |
| googleplay: 'google play' |
| }; |
| |
| /* |
| Utility method for creating dom for the description area of a card. |
| Used in decorateResourceCard and decorateResource. |
| */ |
| function buildResourceCardDescription(resource, plusone) { |
| var $description = $('<div>').addClass('description ellipsis'); |
| |
| $description.append($('<div>').addClass('text').html(resource.summary)); |
| |
| if (resource.cta) { |
| $description.append($('<a>').addClass('cta').html(resource.cta)); |
| } |
| |
| if (plusone) { |
| var plusurl = resource.url.indexOf("//") > -1 ? resource.url : |
| "//developer.android.com/" + resource.url; |
| |
| $description.append($('<div>').addClass('util') |
| .append($('<div>').addClass('g-plusone') |
| .attr('data-size', 'small') |
| .attr('data-align', 'right') |
| .attr('data-href', plusurl))); |
| } |
| |
| return $description; |
| } |
| |
| /* Simple jquery function to create dom for a standard resource card */ |
| $.fn.decorateResourceCard = function(resource, plusone) { |
| var section = resource.category || resource.type; |
| section = (SECTION_MAP[section] || section).toLowerCase(); |
| var imgUrl = resource.image || |
| 'assets/images/resource-card-default-android.jpg'; |
| |
| if (imgUrl.indexOf('//') === -1) { |
| imgUrl = toRoot + imgUrl; |
| } |
| |
| if (resource.type === 'youtube' || resource.type === 'video') { |
| $('<div>').addClass('play-button') |
| .append($('<i class="dac-sprite dac-play-white">')) |
| .appendTo(this); |
| } |
| |
| $('<div>').addClass('card-bg') |
| .css('background-image', 'url(' + (imgUrl || toRoot + |
| 'assets/images/resource-card-default-android.jpg') + ')') |
| .appendTo(this); |
| |
| $('<div>').addClass('card-info' + (!resource.summary ? ' empty-desc' : '')) |
| .append($('<div>').addClass('section').text(section)) |
| .append($('<div>').addClass('title' + (resource.title_highlighted ? ' highlighted' : '')) |
| .html(resource.title_highlighted || resource.title)) |
| .append(buildResourceCardDescription(resource, plusone)) |
| .appendTo(this); |
| |
| return this; |
| }; |
| |
| /* Simple jquery function to create dom for a resource section card (menu) */ |
| $.fn.decorateResourceSection = function(section, plusone) { |
| var resource = section.resource; |
| //keep url clean for matching and offline mode handling |
| var urlPrefix = resource.image.indexOf("//") > -1 ? "" : toRoot; |
| var $base = $('<a>') |
| .addClass('card-bg') |
| .attr('href', resource.url) |
| .append($('<div>').addClass('card-section-icon') |
| .append($('<div>').addClass('icon')) |
| .append($('<div>').addClass('section').html(resource.title))) |
| .appendTo(this); |
| |
| var $cardInfo = $('<div>').addClass('card-info').appendTo(this); |
| |
| if (section.sections && section.sections.length) { |
| // Recurse the section sub-tree to find a resource image. |
| var stack = [section]; |
| |
| while (stack.length) { |
| if (stack[0].resource.image) { |
| $base.css('background-image', 'url(' + urlPrefix + stack[0].resource.image + ')'); |
| break; |
| } |
| |
| if (stack[0].sections) { |
| stack = stack.concat(stack[0].sections); |
| } |
| |
| stack.shift(); |
| } |
| |
| var $ul = $('<ul>') |
| .appendTo($cardInfo); |
| |
| var max = section.sections.length > 3 ? 3 : section.sections.length; |
| |
| for (var i = 0; i < max; ++i) { |
| |
| var subResource = section.sections[i]; |
| if (!plusone) { |
| $('<li>') |
| .append($('<a>').attr('href', subResource.url) |
| .append($('<div>').addClass('title').html(subResource.title)) |
| .append($('<div>').addClass('description ellipsis') |
| .append($('<div>').addClass('text').html(subResource.summary)) |
| .append($('<div>').addClass('util')))) |
| .appendTo($ul); |
| } else { |
| $('<li>') |
| .append($('<a>').attr('href', subResource.url) |
| .append($('<div>').addClass('title').html(subResource.title)) |
| .append($('<div>').addClass('description ellipsis') |
| .append($('<div>').addClass('text').html(subResource.summary)) |
| .append($('<div>').addClass('util') |
| .append($('<div>').addClass('g-plusone') |
| .attr('data-size', 'small') |
| .attr('data-align', 'right') |
| .attr('data-href', resource.url))))) |
| .appendTo($ul); |
| } |
| } |
| |
| // Add a more row |
| if (max < section.sections.length) { |
| $('<li>') |
| .append($('<a>').attr('href', resource.url) |
| .append($('<div>') |
| .addClass('title') |
| .text('More'))) |
| .appendTo($ul); |
| } |
| } else { |
| // No sub-resources, just render description? |
| } |
| |
| return this; |
| }; |
| |
| /* Render other types of resource styles that are not cards. */ |
| $.fn.decorateResource = function(resource, opts) { |
| var imgUrl = resource.image || |
| 'assets/images/resource-card-default-android.jpg'; |
| var linkUrl = resource.url; |
| |
| if (imgUrl.indexOf('//') === -1) { |
| imgUrl = toRoot + imgUrl; |
| } |
| |
| if (linkUrl && linkUrl.indexOf('//') === -1) { |
| linkUrl = toRoot + linkUrl; |
| } |
| |
| $(this).append( |
| $('<div>').addClass('image') |
| .css('background-image', 'url(' + imgUrl + ')'), |
| $('<div>').addClass('info').append( |
| $('<h4>').addClass('title').html(resource.title_highlighted || resource.title), |
| $('<p>').addClass('summary').html(resource.summary), |
| $('<a>').attr('href', linkUrl).addClass('cta').html('Learn More') |
| ) |
| ); |
| |
| return this; |
| }; |
| })(jQuery); |
| |
| /* |
| Fullscreen Carousel |
| |
| The following allows for an area at the top of the page that takes over the |
| entire browser height except for its top offset and an optional bottom |
| padding specified as a data attribute. |
| |
| HTML: |
| |
| <div class="fullscreen-carousel"> |
| <div class="fullscreen-carousel-content"> |
| <!-- content here --> |
| </div> |
| <div class="fullscreen-carousel-content"> |
| <!-- content here --> |
| </div> |
| |
| etc ... |
| |
| </div> |
| |
| Control over how the carousel takes over the screen can mostly be defined in |
| a css file. Setting min-height on the .fullscreen-carousel-content elements |
| will prevent them from shrinking to far vertically when the browser is very |
| short, and setting max-height on the .fullscreen-carousel itself will prevent |
| the area from becoming to long in the case that the browser is stretched very |
| tall. |
| |
| There is limited functionality for having multiple sections since that request |
| was removed, but it is possible to add .next-arrow and .prev-arrow elements to |
| scroll between multiple content areas. |
| */ |
| |
| (function() { |
| $(document).ready(function() { |
| $('.fullscreen-carousel').each(function() { |
| initWidget(this); |
| }); |
| }); |
| |
| function initWidget(widget) { |
| var $widget = $(widget); |
| |
| var topOffset = $widget.offset().top; |
| var padBottom = parseInt($widget.data('paddingbottom')) || 0; |
| var maxHeight = 0; |
| var minHeight = 0; |
| var $content = $widget.find('.fullscreen-carousel-content'); |
| var $nextArrow = $widget.find('.next-arrow'); |
| var $prevArrow = $widget.find('.prev-arrow'); |
| var $curSection = $($content[0]); |
| |
| if ($content.length <= 1) { |
| $nextArrow.hide(); |
| $prevArrow.hide(); |
| } else { |
| $nextArrow.click(function() { |
| var index = ($content.index($curSection) + 1); |
| $curSection.hide(); |
| $curSection = $($content[index >= $content.length ? 0 : index]); |
| $curSection.show(); |
| }); |
| |
| $prevArrow.click(function() { |
| var index = ($content.index($curSection) - 1); |
| $curSection.hide(); |
| $curSection = $($content[index < 0 ? $content.length - 1 : 0]); |
| $curSection.show(); |
| }); |
| } |
| |
| // Just hide all content sections except first. |
| $content.each(function(index) { |
| if ($(this).height() > minHeight) minHeight = $(this).height(); |
| $(this).css({position: 'absolute', display: index > 0 ? 'none' : ''}); |
| }); |
| |
| // Register for changes to window size, and trigger. |
| $(window).resize(resizeWidget); |
| resizeWidget(); |
| |
| function resizeWidget() { |
| var height = $(window).height() - topOffset - padBottom; |
| $widget.width($(window).width()); |
| $widget.height(height < minHeight ? minHeight : |
| (maxHeight && height > maxHeight ? maxHeight : height)); |
| } |
| } |
| })(); |
| |
| /* |
| Tab Carousel |
| |
| The following allows tab widgets to be installed via the html below. Each |
| tab content section should have a data-tab attribute matching one of the |
| nav items'. Also each tab content section should have a width matching the |
| tab carousel. |
| |
| HTML: |
| |
| <div class="tab-carousel"> |
| <ul class="tab-nav"> |
| <li><a href="#" data-tab="handsets">Handsets</a> |
| <li><a href="#" data-tab="wearable">Wearable</a> |
| <li><a href="#" data-tab="tv">TV</a> |
| </ul> |
| |
| <div class="tab-carousel-content"> |
| <div data-tab="handsets"> |
| <!--Full width content here--> |
| </div> |
| |
| <div data-tab="wearable"> |
| <!--Full width content here--> |
| </div> |
| |
| <div data-tab="tv"> |
| <!--Full width content here--> |
| </div> |
| </div> |
| </div> |
| |
| */ |
| (function() { |
| $(document).ready(function() { |
| $('.tab-carousel').each(function() { |
| initWidget(this); |
| }); |
| }); |
| |
| function initWidget(widget) { |
| var $widget = $(widget); |
| var $nav = $widget.find('.tab-nav'); |
| var $anchors = $nav.find('[data-tab]'); |
| var $li = $nav.find('li'); |
| var $contentContainer = $widget.find('.tab-carousel-content'); |
| var $tabs = $contentContainer.find('[data-tab]'); |
| var $curTab = $($tabs[0]); // Current tab is first tab. |
| var width = $widget.width(); |
| |
| // Setup nav interactivity. |
| $anchors.click(function(evt) { |
| evt.preventDefault(); |
| var query = '[data-tab=' + $(this).data('tab') + ']'; |
| transitionWidget($tabs.filter(query)); |
| }); |
| |
| // Add highlight for navigation on first item. |
| var $highlight = $('<div>').addClass('highlight') |
| .css({left:$li.position().left + 'px', width:$li.outerWidth() + 'px'}) |
| .appendTo($nav); |
| |
| // Store height since we will change contents to absolute. |
| $contentContainer.height($contentContainer.height()); |
| |
| // Absolutely position tabs so they're ready for transition. |
| $tabs.each(function(index) { |
| $(this).css({position: 'absolute', left: index > 0 ? width + 'px' : '0'}); |
| }); |
| |
| function transitionWidget($toTab) { |
| if (!$curTab.is($toTab)) { |
| var curIndex = $tabs.index($curTab[0]); |
| var toIndex = $tabs.index($toTab[0]); |
| var dir = toIndex > curIndex ? 1 : -1; |
| |
| // Animate content sections. |
| $toTab.css({left:(width * dir) + 'px'}); |
| $curTab.animate({left:(width * -dir) + 'px'}); |
| $toTab.animate({left:'0'}); |
| |
| // Animate navigation highlight. |
| $highlight.animate({left:$($li[toIndex]).position().left + 'px', |
| width:$($li[toIndex]).outerWidth() + 'px'}) |
| |
| // Store new current section. |
| $curTab = $toTab; |
| } |
| } |
| } |
| })(); |
| |
| /** |
| * Auto TOC |
| * |
| * Upgrades h2s on the page to have a rule and be toggle-able on mobile. |
| */ |
| (function($) { |
| var upgraded = false; |
| var h2Titles; |
| |
| function initWidget() { |
| // add HRs below all H2s (except for a few other h2 variants) |
| // Consider doing this with css instead. |
| h2Titles = $('h2').not('#qv h2, #tb h2, .sidebox h2, #devdoc-nav h2, h2.norule'); |
| h2Titles.css({paddingBottom:0}).after('<hr/>'); |
| |
| // Exit early if on older browser. |
| if (!window.matchMedia) { |
| return; |
| } |
| |
| // Only run logic in mobile layout. |
| var query = window.matchMedia('(max-width: 719px)'); |
| if (query.matches) { |
| makeTogglable(); |
| } else { |
| query.addListener(makeTogglable); |
| } |
| } |
| |
| function makeTogglable() { |
| // Only run this logic once. |
| if (upgraded) { return; } |
| upgraded = true; |
| |
| // Only make content h2s togglable. |
| var contentTitles = h2Titles.filter('#jd-content *'); |
| |
| // If there are more than 1 |
| if (contentTitles.size() < 2) { |
| return; |
| } |
| |
| contentTitles.each(function() { |
| // Find all the relevant nodes. |
| var $title = $(this); |
| var $hr = $title.next(); |
| var $contents = allNextUntil($hr[0], 'h2, .next-docs'); |
| var $section = $($title) |
| .add($hr) |
| .add($title.prev('a[name]')) |
| .add($contents); |
| var $anchor = $section.first().prev(); |
| var anchorMethod = 'after'; |
| if ($anchor.length === 0) { |
| $anchor = $title.parent(); |
| anchorMethod = 'prepend'; |
| } |
| |
| // Some h2s are in their own container making it pretty hard to find the end, so skip. |
| if ($contents.length === 0) { |
| return; |
| } |
| |
| // Remove from DOM before messing with it. DOM is slow! |
| $section.detach(); |
| |
| // Add mobile-only expand arrows. |
| $title.prepend('<span class="dac-visible-mobile-inline-block">' + |
| '<i class="dac-toggle-expand dac-sprite dac-expand-more-black"></i>' + |
| '<i class="dac-toggle-collapse dac-sprite dac-expand-less-black"></i>' + |
| '</span>') |
| .attr('data-toggle', 'section'); |
| |
| // Wrap in magic markup. |
| $section = $section.wrapAll('<div class="dac-toggle dac-mobile">').parent(); |
| |
| // extra div used for max-height calculation. |
| $contents.wrapAll('<div class="dac-toggle-content dac-expand"><div>'); |
| |
| // Pre-expand section if requested. |
| if ($title.hasClass('is-expanded')) { |
| $section.addClass('is-expanded'); |
| } |
| |
| // Pre-expand section if targetted by hash. |
| if (location.hash && $section.find(location.hash).length) { |
| $section.addClass('is-expanded'); |
| } |
| |
| // Add it back to the dom. |
| $anchor[anchorMethod].call($anchor, $section); |
| }); |
| } |
| |
| // Similar to $.fn.nextUntil() except we need all nodes, jQuery skips text nodes. |
| function allNextUntil(elem, until) { |
| var matched = []; |
| |
| while ((elem = elem.nextSibling) && elem.nodeType !== 9) { |
| if (elem.nodeType === 1 && jQuery(elem).is(until)) { |
| break; |
| } |
| matched.push(elem); |
| } |
| return $(matched); |
| } |
| |
| $(function() { |
| initWidget(); |
| }); |
| })(jQuery); |
| |
| (function($, window) { |
| 'use strict'; |
| |
| // Blogger API info |
| var apiUrl = 'https://www.googleapis.com/blogger/v3'; |
| var apiKey = 'AIzaSyCFhbGnjW06dYwvRCU8h_zjdpS4PYYbEe8'; |
| |
| // Blog IDs can be found in the markup of the blog posts |
| var blogs = { |
| 'android-developers': { |
| id: '6755709643044947179', |
| title: 'Android Developers Blog' |
| } |
| }; |
| var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', |
| 'July', 'August', 'September', 'October', 'November', 'December']; |
| |
| var BlogReader = (function() { |
| var reader; |
| |
| function BlogReader() { |
| this.doneSetup = false; |
| } |
| |
| /** |
| * Initialize the blog reader and modal. |
| */ |
| BlogReader.prototype.setup = function() { |
| $('#jd-content').append( |
| '<div id="blog-reader" data-modal="blog-reader" class="dac-modal dac-has-small-header">' + |
| '<div class="dac-modal-container">' + |
| '<div class="dac-modal-window">' + |
| '<header class="dac-modal-header">' + |
| '<div class="dac-modal-header-actions">' + |
| '<a href="" class="dac-modal-header-open" target="_blank">' + |
| '<i class="dac-sprite dac-open-in-new"></i>' + |
| '</a>' + |
| '<button class="dac-modal-header-close" data-modal-toggle>' + |
| '</button>' + |
| '</div>' + |
| '<h2 class="norule dac-modal-header-title"></h2>' + |
| '</header>' + |
| '<div class="dac-modal-content dac-blog-reader">' + |
| '<time class="dac-blog-reader-date" pubDate></time>' + |
| '<h3 class="dac-blog-reader-title"></h3>' + |
| '<div class="dac-blog-reader-text clearfix"></div>' + |
| '</div>' + |
| '</div>' + |
| '</div>' + |
| '</div>'); |
| |
| this.blogReader = $('#blog-reader').dacModal(); |
| |
| this.doneSetup = true; |
| }; |
| |
| BlogReader.prototype.openModal_ = function(blog, post) { |
| var published = new Date(post.published); |
| var formattedDate = monthNames[published.getMonth()] + ' ' + published.getDate() + ' ' + published.getFullYear(); |
| this.blogReader.find('.dac-modal-header-open').attr('href', post.url); |
| this.blogReader.find('.dac-modal-header-title').text(blog.title); |
| this.blogReader.find('.dac-blog-reader-title').html(post.title); |
| this.blogReader.find('.dac-blog-reader-date').html(formattedDate); |
| this.blogReader.find('.dac-blog-reader-text').html(post.content); |
| this.blogReader.trigger('modal-open'); |
| }; |
| |
| /** |
| * Show a blog post in a modal |
| * @param {string} blogName - The name of the Blogspot blog. |
| * @param {string} postPath - The path to the blog post. |
| * @param {bool} secondTry - Has it failed once? |
| */ |
| BlogReader.prototype.showPost = function(blogName, postPath, secondTry) { |
| var blog = blogs[blogName]; |
| var postUrl = 'https://' + blogName + '.blogspot.com' + postPath; |
| |
| var url = apiUrl + '/blogs/' + blog.id + '/posts/bypath?path=' + encodeURIComponent(postPath) + '&key=' + apiKey; |
| $.ajax(url, {timeout: 650}).done(this.openModal_.bind(this, blog)).fail(function(error) { |
| // Retry once if we get an error |
| if (error.status === 500 && !secondTry) { |
| this.showPost(blogName, postPath, true); |
| } else { |
| window.location.href = postUrl; |
| } |
| }.bind(this)); |
| }; |
| |
| return { |
| getReader: function() { |
| if (!reader) { |
| reader = new BlogReader(); |
| } |
| return reader; |
| } |
| }; |
| })(); |
| |
| var blogReader = BlogReader.getReader(); |
| |
| function wrapLinkWithReader(e) { |
| var el = $(e.currentTarget); |
| if (el.hasClass('dac-modal-header-open')) { |
| return; |
| } |
| |
| // Only catch links on blogspot.com |
| var matches = el.attr('href').match(/https?:\/\/([^\.]*).blogspot.com([^$]*)/); |
| if (matches && matches.length === 3) { |
| var blogName = matches[1]; |
| var postPath = matches[2]; |
| |
| // Check if we have information about the blog |
| if (!blogs[blogName]) { |
| return; |
| } |
| |
| // Setup the first time it's used |
| if (!blogReader.doneSetup) { |
| blogReader.setup(); |
| } |
| |
| e.preventDefault(); |
| blogReader.showPost(blogName, postPath); |
| } |
| } |
| |
| $(document).on('click.blog-reader', 'a.resource-card[href*="blogspot.com/"]', |
| wrapLinkWithReader); |
| })(jQuery, window); |
| |
| (function($) { |
| $.fn.debounce = function(func, wait, immediate) { |
| var timeout; |
| |
| return function() { |
| var context = this; |
| var args = arguments; |
| |
| var later = function() { |
| timeout = null; |
| if (!immediate) { |
| func.apply(context, args); |
| } |
| }; |
| |
| var callNow = immediate && !timeout; |
| clearTimeout(timeout); |
| timeout = setTimeout(later, wait); |
| |
| if (callNow) { |
| func.apply(context, args); |
| } |
| }; |
| }; |
| })(jQuery); |
| |
| /* Calculate the vertical area remaining */ |
| (function($) { |
| $.fn.ellipsisfade = function() { |
| // Only fetch line-height of first element to avoid recalculate style. |
| // Will be NaN if no elements match, which is ok. |
| var lineHeight = parseInt(this.css('line-height'), 10); |
| |
| this.each(function() { |
| // get element text |
| var $this = $(this); |
| var remainingHeight = $this.parent().parent().height(); |
| $this.parent().siblings().each(function() { |
| var elHeight; |
| if ($(this).is(':visible')) { |
| elHeight = $(this).outerHeight(true); |
| remainingHeight = remainingHeight - elHeight; |
| } |
| }); |
| |
| var adjustedRemainingHeight = ((remainingHeight) / lineHeight >> 0) * lineHeight; |
| $this.parent().css({height: adjustedRemainingHeight}); |
| $this.css({height: 'auto'}); |
| }); |
| |
| return this; |
| }; |
| |
| /* Pass the line height to ellipsisfade() to adjust the height of the |
| text container to show the max number of lines possible, without |
| showing lines that are cut off. This works with the css ellipsis |
| classes to fade last text line and apply an ellipsis char. */ |
| function updateEllipsis(context) { |
| if (!(context instanceof jQuery)) { |
| context = $('html'); |
| } |
| |
| context.find('.card-info .text').ellipsisfade(); |
| } |
| |
| $(window).on('resize', $.fn.debounce(updateEllipsis, 500)); |
| $(updateEllipsis); |
| $('html').on('dac:domchange', function(e) { updateEllipsis($(e.target)); }); |
| })(jQuery); |
| |
| /* Filter */ |
| (function($) { |
| 'use strict'; |
| |
| /** |
| * A single filter item content. |
| * @type {string} - Element template. |
| * @private |
| */ |
| var ITEM_STR_ = '<input type="checkbox" value="{{value}}" class="dac-form-checkbox" id="{{id}}">' + |
| '<label for="{{id}}" class="dac-form-checkbox-button"></label>' + |
| '<label for="{{id}}" class="dac-form-label">{{name}}</label>'; |
| |
| /** |
| * Template for a chip element. |
| * @type {*|HTMLElement} |
| * @private |
| */ |
| var CHIP_BASE_ = $('<li class="dac-filter-chip">' + |
| '<button class="dac-filter-chip-close">' + |
| '<i class="dac-sprite dac-close-black dac-filter-chip-close-icon"></i>' + |
| '</button>' + |
| '</li>'); |
| |
| /** |
| * Component to handle narrowing down resources. |
| * @param {HTMLElement} el - The DOM element. |
| * @param {Object} options |
| * @constructor |
| */ |
| function Filter(el, options) { |
| this.el = $(el); |
| this.options = $.extend({}, Filter.DEFAULTS_, options); |
| this.init(); |
| } |
| |
| Filter.DEFAULTS_ = { |
| activeClass: 'dac-active', |
| chipsDataAttr: 'filter-chips', |
| nameDataAttr: 'filter-name', |
| countDataAttr: 'filter-count', |
| tabViewDataAttr: 'tab-view', |
| valueDataAttr: 'filter-value' |
| }; |
| |
| /** |
| * Draw resource cards. |
| * @param {Array} resources |
| * @private |
| */ |
| Filter.prototype.draw_ = function(resources) { |
| var that = this; |
| |
| if (resources.length === 0) { |
| this.containerEl_.html('<p class="dac-filter-message">Nothing matches selected filters.</p>'); |
| return; |
| } |
| |
| // Draw resources. |
| that.containerEl_.resourceWidget(resources, that.data_.options); |
| }; |
| |
| /** |
| * Initialize a Filter component. |
| */ |
| Filter.prototype.init = function() { |
| this.containerEl_ = $(this.options.filter); |
| |
| // Setup data settings |
| this.data_ = {}; |
| this.data_.chips = {}; |
| this.data_.options = this.containerEl_.widgetOptions(); |
| this.data_.all = window.metadata.query(this.data_.options); |
| |
| // Initialize filter UI |
| this.initUi(); |
| }; |
| |
| /** |
| * Generate a chip for a given filter item. |
| * @param {Object} item - A single filter option (checkbox container). |
| * @returns {HTMLElement} A new Chip element. |
| */ |
| Filter.prototype.chipForItem = function(item) { |
| var chip = CHIP_BASE_.clone(); |
| chip.prepend(this.data_.chips[item.data('filter-value')]); |
| chip.data('item.dac-filter', item); |
| item.data('chip.dac-filter', chip); |
| this.addToItemValue(item, 1); |
| return chip[0]; |
| }; |
| |
| /** |
| * Update count of checked filter items. |
| * @param {Object} item - A single filter option (checkbox container). |
| * @param {Number} value - Either -1 or 1. |
| */ |
| Filter.prototype.addToItemValue = function(item, value) { |
| var tab = item.parent().data(this.options.tabViewDataAttr); |
| var countEl = this.countEl_.filter('[data-' + this.options.countDataAttr + '="' + tab + '"]'); |
| var count = value + parseInt(countEl.text(), 10); |
| countEl.text(count); |
| countEl.toggleClass('dac-disabled', count === 0); |
| }; |
| |
| /** |
| * Set event listeners. |
| * @private |
| */ |
| Filter.prototype.setEventListeners_ = function() { |
| this.chipsEl_.on('click.dac-filter', '.dac-filter-chip-close', this.closeChipHandler_.bind(this)); |
| this.tabViewEl_.on('change.dac-filter', ':checkbox', this.toggleCheckboxHandler_.bind(this)); |
| }; |
| |
| /** |
| * Check filter items that are active by default. |
| */ |
| Filter.prototype.activateInitialFilters_ = function() { |
| var id = (new Date()).getTime(); |
| var initiallyCheckedValues = this.data_.options.query.replace(/,\s*/g, '+').split('+'); |
| var chips = document.createDocumentFragment(); |
| var that = this; |
| |
| this.items_.each(function(i) { |
| var item = $(this); |
| var opts = item.data(); |
| that.data_.chips[opts.filterValue] = opts.filterName; |
| |
| var checkbox = $(ITEM_STR_.replace(/\{\{name\}\}/g, opts.filterName) |
| .replace(/\{\{value\}\}/g, opts.filterValue) |
| .replace(/\{\{id\}\}/g, 'filter-' + id + '-' + (i + 1))); |
| |
| if (initiallyCheckedValues.indexOf(opts.filterValue) > -1) { |
| checkbox[0].checked = true; |
| chips.appendChild(that.chipForItem(item)); |
| } |
| |
| item.append(checkbox); |
| }); |
| |
| this.chipsEl_.append(chips); |
| }; |
| |
| /** |
| * Initialize the Filter view |
| */ |
| Filter.prototype.initUi = function() { |
| // Cache DOM elements |
| this.chipsEl_ = this.el.find('[data-' + this.options.chipsDataAttr + ']'); |
| this.countEl_ = this.el.find('[data-' + this.options.countDataAttr + ']'); |
| this.tabViewEl_ = this.el.find('[data-' + this.options.tabViewDataAttr + ']'); |
| this.items_ = this.el.find('[data-' + this.options.nameDataAttr + ']'); |
| |
| // Setup UI |
| this.draw_(this.data_.all); |
| this.activateInitialFilters_(); |
| this.setEventListeners_(); |
| }; |
| |
| /** |
| * @returns {[types|Array, tags|Array, category|Array]} |
| */ |
| Filter.prototype.getActiveClauses = function() { |
| var tags = []; |
| var types = []; |
| var categories = []; |
| |
| this.items_.find(':checked').each(function(i, checkbox) { |
| // Currently, there is implicit business logic here that `tag` is AND'ed together |
| // while `type` is OR'ed. So , and + do the same thing here. It would be great to |
| // reuse the same query engine for filters, but it would need more powerful syntax. |
| // Probably parenthesis, to support "tag:dog + tag:cat + (type:video, type:blog)" |
| var expression = $(checkbox).val(); |
| var regex = /(\w+):(\w+)/g; |
| var match; |
| |
| while (match = regex.exec(expression)) { |
| switch (match[1]) { |
| case 'category': |
| categories.push(match[2]); |
| break; |
| case 'tag': |
| tags.push(match[2]); |
| break; |
| case 'type': |
| types.push(match[2]); |
| break; |
| } |
| } |
| }); |
| |
| return [types, tags, categories]; |
| }; |
| |
| /** |
| * Actual filtering logic. |
| * @returns {Array} |
| */ |
| Filter.prototype.filteredResources = function() { |
| var data = this.getActiveClauses(); |
| var types = data[0]; |
| var tags = data[1]; |
| var categories = data[2]; |
| var resources = []; |
| var resource = {}; |
| var tag = ''; |
| var shouldAddResource = true; |
| |
| for (var resourceIndex = 0; resourceIndex < this.data_.all.length; resourceIndex++) { |
| resource = this.data_.all[resourceIndex]; |
| shouldAddResource = types.indexOf(resource.type) > -1; |
| |
| if (categories && categories.length > 0) { |
| shouldAddResource = shouldAddResource && categories.indexOf(resource.category) > -1; |
| } |
| |
| for (var tagIndex = 0; shouldAddResource && tagIndex < tags.length; tagIndex++) { |
| tag = tags[tagIndex]; |
| shouldAddResource = resource.tags.indexOf(tag) > -1; |
| } |
| |
| if (shouldAddResource) { |
| resources.push(resource); |
| } |
| } |
| |
| return resources; |
| }; |
| |
| /** |
| * Close Chip Handler |
| * @param {Event} event - Click event |
| * @private |
| */ |
| Filter.prototype.closeChipHandler_ = function(event) { |
| var chip = $(event.currentTarget).parent(); |
| var checkbox = chip.data('item.dac-filter').find(':first-child')[0]; |
| checkbox.checked = false; |
| this.changeStateForCheckbox(checkbox); |
| }; |
| |
| /** |
| * Handle filter item state change. |
| * @param {Event} event - Change event |
| * @private |
| */ |
| Filter.prototype.toggleCheckboxHandler_ = function(event) { |
| this.changeStateForCheckbox(event.currentTarget); |
| }; |
| |
| /** |
| * Redraw resource view based on new state. |
| * @param checkbox |
| */ |
| Filter.prototype.changeStateForCheckbox = function(checkbox) { |
| var item = $(checkbox).parent(); |
| |
| if (checkbox.checked) { |
| this.chipsEl_.append(this.chipForItem(item)); |
| devsite.analytics.trackAnalyticsEvent('event', |
| 'Filters', 'Check', $(checkbox).val()); |
| } else { |
| item.data('chip.dac-filter').remove(); |
| this.addToItemValue(item, -1); |
| devsite.analytics.trackAnalyticsEvent('event', |
| 'Filters', 'Uncheck', $(checkbox).val()); |
| } |
| |
| this.draw_(this.filteredResources()); |
| }; |
| |
| /** |
| * jQuery plugin |
| */ |
| $.fn.dacFilter = function() { |
| return this.each(function() { |
| var el = $(this); |
| new Filter(el, el.data()); |
| }); |
| }; |
| |
| /** |
| * Data Attribute API |
| */ |
| $(function() { |
| $('[data-filter]').dacFilter(); |
| }); |
| })(jQuery); |
| |
| (function($) { |
| 'use strict'; |
| |
| /** |
| * Toggle Floating Label state. |
| * @param {HTMLElement} el - The DOM element. |
| * @param options |
| * @constructor |
| */ |
| function FloatingLabel(el, options) { |
| this.el = $(el); |
| this.options = $.extend({}, FloatingLabel.DEFAULTS_, options); |
| this.group = this.el.closest('.dac-form-input-group'); |
| this.input = this.group.find('.dac-form-input'); |
| |
| this.checkValue_ = this.checkValue_.bind(this); |
| this.checkValue_(); |
| |
| this.input.on('focus', function() { |
| this.group.addClass('dac-focused'); |
| }.bind(this)); |
| this.input.on('blur', function() { |
| this.group.removeClass('dac-focused'); |
| this.checkValue_(); |
| }.bind(this)); |
| this.input.on('keyup', this.checkValue_); |
| } |
| |
| /** |
| * The label is moved out of the textbox when it has a value. |
| */ |
| FloatingLabel.prototype.checkValue_ = function() { |
| if (this.input.val().length) { |
| this.group.addClass('dac-has-value'); |
| } else { |
| this.group.removeClass('dac-has-value'); |
| } |
| }; |
| |
| /** |
| * jQuery plugin |
| * @param {object} options - Override default options. |
| */ |
| $.fn.dacFloatingLabel = function(options) { |
| return this.each(function() { |
| new FloatingLabel(this, options); |
| }); |
| }; |
| |
| $(document).on('ready.aranja', function() { |
| $('.dac-form-floatlabel').each(function() { |
| $(this).dacFloatingLabel($(this).data()); |
| }); |
| }); |
| })(jQuery); |
| |
| (function($) { |
| 'use strict'; |
| |
| /** |
| * @param {HTMLElement} el - The DOM element. |
| * @param {Object} options |
| * @constructor |
| */ |
| function Crumbs(selected, options) { |
| this.options = $.extend({}, Crumbs.DEFAULTS_, options); |
| this.el = $(this.options.container); |
| |
| // Do not build breadcrumbs for landing site. |
| if (!selected || location.pathname === '/index.html' || location.pathname === '/') { |
| return; |
| } |
| |
| // Cache navigation resources |
| this.selected = $(selected); |
| this.selectedParent = this.selected.closest('.dac-nav-secondary').siblings('a'); |
| |
| // Build the breadcrumb list. |
| this.init(); |
| } |
| |
| Crumbs.DEFAULTS_ = { |
| container: '.dac-header-crumbs', |
| crumbItem: $('<li class="dac-header-crumbs-item">'), |
| linkClass: 'dac-header-crumbs-link' |
| }; |
| |
| Crumbs.prototype.init = function() { |
| Crumbs.buildCrumbForLink(this.selected.clone()).appendTo(this.el); |
| |
| if (this.selectedParent.length) { |
| Crumbs.buildCrumbForLink(this.selectedParent.clone()).prependTo(this.el); |
| } |
| |
| // Reveal the breadcrumbs |
| this.el.addClass('dac-has-content'); |
| }; |
| |
| /** |
| * Build a HTML structure for a breadcrumb. |
| * @param {string} link |
| * @return {jQuery} |
| */ |
| Crumbs.buildCrumbForLink = function(link) { |
| link.find('br').replaceWith(' '); |
| |
| var crumbLink = $('<a>') |
| .attr('class', Crumbs.DEFAULTS_.linkClass) |
| .attr('href', link.attr('href')) |
| .text(link.text()); |
| |
| return Crumbs.DEFAULTS_.crumbItem.clone().append(crumbLink); |
| }; |
| |
| /** |
| * jQuery plugin |
| */ |
| $.fn.dacCrumbs = function(options) { |
| return this.each(function() { |
| new Crumbs(this, options); |
| }); |
| }; |
| })(jQuery); |
| |
| (function($) { |
| 'use strict'; |
| |
| /** |
| * @param {HTMLElement} el - The DOM element. |
| * @param {Object} options |
| * @constructor |
| */ |
| function SearchInput(el, options) { |
| this.el = $(el); |
| this.options = $.extend({}, SearchInput.DEFAULTS_, options); |
| this.body = $('body'); |
| this.input = this.el.find('input'); |
| this.close = this.el.find(this.options.closeButton); |
| this.clear = this.el.find(this.options.clearButton); |
| this.icon = this.el.find('.' + this.options.iconClass); |
| this.init(); |
| } |
| |
| SearchInput.DEFAULTS_ = { |
| activeClass: 'dac-active', |
| activeIconClass: 'dac-search', |
| closeButton: '[data-search-close]', |
| clearButton: '[data-search-clear]', |
| hiddenClass: 'dac-hidden', |
| iconClass: 'dac-header-search-icon', |
| searchModeClass: 'dac-search-mode', |
| transitionDuration: 250 |
| }; |
| |
| SearchInput.prototype.init = function() { |
| this.input.on('focus.dac-search', this.setActiveState.bind(this)) |
| .on('input.dac-search', this.checkInputValue.bind(this)); |
| this.close.on('click.dac-search', this.unsetActiveStateHandler_.bind(this)); |
| this.clear.on('click.dac-search', this.clearInput.bind(this)); |
| }; |
| |
| SearchInput.prototype.setActiveState = function() { |
| var that = this; |
| |
| this.clear.addClass(this.options.hiddenClass); |
| this.body.addClass(this.options.searchModeClass); |
| this.checkInputValue(); |
| |
| // Set icon to black after background has faded to white. |
| setTimeout(function() { |
| that.icon.addClass(that.options.activeIconClass); |
| }, this.options.transitionDuration); |
| }; |
| |
| SearchInput.prototype.unsetActiveStateHandler_ = function(event) { |
| event.preventDefault(); |
| this.unsetActiveState(); |
| }; |
| |
| SearchInput.prototype.unsetActiveState = function() { |
| this.icon.removeClass(this.options.activeIconClass); |
| this.clear.addClass(this.options.hiddenClass); |
| this.body.removeClass(this.options.searchModeClass); |
| }; |
| |
| SearchInput.prototype.clearInput = function(event) { |
| event.preventDefault(); |
| this.input.val(''); |
| this.clear.addClass(this.options.hiddenClass); |
| }; |
| |
| SearchInput.prototype.checkInputValue = function() { |
| if (this.input.val().length) { |
| this.clear.removeClass(this.options.hiddenClass); |
| } else { |
| this.clear.addClass(this.options.hiddenClass); |
| } |
| }; |
| |
| /** |
| * jQuery plugin |
| * @param {object} options - Override default options. |
| */ |
| $.fn.dacSearchInput = function() { |
| return this.each(function() { |
| var el = $(this); |
| el.data('search-input.dac', new SearchInput(el, el.data())); |
| }); |
| }; |
| |
| /** |
| * Data Attribute API |
| */ |
| $(function() { |
| $('[data-search]').dacSearchInput(); |
| }); |
| })(jQuery); |
| |
| /* global METADATA */ |
| (function($) { |
| function DacCarouselQuery(el) { |
| el = $(el); |
| |
| var opts = el.data(); |
| opts.maxResults = parseInt(opts.maxResults || '100', 10); |
| opts.query = opts.carouselQuery; |
| var resources = window.metadata.query(opts); |
| |
| el.empty(); |
| $(resources).each(function() { |
| var resource = $.extend({}, this, METADATA.carousel[this.url]); |
| el.dacHero(resource); |
| }); |
| |
| // Pagination element. |
| el.append('<div class="dac-hero-carousel-pagination"><div class="wrap" data-carousel-pagination>'); |
| |
| el.dacCarousel(); |
| } |
| |
| // jQuery plugin |
| $.fn.dacCarouselQuery = function() { |
| return this.each(function() { |
| var el = $(this); |
| var data = el.data('dac.carouselQuery'); |
| |
| if (!data) { el.data('dac.carouselQuery', (data = new DacCarouselQuery(el))); } |
| }); |
| }; |
| |
| // Data API |
| $(function() { |
| $('[data-carousel-query]').dacCarouselQuery(); |
| }); |
| })(jQuery); |
| |
| (function($) { |
| /** |
| * A CSS based carousel, inspired by SequenceJS. |
| * @param {jQuery} el |
| * @param {object} options |
| * @constructor |
| */ |
| function DacCarousel(el, options) { |
| this.el = $(el); |
| this.options = options = $.extend({}, DacCarousel.OPTIONS, this.el.data(), options || {}); |
| this.frames = this.el.find(options.frameSelector); |
| this.count = this.frames.size(); |
| this.current = options.start; |
| |
| this.initPagination(); |
| this.initEvents(); |
| this.initFrame(); |
| } |
| |
| DacCarousel.OPTIONS = { |
| auto: true, |
| autoTime: 10000, |
| autoMinTime: 5000, |
| btnPrev: '[data-carousel-prev]', |
| btnNext: '[data-carousel-next]', |
| frameSelector: 'article', |
| loop: true, |
| start: 0, |
| swipeThreshold: 160, |
| pagination: '[data-carousel-pagination]' |
| }; |
| |
| DacCarousel.prototype.initPagination = function() { |
| this.pagination = $([]); |
| if (!this.options.pagination) { return; } |
| |
| var pagination = $('<ul class="dac-pagination">'); |
| var parent = this.el; |
| if (typeof this.options.pagination === 'string') { parent = this.el.find(this.options.pagination); } |
| |
| if (this.count > 1) { |
| for (var i = 0; i < this.count; i++) { |
| var li = $('<li class="dac-pagination-item">').text(i); |
| if (i === this.options.start) { li.addClass('active'); } |
| li.click(this.go.bind(this, i)); |
| |
| pagination.append(li); |
| } |
| this.pagination = pagination.children(); |
| parent.append(pagination); |
| } |
| }; |
| |
| DacCarousel.prototype.initEvents = function() { |
| var that = this; |
| |
| this.touch = { |
| start: {x: 0, y: 0}, |
| end: {x: 0, y: 0} |
| }; |
| |
| this.el.on('touchstart', this.touchstart_.bind(this)); |
| this.el.on('touchend', this.touchend_.bind(this)); |
| this.el.on('touchmove', this.touchmove_.bind(this)); |
| |
| this.el.hover(function() { |
| that.pauseRotateTimer(); |
| }, function() { |
| that.startRotateTimer(); |
| }); |
| |
| $(this.options.btnPrev).click(function(e) { |
| e.preventDefault(); |
| that.prev(); |
| }); |
| |
| $(this.options.btnNext).click(function(e) { |
| e.preventDefault(); |
| that.next(); |
| }); |
| }; |
| |
| DacCarousel.prototype.touchstart_ = function(event) { |
| var t = event.originalEvent.touches[0]; |
| this.touch.start = {x: t.screenX, y: t.screenY}; |
| }; |
| |
| DacCarousel.prototype.touchend_ = function() { |
| var deltaX = this.touch.end.x - this.touch.start.x; |
| var deltaY = Math.abs(this.touch.end.y - this.touch.start.y); |
| var shouldSwipe = (deltaY < Math.abs(deltaX)) && (Math.abs(deltaX) >= this.options.swipeThreshold); |
| |
| if (shouldSwipe) { |
| if (deltaX > 0) { |
| this.prev(); |
| } else { |
| this.next(); |
| } |
| } |
| }; |
| |
| DacCarousel.prototype.touchmove_ = function(event) { |
| var t = event.originalEvent.touches[0]; |
| this.touch.end = {x: t.screenX, y: t.screenY}; |
| }; |
| |
| DacCarousel.prototype.initFrame = function() { |
| this.frames.removeClass('active').eq(this.options.start).addClass('active'); |
| }; |
| |
| DacCarousel.prototype.startRotateTimer = function() { |
| if (!this.options.auto || this.rotateTimer) { return; } |
| this.rotateTimer = setTimeout(this.next.bind(this), this.options.autoTime); |
| }; |
| |
| DacCarousel.prototype.pauseRotateTimer = function() { |
| clearTimeout(this.rotateTimer); |
| this.rotateTimer = null; |
| }; |
| |
| DacCarousel.prototype.prev = function() { |
| this.go(this.current - 1); |
| }; |
| |
| DacCarousel.prototype.next = function() { |
| this.go(this.current + 1); |
| }; |
| |
| DacCarousel.prototype.go = function(next) { |
| // Figure out what the next slide is. |
| while (this.count > 0 && next >= this.count) { next -= this.count; } |
| while (next < 0) { next += this.count; } |
| |
| // Cancel if we're already on that slide. |
| if (next === this.current) { return; } |
| |
| // Prepare next slide. |
| this.frames.eq(next).removeClass('out'); |
| |
| // Recalculate styles before starting slide transition. |
| this.el.resolveStyles(); |
| // Update pagination |
| this.pagination.removeClass('active').eq(next).addClass('active'); |
| |
| // Transition out current frame |
| this.frames.eq(this.current).toggleClass('active out'); |
| |
| // Transition in a new frame |
| this.frames.eq(next).toggleClass('active'); |
| |
| this.current = next; |
| }; |
| |
| // Helper which resolves new styles for an element, so it can start transitioning |
| // from the new values. |
| $.fn.resolveStyles = function() { |
| /*jshint expr:true*/ |
| this[0] && this[0].offsetTop; |
| return this; |
| }; |
| |
| // jQuery plugin |
| $.fn.dacCarousel = function() { |
| this.each(function() { |
| var $el = $(this); |
| $el.data('dac-carousel', new DacCarousel(this)); |
| }); |
| return this; |
| }; |
| |
| // Data API |
| $(function() { |
| $('[data-carousel]').dacCarousel(); |
| }); |
| })(jQuery); |
| |
| /* global toRoot */ |
| |
| (function($) { |
| // Ordering matters |
| var TAG_MAP = [ |
| {from: 'developerstory', to: 'Android Developer Story'}, |
| {from: 'googleplay', to: 'Google Play'} |
| ]; |
| |
| function DacHero(el, resource, isSearch) { |
| var slide = $('<article>'); |
| slide.addClass(isSearch ? 'dac-search-hero' : 'dac-expand dac-hero'); |
| var image = cleanUrl(resource.heroImage || resource.image); |
| var fullBleed = image && !resource.heroColor; |
| |
| if (!isSearch) { |
| // Configure background |
| slide.css({ |
| backgroundImage: fullBleed ? 'url(' + image + ')' : '', |
| backgroundColor: resource.heroColor || '' |
| }); |
| |
| // Should copy be inverted |
| slide.toggleClass('dac-invert', resource.heroInvert || fullBleed); |
| slide.toggleClass('dac-darken', fullBleed); |
| |
| // Should be clickable |
| slide.append($('<a class="dac-hero-carousel-action">').attr('href', cleanUrl(resource.url))); |
| } |
| |
| var cols = $('<div class="cols dac-hero-content">'); |
| |
| // inline image column |
| var rightCol = $('<div class="col-1of2 col-push-1of2 dac-hero-figure">') |
| .appendTo(cols); |
| |
| if ((!fullBleed || isSearch) && image) { |
| rightCol.append($('<img>').attr('src', image)); |
| } |
| |
| // info column |
| $('<div class="col-1of2 col-pull-1of2">') |
| .append($('<div class="dac-hero-tag">').text(formatTag(resource))) |
| .append($('<h1 class="dac-hero-title">').text(formatTitle(resource))) |
| .append($('<p class="dac-hero-description">').text(resource.summary)) |
| .append($('<a class="dac-hero-cta">') |
| .text(formatCTA(resource)) |
| .attr('href', cleanUrl(resource.url)) |
| .prepend($('<span class="dac-sprite dac-auto-chevron">')) |
| ) |
| .appendTo(cols); |
| |
| slide.append(cols.wrap('<div class="wrap">').parent()); |
| el.append(slide); |
| } |
| |
| function cleanUrl(url) { |
| if (url && url.indexOf('//') === -1) { |
| url = toRoot + url; |
| } |
| return url; |
| } |
| |
| function formatTag(resource) { |
| // Hmm, need a better more scalable solution for this. |
| for (var i = 0, mapping; mapping = TAG_MAP[i]; i++) { |
| if (resource.tags.indexOf(mapping.from) > -1) { |
| return mapping.to; |
| } |
| } |
| return resource.type; |
| } |
| |
| function formatTitle(resource) { |
| return resource.title.replace(/android developer story: /i, ''); |
| } |
| |
| function formatCTA(resource) { |
| return resource.type === 'youtube' ? 'Watch the video' : 'Learn more'; |
| } |
| |
| // jQuery plugin |
| $.fn.dacHero = function(resource, isSearch) { |
| return this.each(function() { |
| var el = $(this); |
| return new DacHero(el, resource, isSearch); |
| }); |
| }; |
| })(jQuery); |
| |
| (function($) { |
| 'use strict'; |
| |
| function highlightString(label, query) { |
| query = query || ''; |
| //query = query.replace('<wbr>', '').replace('.', '\\.'); |
| var queryRE = new RegExp('(' + query + ')', 'ig'); |
| return label.replace(queryRE, '<em>$1</em>'); |
| } |
| |
| $.fn.highlightMatches = function(query) { |
| return this.each(function() { |
| var el = $(this); |
| var label = el.html(); |
| var highlighted = highlightString(label, query); |
| el.html(highlighted); |
| el.addClass('highlighted'); |
| }); |
| }; |
| })(jQuery); |
| |
| /** |
| * History tracking. |
| * Track visited urls in localStorage. |
| */ |
| (function($) { |
| var PAGES_TO_STORE_ = 100; |
| var MIN_NUMBER_OF_PAGES_TO_DISPLAY_ = 6; |
| var CONTAINER_SELECTOR_ = '.dac-search-results-history-wrap'; |
| |
| /** |
| * Generate resource cards for visited pages. |
| * @param {HTMLElement} el |
| * @constructor |
| */ |
| function HistoryQuery(el) { |
| this.el = $(el); |
| |
| // Only show history component if enough pages have been visited. |
| if (getVisitedPages().length < MIN_NUMBER_OF_PAGES_TO_DISPLAY_) { |
| this.el.closest(CONTAINER_SELECTOR_).addClass('dac-hidden'); |
| return; |
| } |
| |
| // Rename query |
| this.el.data('query', this.el.data('history-query')); |
| |
| // jQuery method to populate cards. |
| this.el.resourceWidget(); |
| } |
| |
| /** |
| * Fetch from localStorage an array of visted pages |
| * @returns {Array} |
| */ |
| function getVisitedPages() { |
| var visited = localStorage.getItem('visited-pages'); |
| return visited ? JSON.parse(visited) : []; |
| } |
| |
| /** |
| * Return a page corresponding to cuurent pathname. If none exists, create one. |
| * @param {Array} pages |
| * @param {String} path |
| * @returns {Object} Page |
| */ |
| function getPageForPath(pages, path) { |
| var page; |
| |
| // Backwards lookup for current page, last pages most likely to be visited again. |
| for (var i = pages.length - 1; i >= 0; i--) { |
| if (pages[i].path === path) { |
| page = pages[i]; |
| |
| // Remove page object from pages list to ensure correct ordering. |
| pages.splice(i, 1); |
| |
| return page; |
| } |
| } |
| |
| // If storage limit is exceeded, remove last visited path. |
| if (pages.length >= PAGES_TO_STORE_) { |
| pages.shift(); |
| } |
| |
| return {path: path}; |
| } |
| |
| /** |
| * Add current page to back of visited array, increase hit count by 1. |
| */ |
| function addCurrectPage() { |
| var path = location.pathname; |
| |
| // Do not track frontpage visits. |
| if (path === '/' || path === '/index.html') {return;} |
| |
| var pages = getVisitedPages(); |
| var page = getPageForPath(pages, path); |
| |
| // New page visits have no hit count. |
| page.hit = ~~page.hit + 1; |
| |
| // Most recently visted pages are located at the end of the visited array. |
| pages.push(page); |
| |
| localStorage.setItem('visited-pages', JSON.stringify(pages)); |
| } |
| |
| /** |
| * Hit count compare function. |
| * @param {Object} a - page |
| * @param {Object} b - page |
| * @returns {number} |
| */ |
| function byHit(a, b) { |
| if (a.hit > b.hit) { |
| return -1; |
| } else if (a.hit < b.hit) { |
| return 1; |
| } |
| |
| return 0; |
| } |
| |
| /** |
| * Return a list of visited urls in a given order. |
| * @param {String} order - (recent|most-visited) |
| * @returns {Array} |
| */ |
| $.dacGetVisitedUrls = function(order) { |
| var pages = getVisitedPages(); |
| |
| if (order === 'recent') { |
| pages.reverse(); |
| } else { |
| pages.sort(byHit); |
| } |
| |
| return pages.map(function(page) { |
| return page.path.replace(/^\//, ''); |
| }); |
| }; |
| |
| // jQuery plugin |
| $.fn.dacHistoryQuery = function() { |
| return this.each(function() { |
| var el = $(this); |
| var data = el.data('dac.recentlyVisited'); |
| |
| if (!data) { |
| el.data('dac.recentlyVisited', (data = new HistoryQuery(el))); |
| } |
| }); |
| }; |
| |
| $(function() { |
| $('[data-history-query]').dacHistoryQuery(); |
| // Do not block page rendering. |
| setTimeout(addCurrectPage, 0); |
| }); |
| })(jQuery); |
| |
| /* ############################################ */ |
| /* ########## LOCALIZATION ############ */ |
| /* ############################################ */ |
| /** |
| * Global helpers. |
| */ |
| function getBaseUri(uri) { |
| var intlUrl = (uri.substring(0, 6) === '/intl/'); |
| if (intlUrl) { |
| var base = uri.substring(uri.indexOf('intl/') + 5, uri.length); |
| base = base.substring(base.indexOf('/') + 1, base.length); |
| return '/' + base; |
| } else { |
| return uri; |
| } |
| } |
| |
| function changeLangPref(targetLang, submit) { |
| window.writeCookie('pref_lang', targetLang, null); |
| $('#language').find('option[value="' + targetLang + '"]').attr('selected', true); |
| if (submit) { |
| $('#setlang').submit(); |
| } |
| } |
| // Redundant usage to appease jshint. |
| window.changeLangPref = changeLangPref; |
| |
| (function() { |
| /** |
| * Whitelisted locales. Should match choices in language dropdown. Repeated here |
| * as a lot of i18n logic happens before page load and dropdown is ready. |
| */ |
| var LANGUAGES = [ |
| 'en', |
| 'es', |
| 'id', |
| 'ja', |
| 'ko', |
| 'pt-br', |
| 'ru', |
| 'vi', |
| 'zh-cn', |
| 'zh-tw' |
| ]; |
| |
| /** |
| * Master list of translated strings for template files. |
| */ |
| var PHRASES = { |
| 'newsletter': { |
| 'title': 'Get the latest Android developer news and tips that will help you find success on Google Play.', |
| 'requiredHint': '* Required Fields', |
| 'name': 'Full name', |
| 'email': 'Email address', |
| 'company': 'Company / developer name', |
| 'appUrl': 'One of your Play Store app URLs', |
| 'business': { |
| 'label': 'Which best describes your business:', |
| 'apps': 'Apps', |
| 'games': 'Games', |
| 'both': 'Apps & Games' |
| }, |
| 'confirmMailingList': 'Add me to the mailing list for the monthly newsletter and occasional emails about ' + |
| 'development and Google Play opportunities.', |
| 'privacyPolicy': 'I acknowledge that the information provided in this form will be subject to Google\'s ' + |
| '<a href="https://www.google.com/policies/privacy/" target="_blank">privacy policy</a>.', |
| 'languageVal': 'English', |
| 'successTitle': 'Hooray!', |
| 'successDetails': 'You have successfully signed up for the latest Android developer news and tips.', |
| 'languageValTarget': { |
| 'en': 'English', |
| 'ar': 'Arabic (العربيّة)', |
| 'id': 'Indonesian (Bahasa)', |
| 'fr': 'French (français)', |
| 'de': 'German (Deutsch)', |
| 'ja': 'Japanese (日本語)', |
| 'ko': 'Korean (한국어)', |
| 'ru': 'Russian (Русский)', |
| 'es': 'Spanish (español)', |
| 'th': 'Thai (ภาษาไทย)', |
| 'tr': 'Turkish (Türkçe)', |
| 'vi': 'Vietnamese (tiếng Việt)', |
| 'pt-br': 'Brazilian Portuguese (Português Brasileiro)', |
| 'zh-cn': 'Simplified Chinese (简体中文)', |
| 'zh-tw': 'Traditional Chinese (繁體中文)', |
| }, |
| 'resetLangTitle': "Browse this site in %{targetLang}?", |
| 'resetLangTextIntro': 'You requested a page in %{targetLang}, but your language preference for this site is %{lang}.', |
| 'resetLangTextCta': 'Would you like to change your language preference and browse this site in %{targetLang}? ' + |
| 'If you want to change your language preference later, use the language menu at the bottom of each page.', |
| 'resetLangButtonYes': 'Change Language', |
| 'resetLangButtonNo': 'Not Now' |
| } |
| }; |
| |
| /** |
| * Current locale. |
| */ |
| var locale = (function() { |
| var lang = window.readCookie('pref_lang'); |
| if (lang === 0 || LANGUAGES.indexOf(lang) === -1) { |
| lang = 'en'; |
| } |
| return lang; |
| })(); |
| var localeTarget = (function() { |
| var lang = getQueryVariable('hl'); |
| if (lang === false || LANGUAGES.indexOf(lang) === -1) { |
| lang = locale; |
| } |
| return lang; |
| })(); |
| |
| /** |
| * Global function shims for backwards compatibility |
| */ |
| window.changeNavLang = function() { |
| // Already done. |
| }; |
| |
| window.loadLangPref = function() { |
| // Languages pref already loaded. |
| }; |
| |
| window.getLangPref = function() { |
| return locale; |
| }; |
| |
| window.getLangTarget = function() { |
| return localeTarget; |
| }; |
| |
| // Expose polyglot instance for advanced localization. |
| var polyglot = window.polyglot = new window.Polyglot({ |
| locale: locale, |
| phrases: PHRASES |
| }); |
| |
| // When DOM is ready. |
| $(function() { |
| // Mark current locale in language picker. |
| $('#language').find('option[value="' + locale + '"]').attr('selected', true); |
| |
| $('html').dacTranslate().on('dac:domchange', function(e) { |
| $(e.target).dacTranslate(); |
| }); |
| }); |
| |
| $.fn.dacTranslate = function() { |
| // Translate strings in template markup: |
| |
| // OLD |
| // Having all translations in HTML does not scale well and bloats every page. |
| // Need to migrate this to data-l JS translations below. |
| if (locale !== 'en') { |
| var $links = this.find('a[' + locale + '-lang]'); |
| $links.each(function() { // for each link with a translation |
| var $link = $(this); |
| // put the desired language from the attribute as the text |
| $link.text($link.attr(locale + '-lang')); |
| }); |
| } |
| |
| // NEW |
| // A simple declarative api for JS translations. Feel free to extend as appropriate. |
| |
| // Miscellaneous string compilations |
| // Build full strings from localized substrings: |
| var myLocaleTarget = window.getLangTarget(); |
| var myTargetLang = window.polyglot.t("newsletter.languageValTarget." + myLocaleTarget); |
| var myLang = window.polyglot.t("newsletter.languageVal"); |
| var myTargetLangTitleString = window.polyglot.t("newsletter.resetLangTitle", {targetLang: myTargetLang}); |
| var myResetLangTextIntro = window.polyglot.t("newsletter.resetLangTextIntro", {targetLang: myTargetLang, lang: myLang}); |
| var myResetLangTextCta = window.polyglot.t("newsletter.resetLangTextCta", {targetLang: myTargetLang}); |
| //var myResetLangButtonYes = window.polyglot.t("newsletter.resetLangButtonYes", {targetLang: myTargetLang}); |
| |
| // Inject strings as text values in dialog components: |
| $("#langform .dac-modal-header-title").text(myTargetLangTitleString); |
| $("#langform #resetLangText").text(myResetLangTextIntro); |
| $("#langform #resetLangCta").text(myResetLangTextCta); |
| //$("#resetLangButtonYes").attr("data-t", window.polyglot.t(myResetLangButtonYes)); |
| |
| // Text: <div data-t="nav.home"></div> |
| // HTML: <div data-t="privacy" data-t-html></html> |
| this.find('[data-t]').each(function() { |
| var el = $(this); |
| var data = el.data(); |
| if (data.t) { |
| el[data.tHtml === '' ? 'html' : 'text'](polyglot.t(data.t)); |
| } |
| }); |
| |
| return this; |
| }; |
| })(); |
| /* ########## END LOCALIZATION ############ */ |
| |
| // Translations. These should eventually be moved into language-specific files and loaded on demand. |
| // jshint nonbsp:false |
| switch (window.getLangPref()) { |
| case 'ar': |
| window.polyglot.extend({ |
| 'newsletter': { |
| 'title': 'Google Play. يمكنك الحصول على آخر الأخبار والنصائح من مطوّري تطبيقات Android، مما يساعدك ' + |
| 'على تحقيق النجاح على', |
| 'requiredHint': '* حقول مطلوبة', |
| 'name': '. الاسم بالكامل ', |
| 'email': '. عنوان البريد الإلكتروني ', |
| 'company': '. اسم الشركة / اسم مطوّر البرامج', |
| 'appUrl': '. أحد عناوين URL لتطبيقاتك في متجر Play', |
| 'business': { |
| 'label': '. ما العنصر الذي يوضح طبيعة نشاطك التجاري بدقة؟ ', |
| 'apps': 'التطبيقات', |
| 'games': 'الألعاب', |
| 'both': 'التطبيقات والألعاب' |
| }, |
| 'confirmMailingList': 'إضافتي إلى القائمة البريدية للنشرة الإخبارية الشهرية والرسائل الإلكترونية التي يتم' + |
| ' إرسالها من حين لآخر بشأن التطوير وفرص Google Play.', |
| 'privacyPolicy': 'أقر بأن المعلومات المقدَّمة في هذا النموذج تخضع لسياسة خصوصية ' + |
| '<a href="https://www.google.com/intl/ar/policies/privacy/" target="_blank">Google</a>.', |
| 'languageVal': 'Arabic (العربيّة)', |
| 'successTitle': 'رائع!', |
| 'successDetails': 'لقد اشتركت بنجاح للحصول على آخر الأخبار والنصائح من مطوّري برامج Android.' |
| } |
| }); |
| break; |
| case 'zh-cn': |
| window.polyglot.extend({ |
| 'newsletter': { |
| 'title': '获取最新的 Android 开发者资讯和提示,助您在 Google Play 上取得成功。', |
| 'requiredHint': '* 必填字段', |
| 'name': '全名', |
| 'email': '电子邮件地址', |
| 'company': '公司/开发者名称', |
| 'appUrl': '您的某个 Play 商店应用网址', |
| 'business': { |
| 'label': '哪一项能够最准确地描述您的业务?', |
| 'apps': '应用', |
| 'games': '游戏', |
| 'both': '应用和游戏' |
| }, |
| 'confirmMailingList': '将我添加到邮寄名单,以便接收每月简报以及不定期发送的关于开发和 Google Play 商机的电子邮件。', |
| 'privacyPolicy': '我确认自己了解在此表单中提供的信息受 <a href="https://www.google.com/intl/zh-CN/' + |
| 'policies/privacy/" target="_blank">Google</a> 隐私权政策的约束。', |
| 'languageVal': 'Simplified Chinese (简体中文)', |
| 'successTitle': '太棒了!', |
| 'successDetails': '您已成功订阅最新的 Android 开发者资讯和提示。' |
| } |
| }); |
| break; |
| case 'zh-tw': |
| window.polyglot.extend({ |
| 'newsletter': { |
| 'title': '獲得 Android 開發人員的最新消息和各項秘訣,讓您在 Google Play 上輕鬆邁向成功之路。', |
| 'requiredHint': '* 必要欄位', |
| 'name': '全名', |
| 'email': '電子郵件地址', |
| 'company': '公司/開發人員名稱', |
| 'appUrl': '您其中一個 Play 商店應用程式的網址', |
| 'business': { |
| 'label': '為您的商家選取最合適的產品類別。', |
| 'apps': '應用程式', |
| 'games': '遊戲', |
| 'both': '應用程式和遊戲' |
| }, |
| 'confirmMailingList': '我想加入 Google Play 的郵寄清單,以便接收每月電子報和 Google Play 不定期寄送的電子郵件,' + |
| '瞭解關於開發和 Google Play 商機的資訊。', |
| 'privacyPolicy': '我瞭解,我在這張表單中提供的資訊將受到 <a href="' + |
| 'https://www.google.com/intl/zh-TW/policies/privacy/" target="_blank">Google</a> 隱私權政策.', |
| 'languageVal': 'Traditional Chinese (繁體中文)', |
| 'successTitle': '太棒了!', |
| 'successDetails': '您已經成功訂閱 Android 開發人員的最新消息和各項秘訣。' |
| } |
| }); |
| break; |
| case 'fr': |
| window.polyglot.extend({ |
| 'newsletter': { |
| 'title': 'Recevez les dernières actualités destinées aux développeurs Android, ainsi que des conseils qui ' + |
| 'vous mèneront vers le succès sur Google Play.', |
| 'requiredHint': '* Champs obligatoires', |
| 'name': 'Nom complet', |
| 'email': 'Adresse e-mail', |
| 'company': 'Nom de la société ou du développeur', |
| 'appUrl': 'Une de vos URL Play Store', |
| 'business': { |
| 'label': 'Quelle option décrit le mieux votre activité ?', |
| 'apps': 'Applications', |
| 'games': 'Jeux', |
| 'both': 'Applications et jeux' |
| }, |
| 'confirmMailingList': 'Ajoutez-moi à la liste de diffusion de la newsletter mensuelle et tenez-moi informé ' + |
| 'par des e-mails occasionnels de l\'évolution et des opportunités de Google Play.', |
| 'privacyPolicy': 'Je comprends que les renseignements fournis dans ce formulaire seront soumis aux <a href="' + |
| 'https://www.google.com/intl/fr/policies/privacy/" target="_blank">règles de confidentialité</a> de Google.', |
| 'languageVal': 'French (français)', |
| 'successTitle': 'Super !', |
| 'successDetails': 'Vous êtes bien inscrit pour recevoir les actualités et les conseils destinés aux ' + |
| 'développeurs Android.' |
| } |
| }); |
| break; |
| case 'de': |
| window.polyglot.extend({ |
| 'newsletter': { |
| 'title': 'Abonniere aktuelle Informationen und Tipps für Android-Entwickler und werde noch erfolgreicher ' + |
| 'bei Google Play.', |
| 'requiredHint': '* Pflichtfelder', |
| 'name': 'Vollständiger Name', |
| 'email': 'E-Mail-Adresse', |
| 'company': 'Unternehmens-/Entwicklername', |
| 'appUrl': 'Eine der URLs deiner Play Store App', |
| 'business': { |
| 'label': 'Welche der folgenden Kategorien beschreibt dein Unternehmen am besten?', |
| 'apps': 'Apps', |
| 'games': 'Spiele', |
| 'both': 'Apps und Spiele' |
| }, |
| 'confirmMailingList': 'Meine E-Mail-Adresse soll zur Mailingliste hinzugefügt werden, damit ich den ' + |
| 'monatlichen Newsletter sowie gelegentlich E-Mails zu Entwicklungen und Optionen bei Google Play erhalte.', |
| 'privacyPolicy': 'Ich bestätige, dass die in diesem Formular bereitgestellten Informationen gemäß der ' + |
| '<a href="https://www.google.com/intl/de/policies/privacy/" target="_blank">Datenschutzerklärung</a> von ' + |
| 'Google verwendet werden dürfen.', |
| 'languageVal': 'German (Deutsch)', |
| 'successTitle': 'Super!', |
| 'successDetails': 'Du hast dich erfolgreich angemeldet und erhältst jetzt aktuelle Informationen und Tipps ' + |
| 'für Android-Entwickler.' |
| } |
| }); |
| break; |
| case 'id': |
| window.polyglot.extend({ |
| 'newsletter': { |
| 'title': 'Receba as dicas e as notícias mais recentes para os desenvolvedores Android e seja bem-sucedido ' + |
| 'no Google Play.', |
| 'requiredHint': '* Bidang Wajib Diisi', |
| 'name': 'Nama lengkap', |
| 'email': 'Alamat email', |
| 'company': 'Nama pengembang / perusahaan', |
| 'appUrl': 'Salah satu URL aplikasi Play Store Anda', |
| 'business': { |
| 'label': 'Dari berikut ini, mana yang paling cocok dengan bisnis Anda?', |
| 'apps': 'Aplikasi', |
| 'games': 'Game', |
| 'both': 'Aplikasi dan Game' |
| }, |
| 'confirmMailingList': 'Tambahkan saya ke milis untuk mendapatkan buletin bulanan dan email sesekali mengenai ' + |
| 'perkembangan dan kesempatan yang ada di Google Play.', |
| 'privacyPolicy': 'Saya memahami bahwa informasi yang diberikan dalam formulir ini tunduk pada <a href="' + |
| 'https://www.google.com/intl/in/policies/privacy/" target="_blank">kebijakan privasi</a> Google.', |
| 'languageVal': 'Indonesian (Bahasa)', |
| 'successTitle': 'Hore!', |
| 'successDetails': 'Anda berhasil mendaftar untuk kiat dan berita pengembang Android terbaru.' |
| } |
| }); |
| break; |
| case 'it': |
| //window.polyglot.extend({ |
| // 'newsletter': { |
| // 'title': 'Receba as dicas e as notícias mais recentes para os desenvolvedores Android e seja bem-sucedido ' + |
| // 'no Google Play.', |
| // 'requiredHint': '* Campos obrigatórios', |
| // 'name': 'Nome completo', |
| // 'email': 'Endereço de Email', |
| // 'company': 'Nome da empresa / do desenvolvedor', |
| // 'appUrl': 'URL de um dos seus apps da Play Store', |
| // 'business': { |
| // 'label': 'Qual das seguintes opções melhor descreve sua empresa?', |
| // 'apps': 'Apps', |
| // 'games': 'Jogos', |
| // 'both': 'Apps e Jogos' |
| // }, |
| // 'confirmMailingList': 'Inscreva-me na lista de e-mails para que eu receba o boletim informativo mensal, ' + |
| // 'bem como e-mails ocasionais sobre o desenvolvimento e as oportunidades do Google Play.', |
| // 'privacyPolicy': 'Reconheço que as informações fornecidas neste formulário estão sujeitas à <a href="' + |
| // 'https://www.google.com.br/policies/privacy/" target="_blank">Política de Privacidade</a> do Google.', |
| // 'languageVal': 'Italian (italiano)', |
| // 'successTitle': 'Uhu!', |
| // 'successDetails': 'Você se inscreveu para receber as notícias e as dicas mais recentes para os ' + |
| // 'desenvolvedores Android.', |
| // } |
| //}); |
| break; |
| case 'ja': |
| window.polyglot.extend({ |
| 'newsletter': { |
| 'title': 'Google Play での成功に役立つ Android デベロッパー向けの最新ニュースやおすすめの情報をお届けします。', |
| 'requiredHint': '* 必須', |
| 'name': '氏名', |
| 'email': 'メールアドレス', |
| 'company': '会社名 / デベロッパー名', |
| 'appUrl': 'Play ストア アプリの URL(いずれか 1 つ)', |
| 'business': { |
| 'label': 'お客様のビジネスに最もよく当てはまるものをお選びください。', |
| 'apps': 'アプリ', |
| 'games': 'ゲーム', |
| 'both': 'アプリとゲーム' |
| }, |
| 'confirmMailingList': '開発や Google Play の最新情報に関する毎月発行のニュースレターや不定期発行のメールを受け取る', |
| 'privacyPolicy': 'このフォームに入力した情報に <a href="https://www.google.com/intl/ja/policies/privacy/" ' + |
| 'target="_blank">Google</a> のプライバシー ポリシーが適用', |
| 'languageVal': 'Japanese (日本語)', |
| 'successTitle': '完了です!', |
| 'successDetails': 'Android デベロッパー向けの最新ニュースやおすすめの情報の配信登録が完了しました。' |
| } |
| }); |
| break; |
| case 'ko': |
| window.polyglot.extend({ |
| 'newsletter': { |
| 'title': 'Google Play에서 성공을 거두는 데 도움이 되는 최신 Android 개발자 소식 및 도움말을 받아 보세요.', |
| 'requiredHint': '* 필수 입력란', |
| 'name': '이름', |
| 'email': '이메일 주소', |
| 'company': '회사/개발자 이름', |
| 'appUrl': 'Play 스토어 앱 URL 중 1개', |
| 'business': { |
| 'label': '다음 중 내 비즈니스를 가장 잘 설명하는 단어는 무엇인가요?', |
| 'apps': '앱', |
| 'games': '게임', |
| 'both': '앱 및 게임' |
| }, |
| 'confirmMailingList': '개발 및 Google Play 관련 소식에 관한 월별 뉴스레터 및 비정기 이메일을 받아보겠습니다.', |
| 'privacyPolicy': '이 양식에 제공한 정보는 <a href="https://www.google.com/intl/ko/policies/privacy/" ' + |
| 'target="_blank">Google의</a> 개인정보취급방침에 따라 사용됨을', |
| 'languageVal':'Korean (한국어)', |
| 'successTitle': '축하합니다!', |
| 'successDetails': '최신 Android 개발자 뉴스 및 도움말을 받아볼 수 있도록 가입을 완료했습니다.' |
| } |
| }); |
| break; |
| case 'pt-br': |
| window.polyglot.extend({ |
| 'newsletter': { |
| 'title': 'Receba as dicas e as notícias mais recentes para os desenvolvedores Android e seja bem-sucedido ' + |
| 'no Google Play.', |
| 'requiredHint': '* Campos obrigatórios', |
| 'name': 'Nome completo', |
| 'email': 'Endereço de Email', |
| 'company': 'Nome da empresa / do desenvolvedor', |
| 'appUrl': 'URL de um dos seus apps da Play Store', |
| 'business': { |
| 'label': 'Qual das seguintes opções melhor descreve sua empresa?', |
| 'apps': 'Apps', |
| 'games': 'Jogos', |
| 'both': 'Apps e Jogos' |
| }, |
| 'confirmMailingList': 'Inscreva-me na lista de e-mails para que eu receba o boletim informativo mensal, ' + |
| 'bem como e-mails ocasionais sobre o desenvolvimento e as oportunidades do Google Play.', |
| 'privacyPolicy': 'Reconheço que as informações fornecidas neste formulário estão sujeitas à <a href="' + |
| 'https://www.google.com.br/policies/privacy/" target="_blank">Política de Privacidade</a> do Google.', |
| 'languageVal': 'Brazilian Portuguese (Português Brasileiro)', |
| 'successTitle': 'Uhu!', |
| 'successDetails': 'Você se inscreveu para receber as notícias e as dicas mais recentes para os ' + |
| 'desenvolvedores Android.' |
| } |
| }); |
| break; |
| case 'ru': |
| window.polyglot.extend({ |
| 'newsletter': { |
| 'title': 'Хотите получать последние новости и советы для разработчиков Google Play? Заполните эту форму.', |
| 'requiredHint': '* Обязательные поля', |
| 'name': 'Полное имя', |
| 'email': 'Адрес электронной почты', |
| 'company': 'Название компании или имя разработчика', |
| 'appUrl': 'Ссылка на любое ваше приложение в Google Play', |
| 'business': { |
| 'label': 'Что вы создаете?', |
| 'apps': 'Приложения', |
| 'games': 'Игры', |
| 'both': 'Игры и приложения' |
| }, |
| 'confirmMailingList': 'Я хочу получать ежемесячную рассылку для разработчиков и другие полезные новости ' + |
| 'Google Play.', |
| 'privacyPolicy': 'Я предоставляю эти данные в соответствии с <a href="' + |
| 'https://www.google.com/intl/ru/policies/privacy/" target="_blank">Политикой конфиденциальности</a> Google.', |
| 'languageVal': 'Russian (Русский)', |
| 'successTitle': 'Поздравляем!', |
| 'successDetails': 'Теперь вы подписаны на последние новости и советы для разработчиков Android.' |
| } |
| }); |
| break; |
| case 'es': |
| window.polyglot.extend({ |
| 'newsletter': { |
| 'title': 'Recibe las últimas noticias y sugerencias para programadores de Android y logra tener éxito en ' + |
| 'Google Play.', |
| 'requiredHint': '* Campos obligatorios', |
| 'name': 'Dirección de correo electrónico', |
| 'email': 'Endereço de Email', |
| 'company': 'Nombre de la empresa o del programador', |
| 'appUrl': 'URL de una de tus aplicaciones de Play Store', |
| 'business': { |
| 'label': '¿Qué describe mejor a tu empresa?', |
| 'apps': 'Aplicaciones', |
| 'games': 'Juegos', |
| 'both': 'Juegos y aplicaciones' |
| }, |
| 'confirmMailingList': 'Deseo unirme a la lista de distribución para recibir el boletín informativo mensual ' + |
| 'y correos electrónicos ocasionales sobre desarrollo y oportunidades de Google Play.', |
| 'privacyPolicy': 'Acepto que la información que proporcioné en este formulario cumple con la <a href="' + |
| 'https://www.google.com/intl/es/policies/privacy/" target="_blank">política de privacidad</a> de Google.', |
| 'languageVal': 'Spanish (español)', |
| 'successTitle': '¡Felicitaciones!', |
| 'successDetails': 'El registro para recibir las últimas noticias y sugerencias para programadores de Android ' + |
| 'se realizó correctamente.' |
| } |
| }); |
| break; |
| case 'th': |
| window.polyglot.extend({ |
| 'newsletter': { |
| 'title': 'รับข่าวสารล่าสุดสำหรับนักพัฒนาซอฟต์แวร์ Android ตลอดจนเคล็ดลับที่จะช่วยให้คุณประสบความสำเร็จบน ' + |
| 'Google Play', |
| 'requiredHint': '* ช่องที่ต้องกรอก', |
| 'name': 'ชื่อและนามสกุล', |
| 'email': 'ที่อยู่อีเมล', |
| 'company': 'ชื่อบริษัท/นักพัฒนาซอฟต์แวร์', |
| 'appUrl': 'URL แอปใดแอปหนึ่งของคุณใน Play สโตร์', |
| 'business': { |
| 'label': 'ข้อใดตรงกับธุรกิจของคุณมากที่สุด', |
| 'apps': 'แอป', |
| 'games': 'เกม', |
| 'both': 'แอปและเกม' |
| }, |
| 'confirmMailingList': 'เพิ่มฉันลงในรายชื่ออีเมลเพื่อรับจดหมายข่าวรายเดือนและอีเมลเป็นครั้งคราวเกี่ยวกับก' + |
| 'ารพัฒนาซอฟต์แวร์และโอกาสใน Google Play', |
| 'privacyPolicy': 'ฉันรับทราบว่าข้อมูลที่ให้ไว้ในแบบฟอร์มนี้จะเป็นไปตามนโยบายส่วนบุคคลของ ' + |
| '<a href="https://www.google.com/intl/th/policies/privacy/" target="_blank">Google</a>', |
| 'languageVal': 'Thai (ภาษาไทย)', |
| 'successTitle': 'ไชโย!', |
| 'successDetails': 'คุณลงชื่อสมัครรับข่าวสารและเคล็ดลับล่าสุดสำหรับนักพัฒนาซอฟต์แวร์ Android เสร็จเรียบร้อยแล้ว' |
| } |
| }); |
| break; |
| case 'tr': |
| window.polyglot.extend({ |
| 'newsletter': { |
| 'title': 'Google Play\'de başarılı olmanıza yardımcı olacak en son Android geliştirici haberleri ve ipuçları.', |
| 'requiredHint': '* Zorunlu Alanlar', |
| 'name': 'Tam ad', |
| 'email': 'E-posta adresi', |
| 'company': 'Şirket / geliştirici adı', |
| 'appUrl': 'Play Store uygulama URL\'lerinizden biri', |
| 'business': { |
| 'label': 'İşletmenizi en iyi hangisi tanımlar?', |
| 'apps': 'Uygulamalar', |
| 'games': 'Oyunlar', |
| 'both': 'Uygulamalar ve Oyunlar' |
| }, |
| 'confirmMailingList': 'Beni, geliştirme ve Google Play fırsatlarıyla ilgili ara sıra gönderilen e-posta ' + |
| 'iletilerine ilişkin posta listesine ve aylık haber bültenine ekle.', |
| 'privacyPolicy': 'Bu formda sağlanan bilgilerin Google\'ın ' + |
| '<a href="https://www.google.com/intl/tr/policies/privacy/" target="_blank">Gizlilik Politikası\'na</a> ' + |
| 'tabi olacağını kabul ediyorum.', |
| 'languageVal': 'Turkish (Türkçe)', |
| 'successTitle': 'Yaşasın!', |
| 'successDetails': 'En son Android geliştirici haberleri ve ipuçlarına başarıyla kaydoldunuz.' |
| } |
| }); |
| break; |
| case 'vi': |
| window.polyglot.extend({ |
| 'newsletter': { |
| 'title': 'Nhận tin tức và mẹo mới nhất dành cho nhà phát triển Android sẽ giúp bạn tìm thấy thành công trên ' + |
| 'Google Play.', |
| 'requiredHint': '* Các trường bắt buộc', |
| 'name': 'Tên đầy đủ', |
| 'email': 'Địa chỉ email', |
| 'company': 'Tên công ty/nhà phát triển', |
| 'appUrl': 'Một trong số các URL ứng dụng trên cửa hàng Play của bạn', |
| 'business': { |
| 'label': 'Lựa chọn nào sau đây mô tả chính xác nhất doanh nghiệp của bạn?', |
| 'apps': 'Ứng dụng', |
| 'games': 'Trò chơi', |
| 'both': 'Ứng dụng và trò chơi' |
| }, |
| 'confirmMailingList': 'Thêm tôi vào danh sách gửi thư cho bản tin hàng tháng và email định kỳ về việc phát ' + |
| 'triển và cơ hội của Google Play.', |
| 'privacyPolicy': 'Tôi xác nhận rằng thông tin được cung cấp trong biểu mẫu này tuân thủ chính sách bảo mật ' + |
| 'của <a href="https://www.google.com/intl/vi/policies/privacy/" target="_blank">Google</a>.', |
| 'languageVal': 'Vietnamese (tiếng Việt)', |
| 'successTitle': 'Thật tuyệt!', |
| 'successDetails': 'Bạn đã đăng ký thành công nhận tin tức và mẹo mới nhất dành cho nhà phát triển của Android.' |
| } |
| }); |
| break; |
| } |
| |
| (function($) { |
| 'use strict'; |
| |
| function Modal(el, options) { |
| this.el = $(el); |
| this.options = $.extend({}, options); |
| this.isOpen = false; |
| |
| this.el.on('click', function(event) { |
| if (!$.contains(this.el.find('.dac-modal-window')[0], event.target)) { |
| return this.el.trigger('modal-close'); |
| } |
| }.bind(this)); |
| |
| this.el.on('modal-open', this.open_.bind(this)); |
| this.el.on('modal-close', this.close_.bind(this)); |
| this.el.on('modal-toggle', this.toggle_.bind(this)); |
| } |
| |
| Modal.prototype.toggle_ = function() { |
| this.el.trigger('modal-' + (this.isOpen ? 'close' : 'open')); |
| }; |
| |
| Modal.prototype.close_ = function() { |
| // When closing the modal for Android Studio downloads, reload the page |
| // because otherwise we might get stuck with post-download dialog state |
| if ($("[data-modal='studio_tos'].dac-active").length) { |
| location.reload(); |
| } |
| this.el.removeClass('dac-active'); |
| $('body').removeClass('dac-modal-open'); |
| this.isOpen = false; |
| }; |
| |
| Modal.prototype.open_ = function() { |
| this.el.addClass('dac-active'); |
| $('body').addClass('dac-modal-open'); |
| this.isOpen = true; |
| }; |
| |
| function onClickToggleModal(event) { |
| event.preventDefault(); |
| var toggle = $(event.currentTarget); |
| var options = toggle.data(); |
| var modal = options.modalToggle ? $('[data-modal="' + options.modalToggle + '"]') : |
| toggle.closest('[data-modal]'); |
| modal.trigger('modal-toggle'); |
| } |
| |
| /** |
| * jQuery plugin |
| * @param {object} options - Override default options. |
| */ |
| $.fn.dacModal = function(options) { |
| return this.each(function() { |
| new Modal(this, options); |
| }); |
| }; |
| |
| $.fn.dacToggleModal = function(options) { |
| return this.each(function() { |
| new ToggleModal(this, options); |
| }); |
| }; |
| |
| /** |
| * Data Attribute API |
| */ |
| $(document).on('ready.aranja', function() { |
| $('[data-modal]').each(function() { |
| $(this).dacModal($(this).data()); |
| }); |
| |
| $('html').on('click.modal', '[data-modal-toggle]', onClickToggleModal); |
| |
| // Check if url anchor is targetting a toggle to open the modal. |
| if (location.hash) { |
| var $elem = $(document.getElementById(location.hash.substr(1))); |
| if ($elem.attr('data-modal-toggle')) { |
| $elem.trigger('click'); |
| } |
| } |
| |
| var isTargetLangValid = false; |
| $(ANDROID_LANGUAGES).each(function(index, langCode) { |
| if (langCode == window.getLangTarget()) { |
| isTargetLangValid = true; |
| return; |
| } |
| }); |
| if (window.getLangTarget() !== window.getLangPref() && isTargetLangValid) { |
| $('#langform').trigger('modal-open'); |
| $("#langform button.yes").attr("onclick","window.changeLangPref('" + window.getLangTarget() + "', true); return false;"); |
| $("#langform button.no").attr("onclick","window.changeLangPref('" + window.getLangPref() + "', true); return false;"); |
| } |
| |
| /* Check the current API level, but only if we're in the reference */ |
| if (location.pathname.indexOf('/reference') == 0) { |
| // init available apis based on user pref |
| changeApiLevel(); |
| } |
| }); |
| })(jQuery); |
| |
| /* Fullscreen - Toggle fullscreen mode for reference pages */ |
| (function($) { |
| 'use strict'; |
| |
| /** |
| * @param {HTMLElement} el - The DOM element. |
| * @constructor |
| */ |
| function Fullscreen(el) { |
| this.el = $(el); |
| this.html = $('html'); |
| this.icon = this.el.find('.dac-sprite'); |
| this.isFullscreen = window.readCookie(Fullscreen.COOKIE_) === 'true'; |
| this.activate_(); |
| this.el.on('click.dac-fullscreen', this.toggleHandler_.bind(this)); |
| } |
| |
| /** |
| * Cookie name for storing the state |
| * @type {string} |
| * @private |
| */ |
| Fullscreen.COOKIE_ = 'fullscreen'; |
| |
| /** |
| * Classes to modify the DOM |
| * @type {{mode: string, fullscreen: string, fullscreenExit: string}} |
| * @private |
| */ |
| Fullscreen.CLASSES_ = { |
| mode: 'dac-fullscreen-mode', |
| fullscreen: 'dac-fullscreen', |
| fullscreenExit: 'dac-fullscreen-exit' |
| }; |
| |
| /** |
| * Event listener for toggling fullscreen mode |
| * @param {MouseEvent} event |
| * @private |
| */ |
| Fullscreen.prototype.toggleHandler_ = function(event) { |
| event.stopPropagation(); |
| this.toggle(!this.isFullscreen, true); |
| }; |
| |
| /** |
| * Change the DOM based on current state. |
| * @private |
| */ |
| Fullscreen.prototype.activate_ = function() { |
| this.icon.toggleClass(Fullscreen.CLASSES_.fullscreen, !this.isFullscreen); |
| this.icon.toggleClass(Fullscreen.CLASSES_.fullscreenExit, this.isFullscreen); |
| this.html.toggleClass(Fullscreen.CLASSES_.mode, this.isFullscreen); |
| }; |
| |
| /** |
| * Toggle fullscreen mode and store the state in a cookie. |
| */ |
| Fullscreen.prototype.toggle = function() { |
| this.isFullscreen = !this.isFullscreen; |
| window.writeCookie(Fullscreen.COOKIE_, this.isFullscreen, null); |
| this.activate_(); |
| }; |
| |
| /** |
| * jQuery plugin |
| */ |
| $.fn.dacFullscreen = function() { |
| return this.each(function() { |
| new Fullscreen($(this)); |
| }); |
| }; |
| })(jQuery); |
| |
| (function($) { |
| 'use strict'; |
| |
| /** |
| * @param {HTMLElement} selected - The link that is selected in the nav. |
| * @constructor |
| */ |
| function HeaderTabs(selected) { |
| |
| // Don't highlight any tabs on the index page |
| if (location.pathname === '/index.html' || location.pathname === '/') { |
| //return; |
| } |
| |
| this.selected = $(selected); |
| this.selectedParent = this.selected.closest('.dac-nav-secondary').siblings('a'); |
| this.links = $('.dac-header-tabs a'); |
| |
| this.selectActiveTab(); |
| } |
| |
| HeaderTabs.prototype.selectActiveTab = function() { |
| var section = null; |
| |
| if (this.selectedParent.length) { |
| section = this.selectedParent.text(); |
| } else { |
| section = this.selected.text(); |
| } |
| |
| if (section) { |
| this.links.removeClass('selected'); |
| |
| this.links.filter(function() { |
| return $(this).text() === $.trim(section); |
| }).addClass('selected'); |
| } |
| }; |
| |
| /** |
| * jQuery plugin |
| */ |
| $.fn.dacHeaderTabs = function() { |
| return this.each(function() { |
| new HeaderTabs(this); |
| }); |
| }; |
| })(jQuery); |
| |
| (function($) { |
| 'use strict'; |
| var icon = $('<i/>').addClass('dac-sprite dac-nav-forward'); |
| var config = JSON.parse(window.localStorage.getItem('global-navigation') || '{}'); |
| var forwardLink = $('<span/>') |
| .addClass('dac-nav-link-forward') |
| .html(icon) |
| .attr('tabindex', 0) |
| .on('click keypress', function(e) { |
| if (e.type == 'keypress' && e.which == 13 || e.type == 'click') { |
| swap_(e); |
| } |
| }); |
| |
| /** |
| * @constructor |
| */ |
| function Nav(navigation) { |
| $('.dac-nav-list').dacCurrentPage().dacHeaderTabs().dacSidebarToggle($('body')); |
| |
| navigation.find('[data-reference-tree]').dacReferenceNav(); |
| |
| setupViews_(navigation.children().eq(0).children()); |
| |
| initCollapsedNavs(navigation.find('.dac-nav-sub-slider')); |
| |
| $('#dac-main-navigation').scrollIntoView('.selected') |
| } |
| |
| function updateStore(icon) { |
| var navClass = getCurrentLandingPage_(icon); |
| var isExpanded = icon.hasClass('dac-expand-less-black'); |
| var expandedNavs = config.expanded || []; |
| if (isExpanded) { |
| expandedNavs.push(navClass); |
| } else { |
| expandedNavs = expandedNavs.filter(function(item) { |
| return item !== navClass; |
| }); |
| } |
| config.expanded = expandedNavs; |
| window.localStorage.setItem('global-navigation', JSON.stringify(config)); |
| } |
| |
| function toggleSubNav_(icon) { |
| var isExpanded = icon.hasClass('dac-expand-less-black'); |
| icon.toggleClass('dac-expand-less-black', !isExpanded); |
| icon.toggleClass('dac-expand-more-black', isExpanded); |
| icon.data('sub-navigation.dac').slideToggle(200); |
| |
| updateStore(icon); |
| } |
| |
| function handleSubNavToggle_(event) { |
| event.preventDefault(); |
| var icon = $(event.target); |
| toggleSubNav_(icon); |
| } |
| |
| function getCurrentLandingPage_(icon) { |
| return icon.closest('li')[0].className.replace('dac-nav-item ', ''); |
| } |
| |
| // Setup sub navigation collapse/expand |
| function initCollapsedNavs(toggleIcons) { |
| toggleIcons.each(setInitiallyActive_($('body'))); |
| toggleIcons.on('click keypress', function(e) { |
| if (e.type == 'keypress' && e.which == 13 || e.type == 'click') { |
| handleSubNavToggle_(e); |
| } |
| }); |
| } |
| |
| function setInitiallyActive_(body) { |
| var expandedNavs = config.expanded || []; |
| return function(i, icon) { |
| icon = $(icon); |
| var subNav = icon.next(); |
| |
| if (!subNav.length) { |
| return; |
| } |
| |
| var landingPageClass = getCurrentLandingPage_(icon); |
| var expanded = expandedNavs.indexOf(landingPageClass) >= 0; |
| landingPageClass = landingPageClass === 'home' ? 'about' : landingPageClass; |
| |
| if (landingPageClass == 'about' && location.pathname == '/index.html') { |
| expanded = true; |
| } |
| |
| // TODO: Should read from localStorage |
| var visible = body.hasClass(landingPageClass) || expanded; |
| |
| icon.data('sub-navigation.dac', subNav); |
| icon.toggleClass('dac-expand-less-black', visible); |
| icon.toggleClass('dac-expand-more-black', !visible); |
| subNav.toggle(visible); |
| }; |
| } |
| |
| function setupViews_(views) { |
| if (views.length === 1) { |
| // Active tier 1 nav. |
| views.addClass('dac-active'); |
| } else { |
| // Activate back button and tier 2 nav. |
| views.slice(0, 2).addClass('dac-active'); |
| var selectedNav = views.eq(2).find('.selected').after(forwardLink); |
| var langAttr = selectedNav.attr(window.getLangPref() + '-lang'); |
| //form the label from locale attr if possible, else set to selectedNav text value |
| if ((typeof langAttr !== typeof undefined && langAttr !== false) && (langAttr !== '')) { |
| $('.dac-nav-back-title').text(langAttr); |
| } else { |
| $('.dac-nav-back-title').text(selectedNav.text()); |
| } |
| } |
| |
| // Navigation should animate. |
| setTimeout(function() { |
| views.removeClass('dac-no-anim'); |
| }, 10); |
| } |
| |
| function swap_(event) { |
| event.preventDefault(); |
| $(event.currentTarget).trigger('swap-content'); |
| } |
| |
| /** |
| * jQuery plugin |
| */ |
| $.fn.dacNav = function() { |
| return this.each(function() { |
| new Nav($(this)); |
| }); |
| }; |
| })(jQuery); |
| |
| /* global NAVTREE_DATA */ |
| (function($) { |
| /** |
| * Build the reference navigation with namespace dropdowns. |
| * @param {jQuery} el - The DOM element. |
| */ |
| function buildReferenceNav(el) { |
| var supportLibraryPath = '/reference/android/support/'; |
| var currPath = location.pathname; |
| |
| if (currPath.indexOf(supportLibraryPath) > -1) { |
| updateSupportLibrariesNav(supportLibraryPath, currPath); |
| } |
| var namespaceList = el.find('[data-reference-namespaces]'); |
| var resources = $('[data-reference-resources]').detach(); |
| var selected = namespaceList.find('.selected'); |
| resources.appendTo(el); |
| |
| // Links should be toggleable. |
| namespaceList.find('a').addClass('dac-reference-nav-toggle dac-closed'); |
| |
| // Set the path for the navtree data to use. |
| var navtree_filepath = getNavtreeFilePath(supportLibraryPath, currPath); |
| |
| // Load in all resources |
| $.getScript(navtree_filepath, function(data, textStatus, xhr) { |
| if (xhr.status === 200) { |
| namespaceList.on( |
| 'click', 'a.dac-reference-nav-toggle', toggleResourcesHandler); |
| } |
| }); |
| |
| // No setup required if no resources are present |
| if (!resources.length) { |
| return; |
| } |
| |
| // The resources should be a part of selected namespace. |
| var overview = addResourcesToView(resources, selected); |
| |
| // Currently viewing Overview |
| if (location.href === overview.attr('href')) { |
| overview.parent().addClass('selected'); |
| } |
| |
| // Open currently selected resource |
| var listsToOpen = selected.children().eq(1); |
| listsToOpen = listsToOpen.add( |
| listsToOpen.find('.selected').parent()).show(); |
| |
| // Mark dropdowns as open |
| listsToOpen.prev().removeClass('dac-closed'); |
| |
| // Scroll into view |
| namespaceList.scrollIntoView(selected); |
| } |
| |
| function getNavtreeFilePath(supportLibraryPath, currPath) { |
| var navtree_filepath = ''; |
| var navtree_filename = 'navtree_data.js'; |
| if (currPath.indexOf(supportLibraryPath + 'test') > -1) { |
| navtree_filepath = supportLibraryPath + 'test/' + navtree_filename; |
| } else if (currPath.indexOf(supportLibraryPath + 'wearable') > -1) { |
| navtree_filepath = supportLibraryPath + 'wearable/' + navtree_filename; |
| } else { |
| navtree_filepath = '/' + navtree_filename; |
| } |
| return navtree_filepath; |
| } |
| |
| function updateSupportLibrariesNav(supportLibraryPath, currPath) { |
| var navTitle = ''; |
| if (currPath.indexOf(supportLibraryPath + 'test') > -1) { |
| navTitle = 'Test Support APIs'; |
| } else if (currPath.indexOf(supportLibraryPath + 'wearable') > -1) { |
| navTitle = 'Wearable Support APIs'; |
| } |
| $('#api-nav-title').text(navTitle); |
| $('#api-level-toggle').hide(); |
| } |
| |
| /** |
| * Handles the toggling of resources. |
| * @param {Event} event |
| */ |
| function toggleResourcesHandler(event) { |
| event.preventDefault(); |
| if (event.type == 'click' || event.type == 'keypress' && event.which == 13) { |
| var el = $(this); |
| // If resources for given namespace is not present, fetch correct data. |
| if (this.tagName === 'A' && !this.hasResources) { |
| addResourcesToView(buildResourcesViewForData(getDataForNamespace(el.text())), el.parent()); |
| } |
| |
| el.toggleClass('dac-closed').next().slideToggle(200); |
| } |
| } |
| |
| /** |
| * @param {String} namespace |
| * @returns {Array} namespace data |
| */ |
| function getDataForNamespace(namespace) { |
| var namespaceData = NAVTREE_DATA.filter(function(data) { |
| return data[0] === namespace; |
| }); |
| |
| return namespaceData.length ? namespaceData[0][2] : []; |
| } |
| |
| /** |
| * Build a list item for a resource |
| * @param {Array} resource |
| * @returns {String} |
| */ |
| function buildResourceItem(resource) { |
| return '<li class="api apilevel-' + resource[3] + '"><a href="/' + resource[1] + '">' + resource[0] + '</a></li>'; |
| } |
| |
| /** |
| * Build resources list items. |
| * @param {Array} resources |
| * @returns {String} |
| */ |
| function buildResourceList(resources) { |
| return '<li><h2>' + resources[0] + '</h2><ul>' + resources[2].map(buildResourceItem).join('') + '</ul>'; |
| } |
| |
| /** |
| * Build a resources view |
| * @param {Array} data |
| * @returns {jQuery} resources in an unordered list. |
| */ |
| function buildResourcesViewForData(data) { |
| return $('<ul>' + data.map(buildResourceList).join('') + '</ul>'); |
| } |
| |
| /** |
| * Add resources to a containing view. |
| * @param {jQuery} resources |
| * @param {jQuery} view |
| * @returns {jQuery} the overview link. |
| */ |
| function addResourcesToView(resources, view) { |
| var namespace = view.children().eq(0); |
| var overview = $('<a href="' + namespace.attr('href') + '">Overview</a>'); |
| |
| // Mark namespace with content; |
| namespace[0].hasResources = true; |
| |
| // Add correct classes / event listeners to resources. |
| resources.prepend($('<li>').html(overview)) |
| .find('a') |
| .addClass('dac-reference-nav-resource') |
| .end() |
| .find('h2').attr('tabindex', 0) |
| .addClass('dac-reference-nav-toggle dac-closed') |
| .on('click keypress', toggleResourcesHandler) |
| .end() |
| .add(resources.find('ul')) |
| .addClass('dac-reference-nav-resources') |
| .end() |
| .appendTo(view); |
| |
| return overview; |
| } |
| |
| function setActiveReferencePackage(el) { |
| var packageLinkEls = el.find('[data-reference-namespaces] a'); |
| var selected = null; |
| var highestMatchCount = 0; |
| packageLinkEls.each(function(index, linkEl) { |
| var matchCount = 0; |
| $(location.pathname.split('/')).each(function(index, subpath) { |
| if (linkEl.href.indexOf('/' + subpath + '/') > -1) { |
| matchCount++; |
| } |
| }); |
| if (matchCount > highestMatchCount) { |
| selected = linkEl; |
| highestMatchCount = matchCount; |
| } |
| }); |
| $(selected).parent().addClass('selected'); |
| } |
| |
| /** |
| * jQuery plugin |
| */ |
| $.fn.dacReferenceNav = function() { |
| return this.each(function() { |
| setActiveReferencePackage($(this)); |
| buildReferenceNav($(this)); |
| }); |
| }; |
| })(jQuery); |
| |
| /** Scroll a container to make a target element visible |
| This is called when the page finished loading. */ |
| $.fn.scrollIntoView = function(target) { |
| if ('string' === typeof target) { |
| target = this.find(target); |
| } |
| if (this.is(':visible')) { |
| if (target.length == 0) { |
| // If no selected item found, exit |
| return; |
| } |
| |
| // get the target element's offset from its container nav by measuring the element's offset |
| // relative to the document then subtract the container nav's offset relative to the document |
| var targetOffset = target.offset().top - this.offset().top; |
| var containerHeight = this.height(); |
| if (targetOffset > containerHeight * .8) { // multiply nav height by .8 so we move up the item |
| // if it's more than 80% down the nav |
| // scroll the item up by an amount equal to 80% the container height |
| this.scrollTop(targetOffset - (containerHeight * .8)); |
| } |
| } |
| }; |
| |
| (function($) { |
| $.fn.dacCurrentPage = function() { |
| // Highlight the header tabs... |
| // highlight Design tab |
| var baseurl = getBaseUri(window.location.pathname); |
| var urlSegments = baseurl.split('/'); |
| var navEl = this; |
| var body = $('body'); |
| var subNavEl = navEl.find('.dac-nav-secondary'); |
| var parentNavEl; |
| var selected; |
| // In NDK docs, highlight appropriate sub-nav |
| if (body.hasClass('dac-ndk')) { |
| if (body.hasClass('guide')) { |
| selected = navEl.find('> li.guides > a').addClass('selected'); |
| } else if (body.hasClass('reference')) { |
| selected = navEl.find('> li.reference > a').addClass('selected'); |
| } else if (body.hasClass('samples')) { |
| selected = navEl.find('> li.samples > a').addClass('selected'); |
| } else if (body.hasClass('downloads')) { |
| selected = navEl.find('> li.downloads > a').addClass('selected'); |
| } |
| } else if (body.hasClass('dac-studio')) { |
| if (body.hasClass('download')) { |
| selected = navEl.find('> li.download > a').addClass('selected'); |
| } else if (body.hasClass('features')) { |
| selected = navEl.find('> li.features > a').addClass('selected'); |
| } else if (body.hasClass('guide')) { |
| selected = navEl.find('> li.guide > a').addClass('selected'); |
| } else if (body.hasClass('preview')) { |
| selected = navEl.find('> li.preview > a').addClass('selected'); |
| } |
| } else if (body.hasClass('design')) { |
| selected = navEl.find('> li.design > a').addClass('selected'); |
| // highlight Home nav |
| } else if (body.hasClass('about') || location.pathname == '/index.html') { |
| parentNavEl = navEl.find('> li.home > a'); |
| parentNavEl.addClass('has-subnav'); |
| // In Home docs, also highlight appropriate sub-nav |
| if (urlSegments[1] === 'wear' || urlSegments[1] === 'tv' || |
| urlSegments[1] === 'auto') { |
| selected = subNavEl.find('li.' + urlSegments[1] + ' > a').addClass('selected'); |
| } else if (urlSegments[1] === 'about') { |
| selected = subNavEl.find('li.versions > a').addClass('selected'); |
| } else { |
| selected = parentNavEl.removeClass('has-subnav').addClass('selected'); |
| } |
| // highlight Develop nav |
| } else if (body.hasClass('develop') || body.hasClass('google')) { |
| parentNavEl = navEl.find('> li.develop > a'); |
| parentNavEl.addClass('has-subnav'); |
| // In Develop docs, also highlight appropriate sub-nav |
| if (urlSegments[1] === 'training') { |
| selected = subNavEl.find('li.training > a').addClass('selected'); |
| } else if (urlSegments[1] === 'guide') { |
| selected = subNavEl.find('li.guide > a').addClass('selected'); |
| } else if (urlSegments[1] === 'reference') { |
| // If the root is reference, but page is also part of Google Services, select Google |
| if (body.hasClass('google')) { |
| selected = subNavEl.find('li.google > a').addClass('selected'); |
| } else { |
| selected = subNavEl.find('li.reference > a').addClass('selected'); |
| } |
| } else if (body.hasClass('google')) { |
| selected = subNavEl.find('li.google > a').addClass('selected'); |
| } else if (body.hasClass('samples')) { |
| selected = subNavEl.find('li.samples > a').addClass('selected'); |
| } else { |
| selected = parentNavEl.removeClass('has-subnav').addClass('selected'); |
| } |
| // highlight Distribute nav |
| } else if (body.hasClass('distribute')) { |
| parentNavEl = navEl.find('> li.distribute > a'); |
| parentNavEl.addClass('has-subnav'); |
| // In Distribute docs, also highlight appropriate sub-nav |
| if (urlSegments[2] === 'users') { |
| selected = subNavEl.find('li.users > a').addClass('selected'); |
| } else if (urlSegments[2] === 'engage') { |
| selected = subNavEl.find('li.engage > a').addClass('selected'); |
| } else if (urlSegments[2] === 'monetize') { |
| selected = subNavEl.find('li.monetize > a').addClass('selected'); |
| } else if (urlSegments[2] === 'analyze') { |
| selected = subNavEl.find('li.analyze > a').addClass('selected'); |
| } else if (urlSegments[2] === 'tools') { |
| selected = subNavEl.find('li.disttools > a').addClass('selected'); |
| } else if (urlSegments[2] === 'stories') { |
| selected = subNavEl.find('li.stories > a').addClass('selected'); |
| } else if (urlSegments[2] === 'essentials') { |
| selected = subNavEl.find('li.essentials > a').addClass('selected'); |
| } else if (urlSegments[2] === 'googleplay') { |
| selected = subNavEl.find('li.googleplay > a').addClass('selected'); |
| } else { |
| selected = parentNavEl.removeClass('has-subnav').addClass('selected'); |
| } |
| } else if (body.hasClass('preview')) { |
| selected = navEl.find('> li.preview > a').addClass('selected'); |
| } |
| return $(selected); |
| }; |
| })(jQuery); |
| |
| (function($) { |
| 'use strict'; |
| |
| /** |
| * Toggle the visabilty of the mobile navigation. |
| * @param {HTMLElement} el - The DOM element. |
| * @param {Object} options |
| * @constructor |
| */ |
| function ToggleNav(el, options) { |
| this.el = $(el); |
| this.options = $.extend({}, ToggleNav.DEFAULTS_, options); |
| this.body = $(document.body); |
| this.navigation_ = this.body.find(this.options.navigation); |
| this.el.on('click', this.clickHandler_.bind(this)); |
| } |
| |
| ToggleNav.BREAKPOINT_ = 980; |
| |
| /** |
| * Open on correct sizes |
| */ |
| function toggleSidebarVisibility(body) { |
| var wasClosed = ('' + localStorage.getItem('navigation-open')) === 'false'; |
| // Override the local storage setting for navigation-open for child sites |
| // with no-subnav class. |
| if (document.body.classList.contains('no-subnav')) { |
| wasClosed = false; |
| } |
| |
| if (wasClosed) { |
| body.removeClass(ToggleNav.DEFAULTS_.activeClass); |
| } else if (window.innerWidth >= ToggleNav.BREAKPOINT_) { |
| body.addClass(ToggleNav.DEFAULTS_.activeClass); |
| } else { |
| body.removeClass(ToggleNav.DEFAULTS_.activeClass); |
| } |
| } |
| |
| /** |
| * ToggleNav Default Settings |
| * @type {{body: boolean, dimmer: string, navigation: string, activeClass: string}} |
| * @private |
| */ |
| ToggleNav.DEFAULTS_ = { |
| body: true, |
| dimmer: '.dac-nav-dimmer', |
| animatingClass: 'dac-nav-animating', |
| navigation: '[data-dac-nav]', |
| activeClass: 'dac-nav-open' |
| }; |
| |
| /** |
| * The actual toggle logic. |
| * @param {Event} event |
| * @private |
| */ |
| ToggleNav.prototype.clickHandler_ = function(event) { |
| event.preventDefault(); |
| var animatingClass = this.options.animatingClass; |
| var body = this.body; |
| |
| body.addClass(animatingClass); |
| body.toggleClass(this.options.activeClass); |
| |
| setTimeout(function() { |
| body.removeClass(animatingClass); |
| }, this.navigation_.transitionDuration()); |
| |
| if (window.innerWidth >= ToggleNav.BREAKPOINT_) { |
| localStorage.setItem('navigation-open', body.hasClass(this.options.activeClass)); |
| } |
| }; |
| |
| /** |
| * jQuery plugin |
| * @param {object} options - Override default options. |
| */ |
| $.fn.dacToggleMobileNav = function() { |
| return this.each(function() { |
| var el = $(this); |
| new ToggleNav(el, el.data()); |
| }); |
| }; |
| |
| $.fn.dacSidebarToggle = function(body) { |
| toggleSidebarVisibility(body); |
| $(window).on('resize', toggleSidebarVisibility.bind(null, body)); |
| }; |
| |
| /** |
| * Data Attribute API |
| */ |
| $(function() { |
| $('[data-dac-toggle-nav]').dacToggleMobileNav(); |
| }); |
| })(jQuery); |
| |
| (function($) { |
| 'use strict'; |
| |
| /** |
| * Submit the newsletter form to a Google Form. |
| * @param {HTMLElement} el - The Form DOM element. |
| * @constructor |
| */ |
| function NewsletterForm(el) { |
| this.el = $(el); |
| this.form = this.el.find('form'); |
| $('<iframe/>').hide() |
| .attr('name', 'dac-newsletter-iframe') |
| .attr('src', '') |
| .insertBefore(this.form); |
| this.el.find('[data-newsletter-language]').val(window.polyglot.t('newsletter.languageVal')); |
| this.form.on('submit', this.submitHandler_.bind(this)); |
| } |
| |
| /** |
| * Milliseconds until modal has vanished after modal-close is triggered. |
| * @type {number} |
| * @private |
| */ |
| NewsletterForm.CLOSE_DELAY_ = 300; |
| |
| /** |
| * Switch view to display form after close. |
| * @private |
| */ |
| NewsletterForm.prototype.closeHandler_ = function() { |
| setTimeout(function() { |
| this.el.trigger('swap-reset'); |
| }.bind(this), NewsletterForm.CLOSE_DELAY_); |
| }; |
| |
| /** |
| * Reset the modal to initial state. |
| * @private |
| */ |
| NewsletterForm.prototype.reset_ = function() { |
| this.form.trigger('reset'); |
| this.el.one('modal-close', this.closeHandler_.bind(this)); |
| }; |
| |
| /** |
| * Display a success view on submit. |
| * @private |
| */ |
| NewsletterForm.prototype.submitHandler_ = function() { |
| this.el.one('swap-complete', this.reset_.bind(this)); |
| this.el.trigger('swap-content'); |
| }; |
| |
| /** |
| * jQuery plugin |
| * @param {object} options - Override default options. |
| */ |
| $.fn.dacNewsletterForm = function(options) { |
| return this.each(function() { |
| new NewsletterForm(this, options); |
| }); |
| }; |
| |
| /** |
| * Data Attribute API |
| */ |
| $(document).on('ready.aranja', function() { |
| $('[data-newsletter]').each(function() { |
| $(this).dacNewsletterForm(); |
| }); |
| }); |
| })(jQuery); |
| |
| /* globals METADATA, YOUTUBE_RESOURCES, BLOGGER_RESOURCES */ |
| window.metadata = {}; |
| |
| /** |
| * Prepare metadata and indices for querying. |
| */ |
| window.metadata.prepare = (function() { |
| // Helper functions. |
| function mergeArrays() { |
| return Array.prototype.concat.apply([], arguments); |
| } |
| |
| /** |
| * Creates lookup maps for a resource index. |
| * I.e. where MAP['some tag'][resource.id] === true when that resource has 'some tag'. |
| * @param resourceDict |
| * @returns {{}} |
| */ |
| function buildResourceLookupMap(resourceDict) { |
| var map = {}; |
| for (var key in resourceDict) { |
| var dictForKey = {}; |
| var srcArr = resourceDict[key]; |
| for (var i = 0; i < srcArr.length; i++) { |
| dictForKey[srcArr[i].index] = true; |
| } |
| map[key] = dictForKey; |
| } |
| return map; |
| } |
| |
| /** |
| * Merges metadata maps for english and the current language into the global store. |
| */ |
| function mergeMetadataMap(name, locale) { |
| if (locale && locale !== 'en' && METADATA[locale]) { |
| METADATA[name] = $.extend(METADATA.en[name], METADATA[locale][name]); |
| } else { |
| METADATA[name] = METADATA.en[name]; |
| } |
| } |
| |
| /** |
| * Index all resources by type, url, tag and category. |
| * @param resources |
| */ |
| function createIndices(resources) { |
| // URL, type, tag and category lookups |
| var byType = METADATA.byType = {}; |
| var byUrl = METADATA.byUrl = {}; |
| var byTag = METADATA.byTag = {}; |
| var byCategory = METADATA.byCategory = {}; |
| |
| for (var i = 0; i < resources.length; i++) { |
| var res = resources[i]; |
| |
| // Store index. |
| res.index = i; |
| |
| // Index by type. |
| var type = res.type; |
| if (type) { |
| byType[type] = byType[type] || []; |
| byType[type].push(res); |
| } |
| |
| // Index by tag. |
| var tags = res.tags || []; |
| for (var j = 0; j < tags.length; j++) { |
| var tag = tags[j]; |
| if (tag) { |
| byTag[tag] = byTag[tag] || []; |
| byTag[tag].push(res); |
| } |
| } |
| |
| // Index by category. |
| var category = res.category; |
| if (category) { |
| byCategory[category] = byCategory[category] || []; |
| byCategory[category].push(res); |
| } |
| |
| // Index by url. |
| var url = res.url; |
| if (url) { |
| res.baseUrl = url.replace(/^intl\/\w+[\/]/, ''); |
| byUrl[res.baseUrl] = res; |
| } |
| } |
| METADATA.hasType = buildResourceLookupMap(byType); |
| METADATA.hasTag = buildResourceLookupMap(byTag); |
| METADATA.hasCategory = buildResourceLookupMap(byCategory); |
| } |
| |
| return function() { |
| // Only once. |
| if (METADATA.all) { return; } |
| |
| // Get current language. |
| var locale = getLangPref(); |
| // Merge english resources. |
| if (useDevsiteMetadata) { |
| var all_keys = Object.keys(METADATA['en']); |
| METADATA.all = [] |
| |
| $(all_keys).each(function(index, category) { |
| if (RESERVED_METADATA_CATEGORY_NAMES.indexOf(category) == -1) { |
| METADATA.all = mergeArrays( |
| METADATA.all, |
| METADATA.en[category] |
| ); |
| } |
| }); |
| |
| METADATA.all = mergeArrays( |
| METADATA.all, |
| YOUTUBE_RESOURCES, |
| BLOGGER_RESOURCES, |
| METADATA.en.extras |
| ); |
| } else { |
| METADATA.all = mergeArrays( |
| METADATA.en.about, |
| METADATA.en.design, |
| METADATA.en.distribute, |
| METADATA.en.develop, |
| YOUTUBE_RESOURCES, |
| BLOGGER_RESOURCES, |
| METADATA.en.extras |
| ); |
| } |
| |
| // Merge local language resources. |
| if (locale !== 'en' && METADATA[locale]) { |
| if (useDevsiteMetadata) { |
| all_keys = Object.keys(METADATA[locale]); |
| $(all_keys).each(function(index, category) { |
| if (RESERVED_METADATA_CATEGORY_NAMES.indexOf(category) == -1) { |
| METADATA.all = mergeArrays( |
| METADATA.all, |
| METADATA.en[category] |
| ); |
| } |
| }); |
| |
| METADATA.all = mergeArrays( |
| METADATA.all, |
| METADATA[locale].extras |
| ); |
| } else { |
| METADATA.all = mergeArrays( |
| METADATA.all, |
| METADATA[locale].about, |
| METADATA[locale].design, |
| METADATA[locale].distribute, |
| METADATA[locale].develop, |
| METADATA[locale].extras |
| ); |
| |
| } |
| } |
| |
| mergeMetadataMap('collections', locale); |
| mergeMetadataMap('searchHeroCollections', locale); |
| mergeMetadataMap('carousel', locale); |
| |
| // Create query indicies for resources. |
| createIndices(METADATA.all, locale); |
| |
| // Reference metadata. |
| METADATA.androidReference = mergeArrays( |
| window.DATA, window.SUPPORT_WEARABLE_DATA, window.SUPPORT_TEST_DATA); |
| METADATA.googleReference = mergeArrays(window.GMS_DATA, window.GCM_DATA); |
| }; |
| })(); |
| |
| /* global METADATA, util */ |
| window.metadata.query = (function($) { |
| var pageMap = {}; |
| |
| function buildResourceList(opts) { |
| window.metadata.prepare(); |
| var expressions = parseResourceQuery(opts.query || ''); |
| var instanceMap = {}; |
| var results = []; |
| |
| for (var i = 0; i < expressions.length; i++) { |
| var clauses = expressions[i]; |
| |
| // Get all resources for first clause |
| var resources = getResourcesForClause(clauses.shift()); |
| |
| // Concat to final results list |
| results = results.concat(resources.map(filterResources(clauses, i > 0, instanceMap)).filter(filterEmpty)); |
| } |
| |
| // Set correct order |
| if (opts.sortOrder && results.length) { |
| results = opts.sortOrder === 'random' ? util.shuffle(results) : results.sort(sortResultsByKey(opts.sortOrder)); |
| } |
| |
| // Slice max results. |
| if (opts.maxResults !== Infinity) { |
| results = results.slice(0, opts.maxResults); |
| } |
| |
| // Remove page level duplicates |
| if (opts.allowDuplicates === undefined || opts.allowDuplicates === 'false') { |
| results = results.filter(removePageLevelDuplicates); |
| |
| for (var index = 0; index < results.length; ++index) { |
| pageMap[results[index].index] = 1; |
| } |
| } |
| |
| return results; |
| } |
| |
| function filterResources(clauses, removeDuplicates, map) { |
| return function(resource) { |
| var resourceIsAllowed = true; |
| |
| // References must be defined. |
| if (resource === undefined) { |
| return; |
| } |
| |
| // Get canonical (localized) version of resource if possible. |
| resource = METADATA.byUrl[resource.baseUrl] || METADATA.byUrl[resource.url] || resource; |
| |
| // Filter out resources already used |
| if (removeDuplicates) { |
| resourceIsAllowed = !map[resource.index]; |
| } |
| |
| // Must fulfill all criteria |
| if (clauses.length > 0) { |
| resourceIsAllowed = resourceIsAllowed && doesResourceMatchClauses(resource, clauses); |
| } |
| |
| // Mark resource as used. |
| if (resourceIsAllowed) { |
| map[resource.index] = 1; |
| } |
| |
| return resourceIsAllowed && resource; |
| }; |
| } |
| |
| function filterEmpty(resource) { |
| return resource; |
| } |
| |
| function sortResultsByKey(key) { |
| var desc = key.charAt(0) === '-'; |
| |
| if (desc) { |
| key = key.substring(1); |
| } |
| |
| return function(x, y) { |
| return (desc ? -1 : 1) * (parseInt(x[key], 10) - parseInt(y[key], 10)); |
| }; |
| } |
| |
| function getResourcesForClause(clause) { |
| switch (clause.attr) { |
| case 'type': |
| return METADATA.byType[clause.value]; |
| case 'tag': |
| return METADATA.byTag[clause.value]; |
| case 'collection': |
| var resources = METADATA.collections[clause.value] || {}; |
| return getResourcesByUrlCollection(resources.resources); |
| case 'history': |
| return getResourcesByUrlCollection($.dacGetVisitedUrls(clause.value)); |
| case 'section': |
| return getResourcesByUrlCollection([clause.value].sections); |
| default: |
| return []; |
| } |
| } |
| |
| function getResourcesByUrlCollection(resources) { |
| return (resources || []).map(function(url) { |
| return METADATA.byUrl[url]; |
| }); |
| } |
| |
| function removePageLevelDuplicates(resource) { |
| return resource && !pageMap[resource.index]; |
| } |
| |
| function doesResourceMatchClauses(resource, clauses) { |
| for (var i = 0; i < clauses.length; i++) { |
| var map; |
| switch (clauses[i].attr) { |
| case 'type': |
| map = METADATA.hasType[clauses[i].value]; |
| break; |
| case 'tag': |
| map = METADATA.hasTag[clauses[i].value]; |
| break; |
| } |
| |
| if (!map || (!!clauses[i].negative ? map[resource.index] : !map[resource.index])) { |
| return clauses[i].negative; |
| } |
| } |
| |
| return true; |
| } |
| |
| function parseResourceQuery(query) { |
| // Parse query into array of expressions (expression e.g. 'tag:foo + type:video') |
| var expressions = []; |
| var expressionStrs = query.split(',') || []; |
| for (var i = 0; i < expressionStrs.length; i++) { |
| var expr = expressionStrs[i] || ''; |
| |
| // Break expression into clauses (clause e.g. 'tag:foo') |
| var clauses = []; |
| var clauseStrs = expr.split(/(?=[\+\-])/); |
| for (var j = 0; j < clauseStrs.length; j++) { |
| var clauseStr = clauseStrs[j] || ''; |
| |
| // Get attribute and value from clause (e.g. attribute='tag', value='foo') |
| var parts = clauseStr.split(':'); |
| var clause = {}; |
| |
| clause.attr = parts[0].replace(/^\s+|\s+$/g, ''); |
| if (clause.attr) { |
| if (clause.attr.charAt(0) === '+') { |
| clause.attr = clause.attr.substring(1); |
| } else if (clause.attr.charAt(0) === '-') { |
| clause.negative = true; |
| clause.attr = clause.attr.substring(1); |
| } |
| } |
| |
| if (parts.length > 1) { |
| clause.value = parts[1].replace(/^\s+|\s+$/g, ''); |
| } |
| |
| clauses.push(clause); |
| } |
| |
| if (!clauses.length) { |
| continue; |
| } |
| |
| expressions.push(clauses); |
| } |
| |
| return expressions; |
| } |
| |
| return buildResourceList; |
| })(jQuery); |
| |
| /* global METADATA, getLangPref */ |
| |
| window.metadata.search = (function() { |
| 'use strict'; |
| |
| var currentLang = getLangPref(); |
| |
| function search(query) { |
| window.metadata.prepare(); |
| return { |
| android: findDocsMatches(query, METADATA.androidReference), |
| docs: findDocsMatches(query, METADATA.googleReference), |
| resources: findResourceMatches(query) |
| }; |
| } |
| |
| function findDocsMatches(query, data) { |
| var results = []; |
| |
| for (var i = 0; i < data.length; i++) { |
| var s = data[i]; |
| if (query.length !== 0 && s.label.toLowerCase().indexOf(query.toLowerCase()) !== -1) { |
| results.push(s); |
| } |
| } |
| |
| rankAutocompleteApiResults(query, results); |
| |
| return results; |
| } |
| |
| function findResourceMatches(query) { |
| var results = []; |
| |
| // Search for matching JD docs |
| if (query.length >= 2) { |
| /* In some langs, spaces may be optional between certain non-Ascii word-glyphs. For |
| * those langs, only match query at word boundaries if query includes Ascii chars only. |
| */ |
| var NO_BOUNDARY_LANGUAGES = ['ja','ko','vi','zh-cn','zh-tw']; |
| var isAsciiOnly = /^[\u0000-\u007f]*$/.test(query); |
| var noBoundaries = (NO_BOUNDARY_LANGUAGES.indexOf(window.getLangPref()) !== -1); |
| var exprBoundary = (!isAsciiOnly && noBoundaries) ? '' : '(?:^|\\s)'; |
| var queryRegex = new RegExp(exprBoundary + query.toLowerCase(), 'g'); |
| |
| var all = METADATA.all; |
| for (var i = 0; i < all.length; i++) { |
| // current search comparison, with counters for tag and title, |
| // used later to improve ranking |
| var s = all[i]; |
| s.matched_tag = 0; |
| s.matched_title = 0; |
| var matched = false; |
| |
| // Check if query matches any tags; work backwards toward 1 to assist ranking |
| if (s.keywords) { |
| for (var j = s.keywords.length - 1; j >= 0; j--) { |
| // it matches a tag |
| if (s.keywords[j].toLowerCase().match(queryRegex)) { |
| matched = true; |
| s.matched_tag = j + 1; // add 1 to index position |
| } |
| } |
| } |
| |
| // Check if query matches doc title |
| if (s.title.toLowerCase().match(queryRegex)) { |
| matched = true; |
| s.matched_title = 1; |
| } |
| |
| // Remember the doc if it matches either |
| if (matched) { |
| results.push(s); |
| } |
| } |
| |
| // Improve the current results |
| results = lookupBetterResult(results); |
| |
| // Rank/sort all the matched pages |
| rankAutocompleteDocResults(results); |
| |
| return results; |
| } |
| } |
| |
| // Replaces a match with another resource by url, if it exists. |
| function lookupReplacementByUrl(match, url) { |
| var replacement = METADATA.byUrl[url]; |
| |
| // Replacement resource does not exists. |
| if (!replacement) { return; } |
| |
| replacement.matched_title = Math.max(replacement.matched_title, match.matched_title); |
| replacement.matched_tag = Math.max(replacement.matched_tag, match.matched_tag); |
| |
| return replacement; |
| } |
| |
| // Find the localized version of a page if it exists. |
| function lookupLocalizedVersion(match) { |
| return METADATA.byUrl[match.baseUrl] || METADATA.byUrl[match.url]; |
| } |
| |
| // Find the main page for a tutorial when matching a subpage. |
| function lookupTutorialIndex(match) { |
| // Guard for non index tutorial pages. |
| if (match.type !== 'training' || match.url.indexOf('index.html') >= 0) { return; } |
| |
| var indexUrl = match.url.replace(/[^\/]+$/, 'index.html'); |
| return lookupReplacementByUrl(match, indexUrl); |
| } |
| |
| // Find related results which are a better match for the user. |
| function lookupBetterResult(matches) { |
| var newMatches = []; |
| |
| matches = matches.filter(function(match) { |
| var newMatch = match; |
| newMatch = lookupTutorialIndex(newMatch) || newMatch; |
| newMatch = lookupLocalizedVersion(newMatch) || newMatch; |
| |
| if (newMatch !== match) { |
| newMatches.push(newMatch); |
| } |
| |
| return newMatch === match; |
| }); |
| |
| return toUnique(newMatches.concat(matches)); |
| } |
| |
| /* Order the jd doc result list based on match quality */ |
| function rankAutocompleteDocResults(matches) { |
| if (!matches || !matches.length) { |
| return; |
| } |
| |
| var _resultScoreFn = function(match) { |
| var score = 1.0; |
| |
| // if the query matched a tag |
| if (match.matched_tag > 0) { |
| // multiply score by factor relative to position in tags list (max of 3) |
| score *= 3 / match.matched_tag; |
| |
| // if it also matched the title |
| if (match.matched_title > 0) { |
| score *= 2; |
| } |
| } else if (match.matched_title > 0) { |
| score *= 3; |
| } |
| |
| if (match.lang === currentLang) { |
| score *= 5; |
| } |
| |
| return score; |
| }; |
| |
| for (var i = 0; i < matches.length; i++) { |
| matches[i].__resultScore = _resultScoreFn(matches[i]); |
| } |
| |
| matches.sort(function(a, b) { |
| var n = b.__resultScore - a.__resultScore; |
| |
| if (n === 0) { |
| // lexicographical sort if scores are the same |
| n = (a.title < b.title) ? -1 : 1; |
| } |
| |
| return n; |
| }); |
| } |
| |
| /* Order the result list based on match quality */ |
| function rankAutocompleteApiResults(query, matches) { |
| query = query || ''; |
| if (!matches || !matches.length) { |
| return; |
| } |
| |
| // helper function that gets the last occurence index of the given regex |
| // in the given string, or -1 if not found |
| var _lastSearch = function(s, re) { |
| if (s === '') { |
| return -1; |
| } |
| var l = -1; |
| var tmp; |
| while ((tmp = s.search(re)) >= 0) { |
| if (l < 0) { |
| l = 0; |
| } |
| l += tmp; |
| s = s.substr(tmp + 1); |
| } |
| return l; |
| }; |
| |
| // helper function that counts the occurrences of a given character in |
| // a given string |
| var _countChar = function(s, c) { |
| var n = 0; |
| for (var i = 0; i < s.length; i++) { |
| if (s.charAt(i) === c) { |
| ++n; |
| } |
| } |
| return n; |
| }; |
| |
| var queryLower = query.toLowerCase(); |
| var queryAlnum = (queryLower.match(/\w+/) || [''])[0]; |
| var partPrefixAlnumRE = new RegExp('\\b' + queryAlnum); |
| var partExactAlnumRE = new RegExp('\\b' + queryAlnum + '\\b'); |
| |
| var _resultScoreFn = function(result) { |
| // scores are calculated based on exact and prefix matches, |
| // and then number of path separators (dots) from the last |
| // match (i.e. favoring classes and deep package names) |
| var score = 1.0; |
| var labelLower = result.label.toLowerCase(); |
| var t; |
| var partsAfter; |
| t = _lastSearch(labelLower, partExactAlnumRE); |
| if (t >= 0) { |
| // exact part match |
| partsAfter = _countChar(labelLower.substr(t + 1), '.'); |
| score *= 200 / (partsAfter + 1); |
| } else { |
| t = _lastSearch(labelLower, partPrefixAlnumRE); |
| if (t >= 0) { |
| // part prefix match |
| partsAfter = _countChar(labelLower.substr(t + 1), '.'); |
| score *= 20 / (partsAfter + 1); |
| } |
| } |
| |
| return score; |
| }; |
| |
| for (var i = 0; i < matches.length; i++) { |
| // if the API is deprecated, default score is 0; otherwise, perform scoring |
| if (matches[i].deprecated === 'true') { |
| matches[i].__resultScore = 0; |
| } else { |
| matches[i].__resultScore = _resultScoreFn(matches[i]); |
| } |
| } |
| |
| matches.sort(function(a, b) { |
| var n = b.__resultScore - a.__resultScore; |
| |
| if (n === 0) { |
| // lexicographical sort if scores are the same |
| n = (a.label < b.label) ? -1 : 1; |
| } |
| |
| return n; |
| }); |
| } |
| |
| // Destructive but fast toUnique. |
| // http://stackoverflow.com/a/25082874 |
| function toUnique(array) { |
| var c; |
| var b = array.length || 1; |
| |
| while (c = --b) { |
| while (c--) { |
| if (array[b] === array[c]) { |
| array.splice(c, 1); |
| } |
| } |
| } |
| return array; |
| } |
| |
| return search; |
| })(); |
| |
| (function($) { |
| 'use strict'; |
| |
| /** |
| * Smoothly scroll to location on current page. |
| * @param el |
| * @param options |
| * @constructor |
| */ |
| function ScrollButton(el, options) { |
| this.el = $(el); |
| this.target = $(this.el.attr('href')); |
| this.options = $.extend({}, ScrollButton.DEFAULTS_, options); |
| |
| if (typeof this.options.offset === 'string') { |
| this.options.offset = $(this.options.offset).height(); |
| } |
| |
| this.el.on('click', this.clickHandler_.bind(this)); |
| } |
| |
| /** |
| * Default options |
| * @type {{duration: number, easing: string, offset: number, scrollContainer: string}} |
| * @private |
| */ |
| ScrollButton.DEFAULTS_ = { |
| duration: 300, |
| easing: 'swing', |
| offset: '.dac-header', |
| scrollContainer: 'html, body' |
| }; |
| |
| /** |
| * Scroll logic |
| * @param event |
| * @private |
| */ |
| ScrollButton.prototype.clickHandler_ = function(event) { |
| if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) { |
| return; |
| } |
| |
| event.preventDefault(); |
| |
| var position = this.getTargetPosition(); |
| $(this.options.scrollContainer).animate({ |
| scrollTop: position - this.options.offset |
| }, this.options); |
| }; |
| |
| ScrollButton.prototype.getTargetPosition = function() { |
| if (this.options.scrollContainer === ScrollButton.DEFAULTS_.scrollContainer) { |
| return this.target.offset().top; |
| } |
| var scrollContainer = $(this.options.scrollContainer)[0]; |
| var currentEl = this.target[0]; |
| var pos = 0; |
| while (currentEl !== scrollContainer && currentEl !== null) { |
| pos += currentEl.offsetTop; |
| currentEl = currentEl.offsetParent; |
| } |
| return pos; |
| }; |
| |
| /** |
| * jQuery plugin |
| * @param {object} options - Override default options. |
| */ |
| $.fn.dacScrollButton = function(options) { |
| return this.each(function() { |
| new ScrollButton(this, options); |
| }); |
| }; |
| |
| /** |
| * Data Attribute API |
| */ |
| $(document).on('ready.aranja', function() { |
| $('[data-scroll-button]').each(function() { |
| $(this).dacScrollButton($(this).data()); |
| }); |
| }); |
| })(jQuery); |
| |
| /* global getLangPref */ |
| (function($) { |
| var LANG; |
| |
| function getSearchLang() { |
| if (!LANG) { |
| LANG = getLangPref(); |
| |
| // Fix zh-cn to be zh-CN. |
| LANG = LANG.replace(/-\w+/, function(m) { return m.toUpperCase(); }); |
| } |
| return LANG; |
| } |
| |
| function customSearch(query, start) { |
| var searchParams = { |
| // current cse instance: |
| //cx: '001482626316274216503:zu90b7s047u', |
| // new cse instance: |
| cx: '000521750095050289010:zpcpi1ea4s8', |
| key: 'AIzaSyCFhbGnjW06dYwvRCU8h_zjdpS4PYYbEe8', |
| q: query, |
| start: start || 1, |
| num: 9, |
| hl: getSearchLang(), |
| fields: 'queries,items(pagemap,link,title,htmlSnippet,formattedUrl)' |
| }; |
| |
| return $.get('https://content.googleapis.com/customsearch/v1?' + $.param(searchParams)); |
| } |
| |
| function renderResults(el, results, searchAppliance) { |
| var referenceResults = searchAppliance.getReferenceResults(); |
| if (!results.items) { |
| el.append($('<div>').text('No results')); |
| return; |
| } |
| |
| for (var i = 0; i < results.items.length; i++) { |
| var item = results.items[i]; |
| var isDuplicate = false; |
| $(referenceResults.android).each(function(index, result) { |
| if (item.link.indexOf(result.link) > -1) { |
| isDuplicate = true; |
| return false; |
| } |
| }); |
| |
| if (!isDuplicate) { |
| var hasImage = item.pagemap && item.pagemap.cse_thumbnail; |
| var sectionMatch = item.link.match(/developer\.android\.com\/(\w*)/); |
| var section = (sectionMatch && sectionMatch[1]) || 'blog'; |
| |
| var entry = $('<div>').addClass('dac-custom-search-entry cols'); |
| |
| if (hasImage) { |
| var image = item.pagemap.cse_thumbnail[0]; |
| entry.append($('<div>').addClass('dac-custom-search-image-wrapper') |
| .append($('<div>').addClass('dac-custom-search-image').css('background-image', 'url(' + image.src + ')'))); |
| } |
| |
| entry.append($('<div>').addClass('dac-custom-search-text-wrapper') |
| .append($('<p>').addClass('dac-custom-search-section').text(section)) |
| .append( |
| $('<a>').text(item.title).attr('href', item.link).wrap('<h2>').parent().addClass('dac-custom-search-title') |
| ) |
| .append($('<p>').addClass('dac-custom-search-snippet').html(item.htmlSnippet.replace(/<br>/g, ''))) |
| .append($('<a>').addClass('dac-custom-search-link').text(item.formattedUrl).attr('href', item.link))); |
| |
| el.append(entry); |
| } |
| } |
| |
| if (results.queries.nextPage) { |
| var loadMoreButton = $('<button id="dac-custom-search-load-more">') |
| .addClass('dac-custom-search-load-more') |
| .text('Load more') |
| .click(function() { |
| loadMoreResults(el, results, searchAppliance); |
| }); |
| |
| el.append(loadMoreButton); |
| } |
| }; |
| |
| function loadMoreResults(el, results, searchAppliance) { |
| var query = results.queries.request[0].searchTerms; |
| var start = results.queries.nextPage[0].startIndex; |
| var loadMoreButton = el.find('#dac-custom-search-load-more'); |
| |
| loadMoreButton.text('Loading more...'); |
| |
| customSearch(query, start).then(function(results) { |
| loadMoreButton.remove(); |
| renderResults(el, results, searchAppliance); |
| }); |
| } |
| |
| $.fn.customSearch = function(query, searchAppliance) { |
| var el = $(this); |
| |
| customSearch(query).then(function(results) { |
| el.empty(); |
| renderResults(el, results, searchAppliance); |
| }); |
| }; |
| })(jQuery); |
| |
| /* global METADATA */ |
| |
| (function($) { |
| $.fn.dacSearchRenderHero = function(resources, query) { |
| var el = $(this); |
| el.empty(); |
| |
| var resource = METADATA.searchHeroCollections[query]; |
| |
| if (resource) { |
| el.dacHero(resource, true); |
| el.show(); |
| |
| return true; |
| } else { |
| el.hide(); |
| } |
| }; |
| })(jQuery); |
| |
| (function($) { |
| $.fn.dacSearchRenderReferences = function(results, query) { |
| var referenceCard = $('.suggest-card.reference'); |
| referenceCard.data('searchreferences.dac', {results: results, query: query}); |
| renderResults(referenceCard, results, query, false); |
| }; |
| |
| var ROW_COUNT_COLLAPSED = 20; |
| var ROW_COUNT_EXPANDED = 40; |
| var ROW_COUNT_GOOGLE_COLLAPSED = 1; |
| var ROW_COUNT_GOOGLE_EXPANDED = 8; |
| |
| function onSuggestionClick(e) { |
| devsite.analytics.trackAnalyticsEvent('event', |
| 'Suggestion Click', 'clicked: ' + $(e.currentTarget).attr('href'), |
| 'query: ' + $('#search_autocomplete').val().toLowerCase()); |
| } |
| |
| function buildLink(match) { |
| var link = $('<a>').attr('href', window.toRoot + match.link); |
| |
| var label = match.label; |
| var classNameStart = label.match(/[A-Z]/) ? label.search(/[A-Z]/) : label.lastIndexOf('.') + 1; |
| var newLink = '<span class="namespace">' + |
| label.substr(0, classNameStart) + |
| '</span>' + |
| label.substr(classNameStart, label.length); |
| |
| link.html(newLink); |
| return link; |
| } |
| |
| function buildSuggestion(match, query) { |
| var li = $('<li>').addClass('dac-search-results-reference-entry'); |
| |
| var link = buildLink(match); |
| link.highlightMatches(query); |
| li.append(link); |
| return li[0]; |
| } |
| |
| function buildResults(results, query) { |
| return results.map(function(match) { |
| return buildSuggestion(match, query); |
| }); |
| } |
| |
| function renderAndroidResults(list, gMatches, query) { |
| list.empty(); |
| |
| var header = $('<li class="dac-search-results-reference-header">android APIs</li>'); |
| list.append(header); |
| |
| if (gMatches.length > 0) { |
| list.removeClass('no-results'); |
| |
| var resources = buildResults(gMatches, query); |
| list.append(resources); |
| return true; |
| } else { |
| list.append('<li class="dac-search-results-reference-entry-empty">No results</li>'); |
| } |
| } |
| |
| function renderGoogleDocsResults(list, gGoogleMatches, query) { |
| list = $('.suggest-card.reference ul'); |
| |
| if (gGoogleMatches.length > 0) { |
| list.append('<li class="dac-search-results-reference-header">in Google Services</li>'); |
| |
| var resources = buildResults(gGoogleMatches, query); |
| list.append(resources); |
| |
| return true; |
| } |
| } |
| |
| function renderResults(referenceCard, results, query, expanded) { |
| var list = referenceCard.find('ul'); |
| list.toggleClass('is-expanded', !!expanded); |
| |
| // Figure out how many results we can show in our fixed size box. |
| var total = expanded ? ROW_COUNT_EXPANDED : ROW_COUNT_COLLAPSED; |
| var googleCount = expanded ? ROW_COUNT_GOOGLE_EXPANDED : ROW_COUNT_GOOGLE_COLLAPSED; |
| googleCount = Math.max(googleCount, total - results.android.length); |
| googleCount = Math.min(googleCount, results.docs.length); |
| |
| if (googleCount > 0) { |
| // If there are google results, reserve space for its header. |
| googleCount++; |
| } |
| |
| var androidCount = Math.max(0, total - googleCount); |
| if (androidCount === 0) { |
| // Reserve space for "No reference results" |
| googleCount--; |
| } |
| |
| renderAndroidResults(list, results.android.slice(0, androidCount), query); |
| renderGoogleDocsResults(list, results.docs.slice(0, googleCount - 1), query); |
| |
| var totalResults = results.android.length + results.docs.length; |
| if (totalResults === 0) { |
| list.addClass('no-results'); |
| } |
| |
| // Tweak see more logic to account for references. |
| var hasMore = totalResults > ROW_COUNT_COLLAPSED && !util.matchesMedia('mobile'); |
| if (hasMore) { |
| // We can't actually show all matches, only as many as the expanded list |
| // will fit, so we actually lie if the total results count is more |
| var moreCount = Math.min(totalResults, ROW_COUNT_EXPANDED + ROW_COUNT_GOOGLE_EXPANDED); |
| var $moreLink = $('<li class="dac-search-results-reference-entry-empty " data-toggle="show-more">see more matches</li>'); |
| list.append($moreLink.on('click', onToggleMore)); |
| } |
| var searchEl = $('#search-resources'); |
| searchEl.toggleClass('dac-has-more', searchEl.hasClass('dac-has-more') || (hasMore && !expanded)); |
| searchEl.toggleClass('dac-has-less', searchEl.hasClass('dac-has-less') || (hasMore && expanded)); |
| } |
| |
| function onToggleMore(e) { |
| var link = $(e.currentTarget); |
| var referenceCard = $('.suggest-card.reference'); |
| var data = referenceCard.data('searchreferences.dac'); |
| |
| if (util.matchesMedia('mobile')) { return; } |
| |
| renderResults(referenceCard, data.results, data.query, link.data('toggle') === 'show-more'); |
| } |
| |
| $(document).on('click', '.dac-search-results-resources [data-toggle="show-more"]', onToggleMore); |
| $(document).on('click', '.dac-search-results-resources [data-toggle="show-less"]', onToggleMore); |
| $(document).on('click', '.suggest-card.reference a', onSuggestionClick); |
| })(jQuery); |
| |
| (function($) { |
| function highlightPage(query, page) { |
| page.find('.title').highlightMatches(query); |
| } |
| |
| $.fn.dacSearchRenderResources = function(gDocsMatches, query) { |
| this.resourceWidget(gDocsMatches, { |
| itemsPerPage: 18, |
| initialResults: 6, |
| cardSizes: ['6x2'], |
| onRenderPage: highlightPage.bind(null, query) |
| }); |
| |
| return this; |
| }; |
| })(jQuery); |
| |
| /*global metadata */ |
| |
| (function($, metadata) { |
| 'use strict'; |
| |
| function Search() { |
| this.body = $('body'); |
| this.lastQuery = null; |
| this.searchResults = $('#search-results'); |
| this.searchClose = $('[data-search-close]'); |
| this.searchClear = $('[data-search-clear]'); |
| this.searchInput = $('#search_autocomplete'); |
| this.searchResultsContent = $('#dac-search-results-content'); |
| this.searchResultsFor = $('#search-results-for'); |
| this.searchResultsHistory = $('#dac-search-results-history'); |
| this.searchResultsResources = $('#search-resources'); |
| this.searchResultsHero = $('#dac-search-results-hero'); |
| this.searchResultsReference = $('#dac-search-results-reference'); |
| this.searchHeader = $('[data-search]').data('search-input.dac'); |
| this.pageNav = $('a[name=navigation]'); |
| this.currQueryReferenceResults = {}; |
| this.isOpen = false; |
| } |
| |
| Search.prototype.init = function() { |
| this.searchHistory = window.dacStore('search-history'); |
| |
| this.searchInput.focus(this.onSearchChanged.bind(this)); |
| this.searchInput.keypress(this.handleKeyboardShortcut.bind(this)); |
| this.pageNav.keyup(this.handleTabbedToNav.bind(this)); |
| this.searchResults.keyup(this.handleKeyboardShortcut.bind(this)); |
| this.searchInput.on('input', this.onSearchChanged.bind(this)); |
| this.searchClear.click(this.clear.bind(this)); |
| this.searchClose.click(this.close.bind(this)); |
| |
| this.customSearch = $.fn.debounce(function(query) { |
| $('#dac-custom-search-results').customSearch(query, this); |
| }.bind(this), 1000); |
| // Start search shortcut (/) |
| $('body').keyup(function(event) { |
| if (event.which === 191 && $(event.target).is(':not(:input)')) { |
| this.searchInput.focus(); |
| } |
| }.bind(this)); |
| |
| $(window).on('popstate', this.onPopState.bind(this)); |
| $(window).hashchange(this.onHashChange.bind(this)); |
| this.onHashChange(); |
| }; |
| |
| Search.prototype.checkRedirectToIndex = function() { |
| var query = this.getUrlQuery(); |
| var target = window.getLangTarget(); |
| var prefix = (target !== 'en') ? '/intl/' + target : ''; |
| var pathname = location.pathname.slice(prefix.length); |
| if (query != null && pathname !== '/index.html') { |
| location.href = prefix + '/index.html' + location.hash; |
| return true; |
| } |
| }; |
| |
| Search.prototype.handleKeyboardShortcut = function(event) { |
| // Close (esc) |
| if (event.which === 27) { |
| this.searchClose.trigger('click'); |
| event.preventDefault(); |
| } |
| |
| // Previous result (up arrow) |
| if (event.which === 38) { |
| this.previousResult(); |
| event.preventDefault(); |
| } |
| |
| // Next result (down arrow) |
| if (event.which === 40) { |
| this.nextResult(); |
| event.preventDefault(); |
| } |
| |
| // Navigate to result (enter) |
| if (event.which === 13) { |
| this.navigateToResult(); |
| event.preventDefault(); |
| } |
| }; |
| |
| Search.prototype.handleTabbedToNav = function(event) { |
| if (this.isOpen) { |
| this.searchClose.trigger('click'); |
| } |
| } |
| |
| Search.prototype.goToResult = function(relativeIndex) { |
| var links = this.searchResults.find('a').filter(':visible'); |
| var selectedLink = this.searchResults.find('.dac-selected'); |
| |
| if (selectedLink.length) { |
| var found = $.inArray(selectedLink[0], links); |
| |
| selectedLink.removeClass('dac-selected'); |
| links.eq(found + relativeIndex).addClass('dac-selected'); |
| return true; |
| } else { |
| if (relativeIndex > 0) { |
| links.first().addClass('dac-selected'); |
| } |
| } |
| }; |
| |
| Search.prototype.previousResult = function() { |
| this.goToResult(-1); |
| }; |
| |
| Search.prototype.nextResult = function() { |
| this.goToResult(1); |
| }; |
| |
| Search.prototype.navigateToResult = function() { |
| var query = this.getQuery(); |
| var selectedLink = this.searchResults.find('.dac-selected'); |
| |
| if (selectedLink.length) { |
| selectedLink[0].click(); |
| } else { |
| this.searchHistory.push(query); |
| this.addQueryToUrl(query); |
| |
| var isMobileOrTablet = typeof window.orientation !== 'undefined'; |
| |
| if (isMobileOrTablet) { |
| this.searchInput.blur(); |
| } |
| } |
| }; |
| |
| Search.prototype.onHashChange = function() { |
| var query = this.getUrlQuery(); |
| if (query != null && query !== this.getQuery()) { |
| this.searchInput.val(query); |
| this.onSearchChanged(); |
| } |
| }; |
| |
| Search.prototype.clear = function() { |
| this.searchInput.val(''); |
| window.location.hash = ''; |
| this.onSearchChanged(); |
| this.searchInput.focus(); |
| }; |
| |
| Search.prototype.close = function() { |
| this.removeQueryFromUrl(); |
| this.searchInput.blur(); |
| this.hideOverlay(); |
| this.pageNav.focus(); |
| this.isOpen = false; |
| }; |
| |
| Search.prototype.getUrlQuery = function() { |
| var queryMatch = location.hash.match(/q=(.*)&?/); |
| return queryMatch && queryMatch[1] && decodeURI(queryMatch[1]); |
| }; |
| |
| Search.prototype.getQuery = function() { |
| return this.searchInput.val().replace(/(^ +)|( +$)/g, ''); |
| }; |
| |
| Search.prototype.getReferenceResults = function() { |
| return this.currQueryReferenceResults; |
| }; |
| |
| Search.prototype.onSearchChanged = function() { |
| var query = this.getQuery(); |
| |
| this.showOverlay(); |
| this.render(query); |
| }; |
| |
| Search.prototype.render = function(query) { |
| if (this.lastQuery === query) { return; } |
| |
| if (query.length < 2) { |
| query = ''; |
| } |
| |
| this.lastQuery = query; |
| this.searchResultsFor.text(query); |
| |
| // CSE results lag behind the metadata/reference results. We need to empty |
| // the CSE results and add 'Loading' text so user's aren't looking at two |
| // different sets of search results at one time. |
| var $loadingEl = |
| $('<div class="loadingCustomSearchResults">Loading Results...</div>'); |
| $('#dac-custom-search-results').empty().prepend($loadingEl); |
| |
| this.customSearch(query); |
| var metadataResults = metadata.search(query); |
| this.searchResultsResources.dacSearchRenderResources(metadataResults.resources, query); |
| this.searchResultsReference.dacSearchRenderReferences(metadataResults, query); |
| this.currQueryReferenceResults = metadataResults; |
| var hasHero = this.searchResultsHero.dacSearchRenderHero(metadataResults.resources, query); |
| var hasQuery = !!query; |
| |
| this.searchResultsReference.toggle(!hasHero); |
| this.searchResultsContent.toggle(hasQuery); |
| this.searchResultsHistory.toggle(!hasQuery); |
| this.addQueryToUrl(query); |
| this.pushState(); |
| }; |
| |
| Search.prototype.addQueryToUrl = function(query) { |
| var hash = 'q=' + encodeURI(query); |
| |
| if (query) { |
| if (window.history.replaceState) { |
| window.history.replaceState(null, '', '#' + hash); |
| } else { |
| window.location.hash = hash; |
| } |
| } |
| }; |
| |
| Search.prototype.onPopState = function() { |
| if (!this.getUrlQuery()) { |
| this.hideOverlay(); |
| this.searchHeader.unsetActiveState(); |
| } |
| }; |
| |
| Search.prototype.removeQueryFromUrl = function() { |
| window.location.hash = ''; |
| }; |
| |
| Search.prototype.pushState = function() { |
| if (window.history.pushState && !this.lastQuery.length) { |
| window.history.pushState(null, ''); |
| } |
| }; |
| |
| Search.prototype.showOverlay = function() { |
| this.isOpen = true; |
| this.body.addClass('dac-modal-open dac-search-open'); |
| }; |
| |
| Search.prototype.hideOverlay = function() { |
| this.body.removeClass('dac-modal-open dac-search-open'); |
| }; |
| |
| $(document).on('ready.aranja', function() { |
| var search = new Search(); |
| search.init(); |
| }); |
| })(jQuery, metadata); |
| |
| window.dacStore = (function(window) { |
| /** |
| * Creates a new persistent store. |
| * If localStorage is unavailable, the items are stored in memory. |
| * |
| * @constructor |
| * @param {string} name The name of the store |
| * @param {number} maxSize The maximum number of items the store can hold. |
| */ |
| var Store = function(name, maxSize) { |
| var content = []; |
| |
| var hasLocalStorage = !!window.localStorage; |
| |
| if (hasLocalStorage) { |
| try { |
| content = JSON.parse(window.localStorage.getItem(name) || []); |
| } catch (e) { |
| // Store contains invalid data |
| window.localStorage.removeItem(name); |
| } |
| } |
| |
| function push(item) { |
| if (content[0] === item) { |
| return; |
| } |
| |
| content.unshift(item); |
| |
| if (maxSize) { |
| content.splice(maxSize, content.length); |
| } |
| |
| if (hasLocalStorage) { |
| window.localStorage.setItem(name, JSON.stringify(content)); |
| } |
| } |
| |
| function all() { |
| // Return a copy |
| return content.slice(); |
| } |
| |
| return { |
| push: push, |
| all: all |
| }; |
| }; |
| |
| var stores = { |
| 'search-history': new Store('search-history', 3) |
| }; |
| |
| /** |
| * Get a named persistent store. |
| * @param {string} name |
| * @return {Store} |
| */ |
| return function getStore(name) { |
| return stores[name]; |
| }; |
| })(window); |
| |
| (function($) { |
| 'use strict'; |
| |
| /** |
| * A component that swaps two dynamic height views with an animation. |
| * Listens for the following events: |
| * * swap-content: triggers SwapContent.swap_() |
| * * swap-reset: triggers SwapContent.reset() |
| * @param el |
| * @param options |
| * @constructor |
| */ |
| function SwapContent(el, options) { |
| this.el = $(el); |
| this.options = $.extend({}, SwapContent.DEFAULTS_, options); |
| this.options.dynamic = this.options.dynamic === 'true'; |
| this.containers = this.el.find(this.options.container); |
| this.initiallyActive = this.containers.children('.' + this.options.activeClass).eq(0); |
| this.el.on('swap-content', this.swap.bind(this)); |
| this.el.on('swap-reset', this.reset.bind(this)); |
| this.el.find(this.options.swapButton).on('click keypress', function(e) { |
| if (e.type == 'keypress' && e.which == 13 || e.type == 'click') { |
| this.swap(); |
| } |
| }.bind(this)); |
| } |
| |
| /** |
| * SwapContent's default settings. |
| * @type {{activeClass: string, container: string, transitionSpeed: number}} |
| * @private |
| */ |
| SwapContent.DEFAULTS_ = { |
| activeClass: 'dac-active', |
| container: '[data-swap-container]', |
| dynamic: 'true', |
| swapButton: '[data-swap-button]', |
| transitionSpeed: 500 |
| }; |
| |
| /** |
| * Returns container's visible height. |
| * @param container |
| * @returns {number} |
| */ |
| SwapContent.prototype.currentHeight = function(container) { |
| return container.children('.' + this.options.activeClass).outerHeight(); |
| }; |
| |
| /** |
| * Reset to show initial content |
| */ |
| SwapContent.prototype.reset = function() { |
| if (!this.initiallyActive.hasClass(this.initiallyActive)) { |
| this.containers.children().toggleClass(this.options.activeClass); |
| } |
| }; |
| |
| /** |
| * Complete the swap. |
| */ |
| SwapContent.prototype.complete = function() { |
| this.containers.height('auto'); |
| this.containers.trigger('swap-complete'); |
| }; |
| |
| /** |
| * Perform the swap of content. |
| */ |
| SwapContent.prototype.swap = function() { |
| this.containers.each(function(index, container) { |
| container = $(container); |
| |
| if (!this.options.dynamic) { |
| container.children().toggleClass(this.options.activeClass); |
| this.complete.bind(this); |
| $('.' + this.options.activeClass).focus(); |
| return; |
| } |
| |
| container.height(this.currentHeight(container)).children().toggleClass(this.options.activeClass); |
| container.animate({height: this.currentHeight(container)}, this.options.transitionSpeed, |
| this.complete.bind(this)); |
| }.bind(this)); |
| }; |
| |
| /** |
| * jQuery plugin |
| * @param {object} options - Override default options. |
| */ |
| $.fn.dacSwapContent = function(options) { |
| return this.each(function() { |
| new SwapContent(this, options); |
| }); |
| }; |
| |
| /** |
| * Data Attribute API |
| */ |
| $(document).on('ready.aranja', function() { |
| $('[data-swap]').each(function() { |
| $(this).dacSwapContent($(this).data()); |
| }); |
| }); |
| })(jQuery); |
| |
| /* Tabs */ |
| (function($) { |
| 'use strict'; |
| |
| /** |
| * @param {HTMLElement} el - The DOM element. |
| * @param {Object} options |
| * @constructor |
| */ |
| function Tabs(el, options) { |
| this.el = $(el); |
| this.options = $.extend({}, Tabs.DEFAULTS_, options); |
| this.init(); |
| } |
| |
| Tabs.DEFAULTS_ = { |
| activeClass: 'dac-active', |
| viewDataAttr: 'tab-view', |
| itemDataAttr: 'tab-item' |
| }; |
| |
| Tabs.prototype.init = function() { |
| var itemDataAttribute = '[data-' + this.options.itemDataAttr + ']'; |
| this.tabEl_ = this.el.find(itemDataAttribute); |
| this.tabViewEl_ = this.el.find('[data-' + this.options.viewDataAttr + ']'); |
| this.el.on('click.dac-tabs', itemDataAttribute, this.changeTabs.bind(this)); |
| }; |
| |
| Tabs.prototype.changeTabs = function(event) { |
| var current = $(event.currentTarget); |
| var index = current.index(); |
| |
| if (current.hasClass(this.options.activeClass)) { |
| current.add(this.tabViewEl_.eq(index)).removeClass(this.options.activeClass); |
| } else { |
| this.tabEl_.add(this.tabViewEl_).removeClass(this.options.activeClass); |
| current.add(this.tabViewEl_.eq(index)).addClass(this.options.activeClass); |
| } |
| }; |
| |
| /** |
| * jQuery plugin |
| */ |
| $.fn.dacTabs = function() { |
| return this.each(function() { |
| var el = $(this); |
| new Tabs(el, el.data()); |
| }); |
| }; |
| |
| /** |
| * Data Attribute API |
| */ |
| $(function() { |
| $('[data-tabs]').dacTabs(); |
| }); |
| })(jQuery); |
| |
| /* Toast Component */ |
| (function($) { |
| 'use strict'; |
| /** |
| * @constant |
| * @type {String} |
| */ |
| var LOCAL_STORAGE_KEY = 'toast-closed-index'; |
| |
| /** |
| * Dictionary from local storage. |
| */ |
| var toastDictionary = localStorage.getItem(LOCAL_STORAGE_KEY); |
| toastDictionary = toastDictionary ? JSON.parse(toastDictionary) : {}; |
| |
| /** |
| * Variable used for caching the body. |
| */ |
| var bodyCached; |
| |
| /** |
| * @param {HTMLElement} el - The DOM element. |
| * @param {Object} options |
| * @constructor |
| */ |
| function Toast(el, options) { |
| this.el = $(el); |
| this.options = $.extend({}, Toast.DEFAULTS_, options); |
| this.init(); |
| } |
| |
| Toast.DEFAULTS_ = { |
| closeBtnClass: 'dac-toast-close-btn', |
| closeDuration: 200, |
| visibleClass: 'dac-visible', |
| wrapClass: 'dac-toast-wrap' |
| }; |
| |
| /** |
| * Generate a close button. |
| * @returns {*|HTMLElement} |
| */ |
| Toast.prototype.closeBtn = function() { |
| this.closeBtnEl = this.closeBtnEl || $('<button class="' + this.options.closeBtnClass + '">' + |
| '<span class="dac-button dac-raised dac-primary">OK</span>' + |
| '</button>'); |
| return this.closeBtnEl; |
| }; |
| |
| /** |
| * Initialize a new toast element |
| */ |
| Toast.prototype.init = function() { |
| this.hash = this.el.text().replace(/[\s\n\t]/g, '').split('').slice(0, 128).join(''); |
| |
| if (toastDictionary[this.hash]) { |
| return; |
| } |
| |
| this.closeBtn().on('click', this.onClickHandler.bind(this)); |
| this.el.find('.' + this.options.wrapClass).append(this.closeBtn()); |
| this.el.addClass(this.options.visibleClass); |
| this.dynamicPadding(this.el.outerHeight()); |
| }; |
| |
| /** |
| * Add padding to make sure all page is visible. |
| */ |
| Toast.prototype.dynamicPadding = function(val) { |
| var currentPadding = parseInt(bodyCached.css('padding-bottom') || 0); |
| bodyCached.css('padding-bottom', val + currentPadding); |
| }; |
| |
| /** |
| * Remove a toast from the DOM |
| */ |
| Toast.prototype.remove = function() { |
| this.dynamicPadding(-this.el.outerHeight()); |
| this.el.remove(); |
| }; |
| |
| /** |
| * Handle removal of the toast. |
| */ |
| Toast.prototype.onClickHandler = function() { |
| // Only fadeout toasts from top of stack. Others are removed immediately. |
| var duration = this.el.index() === 0 ? this.options.closeDuration : 0; |
| this.el.fadeOut(duration, this.remove.bind(this)); |
| |
| // Save closed state. |
| toastDictionary[this.hash] = 1; |
| localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(toastDictionary)); |
| }; |
| |
| /** |
| * jQuery plugin |
| * @param {object} options - Override default options. |
| */ |
| $.fn.dacToast = function() { |
| return this.each(function() { |
| var el = $(this); |
| new Toast(el, el.data()); |
| }); |
| }; |
| |
| /** |
| * Data Attribute API |
| */ |
| $(function() { |
| bodyCached = $('#body-content'); |
| $('[data-toast]').dacToast(); |
| }); |
| })(jQuery); |
| |
| (function($) { |
| function Toggle(el) { |
| $(el).on('click.dac.togglesection', this.toggle); |
| } |
| |
| Toggle.prototype.toggle = function() { |
| var $this = $(this); |
| |
| var $parent = getParent($this); |
| var isExpanded = $parent.hasClass('is-expanded'); |
| |
| transitionMaxHeight($parent.find('.dac-toggle-content'), !isExpanded); |
| $parent.toggleClass('is-expanded'); |
| |
| return false; |
| }; |
| |
| function getParent($this) { |
| var selector = $this.attr('data-target'); |
| |
| if (!selector) { |
| selector = $this.attr('href'); |
| selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, ''); |
| } |
| |
| var $parent = selector && $(selector); |
| |
| $parent = $parent && $parent.length ? $parent : $this.closest('.dac-toggle'); |
| |
| return $parent.length ? $parent : $this.parent(); |
| } |
| |
| /** |
| * Runs a transition of max-height along with responsive styles which hide or expand the element. |
| * @param $el |
| * @param visible |
| */ |
| function transitionMaxHeight($el, visible) { |
| var contentHeight = $el.prop('scrollHeight'); |
| var targetHeight = visible ? contentHeight : 0; |
| var duration = $el.transitionDuration(); |
| |
| // If we're hiding, first set the maxHeight we're transitioning from. |
| if (!visible) { |
| $el.css({ |
| transitionDuration: '0s', |
| maxHeight: contentHeight + 'px' |
| }) |
| .resolveStyles() |
| .css('transitionDuration', ''); |
| } |
| |
| // Transition to new state |
| $el.css('maxHeight', targetHeight); |
| |
| // Reset maxHeight to css value after transition. |
| setTimeout(function() { |
| $el.css({ |
| transitionDuration: '0s', |
| maxHeight: '' |
| }) |
| .resolveStyles() |
| .css('transitionDuration', ''); |
| }, duration); |
| } |
| |
| // Utility to get the transition duration for the element. |
| $.fn.transitionDuration = function() { |
| var d = $(this).css('transitionDuration') || '0s'; |
| |
| return +(parseFloat(d) * (/ms/.test(d) ? 1 : 1000)).toFixed(0); |
| }; |
| |
| // jQuery plugin |
| $.fn.toggleSection = function(option) { |
| return this.each(function() { |
| var $this = $(this); |
| var data = $this.data('dac.togglesection'); |
| if (!data) {$this.data('dac.togglesection', (data = new Toggle(this)));} |
| if (typeof option === 'string') {data[option].call($this);} |
| }); |
| }; |
| |
| // Data api |
| $(document) |
| .on('click.toggle', '[data-toggle="section"]', Toggle.prototype.toggle); |
| })(jQuery); |
| |
| (function(window) { |
| /** |
| * Media query breakpoints. Should match CSS. |
| */ |
| var BREAKPOINTS = { |
| mobile: [0, 719], |
| tablet: [720, 959], |
| desktop: [960, 9999] |
| }; |
| |
| /** |
| * Fisher-Yates Shuffle (Knuth shuffle). |
| * @param {Array} input |
| * @returns {Array} shuffled array. |
| */ |
| function shuffle(input) { |
| for (var i = input.length; i >= 0; i--) { |
| var randomIndex = Math.floor(Math.random() * (i + 1)); |
| var randomItem = input[randomIndex]; |
| input[randomIndex] = input[i]; |
| input[i] = randomItem; |
| } |
| |
| return input; |
| } |
| |
| /** |
| * Matches media breakpoints like in CSS. |
| * @param {string} form of either mobile, tablet or desktop. |
| */ |
| function matchesMedia(form) { |
| var breakpoint = BREAKPOINTS[form]; |
| return window.innerWidth >= breakpoint[0] && window.innerWidth <= breakpoint[1]; |
| } |
| |
| window.util = { |
| shuffle: shuffle, |
| matchesMedia: matchesMedia |
| }; |
| })(window); |
| |
| (function($, window) { |
| 'use strict'; |
| |
| var YouTubePlayer = (function() { |
| var player; |
| |
| function VideoPlayer() { |
| this.mPlayerPaused = false; |
| this.doneSetup = false; |
| } |
| |
| VideoPlayer.prototype.setup = function() { |
| // loads the IFrame Player API code asynchronously. |
| $.getScript('https://www.youtube.com/iframe_api'); |
| |
| // Add the shadowbox HTML to the body |
| $('body').prepend( |
| '<div id="video-player" class="Video">' + |
| '<div id="video-overlay" class="Video-overlay" />' + |
| '<div class="Video-container">' + |
| '<div class="Video-frame">' + |
| '<span class="Video-loading">Loading…</span>' + |
| '<div id="youTubePlayer"></div>' + |
| '</div>' + |
| '<div class="Video-controls">' + |
| '<button id="picture-in-picture" class="Video-button Video-button--picture-in-picture">' + |
| '<button id="close-video" class="Video-button Video-button--close" />' + |
| '</div>' + |
| '</div>' + |
| '</div>'); |
| |
| this.videoPlayer = $('#video-player'); |
| |
| var pictureInPictureButton = this.videoPlayer.find('#picture-in-picture'); |
| pictureInPictureButton.on('click.aranja', this.toggleMinimizeVideo.bind(this)); |
| |
| var videoOverlay = this.videoPlayer.find('#video-overlay'); |
| var closeButton = this.videoPlayer.find('#close-video'); |
| var closeVideo = this.closeVideo.bind(this); |
| videoOverlay.on('click.aranja', closeVideo); |
| closeButton.on('click.aranja', closeVideo); |
| |
| this.doneSetup = true; |
| }; |
| |
| VideoPlayer.prototype.startYouTubePlayer = function(videoId) { |
| this.videoPlayer.show(); |
| |
| if (!this.isLoaded) { |
| this.queueVideo = videoId; |
| return; |
| } |
| |
| this.mPlayerPaused = false; |
| // check if we've already created this player |
| if (!this.youTubePlayer) { |
| // check if there's a start time specified |
| var idAndHash = videoId.split('#'); |
| var startTime = 0; |
| if (idAndHash.length > 1) { |
| startTime = idAndHash[1].split('t=')[1] !== undefined ? idAndHash[1].split('t=')[1] : 0; |
| } |
| // enable localized player |
| var lang = getLangPref(); |
| var captionsOn = lang === 'en' ? 0 : 1; |
| |
| this.youTubePlayer = new YT.Player('youTubePlayer', { |
| height: 720, |
| width: 1280, |
| videoId: idAndHash[0], |
| // jscs:disable requireCamelCaseOrUpperCaseIdentifiers |
| playerVars: {start: startTime, hl: lang, cc_load_policy: captionsOn}, |
| // jscs:enable |
| events: { |
| 'onReady': this.onPlayerReady.bind(this), |
| 'onStateChange': this.onPlayerStateChange.bind(this) |
| } |
| }); |
| } else { |
| // if a video different from the one already playing was requested, cue it up |
| if (videoId !== this.getVideoId()) { |
| this.youTubePlayer.cueVideoById(videoId); |
| } |
| this.youTubePlayer.playVideo(); |
| } |
| }; |
| |
| VideoPlayer.prototype.onPlayerReady = function(event) { |
| if (!isMobile) { |
| event.target.playVideo(); |
| this.mPlayerPaused = false; |
| } |
| }; |
| |
| VideoPlayer.prototype.toggleMinimizeVideo = function(event) { |
| event.stopPropagation(); |
| this.videoPlayer.toggleClass('Video--picture-in-picture'); |
| }; |
| |
| VideoPlayer.prototype.closeVideo = function() { |
| try { |
| this.youTubePlayer.pauseVideo(); |
| } catch (e) { |
| } |
| this.videoPlayer.fadeOut(200, function() { |
| this.videoPlayer.removeClass('Video--picture-in-picture'); |
| }.bind(this)); |
| }; |
| |
| VideoPlayer.prototype.getVideoId = function() { |
| // jscs:disable requireCamelCaseOrUpperCaseIdentifiers |
| return this.youTubePlayer && this.youTubePlayer.getVideoData().video_id; |
| // jscs:enable |
| }; |
| |
| /* Track youtube playback for analytics */ |
| VideoPlayer.prototype.onPlayerStateChange = function(event) { |
| var videoId = this.getVideoId(); |
| var currentTime = this.youTubePlayer && this.youTubePlayer.getCurrentTime(); |
| |
| // Video starts, send the video ID |
| if (event.data === YT.PlayerState.PLAYING) { |
| if (this.mPlayerPaused) { |
| devsite.analytics.trackAnalyticsEvent('event', |
| 'Videos', 'Resume', videoId); |
| } else { |
| // track the start playing event so we know from which page the video was selected |
| devsite.analytics.trackAnalyticsEvent('event', |
| 'Videos', 'Start: ' + videoId, 'on: ' + document.location.href); |
| } |
| this.mPlayerPaused = false; |
| } |
| |
| // Video paused, send video ID and video elapsed time |
| if (event.data === YT.PlayerState.PAUSED) { |
| devsite.analytics.trackAnalyticsEvent('event', |
| 'Videos', 'Paused: ' + videoId, 'on: ' + currentTime); |
| this.mPlayerPaused = true; |
| } |
| |
| // Video finished, send video ID and video elapsed time |
| if (event.data === YT.PlayerState.ENDED) { |
| devsite.analytics.trackAnalyticsEvent('event', |
| 'Videos', 'Finished: ' + videoId, 'on: ' + currentTime); |
| this.mPlayerPaused = true; |
| } |
| }; |
| |
| return { |
| getPlayer: function() { |
| if (!player) { |
| player = new VideoPlayer(); |
| } |
| |
| return player; |
| } |
| }; |
| })(); |
| |
| var videoPlayer = YouTubePlayer.getPlayer(); |
| |
| window.onYouTubeIframeAPIReady = function() { |
| videoPlayer.isLoaded = true; |
| |
| if (videoPlayer.queueVideo) { |
| videoPlayer.startYouTubePlayer(videoPlayer.queueVideo); |
| } |
| }; |
| |
| function wrapLinkInPlayer(e) { |
| e.preventDefault(); |
| |
| if (!videoPlayer.doneSetup) { |
| videoPlayer.setup(); |
| } |
| |
| var videoIdMatches = $(e.currentTarget).attr('href').match(/(?:youtu.be\/|v=)([^&]*)/); |
| var videoId = videoIdMatches && videoIdMatches[1]; |
| |
| if (videoId) { |
| videoPlayer.startYouTubePlayer(videoId); |
| } |
| } |
| |
| $(document).on('click.video', 'a[href*="youtube.com/watch"], a[href*="youtu.be"]', wrapLinkInPlayer); |
| })(jQuery, window); |
| |
| /** |
| * Wide table |
| * |
| * Wraps tables in a scrollable area so you can read them on mobile. |
| */ |
| (function($) { |
| function initWideTable() { |
| $('table.jd-sumtable').each(function(i, table) { |
| $(table).wrap('<div class="dac-expand wide-table">'); |
| }); |
| } |
| |
| $(function() { |
| initWideTable(); |
| }); |
| })(jQuery); |
| |
| /** Utilities */ |
| |
| /* returns the given string with all HTML brackets converted to entities |
| TODO: move this to the site's JS library */ |
| function escapeHTML(string) { |
| return string.replace(/</g,"<") |
| .replace(/>/g,">"); |
| }; |
| |
| function getQueryVariable(variable) { |
| var query = window.location.search.substring(1); |
| var vars = query.split("&"); |
| for (var i=0;i<vars.length;i++) { |
| var pair = vars[i].split("="); |
| if(pair[0] == variable){return pair[1];} |
| } |
| return(false); |
| }; |