Sabutobi Sabutobi - 2 months ago 31
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

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!