aboutsummaryrefslogtreecommitdiffstats
path: root/vnfmarket/common/thirdparty/angular-material/modules/closure/dialog/dialog.js
diff options
context:
space:
mode:
authorseshukm <seshu.kumar.m@huawei.com>2017-03-08 11:54:56 +0530
committerseshukm <seshu.kumar.m@huawei.com>2017-03-08 11:54:56 +0530
commit80b299e8c4f290e3b16f35eea922cac989b6e767 (patch)
treeb99086734507728ae096349cca4d0258335dbf4f /vnfmarket/common/thirdparty/angular-material/modules/closure/dialog/dialog.js
parent5fa92b4eb456b5f4959c39578a3c6e3555c4ae7d (diff)
VnfMarket place refactor
IssueId : CLIENT-4 Change-Id: Ia1b076400f9c3bedf9db714099a608ece392aa59 Signed-off-by: seshukm <seshu.kumar.m@huawei.com>
Diffstat (limited to 'vnfmarket/common/thirdparty/angular-material/modules/closure/dialog/dialog.js')
-rw-r--r--vnfmarket/common/thirdparty/angular-material/modules/closure/dialog/dialog.js1287
1 files changed, 0 insertions, 1287 deletions
diff --git a/vnfmarket/common/thirdparty/angular-material/modules/closure/dialog/dialog.js b/vnfmarket/common/thirdparty/angular-material/modules/closure/dialog/dialog.js
deleted file mode 100644
index b3aeb776..00000000
--- a/vnfmarket/common/thirdparty/angular-material/modules/closure/dialog/dialog.js
+++ /dev/null
@@ -1,1287 +0,0 @@
-/*!
- * Angular Material Design
- * https://github.com/angular/material
- * @license MIT
- * v1.1.3
- */
-goog.provide('ngmaterial.components.dialog');
-goog.require('ngmaterial.components.backdrop');
-goog.require('ngmaterial.core');
-/**
- * @ngdoc module
- * @name material.components.dialog
- */
-MdDialogDirective['$inject'] = ["$$rAF", "$mdTheming", "$mdDialog"];
-MdDialogProvider['$inject'] = ["$$interimElementProvider"];
-angular
- .module('material.components.dialog', [
- 'material.core',
- 'material.components.backdrop'
- ])
- .directive('mdDialog', MdDialogDirective)
- .provider('$mdDialog', MdDialogProvider);
-
-/**
- * @ngdoc directive
- * @name mdDialog
- * @module material.components.dialog
- *
- * @restrict E
- *
- * @description
- * `<md-dialog>` - The dialog's template must be inside this element.
- *
- * Inside, use an `<md-dialog-content>` element for the dialog's content, and use
- * an `<md-dialog-actions>` element for the dialog's actions.
- *
- * ## CSS
- * - `.md-dialog-content` - class that sets the padding on the content as the spec file
- *
- * ## Notes
- * - If you specify an `id` for the `<md-dialog>`, the `<md-dialog-content>` will have the same `id`
- * prefixed with `dialogContent_`.
- *
- * @usage
- * ### Dialog template
- * <hljs lang="html">
- * <md-dialog aria-label="List dialog">
- * <md-dialog-content>
- * <md-list>
- * <md-list-item ng-repeat="item in items">
- * <p>Number {{item}}</p>
- * </md-list-item>
- * </md-list>
- * </md-dialog-content>
- * <md-dialog-actions>
- * <md-button ng-click="closeDialog()" class="md-primary">Close Dialog</md-button>
- * </md-dialog-actions>
- * </md-dialog>
- * </hljs>
- */
-function MdDialogDirective($$rAF, $mdTheming, $mdDialog) {
- return {
- restrict: 'E',
- link: function(scope, element) {
- element.addClass('_md'); // private md component indicator for styling
-
- $mdTheming(element);
- $$rAF(function() {
- var images;
- var content = element[0].querySelector('md-dialog-content');
-
- if (content) {
- images = content.getElementsByTagName('img');
- addOverflowClass();
- //-- delayed image loading may impact scroll height, check after images are loaded
- angular.element(images).on('load', addOverflowClass);
- }
-
- scope.$on('$destroy', function() {
- $mdDialog.destroy(element);
- });
-
- /**
- *
- */
- function addOverflowClass() {
- element.toggleClass('md-content-overflow', content.scrollHeight > content.clientHeight);
- }
-
-
- });
- }
- };
-}
-
-/**
- * @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 `<md-dialog-actions>` element 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`.
- *
- * ## CSS
- * - `.md-dialog-content` - class that sets the padding on the content as the spec file
- *
- * @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',
- * textContent: '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>' +
- * ' <md-dialog-actions>' +
- * ' <md-button ng-click="closeDialog()" class="md-primary">' +
- * ' Close Dialog' +
- * ' </md-button>' +
- * ' </md-dialog-actions>' +
- * '</md-dialog>',
- * locals: {
- * items: $scope.items
- * },
- * controller: DialogController
- * });
- * function DialogController($scope, $mdDialog, items) {
- * $scope.items = items;
- * $scope.closeDialog = function() {
- * $mdDialog.hide();
- * }
- * }
- * }
- * }
- * })(angular);
- * </hljs>
- *
- * ### Multiple Dialogs
- * Using the `multiple` option for the `$mdDialog` service allows developers to show multiple dialogs
- * at the same time.
- *
- * <hljs lang="js">
- * // From plain options
- * $mdDialog.show({
- * multiple: true
- * });
- *
- * // From a dialog preset
- * $mdDialog.show(
- * $mdDialog
- * .alert()
- * .multiple(true)
- * );
- *
- * </hljs>
- *
- * ### Pre-Rendered Dialogs
- * By using the `contentElement` option, it is possible to use an already existing element in the DOM.
- *
- * > Pre-rendered dialogs will be not linked to any scope and will not instantiate any new controller.<br/>
- * > You can manually link the elements to a scope or instantiate a controller from the template (`ng-controller`)
- *
- * <hljs lang="js">
- * $scope.showPrerenderedDialog = function() {
- * $mdDialog.show({
- * contentElement: '#myStaticDialog',
- * parent: angular.element(document.body)
- * });
- * };
- * </hljs>
- *
- * When using a string as value, `$mdDialog` will automatically query the DOM for the specified CSS selector.
- *
- * <hljs lang="html">
- * <div style="visibility: hidden">
- * <div class="md-dialog-container" id="myStaticDialog">
- * <md-dialog>
- * This is a pre-rendered dialog.
- * </md-dialog>
- * </div>
- * </div>
- * </hljs>
- *
- * **Notice**: It is important, to use the `.md-dialog-container` as the content element, otherwise the dialog
- * will not show up.
- *
- * It also possible to use a DOM element for the `contentElement` option.
- * - `contentElement: document.querySelector('#myStaticDialog')`
- * - `contentElement: angular.element(TEMPLATE)`
- *
- * When using a `template` as content element, it will be not compiled upon open.
- * This allows you to compile the element yourself and use it each time the dialog opens.
- *
- * ### Custom Presets
- * Developers are also able to create their own preset, which can be easily used without repeating
- * their options each time.
- *
- * <hljs lang="js">
- * $mdDialogProvider.addPreset('testPreset', {
- * options: function() {
- * return {
- * template:
- * '<md-dialog>' +
- * 'This is a custom preset' +
- * '</md-dialog>',
- * controllerAs: 'dialog',
- * bindToController: true,
- * clickOutsideToClose: true,
- * escapeToClose: true
- * };
- * }
- * });
- * </hljs>
- *
- * After you created your preset at config phase, you can easily access it.
- *
- * <hljs lang="js">
- * $mdDialog.show(
- * $mdDialog.testPreset()
- * );
- * </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)
- * .textContent('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>' +
- *
- * ' <md-dialog-actions>' +
- * ' <md-button ng-click="closeDialog()" class="md-primary">' +
- * ' Close Greeting' +
- * ' </md-button>' +
- * ' </md-dialog-actions>' +
- * '</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 the alert title.
- * - $mdDialogPreset#textContent(string) - Sets the alert message.
- * - $mdDialogPreset#htmlContent(string) - Sets the alert message as HTML. Requires ngSanitize
- * module to be loaded. HTML is not run through Angular's compiler.
- * - $mdDialogPreset#ok(string) - Sets the alert "Okay" button text.
- * - $mdDialogPreset#theme(string) - Sets the theme of the alert dialog.
- * - $mdDialogPreset#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.
- *
- */
-
-/**
- * @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 the confirm title.
- * - $mdDialogPreset#textContent(string) - Sets the confirm message.
- * - $mdDialogPreset#htmlContent(string) - Sets the confirm message as HTML. Requires ngSanitize
- * module to be loaded. HTML is not run through Angular's compiler.
- * - $mdDialogPreset#ok(string) - Sets the confirm "Okay" button text.
- * - $mdDialogPreset#cancel(string) - Sets the confirm "Cancel" button text.
- * - $mdDialogPreset#theme(string) - Sets the theme of the confirm dialog.
- * - $mdDialogPreset#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.
- *
- */
-
-/**
- * @ngdoc method
- * @name $mdDialog#prompt
- *
- * @description
- * Builds a preconfigured dialog with the specified message and input box. You can call show and the promise returned
- * will be resolved only if the user clicks the prompt action on the dialog, passing the input value as the first argument.
- *
- * @returns {obj} an `$mdDialogPreset` with the chainable configuration methods:
- *
- * Additionally, it supports the following methods:
- *
- * - $mdDialogPreset#title(string) - Sets the prompt title.
- * - $mdDialogPreset#textContent(string) - Sets the prompt message.
- * - $mdDialogPreset#htmlContent(string) - Sets the prompt message as HTML. Requires ngSanitize
- * module to be loaded. HTML is not run through Angular's compiler.
- * - $mdDialogPreset#placeholder(string) - Sets the placeholder text for the input.
- * - $mdDialogPreset#initialValue(string) - Sets the initial value for the prompt input.
- * - $mdDialogPreset#ok(string) - Sets the prompt "Okay" button text.
- * - $mdDialogPreset#cancel(string) - Sets the prompt "Cancel" button text.
- * - $mdDialogPreset#theme(string) - Sets the theme of the prompt dialog.
- * - $mdDialogPreset#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.
- *
- */
-
-/**
- * @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=}`: HTML template to show in the dialog. This **must** be trusted HTML
- * with respect to Angular's [$sce service](https://docs.angularjs.org/api/ng/service/$sce).
- * This template should **never** be constructed with any kind of user input or user data.
- * - `contentElement` - `{string|Element}`: Instead of using a template, which will be compiled each time a
- * dialog opens, you can also use a DOM element.<br/>
- * * When specifying an element, which is present on the DOM, `$mdDialog` will temporary fetch the element into
- * the dialog and restores it at the old DOM position upon close.
- * * When specifying a string, the string be used as a CSS selector, to lookup for the element in the DOM.
- * - `autoWrap` - `{boolean=}`: Whether or not to automatically wrap the template with a
- * `<md-dialog>` tag if one is not provided. Defaults to true. Can be disabled if you provide a
- * custom dialog directive.
- * - `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.
- * - `openFrom` - `{string|Element|object}`: The query selector, DOM element or the Rect object
- * that is used to determine the bounds (top, left, height, width) from which the Dialog will
- * originate.
- * - `closeTo` - `{string|Element|object}`: The query selector, DOM element or the Rect object
- * that is used to determine the bounds (top, left, height, width) to which the Dialog will
- * target.
- * - `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` - `{function|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.
- * - `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.
- * - `onShowing` - `function(scope, element)`: Callback function used to announce the show() action is
- * starting.
- * - `onComplete` - `function(scope, element)`: Callback function used to announce when the show() action is
- * finished.
- * - `onRemoving` - `function(element, removePromise)`: Callback function used to announce the
- * close/hide() action is starting. This allows developers to run custom animations
- * in parallel the close animations.
- * - `fullscreen` `{boolean=}`: An option to toggle whether the dialog should show in fullscreen
- * or not. Defaults to `false`.
- * @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) {
- // Elements to capture and redirect focus when the user presses tab at the dialog boundary.
- advancedDialogOptions['$inject'] = ["$mdDialog", "$mdConstant"];
- dialogDefaultOptions['$inject'] = ["$mdDialog", "$mdAria", "$mdUtil", "$mdConstant", "$animate", "$document", "$window", "$rootElement", "$log", "$injector", "$mdTheming", "$interpolate", "$mdInteraction"];
- var topFocusTrap, bottomFocusTrap;
-
- return $$interimElementProvider('$mdDialog')
- .setDefaults({
- methods: ['disableParentScroll', 'hasBackdrop', 'clickOutsideToClose', 'escapeToClose',
- 'targetEvent', 'closeTo', 'openFrom', 'parent', 'fullscreen', 'multiple'],
- options: dialogDefaultOptions
- })
- .addPreset('alert', {
- methods: ['title', 'htmlContent', 'textContent', 'content', 'ariaLabel', 'ok', 'theme',
- 'css'],
- options: advancedDialogOptions
- })
- .addPreset('confirm', {
- methods: ['title', 'htmlContent', 'textContent', 'content', 'ariaLabel', 'ok', 'cancel',
- 'theme', 'css'],
- options: advancedDialogOptions
- })
- .addPreset('prompt', {
- methods: ['title', 'htmlContent', 'textContent', 'initialValue', 'content', 'placeholder', 'ariaLabel',
- 'ok', 'cancel', 'theme', 'css'],
- options: advancedDialogOptions
- });
-
- /* ngInject */
- function advancedDialogOptions($mdDialog, $mdConstant) {
- return {
- template: [
- '<md-dialog md-theme="{{ dialog.theme || dialog.defaultTheme }}" aria-label="{{ dialog.ariaLabel }}" ng-class="dialog.css">',
- ' <md-dialog-content class="md-dialog-content" role="document" tabIndex="-1">',
- ' <h2 class="md-title">{{ dialog.title }}</h2>',
- ' <div ng-if="::dialog.mdHtmlContent" class="md-dialog-content-body" ',
- ' ng-bind-html="::dialog.mdHtmlContent"></div>',
- ' <div ng-if="::!dialog.mdHtmlContent" class="md-dialog-content-body">',
- ' <p>{{::dialog.mdTextContent}}</p>',
- ' </div>',
- ' <md-input-container md-no-float ng-if="::dialog.$type == \'prompt\'" class="md-prompt-input-container">',
- ' <input ng-keypress="dialog.keypress($event)" md-autofocus ng-model="dialog.result" ' +
- ' placeholder="{{::dialog.placeholder}}">',
- ' </md-input-container>',
- ' </md-dialog-content>',
- ' <md-dialog-actions>',
- ' <md-button ng-if="dialog.$type === \'confirm\' || dialog.$type === \'prompt\'"' +
- ' ng-click="dialog.abort()" class="md-primary md-cancel-button">',
- ' {{ dialog.cancel }}',
- ' </md-button>',
- ' <md-button ng-click="dialog.hide()" class="md-primary md-confirm-button" md-autofocus="dialog.$type===\'alert\'">',
- ' {{ dialog.ok }}',
- ' </md-button>',
- ' </md-dialog-actions>',
- '</md-dialog>'
- ].join('').replace(/\s\s+/g, ''),
- controller: function mdDialogCtrl() {
- var isPrompt = this.$type == 'prompt';
-
- if (isPrompt && this.initialValue) {
- this.result = this.initialValue;
- }
-
- this.hide = function() {
- $mdDialog.hide(isPrompt ? this.result : true);
- };
- this.abort = function() {
- $mdDialog.cancel();
- };
- this.keypress = function($event) {
- if ($event.keyCode === $mdConstant.KEY_CODE.ENTER) {
- $mdDialog.hide(this.result);
- }
- };
- },
- controllerAs: 'dialog',
- bindToController: true,
- };
- }
-
- /* ngInject */
- function dialogDefaultOptions($mdDialog, $mdAria, $mdUtil, $mdConstant, $animate, $document, $window, $rootElement,
- $log, $injector, $mdTheming, $interpolate, $mdInteraction) {
-
- return {
- hasBackdrop: true,
- isolateScope: true,
- onCompiling: beforeCompile,
- onShow: onShow,
- onShowing: beforeShow,
- onRemove: onRemove,
- clickOutsideToClose: false,
- escapeToClose: true,
- targetEvent: null,
- closeTo: null,
- openFrom: null,
- focusOnOpen: true,
- disableParentScroll: true,
- autoWrap: true,
- fullscreen: false,
- transformTemplate: function(template, options) {
- // Make the dialog container focusable, because otherwise the focus will be always redirected to
- // an element outside of the container, and the focus trap won't work probably..
- // Also the tabindex is needed for the `escapeToClose` functionality, because
- // the keyDown event can't be triggered when the focus is outside of the container.
- var startSymbol = $interpolate.startSymbol();
- var endSymbol = $interpolate.endSymbol();
- var theme = startSymbol + (options.themeWatch ? '' : '::') + 'theme' + endSymbol;
- return '<div class="md-dialog-container" tabindex="-1" md-theme="' + theme + '">' + validatedTemplate(template) + '</div>';
-
- /**
- * The specified template should contain a <md-dialog> wrapper element....
- */
- function validatedTemplate(template) {
- if (options.autoWrap && !/<\/md-dialog>/g.test(template)) {
- return '<md-dialog>' + (template || '') + '</md-dialog>';
- } else {
- return template || '';
- }
- }
- }
- };
-
- function beforeCompile(options) {
- // Automatically apply the theme, if the user didn't specify a theme explicitly.
- // Those option changes need to be done, before the compilation has started, because otherwise
- // the option changes will be not available in the $mdCompilers locales.
- options.defaultTheme = $mdTheming.defaultTheme();
-
- detectTheming(options);
- }
-
- function beforeShow(scope, element, options, controller) {
-
- if (controller) {
- var mdHtmlContent = controller.htmlContent || options.htmlContent || '';
- var mdTextContent = controller.textContent || options.textContent ||
- controller.content || options.content || '';
-
- if (mdHtmlContent && !$injector.has('$sanitize')) {
- throw Error('The ngSanitize module must be loaded in order to use htmlContent.');
- }
-
- if (mdHtmlContent && mdTextContent) {
- throw Error('md-dialog cannot have both `htmlContent` and `textContent`');
- }
-
- // Only assign the content if nothing throws, otherwise it'll still be compiled.
- controller.mdHtmlContent = mdHtmlContent;
- controller.mdTextContent = mdTextContent;
- }
- }
-
- /** Show method for dialogs */
- function onShow(scope, element, options, controller) {
- angular.element($document[0].body).addClass('md-dialog-is-showing');
-
- var dialogElement = element.find('md-dialog');
-
- // Once a dialog has `ng-cloak` applied on his template the dialog animation will not work properly.
- // This is a very common problem, so we have to notify the developer about this.
- if (dialogElement.hasClass('ng-cloak')) {
- var message = '$mdDialog: using `<md-dialog ng-cloak>` will affect the dialog opening animations.';
- $log.warn( message, element[0] );
- }
-
- captureParentAndFromToElements(options);
- configureAria(dialogElement, options);
- showBackdrop(scope, element, options);
- activateListeners(element, options);
-
- return dialogPopIn(element, options)
- .then(function() {
- lockScreenReader(element, options);
- warnDeprecatedActions();
- focusOnOpen();
- });
-
- /**
- * Check to see if they used the deprecated .md-actions class and log a warning
- */
- function warnDeprecatedActions() {
- if (element[0].querySelector('.md-actions')) {
- $log.warn('Using a class of md-actions is deprecated, please use <md-dialog-actions>.');
- }
- }
-
- /**
- * For alerts, focus on content... otherwise focus on
- * the close button (or equivalent)
- */
- function focusOnOpen() {
- if (options.focusOnOpen) {
- var target = $mdUtil.findFocusTarget(element) || findCloseButton() || dialogElement;
- target.focus();
- }
-
- /**
- * If no element with class dialog-close, try to find the last
- * button child in md-actions and assume it is a close button.
- *
- * If we find no actions at all, log a warning to the console.
- */
- function findCloseButton() {
- return element[0].querySelector('.dialog-close, md-dialog-actions button:last-child');
- }
- }
- }
-
- /**
- * Remove function for all dialogs
- */
- function onRemove(scope, element, options) {
- options.deactivateListeners();
- options.unlockScreenReader();
- options.hideBackdrop(options.$destroy);
-
- // Remove the focus traps that we added earlier for keeping focus within the dialog.
- if (topFocusTrap && topFocusTrap.parentNode) {
- topFocusTrap.parentNode.removeChild(topFocusTrap);
- }
-
- if (bottomFocusTrap && bottomFocusTrap.parentNode) {
- bottomFocusTrap.parentNode.removeChild(bottomFocusTrap);
- }
-
- // For navigation $destroy events, do a quick, non-animated removal,
- // but for normal closes (from clicks, etc) animate the removal
- return !!options.$destroy ? detachAndClean() : animateRemoval().then( detachAndClean );
-
- /**
- * For normal closes, animate the removal.
- * For forced closes (like $destroy events), skip the animations
- */
- function animateRemoval() {
- return dialogPopOut(element, options);
- }
-
- /**
- * Detach the element
- */
- function detachAndClean() {
- angular.element($document[0].body).removeClass('md-dialog-is-showing');
-
- // Reverse the container stretch if using a content element.
- if (options.contentElement) {
- options.reverseContainerStretch();
- }
-
- // Exposed cleanup function from the $mdCompiler.
- options.cleanupElement();
-
- // Restores the focus to the origin element if the last interaction upon opening was a keyboard.
- if (!options.$destroy && options.originInteraction === 'keyboard') {
- options.origin.focus();
- }
- }
- }
-
- function detectTheming(options) {
- // Once the user specifies a targetEvent, we will automatically try to find the correct
- // nested theme.
- var targetEl;
- if (options.targetEvent && options.targetEvent.target) {
- targetEl = angular.element(options.targetEvent.target);
- }
-
- var themeCtrl = targetEl && targetEl.controller('mdTheme');
-
- if (!themeCtrl) {
- return;
- }
-
- options.themeWatch = themeCtrl.$shouldWatch;
-
- var theme = options.theme || themeCtrl.$mdTheme;
-
- if (theme) {
- options.scope.theme = theme;
- }
-
- var unwatch = themeCtrl.registerChanges(function (newTheme) {
- options.scope.theme = newTheme;
-
- if (!options.themeWatch) {
- unwatch();
- }
- });
- }
-
- /**
- * Capture originator/trigger/from/to element information (if available)
- * and the parent container for the dialog; defaults to the $rootElement
- * unless overridden in the options.parent
- */
- function captureParentAndFromToElements(options) {
- options.origin = angular.extend({
- element: null,
- bounds: null,
- focus: angular.noop
- }, options.origin || {});
-
- options.parent = getDomElement(options.parent, $rootElement);
- options.closeTo = getBoundingClientRect(getDomElement(options.closeTo));
- options.openFrom = getBoundingClientRect(getDomElement(options.openFrom));
-
- if ( options.targetEvent ) {
- options.origin = getBoundingClientRect(options.targetEvent.target, options.origin);
- options.originInteraction = $mdInteraction.getLastInteractionType();
- }
-
-
- /**
- * Identify the bounding RECT for the target element
- *
- */
- function getBoundingClientRect (element, orig) {
- var source = angular.element((element || {}));
- if (source && source.length) {
- // Compute and save the target element's bounding rect, so that if the
- // element is hidden when the dialog closes, we can shrink the dialog
- // back to the same position it expanded from.
- //
- // Checking if the source is a rect object or a DOM element
- var bounds = {top:0,left:0,height:0,width:0};
- var hasFn = angular.isFunction(source[0].getBoundingClientRect);
-
- return angular.extend(orig || {}, {
- element : hasFn ? source : undefined,
- bounds : hasFn ? source[0].getBoundingClientRect() : angular.extend({}, bounds, source[0]),
- focus : angular.bind(source, source.focus),
- });
- }
- }
-
- /**
- * If the specifier is a simple string selector, then query for
- * the DOM element.
- */
- function getDomElement(element, defaultElement) {
- if (angular.isString(element)) {
- element = $document[0].querySelector(element);
- }
-
- // If we have a reference to a raw dom element, always wrap it in jqLite
- return angular.element(element || defaultElement);
- }
-
- }
-
- /**
- * Listen for escape keys and outside clicks to auto close
- */
- function activateListeners(element, options) {
- var window = angular.element($window);
- var onWindowResize = $mdUtil.debounce(function() {
- stretchDialogContainerToViewport(element, options);
- }, 60);
-
- var removeListeners = [];
- var smartClose = function() {
- // Only 'confirm' dialogs have a cancel button... escape/clickOutside will
- // cancel or fallback to hide.
- var closeFn = ( options.$type == 'alert' ) ? $mdDialog.hide : $mdDialog.cancel;
- $mdUtil.nextTick(closeFn, true);
- };
-
- if (options.escapeToClose) {
- var parentTarget = options.parent;
- var keyHandlerFn = function(ev) {
- if (ev.keyCode === $mdConstant.KEY_CODE.ESCAPE) {
- ev.stopPropagation();
- ev.preventDefault();
-
- smartClose();
- }
- };
-
- // Add keydown listeners
- element.on('keydown', keyHandlerFn);
- parentTarget.on('keydown', keyHandlerFn);
-
- // Queue remove listeners function
- removeListeners.push(function() {
-
- element.off('keydown', keyHandlerFn);
- parentTarget.off('keydown', keyHandlerFn);
-
- });
- }
-
- // Register listener to update dialog on window resize
- window.on('resize', onWindowResize);
-
- removeListeners.push(function() {
- window.off('resize', onWindowResize);
- });
-
- if (options.clickOutsideToClose) {
- var target = element;
- var sourceElem;
-
- // Keep track of the element on which the mouse originally went down
- // so that we can only close the backdrop when the 'click' started on it.
- // A simple 'click' handler does not work,
- // it sets the target object as the element the mouse went down on.
- var mousedownHandler = function(ev) {
- sourceElem = ev.target;
- };
-
- // We check if our original element and the target is the backdrop
- // because if the original was the backdrop and the target was inside the dialog
- // we don't want to dialog to close.
- var mouseupHandler = function(ev) {
- if (sourceElem === target[0] && ev.target === target[0]) {
- ev.stopPropagation();
- ev.preventDefault();
-
- smartClose();
- }
- };
-
- // Add listeners
- target.on('mousedown', mousedownHandler);
- target.on('mouseup', mouseupHandler);
-
- // Queue remove listeners function
- removeListeners.push(function() {
- target.off('mousedown', mousedownHandler);
- target.off('mouseup', mouseupHandler);
- });
- }
-
- // Attach specific `remove` listener handler
- options.deactivateListeners = function() {
- removeListeners.forEach(function(removeFn) {
- removeFn();
- });
- options.deactivateListeners = null;
- };
- }
-
- /**
- * Show modal backdrop element...
- */
- function showBackdrop(scope, element, options) {
-
- if (options.disableParentScroll) {
- // !! DO this before creating the backdrop; since disableScrollAround()
- // configures the scroll offset; which is used by mdBackDrop postLink()
- options.restoreScroll = $mdUtil.disableScrollAround(element, options.parent);
- }
-
- if (options.hasBackdrop) {
- options.backdrop = $mdUtil.createBackdrop(scope, "md-dialog-backdrop md-opaque");
- $animate.enter(options.backdrop, options.parent);
- }
-
- /**
- * Hide modal backdrop element...
- */
- options.hideBackdrop = function hideBackdrop($destroy) {
- if (options.backdrop) {
- if ( !!$destroy ) options.backdrop.remove();
- else $animate.leave(options.backdrop);
- }
-
-
- if (options.disableParentScroll) {
- options.restoreScroll && options.restoreScroll();
- delete options.restoreScroll;
- }
-
- options.hideBackdrop = null;
- };
- }
-
- /**
- * Inject ARIA-specific attributes appropriate for Dialogs
- */
- function configureAria(element, options) {
-
- var role = (options.$type === 'alert') ? 'alertdialog' : 'dialog';
- var dialogContent = element.find('md-dialog-content');
- var existingDialogId = element.attr('id');
- var dialogContentId = 'dialogContent_' + (existingDialogId || $mdUtil.nextUid());
-
- element.attr({
- 'role': role,
- 'tabIndex': '-1'
- });
-
- if (dialogContent.length === 0) {
- dialogContent = element;
- // If the dialog element already had an ID, don't clobber it.
- if (existingDialogId) {
- dialogContentId = existingDialogId;
- }
- }
-
- dialogContent.attr('id', dialogContentId);
- element.attr('aria-describedby', dialogContentId);
-
- 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(' ');
- });
- }
-
- // Set up elements before and after the dialog content to capture focus and
- // redirect back into the dialog.
- topFocusTrap = document.createElement('div');
- topFocusTrap.classList.add('md-dialog-focus-trap');
- topFocusTrap.tabIndex = 0;
-
- bottomFocusTrap = topFocusTrap.cloneNode(false);
-
- // When focus is about to move out of the dialog, we want to intercept it and redirect it
- // back to the dialog element.
- var focusHandler = function() {
- element.focus();
- };
- topFocusTrap.addEventListener('focus', focusHandler);
- bottomFocusTrap.addEventListener('focus', focusHandler);
-
- // The top focus trap inserted immeidately before the md-dialog element (as a sibling).
- // The bottom focus trap is inserted at the very end of the md-dialog element (as a child).
- element[0].parentNode.insertBefore(topFocusTrap, element[0]);
- element.after(bottomFocusTrap);
- }
-
- /**
- * Prevents screen reader interaction behind modal window
- * on swipe interfaces
- */
- function lockScreenReader(element, options) {
- var isHidden = true;
-
- // get raw DOM node
- walkDOM(element[0]);
-
- options.unlockScreenReader = function() {
- isHidden = false;
- walkDOM(element[0]);
-
- options.unlockScreenReader = null;
- };
-
- /**
- * Walk DOM to apply or remove aria-hidden on sibling nodes
- * and parent sibling nodes
- *
- */
- 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('aria-hidden', isHidden);
- }
- }
-
- walkDOM(element = element.parentNode);
- }
- }
- }
-
- /**
- * Ensure the dialog container fill-stretches to the viewport
- */
- function stretchDialogContainerToViewport(container, options) {
- var isFixed = $window.getComputedStyle($document[0].body).position == 'fixed';
- var backdrop = options.backdrop ? $window.getComputedStyle(options.backdrop[0]) : null;
- var height = backdrop ? Math.min($document[0].body.clientHeight, Math.ceil(Math.abs(parseInt(backdrop.height, 10)))) : 0;
-
- var previousStyles = {
- top: container.css('top'),
- height: container.css('height')
- };
-
- // If the body is fixed, determine the distance to the viewport in relative from the parent.
- var parentTop = Math.abs(options.parent[0].getBoundingClientRect().top);
-
- container.css({
- top: (isFixed ? parentTop : 0) + 'px',
- height: height ? height + 'px' : '100%'
- });
-
- return function() {
- // Reverts the modified styles back to the previous values.
- // This is needed for contentElements, which should have the same styles after close
- // as before.
- container.css(previousStyles);
- };
- }
-
- /**
- * Dialog open and pop-in animation
- */
- function dialogPopIn(container, options) {
- // Add the `md-dialog-container` to the DOM
- options.parent.append(container);
- options.reverseContainerStretch = stretchDialogContainerToViewport(container, options);
-
- var dialogEl = container.find('md-dialog');
- var animator = $mdUtil.dom.animator;
- var buildTranslateToOrigin = animator.calculateZoomToOrigin;
- var translateOptions = {transitionInClass: 'md-transition-in', transitionOutClass: 'md-transition-out'};
- var from = animator.toTransformCss(buildTranslateToOrigin(dialogEl, options.openFrom || options.origin));
- var to = animator.toTransformCss(""); // defaults to center display (or parent or $rootElement)
-
- dialogEl.toggleClass('md-dialog-fullscreen', !!options.fullscreen);
-
- return animator
- .translate3d(dialogEl, from, to, translateOptions)
- .then(function(animateReversal) {
-
- // Build a reversal translate function synced to this translation...
- options.reverseAnimate = function() {
- delete options.reverseAnimate;
-
- if (options.closeTo) {
- // Using the opposite classes to create a close animation to the closeTo element
- translateOptions = {transitionInClass: 'md-transition-out', transitionOutClass: 'md-transition-in'};
- from = to;
- to = animator.toTransformCss(buildTranslateToOrigin(dialogEl, options.closeTo));
-
- return animator
- .translate3d(dialogEl, from, to,translateOptions);
- }
-
- return animateReversal(
- to = animator.toTransformCss(
- // in case the origin element has moved or is hidden,
- // let's recalculate the translateCSS
- buildTranslateToOrigin(dialogEl, options.origin)
- )
- );
-
- };
-
- // Function to revert the generated animation styles on the dialog element.
- // Useful when using a contentElement instead of a template.
- options.clearAnimate = function() {
- delete options.clearAnimate;
-
- // Remove the transition classes, added from $animateCSS, since those can't be removed
- // by reversely running the animator.
- dialogEl.removeClass([
- translateOptions.transitionOutClass,
- translateOptions.transitionInClass
- ].join(' '));
-
- // Run the animation reversely to remove the previous added animation styles.
- return animator.translate3d(dialogEl, to, animator.toTransformCss(''), {});
- };
-
- return true;
- });
- }
-
- /**
- * Dialog close and pop-out animation
- */
- function dialogPopOut(container, options) {
- return options.reverseAnimate().then(function() {
- if (options.contentElement) {
- // When we use a contentElement, we want the element to be the same as before.
- // That means, that we have to clear all the animation properties, like transform.
- options.clearAnimate();
- }
- });
- }
-
- /**
- * Utility function to filter out raw DOM nodes
- */
- function isNodeOneOf(elem, nodeTypeArray) {
- if (nodeTypeArray.indexOf(elem.nodeName) !== -1) {
- return true;
- }
- }
-
- }
-}
-
-ngmaterial.components.dialog = angular.module("material.components.dialog"); \ No newline at end of file