bottomSheet.js 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277
  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v0.11.4
  6. */
  7. (function( window, angular, undefined ){
  8. "use strict";
  9. /**
  10. * @ngdoc module
  11. * @name material.components.bottomSheet
  12. * @description
  13. * BottomSheet
  14. */
  15. angular
  16. .module('material.components.bottomSheet', [
  17. 'material.core',
  18. 'material.components.backdrop'
  19. ])
  20. .directive('mdBottomSheet', MdBottomSheetDirective)
  21. .provider('$mdBottomSheet', MdBottomSheetProvider);
  22. /* ngInject */
  23. function MdBottomSheetDirective($mdBottomSheet) {
  24. return {
  25. restrict: 'E',
  26. link : function postLink(scope, element, attr) {
  27. // When navigation force destroys an interimElement, then
  28. // listen and $destroy() that interim instance...
  29. scope.$on('$destroy', function() {
  30. $mdBottomSheet.destroy();
  31. });
  32. }
  33. };
  34. }
  35. MdBottomSheetDirective.$inject = ["$mdBottomSheet"];
  36. /**
  37. * @ngdoc service
  38. * @name $mdBottomSheet
  39. * @module material.components.bottomSheet
  40. *
  41. * @description
  42. * `$mdBottomSheet` opens a bottom sheet over the app and provides a simple promise API.
  43. *
  44. * ## Restrictions
  45. *
  46. * - The bottom sheet's template must have an outer `<md-bottom-sheet>` element.
  47. * - Add the `md-grid` class to the bottom sheet for a grid layout.
  48. * - Add the `md-list` class to the bottom sheet for a list layout.
  49. *
  50. * @usage
  51. * <hljs lang="html">
  52. * <div ng-controller="MyController">
  53. * <md-button ng-click="openBottomSheet()">
  54. * Open a Bottom Sheet!
  55. * </md-button>
  56. * </div>
  57. * </hljs>
  58. * <hljs lang="js">
  59. * var app = angular.module('app', ['ngMaterial']);
  60. * app.controller('MyController', function($scope, $mdBottomSheet) {
  61. * $scope.openBottomSheet = function() {
  62. * $mdBottomSheet.show({
  63. * template: '<md-bottom-sheet>Hello!</md-bottom-sheet>'
  64. * });
  65. * };
  66. * });
  67. * </hljs>
  68. */
  69. /**
  70. * @ngdoc method
  71. * @name $mdBottomSheet#show
  72. *
  73. * @description
  74. * Show a bottom sheet with the specified options.
  75. *
  76. * @param {object} options An options object, with the following properties:
  77. *
  78. * - `templateUrl` - `{string=}`: The url of an html template file that will
  79. * be used as the content of the bottom sheet. Restrictions: the template must
  80. * have an outer `md-bottom-sheet` element.
  81. * - `template` - `{string=}`: Same as templateUrl, except this is an actual
  82. * template string.
  83. * - `scope` - `{object=}`: the scope to link the template / controller to. If none is specified, it will create a new child scope.
  84. * This scope will be destroyed when the bottom sheet is removed unless `preserveScope` is set to true.
  85. * - `preserveScope` - `{boolean=}`: whether to preserve the scope when the element is removed. Default is false
  86. * - `controller` - `{string=}`: The controller to associate with this bottom sheet.
  87. * - `locals` - `{string=}`: An object containing key/value pairs. The keys will
  88. * be used as names of values to inject into the controller. For example,
  89. * `locals: {three: 3}` would inject `three` into the controller with the value
  90. * of 3.
  91. * - `clickOutsideToClose` - `{boolean=}`: Whether the user can click outside the bottom sheet to
  92. * close it. Default true.
  93. * - `escapeToClose` - `{boolean=}`: Whether the user can press escape to close the bottom sheet.
  94. * Default true.
  95. * - `resolve` - `{object=}`: Similar to locals, except it takes promises as values
  96. * and the bottom sheet will not open until the promises resolve.
  97. * - `controllerAs` - `{string=}`: An alias to assign the controller to on the scope.
  98. * - `parent` - `{element=}`: The element to append the bottom sheet to. The `parent` may be a `function`, `string`,
  99. * `object`, or null. Defaults to appending to the body of the root element (or the root element) of the application.
  100. * e.g. angular.element(document.getElementById('content')) or "#content"
  101. * - `disableParentScroll` - `{boolean=}`: Whether to disable scrolling while the bottom sheet is open.
  102. * Default true.
  103. *
  104. * @returns {promise} A promise that can be resolved with `$mdBottomSheet.hide()` or
  105. * rejected with `$mdBottomSheet.cancel()`.
  106. */
  107. /**
  108. * @ngdoc method
  109. * @name $mdBottomSheet#hide
  110. *
  111. * @description
  112. * Hide the existing bottom sheet and resolve the promise returned from
  113. * `$mdBottomSheet.show()`. This call will close the most recently opened/current bottomsheet (if any).
  114. *
  115. * @param {*=} response An argument for the resolved promise.
  116. *
  117. */
  118. /**
  119. * @ngdoc method
  120. * @name $mdBottomSheet#cancel
  121. *
  122. * @description
  123. * Hide the existing bottom sheet and reject the promise returned from
  124. * `$mdBottomSheet.show()`.
  125. *
  126. * @param {*=} response An argument for the rejected promise.
  127. *
  128. */
  129. function MdBottomSheetProvider($$interimElementProvider) {
  130. // how fast we need to flick down to close the sheet, pixels/ms
  131. var CLOSING_VELOCITY = 0.5;
  132. var PADDING = 80; // same as css
  133. bottomSheetDefaults.$inject = ["$animate", "$mdConstant", "$mdUtil", "$mdTheming", "$mdBottomSheet", "$rootElement", "$mdGesture"];
  134. return $$interimElementProvider('$mdBottomSheet')
  135. .setDefaults({
  136. methods: ['disableParentScroll', 'escapeToClose', 'clickOutsideToClose'],
  137. options: bottomSheetDefaults
  138. });
  139. /* ngInject */
  140. function bottomSheetDefaults($animate, $mdConstant, $mdUtil, $mdTheming, $mdBottomSheet, $rootElement, $mdGesture) {
  141. var backdrop;
  142. return {
  143. themable: true,
  144. onShow: onShow,
  145. onRemove: onRemove,
  146. escapeToClose: true,
  147. clickOutsideToClose: true,
  148. disableParentScroll: true
  149. };
  150. function onShow(scope, element, options, controller) {
  151. element = $mdUtil.extractElementByName(element, 'md-bottom-sheet');
  152. // Add a backdrop that will close on click
  153. backdrop = $mdUtil.createBackdrop(scope, "md-bottom-sheet-backdrop md-opaque");
  154. if (options.clickOutsideToClose) {
  155. backdrop.on('click', function() {
  156. $mdUtil.nextTick($mdBottomSheet.cancel,true);
  157. });
  158. }
  159. $mdTheming.inherit(backdrop, options.parent);
  160. $animate.enter(backdrop, options.parent, null);
  161. var bottomSheet = new BottomSheet(element, options.parent);
  162. options.bottomSheet = bottomSheet;
  163. $mdTheming.inherit(bottomSheet.element, options.parent);
  164. if (options.disableParentScroll) {
  165. options.restoreScroll = $mdUtil.disableScrollAround(bottomSheet.element, options.parent);
  166. }
  167. return $animate.enter(bottomSheet.element, options.parent)
  168. .then(function() {
  169. var focusable = $mdUtil.findFocusTarget(element) || angular.element(
  170. element[0].querySelector('button') ||
  171. element[0].querySelector('a') ||
  172. element[0].querySelector('[ng-click]')
  173. );
  174. focusable.focus();
  175. if (options.escapeToClose) {
  176. options.rootElementKeyupCallback = function(e) {
  177. if (e.keyCode === $mdConstant.KEY_CODE.ESCAPE) {
  178. $mdUtil.nextTick($mdBottomSheet.cancel,true);
  179. }
  180. };
  181. $rootElement.on('keyup', options.rootElementKeyupCallback);
  182. }
  183. });
  184. }
  185. function onRemove(scope, element, options) {
  186. var bottomSheet = options.bottomSheet;
  187. $animate.leave(backdrop);
  188. return $animate.leave(bottomSheet.element).then(function() {
  189. if (options.disableParentScroll) {
  190. options.restoreScroll();
  191. delete options.restoreScroll;
  192. }
  193. bottomSheet.cleanup();
  194. });
  195. }
  196. /**
  197. * BottomSheet class to apply bottom-sheet behavior to an element
  198. */
  199. function BottomSheet(element, parent) {
  200. var deregister = $mdGesture.register(parent, 'drag', { horizontal: false });
  201. parent.on('$md.dragstart', onDragStart)
  202. .on('$md.drag', onDrag)
  203. .on('$md.dragend', onDragEnd);
  204. return {
  205. element: element,
  206. cleanup: function cleanup() {
  207. deregister();
  208. parent.off('$md.dragstart', onDragStart);
  209. parent.off('$md.drag', onDrag);
  210. parent.off('$md.dragend', onDragEnd);
  211. }
  212. };
  213. function onDragStart(ev) {
  214. // Disable transitions on transform so that it feels fast
  215. element.css($mdConstant.CSS.TRANSITION_DURATION, '0ms');
  216. }
  217. function onDrag(ev) {
  218. var transform = ev.pointer.distanceY;
  219. if (transform < 5) {
  220. // Slow down drag when trying to drag up, and stop after PADDING
  221. transform = Math.max(-PADDING, transform / 2);
  222. }
  223. element.css($mdConstant.CSS.TRANSFORM, 'translate3d(0,' + (PADDING + transform) + 'px,0)');
  224. }
  225. function onDragEnd(ev) {
  226. if (ev.pointer.distanceY > 0 &&
  227. (ev.pointer.distanceY > 20 || Math.abs(ev.pointer.velocityY) > CLOSING_VELOCITY)) {
  228. var distanceRemaining = element.prop('offsetHeight') - ev.pointer.distanceY;
  229. var transitionDuration = Math.min(distanceRemaining / ev.pointer.velocityY * 0.75, 500);
  230. element.css($mdConstant.CSS.TRANSITION_DURATION, transitionDuration + 'ms');
  231. $mdUtil.nextTick($mdBottomSheet.cancel,true);
  232. } else {
  233. element.css($mdConstant.CSS.TRANSITION_DURATION, '');
  234. element.css($mdConstant.CSS.TRANSFORM, '');
  235. }
  236. }
  237. }
  238. }
  239. }
  240. MdBottomSheetProvider.$inject = ["$$interimElementProvider"];
  241. })(window, window.angular);