pull-to-action.html

<link rel="import" href="../paper-material/paper-material.html" />
<link rel="import" href="../paper-spinner/paper-spinner.html" />

<!--
### Pull-to-action:
Polymer element to trigger javaScript action on pulldown.

### Example:

You can type your whole script into the action attribute

    <pull-to-action
      action="location.reload()"
      container="#container">
    </pull-to-action>

But that can get a bit long, so you can call a custom function. Which not only makes you code more readable, but makes it all look a little tidier too.

    <pull-to-action
      action="someFunc()"
      container="#someID">
    </pull-to-action>

 __Remember:__ placement is key the contain will mean it can only be controlled within that element, but the position is still relative

### Styling

The following custom properties are available for styling:

Custom property | Description | Default
----------------|-------------|----------
`--pull-icon-color` | Color of refresh icon. | `#ccc`


@element pull-to-action
@demo
-->

<dom-module id="pull-to-action">
  <style>
    :host {
      width: 100%;
      position: relative;
      top: 0;
      left: 0;
      right: 0;
    }
    .refresh {
      background-color:#fff;
      border-radius:50%;
    }
    .refreshSpinner {
      padding:5px;
      width:22px;
      height:22px;
    }
    .refreshStem {
      stroke: var(--pull-icon-color, #ccc);
      stroke-dasharray: 35;
      fill:rgba(0, 0, 0, 0);
      stroke-width:1
    }
    .refreshHead {
      fill: var(--pull-icon-color, #ccc);
    }
    .hidden {
      display:none
    }
    .scale {
      -webkit-animation:scaleAway .5s;
      -moz-animation:scaleAway .5s;
      -o-animation:scaleAway .5s;
      animation:scaleAway .5s
    }
    .refreshShadow {
      width:32px;
      height:32px;
      border-radius:50%;
      background-color:#fff;
      margin:0 auto;
      margin-bottom: -38px;
      border-color:#fff;
      border-style: solid;
      border-width: 3px;
      z-index: 9999;
    }
    @-webkit-keyframes scaleAway {
      0% {transform:scale(1)}
      100% {transform:scale(0)}
    }
    @-moz-keyframes scaleAway {
      0% {transform:scale(1)}
      100% {transform:scale(0)}
    }
    @-o-keyframes scaleAway {
      0% {transform:scale(1)}
      100% {transform:scale(0)}
    }
    @keyframes scaleAway {
      0% {transform:scale(1)}
      100% {transform:scale(0)}
    }
  </style>
  <template>
    <script>
      var lastTouchY=0,
      touchmoveDisable=function(e){
        var o=e.touches[0].clientY,
        t=o-lastTouchY;
        return lastTouchY=o,
        0==document.querySelectorAll("body")[0].scrollTop&&t>0?void e.preventDefault():void 0
      };
      document.addEventListener("touchmove",touchmoveDisable,!1);
    </script>
    <paper-material class="refreshShadow" elevation="2">
      <svg class="refreshIcon refresh" viewBox="0 0 24 24"><g>
        <path class="refreshStem" transform="rotate(-45 12.000000476837158,12.000000476837158), translate(24), scale(-1, 1)"
        d="m5.02361,12c0,-3.87126 3.12203,-7.00698 6.97639,-7.00698c3.85436,0 6.97639,3.13572 6.97639,
        7.00698c0,3.87126 -3.12203,7.00698 -6.97639,7.00698c-3.85436,0 -6.97639,-3.13572 -6.97639,-7.00698z" />
        <rect fill="#ffffff" stroke-width="0" x="17" y="11.029" width="4" height="3" stroke="#ffffff"/>
        <path class="refreshHead" transform="rotate(-90 16.5,7.5) "
        d="m12.97192,10.96708l0,-6.99941l7.06761,6.99941l-7.06761,0z" />
      </g></svg>
      <paper-spinner class="refresh refreshSpinner hidden"></paper-spinner>
    </paper-material>
  </template>
</dom-module>
<script>
  ( function () {
    Polymer({
      is: 'pull-to-action',
      properties: {
        /**
        * The callback action that will be executed
        * when the user releases the pull element
        *
        * @attribute action
        * @type function
        * @default alert("You need to set the action attribute")
        */
        action: {
          type: String,
          value: 'alert("You need to set the action attribute")',
          notify: true
        },
        /**
        * The default container to which the pull-to-action
        * element will bind to
        *
        * @attribute container
        * @type string
        * @default 'body'
        */
        container: {
          type: String,
          value: 'body',
          notify: true
        },
        /**
        * The distance until the refresh icon
        * triggers action
        *
        * @attribute distance
        * @type integer
        * @default 100
        */
        distance: {
          value: 100,
          notify: true,
          observer: 'updateStyles'
        },
        /**
        * Other variables
        * these are calculated by the JS
        *
        */
        _desat: {
          type: String,
          value: '100',
          observer: '_updateStyles'
        },
        _drag: {
          type: Number,
          value: 0,
          observer: '_updateStyles'
        },
        _spin: {
          value: -270,
          observer: '_updateStyles'
        },
        _lastTouchY: {
          type: Number,
          value: 0
        },
        _startTouchY: {
          type: Number,
          value: 0
        },
        _endTouchY: {
          type: Number,
          value: 0
        },
      },
      /**
      * Method to check icon has rotated 
      * to the correct place before proceeding
      * with the animation
      */
      _actionTimer: function(){
        var $this = this;
        if (this._spin.toFixed(0) % 360 == 270) {
          if (1 === actionTrigger) { 
            Polymer.dom($this.root).querySelector(".refresh").classList.add("hidden"),
            Polymer.dom($this.root).querySelector(".refreshSpinner").classList.remove("hidden"),
            Polymer.dom($this.root).querySelector(".refreshSpinner").setAttribute("active", ""),
            $this._actionTimerEnd();
          } else {
            $this._actionTimerEnd();
          }
        } else {
          $this._spin++, 
          setTimeout(function() {
            $this._actionTimer();
          }, 1);
        }
      },
      /**
      * Method to detect when actionTrigger 
      * is no longer 1
      */
      _actionTimerEnd: function(){
        var $this = this;
        if (1 === actionTrigger) {
          setTimeout(function(){
            $this._actionTimerEnd();
          },1000)
        } else {
          this.scaleAway();
        }
      },
      /**
      * Method to cause refreshIcon
      * to rise back to preset
      * distance
      */
      bounceToDistance: function(){
        var $this = this;
        if (this._drag>this.distance) {
          $this._drag-=4,
          $this._spin+=4,
          setTimeout(function(){
            $this.bounceToDistance();
          },1);
        } else {
          eval(this.action);
          if ("undefined" == typeof actionTrigger) {
            setTimeout(function(){
              $this.scaleAway();
            },1000),
            Polymer.dom($this.root).querySelector(".refresh").classList.add("hidden"),
            Polymer.dom($this.root).querySelector(".refreshSpinner").classList.remove("hidden"),
            Polymer.dom($this.root).querySelector(".refreshSpinner").setAttribute("active","");
          } else {
            $this._actionTimer();
          }
        }
      },
      /**
      * Method to make refreshIcon
      * shrink/scale into nothing
      */
      scaleAway: function(){
        var $this = this;
        Polymer.dom(this.root).querySelector(".refreshShadow").classList.add("scale"),
        setTimeout(function(){
          $this._drag=0,
          Polymer.dom($this.root).querySelector(".refreshShadow").classList.remove("scale"),
          Polymer.dom($this.root).querySelector(".refreshSpinner").removeAttribute("active")
        },500)
      },
      /**
      * Method to cause refreshIcon
      * to rise of screen if distance
      * is not met on pull down
      */
      bounceToZero: function(){
        var $this = this;
        if (this._drag > 0) {
          this._drag--,this._spin--,setTimeout(function(){
            $this.bounceToZero()
          },5);
        }
      },
      /**
      * Updates all the css styles
      * for top, opacity,
      * rotateZ, grayscale, strokeDashoffset
      * and strokeWidth.
      */
      _updateStyles: function () {
        var refreshShadow=Polymer.dom(this.root).querySelector(".refreshShadow"),
        refreshIcon=Polymer.dom(this.root).querySelector(".refreshIcon"),
        refreshStem=Polymer.dom(this.root).querySelector(".refreshStem");
        refreshShadow.style.top=(this._drag-50)/3+"px",
        refreshShadow.style.opacity=this._drag/this.distance,
        refreshIcon.style.transform="rotateZ("+this._spin+"deg)",
        refreshIcon.style.filter="grayscale("+this._desat+"%)",
        refreshStem.style.strokeDashoffset=35>=35*(this._drag/this.distance)?35-35*(this._drag/this.distance):0,
        refreshStem.style.strokeWidth=2>=2*(this._drag/this.distance)?2*(this._drag/this.distance):2;
      },
      /**
      * Contains all event listeners
      */
      attached: function() {
        var $this = this;
        /** on touch start set starting touches and reseat animations in case missed. **/
        touchstartHandler=function(a){
          Polymer.dom($this.root).querySelector(".refresh").classList.remove("hidden"),
          Polymer.dom($this.root).querySelector(".refreshSpinner").classList.add("hidden"),
          $this._spin=-270;
          if (1==a.touches.length) {
            $this._lastTouchY=a.touches[0].clientY,
            $this._startTouchY=a.touches[0].clientY;
          }
        },
        /** on touch move (within container) **/
        touchmoveHandler=function(t){
          var e=t.touches[0].clientY,
          r=e-$this._lastTouchY;
          return $this._lastTouchY=e,
          $this._endTouchY=t.touches[0].clientY,
          0==document.querySelectorAll($this.container)[0].scrollTop&&($this._drag=$this._endTouchY-$this._startTouchY,
          r>0?$this._spin+=$this._spin<=0?$this._drag/$this.distance*10:$this._drag/$this.distance*2:$this._spin-=$this._drag/$this.distance*5,
          $this._desat=100-$this._drag/$this.distance*100),
          /** if you're at the top of the container, start animations **/
          0==document.querySelectorAll($this.container)[0].scrollTop&&r>0?void t.preventDefault():$this._drag>0?void t.preventDefault():void 0
        },
        /** on touch end **/
        touchendHandler=function(){
          Polymer.dom($this.root).querySelector(".refreshSpinner").querySelector("#spinnerContainer").classList.remove("cooldown");
          if (0 == document.querySelectorAll($this.container)[0].scrollTop) {
            if ($this._drag>=$this.distance) {
              $this.bounceToDistance()
            } else {
              $this.bounceToZero()
            }
          }
        };
        document.querySelectorAll($this.container)[0].addEventListener("touchstart",touchstartHandler,!1),
        document.querySelectorAll($this.container)[0].addEventListener("touchmove",touchmoveHandler,!1),
        document.querySelectorAll($this.container)[0].addEventListener("touchend",touchendHandler,!1);
      },
    });
  })();
</script>