From a2dcaf13cc4f0680de4fbb1e1fc8e37107c2c595 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Thu, 12 Jun 2014 10:49:07 -0500 Subject: [PATCH] feat(gestures): added gesture directives Closes #829 --- .../templates/api_menu_version.template.html | 75 +++++ js/angular/directive/gesture.js | 268 ++++++++++++++++++ test/html/gesture.html | 99 +++++-- 3 files changed, 425 insertions(+), 17 deletions(-) create mode 100644 js/angular/directive/gesture.js diff --git a/config/docs/templates/api_menu_version.template.html b/config/docs/templates/api_menu_version.template.html index cd40e3756a..214c8f3600 100644 --- a/config/docs/templates/api_menu_version.template.html +++ b/config/docs/templates/api_menu_version.template.html @@ -378,6 +378,81 @@ + +
  • + + Events + + +
    • + +
  • diff --git a/js/angular/directive/gesture.js b/js/angular/directive/gesture.js new file mode 100644 index 0000000000..b7eadf0d3d --- /dev/null +++ b/js/angular/directive/gesture.js @@ -0,0 +1,268 @@ + + +IonicModule + +/** + * @ngdoc directive + * @name onHold + * @module ionic + * @restrict A + * + * @description + * Touch stays at the same location for 500ms. + * + * @usage + * ```html + * + * ``` + */ + .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 + * + * ``` + */ + .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 + * + * ``` + */ + .directive('onTouch', gestureDirective('onTouch')) + + +/** + * @ngdoc directive + * @name onRelease + * @module ionic + * @restrict A + * + * @description + * Called when the user ends a touch. + * + * @usage + * ```html + * + * ``` + */ + .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 + * + * ``` + */ + .directive('onDrag', gestureDirective('onDrag')) + + +/** + * @ngdoc directive + * @name onDragUp + * @module ionic + * @restrict A + * + * @description + * Called when the element is dragged up. + * + * @usage + * ```html + * + * ``` + */ + .directive('onDragUp', gestureDirective('onDragUp')) + + +/** + * @ngdoc directive + * @name onDragRight + * @module ionic + * @restrict A + * + * @description + * Called when the element is dragged to the right. + * + * @usage + * ```html + * + * ``` + */ + .directive('onDragRight', gestureDirective('onDragRight')) + + +/** + * @ngdoc directive + * @name onDragDown + * @module ionic + * @restrict A + * + * @description + * Called when the element is dragged down. + * + * @usage + * ```html + * + * ``` + */ + .directive('onDragDown', gestureDirective('onDragDown')) + + +/** + * @ngdoc directive + * @name onDragLeft + * @module ionic + * @restrict A + * + * @description + * Called when the element is dragged to the left. + * + * @usage + * ```html + * + * ``` + */ + .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 + * + * ``` + */ + .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 + * + * ``` + */ + .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 + * + * ``` + */ + .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 + * + * ``` + */ + .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 + * + * ``` + */ + .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); + }); + + } + }; + }]; +} diff --git a/test/html/gesture.html b/test/html/gesture.html index 2ddf9b47a9..7cf926f6d6 100644 --- a/test/html/gesture.html +++ b/test/html/gesture.html @@ -2,7 +2,7 @@ - Nav Bars + Gestures @@ -10,44 +10,96 @@ +

    + + + + + + + + + + + +

    + +
    +
    + Swipe (any direction) +
    +
    + Swipe Left +
    +
    + Swipe Right +
    +
    + +
    + Swipe Down +
    + +
    + Swipe Up +
    +