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