googlearchive / polymer-gestures Goto Github PK

View Code? Open in Web Editor NEW

84.0 35.0 30.0 448 KB

JavaScript 90.25% HTML 9.75%

polymer-gestures's Introduction

This project is deprecated. Please see: https://www.polymer-project.org/1.0/docs/devguide/events.html#gestures

pointer-gestures

A set of rich gestures for desktop and mobile.

Supported events:

down
up
- Same target as down, provides the element under the pointer with the relatedTarget property
trackstart
track
- Same target as down
trackend
- Same target as down, provides the element under the pointer with the relatedTarget property
tap
- Targets the nearest common ancestor of down and up.relatedTarget
- Can be prevented by calling any gesture event's preventTap function
pinch
hold
holdpulse
release

Not yet implemented:

flick
pinchstart
pinchend

More info — https://groups.google.com/forum/#!topic/polymer-dev/ba4aDyOozm8

How to use

The element, or a parent of the element, should have the touch-action="none" attribute.

PolymerGestures.addEventListener(element, eventname, handler, capture);

How to build

mkdir gestures
cd gestures
git clone [email protected]:Polymer/tools.git
git clone [email protected]:Polymer/polymer-gestures.git
cd polymer-gestures
npm install
grunt

How to run

cd gestures
python -m SimpleHTTPServer
open http://localhost:8000/polymer-gestures/samples/simple/

More info — http://www.polymer-project.org/resources/tooling-strategy.html

polymer-gestures's People

Contributors

Stargazers

Watchers

polymer-gestures's Issues

pinch

All I need to make the conversion (and upgrade noflo-ui to 0.2.3).

I see pinchstart and pinchend are planned 👍

In IE10, moving the mouse over the window causes an exception

SCRIPT5007: Unable to get property '0' of undefined or null reference 
dispatcher.js, line 322 character 11

Prevent track when using two finger pinch

Clone of googlearchive/PointerGestures#27

Events are not dispatched properly

How to reproduce:

Change

      events.forEach(function(en) {
        PolymerGestures.addEventListener(capture, en, function(inEvent) {
          appendOutput(inEvent.type + ' [' + inEvent.pointerId + ']');
          inEvent.preventDefault();
        });
      });

      events.forEach(function(en) {
        PolymerGestures.addEventListener(enterleave, en, function(inEvent) {
          appendOutput(inEvent.type + ' [' + inEvent.pointerId + ']');
          inEvent.preventDefault();
        });
      });

in samples/simple/index.html and open in any iOS device.

track event will not be fired.

Next do git checkout 39cf501f502a34ff2349dbef98c2eecf4fd6c93f^1 and try again. Everything should be OK.

Next do git checkout 39cf501f502a34ff2349dbef98c2eecf4fd6c93f and try again. Not working.

Something is broken in 39cf501f502a34ff2349dbef98c2eecf4fd6c93f

Work around safari touchevent listener bug

If touchevent listeners are added to a node from another document, then that node is added to the main document, the touch event listeners will not fire in iOS Safari 7.

Reproduction:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Safari broken touches</title>
    <style>
      #target {
        width: 100px;
        height: 100px;
        background: orange;
      }
    </style>
  </head>
  <body>
    <div id="host"></div>

    <script>
      function log(e) {
        console.log(e.type);
      };

      var host = document.querySelector('#host');

      var template = document.implementation.createHTMLDocument();
      var target = template.createElement('div');
      target.id = 'target';

      // works
      //host.appendChild(target);

      target.addEventListener('touchstart', log);
      target.addEventListener('touchmove', log);
      target.addEventListener('touchend', log);

      // broken
      host.appendChild(target);
    </script>
  </body>
</html>

send angle with pinch

It might be nice to have the angle between the two points sent with the pinch event. This would make it easy to handle things like "scale width" and "scale height".

The older PointerGestures rotate/pinch code computed the angle for both pinch and rotate but did not send it with a pinch. It is easy to customize this, but it might be a generally useful change.

Polymer Designer not working

Dan, could you look into this: core-drag-drop's parentNode is a shadowRoot and the gesture code attempts to call hasAttribute on it which generates an exception.

Cannot call preventDefault on the `on-up` event

I have the following helper function:

cancelEvent: function(e) {
  if (e.preventTap) {e.preventTap();} 
  e.preventDefault();
  e.stopPropagation();
},

When I call it in firefox and IE with the result of a on-up event I get the following error:

TypeError: 'preventDefault' called on an object that does not implement interface Event.

If I change the event to on-tap then the exception is no-longer thrown. Using 0.3.3.

I can create a reduced test case if you are interested, but if this is something that you think will naturally get fixed by the progression of the project then you can close.

Add a double-tap gesture

Should be pretty simple to reuse the detail property, which is a click count, and only dispatch this event when the detail is a multiple of two.

Migration of googlearchive/PointerGestures#26

firefox buttons still a problem with tap

I am not getting "tap" events on firefox 33.0.2 on Linux. I believe I have the latest version of polymer-gestures. I know there was a recent issue about this and that work was done to fix that problem. I traced my problem to line 65 in tap.js.

tap = (e.buttons ^ 1) && (downState.buttons & 1);

This checks that button 1 is up on the up event. This is not the case and the tap event is blocked. I found this doc online about the buttons:

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent.buttons

Gecko notes
Gecko supports the buttons attribute on Windows, Linux (GTK), and Mac with the following restrictions:
...
On Linux (GTK), the 4th button and the 5th button are not supported. In addition, a mouseup event always has the releasing button information in this attribute value.
...

Have "default" touch-actions for some gestures

track in particular makes sense to default to none, while something like trackX and trackY should allow scrolling in the opposite direction.

All Polymer elements in Firefox announce as "clickable" with ShadowDOM Polyfill

Imported from a polymer-dev thread

Oh boy, a three pronged assault!

Polymer calls PolymerGestures.register(element.shadowRoot) for each Polymer element instance to attach gesture event handlers in the ShadowRoot to use target information that would be lost when the event bubbles out of the ShadowRoot.
Under the ShadowDOM Polyfill, these listeners are attached to the host element, and emulate coming from a phantom ShadowRoot.
Firefox treats a mousedown or mouseup handler as an intent to make an element "clickable" and sets the accDefaultAction to "clickable", which is announced for every element in a screen reader environment.

The quick fix should be to disable the "attach event listeners" code path in ShadowDOM Polyfill.

A longer-term solution would be to use the event.path information, if they spec ever changes to not hide information when bubbling past ShadowRoots.

on iOS, <content on-tap="{{...}}"> doesn't work

To reproduce the issue, run the sample code on iOS, you will see tapHandler is not being called. The same code works fine in 0.4.2.
The bug seems to be introduced by this commit: 398ba03

<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
  <script src="components/webcomponentsjs/webcomponents.js"></script>
  <link rel="import" href="components/core-icons/core-icons.html">
  <link rel="import" href="components/core-icon-button/core-icon-button.html">
  <link rel="import" href="components/paper-icon-button/paper-icon-button.html">
</head>
<body>

  <polymer-element name="x-test">
    <template>
      <content select=".menuButton" on-tap="{{tapHandler}}">
        <core-icon-button icon="menu"></core-icon-button>
      </content>
    </template>
    <script>
      Polymer({
        tapHandler: function() {
          console.log('tapped!!!');
        }
      })
    </script>
  </polymer-element>

  <x-test>
    <paper-icon-button class="menuButton" icon="menu"></paper-icon-button>
  </x-test>

</body>
</html>

karma config is broken

grunt test and grunt test-buildbot are failing. It seems like the karma config is incorrect.

All involved pointers should be included in the event

Copied from googlearchive/PointerGestures#38

@joelrich

I want to register a hold and a pinch handler for the same element. However, the hold event should not be processed if the user actually wants to resize the element by pinching. Therefore, it would be very useful to be able to query all the target pointers (similar to TouchEvent.targetTouches) from the hold event to ignore it if more than one finger is currently on the target element.

To be more general, I think most of the events should include properties similar to touches, targetTouches and changedTouches. This makes even more sense for events like pinch and rotate where always multiple pointers are involved.

Fullscreen on tap

It seems like there's a security feature that only allows requesting fullscreen on a click-event.

This, combined with the on-tap implementation makes the following code not work:

<paper-icon-button id="fullscreenButton" icon="fullscreen" on-tap="{{ toggleFullscreen }}"></paper-icon-button>

But instead, this (on-click) works for both desktop and mobile (chrome):

<paper-icon-button id="fullscreenButton" icon="fullscreen" on-click="{{ toggleFullscreen }}"></paper-icon-button>

Is is possible to make on-tap able to trigger a secure enter fullscreen request?

Polyfill setCapture

API: https://developer.mozilla.org/en-US/docs/Web/API/Element.setCapture
Fixes the use case of googlearchive/core-splitter#5

Generate track event with other mouse buttons.

Currently I am only getting a track event if the primary mouse button (left button in my case) is being held while dragging. It would be nice to have track events triggered with the other buttons. I am trying to implement a middle button drag to pan a view. Currently I am having to patch this with a mousedown event, and prevent it if a track event has already occurred.

FYI:
Chrome Version 38.0.2125.77 beta (64-bit)
Polymer Version 0.4.1

pinch should have a start and end event

Copy of googlearchive/PointerGestures#19

MultiTouch limitations

Hi,

I had a look at hold.js and it looks to me that there are 2 limitations with the current impl when used on a multitouch device:

parallel "hold" events are not possible if one of the users hasn't released the pointer.
Just the first touch point can trigger the hold (isPrimary)

seen here: https://github.com/Polymer/polymer-gestures/blob/master/src/hold.js#L86-L87

Is that a desirable behavior? Since this is already a rewrite shouldn't it be ready to support multitouch devices? I see similar limitations for track and tap.

Thanks,
Damien

track stops working after right-mouse click

Using polymer-gestures#master:

Run the sample: polymer-gestures/samples/simple/index.html
drag your mouse and you will see track events are logged
right-mouse click on the page
track no longer works

Error in iOS emulation mode in Chrome

When emulating any iOS device in Chrome, I get this error:

Uncaught TypeError: Cannot read property 'addEventListener' of null
    platform-events.js:35(anonymous function)
    platform-events.js:35(anonymous function)

Here is the relevant portion of the code:

  if (isSafari) {
      // This line throws the exception
      document.body.addEventListener('touchstart', function(){});
  }

I'm guessing this is a bug in Chrome rather than Polymer, but I decided to report it here since the issue did not occur in previous polymer versions (e.g. v0.3.2).

When used with the ShadowDOM polyfill, the trackend event's related target is not wrapped

An event handler for trackend will get an event.related target that's not wrapped.

Touch gestures on touchpad in Chrome 36+ (SVG only)

As described in this topic:
http://stackoverflow.com/questions/25034964/polymer-svg-touch-events-not-working-in-chrome-36-touch-devices

In few words, touch gestures do not work with SVG elements. In compare to a normal HTML element there is no action triggered on trackstart etc, whereas click, tap seem to work fine. Chrome 36 and Chrome Beta 37 are affected.

down/up events fire twice for a single tap on Chrome on Android

Run the test on Chrome Stable on Android: http://jsbin.com/cozohewokede/1/edit
Scroll down the page to see the red box.
Tap on the red box.
In the console you will see 2 down/up events.
downAction
upAction
downAction
upAction

change hold delay

With PointerGestures I monkeypatched a config for HOLD_DELAY and other options googlearchive/PointerGestures#17 ... would be nice if those were exposed options here.

PolymerGestures.dispatcher.gestures.forEach( function (gesture) {
  // hold
  if (gesture.HOLD_DELAY) {
    gesture.HOLD_DELAY = 500;
  }
  // track
  if (gesture.WIGGLE_THRESHOLD) {
    gesture.WIGGLE_THRESHOLD = 8;
  }
});

Add README.md

With basic info:

difference with PolymerGestures;
how to install ( filled example from http://www.polymer-project.org/resources/tooling-strategy.html#building-individual-polyfills);
contribution info;
building info;
examples.

I can start making readme ;)

Touch events broken with ShadowDOM Polyfill

Regression introduced in 6379ad4

Tap fires for right-mouse clicks

This happens to bug me because it makes "inspect element" not work for tappable things, but I suspect it might be problematic for other reasons. This may be expected behavior, but I'd be interested in hearing what the proper way to handle this from the application side is if indeed it's intended.

preventDefault in down doesn't work as expected

see jsbin here:
http://jsbin.com/disifote/1/edit

and under ShadowDOM polyfill I got error similar to #18

Error when trying to mix Polymer controls with standard html 5 inputs

My tech stack is Appgyver Steroids app with Ionic. I'm pulling in the paper elements cuz I like them. BUT not all controls are there, like a date picker. When I put in a standard date input (just html5) when I click it I get an error in polymer. Is there any way I can put a catch in there so it's just ignored? I'd like to be able to co-mingle paper components and just standard html5.

my input:

Date

the error:
[Error] UNSPECIFIED_EVENT_TYPE_ERR: DOM Events Exception 0: The Event's type was not specified by initializing the event before the method was called.
dispatchEvent ([native code], line 0)
dispatchEvent (platform.js, line 13)
dispatchEvent (polymer.js, line 11)
fireEvent (polymer.js, line 11)
up (polymer.js, line 11)
up (polymer.js, line 11)
processTouches (polymer.js, line 11)
touchend (polymer.js, line 11)
(anonymous function) ([native code], line 0)
eventHandler (polymer.js, line 11)
(anonymous function) ([native code], line 0)
s (platform.js, line 12)
r (platform.js, line 12)
o (platform.js, line 12)
m (platform.js, line 12)

NOTE that I get this error when I attempt to use any form element in same page where i've loaded your platform.js and use paper components.

Prevent "ghost click" phenonenoms does not work in Chrome for iOS

I checked it on iOS8, and it seems prevent default is not enough. I am using invisible div layer shown for 350ms after tap, and it blocks ghost click. Maybe polymer-gestures should use similar technique.

Touch same position is detected correctly, but form field shown under tap position still got the click therefore focus.

polymer-gestures on bower

It's possible to have min version somewhere available for Bower soon? Can I help somehow?

eventFactory.js creates 'Event' object

This is more of an enhancement request:

eventFactory.js creates an Event object. This prevents me from doing type recognition in Dart and doesn't allow Dart users access to custom properties that emulate MouseEvent. It would be preferable to use a CustomEvent, even if it meant doubling up on properties (i.e. putting them in the detail object AND the event)

method not found error in IE11.

https://github.com/Polymer/polymer-gestures/blob/master/src/targetfind.js#L104

Happened an error here, b.contains is undefined.
I got situation, a is a wrapper of SVGPathElement and b is SVGSVGElement (not wrapper).

Only track mousemove events when the mouse button is down

Mouse move on any page with polymer on it increases memory over time

Open the devtools timeline on: http://www.polymer-project.org/docs/elements/ (or any page with polymer on it)
Move the mouse around on the page over a period of time

Memory increases as the mouse continues to move. Presumably this is from polymer-gestures attaching a mousemove listener to the document?

@azakus are there any options here?

PolymerGestures.addEventListener needs to support capture

Since this is an addEventListener replacement, it must support the same arguments and capabilities. It's currently missing an argument to control capture.

disable selection while dragging

Having text become selected while dragging is unwanted behavior. We should have this built into the tracking gesture. Some info here: googlearchive/core-splitter#3

Track event not working on html5 canvas

Hi,

I'm trying to detect track event on html5 canvas under chrome desktop Version 37.0.2062.120 (64-bit).
I have up and down events but I never have track event.

Work around safari crasher

As reported by @MaKleSoft in https://groups.google.com/d/msg/polymer-dev/YE0U38xqXig/QXDFdEjFAIIJ, there is currently a crasher in Safari related to taps and templating.

Reported as https://bugs.webkit.org/show_bug.cgi?id=136506

documentation: PolymerGestures.addEventListener(node, eventname, handler, capture);

I was relying on polymer-gestures to make gesture events on various svg children of my custom element. Did something change there?

Edit: It doesn't work on the child elements on mobile either.

Edit: It was just an issue of the api changing from

node.addEventListener(eventname, handler, capture);

PolymerGestures.addEventListener(node, eventname, handler, capture);

Missing clientX and clientY for tap event.

Polymer.addEventListener can fail under SD polyfill

See, for example:

http://jsbin.com/hudozudodido/1/edit

I think we can just wrap the node passed in.

Tap is not accurate

2 things are not considered in the current tap implementation:

pointer is moving around on the target
pointer is down for a long time

imho the tap implementation should have a time limit (< sth between 200 and 500ms) which should fix both. Optionally a max movement could be added though I think this would just impact perf while its value is very low if a time limit is in place (= no time to move around anyways)

Use per-node recognizer lists

This will reduce the number of extra events generated.

Plan:

Put a list of gestures on node
Mark events with what gestures they will generate
If an event is handled at node and did not generate one of node's gestures, generate gesture and mark event

<!doctype html>
<html>
<head>
  <script src="components/platform/platform.js"></script>
  <link rel="import" href="components/polymer/polymer.html">

</head>
<body>

  <polymer-element name="x-test">
    <template>
      <style>
        :host {
          display: block;
        }
      </style>
      <button on-tap="{{tapHandler}}">Tap Me!</button>
    </template>
    <script>
      Polymer('x-test', {
        tapHandler: function() {
          console.log('tapped!!!');
        }
      });
    </script>
  </polymer-element>

  <x-test></x-test>

</body>
</html>

Pinch should have a scale delta

Ported from googlearchive/PointerGestures#20