MD Settings: Custom expand/collapse section animations.

chrome/browser/resources/settings/settings_page/main_page_behavior.js

+// Copyright 2016 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Fast out, slow in.
+var EASING_FUNCTION = 'cubic-bezier(0.4, 0, 0.2, 1)';
+var EXPAND_DURATION = 350;
+
+/**
+ * Provides animations to expand and collapse individual sections in a page.
+ * Expanded sections take up the full height of the container. At most one
+ * section should be expanded at any given time.
+ * @polymerBehavior
+ */
+var MainPageBehavior = [TransitionBehavior, {

[Dan Beam, 2016/02/26 19:18:23]

up to you, but Polymer typically does:

var MainPageBehaviorImpl = {...};

var MainPageBehavior = [
  MainPageBehaviorImpl,
  TransitionBehavior
];

instead of what you're doing inlining the contents.  i'm fine wither either

[michaelpg, 2016/03/01 00:18:28]

Done.

+  /** @type {string} Selector to get the sections. Elements must override. */

[Dan Beam, 2016/02/26 19:18:23]

nit: s/Elements/Consumers/?  Downstream users?  Derived?  Behavior followers?

[michaelpg, 2016/03/01 00:18:28]

Done.

+  sectionSelector: '',
+
+  /** @type {Element} The scrolling container. Elements must set this. */

[Dan Beam, 2016/02/26 19:18:23]

nit: ?Element

[michaelpg, 2016/03/01 00:18:28]

Done.

+  scroller: null,
+
+  /**
+   * Hides or unhides the sections not being expanded.
+   * @param {string} section The section to keep visible.
+   * @param {boolean} hidden Whether the sections should be hidden.
+   * @private
+   */
+  toggleOtherSectionsHidden_: function(section, hidden) {
+    var sections = Polymer.dom(this.root).querySelectorAll(
+        this.sectionSelector + ':not([section=' + section + '])');
+    for (var section of sections)
+      section.hidden = hidden;
+  },
+
+  /**
+   * Animates the card in |section|, expanding it to fill the page.
+   * @param {!SettingsSectionElement} section
+   */
+  expandSection: function(section) {
+    // If another section's card is expanding, cancel that animation first.
+    var expanding = this.$$('.expanding');
+    if (expanding) {
+      if (expanding == section)
+        return;
+
+      if (this.animations['section']) {

[Dan Beam, 2016/02/26 19:18:23]

why ['section'] instead of .section?

[michaelpg, 2016/03/01 00:18:28]

it's the name/key for the animation, not a property of this.animations

would using Map.{set, get, has} make more sense?

[Dan Beam, 2016/03/04 19:24:24]

Acknowledged.

+        // Cancel the animation, then call startExpandSection_.
+        this.cancelAnimation('section', function() {
+          this.startExpandSection_(section);
+        }.bind(this));
+      } else {
+        // The animation must have finished but its promise hasn't resolved yet.
+        // When it resolves, collapse that section's card before expanding
+        // this one.
+        setTimeout(function() {
+          this.collapseSection(
+              /** @type {!SettingsSectionElement} */(expanding));
+          this.finishAnimation('section', function() {
+            this.startExpandSection_(section);
+          }.bind(this));
+        }.bind(this));
+      }
+
+      return;
+    }
+
+    if (this.$$('.collapsing') && this.animations['section']) {
+      // Finish the collapse animation before expanding.
+      this.finishAnimation('section', function() {
+        this.startExpandSection_(section);
+      }.bind(this));
+      return;
+    }
+
+    this.startExpandSection_(section);
+  },
+
+  /**
+   * Helper function to set up and start the expand animation.
+   * @param {!SettingsSectionElement} section
+   */
+  startExpandSection_: function(section) {
+    if (section.classList.contains('expanded'))
+      return;
+
+    // Freeze the scroller and save its position.
+    this.listScrollTop_ = this.scroller.scrollTop;
+
+    var scrollerWidth = this.scroller.clientWidth;
+    this.scroller.style.overflow = 'hidden';
+    // Adjust width to compensate for scroller.
+    var scrollbarWidth = this.scroller.clientWidth - scrollerWidth;
+    this.scroller.style.width = 'calc(100% - ' + scrollbarWidth + 'px)';
+
+    // Freezes the section's height so its card can be removed from the flow.
+    this.freezeSection_(section);
+
+    // Expand the section's card to fill the parent.
+    var animationPromise = this.playExpandSection_(section);
+
+    animationPromise.then(function() {
+      this.scroller.scrollTop = 0;
+      this.toggleOtherSectionsHidden_(section.section, true);
+    }.bind(this), function() {
+      // Animation was cancelled; restore the section.
+      this.unfreezeSection_(section);
+    }.bind(this)).then(function() {
+      this.scroller.style.overflow = '';
+      this.scroller.style.width = '';
+    }.bind(this));
+  },
+
+  /**
+   * Animates the card in |section|, collapsing it back into its section.
+   * @param {!SettingsSectionElement} section
+   */
+  collapseSection: function(section) {
+    // If the section's card is still expanding, cancel the expand animation.
+    if (section.classList.contains('expanding')) {
+      if (this.animations['section']) {
+        this.cancelAnimation('section');
+      } else {
+        // The animation must have finished but its promise hasn't finished
+        // resolving; try again asynchronously.
+        this.async(function() {
+          this.collapseSection(section);
+        });
+      }
+      return;
+    }
+
+    if (!section.classList.contains('expanded'))
+      return;
+
+    this.toggleOtherSectionsHidden_(section.section, false);
+
+    var scrollerWidth = this.scroller.clientWidth;
+    this.scroller.style.overflow = 'hidden';
+    // Adjust width to compensate for scroller.
+    var scrollbarWidth = this.scroller.clientWidth - scrollerWidth;
+    this.scroller.style.width = 'calc(100% - ' + scrollbarWidth + 'px)';
+
+    this.playCollapseSection_(section).then(function() {
+      this.unfreezeSection_(section);
+      this.scroller.style.overflow = '';
+      this.scroller.style.width = '';
+      section.classList.remove('collapsing');
+    }.bind(this));
+  },
+
+  /**
+   * Freezes a section's height so its card can be removed from the flow without
+   * affecting the layout of the surrounding sections.
+   * @param {!SettingsSectionElement} section
+   * @private
+   */
+  freezeSection_: function(section) {
+    var card = section.$.card;
+    section.style.height = section.clientHeight + 'px';
+
+    var cardHeight = card.offsetHeight;
+    var cardWidth = card.offsetWidth;
+    // If the section is not displayed yet (e.g., navigated directly to a
+    // sub-page), cardHeight and cardWidth are 0, so do not set the height or
+    // width explicitly.
+    // TODO(michaelpg): Improve this logic when refactoring
+    // settings-animated-pages.
+    if (cardHeight && cardWidth) {
+      // TODO(michaelpg): Temporary hack to store the height the section should
+      // collapse to when it closes.
+      card.origHeight_ = cardHeight;
+
+      card.style.height = cardHeight + 'px';
+      card.style.width = cardWidth + 'px';
+    }
+
+    // Place the section's card at its current position but removed from the
+    // flow.
+    card.style.top = card.getBoundingClientRect().top + 'px';
+    section.classList.add('frozen-section');

[Dan Beam, 2016/02/26 19:18:23]

nit: why not just frozen?  expanding and expanded don't have a -section

[michaelpg, 2016/03/01 00:18:28]

Done.

+  },
+
+  /**
+   * After freezeSection_, restores the section to its normal height.
+   * @param {!SettingsSectionElement} section
+   * @private
+   */
+  unfreezeSection_: function(section) {
+    if (!section.classList.contains('frozen-section'))
+      return;
+    var card = section.$.card;
+    section.classList.remove('frozen-section');
+    card.style.top = '';
+    card.style.height = '';
+    card.style.width = '';
+    section.style.height = '';
+  },
+
+  /**
+   * Expands the card in |section| to fill the page.
+   * @param {!SettingsSectionElement} section
+   * @return {!Promise}
+   * @private
+   */
+  playExpandSection_: function(section) {
+    var card = section.$.card;
+
+    // The card should start at the top of the page.
+    var targetTop = this.parentElement.getBoundingClientRect().top;
+
+    section.classList.add('expanding');
+
+    // Expand the card, using minHeight. (The card must span the container's
+    // client height, so it must be at least 100% in case the card is too short.
+    // If the card is already taller than the container's client height, we
+    // don't want to shrink the card to 100% or the content will overflow, so
+    // we can't use height, and animating height wouldn't look right anyway.)
+    var keyframes = [{
+      top: card.style.top,
+      minHeight: card.style.height,
+      easing: EASING_FUNCTION,
+    }, {
+      top: targetTop + 'px',
+      minHeight: 'calc(100% - ' + targetTop + 'px)',
+    }];
+    var options = {duration: EXPAND_DURATION};
+    // TODO(michaelpg): Change elevation of sections.
+    var promise;
+    if (keyframes[0].top && keyframes[0].minHeight)
+      promise = this.animateElement('section', card, keyframes, options);
+    else
+      var promise = Promise.resolve();

[Dan Beam, 2016/02/26 19:18:23]

nit: s/ var//

[michaelpg, 2016/03/01 00:18:28]

Done.

+
+    promise.then(function() {
+      section.classList.add('expanded');
+      card.style.top = '';
+      this.style.margin = 'auto';
+      section.$.header.hidden = true;
+      section.style.height = '';
+    }.bind(this), function() {

[Dan Beam, 2016/02/26 19:18:23]

why is this second function here?  isn't it optional?

[michaelpg, 2016/03/01 00:18:28]

if the animation is cancelled, the promise is rejected (like it would be in the
spec: https://w3c.github.io/web-animations/#canceling-an-animation-section)

a rejected promise that isn't dealt with in a then(__, fn) or a catch(fn) throws
a console error

but canceling the animation is normal behavior, so we eat the rejected promise.

+    }).then(function() {
+      // Whether finished or cancelled, clean up the animation.
+      section.classList.remove('expanding');
+      card.style.height = '';
+    });
+
+    return promise;
+  },
+
+  /**
+   * Collapses the cand in |section| back to its normal position.

[Dan Beam, 2016/02/26 19:18:23]

cand -> card

[michaelpg, 2016/03/01 00:18:28]

Done.

+   * @param {!SettingsSectionElement} section
+   * @return {!Promise}
+   * @private
+   */
+  playCollapseSection_: function(section) {
+    var card = section.$.card;
+    var cardStyle = getComputedStyle(card);
+
+    this.style.margin = '';
+    section.$.header.hidden = false;
+
+    var startingTop = this.parentElement.getBoundingClientRect().top;
+
+    var cardHeightStart = card.clientHeight;
+
+    section.classList.add('collapsing');
+    section.classList.remove('expanding');
+    section.classList.remove('expanded');

[Dan Beam, 2016/02/26 19:18:23]

nit: .remove('expanding', 'expanded')

[michaelpg, 2016/03/01 00:18:28]

Done.

+
+    // If we navigated here directly, we don't know the original height of the
+    // section, so we skip the animation.
+    // TODO(michaelpg): remove this condition once sliding is implemented.
+    if (!card.origHeight_)

[Dan Beam, 2016/02/26 19:18:23]

i think it might be safer to set this to an invalid number and verify it's that
invalid number (i.e. -1).  i could see how we might accidentally be using the
wrong object or setting the wrong property and this code would have a hard time
finding that out.

[michaelpg, 2016/03/01 00:18:28]

What about... and I don't think I've ever used this before... NaN?

+      return Promise.resolve();
+
+    // Restore the section to its proper height to make room for the card.
+    section.style.height = section.clientHeight + card.origHeight_ + 'px';
+
+    // TODO(michaelpg): this should be in collapseSection(), but we need to wait
+    // until the full page height is available (setting the section height).
+    this.scroller.scrollTop = this.listScrollTop_;
+
+    // The card is unpositioned, so use its position as the ending state,
+    // but account for scroll.
+    var targetTop = card.getBoundingClientRect().top - this.scroller.scrollTop;
+
+    var keyframes = [{
+      top: startingTop + 'px',
+      minHeight: cardHeightStart + 'px',
+      easing: EASING_FUNCTION,
+    }, {
+      top: targetTop + 'px',
+      minHeight: card.origHeight_ + 'px',
+    }];
+    var options = {duration: EXPAND_DURATION};
+    var promise = this.animateElement('section', card, keyframes, options);
+    return promise;
+  },
+}];
+
+/**
+ * TODO(michaelpg): integrate slide animations.
+ * @polymerBehavior
+ */
+var RoutableBehavior = [MainPageBehavior, {
+  properties: {
+    /** Contains the current route. */
+    currentRoute: {
+      type: Object,
+      notify: true,
+      observer: 'currentRouteChanged_',
+    },
+  },
+
+  /** @private */
+  currentRouteChanged_: function(newRoute, oldRoute) {
+    // route.section is only non-empty when the user is within a subpage.
+    // When the user is not in a subpage, but on the Basic page, route.section
+    // is an empty string.
+    var newRouteIsSubpage = newRoute && newRoute.section;
+    var oldRouteIsSubpage = oldRoute && oldRoute.section;
+
+    if (!oldRoute && newRouteIsSubpage) {
+      // Allow the page to load before expanding the section. TODO(michaelpg):
+      // Time this better when refactoring settings-animated-pages.
+      setTimeout(function() {
+        var section = this.$$('*[section=' + newRoute.section + ']');

[Dan Beam, 2016/02/26 19:18:23]

why do you need the * before *[section?

[michaelpg, 2016/03/01 00:18:28]

Removed.

+        if (!section)
+          return;
+        this.expandSection(/** @type {!SettingsSectionElement} */(section));
+      }.bind(this));
+      return;
+    }
+
+    if (!newRouteIsSubpage && oldRouteIsSubpage) {
+      var section = this.$$('*[section=' + oldRoute.section + ']');
+      if (section)
+        this.collapseSection(/** @type {!SettingsSectionElement} */(section));
+    } else if (newRouteIsSubpage &&
+               (!oldRouteIsSubpage || newRoute.section != oldRoute.section)) {
+      var section = this.$$('*[section=' + newRoute.section + ']');

[Dan Beam, 2016/02/26 19:18:23]

maybe make this into a getSection_ method?  both of these query selector
construction calls

[michaelpg, 2016/03/01 00:18:28]

Done.

+      if (section)
+        this.expandSection(/** @type {!SettingsSectionElement} */(section));
+    }
+  },
+}];