javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-06 22:29:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

Added working gesture support

Browse Source
This commit is contained in:
Max Lynch
2013-08-27 16:34:17 -05:00
parent 1b15494267
commit 1d10046401
4 changed files with 1312 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
example/events.html
View File

@ -16,8 +16,8 @@
</head> </head>
<body> <body>
<div class="content content-padded"> <div class="content content-padded">
<a href="#" class="button button-success">Tap me!</a> <a href="#" id="tap-button" class="button button-success">Tap me!</a>
<a href="#" class="button button-success">Swipe me!</a> <a href="#" id="swipe-button" class="button button-success">Swipe me!</a>
<div id="event-log"></div> <div id="event-log"></div>
</div> </div>
<script src="../../js/framework/framework-utils.js"></script> <script src="../../js/framework/framework-utils.js"></script>

44
example/events.js
View File

@ -5,35 +5,47 @@ var logEvent = function(data) {
console.log(data.event); console.log(data.event);
e.appendChild(l); e.appendChild(l);
} }
window.FM.on('tap', function(e) {
var tb = document.getElementById('tap-button');
var sb = document.getElementById('swipe-button');
window.FM.onGesture('tap', function(e) {
console.log('GOT TAP', e); console.log('GOT TAP', e);
logEvent({ logEvent({
type: 'tap', type: 'tap',
event: e event: e
}); });
}); }, tb);
window.FM.on('touch', function(e) { window.FM.onGesture('touch', function(e) {
console.log('GOT TOUCH', e); console.log('GOT TOUCH', e);
logEvent({ logEvent({
type: 'touch', type: 'touch',
event: e event: e
}); });
}); }, tb);
window.FM.on('release', function(e) {
window.FM.onGesture('tap', function(e) {
console.log('GOT TAP', e);
logEvent({
type: 'tap',
event: e
});
}, tb);
window.FM.onGesture('release', function(e) {
console.log('GOT RELEASE', e); console.log('GOT RELEASE', e);
logEvent({ logEvent({
type: 'release', type: 'release',
event: e event: e
}); });
}); }, tb);
window.FM.on('swipe', function(e) { window.FM.onGesture('swipe', function(e) {
console.log('GOT SWIPE', e); console.log('GOT SWIPE', e);
logEvent({ logEvent({
type: 'swipe', type: 'swipe',
event: e event: e
}); });
}); }, sb);
window.FM.on('swiperight', function(e) { window.FM.onGesture('swiperight', function(e) {
console.log('GOT SWIPE RIGHT', e); console.log('GOT SWIPE RIGHT', e);
logEvent({ logEvent({
type: 'swiperight', type: 'swiperight',
@ -41,8 +53,8 @@ window.FM.on('swiperight', function(e) {
}); });
e.target.classList.add('swiperight'); e.target.classList.add('swiperight');
}); }, sb);
window.FM.on('swipeleft', function(e) { window.FM.onGesture('swipeleft', function(e) {
console.log('GOT SWIPE LEFT', e); console.log('GOT SWIPE LEFT', e);
logEvent({ logEvent({
type: 'swipeleft', type: 'swipeleft',
@ -50,18 +62,18 @@ window.FM.on('swipeleft', function(e) {
}); });
e.target.classList.add('swipeleft'); e.target.classList.add('swipeleft');
}); }, sb);
window.FM.on('swipeup', function(e) { window.FM.onGesture('swipeup', function(e) {
console.log('GOT SWIPE UP', e); console.log('GOT SWIPE UP', e);
logEvent({ logEvent({
type: 'swipeup', type: 'swipeup',
event: e event: e
}); });
}); }, sb);
window.FM.on('swipedown', function(e) { window.FM.onGesture('swipedown', function(e) {
console.log('GOT SWIPE DOWN', e); console.log('GOT SWIPE DOWN', e);
logEvent({ logEvent({
type: 'swipedown', type: 'swipedown',
event: e event: e
}); });
}); }, sb);

74
js/framework/framework-events.js
View File

@ -13,75 +13,36 @@
(function(window, document, framework) { (function(window, document, framework) {
framework.EventController = { framework.EventController = {
// A map of event types that we virtually detect and emit // Trigger a new event
VIRTUAL_EVENT_TYPES: ['tap', 'swipeleft', 'swiperight'],
/**
* Trigger a new event.
*/
trigger: function(eventType, data) { trigger: function(eventType, data) {
// TODO: Do we need to use the old-school createEvent stuff? // TODO: Do we need to use the old-school createEvent stuff?
var event = new CustomEvent(eventType, data); var event = new CustomEvent(eventType, data);
// Make sure to trigger the event on the given target, or dispatch it from
// the window if we don't have an event target
data.target && data.target.dispatchEvent(event) || window.dispatchEvent(event); data.target && data.target.dispatchEvent(event) || window.dispatchEvent(event);
}, },
/** // Bind an event
* Shorthand for binding a new event listener to the given
* event type.
*/
on: function(type, callback, element) { on: function(type, callback, element) {
var i;
var e = element || window; var e = element || window;
/*
var virtualTypes = framework.EventController.VIRTUAL_EVENT_TYPES;
for(i = 0; i < virtualTypes.length; i++) {
if(type.toLowerCase() == virtualTypes[i]) {
// TODO: listen for virtual event
return;
}
}
*/
// Native listener
e.addEventListener(type, callback); e.addEventListener(type, callback);
}, },
off: function(type, callback, element) {
/** element.removeEventListener(type, callback);
* Process a touchstart event.
*/
handleTouchStart: function(e) {
console.log("EVENT: touchstart", e);
framework.GestureController.startGesture(e);
}, },
/** // Register for a new gesture event on the given element
* Process a touchmove event. onGesture: function(type, callback, element) {
*/ var gesture = new framework.Gesture(element);
handleTouchMove: function(e) { gesture.on(type, callback);
console.log("EVENT: touchmove", e); return gesture;
framework.GestureController.detectGesture(e);
}, },
/** // Unregister a previous gesture event
* Process a touchend event. offGesture: function(gesture, type, callback) {
*/ gesture.off(type, callback);
handleTouchEnd: function(e) {
console.log("EVENT: touchend", e);
framework.GestureController.detectGesture(e);
},
/**
* Process a touchcancel event.
*/
handleTouchCancel: function(e) {
this._hasMoved = false;
this._touchStartX = null;
this._touchStartY = null;
}, },
// With a click event, we need to check the target // With a click event, we need to check the target
@ -122,13 +83,12 @@
// Map some convenient top-level functions for event handling // Map some convenient top-level functions for event handling
framework.on = framework.EventController.on; framework.on = framework.EventController.on;
framework.off = framework.EventController.off;
framework.trigger = framework.EventController.trigger; framework.trigger = framework.EventController.trigger;
framework.onGesture = framework.EventController.onGesture;
framework.offGesture = framework.EventController.offGesture;
// Set up various listeners // Set up various listeners
window.addEventListener('touchstart', framework.EventController.handleTouchStart);
window.addEventListener('touchmove', framework.EventController.handleTouchMove);
window.addEventListener('touchcancel', framework.EventController.handleTouchCancel);
window.addEventListener('touchend', framework.EventController.handleTouchEnd);
window.addEventListener('click', framework.EventController.handleClick); window.addEventListener('click', framework.EventController.handleClick);
window.addEventListener('popstate', framework.EventController.handlePopState); window.addEventListener('popstate', framework.EventController.handlePopState);

1520
js/framework/framework-gestures.js
View File

File diff suppressed because it is too large Load Diff