mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-13 18:32:41 +01:00
6b5204dca9
Summary: Ref T2700. Allow JS to listen for swipes on devices. There are a bunch of tricky cases here and I probably didn't get them all totally right, but this interaction broadly looks like this: - We implement gesture recognition for the mouse in device modes (narrow browser), and for touch events from an actual device. - The sigil `touchable` indicates that a node wants to react to touch events. - When the user touches a `touchable` node, we start listening for moves. They might be tapping/clicking (in which case we don't care), but they might also be gesturing. - Once the user moves their finger/pointer far enough away from the tap origin, we recognize it as a gesture. I hardcoded this at 20px; I wasn't able to find any "official" Apple value, but 20px seems like a common default. - At this point, we look at where their finger has moved. - If they moved it mostly up/down, we interpret the gesture as "scroll" and just stop listening. The device does its own thing. - However, if they moved it mostly left/right, we interpret it as a "swipe". We start killing the moves so the device doesn't scroll. - Once we've recognized that a gesture is underway, we send a "gesture.swipe.start" event and then "gesture.swipe.move" events for every move. - When the user ends the gesture, we send "gesture.swipe.end". - If the user cancels the gesture (currently, only by tapping with a second finger), we send "gesture.swipe.cancel". - Gesture events have raw position data and some convenience fields. Test Plan: Wrote UI example and used it from the Desktop, iPhone simulator, and a real iphone. - The code always seems to get "scroll" vs "swipe" correct (i.e., consistent with my intentions). - The threshold feels pretty good to me. - Tapping with a second finger cancels the action. Reviewers: chad, btrahan Reviewed By: chad CC: aran Maniphest Tasks: T2700 Differential Revision: https://secure.phabricator.com/D5308
35 lines
788 B
PHP
35 lines
788 B
PHP
<?php
|
|
|
|
final class PhabricatorGestureExample extends PhabricatorUIExample {
|
|
|
|
public function getName() {
|
|
return 'Gestures';
|
|
}
|
|
|
|
public function getDescription() {
|
|
return hsprintf(
|
|
'Use <tt>touchable</tt> to listen for gesture events. Note that you '.
|
|
'must be in device mode for this to work (you can narrow your browser '.
|
|
'window if you are on a desktop).');
|
|
}
|
|
|
|
public function renderExample() {
|
|
|
|
$id = celerity_generate_unique_node_id();
|
|
|
|
Javelin::initBehavior(
|
|
'phabricator-gesture-example',
|
|
array(
|
|
'rootID' => $id,
|
|
));
|
|
|
|
return javelin_tag(
|
|
'div',
|
|
array(
|
|
'sigil' => 'touchable',
|
|
'id' => $id,
|
|
'style' => 'width: 320px; height: 240px; margin: auto;',
|
|
),
|
|
'');
|
|
}
|
|
}
|