emberjs-addons / ember-touch Goto Github PK
View Code? Open in Web Editor NEWA lightweight library for building and using touch gestures with Ember Applications
License: MIT License
A lightweight library for building and using touch gestures with Ember Applications
License: MIT License
I'm trying to use ember-touch with the latest master and I'm getting the error
Uncaught TypeError: Cannot call method 'lookup' of undefined
which is coming from:
_createGestureManager: function() {
var eventManager = get(this, 'eventManager');
if (!eventManager) {
var applicationGestureManager = get(this, 'container').lookup('gesture:application');
Can you advise why this doesn't work with the latest Ember API?
Should this project be archived? That will let people view and download the source, but will close things like issues and security alerts.
My first time trying to use ember-touch. I tried to include it in an Emberjs 1.0rc1
<script src="js/libs/jquery-1.9.1.js"></script>
<script src="js/libs/handlebars-1.0.0-rc.3.js"></script>
<script src="js/libs/ember-1.0.0-rc.1.js"></script>
<script src="js/libs/ember-touch-latest.js"></script>
I get the following error in the console:
TypeError: Application.registerInjection is not a function
[Break On This Error]
injection: function(app, stateManager, property) {
Am I doing something wrong or is this a regression issue?
I slightly modified the sample code from http://ember-touch-website.herokuapp.com/#/swipeAndPress:
App.SampleView = Ember.View.extend({
swipeOptions: {
direction: Em.OneGestureDirection.Left | Em.OneGestureDirection.Right,
cancelPeriod: 100,
swipeThreshold: 100
},
touchMove: function(event) {
// Do not prevent event bubbling since we need native vertical scrolling
//event.preventDefault();
},
swipeEnd: function(recognizer, evt) {
var direction = recognizer.get('swipeDirection');
if (direction === Em.OneGestureDirection.Right) {
alert('Swipe Right');
} else if (direction === Em.OneGestureDirection.Left) {
alert('Swipe Left');
}
},
});
The code acts as expected on many browsers / mobile platforms (Safari + iPhone, Firefox + Android, Android Internet Browser + Android). It recognizes the horizontal swipes while vertical scrolling is properly handled by the browser.
But it doesn't work on Chrome V29 on Android on both my devices (Google Nexus 7 V1 and Samsung Galaxy Nexus).
The only way I found to make ember-touch notice the swipes on Chrome was by preventing the default action in touchMove(). But this breaks vertical scrolling.
Event managers can be nested only one-level deep. SproutCore Touch should allow as many nested gesture recognizers as the user deems necessary.
The YuiDoc of the system and utils packages must be reviewed.
Like Pinch, SproutCore Touch should ship with a 2-finger rotation gesture recognizer that reports a radian and velocity value to the view.
I'm attempting to implement a discrete tapHold event where I look for a touchStart, movement within a threshold, and no touchEnd before a given time threshold. If the time threshold passes, I want to trigger my tapHoldEnd event. Currently, the only nice mechanism to fire the event is by implementing shouldEnd, but that doesn't get called until touchEnd. There should be a mechanism to proactively trigger a discrete event.
It'd be good to be able to more easily access the underlying touch event (or touches array) in a tap gesture recognizer so that a developer can more easily retrieve things like the pageX / pageY coordinates.
Right now it requires:
recognizer.getPath("touches.touches")[0].pageX
I don't know how/if this should be applied globally to all recognizers or only specific ones, so I'll let you decide the best approach. :)
I'm attempting to use the following css properties on a childview:
overflow-y: auto !important; -webkit-overflow-scrolling: touch;
If the parentView has a function for touchHoldEnd, the above property will not work on child views. This is even the case when I used a gestureDelegate to disable the touchHoldEnd at a time when the childview with scrolling is present. I can tell that gestureDelegate is functioning because the touchHoldEnd function does not get called on the parentView when it's disabled. However, only by completely removing the touchHoldEnd method from the parent can I get the touch scrolling functionality on the child view.
The story is long, but just to cut it short, I was is search of a plugin to include gesture events in my ember application that I found multiple tutorials pointing to this library. so I came here and unfortunately I saw this marked as "unmaintained". and only a single hint that functionality is moved to hammerJS.
as obviously the hammerJS does not include the out of the box integration with emberjs, it would be nice to show a replaceable solution to this lib.
With ember master now dealing with return values from event handlers, ember-touch breaks in a way that is difficult to work around.
With two potentially overlapping views, both of which handle tapEnd for instance, the current implementation will trigger on both views.
It seems to me that this can be fixed in one of two ways.
or
The 2nd approach would put control over calling preventDefault() in the hands of the view handling the event.
Either approach would work (I've implemented both and am currently using the 2nd approach with a fork of ember-touch)
Thoughts on a preferred way to handle this?
I've been looking around how to trigger {{action}}
with both click
and tapEnd
to avoid the infamous 300ms onClick delay. The discussion at emberjs/ember.js#586 suggests using:
customEvents: { touchend: "click" }
Unfortunately, that unintentionally triggers buttons at the end of swipes, pinches, scrolls, etc.
So the question is, is there a way to detect an un-handled tapEnd
event and re-trigger it as a click
? Would this be a good feature to add to ember-touch?
1-finger gestures that map to the mouse should work out-of-the-box.
I have a collection which has a itemViewClass. The itemViewClass has a touch configuration. Childs of the itemViewClass do not pass the touch events down to it's parent. In the code sample clicking on the string which is shown in the span does not trigger a touch event in A.someItemView, clicking besides the content of the span does work (e.g. clicking on the itemViewClass).
{{#collection SC.CollectionView contentBinding="content" tagName="ul" itemTagName="li" itemViewClass="A.someItemView"}}
<span>{{content.propertyA}}</span>
{{/collection}}
A.someItemView = SC.View.extend({
mouseDown: function(evt) {
this.tapStart(evt);
},
mouseUp: function(evt) {
this.tapEnd(evt);
},
tapStart: function(gesture, args) {
this.set('selected', true);
},
tapCancel: function(gesture) {
this.set('selected', false);
},
tapEnd: function(gesture, args) {
this.set('selected', false);
}
});
It appears that simply creating a GestureDelegate object is not enough for views to be able to find delegates by their name. I had to add the following line to my code to get it to work:
Em.GestureDelegates.add(delegateIjustCreated);
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.