designer

designer.html

<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">

<polymer-element name="my-element">

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      #core_header_panel {
        width: 100%;
        height: 100%;
        left: 0px;
        top: 0px;
        position: absolute;
      }
      #core_toolbar {
        color: rgb(255, 255, 255);
        background-color: rgb(79, 125, 201);
      }
      #section {
        height: 1000px;
        background: linear-gradient(rgb(214, 227, 231), rgb(173, 216, 230));
      }
      #refresh {
        position: absolute;
        z-index: -1;
        bottom: 10px;
        pointer-events: none;
        will-change: transform;
      }
      #refresh.snapback {
        -webkit-transition: all 100ms ease-out;
        transition: all 100ms ease-out;
        -webkit-transform: translate3d(0px, 81px, 0px);
        transform: translate3d(0px, 81px, 0px);
      }
      #refresh.snapback.tostart {
        -webkit-transform: translate3d(0px, 0px, 0px) !important;
        transform: translate3d(0px, 0px, 0px) !important;
      }
      #refresh.shrink {
        -webkit-transform: translate3d(0px, 81px, 0px) scale(0.001);
        transform: translate3d(0px, 81px, 0px) scale(0.001);
      }
      #refresh > div {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        padding: 8px;
        background: rgb(255, 255, 255);
      }
      #refresh paper-spinner {
        width: 100%;
        height: 100%;
        opacity: 0;
        will-change: opacity;
      }
    </style>
    <core-scroll-header-panel mode="standard" id="core_header_panel" keepcondensedheader condenses="true" fixed="true" on-trackstart="{{ onRefreshStart }}" on-tracky="{{ onMainAreaTrack }}" on-trackend="{{ onRefreshUp }}">
      <core-toolbar id="core_toolbar">
        <div id="div">Header</div>
        <div id="refresh" class="bottom fit" layout horizontal center-center on-transitionend="{{ onRefreshTransitionEnd }}">
          <div class="paper-shadow-bottom-z-1">
            <paper-spinner id="refreshspinner"></paper-spinner>
          </div>
        </div>
      </core-toolbar>
      <section id="section"></section>
    </core-scroll-header-panel>
  </template>

  <script>

    Polymer({
      onRefreshTransitionEnd: function () {
        if (!this.refreshStarted) {
        	return;
      	}

      this.refreshStarted = false;

      if (this.$.refresh.classList.contains('tostart')) {
        this.$.refresh.classList.remove('snapback', 'shrink', 'tostart');
        return;
      }

  		this.$.refresh.classList.remove('snapback', 'shrink', 'tostart');
      this.$.refreshspinner.style.opacity = 0;
      },
      onRefreshStart: function (e, detail, sender) {

        var atTop = this.$.core_header_panel.scroller.scrollTop == 0;

        if (atTop && e.yDirection > 0) {
          this.refreshStarted = true;

          this.$.refreshspinner.active = true;

        } else if (!this.refreshStarted)  {
          this.touchAction = 'pan-y';
        }
      },
      onMainAreaTrack: function (e, detail, sender) {
        
        var y =  Math.min(e.dy, this.MAX_REFRESH_Y);

        this.$.refreshspinner.style.opacity =
            Math.min(1, 1 - ((this.MAX_REFRESH_Y - e.dy) / this.MAX_REFRESH_Y));

        var style = this.$.refresh.style;
        style.transform = style.webkitTransform = 'translate3d(0, ' + y + 'px, 0)';

        if (!this.refreshStarted) {
          // TODO(ericbidelman): fake scrolling. We're already in a touch event, and
          // scrolling won't kick in until after the user releaes. Ask Dan about this.
          this.$.core_header_panel.scroller.scrollTop = Math.abs(e.dy);
        }
      },
      onRefreshUp: function (e, detail, sender) {
        if (!this.refreshStarted || this.syncing) {
          return;
        }

        var style = this.$.refresh.style;
        style.transform = style.webkitTransform = '';

        var threshhold = this.MAX_REFRESH_Y / 2;

        if (e.dy >= threshhold) {
          this.syncing = true;

          this.$.refreshspinner.style.opacity = 1;
          this.$.refresh.classList.add('snapback');
        } else {
          this.$.refresh.classList.add('snapback', 'tostart');
        }
      }
    });

  </script>

</polymer-element>