Move settings-section animations into setting-section, make better

chrome/browser/resources/settings/settings_page/open_section_transition.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.
+
+cr.define('settings', function() {
+

[dschuyler, 2016/06/30 01:24:04]

Please indent code within braces.

[michaelpg, 2016/07/07 05:27:43]

Done.

+/**
+ * Freezes the section's height so its card can be removed from the flow
+ * without affecting the layout of the surrounding sections.
+ * @param {!HTMLElement} section
+ */
+function freezeSection(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';
+  } else {
+    // Set an invalid value so we don't try to use it later.
+    card.origHeight_ = NaN;
+  }
+
+  // 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');
+}
+
+/**
+ * After freezeSection, restores the section to its normal height.
+ * @param {!HTMLElement} section
+ */
+function unfreezeSection(section) {
+  if (!section.classList.contains('frozen'))
+    return;
+  var card = section.$['card'];
+  section.classList.remove('frozen');
+  card.style.top = '';
+  card.style.height = '';
+  card.style.width = '';
+  section.style.height = '';
+}
+
+/**
+ * Opens a section by hiding other sections and expanding the section's card to
+ * fill the screen vertically.
+ * @constructor
+ * @extends {settings.animation.Transition}
+ * @param {!SettingsSectionElement} section
+ * @param {!HTMLElement} container Scrolling container of sections.
+ */
+function OpenSectionTransition(section, container) {
+  this.section = section;
+  this.container = container;
+
+  this.expandCardTransition_ =
+      new settings.ExpandCardTransition(section.$['card'], container);
+}
+
+OpenSectionTransition.prototype = {
+  __proto__: settings.animation.Transition.prototype,
+
+  /** @override */
+  play: function() {
+    // TODO(michaelpg): Change elevation of sections.
+    freezeSection(this.section);
+    this.section.classList.add('expanding');
+
+    this.expandCardTransition_.play();
+
+    this.finished = this.expandCardTransition_.finished
+        .then(function() {
+          this.cleanUp_(true);
+        }.bind(this))
+        .catch(function(e) {
+          this.cleanUp_(false);
+          throw e;
+        }.bind(this));
+    return this.finished;
+  },
+
+  /** @override */
+  finish: function() {
+    if (this.expandCardTransition_)
+      this.expandCardTransition_.finish();
+  },
+
+  /** @override */
+  cancel: function() {
+    if (this.expandCardTransition_)
+      this.expandCardTransition_.cancel();
+  },
+
+  /**
+   * @param {boolean} finished Whether the animation finished.
+   * @private
+   */
+  cleanUp_: function(finished) {
+    this.expandCardTransition_ = null;
+    if (finished) {
+      this.section.classList.add('expanded');
+    } else {
+      // Animation was canceled; restore the section.
+      unfreezeSection(this.section);
+    }
+
+    var card = this.section.$['card'];
+    this.section.classList.remove('expanding');
+    this.section.style.height = '';
+    card.style.top = '';
+    card.style.height = '';
+    card.style.width = '';
+  },
+};
+
+/**
+ * Closes a section by showing the other sections and collapsing the section's
+ * card back into place.
+ * @constructor
+ * @extends {settings.animation.Transition}
+ * @param {!SettingsSectionElement} section
+ * @param {!HTMLElement} container Scrolling container of sections.
+ */
+function CloseSectionTransition(section, container) {
+  this.section = section;
+  this.container = container;
+
+  assert(!section.classList.contains('expanding'));
+  assert(!section.classList.contains('collapsing'));
+  assert(section.classList.contains('expanded'));
+
+  this.collapseCardTransition_ =
+      new settings.CollapseCardTransition(section, container);
+}
+
+CloseSectionTransition.prototype = {
+  __proto__: settings.animation.Transition.prototype,
+
+  /**
+   * Prepares the section for the transition by making it position: fixed. This
+   * is useful as a separate step so the page can unhide everything before
+   * starting the transition without this section affecting the flow.
+   */
+  setUp: function() {
+    this.collapseCardTransition_.setUp();
+    this.section.classList.add('collapsing');
+    this.section.classList.remove('expanding', 'expanded');
+    var card = this.section.$['card'];
+    if (!isNaN(card.origHeight_)) {
+      this.section.style.height =
+          this.section.clientHeight + card.origHeight_ + 'px';
+    }
+  },
+
+  /** @override */
+  play: function() {
+    var card = this.section.$['card'];
+    if (!isNaN(card.origHeight_))
+      this.finished = this.collapseCardTransition_.play();
+
+    // 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 as a
+    // transition.
+    if (isNaN(card.origHeight_))
+      this.finished = Promise.resolve();
+
+    this.finished.then(
+        function() {
+          unfreezeSection(this.section);
+        }.bind(this), function() {

[dschuyler, 2016/06/30 01:24:04]

since these are separate parameters, let's line
break after the comma.

[michaelpg, 2016/07/07 05:27:43]

Done.

+          this.section.classList.add('expanded');
+        }.bind(this));
+
+    // Whether the animation finishes or cancels, clean up.
+    this.finished.catch(function() {}).then(function() {
+      this.section.classList.remove('collapsing');
+      this.collapseCardTransition_ = null;
+    }.bind(this));
+
+    return this.finished;
+  },
+
+  /** @override */
+  finish: function() {
+    if (this.collapseCardTransition_)
+      this.collapseCardTransition_.finish();
+  },
+
+  /** @override */
+  cancel: function() {
+    if (this.collapseCardTransition_)
+      this.collapseCardTransition_.cancel();
+  },
+};
+
+return {
+  CloseSectionTransition: CloseSectionTransition,
+  OpenSectionTransition: OpenSectionTransition,
+};
+
+});