1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
|
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v0.9.8
*/
(function( window, angular, undefined ){
"use strict";
/**
* @ngdoc module
* @name material.components.dialog
*/
angular.module('material.components.dialog', [
'material.core',
'material.components.backdrop'
])
.directive('mdDialog', MdDialogDirective)
.provider('$mdDialog', MdDialogProvider);
function MdDialogDirective($$rAF, $mdTheming) {
return {
restrict: 'E',
link: function(scope, element, attr) {
$mdTheming(element);
$$rAF(function() {
var content = element[0].querySelector('md-dialog-content');
if (content && content.scrollHeight > content.clientHeight) {
element.addClass('md-content-overflow');
}
});
}
};
}
MdDialogDirective.$inject = ["$$rAF", "$mdTheming"];
/**
* @ngdoc service
* @name $mdDialog
* @module material.components.dialog
*
* @description
* `$mdDialog` opens a dialog over the app to inform users about critical information or require
* them to make decisions. There are two approaches for setup: a simple promise API
* and regular object syntax.
*
* ## Restrictions
*
* - The dialog is always given an isolate scope.
* - The dialog's template must have an outer `<md-dialog>` element.
* Inside, use an `<md-dialog-content>` element for the dialog's content, and use
* an element with class `md-actions` for the dialog's actions.
* - Dialogs must cover the entire application to keep interactions inside of them.
* Use the `parent` option to change where dialogs are appended.
*
* ## Sizing
* - Complex dialogs can be sized with `flex="percentage"`, i.e. `flex="66"`.
* - Default max-width is 80% of the `rootElement` or `parent`.
*
* @usage
* <hljs lang="html">
* <div ng-app="demoApp" ng-controller="EmployeeController">
* <div>
* <md-button ng-click="showAlert()" class="md-raised md-warn">
* Employee Alert!
* </md-button>
* </div>
* <div>
* <md-button ng-click="showDialog($event)" class="md-raised">
* Custom Dialog
* </md-button>
* </div>
* <div>
* <md-button ng-click="closeAlert()" ng-disabled="!hasAlert()" class="md-raised">
* Close Alert
* </md-button>
* </div>
* <div>
* <md-button ng-click="showGreeting($event)" class="md-raised md-primary" >
* Greet Employee
* </md-button>
* </div>
* </div>
* </hljs>
*
* ### JavaScript: object syntax
* <hljs lang="js">
* (function(angular, undefined){
* "use strict";
*
* angular
* .module('demoApp', ['ngMaterial'])
* .controller('AppCtrl', AppController);
*
* function AppController($scope, $mdDialog) {
* var alert;
* $scope.showAlert = showAlert;
* $scope.showDialog = showDialog;
* $scope.items = [1, 2, 3];
*
* // Internal method
* function showAlert() {
* alert = $mdDialog.alert({
* title: 'Attention',
* content: 'This is an example of how easy dialogs can be!',
* ok: 'Close'
* });
*
* $mdDialog
* .show( alert )
* .finally(function() {
* alert = undefined;
* });
* }
*
* function showDialog($event) {
* var parentEl = angular.element(document.body);
* $mdDialog.show({
* parent: parentEl,
* targetEvent: $event,
* template:
* '<md-dialog aria-label="List dialog">' +
* ' <md-dialog-content>'+
* ' <md-list>'+
* ' <md-list-item ng-repeat="item in items">'+
* ' <p>Number {{item}}</p>' +
* ' </md-item>'+
* ' </md-list>'+
* ' </md-dialog-content>' +
* ' <div class="md-actions">' +
* ' <md-button ng-click="closeDialog()" class="md-primary">' +
* ' Close Dialog' +
* ' </md-button>' +
* ' </div>' +
* '</md-dialog>',
* locals: {
* items: $scope.items
* },
* controller: DialogController
* });
* function DialogController($scope, $mdDialog, items) {
* $scope.items = items;
* $scope.closeDialog = function() {
* $mdDialog.hide();
* }
* }
* }
* }
* })(angular);
* </hljs>
*
* ### JavaScript: promise API syntax, custom dialog template
* <hljs lang="js">
* (function(angular, undefined){
* "use strict";
*
* angular
* .module('demoApp', ['ngMaterial'])
* .controller('EmployeeController', EmployeeEditor)
* .controller('GreetingController', GreetingController);
*
* // Fictitious Employee Editor to show how to use simple and complex dialogs.
*
* function EmployeeEditor($scope, $mdDialog) {
* var alert;
*
* $scope.showAlert = showAlert;
* $scope.closeAlert = closeAlert;
* $scope.showGreeting = showCustomGreeting;
*
* $scope.hasAlert = function() { return !!alert };
* $scope.userName = $scope.userName || 'Bobby';
*
* // Dialog #1 - Show simple alert dialog and cache
* // reference to dialog instance
*
* function showAlert() {
* alert = $mdDialog.alert()
* .title('Attention, ' + $scope.userName)
* .content('This is an example of how easy dialogs can be!')
* .ok('Close');
*
* $mdDialog
* .show( alert )
* .finally(function() {
* alert = undefined;
* });
* }
*
* // Close the specified dialog instance and resolve with 'finished' flag
* // Normally this is not needed, just use '$mdDialog.hide()' to close
* // the most recent dialog popup.
*
* function closeAlert() {
* $mdDialog.hide( alert, "finished" );
* alert = undefined;
* }
*
* // Dialog #2 - Demonstrate more complex dialogs construction and popup.
*
* function showCustomGreeting($event) {
* $mdDialog.show({
* targetEvent: $event,
* template:
* '<md-dialog>' +
*
* ' <md-dialog-content>Hello {{ employee }}!</md-dialog-content>' +
*
* ' <div class="md-actions">' +
* ' <md-button ng-click="closeDialog()" class="md-primary">' +
* ' Close Greeting' +
* ' </md-button>' +
* ' </div>' +
* '</md-dialog>',
* controller: 'GreetingController',
* onComplete: afterShowAnimation,
* locals: { employee: $scope.userName }
* });
*
* // When the 'enter' animation finishes...
*
* function afterShowAnimation(scope, element, options) {
* // post-show code here: DOM element focus, etc.
* }
* }
*
* // Dialog #3 - Demonstrate use of ControllerAs and passing $scope to dialog
* // Here we used ng-controller="GreetingController as vm" and
* // $scope.vm === <controller instance>
*
* function showCustomGreeting() {
*
* $mdDialog.show({
* clickOutsideToClose: true,
*
* scope: $scope, // use parent scope in template
* preserveScope: true, // do not forget this if use parent scope
* // Since GreetingController is instantiated with ControllerAs syntax
* // AND we are passing the parent '$scope' to the dialog, we MUST
* // use 'vm.<xxx>' in the template markup
*
* template: '<md-dialog>' +
* ' <md-dialog-content>' +
* ' Hi There {{vm.employee}}' +
* ' </md-dialog-content>' +
* '</md-dialog>',
*
* controller: function DialogController($scope, $mdDialog) {
* $scope.closeDialog = function() {
* $mdDialog.hide();
* }
* }
* });
* }
*
* }
*
* // Greeting controller used with the more complex 'showCustomGreeting()' custom dialog
*
* function GreetingController($scope, $mdDialog, employee) {
* // Assigned from construction <code>locals</code> options...
* $scope.employee = employee;
*
* $scope.closeDialog = function() {
* // Easily hides most recent dialog shown...
* // no specific instance reference is needed.
* $mdDialog.hide();
* };
* }
*
* })(angular);
* </hljs>
*/
/**
* @ngdoc method
* @name $mdDialog#alert
*
* @description
* Builds a preconfigured dialog with the specified message.
*
* @returns {obj} an `$mdDialogPreset` with the chainable configuration methods:
*
* - $mdDialogPreset#title(string) - sets title to string
* - $mdDialogPreset#content(string) - sets content / message to string
* - $mdDialogPreset#ok(string) - sets okay button text to string
* - $mdDialogPreset#theme(string) - sets the theme of the dialog
*
*/
/**
* @ngdoc method
* @name $mdDialog#confirm
*
* @description
* Builds a preconfigured dialog with the specified message. You can call show and the promise returned
* will be resolved only if the user clicks the confirm action on the dialog.
*
* @returns {obj} an `$mdDialogPreset` with the chainable configuration methods:
*
* Additionally, it supports the following methods:
*
* - $mdDialogPreset#title(string) - sets title to string
* - $mdDialogPreset#content(string) - sets content / message to string
* - $mdDialogPreset#ok(string) - sets okay button text to string
* - $mdDialogPreset#cancel(string) - sets cancel button text to string
* - $mdDialogPreset#theme(string) - sets the theme of the dialog
*
*/
/**
* @ngdoc method
* @name $mdDialog#show
*
* @description
* Show a dialog with the specified options.
*
* @param {object} optionsOrPreset Either provide an `$mdDialogPreset` returned from `alert()`, and
* `confirm()`, or an options object with the following properties:
* - `templateUrl` - `{string=}`: The url of a template that will be used as the content
* of the dialog.
* - `template` - `{string=}`: Same as templateUrl, except this is an actual template string.
* - `targetEvent` - `{DOMClickEvent=}`: A click's event object. When passed in as an option,
* the location of the click will be used as the starting point for the opening animation
* of the the dialog.
* - `scope` - `{object=}`: the scope to link the template / controller to. If none is specified,
* it will create a new isolate scope.
* This scope will be destroyed when the dialog is removed unless `preserveScope` is set to true.
* - `preserveScope` - `{boolean=}`: whether to preserve the scope when the element is removed. Default is false
* - `disableParentScroll` - `{boolean=}`: Whether to disable scrolling while the dialog is open.
* Default true.
* - `hasBackdrop` - `{boolean=}`: Whether there should be an opaque backdrop behind the dialog.
* Default true.
* - `clickOutsideToClose` - `{boolean=}`: Whether the user can click outside the dialog to
* close it. Default false.
* - `escapeToClose` - `{boolean=}`: Whether the user can press escape to close the dialog.
* Default true.
* - `focusOnOpen` - `{boolean=}`: An option to override focus behavior on open. Only disable if
* focusing some other way, as focus management is required for dialogs to be accessible.
* Defaults to true.
* - `controller` - `{string=}`: The controller to associate with the dialog. The controller
* will be injected with the local `$mdDialog`, which passes along a scope for the dialog.
* - `locals` - `{object=}`: An object containing key/value pairs. The keys will be used as names
* of values to inject into the controller. For example, `locals: {three: 3}` would inject
* `three` into the controller, with the value 3. If `bindToController` is true, they will be
* copied to the controller instead.
* - `bindToController` - `bool`: bind the locals to the controller, instead of passing them in.
* These values will not be available until after initialization.
* - `resolve` - `{object=}`: Similar to locals, except it takes promises as values, and the
* dialog will not open until all of the promises resolve.
* - `controllerAs` - `{string=}`: An alias to assign the controller to on the scope.
* - `parent` - `{element=}`: The element to append the dialog to. Defaults to appending
* to the root element of the application.
* - `onComplete` `{function=}`: Callback function used to announce when the show() action is
* finished.
*
* @returns {promise} A promise that can be resolved with `$mdDialog.hide()` or
* rejected with `$mdDialog.cancel()`.
*/
/**
* @ngdoc method
* @name $mdDialog#hide
*
* @description
* Hide an existing dialog and resolve the promise returned from `$mdDialog.show()`.
*
* @param {*=} response An argument for the resolved promise.
*
* @returns {promise} A promise that is resolved when the dialog has been closed.
*/
/**
* @ngdoc method
* @name $mdDialog#cancel
*
* @description
* Hide an existing dialog and reject the promise returned from `$mdDialog.show()`.
*
* @param {*=} response An argument for the rejected promise.
*
* @returns {promise} A promise that is resolved when the dialog has been closed.
*/
function MdDialogProvider($$interimElementProvider) {
var alertDialogMethods = ['title', 'content', 'ariaLabel', 'ok'];
advancedDialogOptions.$inject = ["$mdDialog", "$mdTheming"];
dialogDefaultOptions.$inject = ["$mdAria", "$document", "$mdUtil", "$mdConstant", "$mdTheming", "$mdDialog", "$timeout", "$rootElement", "$animate", "$$rAF", "$q"];
return $$interimElementProvider('$mdDialog')
.setDefaults({
methods: ['disableParentScroll', 'hasBackdrop', 'clickOutsideToClose', 'escapeToClose', 'targetEvent', 'parent'],
options: dialogDefaultOptions
})
.addPreset('alert', {
methods: ['title', 'content', 'ariaLabel', 'ok', 'theme'],
options: advancedDialogOptions
})
.addPreset('confirm', {
methods: ['title', 'content', 'ariaLabel', 'ok', 'cancel', 'theme'],
options: advancedDialogOptions
});
/* ngInject */
function advancedDialogOptions($mdDialog, $mdTheming) {
return {
template: [
'<md-dialog md-theme="{{ dialog.theme }}" aria-label="{{ dialog.ariaLabel }}">',
'<md-dialog-content role="document" tabIndex="-1">',
'<h2 class="md-title">{{ dialog.title }}</h2>',
'<p>{{ dialog.content }}</p>',
'</md-dialog-content>',
'<div class="md-actions">',
'<md-button ng-if="dialog.$type == \'confirm\'"' +
' ng-click="dialog.abort()" class="md-primary">',
'{{ dialog.cancel }}',
'</md-button>',
'<md-button ng-click="dialog.hide()" class="md-primary">',
'{{ dialog.ok }}',
'</md-button>',
'</div>',
'</md-dialog>'
].join(''),
controller: function mdDialogCtrl() {
this.hide = function() {
$mdDialog.hide(true);
};
this.abort = function() {
$mdDialog.cancel();
};
},
controllerAs: 'dialog',
bindToController: true,
theme: $mdTheming.defaultTheme()
};
}
/* ngInject */
function dialogDefaultOptions($mdAria, $document, $mdUtil, $mdConstant, $mdTheming, $mdDialog, $timeout, $rootElement, $animate, $$rAF, $q) {
return {
hasBackdrop: true,
isolateScope: true,
onShow: onShow,
onRemove: onRemove,
clickOutsideToClose: false,
escapeToClose: true,
targetEvent: null,
focusOnOpen: true,
disableParentScroll: true,
transformTemplate: function(template) {
return '<div class="md-dialog-container">' + template + '</div>';
}
};
function trapFocus(ev) {
var dialog = document.querySelector('md-dialog');
if (dialog && !dialog.contains(ev.target)) {
ev.stopImmediatePropagation();
dialog.focus();
}
}
// On show method for dialogs
function onShow(scope, element, options) {
angular.element($document[0].body).addClass('md-dialog-is-showing');
element = $mdUtil.extractElementByName(element, 'md-dialog');
// Incase the user provides a raw dom element, always wrap it in jqLite
options.parent = angular.element(options.parent);
options.popInTarget = angular.element((options.targetEvent || {}).target);
var closeButton = findCloseButton();
if (options.hasBackdrop) {
// Fix for IE 10
var computeFrom = (options.parent[0] == $document[0].body && $document[0].documentElement
&& $document[0].documentElement.scrollTop) ? angular.element($document[0].documentElement) : options.parent;
var parentOffset = computeFrom.prop('scrollTop');
options.backdrop = angular.element('<md-backdrop class="md-dialog-backdrop md-opaque">');
options.backdrop.css('top', parentOffset +'px');
$mdTheming.inherit(options.backdrop, options.parent);
$animate.enter(options.backdrop, options.parent);
element.css('top', parentOffset +'px');
}
var role = 'dialog',
elementToFocus = closeButton;
if (options.$type === 'alert') {
role = 'alertdialog';
elementToFocus = element.find('md-dialog-content');
}
configureAria(element.find('md-dialog'), role, options);
document.addEventListener('focus', trapFocus, true);
if (options.disableParentScroll) {
options.lastOverflow = options.parent.css('overflow');
options.parent.css('overflow', 'hidden');
}
return dialogPopIn(
element,
options.parent,
options.popInTarget && options.popInTarget.length && options.popInTarget
)
.then(function() {
applyAriaToSiblings(element, true);
if (options.escapeToClose) {
options.rootElementKeyupCallback = function(e) {
if (e.keyCode === $mdConstant.KEY_CODE.ESCAPE) {
$timeout($mdDialog.cancel);
}
};
$rootElement.on('keyup', options.rootElementKeyupCallback);
}
if (options.clickOutsideToClose) {
options.dialogClickOutsideCallback = function(ev) {
// Only close if we click the flex container outside the backdrop
if (ev.target === element[0]) {
$timeout($mdDialog.cancel);
}
};
element.on('click', options.dialogClickOutsideCallback);
}
if (options.focusOnOpen) {
elementToFocus.focus();
}
});
function findCloseButton() {
//If no element with class dialog-close, try to find the last
//button child in md-actions and assume it is a close button
var closeButton = element[0].querySelector('.dialog-close');
if (!closeButton) {
var actionButtons = element[0].querySelectorAll('.md-actions button');
closeButton = actionButtons[ actionButtons.length - 1 ];
}
return angular.element(closeButton);
}
}
// On remove function for all dialogs
function onRemove(scope, element, options) {
angular.element($document[0].body).removeClass('md-dialog-is-showing');
if (options.backdrop) {
$animate.leave(options.backdrop);
}
if (options.disableParentScroll) {
options.parent.css('overflow', options.lastOverflow);
delete options.lastOverflow;
}
if (options.escapeToClose) {
$rootElement.off('keyup', options.rootElementKeyupCallback);
}
if (options.clickOutsideToClose) {
element.off('click', options.dialogClickOutsideCallback);
}
applyAriaToSiblings(element, false);
document.removeEventListener('focus', trapFocus, true);
return dialogPopOut(
element,
options.parent,
options.popInTarget && options.popInTarget.length && options.popInTarget
).then(function() {
element.remove();
options.popInTarget && options.popInTarget.focus();
});
}
/**
* Inject ARIA-specific attributes appropriate for Dialogs
*/
function configureAria(element, role, options) {
element.attr({
'role': role,
'tabIndex': '-1'
});
var dialogContent = element.find('md-dialog-content');
if (dialogContent.length === 0){
dialogContent = element;
}
var dialogId = element.attr('id') || ('dialog_' + $mdUtil.nextUid());
dialogContent.attr('id', dialogId);
element.attr('aria-describedby', dialogId);
if (options.ariaLabel) {
$mdAria.expect(element, 'aria-label', options.ariaLabel);
}
else {
$mdAria.expectAsync(element, 'aria-label', function() {
var words = dialogContent.text().split(/\s+/);
if (words.length > 3) words = words.slice(0,3).concat('...');
return words.join(' ');
});
}
}
/**
* Utility function to filter out raw DOM nodes
*/
function isNodeOneOf(elem, nodeTypeArray) {
if (nodeTypeArray.indexOf(elem.nodeName) !== -1) {
return true;
}
}
/**
* Walk DOM to apply or remove aria-hidden on sibling nodes
* and parent sibling nodes
*
* Prevents screen reader interaction behind modal window
* on swipe interfaces
*/
function applyAriaToSiblings(element, value) {
var attribute = 'aria-hidden';
// get raw DOM node
element = element[0];
function walkDOM(element) {
while (element.parentNode) {
if (element === document.body) {
return;
}
var children = element.parentNode.children;
for (var i = 0; i < children.length; i++) {
// skip over child if it is an ascendant of the dialog
// or a script or style tag
if (element !== children[i] && !isNodeOneOf(children[i], ['SCRIPT', 'STYLE'])) {
children[i].setAttribute(attribute, value);
}
}
walkDOM(element = element.parentNode);
}
}
walkDOM(element);
}
function dialogPopIn(container, parentElement, clickElement) {
var dialogEl = container.find('md-dialog');
parentElement.append(container);
transformToClickElement(dialogEl, clickElement);
$$rAF(function() {
dialogEl.addClass('transition-in')
.css($mdConstant.CSS.TRANSFORM, '');
});
return $mdUtil.transitionEndPromise(dialogEl);
}
function dialogPopOut(container, parentElement, clickElement) {
var dialogEl = container.find('md-dialog');
dialogEl.addClass('transition-out').removeClass('transition-in');
transformToClickElement(dialogEl, clickElement);
return $mdUtil.transitionEndPromise(dialogEl);
}
function transformToClickElement(dialogEl, clickElement) {
if (clickElement) {
var clickRect = clickElement[0].getBoundingClientRect();
var dialogRect = dialogEl[0].getBoundingClientRect();
var scaleX = Math.min(0.5, clickRect.width / dialogRect.width);
var scaleY = Math.min(0.5, clickRect.height / dialogRect.height);
dialogEl.css($mdConstant.CSS.TRANSFORM, 'translate3d(' +
(-dialogRect.left + clickRect.left + clickRect.width/2 - dialogRect.width/2) + 'px,' +
(-dialogRect.top + clickRect.top + clickRect.height/2 - dialogRect.height/2) + 'px,' +
'0) scale(' + scaleX + ',' + scaleY + ')'
);
}
}
function dialogTransitionEnd(dialogEl) {
var deferred = $q.defer();
dialogEl.on($mdConstant.CSS.TRANSITIONEND, finished);
function finished(ev) {
//Make sure this transitionend didn't bubble up from a child
if (ev.target === dialogEl[0]) {
dialogEl.off($mdConstant.CSS.TRANSITIONEND, finished);
deferred.resolve();
}
}
return deferred.promise;
}
}
}
MdDialogProvider.$inject = ["$$interimElementProvider"];
})(window, window.angular);
|
