Ионные частичные салфетки

Question

Как реализовать частичный салфетки в ионном каркасе? Я имею в виду этот поток: 1) Если пользователь выполнил полный перекос справа налево, работает один обработчик. 2) Если пользователь не выполнил полную проверку и остановился перед центром элемента - другим обработчиком.

ion-option-button директива реализовать только полный салфетки. Может быть, у кого-то есть свежие идеи о частичном салфетке. Я использую Ionic 1.3.

У меня есть этот HTML код:

<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> 

Спасибо за внимание и хорошего дня!

Answer 1

Возможно, это поможет кому-то. Основная идея в отслеживании drag Событие (ontouchmove событие хорошо работает на отладчике, но на устройстве не работает). Набор событий во время рендеринга страницы:

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

Затем отслеживать dragend событие:

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(); 
      } 
     } 

шаблона:

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

Если кто-то есть идея получше - пожалуйста, оставьте свои идеи. Спасибо за внимание!