ibm-js / dpointer Goto Github PK

View Code? Open in Web Editor NEW

7.0 7.0 5.0 676 KB

AMD based API which follows W3C Pointer Events specification and adds click/dbl click normalization.

License: Other

JavaScript 75.21% HTML 22.20% CSS 2.59%

dpointer's People

Contributors

Stargazers

Watchers

Forkers

seb-pereira sbrunot adrianvasiliu tkrugg

dpointer's Issues

click events canceled on devices w/touch and mouse?

I might be wrong, but ISTM that mouse click events won't work on devices that support both touch and mouse (currently on Chrome on a laptop w/a touch screen). The reason is:

events.js loads handlers/touch.js
handlers/touch.js calls utils.js, which sets up code to cancel native clicks.
note: handlers/touch.js fires synthetic click events on touchstart/touchend, but nobody fires synthetic click events on mousedown/mouseup.
therefore, when the user clicks using the mouse, there will be no synthetic click, but the native click will be canceled.

This problem was addressed in dojo/dojo@bcbba40 but AFAICT it's not addressed in dpointer.

On a similar note, it seems like your current code will hide click events from using SPACE or ENTER key while focused on a <button>.

Again though, I might be misunderstanding.

Add intern tests

Supported platforms update for 0.3.0

Chrome desktop on Windows 8.x + touch screen:

Chrome supports Touch Events and CSS touch-action. However it sends compatibility mouse events when on touches (tap), which leads to duplicate pointer events and issue with click event. For that reason, starting release 0.3.0 dpointer will support only mouse events on Chrome desktop. A dedicated issue will be opened to track the best way to properly handle both touch and mouse capabilities on Chrome desktop. README will be updated accordingly.

Register pointer package with bower

add docs

In particular, it took me a long time to figure out that:

the attribute name is data-touch-action rather than touch-action
the way to enable fast-click is by setting data-touch-action=none.

clarify module names and locations

Implement pointerenter/pointerleave when a pointer is added/removed to/from an element

Events pointerenter/pointerleave are generated when pointer move from an element to another element.

pointerenter/pointerleave should also be generated when a pointer is created (pointerover>pointerenter>pointerdown) and removed (pointerup>pointerout>pointerleave)

problems when faux mousedown appears on node behind touchend node

(I know we discussed this over email but I'm filing a ticket before I forget.)

See dojo/dojo@6117ba1, and https://bugs.dojotoolkit.org/ticket/15878#comment:24.

The problem happens for example when there is a <button> behind a Menu. The user clicks a menu item, which then closes the menu, and iOS sends a mousedown/mouseup/click event to the <button> rather than to the menu item.

It might also happen when tapping causes a scroll, for example opening an accordion container pane.

I don't have a test case offhand nor do I remember which platform this occurred, but I think it was iOS6. Perhaps @edurocher can help more, since it was his patch.

Incorrect pageX, pageY values

If you run:

<html>
    <head>
        <script src="../../requirejs/require.js"></script>
        <script>require({baseUrl: "../.."}, ["dojo/domReady!"], function(events) {
            obj.addEventListener("touchmove", function (event) {
                span.innerHTML = event.touches[0].pageX;
                event.preventDefault();
            });
        });</script>
    </head>
    <body>
        <div id="obj" style="width: 640px; height: 480px; background-color: lightseagreen">
            HERE I AM
        </div>
        <span id="span" style="position: fixed; right: 0"></span>
    </body>
</html>

on an iPhone with the browser window being zoomed, you will see that pageX corresponds to the coordinate from the page top / left even if that top / left is not anymore visible due to zoom/offset.

If you run:

<html>
    <head>
        <script src="../../requirejs/require.js"></script>
        <script>require({baseUrl: "../.."}, ["dpointer/events", "dojo/domReady!"], function(events) {
            events.setTouchAction(obj, "none");
            obj.addEventListener("pointermove", function (event) {
                span.innerHTML = event.pageX;
                event.preventDefault();
            });
        });</script>
    </head>
    <body>
        <div id="obj" style="width: 640px; height: 480px; background-color: lightseagreen">
            HERE I AM
        </div>
        <span id="span" style="position: fixed; right: 0"></span>
    </body>
</html>

under the same conditions you will noticed that pageX will be relative to the visible part of the screen (so probably these is more clientX than pageX).

[pointercapture] wrong target element on pointerup (mouse events mapping)

When pointers are mapped against native mouse events and pointer capture is enabled, releasing the button outside the captured element cause the pointerup event to be targeted to the element beneath the mouse pointer, instead of the captured element.

Implement pointerenter/pointerleave on elements when pointer capture is set.

pointerenter/pointerleave should be generated when a pointer enters/leaves an element with pointer capture.

Impact of Pointer Events limitation

This is a placeholder to track and discuss about limitation of the Pointer Events specification when it comes to implement cross platform (browser/device) requirements such as:

allow user to hold and drag a list item when the list enforces native scroll (with touch-action giving control to the browser).
See PR #25 and issue:
pull down 2 refresh feature (also with native scroll)
See #26

The objective is eventually to decide if and how dpointer should answer to those limitations: should it be breaking the compatibility with the specification, recommend not to use DPointer in certain cases, or implement dedicated solutions depending on the platform.

feature detection broken for embedded C# WebBrowser Control

Similar to the discussion in dojo/dojo@17ed3d6#commitcomment-14347450, dpointer's feature detection for pointer-events and mspointer-events presumably doesn't work for embedded C# WebBrowser Controls, where pointer support can "exist" but not be "enabled".

I ended up changing the dojo code to:

// Test if pointer events are supported and enabled, with either standard names ("pointerdown" etc.) or
// IE specific names ("MSPointerDown" etc.).  Tests are designed to work on embedded C# WebBrowser Controls
// in addition to IE, Edge, and future versions of Firefox and Chrome.
// Note that on IE11, has("pointer-events") and has("MSPointer") are both true.
has.add("pointer-events", "pointerEnabled" in window.navigator ?
        window.navigator.pointerEnabled : "PointerEvent" in window);
has.add("MSPointer", window.navigator.msPointerEnabled);

(You can check the latest version of dojo/has.js to see if I needed to change it again, after writing this ticket.)

Also incidentally, the parentheses should be removed from this regex, since they aren't needed and slow it down:

has.add("touch-device", /(mobile)|(android)/i.test ...

IE click delay

(I mentioned this as a comment in google doc, but adding here before I forget.)

Dpointer has code to eliminate the 300ms click delay on webkit (i.e. platforms supporting touchstart/touchend), but IIUC not for IE10 or IE11.

I didn't try personally, but @edurocher wrote how IE also has a click delay, so please doublecheck if this is working w/out a delay.

Dpointer-build depends on requirejs-dplugins

When dpointer-build is used with decor-build, the requirejs-dplugins are already included in decor-build so the source version of requirejs-dplugins is not needed.

This could be fixed by building requirejs-dplugins in its own layer.

Event listeners on parent DOM node break click listeners set up on children

I have the following markup

<div data-touch-action="none">
    <button type="button">x</button>
</div>

I have some pointerdown, pointermove, pointerup listeners set up on the outer div, and also a click listener on the inner button.

I noticed that on a few mobile devices (iphone, android 4.4, and a few others), when I set up the pointer listeners, it becomes impossible to click on the button.

Use maxTouchPoints instead of navigator.pointerEnabled

navigator.pointerEnabled is removed from the spec [1]
Feature detection https://github.com/ibm-js/dpointer/blob/master/events.js#L17 should rely on navigator.maxTouchPoints [2]

[1] http://www.w3.org/2013/11/19-pointerevents-minutes.html#item04
[2] https://dvcs.w3.org/hg/pointerevents/raw-file/c16e5fe3ff87/pointerEvents.html#extensions-to-the-navigator-interface

[touch-action] support native CSS property on Chrome 35+

Do not load un-needed modules

Un-needed handlers must not be download. A solution would be to use has plugin to require them:

define(["./features!mspointer?mspointer", ...], function(mspointer, ...) {
});

with dpointer/features:

define(["dojo/has"], function (has) {
   has.add("mspointer", ....);
   // ..
   return has;
}

Error raised by hovering over a SVG element

The error is: TypeError: Object #<SVGElementInstance> has no method ‘compareDocumentPosition’
Raised in: dpointer/handler/utils.dispatchEnterEvents() and dpointer/handler/utils.dispatchLeaveEvents().

I don’t have a reduced test case, but it can be reproduced by uncommenting ProgressIndicator in liaison/samples/widgetskitchensink.html and hovering over it.

Make sure tests are run through travisCI

Only jshint is checked through Travis, intern tests should be added as well (probably using grunt as delite(ful))

iOS, android: mouse not supported?

Apparently iOS now supports a bluetooth mouse (although I see conflicting reports) and Android supports both bluetooth and USB mice.

AFAICT dpointer will only setup touch listeners on iOS and Android, not mouse listeners.

So AFAICT, mouse will not work. Perhaps iOS or Android have funky code that converts the mouse events into touch events, in which case I'm wrong.

Anyway, have you tested this?

[touch-action] Implement pan-x and pan-y (touch events mapping)

Duplicate clicks on iOS 7

This can be reproduced in ibm-js/delite-tutorial, by adding touch-action="none" on the <body> element.

Several things go wrong then:

the Refresh button sometimes refreshes the list twice (not the most visible thing, you can only see the list flash from times to times)
click Settings, then click Settings again: the list refreshes, as if the Refresh button had received a click (probably because it is now at the location where Settings was before, so it may have received the duplicate click)
in the Settings view, click the Switch: it changes and immediately goes back to its previous state (seems to be the same issue as ibm-js/deliteful#293).

If you remove touch-action="none" none of these things happen (but instead you get the 300ms delay back...)

Add touch support on Chrome Desktop

Since #31 dpointer no more supports touches on Chrome desktop. The main constraint comes from compatibility mouse events which are difficult to identify/absorb, and which lead to duplicated pointer events #18 (comment).

There are ongoing discussions on W3C mailing lists (here and here).

This issue aims at tracking ways to support touches on Chrome Desktop in dpointer.

[touch-action] Disable zooming when user double tap on element when touch-action=none is enforced

When pointer events are mapped to touch events, a double tap action on elements with touch-action=none cause the viewport to zoom/unzoom. This behavior should be prevented to match the current behavior on IE11 with native pointer events.

Investigate impact of cross browser/devices Pull down 2 refresh

[touch-action] add support for "manipulation"

"manipulation" value is implemented in IE10+ and is being introduced in the spec [1]

manipulation
The user agent MAY consider touches that begin on the element only for 
the purposes of scrolling and continuous zooming. Any additional behaviors 
supported by auto are out of scope for this specification.

[1] https://dvcs.w3.org/hg/pointerevents/raw-file/tip/pointerEvents.html#the-touch-action-css-property

[pointercapture] capture on a parent element cause wrong target on click events generated on child element

Leverage bower to manage dev dependencies

[capture] Non capture elements are selected.

When capture is enabled on an element, moving the pointer cause other elements to be selected.

Investigate spec + IE default behavior
calling preventDefault() on the underlying "move" event might prevent other elements to be selected.

Pointer cursor changes when pointer moves outside the captured element. Is this expected: what does the spec says?

e.preventDefault() throws error

Calling preventDefault() on any event throws an error, presumably because mapNativeFunctions should be called with the nativeEvent argument:
mapNativeFunctions(e, nativeEvent);
at line 88 in handlers/utils.js.

dpointer/handlers/mouse: in Chrome and IE9, pointermove events are emitted continuously even if the mouse doesn't move

In some browsers, pointermove events are emitted continuously even if the mouse doesn't move. Found on Chrome 32 and IE9, both on Win7, while I don't get this issue on FF 27/Win7 nor IE10/Win8.

How to reproduce:

Copy https://github.com/AdrianVasiliu/dpointer/blob/mouseissue/tests/capture/mouse.html in the tests/capture directory and run it on desktop in Chrome 32 or IE9.
Place the mouse cursor inside the container (as written in the GUI) and do not move the mouse anymore.
Check the message area below.
=> On Chrome 32 and IE9, pointermove events are continuously received.