am cbe032f8: Sync style changes from external (sync3).

* commit 'cbe032f87a2fc2b2f954d3be9057d6e4cc845d92':
  Sync style changes from external (sync3).
This commit is contained in:
Dirk Dougherty 2015-05-22 20:31:28 +00:00 committed by Android Git Automerger
commit f1d8a76dec
11 changed files with 1682 additions and 1438 deletions

File diff suppressed because it is too large Load Diff

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 794 B

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.0 KiB

After

Width:  |  Height:  |  Size: 7.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

View File

@ -76,7 +76,7 @@ $(document).ready(function() {
}
// set up the search close button
$('#search-close').click(function() {
$('#search-close').on('click touchend', function() {
$searchInput = $('#search_autocomplete');
$searchInput.attr('value', '');
$(this).addClass("hide");
@ -91,7 +91,8 @@ $(document).ready(function() {
$("#search_autocomplete").focus(function() {
$("#search-container").addClass('active');
})
$("#search-container").mouseover(function() {
$("#search-container").on('mouseover touchend', function(e) {
if ($(e.target).is('#search-close')) { return; }
$("#search-container").addClass('active');
$("#search_autocomplete").focus();
})
@ -3581,6 +3582,7 @@ function showSamples() {
var opts = {
cardSizes: ($widget.data('cardsizes') || '').split(','),
maxResults: parseInt($widget.data('maxresults') || '100', 10),
initialResults: $widget.data('initialResults'),
itemsPerPage: $widget.data('itemsperpage'),
sortOrder: $widget.data('sortorder'),
query: $widget.data('query'),
@ -3764,14 +3766,30 @@ function showSamples() {
function drawResourcesFlowWidget($widget, opts, resources) {
$widget.empty().addClass('cols');
var cardSizes = opts.cardSizes || ['6x6'];
var initialResults = opts.initialResults || resources.length;
var i = 0, j = 0;
var plusone = false; // stop showing plusone buttons on cards
var cardParent = $widget;
while (i < resources.length) {
if (i === initialResults && initialResults < resources.length) {
// Toggle remaining cards
cardParent = $('<div class="dac-toggle-content clearfix">').appendTo($widget);
$widget.addClass('dac-toggle');
$('<div class="col-1of1 dac-section-links dac-text-center">')
.append(
$('<div class="dac-section-link" data-toggle="section">')
.append('<span class="dac-toggle-expand">More<i class="dac-sprite dac-auto-unfold-more"></i></span>')
.append('<span class="dac-toggle-collapse">Less<i class="dac-sprite dac-auto-unfold-less"></i></span>')
)
.appendTo($widget)
}
var cardSize = cardSizes[j++ % cardSizes.length];
cardSize = cardSize.replace(/^\s+|\s+$/,'');
var column = createResponsiveFlowColumn(cardSize).appendTo($widget);
var column = createResponsiveFlowColumn(cardSize).appendTo(cardParent);
// A stack has a third dimension which is the number of stacked items
var isStack = cardSize.match(/(\d+)x(\d+)x(\d+)/);
@ -4044,6 +4062,12 @@ function showSamples() {
imgUrl = toRoot + imgUrl;
}
if (resource.type === 'youtube') {
$('<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') + ')')
@ -4437,6 +4461,11 @@ function showSamples() {
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();
@ -4451,6 +4480,16 @@ function showSamples() {
$section = $section.wrapAll('<div class="dac-toggle dac-mobile">').parent();
$contents.wrapAll('<div class="dac-toggle-content"><div>'); // extra div used for max-height calculation.
// 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);
});
@ -4550,6 +4589,9 @@ function showSamples() {
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
@ -4651,6 +4693,7 @@ function showSamples() {
frameSelector: 'article',
loop: true,
start: 0,
swipeThreshold: 160,
pagination: '[data-carousel-pagination]'
};
@ -4678,6 +4721,15 @@ function showSamples() {
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() {
@ -4695,6 +4747,30 @@ function showSamples() {
});
};
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');
};
@ -4775,21 +4851,17 @@ function showSamples() {
this.el.on('click', function(event) {
if (!$.contains($('.dac-modal-window')[0], event.target)) {
return this.close_();
return this.el.trigger('modal-close');
}
}.bind(this));
this.el.on('open', this.open_.bind(this));
this.el.on('close', this.close_.bind(this));
this.el.on('toggle', this.toggle_.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() {
if (this.isOpen) {
this.close_();
} else {
this.open_();
}
this.el.trigger('modal-' + (this.isOpen ? 'close' : 'open'));
};
Modal.prototype.close_ = function() {
@ -4815,7 +4887,7 @@ function showSamples() {
ToggleModal.prototype.clickHandler_ = function(event) {
event.preventDefault();
this.modal.trigger('toggle');
this.modal.trigger('modal-toggle');
};
/**
@ -4929,12 +5001,38 @@ function showSamples() {
}
/**
* Close the modal when the form is sent.
* 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.form.trigger('reset');
this.el.trigger('close');
this.el.one('swap-complete', this.reset_.bind(this));
this.el.trigger('swap-content');
};
/**
@ -5027,6 +5125,97 @@ function showSamples() {
});
})(jQuery);
(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.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));
}
/**
* SwapContent's default settings.
* @type {{activeClass: string, container: string, transitionSpeed: number}}
* @private
*/
SwapContent.DEFAULTS_ = {
activeClass: 'dac-active',
container: '[data-swap-container]',
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() {
console.log(this.containers);
this.containers.each(function(index, container) {
container = $(container);
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);
(function($) {
function Toggle(el) {
$(el).on('click.dac.togglesection', this.toggle);
@ -5054,7 +5243,9 @@ function showSamples() {
var $parent = selector && $(selector);
return $parent && $parent.length ? $parent : $this.parent();
$parent = $parent && $parent.length ? $parent : $this.closest('.dac-toggle');
return $parent.length ? $parent : $this.parent();
}
/**
@ -5063,8 +5254,7 @@ function showSamples() {
* @param visible
*/
function transitionMaxHeight($el, visible) {
// Only supports 1 child
var contentHeight = $el.children().outerHeight();
var contentHeight = $el.prop('scrollHeight');
var targetHeight = visible ? contentHeight : 0;
var duration = $el.transitionDuration();

View File

@ -80,9 +80,9 @@
<?cs call:header_search_widget() ?>
<?cs /if ?>
<?cs if:ndk ?><a class="dac-header-consoleBtn" href="http://developer.android.com">
<?cs if:ndk ?><a class="dac-header-console-btn" href="http://developer.android.com">
<span class="dac-visible-desktop-inline">Back to Android Developers</span>
</a><?cs else ?><a class="dac-header-consoleBtn" href="https://play.google.com/apps/publish/">
</a><?cs else ?><a class="dac-header-console-btn" href="https://play.google.com/apps/publish/">
<span class="dac-sprite dac-google-play"></span>
<span class="dac-visible-desktop-inline">Developer</span>
Console

View File

@ -482,7 +482,7 @@ elif:samples ?><?cs include:"../../../../frameworks/base/docs/html-ndk/ndk/sampl
def:header_search_widget() ?>
<div class="dac-header-search" id="search-container">
<div class="dac-header-search-inner">
<div class="dac-header-search-btn" id="search-btn"></div>
<div class="dac-sprite dac-search dac-header-search-btn" id="search-btn"></div>
<form class="dac-header-search-form" onsubmit="return submit_search()">
<input id="search_autocomplete" type="text" value="" autocomplete="off" name="q"
onfocus="search_focus_changed(this, true)" onblur="search_focus_changed(this, false)"

View File

@ -1,5 +1,5 @@
<div class="dac-footer dac-expand">
<div class="wrap">
<div class="dac-footer<?cs if:fullpage ?> dac-landing<?cs /if ?>">
<div class="cols dac-footer-main">
<div class="col-1of2">
<a class="dac-footer-getnews" data-modal-toggle="newsletter" href="javascript:;">Get news &amp; tips <span
@ -55,16 +55,23 @@
</div>
</div> <!-- end footer -->
<div data-modal="newsletter" data-newsletter class="dac-modal newsletter">
<div data-modal="newsletter" data-newsletter data-swap class="dac-modal newsletter">
<div class="dac-modal-container">
<div class="dac-modal-window">
<header class="dac-modal-header">
<button class="dac-modal-header-close" data-modal-toggle><i class="dac-sprite dac-close"></i></button>
<h2 class="norule dac-modal-header-title">
Get the latest Android developer news and tips that will help you find success on Google Play.
</h2>
<div class="dac-swap" data-swap-container>
<section class="dac-swap-section dac-active dac-down">
<h2 class="norule dac-modal-header-title">Get the latest Android developer news and tips that will help you find success on Google Play.</h2>
<p class="dac-modal-header-subtitle">&#42; Required Fields</p>
</section>
<section class="dac-swap-section dac-up">
<h2 class="norule dac-modal-header-title">Hooray!</h2>
</section>
</div>
</header>
<div class="dac-swap" data-swap-container>
<section class="dac-swap-section dac-active dac-left">
<form action="https://docs.google.com/forms/d/1QgnkzbEJIDu9lMEea0mxqWrXUJu0oBCLD7ar23V0Yys/formResponse" class="dac-form" method="post" target="dac-newsletter-iframe">
<section class="dac-modal-content">
<fieldset class="dac-form-fieldset">
@ -150,6 +157,15 @@
<button type="submit" value="Submit" class="dac-fab dac-primary dac-large dac-modal-action"><i class="dac-sprite dac-arrow-right"></i></button>
</footer>
</form>
</section>
<section class="dac-swap-section dac-right">
<div class="dac-modal-content">
<p class="newsletter-success-message">
You have successfully signed up for the latest Android developer news and tips.
</p>
</div>
</section>
</div>
</div>
</div>
</div> <!-- end footer -->