g-panel-slider.html

<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<!--
/**
 * g-panel-slider is a g-panels that can be slid with the mouse, mousewheel or touchscreen.
 *
 * Example:
 *
 *     <g-panel-slider selected="0">
 *       <div>One</div>
 *       <div>Two</div>
 *       <div>Three</div>
 *       <div>Four</div>
 *     </g-panel-slider>
 *
 * @class g-panel-slider
 * @extends g-panels
 *
 * Future work:
 *  - track velocity to permit flinging between cards without moving full distance
 *  - allow a vertical panel arrangement as well
 *  - enable mousewheel sliding (especially with precise deltas from trackpads)
 *  - allow sliding more than one panel at a time (eg. when dragging past the end of the window)
 *  - allow more than one panel to be shown at once (eg. image caoursell) 
 */
-->
<link rel="import" href="../polymer-all/toolkit-ui/elements/g-panels.html">
<element name="g-panel-slider" extends="g-panels">
  <link rel="stylesheet" polymer-scope="controller" href="g-panel-slider-controller.css" />  
  <template>
    <shadow></shadow>
  </template>
  <script>
    Polymer.register(this, {
      ready: function() {
        // TODO(sorvell): import styling from panels... this should be @host-ified
        Polymer.installControllerStyles(this, this.elementElement);
        this.setAttribute('touch-action', 'none');
        this.classList.add('flexbox', 'col');
        this.addEventListener('trackstart', this.onTrackStart);
        this.addEventListener('track', this.onTrack);
        this.addEventListener('trackend', this.onTrackEnd);
        // Disable text selection while dragging the mouse
        // TODO: perhaps we should just disable mouse tracking instead?
        this.addEventListener('mousedown', function(e) { e.preventDefault(); });
        this.transition = 'none';          
        this.super();
      },
      slidingIn: null,
      slidingOut: null,
      lastDir: 0,
      containerWidth: 0,
      onTrackStart: function(e) {
          this.containerWidth = this.offsetWidth;
          this.slidingOut = this.getSelectedPanel();
      },
      onTrack: function(e) {
          var dir = e.dx < 0 ? -1 : e.dx > 0 ? 1 : 0;
          if (dir && dir != this.lastDir) {
              this.lastDir = dir;
              if (this.slidingIn) { 
                  this.clearSlidingIn();
              }
              var newIndex = this.clampIndex(this.index - dir);
              if (newIndex == this.index) {
                  this.slidingIn = null;
              } else {
                  this.slidingIn = this.panelAtIndex(newIndex);
                  this.enablePanelShowing(this.slidingIn, true);
              }
          }
          if (this.slidingIn) {
              var dx = e.dx;
              if (Math.abs(dx) > this.containerWidth) {
                  dx = this.containerWidth * dir;
              }
              this.slidingIn.style.webkitTransform = 'translate3d(' + (dx - this.containerWidth * dir) + 'px, 0, 0)';
              this.slidingOut.style.webkitTransform = 'translate3d(' + dx + 'px, 0, 0)';
          }
      },
      onTrackEnd: function(e) {
          if (this.slidingIn) {
              // TODO: animate this
              if (Math.abs(e.dx) > this.containerWidth / 2) {
                  this.index = this.indexOf(this.slidingIn);                  
                  // indexChanged is invoked asynchronously
              } else {
                  this.slidingOut.style.webkitTransform = '';                  
                  this.slidingOut = null;              
                  this.clearSlidingIn();
              }
          }
          this.lastDir = 0;
      },
      indexChanged: function(inOldValue) {
          this.super(arguments);
          if (this.slidingOut) {
              this.slidingOut.style.webkitTransform = '';                  
              this.slidingOut = null;                           
              this.slidingIn.style.webkitTransform = '';
              this.slidingIn = null;
          }
      },      
      clearSlidingIn: function() {
          if (this.slidingIn) {
              this.enablePanelShowing(this.slidingIn, false);
              this.slidingIn.style.webkitTransform = '';
              this.slidingIn = null;
          }          
      }
    });
  </script>
</element>