bottomSheet.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364
  1. /*!
  2. * AngularJS Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v1.1.8-master-aba7b2b
  6. */
  7. goog.provide('ngmaterial.components.bottomSheet');
  8. goog.require('ngmaterial.components.backdrop');
  9. goog.require('ngmaterial.core');
  10. /**
  11. * @ngdoc module
  12. * @name material.components.bottomSheet
  13. * @description
  14. * BottomSheet
  15. */
  16. MdBottomSheetDirective['$inject'] = ["$mdBottomSheet"];
  17. MdBottomSheetProvider['$inject'] = ["$$interimElementProvider"];
  18. angular
  19. .module('material.components.bottomSheet', [
  20. 'material.core',
  21. 'material.components.backdrop'
  22. ])
  23. .directive('mdBottomSheet', MdBottomSheetDirective)
  24. .provider('$mdBottomSheet', MdBottomSheetProvider);
  25. /* ngInject */
  26. function MdBottomSheetDirective($mdBottomSheet) {
  27. return {
  28. restrict: 'E',
  29. link : function postLink(scope, element) {
  30. element.addClass('_md'); // private md component indicator for styling
  31. // When navigation force destroys an interimElement, then
  32. // listen and $destroy() that interim instance...
  33. scope.$on('$destroy', function() {
  34. $mdBottomSheet.destroy();
  35. });
  36. }
  37. };
  38. }
  39. /**
  40. * @ngdoc service
  41. * @name $mdBottomSheet
  42. * @module material.components.bottomSheet
  43. *
  44. * @description
  45. * `$mdBottomSheet` opens a bottom sheet over the app and provides a simple promise API.
  46. *
  47. * ## Restrictions
  48. *
  49. * - The bottom sheet's template must have an outer `<md-bottom-sheet>` element.
  50. * - Add the `md-grid` class to the bottom sheet for a grid layout.
  51. * - Add the `md-list` class to the bottom sheet for a list layout.
  52. *
  53. * @usage
  54. * <hljs lang="html">
  55. * <div ng-controller="MyController">
  56. * <md-button ng-click="openBottomSheet()">
  57. * Open a Bottom Sheet!
  58. * </md-button>
  59. * </div>
  60. * </hljs>
  61. * <hljs lang="js">
  62. * var app = angular.module('app', ['ngMaterial']);
  63. * app.controller('MyController', function($scope, $mdBottomSheet) {
  64. * $scope.openBottomSheet = function() {
  65. * $mdBottomSheet.show({
  66. * template: '<md-bottom-sheet>' +
  67. * 'Hello! <md-button ng-click="closeBottomSheet()">Close</md-button>' +
  68. * '</md-bottom-sheet>'
  69. * })
  70. *
  71. * // Fires when the hide() method is used
  72. * .then(function() {
  73. * console.log('You clicked the button to close the bottom sheet!');
  74. * })
  75. *
  76. * // Fires when the cancel() method is used
  77. * .catch(function() {
  78. * console.log('You hit escape or clicked the backdrop to close.');
  79. * });
  80. * };
  81. *
  82. * $scope.closeBottomSheet = function($scope, $mdBottomSheet) {
  83. * $mdBottomSheet.hide();
  84. * }
  85. *
  86. * });
  87. * </hljs>
  88. *
  89. * ### Custom Presets
  90. * Developers are also able to create their own preset, which can be easily used without repeating
  91. * their options each time.
  92. *
  93. * <hljs lang="js">
  94. * $mdBottomSheetProvider.addPreset('testPreset', {
  95. * options: function() {
  96. * return {
  97. * template:
  98. * '<md-bottom-sheet>' +
  99. * 'This is a custom preset' +
  100. * '</md-bottom-sheet>',
  101. * controllerAs: 'bottomSheet',
  102. * bindToController: true,
  103. * clickOutsideToClose: true,
  104. * escapeToClose: true
  105. * };
  106. * }
  107. * });
  108. * </hljs>
  109. *
  110. * After you create your preset during the config phase, you can easily access it.
  111. *
  112. * <hljs lang="js">
  113. * $mdBottomSheet.show(
  114. * $mdBottomSheet.testPreset()
  115. * );
  116. * </hljs>
  117. */
  118. /**
  119. * @ngdoc method
  120. * @name $mdBottomSheet#show
  121. *
  122. * @description
  123. * Show a bottom sheet with the specified options.
  124. *
  125. * <em><b>Note:</b> You should <b>always</b> provide a `.catch()` method in case the user hits the
  126. * `esc` key or clicks the background to close. In this case, the `cancel()` method will
  127. * automatically be called on the bottom sheet which will `reject()` the promise. See the @usage
  128. * section above for an example.
  129. *
  130. * Newer versions of Angular will throw a `Possibly unhandled rejection` exception if you forget
  131. * this.</em>
  132. *
  133. * @param {object} optionsOrPreset Either provide an `$mdBottomSheetPreset` defined during the config phase or
  134. * an options object, with the following properties:
  135. *
  136. * - `templateUrl` - `{string=}`: The url of an html template file that will
  137. * be used as the content of the bottom sheet. Restrictions: the template must
  138. * have an outer `md-bottom-sheet` element.
  139. * - `template` - `{string=}`: Same as templateUrl, except this is an actual
  140. * template string.
  141. * - `scope` - `{object=}`: the scope to link the template / controller to. If none is specified, it will create a new child scope.
  142. * This scope will be destroyed when the bottom sheet is removed unless `preserveScope` is set to true.
  143. * - `preserveScope` - `{boolean=}`: whether to preserve the scope when the element is removed. Default is false
  144. * - `controller` - `{string=}`: The controller to associate with this bottom sheet.
  145. * - `locals` - `{string=}`: An object containing key/value pairs. The keys will
  146. * be used as names of values to inject into the controller. For example,
  147. * `locals: {three: 3}` would inject `three` into the controller with the value
  148. * of 3.
  149. * - `clickOutsideToClose` - `{boolean=}`: Whether the user can click outside the bottom sheet to
  150. * close it. Default true.
  151. * - `bindToController` - `{boolean=}`: When set to true, the locals will be bound to the controller instance.
  152. * - `disableBackdrop` - `{boolean=}`: When set to true, the bottomsheet will not show a backdrop.
  153. * - `escapeToClose` - `{boolean=}`: Whether the user can press escape to close the bottom sheet.
  154. * Default true.
  155. * - `isLockedOpen` - `{boolean=}`: Disables all default ways of closing the bottom sheet. **Note:** this will override
  156. * the `clickOutsideToClose` and `escapeToClose` options, leaving only the `hide` and `cancel`
  157. * methods as ways of closing the bottom sheet. Defaults to false.
  158. * - `resolve` - `{object=}`: Similar to locals, except it takes promises as values
  159. * and the bottom sheet will not open until the promises resolve.
  160. * - `controllerAs` - `{string=}`: An alias to assign the controller to on the scope.
  161. * - `parent` - `{element=}`: The element to append the bottom sheet to. The `parent` may be a `function`, `string`,
  162. * `object`, or null. Defaults to appending to the body of the root element (or the root element) of the application.
  163. * e.g. angular.element(document.getElementById('content')) or "#content"
  164. * - `disableParentScroll` - `{boolean=}`: Whether to disable scrolling while the bottom sheet is open.
  165. * Default true.
  166. *
  167. * @returns {promise} A promise that can be resolved with `$mdBottomSheet.hide()` or
  168. * rejected with `$mdBottomSheet.cancel()`.
  169. */
  170. /**
  171. * @ngdoc method
  172. * @name $mdBottomSheet#hide
  173. *
  174. * @description
  175. * Hide the existing bottom sheet and resolve the promise returned from
  176. * `$mdBottomSheet.show()`. This call will close the most recently opened/current bottomsheet (if
  177. * any).
  178. *
  179. * <em><b>Note:</b> Use a `.then()` on your `.show()` to handle this callback.</em>
  180. *
  181. * @param {*=} response An argument for the resolved promise.
  182. *
  183. */
  184. /**
  185. * @ngdoc method
  186. * @name $mdBottomSheet#cancel
  187. *
  188. * @description
  189. * Hide the existing bottom sheet and reject the promise returned from
  190. * `$mdBottomSheet.show()`.
  191. *
  192. * <em><b>Note:</b> Use a `.catch()` on your `.show()` to handle this callback.</em>
  193. *
  194. * @param {*=} response An argument for the rejected promise.
  195. *
  196. */
  197. function MdBottomSheetProvider($$interimElementProvider) {
  198. // how fast we need to flick down to close the sheet, pixels/ms
  199. bottomSheetDefaults['$inject'] = ["$animate", "$mdConstant", "$mdUtil", "$mdTheming", "$mdBottomSheet", "$rootElement", "$mdGesture", "$log"];
  200. var CLOSING_VELOCITY = 0.5;
  201. var PADDING = 80; // same as css
  202. return $$interimElementProvider('$mdBottomSheet')
  203. .setDefaults({
  204. methods: ['disableParentScroll', 'escapeToClose', 'clickOutsideToClose'],
  205. options: bottomSheetDefaults
  206. });
  207. /* ngInject */
  208. function bottomSheetDefaults($animate, $mdConstant, $mdUtil, $mdTheming, $mdBottomSheet, $rootElement,
  209. $mdGesture, $log) {
  210. var backdrop;
  211. return {
  212. themable: true,
  213. onShow: onShow,
  214. onRemove: onRemove,
  215. disableBackdrop: false,
  216. escapeToClose: true,
  217. clickOutsideToClose: true,
  218. disableParentScroll: true,
  219. isLockedOpen: false
  220. };
  221. function onShow(scope, element, options, controller) {
  222. element = $mdUtil.extractElementByName(element, 'md-bottom-sheet');
  223. // prevent tab focus or click focus on the bottom-sheet container
  224. element.attr('tabindex', '-1');
  225. // Once the md-bottom-sheet has `ng-cloak` applied on his template the opening animation will not work properly.
  226. // This is a very common problem, so we have to notify the developer about this.
  227. if (element.hasClass('ng-cloak')) {
  228. var message = '$mdBottomSheet: using `<md-bottom-sheet ng-cloak>` will affect the bottom-sheet opening animations.';
  229. $log.warn( message, element[0] );
  230. }
  231. if (options.isLockedOpen) {
  232. options.clickOutsideToClose = false;
  233. options.escapeToClose = false;
  234. } else {
  235. options.cleanupGestures = registerGestures(element, options.parent);
  236. }
  237. if (!options.disableBackdrop) {
  238. // Add a backdrop that will close on click
  239. backdrop = $mdUtil.createBackdrop(scope, "md-bottom-sheet-backdrop md-opaque");
  240. // Prevent mouse focus on backdrop; ONLY programatic focus allowed.
  241. // This allows clicks on backdrop to propogate to the $rootElement and
  242. // ESC key events to be detected properly.
  243. backdrop[0].tabIndex = -1;
  244. if (options.clickOutsideToClose) {
  245. backdrop.on('click', function() {
  246. $mdUtil.nextTick($mdBottomSheet.cancel,true);
  247. });
  248. }
  249. $mdTheming.inherit(backdrop, options.parent);
  250. $animate.enter(backdrop, options.parent, null);
  251. }
  252. $mdTheming.inherit(element, options.parent);
  253. if (options.disableParentScroll) {
  254. options.restoreScroll = $mdUtil.disableScrollAround(element, options.parent);
  255. }
  256. return $animate.enter(element, options.parent, backdrop)
  257. .then(function() {
  258. var focusable = $mdUtil.findFocusTarget(element) || angular.element(
  259. element[0].querySelector('button') ||
  260. element[0].querySelector('a') ||
  261. element[0].querySelector($mdUtil.prefixer('ng-click', true))
  262. ) || backdrop;
  263. if (options.escapeToClose) {
  264. options.rootElementKeyupCallback = function(e) {
  265. if (e.keyCode === $mdConstant.KEY_CODE.ESCAPE) {
  266. $mdUtil.nextTick($mdBottomSheet.cancel,true);
  267. }
  268. };
  269. $rootElement.on('keyup', options.rootElementKeyupCallback);
  270. focusable && focusable.focus();
  271. }
  272. });
  273. }
  274. function onRemove(scope, element, options) {
  275. if (!options.disableBackdrop) $animate.leave(backdrop);
  276. return $animate.leave(element).then(function() {
  277. if (options.disableParentScroll) {
  278. options.restoreScroll();
  279. delete options.restoreScroll;
  280. }
  281. options.cleanupGestures && options.cleanupGestures();
  282. });
  283. }
  284. /**
  285. * Adds the drag gestures to the bottom sheet.
  286. */
  287. function registerGestures(element, parent) {
  288. var deregister = $mdGesture.register(parent, 'drag', { horizontal: false });
  289. parent.on('$md.dragstart', onDragStart)
  290. .on('$md.drag', onDrag)
  291. .on('$md.dragend', onDragEnd);
  292. return function cleanupGestures() {
  293. deregister();
  294. parent.off('$md.dragstart', onDragStart);
  295. parent.off('$md.drag', onDrag);
  296. parent.off('$md.dragend', onDragEnd);
  297. };
  298. function onDragStart() {
  299. // Disable transitions on transform so that it feels fast
  300. element.css($mdConstant.CSS.TRANSITION_DURATION, '0ms');
  301. }
  302. function onDrag(ev) {
  303. var transform = ev.pointer.distanceY;
  304. if (transform < 5) {
  305. // Slow down drag when trying to drag up, and stop after PADDING
  306. transform = Math.max(-PADDING, transform / 2);
  307. }
  308. element.css($mdConstant.CSS.TRANSFORM, 'translate3d(0,' + (PADDING + transform) + 'px,0)');
  309. }
  310. function onDragEnd(ev) {
  311. if (ev.pointer.distanceY > 0 &&
  312. (ev.pointer.distanceY > 20 || Math.abs(ev.pointer.velocityY) > CLOSING_VELOCITY)) {
  313. var distanceRemaining = element.prop('offsetHeight') - ev.pointer.distanceY;
  314. var transitionDuration = Math.min(distanceRemaining / ev.pointer.velocityY * 0.75, 500);
  315. element.css($mdConstant.CSS.TRANSITION_DURATION, transitionDuration + 'ms');
  316. $mdUtil.nextTick($mdBottomSheet.cancel,true);
  317. } else {
  318. element.css($mdConstant.CSS.TRANSITION_DURATION, '');
  319. element.css($mdConstant.CSS.TRANSFORM, '');
  320. }
  321. }
  322. }
  323. }
  324. }
  325. ngmaterial.components.bottomSheet = angular.module("material.components.bottomSheet");