CODEWITHSUNDEEP
javascript
Snowman
Snowman

Reputation: 2495

How to disable swiping and enable it again?

I have code where 4 div elements act as pages and swiping on them gets you to the next/previous page.

function handleSwiping(allPagesArray){

    for(i=0; i<pageCount; i++){
        attachEvents(i);
    }

    function attachEvents(idx){
        var page = allPagesArray[idx];
        if(isVertical){
            te(page).on('swipeup', function (e) {
                gotoNextPage(idx);
            });
            te(page).on('swipedown', function (e) {
                gotoPrevPage(idx);
            });         
        } else {
            te(page).on('swipeleft', function (e) {
                gotoNextPage(idx);
            });
            te(page).on('swiperight', function (e) {
                gotoPrevPage(idx);
            });
        }
    }
}

The gotoNextPage and gotoPrevPage functions have keyframe animations in them. What I need to achieve is that before the animation starts, I want to unbind these swipe events and bind them again after the animation ends. This is needed in case the user swipes again before the 'go to next page' animation is complete.

I need the solution in pure javascript. Jquery or any other framework won't do.

Can anyone help?

Upvotes: 0

Views: 50

Answers (1)

Jcl
Jcl

Reputation: 28272

You could have a global variable (or in an object somewhere), isSwiping.

 te(page).on('swipeup', function (e) {
    if(!isSwiping) {
       isSwiping = true; 
       gotoNextPage(idx);
    }
 });

Then set isSwiping to false when the animation ends

Upvotes: 1

Related Questions