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>
<body>
<div class="content content-padded">
<a href="#" class="button button-success">Tap me!</a>
<a href="#" class="button button-success">Swipe me!</a>
<a href="#" id="tap-button" class="button button-success">Tap me!</a>
<a href="#" id="swipe-button" class="button button-success">Swipe me!</a>
<div id="event-log"></div>
</div>
<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);
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);
logEvent({
type: 'tap',
event: e
});
});
window.FM.on('touch', function(e) {
}, tb);
window.FM.onGesture('touch', function(e) {
console.log('GOT TOUCH', e);
logEvent({
type: 'touch',
event: e
});
});
window.FM.on('release', function(e) {
}, tb);
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);
logEvent({
type: 'release',
event: e
});
});
window.FM.on('swipe', function(e) {
}, tb);
window.FM.onGesture('swipe', function(e) {
console.log('GOT SWIPE', e);
logEvent({
type: 'swipe',
event: e
});
});
window.FM.on('swiperight', function(e) {
}, sb);
window.FM.onGesture('swiperight', function(e) {
console.log('GOT SWIPE RIGHT', e);
logEvent({
type: 'swiperight',
@ -41,8 +53,8 @@ window.FM.on('swiperight', function(e) {
});
e.target.classList.add('swiperight');
});
window.FM.on('swipeleft', function(e) {
}, sb);
window.FM.onGesture('swipeleft', function(e) {
console.log('GOT SWIPE LEFT', e);
logEvent({
type: 'swipeleft',
@ -50,18 +62,18 @@ window.FM.on('swipeleft', function(e) {
});
e.target.classList.add('swipeleft');
});
window.FM.on('swipeup', function(e) {
}, sb);
window.FM.onGesture('swipeup', function(e) {
console.log('GOT SWIPE UP', e);
logEvent({
type: 'swipeup',
event: e
});
});
window.FM.on('swipedown', function(e) {
}, sb);
window.FM.onGesture('swipedown', function(e) {
console.log('GOT SWIPE DOWN', e);
logEvent({
type: 'swipedown',
event: e
});
});
}, sb);

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

@ -13,75 +13,36 @@
(function(window, document, framework) {
framework.EventController = {
// A map of event types that we virtually detect and emit
VIRTUAL_EVENT_TYPES: ['tap', 'swipeleft', 'swiperight'],
/**
* Trigger a new event.
*/
// Trigger a new event
trigger: function(eventType, data) {
// TODO: Do we need to use the old-school createEvent stuff?
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);
},
/**
* Shorthand for binding a new event listener to the given
* event type.
*/
// Bind an event
on: function(type, callback, element) {
var i;
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);
},
/**
* Process a touchstart event.
*/
handleTouchStart: function(e) {
console.log("EVENT: touchstart", e);
framework.GestureController.startGesture(e);
off: function(type, callback, element) {
element.removeEventListener(type, callback);
},
/**
* Process a touchmove event.
*/
handleTouchMove: function(e) {
console.log("EVENT: touchmove", e);
framework.GestureController.detectGesture(e);
// Register for a new gesture event on the given element
onGesture: function(type, callback, element) {
var gesture = new framework.Gesture(element);
gesture.on(type, callback);
return gesture;
},
/**
* Process a touchend event.
*/
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;
// Unregister a previous gesture event
offGesture: function(gesture, type, callback) {
gesture.off(type, callback);
},
// With a click event, we need to check the target
@ -122,13 +83,12 @@
// Map some convenient top-level functions for event handling
framework.on = framework.EventController.on;
framework.off = framework.EventController.off;
framework.trigger = framework.EventController.trigger;
framework.onGesture = framework.EventController.onGesture;
framework.offGesture = framework.EventController.offGesture;
// 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('popstate', framework.EventController.handlePopState);

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

File diff suppressed because it is too large Load Diff