1/*!
  2 * Angular Material Design
  3 * https://github.com/angular/material
  4 * @license MIT
  5 * v1.1.1
  6 */
  7(function( window, angular, undefined ){
  8"use strict";
  9
 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 *   - `disableBackdrop` - `{boolean=}`: When set to true, the bottomsheet will not show a backdrop.
102 *   - `escapeToClose` - `{boolean=}`: Whether the user can press escape to close the bottom sheet.
103 *     Default true.
104 *   - `resolve` - `{object=}`: Similar to locals, except it takes promises as values
105 *   and the bottom sheet will not open until the promises resolve.
106 *   - `controllerAs` - `{string=}`: An alias to assign the controller to on the scope.
107 *   - `parent` - `{element=}`: The element to append the bottom sheet to. The `parent` may be a `function`, `string`,
108 *   `object`, or null. Defaults to appending to the body of the root element (or the root element) of the application.
109 *   e.g. angular.element(document.getElementById('content')) or "#content"
110 *   - `disableParentScroll` - `{boolean=}`: Whether to disable scrolling while the bottom sheet is open.
111 *     Default true.
112 *
113 * @returns {promise} A promise that can be resolved with `$mdBottomSheet.hide()` or
114 * rejected with `$mdBottomSheet.cancel()`.
115 */
116
117/**
118 * @ngdoc method
119 * @name $mdBottomSheet#hide
120 *
121 * @description
122 * Hide the existing bottom sheet and resolve the promise returned from
123 * `$mdBottomSheet.show()`. This call will close the most recently opened/current bottomsheet (if any).
124 *
125 * @param {*=} response An argument for the resolved promise.
126 *
127 */
128
129/**
130 * @ngdoc method
131 * @name $mdBottomSheet#cancel
132 *
133 * @description
134 * Hide the existing bottom sheet and reject the promise returned from
135 * `$mdBottomSheet.show()`.
136 *
137 * @param {*=} response An argument for the rejected promise.
138 *
139 */
140
141function MdBottomSheetProvider($$interimElementProvider) {
142  // how fast we need to flick down to close the sheet, pixels/ms
143  bottomSheetDefaults.$inject = ["$animate", "$mdConstant", "$mdUtil", "$mdTheming", "$mdBottomSheet", "$rootElement", "$mdGesture", "$log"];
144  var CLOSING_VELOCITY = 0.5;
145  var PADDING = 80; // same as css
146
147  return $$interimElementProvider('$mdBottomSheet')
148    .setDefaults({
149      methods: ['disableParentScroll', 'escapeToClose', 'clickOutsideToClose'],
150      options: bottomSheetDefaults
151    });
152
153  /* ngInject */
154  function bottomSheetDefaults($animate, $mdConstant, $mdUtil, $mdTheming, $mdBottomSheet, $rootElement,
155                               $mdGesture, $log) {
156    var backdrop;
157
158    return {
159      themable: true,
160      onShow: onShow,
161      onRemove: onRemove,
162      disableBackdrop: false,
163      escapeToClose: true,
164      clickOutsideToClose: true,
165      disableParentScroll: true
166    };
167
168
169    function onShow(scope, element, options, controller) {
170
171      element = $mdUtil.extractElementByName(element, 'md-bottom-sheet');
172
173      // prevent tab focus or click focus on the bottom-sheet container
174      element.attr('tabindex',"-1");
175
176      // Once the md-bottom-sheet has `ng-cloak` applied on his template the opening animation will not work properly.
177      // This is a very common problem, so we have to notify the developer about this.
178      if (element.hasClass('ng-cloak')) {
179        var message = '$mdBottomSheet: using `<md-bottom-sheet ng-cloak >` will affect the bottom-sheet opening animations.';
180        $log.warn( message, element[0] );
181      }
182
183      if (!options.disableBackdrop) {
184        // Add a backdrop that will close on click
185        backdrop = $mdUtil.createBackdrop(scope, "md-bottom-sheet-backdrop md-opaque");
186
187        // Prevent mouse focus on backdrop; ONLY programatic focus allowed.
188        // This allows clicks on backdrop to propogate to the $rootElement and
189        // ESC key events to be detected properly.
190        
191        backdrop[0].tabIndex = -1;
192
193        if (options.clickOutsideToClose) {
194          backdrop.on('click', function() {
195            $mdUtil.nextTick($mdBottomSheet.cancel,true);
196          });
197        }
198
199        $mdTheming.inherit(backdrop, options.parent);
200
201        $animate.enter(backdrop, options.parent, null);
202      }
203
204      var bottomSheet = new BottomSheet(element, options.parent);
205      options.bottomSheet = bottomSheet;
206
207      $mdTheming.inherit(bottomSheet.element, options.parent);
208
209      if (options.disableParentScroll) {
210        options.restoreScroll = $mdUtil.disableScrollAround(bottomSheet.element, options.parent);
211      }
212
213      return $animate.enter(bottomSheet.element, options.parent, backdrop)
214        .then(function() {
215          var focusable = $mdUtil.findFocusTarget(element) || angular.element(
216            element[0].querySelector('button') ||
217            element[0].querySelector('a') ||
218            element[0].querySelector($mdUtil.prefixer('ng-click', true))
219          ) || backdrop;
220
221          if (options.escapeToClose) {
222            options.rootElementKeyupCallback = function(e) {
223              if (e.keyCode === $mdConstant.KEY_CODE.ESCAPE) {
224                $mdUtil.nextTick($mdBottomSheet.cancel,true);
225              }
226            };
227
228            $rootElement.on('keyup', options.rootElementKeyupCallback);
229            focusable && focusable.focus();
230          }
231        });
232
233    }
234
235    function onRemove(scope, element, options) {
236
237      var bottomSheet = options.bottomSheet;
238
239      if (!options.disableBackdrop) $animate.leave(backdrop);
240      return $animate.leave(bottomSheet.element).then(function() {
241        if (options.disableParentScroll) {
242          options.restoreScroll();
243          delete options.restoreScroll;
244        }
245
246        bottomSheet.cleanup();
247      });
248    }
249
250    /**
251     * BottomSheet class to apply bottom-sheet behavior to an element
252     */
253    function BottomSheet(element, parent) {
254      var deregister = $mdGesture.register(parent, 'drag', { horizontal: false });
255      parent.on('$md.dragstart', onDragStart)
256        .on('$md.drag', onDrag)
257        .on('$md.dragend', onDragEnd);
258
259      return {
260        element: element,
261        cleanup: function cleanup() {
262          deregister();
263          parent.off('$md.dragstart', onDragStart);
264          parent.off('$md.drag', onDrag);
265          parent.off('$md.dragend', onDragEnd);
266        }
267      };
268
269      function onDragStart(ev) {
270        // Disable transitions on transform so that it feels fast
271        element.css($mdConstant.CSS.TRANSITION_DURATION, '0ms');
272      }
273
274      function onDrag(ev) {
275        var transform = ev.pointer.distanceY;
276        if (transform < 5) {
277          // Slow down drag when trying to drag up, and stop after PADDING
278          transform = Math.max(-PADDING, transform / 2);
279        }
280        element.css($mdConstant.CSS.TRANSFORM, 'translate3d(0,' + (PADDING + transform) + 'px,0)');
281      }
282
283      function onDragEnd(ev) {
284        if (ev.pointer.distanceY > 0 &&
285            (ev.pointer.distanceY > 20 || Math.abs(ev.pointer.velocityY) > CLOSING_VELOCITY)) {
286          var distanceRemaining = element.prop('offsetHeight') - ev.pointer.distanceY;
287          var transitionDuration = Math.min(distanceRemaining / ev.pointer.velocityY * 0.75, 500);
288          element.css($mdConstant.CSS.TRANSITION_DURATION, transitionDuration + 'ms');
289          $mdUtil.nextTick($mdBottomSheet.cancel,true);
290        } else {
291          element.css($mdConstant.CSS.TRANSITION_DURATION, '');
292          element.css($mdConstant.CSS.TRANSFORM, '');
293        }
294      }
295    }
296
297  }
298
299}
300
301})(window, window.angular);