javascripthtmlangularjstouchangularjs-ng-touch

Define areas for touch events using ngTouch


I am working on an AngularJs web app and have just started using ngTouch to recognize swipe left and right, I want to use this to open and close my side bar menu. Currently it works and the menu opens and close however, I have the swipe events tied to the entire wrapper like so <div ng-style="body_style" id="wrapper" ng-swipe-right="showMenu()" ng-swipe-left="hideMenu()"> which makes the entire app the swipe area. I would like to be able to set it to just an area in the top left quadrant of the app like so: ideal touch area is in red

This will allow me to set up other swipe areas for additional functionality rather than being limited to just one area.

I know that I can make a div and place it there with defined width and height but the div is going to block content in other areas so that when someone goes to "click" something they would actually be clicking the invisible div for the swipe area. I know there has to be a way around this but I cannot think of one.

tldr: How do I set up an area to capture swipe events that will not effect the interactivity of other elements that may be below it?


Solution

  • In the source for angular-touch, it uses a function called bind. Bind takes an element that should be watched for swipes and watches its events, such as start. So if you wanted to, you could change the source to stop executing the rest of the code if the start is outside of some x or y coordinate that you set.

    You could change this code,

    pointerTypes = pointerTypes || ['mouse', 'touch'];
    element.on(getEvents(pointerTypes, 'start'), function(event) {
         startCoords = getCoordinates(event);
         active = true;
         totalX = 0;
         totalY = 0;
         lastPos = startCoords;
         eventHandlers['start'] && eventHandlers['start'](startCoords, event);
    });
    

    To something like this:

    pointerTypes = pointerTypes || ['mouse', 'touch'];
    element.on(getEvents(pointerTypes, 'start'), function(event) {
         startCoords = getCoordinates(event);
         if (startCoords.y <= 400 && startCoords.y >= 100 && startCoords.x <=500) {
             active = true;
             totalX = 0;
             totalY = 0;
             lastPos = startCoords;
             eventHandlers['start'] && eventHandlers['start'](startCoords, event);
         }
    });
    

    Kind of an ugly hack, but it'll work.