javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(gestures): added gesture directives

Browse Source 
Closes #829
This commit is contained in:
Adam Bradley
2014-06-12 10:49:07 -05:00
parent 90f531a759
commit a2dcaf13cc
3 changed files with 425 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
config/docs/templates/api_menu_version.template.html vendored
View File

@@ -378,6 +378,81 @@
</li>
<!-- Events -->
<li class="menu-section">
<a href="#" class="api-section">
Events
</a>
<ul>
<li>
<a href="{{ page.versionHref }}/api/directive/onHold/">
on-hold
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/onTap/">
on-tap
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/onTouch/">
on-touch
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/onRelease/">
on-release
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/onDrag/">
on-drag
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/onDragUp/">
on-drag-up
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/onDragRight/">
on-drag-right
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/onDragDown/">
on-drag-down
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/onDragLeft/">
on-drag-left
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/onSwipe/">
on-swipe
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/onSwipeUp/">
on-swipe-up
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/onSwipeRight/">
on-swipe-right
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/onSwipeDown/">
on-swipe-down
</a>
</li>
</ul>
</li>
<!-- Gesture -->
<li class="menu-section">
<a href="#" class="api-section">

268
js/angular/directive/gesture.js vendored Normal file
View File

@@ -0,0 +1,268 @@
IonicModule
/**
* @ngdoc directive
* @name onHold
* @module ionic
* @restrict A
*
* @description
* Touch stays at the same location for 500ms.
*
* @usage
* ```html
* <button on-hold="onHold()" class="button">Test</button>
* ```
*/
.directive('onHold', gestureDirective('onHold'))
/**
* @ngdoc directive
* @name onTap
* @module ionic
* @restrict A
*
* @description
* Quick touch at a location. If the duration of the touch goes
* longer than 250ms it is no longer a tap gesture.
*
* @usage
* ```html
* <button on-tap="onTap()" class="button">Test</button>
* ```
*/
.directive('onTap', gestureDirective('onTap'))
/**
* @ngdoc directive
* @name onTouch
* @module ionic
* @restrict A
*
* @description
* Called immediately when the user first begins a touch. This
* gesture does not wait for a touchend/mouseup.
*
* @usage
* ```html
* <button on-touch="onTouch()" class="button">Test</button>
* ```
*/
.directive('onTouch', gestureDirective('onTouch'))
/**
* @ngdoc directive
* @name onRelease
* @module ionic
* @restrict A
*
* @description
* Called when the user ends a touch.
*
* @usage
* ```html
* <button on-release="onRelease()" class="button">Test</button>
* ```
*/
.directive('onRelease', gestureDirective('onRelease'))
/**
* @ngdoc directive
* @name onDrag
* @module ionic
* @restrict A
*
* @description
* Move with one touch around on the page. Blocking the scrolling when
* moving left and right is a good practice. When all the drag events are
* blocking you disable scrolling on that area.
*
* @usage
* ```html
* <button on-drag="onDrag()" class="button">Test</button>
* ```
*/
.directive('onDrag', gestureDirective('onDrag'))
/**
* @ngdoc directive
* @name onDragUp
* @module ionic
* @restrict A
*
* @description
* Called when the element is dragged up.
*
* @usage
* ```html
* <button on-drag-up="onDragUp()" class="button">Test</button>
* ```
*/
.directive('onDragUp', gestureDirective('onDragUp'))
/**
* @ngdoc directive
* @name onDragRight
* @module ionic
* @restrict A
*
* @description
* Called when the element is dragged to the right.
*
* @usage
* ```html
* <button on-drag-right="onDragRight()" class="button">Test</button>
* ```
*/
.directive('onDragRight', gestureDirective('onDragRight'))
/**
* @ngdoc directive
* @name onDragDown
* @module ionic
* @restrict A
*
* @description
* Called when the element is dragged down.
*
* @usage
* ```html
* <button on-drag-down="onDragDown()" class="button">Test</button>
* ```
*/
.directive('onDragDown', gestureDirective('onDragDown'))
/**
* @ngdoc directive
* @name onDragLeft
* @module ionic
* @restrict A
*
* @description
* Called when the element is dragged to the left.
*
* @usage
* ```html
* <button on-drag-left="onDragLeft()" class="button">Test</button>
* ```
*/
.directive('onDragLeft', gestureDirective('onDragLeft'))
/**
* @ngdoc directive
* @name onSwipe
* @module ionic
* @restrict A
*
* @description
* Called when a moving touch has a high velocity in any direction.
*
* @usage
* ```html
* <button on-swipe="onSwipe()" class="button">Test</button>
* ```
*/
.directive('onSwipe', gestureDirective('onSwipe'))
/**
* @ngdoc directive
* @name onSwipeUp
* @module ionic
* @restrict A
*
* @description
* Called when a moving touch has a high velocity moving up.
*
* @usage
* ```html
* <button on-swipe-up="onSwipeUp()" class="button">Test</button>
* ```
*/
.directive('onSwipeUp', gestureDirective('onSwipeUp'))
/**
* @ngdoc directive
* @name onSwipeRight
* @module ionic
* @restrict A
*
* @description
* Called when a moving touch has a high velocity moving to the right.
*
* @usage
* ```html
* <button on-swipe-right="onSwipeRight()" class="button">Test</button>
* ```
*/
.directive('onSwipeRight', gestureDirective('onSwipeRight'))
/**
* @ngdoc directive
* @name onSwipeDown
* @module ionic
* @restrict A
*
* @description
* Called when a moving touch has a high velocity moving down.
*
* @usage
* ```html
* <button on-swipe-down="onSwipeDown()" class="button">Test</button>
* ```
*/
.directive('onSwipeDown', gestureDirective('onSwipeDown'))
/**
* @ngdoc directive
* @name onSwipeLeft
* @module ionic
* @restrict A
*
* @description
* Called when a moving touch has a high velocity moving to the left.
*
* @usage
* ```html
* <button on-swipe-left="onSwipeLeft()" class="button">Test</button>
* ```
*/
.directive('onSwipeLeft', gestureDirective('onSwipeLeft'));
function gestureDirective(attrName) {
return ['$ionicGesture', function($ionicGesture) {
return {
restrict: 'A',
link: function($scope, $element, $attr) {
var eventType = attrName.substr(2).toLowerCase();
var listener = function(ev) {
$scope.$apply( $attr[attrName] );
};
var gesture = $ionicGesture.on(eventType, listener, $element);
$scope.$on('$destroy', function() {
$ionicGesture.off(gesture, eventType, listener);
});
}
};
}];
}

99
test/html/gesture.html
View File

@@ -2,7 +2,7 @@
<html ng-app="gestureTest">
<head>
<meta charset="utf-8">
<title>Nav Bars</title>
<title>Gestures</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
@@ -10,44 +10,96 @@
<script src="../../../../dist/js/ionic.bundle.js"></script>
<style>
#box {
position: fixed;
top: 0;
position: absolute;
top: 250px;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 100, 100, 0.5);
overflow: auto;
}
.swipe-vertical {
position: absolute;
background: gray;
width:150px;
height: 400px;
top: 0;
right: 0;
z-index: 99999;
}
.swipe-up {
right: 150px;
background: #ddd;
}
</style>
</head>
<body ng-controller="AppCtrl">
<p>
<button class="button" on-hold="gestureTest('hold')">
Hold
</button>
<button class="button" on-tap="gestureTest('tap')">
Tap
</button>
<button class="button" on-touch="gestureTest('touch')">
Touch
</button>
<button class="button" on-release="gestureTest('release')">
Release
</button>
<button class="button" ng-click="gestureTest('ng-click')">
Click
</button>
<button class="button" on-drag="gestureTest('drag')">
Drag
</button>
</p>
<div class="list">
<div class="item" on-swipe="gestureTest('swipe (any direction)')">
Swipe (any direction)
</div>
<div class="item" on-swipe-left="gestureTest('swipe left')">
Swipe Left
</div>
<div class="item" on-swipe-right="gestureTest('swipe right')">
Swipe Right
</div>
</div>
<div on-swipe-down="gestureTest('swipe down')" class="swipe-vertical">
Swipe Down
</div>
<div on-swipe-up="gestureTest('swipe up')" class="swipe-vertical swipe-up">
Swipe Up
</div>
<div id="box" class="box">
<span id="output"></span>
</div>
<script>
angular.module('gestureTest', ['ionic', 'ngAnimate'])
angular.module('gestureTest', ['ionic'])
.controller('AppCtrl', function($scope) {
$scope.gestureTest = function(data) {
o('gesture directive test', [data])
};
.controller('AppCtrl', function($scope, $compile, $element) {
})
.directive('box', function($ionicGesture) {
return {
restrict: 'C',
link: function($scope, $element, $attr) {
var output = angular.element(document.getElementById('output'));
// Debug output function
var o = function(type, d) {
var p = ['<div>' + type + ' event: '];
for(var i = 0; i < d.length; i++) {
p.push(d[i]);
}
p.push('</div>');
output.append(p.join(', '));
$element[0].scrollTop = $element[0].scrollHeight;
};
var tapFn = function(e) {
o('tap', [e.gesture.touches[0].pageX, e.gesture.touches[0].pageY]);
@@ -90,6 +142,19 @@
}
};
});
var output = document.getElementById('output');
function o(type, d) {
var p = ['<div>' + type + ' event: '];
if(d) {
for(var i = 0; i < d.length; i++) {
p.push(d[i]);
}
}
p.push('</div>');
output.innerHTML = p.join(', ') + output.innerHTML;
}
</script>
</body>
</html>