itemTap event when swipe actions are visible

[Douglas]

I want user interaction similar to the iOS email listview.  You can tap an item if the swipe actions are NOT visible.  But, if you tap when they are visible the actions collapse.

I have the swipe actions working properly.  When you tap an item, it collapses the actions.  But, it also sends an itemTap event.  

I'm trying to find a way to detect if the actions are visible to ignore the tap in the event.  I am having no luck and need some guidance.

--thanks

[Nick Iliev]

Hi Douglas,

As far as I understood you have implemented swipe actions for your list view and you want to have logic where if the swipe actions are triggered then the itemTap should not execute any logic. And if there are no active swipe actions then the itemTap should execute its logic.

Based that I got your issue correctly and that you are using RadListView, here is a possible solution using an observable model and a boolean property as a "marker".

Let's assume that we have this example as a code base (and its respective XML file).
The example shows the basic usage of swipe actions so we are also going to introduce a basic itemTap logic for our purposes.

swipe-actions.xml (adding itemTap
and reusing itemSwipteProgressSrarted / itemSwipteProgressEnded)

<lv:RadListView
            id="listView"
            items="{{ dataItems }}"
            row="1"
            selectionBehavior="None"
itemTap="onItemTap"
            itemSwipeProgressEnded="onSwipeCellFinished"
            itemSwipeProgressStarted="onSwipeCellStarted"
            itemSwipeProgressChanged="onCellSwiping"
            swipeActions="true">

Then in our code behind file swipe-actions.ts  we are creating an observable boolean property 

var vm = new viewModel.ViewModel();

// IMPORTANT!!! go to "./swipe-actions-model" and make it extends Observable to set observable properties
vm.set("areSwipeActionsOn", false);

and in the same file also introducing the itemTap as follows:

export function onItemTap(args: listViewModule.ListViewEventData) {
    if(vm.get("areSwipeActionsOn")) {
        console.log("Swipe actions visible! Do nothing...");
    } else {
        console.log("onItemTap");
        // implement the logic for itemTap here
    }
}

Lastly, we need to set the "marker" to true when a swipe action is ON and then back to false when it is finished.For this, we are using itemSwipeProgressStarted and itemSwipteProgressEnded events.

export function onSwipeCellStarted(args: listViewModule.ListViewEventData) {
    console.log("onSwipeCellStartedd");

    vm.set("areSwipeActionsOn", true);

    var swipeLimits = args.data.swipeLimits;
    var swipeView = args['object'];
    var leftItem = swipeView.getViewById('mark-view');
    var rightItem = swipeView.getViewById('delete-view');
    swipeLimits.left = leftItem.getMeasuredWidth();
    swipeLimits.right = rightItem.getMeasuredWidth();
    swipeLimits.threshold = leftItem.getMeasuredWidth() / 2;
}

export function onSwipeCellFinished(args: listViewModule.ListViewEventData) {
    console.log("onSwipeCellFinished");

    vm.set("areSwipeActionsOn", false);
}

Now our code will execute itemTap logic only when the boolean marker is false, otherwise, it will simply go in the if condition.

All of the above is based on the assumption that you are using swipe actions for RadListView, but please do let me know if that scenario is different or not applicable to your case and you need further assistance.
 
Regards,
Nikolay Iliev
Telerik by Progress