2 * Angular Material Design
3 * https://github.com/angular/material
7 (function( window, angular, undefined ){
12 * @name material.components.toast
16 angular.module('material.components.toast', [
18 'material.components.button'
20 .directive('mdToast', MdToastDirective)
21 .provider('$mdToast', MdToastProvider);
23 function MdToastDirective() {
32 * @module material.components.toast
35 * `$mdToast` is a service to build a toast notification on any position
36 * on the screen with an optional duration, and provides a simple promise API.
39 * ## Restrictions on custom toasts
40 * - The toast's template must have an outer `<md-toast>` element.
41 * - For a toast action, use element with class `md-action`.
42 * - Add the class `md-capsule` for curved corners.
46 * <div ng-controller="MyController">
47 * <md-button ng-click="openToast()">
54 * var app = angular.module('app', ['ngMaterial']);
55 * app.controller('MyController', function($scope, $mdToast) {
56 * $scope.openToast = function($event) {
57 * $mdToast.show($mdToast.simple().content('Hello!'));
58 * // Could also do $mdToast.showSimple('Hello');
66 * @name $mdToast#showSimple
69 * Convenience method which builds and shows a simple toast.
71 * @returns {promise} A promise that can be resolved with `$mdToast.hide()` or
72 * rejected with `$mdToast.cancel()`.
78 * @name $mdToast#simple
81 * Builds a preconfigured toast.
83 * @returns {obj} a `$mdToastPreset` with the chainable configuration methods:
85 * - $mdToastPreset#content(string) - sets toast content to string
86 * - $mdToastPreset#action(string) - adds an action button, which resolves the promise returned from `show()` if clicked.
87 * - $mdToastPreset#highlightAction(boolean) - sets action button to be highlighted
88 * - $mdToastPreset#capsule(boolean) - adds 'md-capsule' class to the toast (curved corners)
89 * - $mdToastPreset#theme(boolean) - sets the theme on the toast to theme (default is `$mdThemingProvider`'s default theme)
94 * @name $mdToast#updateContent
97 * Updates the content of an existing toast. Useful for updating things like counts, etc.
103 * @name $mdToast#build
106 * Creates a custom `$mdToastPreset` that you can configure.
108 * @returns {obj} a `$mdToastPreset` with the chainable configuration methods for shows' options (see below).
113 * @name $mdToast#show
115 * @description Shows the toast.
117 * @param {object} optionsOrPreset Either provide an `$mdToastPreset` returned from `simple()`
118 * and `build()`, or an options object with the following properties:
120 * - `templateUrl` - `{string=}`: The url of an html template file that will
121 * be used as the content of the toast. Restrictions: the template must
122 * have an outer `md-toast` element.
123 * - `template` - `{string=}`: Same as templateUrl, except this is an actual
125 * - `scope` - `{object=}`: the scope to link the template / controller to. If none is specified, it will create a new child scope.
126 * This scope will be destroyed when the toast is removed unless `preserveScope` is set to true.
127 * - `preserveScope` - `{boolean=}`: whether to preserve the scope when the element is removed. Default is false
128 * - `hideDelay` - `{number=}`: How many milliseconds the toast should stay
129 * active before automatically closing. Set to 0 or false to have the toast stay open until
130 * closed manually. Default: 3000.
131 * - `position` - `{string=}`: Where to place the toast. Available: any combination
132 * of 'bottom', 'left', 'top', 'right', 'fit'. Default: 'bottom left'.
133 * - `controller` - `{string=}`: The controller to associate with this toast.
134 * The controller will be injected the local `$hideToast`, which is a function
135 * used to hide the toast.
136 * - `locals` - `{string=}`: An object containing key/value pairs. The keys will
137 * be used as names of values to inject into the controller. For example,
138 * `locals: {three: 3}` would inject `three` into the controller with the value
140 * - `bindToController` - `bool`: bind the locals to the controller, instead of passing them in. These values will not be available until after initialization.
141 * - `resolve` - `{object=}`: Similar to locals, except it takes promises as values
142 * and the toast will not open until the promises resolve.
143 * - `controllerAs` - `{string=}`: An alias to assign the controller to on the scope.
144 * - `parent` - `{element=}`: The element to append the toast to. Defaults to appending
145 * to the root element of the application.
147 * @returns {promise} A promise that can be resolved with `$mdToast.hide()` or
148 * rejected with `$mdToast.cancel()`.
153 * @name $mdToast#hide
156 * Hide an existing toast and resolve the promise returned from `$mdToast.show()`.
158 * @param {*=} response An argument for the resolved promise.
160 * @returns {promise} a promise that is called when the existing element is removed from the DOM
166 * @name $mdToast#cancel
169 * Hide the existing toast and reject the promise returned from
172 * @param {*=} response An argument for the rejected promise.
174 * @returns {promise} a promise that is called when the existing element is removed from the DOM
178 function MdToastProvider($$interimElementProvider) {
179 var activeToastContent;
180 var $mdToast = $$interimElementProvider('$mdToast')
182 methods: ['position', 'hideDelay', 'capsule' ],
183 options: toastDefaultOptions
185 .addPreset('simple', {
186 argOption: 'content',
187 methods: ['content', 'action', 'highlightAction', 'theme', 'parent'],
188 options: /* ngInject */ ["$mdToast", "$mdTheming", function($mdToast, $mdTheming) {
191 '<md-toast md-theme="{{ toast.theme }}" ng-class="{\'md-capsule\': toast.capsule}">',
192 '<span flex>{{ toast.content }}</span>',
193 '<md-button class="md-action" ng-if="toast.action" ng-click="toast.resolve()" ng-class="{\'md-highlight\': toast.highlightAction}">',
194 '{{ toast.action }}',
198 controller: /* ngInject */ ["$scope", function mdToastCtrl($scope) {
200 $scope.$watch(function() { return activeToastContent; }, function() {
201 self.content = activeToastContent;
203 this.resolve = function() {
207 theme: $mdTheming.defaultTheme(),
208 controllerAs: 'toast',
209 bindToController: true
214 .addMethod('updateContent', function(newContent) {
215 activeToastContent = newContent;
218 toastDefaultOptions.$inject = ["$timeout", "$animate", "$mdToast", "$mdUtil"];
222 function toastDefaultOptions($timeout, $animate, $mdToast, $mdUtil) {
226 position: 'bottom left',
231 function onShow(scope, element, options) {
232 element = $mdUtil.extractElementByName(element, 'md-toast');
234 // 'top left' -> 'md-top md-left'
235 activeToastContent = options.content;
236 element.addClass(options.position.split(' ').map(function(pos) {
239 options.parent.addClass(toastOpenClass(options.position));
241 options.onSwipe = function(ev, gesture) {
242 //Add swipeleft/swiperight class to element so it can animate correctly
243 element.addClass('md-' + ev.type.replace('$md.',''));
244 $timeout($mdToast.cancel);
246 element.on('$md.swipeleft $md.swiperight', options.onSwipe);
247 return $animate.enter(element, options.parent);
250 function onRemove(scope, element, options) {
251 element.off('$md.swipeleft $md.swiperight', options.onSwipe);
252 options.parent.removeClass(toastOpenClass(options.position));
253 return $animate.leave(element);
256 function toastOpenClass(position) {
257 return 'md-toast-open-' +
258 (position.indexOf('top') > -1 ? 'top' : 'bottom');
263 MdToastProvider.$inject = ["$$interimElementProvider"];
265 })(window, window.angular);