Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit 8ab5b0a

Browse files
Splaktarandrewseguin
Splaktar
authored and
andrewseguin
committed
docs(toast): add use of locals to custom toast demo (#11512)
remove $scope from basic demo show proper Promise handling in basic demo clean up demo and doc typos and errors Fixes #11499
1 parent 6f5040e commit 8ab5b0a

7 files changed

Lines changed: 111 additions & 98 deletions

File tree

‎package-lock.json‎

Lines changed: 0 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/toast/demoBasicUsage/index.html‎

Lines changed: 28 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,34 @@
1-
<div ng-controller="AppCtrl" layout-fill layout="column" class="inset" ng-cloak paddi>
2-
<p>
3-
Toast can be dismissed with a swipe, a timer, or a button.<br/>
4-
</p>
1+
<div ng-controller="AppCtrl as ctrl" layout-fill layout="column" class="inset" ng-cloak>
2+
<p>Toast can be dismissed with a swipe, a timer, or a button.<br/></p>
53

4+
<div layout="row" layout-align="space-around">
5+
<div class="spacer"></div>
6+
<md-button ng-click="ctrl.showSimpleToast()">
7+
Show Simple
8+
</md-button>
9+
<md-button class="md-raised" ng-click="ctrl.showActionToast()">
10+
Show With Action
11+
</md-button>
12+
<div class="spacer"></div>
13+
</div>
614

7-
<div layout="row" layout-align="space-around">
8-
<div style="width:50px"></div>
9-
<md-button ng-click="showSimpleToast()">
10-
Show Simple
11-
</md-button>
12-
<md-button class="md-raised" ng-click="showActionToast()">
13-
Show With Action
14-
</md-button>
15-
<div style="width:50px"></div>
15+
<div layout="row" id="toastBounds">
16+
<div>
17+
<p><b>Toast Position: "{{ctrl.getToastPosition()}}"</b></p>
18+
<md-checkbox ng-repeat="(name, isSelected) in ctrl.toastPosition"
19+
ng-model="ctrl.toastPosition[name]">
20+
{{name}}
21+
</md-checkbox>
1622
</div>
23+
</div>
1724

18-
<div layout="row" id="toastBounds">
25+
<div layout="row">
26+
<md-button class="md-primary md-fab md-fab-bottom-right">
27+
FAB
28+
</md-button>
29+
<md-button class="md-accent md-fab md-fab-top-right">
30+
FAB
31+
</md-button>
1932

20-
<div>
21-
<p><b>Toast Position: "{{getToastPosition()}}"</b></p>
22-
<md-checkbox ng-repeat="(name, isSelected) in toastPosition"
23-
ng-model="toastPosition[name]">
24-
{{name}}
25-
</md-checkbox>
26-
</div>
27-
</div>
28-
<div layout="row">
29-
<md-button class="md-primary md-fab md-fab-bottom-right">
30-
FAB
31-
</md-button>
32-
<md-button class="md-accent md-fab md-fab-top-right">
33-
FAB
34-
</md-button>
35-
36-
</div>
33+
</div>
3734
</div>

‎src/components/toast/demoBasicUsage/script.js‎

Lines changed: 67 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,85 @@
1-
angular.module('toastBasicDemo', ['ngMaterial'])
1+
(function() {
2+
angular.module('toastBasicDemo', ['ngMaterial'])
3+
.controller('AppCtrl', AppCtrl);
24

3-
.controller('AppCtrl', function($scope, $mdToast) {
4-
var last = {
5+
function AppCtrl($mdToast, $log) {
6+
var ctrl = this;
7+
var last = {
58
bottom: false,
69
top: true,
710
left: false,
811
right: true
912
};
1013

11-
$scope.toastPosition = angular.extend({},last);
14+
ctrl.toastPosition = angular.extend({}, last);
1215

13-
$scope.getToastPosition = function() {
14-
sanitizePosition();
16+
ctrl.getToastPosition = function() {
17+
sanitizePosition();
1518

16-
return Object.keys($scope.toastPosition)
17-
.filter(function(pos) { return $scope.toastPosition[pos]; })
18-
.join(' ');
19-
};
19+
return Object.keys(ctrl.toastPosition)
20+
.filter(function(pos) {
21+
return ctrl.toastPosition[pos];
22+
}).join(' ');
23+
};
2024

21-
function sanitizePosition() {
22-
var current = $scope.toastPosition;
25+
function sanitizePosition() {
26+
var current = ctrl.toastPosition;
2327

24-
if ( current.bottom && last.top ) current.top = false;
25-
if ( current.top && last.bottom ) current.bottom = false;
26-
if ( current.right && last.left ) current.left = false;
27-
if ( current.left && last.right ) current.right = false;
28+
if (current.bottom && last.top) {
29+
current.top = false;
30+
}
31+
if (current.top && last.bottom) {
32+
current.bottom = false;
33+
}
34+
if (current.right && last.left) {
35+
current.left = false;
36+
}
37+
if (current.left && last.right) {
38+
current.right = false;
39+
}
2840

29-
last = angular.extend({},current);
30-
}
41+
last = angular.extend({}, current);
42+
}
3143

32-
$scope.showSimpleToast = function() {
33-
var pinTo = $scope.getToastPosition();
44+
ctrl.showSimpleToast = function() {
45+
var pinTo = ctrl.getToastPosition();
3446

35-
$mdToast.show(
36-
$mdToast.simple()
47+
$mdToast.show(
48+
$mdToast.simple()
3749
.textContent('Simple Toast!')
3850
.position(pinTo)
39-
.hideDelay(3000)
40-
);
41-
};
42-
43-
$scope.showActionToast = function() {
44-
var pinTo = $scope.getToastPosition();
45-
var toast = $mdToast.simple()
46-
.textContent('Marked as read')
47-
.actionKey('z')
48-
.actionHint('Press the Control-"z" key combination to ')
49-
.action('UNDO')
50-
.dismissHint('Activate the Escape key to dismiss this toast.')
51-
.highlightAction(true)
52-
.highlightClass('md-accent') // Accent is used by default, this just demonstrates the usage.
53-
.position(pinTo)
54-
.hideDelay(0);
55-
56-
$mdToast.show(toast).then(function(response) {
57-
if (response === 'ok') {
58-
alert('You selected the \'UNDO\' action.');
59-
}
60-
});
61-
};
51+
.hideDelay(3000))
52+
.then(function() {
53+
$log.log('Toast dismissed.');
54+
}).catch(function() {
55+
$log.log('Toast failed or was forced to close early by another toast.');
56+
});
57+
};
6258

63-
})
59+
ctrl.showActionToast = function() {
60+
var pinTo = ctrl.getToastPosition();
61+
var toast = $mdToast.simple()
62+
.textContent('Marked as read')
63+
.actionKey('z')
64+
.actionHint('Press the Control-"z" key combination to ')
65+
.action('UNDO')
66+
.dismissHint('Activate the Escape key to dismiss this toast.')
67+
.highlightAction(true)
68+
// Accent is used by default, this just demonstrates the usage.
69+
.highlightClass('md-accent')
70+
.position(pinTo)
71+
.hideDelay(0);
6472

65-
.controller('ToastCtrl', function($scope, $mdToast) {
66-
$scope.closeToast = function() {
67-
$mdToast.hide();
68-
};
69-
});
73+
$mdToast.show(toast)
74+
.then(function(response) {
75+
if (response === 'ok') {
76+
alert('You selected the \'UNDO\' action.');
77+
} else {
78+
$log.log('Toast dismissed.');
79+
}
80+
}).catch(function() {
81+
$log.log('Toast failed or was forced to close early by another toast.');
82+
});
83+
};
84+
}
85+
})();

‎src/components/toast/demoBasicUsage/style.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.spacer {
2+
width: 50px;
3+
}

‎src/components/toast/demoCustomUsage/script.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,16 @@
1010

1111
function AppCtrl($mdToast, $log) {
1212
var ctrl = this;
13+
var message = 'Custom toast';
1314

1415
ctrl.showCustomToast = function() {
1516
$mdToast.show({
1617
hideDelay: 0,
1718
position: 'top right',
1819
controller: 'ToastCtrl',
1920
controllerAs: 'ctrl',
21+
bindToController: true,
22+
locals: {toastMessage: message},
2023
templateUrl: 'toast-template.html'
2124
}).then(function(result) {
2225
if (result === ACTION_RESOLVE) {

‎src/components/toast/demoCustomUsage/toast-template.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<md-toast role="alert" aria-relevant="all">
2-
<span class="md-toast-text" flex>Custom toast</span>
2+
<span class="md-toast-text" flex>{{ctrl.toastMessage}}</span>
33
<span class="md-visually-hidden">
44
Press Escape to dismiss. Press Control-"{{ctrl.dialogKey}}" for
55
</span>

‎src/components/toast/toast.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -273,7 +273,7 @@ function MdToastDirective($mdToast) {
273273
* - `controller` - `{string=}`: The controller to associate with this toast.
274274
* The controller will be injected the local `$mdToast.hide()`, which is a function
275275
* used to hide the toast.
276-
* - `locals` - `{string=}`: An object containing key/value pairs. The keys will
276+
* - `locals` - `{object=}`: An object containing key/value pairs. The keys will
277277
* be used as names of values to inject into the controller. For example,
278278
* `locals: {three: 3}` would inject `three` into the controller with the value
279279
* of 3.
@@ -286,9 +286,9 @@ function MdToastDirective($mdToast) {
286286
* to the root element of the application.
287287
*
288288
* @returns {promise} A promise that can be resolved with `$mdToast.hide()` or
289-
* rejected with `$mdToast.cancel()`. `$mdToast.hide()` will resolve either with a Boolean
290-
* value == 'true' or the value passed as an argument to `$mdToast.hide()`.
291-
* And `$mdToast.cancel()` will resolve the promise with a Boolean value == 'false'
289+
* rejected with `$mdToast.cancel()`. `$mdToast.hide()` will resolve either with the Boolean
290+
* value `true` or the value passed as an argument to `$mdToast.hide()`.
291+
* `$mdToast.cancel()` will resolve the promise with the Boolean value `false`.
292292
*/
293293

294294
/**
@@ -300,9 +300,9 @@ function MdToastDirective($mdToast) {
300300
*
301301
* @param {*=} response An argument for the resolved promise.
302302
*
303-
* @returns {promise} a promise that is called when the existing element is removed from the DOM.
304-
* The promise is resolved with either a Boolean value == 'true' or the value passed as the
305-
* argument to `.hide()`.
303+
* @returns {promise} A promise that is called when the existing element is removed from the DOM.
304+
* The promise is resolved with either the Boolean value `true` or the value passed as the
305+
* argument to `$mdToast.hide()`.
306306
*/
307307

308308
/**
@@ -319,8 +319,8 @@ function MdToastDirective($mdToast) {
319319
*
320320
* @param {*=} response An argument for the rejected promise.
321321
*
322-
* @returns {promise} a promise that is called when the existing element is removed from the DOM
323-
* The promise is resolved with a Boolean value == 'false'.
322+
* @returns {promise} A promise that is called when the existing element is removed from the DOM
323+
* The promise is resolved with the Boolean value `false`.
324324
*/
325325

326326
function MdToastProvider($$interimElementProvider) {

0 commit comments

Comments
 (0)