How to swipe from left to right Ionic list item?

Question

I want to swipe Ionic list items to both sides. (i.e left-right AND right-left). It works perfectly for right-left swipe but I am not able to swipe list item to left side.

Answer 1

here is an sample code using that u can achieve it

swipe-pane.html

   

        

            

                    

                        
                    
                {{action.actionName}}
            
         
    

swipe-pane.js

angular.module('mk.Directives')
    .directive('mkSwipePane', function ($swipe) {
        return {
            templateUrl: "lib/mobikon/directives/notifications/swipe-pane/swipe-pane.html",
            restrict: 'E',
            scope: {
                swipeActions: "="
            },
            replace: true,
            link: function ($scope, element) {

                var MAX_VERTICAL_DISTANCE = 75,
                    MAX_VERTICAL_RATIO = 0.3,
                    MIN_HORIZONTAL_DISTANCE = 30,
                    startCoords,
                    valid,
                    elWidth = $(element).width(),
                    direction = 1,
                    pointerTypes = ['touch'],
                    delayForAnimation = 70;

                $scope.currentActionClick = function (actionName) {
                    $scope.$emit('currentActionName', actionName);
                };

                function validSwipe(coords) {
                    if (!startCoords) return false;
                    var deltaY = Math.abs(coords.y - startCoords.y);
                    var deltaX = (coords.x - startCoords.x) * direction;
                    return valid && // Short circuit for already-invalidated swipes.
                        deltaY < MAX_VERTICAL_DISTANCE &&
                        deltaX > 0 &&
                        deltaX > MIN_HORIZONTAL_DISTANCE &&
                        deltaY / deltaX < MAX_VERTICAL_RATIO;
                }

                $swipe.bind(element, {
                    'start': function (coords, event) {
                        startCoords = coords;
                        valid = true;
                    },
                    'move': function (coords, event) {

                        var diffX = coords.x - startCoords.x;
                        if (diffX < 0) {
                            direction = -1; // For left swipe
                        } else {
                            direction = 1; // For right swipe
                        }
                        if (validSwipe(coords)) {
                            var marginLeft = parseInt($(element).css("marginLeft"));
                            if (direction === -1 && Math.abs(diffX) <= elWidth / 2) {
                                $(element).prev().css({"margin-left": diffX});
                            } else if (direction === 1 && (marginLeft + diffX) <= 0) {
                                $(element).prev().css({"margin-left": marginLeft + diffX});
                            }
                        }
                    },
                    'cancel': function (event) {
                        valid = false;
                    },
                    'end': function (coords, event) {
                        if (validSwipe(coords)) {
                            if (direction === -1) {
                                $(element).prev().animate({"margin-left": "-50%"}, delayForAnimation);
                                $scope.$emit('isCurrentRowClickable', {isSwiped: false});
                            } else {
                                $(element).prev().animate({"margin-left": "0%"}, delayForAnimation);
                                $scope.$emit('isCurrentRowClickable', {isSwiped: true});

                            }
                        }
                    }
                }, pointerTypes);
            }
        }
    });

require("./swipe-pane.html");
require("./swipe-pane.scss");

swipe-pane.scss

@import "../../../../../views/mixins";

[mk-swipe-pane], .mk-swipe-pane {

  display: inline-block;
  width: 50%;
  $icon-outline-color: $mk-pure-white;
  $icon-font-size: 35px;
  $icon-text-font-size: 16px;
  $icon-margin-top:-10px;
  $icon-padding-top:35%;
  $icon-padding-bottom:5px;
  $icon-container-height:120px;
  $icon-width:20px;

  @media screen and (max-width: 768px) {

     .swipe-actions-padding {
      padding-left: 0px;
      padding-right: 0px;
      float: none;
      display: inline-block;
     }

    .icon-font-size {
      font-size: $icon-font-size;
    }

    .email-icon {
      text-align: center;
      font-size: $icon-text-font-size;
      margin-top: $icon-margin-top;
      padding-top: $icon-padding-top;
      height: $icon-container-height;
      vertical-align: middle;
      background-color: $mk-swipe-action-1-icon-background-orange;
      color: $icon-outline-color;
    }

    .sms-icon {
      text-align: center;
      font-size: $icon-text-font-size;
      margin-top: $icon-margin-top;
      padding-top: $icon-padding-top;
      height: $icon-container-height;
      vertical-align: middle;
      background-color: $mk-swipe-action-2-icon-background-blue;
      color: $icon-outline-color;
    }

    .call-icon {
      text-align: center;
      font-size: $icon-text-font-size;
      margin-top: $icon-margin-top;
      padding-top: $icon-padding-top;
      height: $icon-container-height;
      vertical-align: middle;
      background-color: $mk-swipe-action-3-icon-background-green;
      color: $icon-outline-color;
    }

    .disabled {
      background-color: $mk-background-gray !important;
    }
  }
}