resize-snapped-title.html

<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../app-scroll-effects-behavior.html">

<script>
  /**
   * Upon scrolling past a threshold, CSS transition the font size of a designated title element
   * between two values.
   */
  Polymer.AppLayout.registerEffect('resize-snapped-title', {
    /**
     * @this Polymer.AppLayout.ElementWithBackground
     */
    setUp: function setUp(config) {
      var title = this._getDOMRef('mainTitle');
      var condensedTitle = this._getDOMRef('condensedTitle');
      var duration = config.duration || '0.2s';
      var fx = {};

      if (!condensedTitle) {
        this._warn(this._logf('effects[resize-snapped-title]', 'undefined `condensed-title`'));
        return false;
      }
      if (!title) {
        this._warn(this._logf('effects[resize-snapped-title]', 'undefined `main-title`'));
        return false;
      }

      title.style.transitionProperty = 'opacity';
      title.style.transitionDuration = duration;
      condensedTitle.style.transitionProperty = 'opacity';
      condensedTitle.style.transitionDuration = duration;
      fx.condensedTitle = condensedTitle;
      fx.title = title;
      this._fxResizeSnappedTitle = fx;
    },
    /** @this Polymer.AppLayout.ElementWithBackground */
    run: function run(p, y) {
      var fx = this._fxResizeSnappedTitle;
      if (p > 0) {
        fx.title.style.opacity = 0;
        fx.condensedTitle.style.opacity = 1;
      } else {
        fx.title.style.opacity = 1;
        fx.condensedTitle.style.opacity = 0;
      }
    },
    /** @this Polymer.AppLayout.ElementWithBackground */
    tearDown: function tearDown() {
      var fx = this._fxResizeSnappedTitle;
      fx.title.style.transition = '';
      fx.condensedTitle.style.transition = '';
      delete this._fxResizeSnappedTitle;
    }
  });
</script>