Sabutobi Sabutobi - 11 months ago 100
AngularJS Question

Ionic partial swipe

How to implement partial swipe in Ionic framework?
I mean this flow:
1) If user done the full swipe from right to left works one handler.
2) If user done not full swipe and stops before item center - another handler.

ion-option-button
directive realize only full swipe. Maybe someone have some fresh ideas about partial swipe. I'm using Ionic 1.3.

I have this HTML markup:

<ion-item ng-repeat="task in incident.currentIncidentsTasks" can-swipe="true" option-buttons="itemButtons" show-delete="false">
<ion-option-button side="left" id="failed-swipe"><img src="img/ic_failed_swipe.png"></ion-option-button>
<ion-option-button id="change-swipe"><img src="img/ic_change_swipe.png"></ion-option-button>
<ion-option-button id="in-progress-swipe"><img src="img/ic_inprogress_swipe.png"></ion-option-button>
<ion-option-button id="message-swipe"> <img src="img/ic_message_swipe.png"> </ion-option-button>
<ion-option-button id="confirmation-swipe"><img src="img/ic_confirm_swipe.png"></ion-option-button>
<div class="row ">
<div class="col col-10 ">
<img src="img/checked.png ">
</div>
<div class="col col-10 ">
<div><img src="img/priority_task/{{task.Priority}}.png "></div>
<div id="chat-img-tasks"><img src="img/chat.png "></div>
</div>
<div class="col col-50 ">
<div class="task-detail-center ">{{task.Name}}</div>
<div class="task-detail-center ">{{task.Description}}</div>


</div>
<div class="col col-30 ">
<div class="task-detail "><img src="img/face.png "></div>
<div class="task-detail ">AG: {{vm.currentTaskUser}}</div>
</div>
</div>
</ion-item>


Thanks for attention and have a nice day!

Answer Source

Maybe that will help somebody. Main idea is in tracking drag event(ontouchmove event works well on debugger, but on device doesn't work). Set events while render page:

$ionicGestune.on('dragstart', vm.touchStartTrack, element);
$ionicGestune.on('dragend', vm.touchEndTrack, element);

Then track dragend event:

 function touchEndTrack(event) {
            if (event.gesture.distance > 370 && event.gesture.direction === "left") {
                $scope.$apply(function () {
                    vm.isFullSwipe = false;
                    vm.isHideOptions = true;
                });
            } else {
                vm.isFullSwipe = true;
                revertToDefaultTask();
            }
        }

Template:

<ion-item ng-show="swipe.isFullSwipe && swipe.isFail && swipe.isInProgress" show-delete="false" option-buttons="itemButtons">

If someone have better idea - please post your ideas. Thanks for attention!