left-swipe-action.html

<!--
'left-swipe-action' enables a left swipe gesture to open a content and show behind action buttons like iOS item list.

This component wraps your own element and the wrapper handles gesture events. The main content will be opened by a left swipe and specified buttons 'left-swipe-action-button' will be shown behind of the content. The other gestures on the component will close the content.

    <left-swipe-action>
        <div>
            <div>Title</div>
            <div>Description</div>
        </div>
        <left-swipe-action-button onclick="alert('delete')">Delete</left-swipe-action-button>
        <left-swipe-action-button style="background-color: #9F499B; color: #fff;" onclick="alert('favorite')">Favorite</left-swipe-action-button>
    </left-swipe-action>

The elements other than left-swipe-action-button will be inserted to shadow DOM as main content.
'left-swipe-action-button' is a button to be fit with a content height. These are aligned as table cells.

CSS for both the main content and buttons in light DOM will be just applied.

@element left-swipe-action
@auther tejitak
-->
<link rel="import" href="left-swipe-action-button.html">

<dom-module id="left-swipe-action">
    <style>
        :host {
            position: relative;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        }

        .swipe-underlay {
            position: absolute;
            right: 0;
            width: 100%;
            height: 100%;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;

            -ms-flex-direction: row;
            -webkit-flex-direction: row;
            flex-direction: row;
            -ms-flex-direction: row-reverse;
            -webkit-flex-direction: row-reverse;
            flex-direction: row-reverse;
        }

        .swipe-content {
            width: 100%;
            background-color: #fff;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            -o-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        .cubic-bezier {
            -webkit-transition: -webkit-transform .5s cubic-bezier(.10, .70, .10, 1) .05s;
            -moz-transition: -moz-transform .5s cubic-bezier(.10, .70, .10, 1) .05s;
            -ms-transition: -ms-transform .5s cubic-bezier(.10, .70, .10, 1) .05s;
            -o-transition: -o-transform .5s cubic-bezier(.10, .70, .10, 1) .05s;
            transition: transform .5s cubic-bezier(.10, .70, .10, 1) .05s;
        }

        .shadow {
            -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
            -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
        }
    </style>
    <template>
        <div class="swipe-underlay">
            <content select="left-swipe-action-button"></content>
        </div>
        <div id="content" on-track="handleTrack" on-down="handleDown" on-up="handleUp">
            <content></content>
        </div>
    </template>
</dom-module>
<script>

    /**
     * Private class to have x-axis point and left flick status by checking a current and previous position
     */
    var xPoint = function(x){
        this.updated = false;
        this.x = this._prev = this._origin = x;
        this._timeStamp = (new Date()).getTime();
    };

    xPoint.prototype = {
        TIMER_RESET_THRESHOLD: -5/* px */,
        VELOCITY_THRESHOLD: -0.2 /* px/ms */,

        distance: function(){
            // distance between touch start and current point
            return this.x - this._origin;
        },

        update: function(x){
            // reset time stamp at move stop
            if(x - this.x > this.TIMER_RESET_THRESHOLD){
                this._timeStamp = (new Date()).getTime();
                this._prev = this.x;
            }
            this.x = x;
            this.updated = true;
        },

        isFlick: function(){
            var dt = (new Date()).getTime() - this._timeStamp;
            var dx = this.x - this._prev;
            return (dx / dt) < this.VELOCITY_THRESHOLD;
        }
    };

    Polymer({
        is: "left-swipe-action",

        properties: {
          /**
           * If true, the content will be opened by default
           *
           * @attribute open
           * @type boolean
           * @default false
           */
          open: {
            type: Boolean,
            value: false
          },
          /**
           * If true, drag (touch move) action is disabled and a content is automatically opened by click/touch
           *
           * @attribute nodrag
           * @type boolean
           * @default false
           */
          nodrag: {
            type: Boolean,
            value: false
          },
          /**
           * Offset pixcel position for opened state
           *
           * @attribute offset
           * @type number
           * @default 60
           */
          offset: {
            type: Number,
            value: 60
          },
          /**
           * If true, box shadow is added
           *
           * @attribute shadow
           * @type boolean
           * @default false
           */
          shadow: {
            type: Boolean,
            value: false
          },
           /**
           * If true, all gestures are disabled
           *
           * @attribute disabled
           * @type boolean
           * @default false
           */
          disabled: {
            type: Boolean,
            value: false,
            observer: 'disabledChanged'
          }
        },

        disabledChanged: function(oldValue, newValue){
          if (newValue){
            this.open = false;
            this.transition();
            this.removeGestureListeners();
          }
        },

        handleUp: function(e){
          if(this.nodrag){
            this.toggleOpen();
          }else{
            this.onUp(e);
          }
        },

        handleDown: function(e){
          this.onDown(e);
        },

        handleTrack: function(e){
          if(this.disabled){
            return;
          }
          switch(e.detail.state){
            case 'track':
              this.onMove(e);
              break;
            case 'end':
              this.onUp(e);
              break;
          }
        },

        removeGestureListeners: function(){
          // do not need from Polymer 1.0 gensture events?
          // https://www.polymer-project.org/1.0/docs/devguide/events.html#gestures
        },

        ready: function(){
            this.applyClass();
            this.transition();
            // allow y scroll on this node but prevent x scroll
            this.setScrollDirection('y', this.$.content);
        },

        onDown: function(e){
            this.point = new xPoint(e.detail.x);
            this.applyClass();
        },

        onMove: function(e){
            var p = this.point;
            if(p){
                p.update(e.detail.x);
                this.translate3d(this.open ? this.offset - this.$.content.clientWidth + p.distance() + "px" : p.distance() + "px", 0, 0, this.$.content);
            }
        },

        onUp: function(e){
            var p = this.point;
            if(!p){ return; }
            this.open = p && p.isFlick();
            this.point = null;
            this.applyClass();
            // apply css fixed-true before transition
            this.async(this.transition);
        },

        transition: function(){
            this.translate3d(this.open ? this.offset - this.$.content.clientWidth + "px": 0, 0, 0, this.$.content);
        },

        toggleOpen: function(){
            this.open = !this.open;
            this.transition();
        },

        applyClass: function(){
          var list = ["style-scope left-swipe-action swipe-content"]
          if(this.nodrag || this.point === null){
            list.push("cubic-bezier");
          }
          if(this.shadow){
            list.push("shadow");
          }
          this.$.content.className = list.join(" ");
        },

        // must pass *same* function instance to both (add|remove)EventListener, so bind in created
        created: function() {
          this.toggleOpen = this.toggleOpen.bind(this);
          this.onDown = this.onDown.bind(this);
          this.onMove = this.onMove.bind(this);
          this.onUp = this.onUp.bind(this);
        },

        detached: function() {
            this.removeGestureListeners();
        }
    });
</script>