Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1037)

Unified Diff: chrome/browser/resources/settings/settings_page/settings_section.js

Issue 1736733003: MD Settings: Custom expand/collapse section animations. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: function/rebase Created 4 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: chrome/browser/resources/settings/settings_page/settings_section.js
diff --git a/chrome/browser/resources/settings/settings_page/settings_section.js b/chrome/browser/resources/settings/settings_page/settings_section.js
index 1365dadb7cb0ff69ec6d93dd39d9d49601ff2086..1149e2ea81b7aa0fd017246548977f7e8916be2b 100644
--- a/chrome/browser/resources/settings/settings_page/settings_section.js
+++ b/chrome/browser/resources/settings/settings_page/settings_section.js
@@ -16,18 +16,11 @@
Polymer({
is: 'settings-section',
- behaviors: [
- Polymer.NeonAnimationRunnerBehavior,
- ],
-
properties: {
/**
* The current active route.
*/
- currentRoute: {
- type: Object,
- observer: 'currentRouteChanged_',
- },
+ currentRoute: Object,
/**
* The section is expanded to a full-page view when this property matches
@@ -43,143 +36,5 @@ Polymer({
* Title for the page header and navigation menu.
*/
pageTitle: String,
-
- animationConfig: {
- value: function() {
- return {
- collapse: {
- name: 'collapse-card-animation',
- node: this,
- },
- expand: {
- name: 'expand-card-animation',
- node: this,
- },
- };
- },
- },
- },
-
- listeners: {
- 'expand-animation-complete': 'onExpandAnimationComplete_',
- },
-
- /** @private */
- currentRouteChanged_: function(newRoute, oldRoute) {
- var newExpanded = newRoute.section == this.section;
- var oldExpanded = oldRoute && oldRoute.section == this.section;
-
- var visible = newExpanded || this.currentRoute.section == '';
-
- // If the user navigates directly to a subpage, skip all the animations.
- if (!oldRoute) {
- if (newExpanded) {
- // If we navigate directly to a subpage, skip animations.
- this.classList.add('expanded');
- } else if (!visible) {
- this.hidden = true;
- this.$.card.elevation = 0;
- }
-
- return;
- }
-
- if (newExpanded && !oldExpanded) {
- this.playAnimation('expand');
- } else if (oldExpanded && !newExpanded) {
- // For contraction, we defer the animation to allow
- // settings-animated-pages to reflow the new page correctly.
- this.async(function() {
- this.playAnimation('collapse');
- }.bind(this));
- }
-
- this.$.card.elevation = visible ? 1 : 0;
-
- // Remove 'hidden' class immediately, but defer adding it if we are invisble
- // until the animation is complete.
- if (visible)
- this.hidden = false;
- },
-
- /** @private */
- onExpandAnimationComplete_: function() {
- this.hidden = this.currentRoute.section != '' &&
- this.currentRoute.section != this.section;
},
});
-
-Polymer({
- is: 'expand-card-animation',
-
- behaviors: [
- Polymer.NeonAnimationBehavior
- ],
-
- configure: function(config) {
- var section = config.node;
- var card = section.$.card;
- var containerRect = section.offsetParent.getBoundingClientRect();
- var cardRect = card.getBoundingClientRect();
-
- // Set placeholder height so the page does not reflow during animation.
- // TODO(tommycli): For URLs that directly load subpages, this does not work.
- var placeholder = section.$.placeholder;
- placeholder.style.top = card.offsetTop + 'px';
- placeholder.style.height = card.offsetHeight + 'px';
-
- section.classList.add('neon-animating');
-
- this._effect = new KeyframeEffect(card, [
- {'top': cardRect.top + 'px', 'height': cardRect.height + 'px'},
- {'top': containerRect.top + 'px', 'height': containerRect.height + 'px'},
- ], this.timingFromConfig(config));
- return this._effect;
- },
-
- complete: function(config) {
- var section = config.node;
- section.classList.remove('neon-animating');
- section.classList.add('expanded');
-
- // This event fires on itself as well, but that is benign.
- var sections = section.parentNode.querySelectorAll('settings-section');
- for (var i = 0; i < sections.length; ++i) {
- sections[i].fire('expand-animation-complete');
- }
- }
-});
-
-Polymer({
- is: 'collapse-card-animation',
-
- behaviors: [
- Polymer.NeonAnimationBehavior
- ],
-
- configure: function(config) {
- var section = config.node;
- var oldRect = section.offsetParent.getBoundingClientRect();
-
- section.classList.remove('expanded');
-
- var card = section.$.card;
- var placeholder = section.$.placeholder;
- placeholder.style.top = card.offsetTop + 'px';
- placeholder.style.height = card.offsetHeight + 'px';
-
- var newRect = card.getBoundingClientRect();
-
- section.classList.add('neon-animating');
-
- this._effect = new KeyframeEffect(card, [
- {'top': oldRect.top + 'px', 'height': oldRect.height + 'px'},
- {'top': newRect.top + 'px', 'height': newRect.height + 'px'},
- ], this.timingFromConfig(config));
- return this._effect;
- },
-
- complete: function(config) {
- config.node.classList.remove('neon-animating');
- }
-});

Powered by Google App Engine
This is Rietveld 408576698