stoffeastrom / touche Goto Github PK

View Code? Open in Web Editor NEW

11.0 11.0 7.0 746 KB

Gestures library for desktop and touch devices

License: MIT License

JavaScript 97.97% CSS 1.39% HTML 0.64%

touche's People

Contributors

Stargazers

Watchers

Forkers

edvard-falkskar magnuskenneth veinfors nangal t-wizard cbt1

touche's Issues

Handle MSPointer events

We need to handle MSPointer events.

If window.navigator.msPointerEnabled bind the MSPointerDown/MSPointerMove/MSPointerUp.
Set -ms-touch-action: none; for the binding element so the events gets directed to javascript code

How should we handle for example win8 with chrome where both mouse/touch events are fired

Start event should decide the gesture flow
Gesture should be type dependant. I.e for touch we need to support that you put first 1 finger down and then next.
This would end up as a 2-finger tap.
If you use your mouse simultaneously it should be consider as another gesture
For MSPointer. could we distinguish type? Else it would feel weird to be able to do a 2-finger tap with the mouse and finger.

event.pointerType -> mouse, pen, touch

Detecting tap on scrollbar does not take borders or inline styled elements into account

This means that taps on inline styled elements will be ignored and scrollbar detection on elements with borders can fail.

setOptions in Gesture not working correctly, preventDefault for example will not change to false

Add precedence option to swipe

Only allow one flow in touch case since it triggers both touch/mouse

add pageX, pageY to data parameter

longtap preventDefault should also bind MSHoldVisual (different depending on IE release apparently)

We need to introduce a getValidTarget which would traverse up the DOM until we have a "valid" element. That element should be set as relatedTarget. If we do T.utils.getRect for that valid element the gestures could use that instead of doing it themselves.

Maybe we also could introduce "selector". So it would traverse up to matched selector. If not matched it will not trigger

Swipe calculations wrong when using `event.target`

Add buildstep

We need to have a buildstep so we can keep an up-to-date touche.min.js for easy distribution.

activate buttons when pressing the space key

If you on desktop tab to a <button>, and press the spacekey, I would assume that a tap event would be triggered, but it isn't as of now.

Browsers apply the :active pseudo class so it seems logical.

fix offset calculation in T.utils.getRect

Mouse down on scrollbar will not trigger mouseup

This is fixed in chrome canary (https://code.google.com/p/chromium/issues/detail?id=14204)
IE 10 still has the issue (https://connect.microsoft.com/IE/feedback/details/783058/scrollbar-trigger-mousedown-but-not-mouseup)

Don't know if we should do anything about this in Touché but we are aware of the issue.

One hack is to check if the event.target.scrollHeight > event.target.getBoundingClientRect().height for vertical scroll and vice versa for horizontal. If either is true the mousedown was on the scrollbar.

pointerstart -> pointerdown

Possibillity to have an array of "buttons" in options.which

If options.which is an array make sure to check to whole array. Backward compability should be possible. Check if its an array else work as before

Add option inertia for the momentum feature

transformPoint. Make sure to wrap the transformation into a try/catch block since sometimes you will not get a valid transformation matrix

T.utils.getRect, getBBox doesn't exist on all svg elements

Fallback on getBoundingClientRect

isOtherFlowStarted only check if the flow is started

The isOtherFlowStarted function only checks if the flow is started, but the flow should not be considered started if it's already ended.

So the code should be like:
flow.started && !flow.ended

Add documentation

options, etz

double tap

How should we handle double tap and cancellation of tap?

The double tap definition should handle this. Add the possibility to delay the tap from the double tap and either trigger double tap or the tap gesture

Change msPointer to pointerEnabled. Add util function for isMouse

IE10 vs IE11 has different detection on pointer events. IE11 is following the w3c spec so change the detection to check for window.MSPointerEvent or window.PointerEvent. Add a util function to detect if it's a mouse or not.

swipe, make sure to call start from update if you added a event listener after you touched the surface

event.relatedTarget is readonly IE10 in strict mode

on/off, we need a way to do off on an certain gesture instance

For doubletap we do T(elem).on(this) and T(elem).off('tap'). If we only want to do off on a certain gesture we need to make sure to remove the correct instance and not all for the type 'tap'.

this.ended is not set to true in gesture-handler -> handleEvent -> cancel

cancel event not handled in getFlowType

Remove this.countTouches > 0 in hasNotEqualTouches

Add cancel callback for all gestures

Clicking on scrollbar in IE11 starts swipe but never ends it

Given you have attached Touché with swipe to an element and you click on the scrollbar belonging to that element, swipe gets started by never ended (compared to clicking on the actual element, which also ends the swipe).

Test case:

<!DOCTYPE html>
<html>
<head>
    <style>
        .outer {
            height: 200px;
            width: 200px;
            overflow: auto;
            border: 1px solid gray;
        }

        .inner {
            height: 600px;
            width: 600px;
        }
    </style>
</head>
<body>

    <div class="outer">
        <div class="inner">inner</div>
    </div>

    <script src="touche.min.js"></script>
    <script>

        var element = document.getElementsByClassName("outer")[0];

        Touche( element ).swipe( {
            options: {
                preventDefault: false,
                radiusThreshold: 1
            },
            start: function ( nativeEvent, data ) {
                console.log("touche start");
            },
            update: function ( nativeEvent, data ) {
                console.log("touche update");
            },
            end: function ( nativeEvent, data ) {
                console.log("touche end");
            }
        } );

    </script>

</body>
</html>

Make sure to call getScreenCTM of target element in Touche.utils.transformPoint

Since firefox can't handle to do a getScreenCTM on the SVG element we need to do it on the target element.

New proposed syntax for defining gestures

Currently, there's a lot of overhead when defining a gesture. There's object merging for options, default empty callbacks and so on. I'd like to see a cleaner, more easily understood API for defining gestures.

Below is a proposed way of a cleaner API.

Touche.add('gesturename', {
    options: {},
    init: function() {},
    start: function() {},
    update: function() {},
    end: function() {},
    cancel: function() {}
});

init is the only required key in the gesture definition. All others (options, start, update, end, cancel) are optional.

options are defined default values, e.g. thresholds and so on that are specific to the gesture
init handles any logic that should be run when the gesture is bound to an element
start is triggered when the gesture manager of that element deems it appropriate to start the gesture
update is triggered whenever the gesture has been started and there's movement (either by finger, timer, mouse etc.)
end is triggered if the gesture successfully ended, this is what most people would want to use
cancel is triggered if the element's gesture manager has seen another gesture that has been fulfilled or if the user somehow cancelled the interaction (e.g. touchcancel or similar)

Let's open up a discussion around this so the API is simple to use.

Doubletap options

Double tap options is not used on the underlying tap gesture. The tap should get the doubletap options! I.e preventDefault:false should work.

touchend is not fired when the target element for touchstart is removed

http://lists.w3.org/Archives/Public/public-webevents/2012OctDec/0023.html

This is an issue for the touch specification. It seems that a mouseup is fired though.

Add possibility to prevent gestures

Instead of using event.stopPropagation() it would be nice to expose a function that prevent gestures with optional [exceptThisGestureHandler] parameter.

Looked into this.

The way to solve this would be to have an static function

T.preventGestures = function(excludeHandler) {
        T.cache.data.filter(function(obj) {
            return (excludeHandler ? obj.context !== excludeHandler : true);
        }).forEach(function(obj) {
            obj.context.prevented = true;
        });
};

and a check

        this.handleEvent = function(event) {
            var events = T.utils.getEvents(),
                flowType = T.utils.getFlowType(event.type);

            if(events.start.some(function(val) {
                return event.type === val;
            })) {
                if(this.isOtherFlowStarted(flowType)) {
                    return;
                }
                if(this.prevented) {
                    this.prevented = false;
                    return;
                }
//... left out

This way it would be possible to prevent gestures if needed.

utils.extend needs to handle some sort of deep copy, at least one leve for the options object

Create a `Touche` wrapper for easier multi-binding

Instead of doing:

Touche.tap(elem, opts).swipe(elem, opts);

the user can do:

Touche.wrap(elem).tap(opts).swipe(opts);
// or:
Touche(elem).tap(opts).swipe(opts);

tapstart -> dragstart -> tapcancel since it has become another gesture (native drag)