forked from openkylin/platform_build
am 5c1d21b4: am 95948b88: add script and style for toggling which IDE instructions to show.
* commit '5c1d21b458880bcc466bc353bc9afbef8e439afc': add script and style for toggling which IDE instructions to show.
This commit is contained in:
commit
b75b32830c
|
@ -2989,6 +2989,34 @@ a.header-toggle {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* for IDE instruction toggle (Studio/Eclipse/Other) */
|
||||||
|
select.ide {
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid #bbb;
|
||||||
|
border-left: 0;
|
||||||
|
border-right: 0;
|
||||||
|
margin: 10px 0;
|
||||||
|
padding: 10px 0;
|
||||||
|
color:#666;
|
||||||
|
}
|
||||||
|
select.ide,
|
||||||
|
select.ide option {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size:16px;
|
||||||
|
font-weight:500;
|
||||||
|
}
|
||||||
|
/* hide all except eclipse by default */
|
||||||
|
.select-ide.studio,
|
||||||
|
.select-ide.other {
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
/* ... unless eclipse also includes one of the others */
|
||||||
|
.select-ide.eclipse.studio,
|
||||||
|
.select-ide.eclipse.other {
|
||||||
|
display:block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* -----------------------------------------------
|
/* -----------------------------------------------
|
||||||
good/bad example containers
|
good/bad example containers
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -1088,8 +1088,16 @@ function hideNestedItems(list, 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);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -3444,8 +3452,8 @@ function showSamples() {
|
||||||
} else if (isCarousel) {
|
} else if (isCarousel) {
|
||||||
drawResourcesCarouselWidget($widget, opts, resources);
|
drawResourcesCarouselWidget($widget, opts, resources);
|
||||||
} else if (isStack) {
|
} else if (isStack) {
|
||||||
/* Looks like this got removed and is not used, so repurposing for the
|
/* Looks like this got removed and is not used, so repurposing for the
|
||||||
homepage style layout.
|
homepage style layout.
|
||||||
Modified by LFL 6/6/14
|
Modified by LFL 6/6/14
|
||||||
*/
|
*/
|
||||||
//var sections = buildSectionList(opts);
|
//var sections = buildSectionList(opts);
|
||||||
|
@ -3534,11 +3542,11 @@ function showSamples() {
|
||||||
|
|
||||||
for (var i = 0; i < resources.length; ++i) {
|
for (var i = 0; i < resources.length; ++i) {
|
||||||
var $card = createResourceElement(resources[i], opts);
|
var $card = createResourceElement(resources[i], opts);
|
||||||
|
|
||||||
if (opts.resourceStyle.indexOf('related') > -1) {
|
if (opts.resourceStyle.indexOf('related') > -1) {
|
||||||
$card.addClass('related-card');
|
$card.addClass('related-card');
|
||||||
}
|
}
|
||||||
|
|
||||||
cards.push($card[0]);
|
cards.push($card[0]);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -3562,14 +3570,14 @@ function showSamples() {
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Create a resource card using the given resource object and a list of html
|
Create a resource card using the given resource object and a list of html
|
||||||
configured options. Returns a jquery object containing the element.
|
configured options. Returns a jquery object containing the element.
|
||||||
*/
|
*/
|
||||||
function createResourceElement(resource, opts, plusone) {
|
function createResourceElement(resource, opts, plusone) {
|
||||||
var $el;
|
var $el;
|
||||||
|
|
||||||
// The difference here is that generic cards are not entirely clickable
|
// 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
|
// 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
|
// the resource-card class so it appears with a transparent background
|
||||||
|
@ -3581,13 +3589,13 @@ function showSamples() {
|
||||||
.decorateResource(resource, opts);
|
.decorateResource(resource, opts);
|
||||||
} else {
|
} else {
|
||||||
var cls = 'resource resource-card';
|
var cls = 'resource resource-card';
|
||||||
|
|
||||||
$el = $('<a>')
|
$el = $('<a>')
|
||||||
.addClass(cls)
|
.addClass(cls)
|
||||||
.attr('href', cleanUrl(resource.url))
|
.attr('href', cleanUrl(resource.url))
|
||||||
.decorateResourceCard(resource, plusone);
|
.decorateResourceCard(resource, plusone);
|
||||||
}
|
}
|
||||||
|
|
||||||
return $el;
|
return $el;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -3624,10 +3632,10 @@ function showSamples() {
|
||||||
var resource = resources[i];
|
var resource = resources[i];
|
||||||
|
|
||||||
var $card = createResourceElement(resources[i], opts, plusone);
|
var $card = createResourceElement(resources[i], opts, plusone);
|
||||||
|
|
||||||
$card.addClass('resource-card-' + cardSize +
|
$card.addClass('resource-card-' + cardSize +
|
||||||
' resource-card-' + resource.type);
|
' resource-card-' + resource.type);
|
||||||
|
|
||||||
if (isStack) {
|
if (isStack) {
|
||||||
$card.addClass('resource-card-' + isStack[1] + 'x' + isStack[2]);
|
$card.addClass('resource-card-' + isStack[1] + 'x' + isStack[2]);
|
||||||
if (++stackCount == parseInt(isStack[3])) {
|
if (++stackCount == parseInt(isStack[3])) {
|
||||||
|
@ -3777,13 +3785,13 @@ function showSamples() {
|
||||||
}
|
}
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
function cleanUrl(url)
|
function cleanUrl(url)
|
||||||
{
|
{
|
||||||
if (url && url.indexOf('//') === -1) {
|
if (url && url.indexOf('//') === -1) {
|
||||||
url = toRoot + url;
|
url = toRoot + url;
|
||||||
}
|
}
|
||||||
|
|
||||||
return url;
|
return url;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -3835,49 +3843,49 @@ function showSamples() {
|
||||||
|
|
||||||
(function($) {
|
(function($) {
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Utility method for creating dom for the description area of a card.
|
Utility method for creating dom for the description area of a card.
|
||||||
Used in decorateResourceCard and decorateResource.
|
Used in decorateResourceCard and decorateResource.
|
||||||
*/
|
*/
|
||||||
function buildResourceCardDescription(resource, plusone) {
|
function buildResourceCardDescription(resource, plusone) {
|
||||||
var $description = $('<div>').addClass('description ellipsis');
|
var $description = $('<div>').addClass('description ellipsis');
|
||||||
|
|
||||||
$description.append($('<div>').addClass('text').html(resource.summary));
|
$description.append($('<div>').addClass('text').html(resource.summary));
|
||||||
|
|
||||||
if (resource.cta) {
|
if (resource.cta) {
|
||||||
$description.append($('<a>').addClass('cta').html(resource.cta));
|
$description.append($('<a>').addClass('cta').html(resource.cta));
|
||||||
}
|
}
|
||||||
|
|
||||||
if (plusone) {
|
if (plusone) {
|
||||||
var plusurl = resource.url.indexOf("//") > -1 ? resource.url :
|
var plusurl = resource.url.indexOf("//") > -1 ? resource.url :
|
||||||
"//developer.android.com/" + resource.url;
|
"//developer.android.com/" + resource.url;
|
||||||
|
|
||||||
$description.append($('<div>').addClass('util')
|
$description.append($('<div>').addClass('util')
|
||||||
.append($('<div>').addClass('g-plusone')
|
.append($('<div>').addClass('g-plusone')
|
||||||
.attr('data-size', 'small')
|
.attr('data-size', 'small')
|
||||||
.attr('data-align', 'right')
|
.attr('data-align', 'right')
|
||||||
.attr('data-href', plusurl)));
|
.attr('data-href', plusurl)));
|
||||||
}
|
}
|
||||||
|
|
||||||
return $description;
|
return $description;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Simple jquery function to create dom for a standard resource card */
|
/* Simple jquery function to create dom for a standard resource card */
|
||||||
$.fn.decorateResourceCard = function(resource,plusone) {
|
$.fn.decorateResourceCard = function(resource,plusone) {
|
||||||
var section = resource.group || resource.type;
|
var section = resource.group || resource.type;
|
||||||
var imgUrl = resource.image ||
|
var imgUrl = resource.image ||
|
||||||
'assets/images/resource-card-default-android.jpg';
|
'assets/images/resource-card-default-android.jpg';
|
||||||
|
|
||||||
if (imgUrl.indexOf('//') === -1) {
|
if (imgUrl.indexOf('//') === -1) {
|
||||||
imgUrl = toRoot + imgUrl;
|
imgUrl = toRoot + imgUrl;
|
||||||
}
|
}
|
||||||
|
|
||||||
$('<div>').addClass('card-bg')
|
$('<div>').addClass('card-bg')
|
||||||
.css('background-image', 'url(' + (imgUrl || toRoot +
|
.css('background-image', 'url(' + (imgUrl || toRoot +
|
||||||
'assets/images/resource-card-default-android.jpg') + ')')
|
'assets/images/resource-card-default-android.jpg') + ')')
|
||||||
.appendTo(this);
|
.appendTo(this);
|
||||||
|
|
||||||
$('<div>').addClass('card-info' + (!resource.summary ? ' empty-desc' : ''))
|
$('<div>').addClass('card-info' + (!resource.summary ? ' empty-desc' : ''))
|
||||||
.append($('<div>').addClass('section').text(section))
|
.append($('<div>').addClass('section').text(section))
|
||||||
.append($('<div>').addClass('title').html(resource.title))
|
.append($('<div>').addClass('title').html(resource.title))
|
||||||
|
@ -3965,20 +3973,20 @@ function showSamples() {
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* Render other types of resource styles that are not cards. */
|
/* Render other types of resource styles that are not cards. */
|
||||||
$.fn.decorateResource = function(resource, opts) {
|
$.fn.decorateResource = function(resource, opts) {
|
||||||
var imgUrl = resource.image ||
|
var imgUrl = resource.image ||
|
||||||
'assets/images/resource-card-default-android.jpg';
|
'assets/images/resource-card-default-android.jpg';
|
||||||
var linkUrl = resource.url;
|
var linkUrl = resource.url;
|
||||||
|
|
||||||
if (imgUrl.indexOf('//') === -1) {
|
if (imgUrl.indexOf('//') === -1) {
|
||||||
imgUrl = toRoot + imgUrl;
|
imgUrl = toRoot + imgUrl;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (linkUrl && linkUrl.indexOf('//') === -1) {
|
if (linkUrl && linkUrl.indexOf('//') === -1) {
|
||||||
linkUrl = toRoot + linkUrl;
|
linkUrl = toRoot + linkUrl;
|
||||||
}
|
}
|
||||||
|
@ -4022,13 +4030,13 @@ function showSamples() {
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Fullscreen Carousel
|
Fullscreen Carousel
|
||||||
|
|
||||||
The following allows for an area at the top of the page that takes over the
|
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
|
entire browser height except for its top offset and an optional bottom
|
||||||
padding specified as a data attribute.
|
padding specified as a data attribute.
|
||||||
|
|
||||||
HTML:
|
HTML:
|
||||||
|
|
||||||
<div class="fullscreen-carousel">
|
<div class="fullscreen-carousel">
|
||||||
<div class="fullscreen-carousel-content">
|
<div class="fullscreen-carousel-content">
|
||||||
<!-- content here -->
|
<!-- content here -->
|
||||||
|
@ -4036,18 +4044,18 @@ function showSamples() {
|
||||||
<div class="fullscreen-carousel-content">
|
<div class="fullscreen-carousel-content">
|
||||||
<!-- content here -->
|
<!-- content here -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
etc ...
|
etc ...
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
Control over how the carousel takes over the screen can mostly be defined in
|
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
|
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
|
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
|
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
|
the area from becoming to long in the case that the browser is stretched very
|
||||||
tall.
|
tall.
|
||||||
|
|
||||||
There is limited functionality for having multiple sections since that request
|
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
|
was removed, but it is possible to add .next-arrow and .prev-arrow elements to
|
||||||
scroll between multiple content areas.
|
scroll between multiple content areas.
|
||||||
|
@ -4062,7 +4070,7 @@ function showSamples() {
|
||||||
|
|
||||||
function initWidget(widget) {
|
function initWidget(widget) {
|
||||||
var $widget = $(widget);
|
var $widget = $(widget);
|
||||||
|
|
||||||
var topOffset = $widget.offset().top;
|
var topOffset = $widget.offset().top;
|
||||||
var padBottom = parseInt($widget.data('paddingbottom')) || 0;
|
var padBottom = parseInt($widget.data('paddingbottom')) || 0;
|
||||||
var maxHeight = 0;
|
var maxHeight = 0;
|
||||||
|
@ -4071,7 +4079,7 @@ function showSamples() {
|
||||||
var $nextArrow = $widget.find('.next-arrow');
|
var $nextArrow = $widget.find('.next-arrow');
|
||||||
var $prevArrow = $widget.find('.prev-arrow');
|
var $prevArrow = $widget.find('.prev-arrow');
|
||||||
var $curSection = $($content[0]);
|
var $curSection = $($content[0]);
|
||||||
|
|
||||||
if ($content.length <= 1) {
|
if ($content.length <= 1) {
|
||||||
$nextArrow.hide();
|
$nextArrow.hide();
|
||||||
$prevArrow.hide();
|
$prevArrow.hide();
|
||||||
|
@ -4082,7 +4090,7 @@ function showSamples() {
|
||||||
$curSection = $($content[index >= $content.length ? 0 : index]);
|
$curSection = $($content[index >= $content.length ? 0 : index]);
|
||||||
$curSection.show();
|
$curSection.show();
|
||||||
});
|
});
|
||||||
|
|
||||||
$prevArrow.click(function() {
|
$prevArrow.click(function() {
|
||||||
var index = ($content.index($curSection) - 1);
|
var index = ($content.index($curSection) - 1);
|
||||||
$curSection.hide();
|
$curSection.hide();
|
||||||
|
@ -4104,10 +4112,10 @@ function showSamples() {
|
||||||
function resizeWidget() {
|
function resizeWidget() {
|
||||||
var height = $(window).height() - topOffset - padBottom;
|
var height = $(window).height() - topOffset - padBottom;
|
||||||
$widget.width($(window).width());
|
$widget.width($(window).width());
|
||||||
$widget.height(height < minHeight ? minHeight :
|
$widget.height(height < minHeight ? minHeight :
|
||||||
(maxHeight && height > maxHeight ? maxHeight : height));
|
(maxHeight && height > maxHeight ? maxHeight : height));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
|
|
||||||
|
|
||||||
|
@ -4116,36 +4124,36 @@ function showSamples() {
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Tab Carousel
|
Tab Carousel
|
||||||
|
|
||||||
The following allows tab widgets to be installed via the html below. Each
|
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
|
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
|
nav items'. Also each tab content section should have a width matching the
|
||||||
tab carousel.
|
tab carousel.
|
||||||
|
|
||||||
HTML:
|
HTML:
|
||||||
|
|
||||||
<div class="tab-carousel">
|
<div class="tab-carousel">
|
||||||
<ul class="tab-nav">
|
<ul class="tab-nav">
|
||||||
<li><a href="#" data-tab="handsets">Handsets</a>
|
<li><a href="#" data-tab="handsets">Handsets</a>
|
||||||
<li><a href="#" data-tab="wearable">Wearable</a>
|
<li><a href="#" data-tab="wearable">Wearable</a>
|
||||||
<li><a href="#" data-tab="tv">TV</a>
|
<li><a href="#" data-tab="tv">TV</a>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<div class="tab-carousel-content">
|
<div class="tab-carousel-content">
|
||||||
<div data-tab="handsets">
|
<div data-tab="handsets">
|
||||||
<!--Full width content here-->
|
<!--Full width content here-->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div data-tab="wearable">
|
<div data-tab="wearable">
|
||||||
<!--Full width content here-->
|
<!--Full width content here-->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div data-tab="tv">
|
<div data-tab="tv">
|
||||||
<!--Full width content here-->
|
<!--Full width content here-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
*/
|
*/
|
||||||
(function() {
|
(function() {
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
|
@ -4168,40 +4176,40 @@ function showSamples() {
|
||||||
$anchors.click(function(evt) {
|
$anchors.click(function(evt) {
|
||||||
evt.preventDefault();
|
evt.preventDefault();
|
||||||
var query = '[data-tab=' + $(this).data('tab') + ']';
|
var query = '[data-tab=' + $(this).data('tab') + ']';
|
||||||
transitionWidget($tabs.filter(query));
|
transitionWidget($tabs.filter(query));
|
||||||
});
|
});
|
||||||
|
|
||||||
// Add highlight for navigation on first item.
|
// Add highlight for navigation on first item.
|
||||||
var $highlight = $('<div>').addClass('highlight')
|
var $highlight = $('<div>').addClass('highlight')
|
||||||
.css({left:$li.position().left + 'px', width:$li.outerWidth() + 'px'})
|
.css({left:$li.position().left + 'px', width:$li.outerWidth() + 'px'})
|
||||||
.appendTo($nav);
|
.appendTo($nav);
|
||||||
|
|
||||||
// Store height since we will change contents to absolute.
|
// Store height since we will change contents to absolute.
|
||||||
$contentContainer.height($contentContainer.height());
|
$contentContainer.height($contentContainer.height());
|
||||||
|
|
||||||
// Absolutely position tabs so they're ready for transition.
|
// Absolutely position tabs so they're ready for transition.
|
||||||
$tabs.each(function(index) {
|
$tabs.each(function(index) {
|
||||||
$(this).css({position: 'absolute', left: index > 0 ? width + 'px' : '0'});
|
$(this).css({position: 'absolute', left: index > 0 ? width + 'px' : '0'});
|
||||||
});
|
});
|
||||||
|
|
||||||
function transitionWidget($toTab) {
|
function transitionWidget($toTab) {
|
||||||
if (!$curTab.is($toTab)) {
|
if (!$curTab.is($toTab)) {
|
||||||
var curIndex = $tabs.index($curTab[0]);
|
var curIndex = $tabs.index($curTab[0]);
|
||||||
var toIndex = $tabs.index($toTab[0]);
|
var toIndex = $tabs.index($toTab[0]);
|
||||||
var dir = toIndex > curIndex ? 1 : -1;
|
var dir = toIndex > curIndex ? 1 : -1;
|
||||||
|
|
||||||
// Animate content sections.
|
// Animate content sections.
|
||||||
$toTab.css({left:(width * dir) + 'px'});
|
$toTab.css({left:(width * dir) + 'px'});
|
||||||
$curTab.animate({left:(width * -dir) + 'px'});
|
$curTab.animate({left:(width * -dir) + 'px'});
|
||||||
$toTab.animate({left:'0'});
|
$toTab.animate({left:'0'});
|
||||||
|
|
||||||
// Animate navigation highlight.
|
// Animate navigation highlight.
|
||||||
$highlight.animate({left:$($li[toIndex]).position().left + 'px',
|
$highlight.animate({left:$($li[toIndex]).position().left + 'px',
|
||||||
width:$($li[toIndex]).outerWidth() + 'px'})
|
width:$($li[toIndex]).outerWidth() + 'px'})
|
||||||
|
|
||||||
// Store new current section.
|
// Store new current section.
|
||||||
$curTab = $toTab;
|
$curTab = $toTab;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})();
|
})();
|
|
@ -501,7 +501,7 @@ var:sdk.linux_download
|
||||||
function onDownloadForRealz(link) {
|
function onDownloadForRealz(link) {
|
||||||
if ($("input#agree").is(':checked') && $("#bitpicker input:checked").length) {
|
if ($("input#agree").is(':checked') && $("#bitpicker input:checked").length) {
|
||||||
$("div.sdk-terms").slideUp();
|
$("div.sdk-terms").slideUp();
|
||||||
$("h1#tos-header").text('Now downloading ' + $(link).text() + '...');
|
$("h1#tos-header").text('Now redirecting to the install instructions...');
|
||||||
$("#sdk-terms-form,.sdk-terms-intro").fadeOut('slow', function() {
|
$("#sdk-terms-form,.sdk-terms-intro").fadeOut('slow', function() {
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
if ($("#downloadForRealz").attr('bundle') == 'true') {
|
if ($("#downloadForRealz").attr('bundle') == 'true') {
|
||||||
|
|
Loading…
Reference in New Issue