swipe.js 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. /*!
  2. * AngularJS Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v1.1.8-master-aba7b2b
  6. */
  7. (function( window, angular, undefined ){
  8. "use strict";
  9. /**
  10. * @ngdoc module
  11. * @name material.components.swipe
  12. * @description Swipe module!
  13. */
  14. /**
  15. * @ngdoc directive
  16. * @module material.components.swipe
  17. * @name mdSwipeLeft
  18. *
  19. * @restrict A
  20. *
  21. * @description
  22. * The md-swipe-left directive allows you to specify custom behavior when an element is swiped
  23. * left.
  24. *
  25. * ### Notes
  26. * - The `$event.currentTarget` of the swiped element will be `null`, but you can get a
  27. * reference to the element that actually holds the `md-swipe-left` directive by using `$target.current`
  28. *
  29. * > You can see this in action on the <a ng-href="demo/swipe">demo page</a> (Look at the Developer Tools console while swiping).
  30. *
  31. * @usage
  32. * <hljs lang="html">
  33. * <div md-swipe-left="onSwipeLeft($event, $target)">Swipe me left!</div>
  34. * </hljs>
  35. */
  36. /**
  37. * @ngdoc directive
  38. * @module material.components.swipe
  39. * @name mdSwipeRight
  40. *
  41. * @restrict A
  42. *
  43. * @description
  44. * The md-swipe-right directive allows you to specify custom behavior when an element is swiped
  45. * right.
  46. *
  47. * ### Notes
  48. * - The `$event.currentTarget` of the swiped element will be `null`, but you can get a
  49. * reference to the element that actually holds the `md-swipe-right` directive by using `$target.current`
  50. *
  51. * > You can see this in action on the <a ng-href="demo/swipe">demo page</a> (Look at the Developer Tools console while swiping).
  52. *
  53. * @usage
  54. * <hljs lang="html">
  55. * <div md-swipe-right="onSwipeRight($event, $target)">Swipe me right!</div>
  56. * </hljs>
  57. */
  58. /**
  59. * @ngdoc directive
  60. * @module material.components.swipe
  61. * @name mdSwipeUp
  62. *
  63. * @restrict A
  64. *
  65. * @description
  66. * The md-swipe-up directive allows you to specify custom behavior when an element is swiped
  67. * up.
  68. *
  69. * ### Notes
  70. * - The `$event.currentTarget` of the swiped element will be `null`, but you can get a
  71. * reference to the element that actually holds the `md-swipe-up` directive by using `$target.current`
  72. *
  73. * > You can see this in action on the <a ng-href="demo/swipe">demo page</a> (Look at the Developer Tools console while swiping).
  74. *
  75. * @usage
  76. * <hljs lang="html">
  77. * <div md-swipe-up="onSwipeUp($event, $target)">Swipe me up!</div>
  78. * </hljs>
  79. */
  80. /**
  81. * @ngdoc directive
  82. * @module material.components.swipe
  83. * @name mdSwipeDown
  84. *
  85. * @restrict A
  86. *
  87. * @description
  88. * The md-swipe-down directive allows you to specify custom behavior when an element is swiped
  89. * down.
  90. *
  91. * ### Notes
  92. * - The `$event.currentTarget` of the swiped element will be `null`, but you can get a
  93. * reference to the element that actually holds the `md-swipe-down` directive by using `$target.current`
  94. *
  95. * > You can see this in action on the <a ng-href="demo/swipe">demo page</a> (Look at the Developer Tools console while swiping).
  96. *
  97. * @usage
  98. * <hljs lang="html">
  99. * <div md-swipe-down="onSwipDown($event, $target)">Swipe me down!</div>
  100. * </hljs>
  101. */
  102. angular.module('material.components.swipe', ['material.core'])
  103. .directive('mdSwipeLeft', getDirective('SwipeLeft'))
  104. .directive('mdSwipeRight', getDirective('SwipeRight'))
  105. .directive('mdSwipeUp', getDirective('SwipeUp'))
  106. .directive('mdSwipeDown', getDirective('SwipeDown'));
  107. function getDirective(name) {
  108. DirectiveFactory['$inject'] = ["$parse"];
  109. var directiveName = 'md' + name;
  110. var eventName = '$md.' + name.toLowerCase();
  111. return DirectiveFactory;
  112. /* ngInject */
  113. function DirectiveFactory($parse) {
  114. return { restrict: 'A', link: postLink };
  115. function postLink(scope, element, attr) {
  116. var fn = $parse(attr[directiveName]);
  117. element.on(eventName, function(ev) {
  118. var currentTarget = ev.currentTarget;
  119. scope.$applyAsync(function() { fn(scope, { $event: ev, $target: { current: currentTarget } }); });
  120. });
  121. }
  122. }
  123. }
  124. })(window, window.angular);