README.md — Matomo Analytics – Powerful, Privacy-First Insights for WordPress 4.4.2

matomo / app / node_modules / ng-dialog / README.md

matomo / app / node_modules / ng-dialog Last commit date

.eslintrc 5 years ago .npmignore 5 years ago README.md 5 years ago yarn.lock 5 years ago

README.md

709 lines

1	<!-- ### LOOKING FOR MAINTAINER. PLEASE PING [@voronianski](https://twitter.com/voronianski)! -->
2	# ngDialog
3
4	[](https://travis-ci.org/likeastore/ngDialog![build status](http://img.shields.io/travis/likeastore/ngDialog.svg)](https://travis-ci.org/likeastore/ngDialog](https://travis-ci.org/likeastore/ngDialog)
5	[](http://badge.fury.io/js/ng-dialog![npm version](http://badge.fury.io/js/ng-dialog.svg)](http://badge.fury.io/js/ng-dialog](http://badge.fury.io/js/ng-dialog)
6	[](https://github.com/likeastore/ngDialog/tags![github tag](https://img.shields.io/github/tag/likeastore/ngDialog.svg)](https://github.com/likeastore/ngDialog/tags](https://github.com/likeastore/ngDialog/tags)
7	[](http://www.npmjs.com/package/ng-dialog![Download Count](https://img.shields.io/npm/dm/ng-dialog.svg)](http://www.npmjs.com/package/ng-dialog](http://www.npmjs.com/package/ng-dialog)
8	[](https://codeclimate.com/github/likeastore/ngDialog![Code Climate](https://codeclimate.com/github/likeastore/ngDialog/badges/gpa.svg)](https://codeclimate.com/github/likeastore/ngDialog](https://codeclimate.com/github/likeastore/ngDialog)
9
10	> Modal dialogs and popups provider for [](http://angularjs.org/AngularJS](http://angularjs.org/](http://angularjs.org/) applications.
11
12	ngDialog is ~10KB (minified), has minimalistic API, is highly customizable through themes and has only AngularJS as dependency.
13
14	### [](http://likeastore.github.io/ngDialogDemo](http://likeastore.github.io/ngDialog](http://likeastore.github.io/ngDialog)
15
16	## Install
17
18	You can download all necessary ngDialog files manually, or install it with bower:
19
20	```bash
21	bower install ng-dialog
22	```
23
24	or npm:
25
26	```bash
27	npm install ng-dialog
28	```
29
30	## Usage
31
32	You need only to include ``ngDialog.js``, ``ngDialog.css`` and ``ngDialog-theme-default.css`` (as minimal setup) to your project and then you can start using the ``ngDialog`` provider in your directives, controllers and services. For example:
33
34	```html
35	<link rel="stylesheet" href="lib/ng-dialog/css/ngDialog.min.css">
36	<link rel="stylesheet" href="lib/ng-dialog/css/ngDialog-theme-default.min.css">
37	<script src="lib/ng-dialog/js/ngDialog.min.js"></script>
38	```
39
40	Define the className to be the ``ngDialog-theme-default``.
41
42	For example in controllers:
43
44	```javascript
45	var app = angular.module('exampleApp', ['ngDialog']);
46
47	app.controller('MainCtrl', function ($scope, ngDialog) {
48	$scope.clickToOpen = function () {
49	ngDialog.open({ template: 'popupTmpl.html', className: 'ngdialog-theme-default' });
50	};
51	});
52	```
53
54	## Collaboration
55
56	Your help is appreciated! If you've found a bug or if something is not clear, please raise an issue.
57
58	Ideally, if you've found an issue, you will submit a PR that meets our [contributor guidelines][contributor-guidelines].
59
60	### Running Tests
61
62	```bash
63	git clone git@github.com:likeastore/ngDialog.git
64	cd ngDialog
65	npm i
66	npm run test
67	```
68
69	## API
70
71	ngDialog service provides easy to use and minimalistic API, but in the same time it's powerful enough. Here is the list of accessible methods that you can use:
72
73	===
74
75	### ``.open(options)``
76
77	Method allows to open dialog window, creates new dialog instance on each call. It accepts ``options`` object as the only argument.
78
79	#### Options:
80
81	##### ``template {String}``
82
83	Dialog template can be loaded through ``path`` to external html template or ``<script>`` tag with ``text/ng-template``:
84
85	```html
86	<script type="text/ng-template" id="templateId">
87	<h1>Template heading</h1>
88	<p>Content goes here</p>
89	</script>
90	```
91
92	```javascript
93	ngDialog.open({ template: 'templateId' });
94	```
95
96	Also it is possible to use a simple string as template together with ``plain`` option.
97
98	##### Pro Tip about templates
99
100	It's not always necessary to place your external html template inside ``<script>`` tag. You could put these templates into ``$templateCache`` like this:
101
102	```javascript
103	angular.module('dialog.templates').run(['$templateCache', function($templateCache) {
104	$templateCache.put('templateId', 'template content');
105	}]);
106	```
107
108	Then it would be possible to include the ``dialog.templates`` module into the dependencies of your main module and start using this template as ``templateId``.
109
110	There is no need to do these actions manually.
111	You could use one of the plugins specifically for these purposes. They are available for different build systems including most popular Gulp / Grunt:
112
113	- [](https://github.com/miickel/gulp-angular-templatecachegulp-angular-templatecache](https://github.com/miickel/gulp-angular-templatecache](https://github.com/miickel/gulp-angular-templatecache)
114	- [](https://www.npmjs.com/package/gulp-ng-html2jsgulp-ng-html2js](https://www.npmjs.com/package/gulp-ng-html2js](https://www.npmjs.com/package/gulp-ng-html2js)
115	- [](https://github.com/karlgoldstein/grunt-html2jsgrunt-html2js](https://github.com/karlgoldstein/grunt-html2js](https://github.com/karlgoldstein/grunt-html2js)
116	- [](https://www.npmjs.com/package/broccoli-html2jsbroccoli-html2js](https://www.npmjs.com/package/broccoli-html2js](https://www.npmjs.com/package/broccoli-html2js)
117
118	You could find more detailed examples on each of these pages.
119
120	##### ``plain {Boolean}``
121
122	If ``true`` allows to use plain string as template, default ``false``:
123
124	```javascript
125	ngDialog.open({
126	template: '<p>my template</p>',
127	plain: true
128	});
129	```
130
131	##### ``controller {String} \| {Array} \| {Object}``
132
133	Controller that will be used for the dialog window if necessary. The controller can be specified either by referring it by name or directly inline.
134
135	```javascript
136	ngDialog.open({
137	template: 'externalTemplate.html',
138	controller: 'SomeController'
139	});
140	```
141
142	or
143
144	```javascript
145	ngDialog.open({
146	template: 'externalTemplate.html',
147	controller: ['$scope', 'otherService', function($scope, otherService) {
148	// controller logic
149	}]
150	});
151	```
152
153	##### ``controllerAs {String} ``
154
155	You could optionally specify `controllerAs` parameter for your controller. Then inside your template it will be possible to refer this controller by the value specified by `controllerAs`.
156
157	Usage of `controllerAs` syntax is currently recommended by the AngularJS team.
158
159	##### ``resolve {Object.<String, Function>}``
160
161	An optional map of dependencies which should be injected into the controller.
162	If any of these dependencies are promises, ngDialog will wait for them all to be resolved
163	or one to be rejected before the controller is instantiated.
164
165	If all the promises are resolved successfully, the values of the resolved promises are
166	injected.
167
168	The map object
169	is:
170	- `key` – `{String}`: a name of a dependency to be injected into the controller.
171	- `factory` - `{String \| Function}`: If `String` then it is an alias for a service.
172	Otherwise if `Function`, then it is injected using `$injector.invoke` and the return
173	value is treated as the dependency. If the result is a promise, it is resolved
174	before its value is injected into the controller.
175
176
177	```javascript
178	ngDialog.open({
179	controller: function Ctrl(dep) {/.../},
180	resolve: {
181	dep: function depFactory() {
182	return 'dep value';
183	}
184	}
185	});
186	```
187
188	##### ``scope {Object}``
189
190	Scope object that will be passed to the dialog. If you use a controller with separate ``$scope`` service this object will be passed to the ``$scope.$parent`` param:
191
192	```javascript
193	$scope.value = true;
194
195	ngDialog.open({
196	template: 'externalTemplate.html',
197	className: 'ngdialog-theme-plain',
198	scope: $scope
199	});
200	```
201
202	```html
203	<script type="text/ng-template" id="externalTemplate.html">
204	<p>External scope: <code>{{value}}</code></p>
205	</script>
206	```
207
208	##### ``scope.closeThisDialog(value)``
209
210	In addition ``.closeThisDialog(value)`` method gets injected to passed ``$scope``. This allows you to close the dialog straight from the handler in a popup element, for example:
211
212	```html
213	<div class="dialog-contents">
214	<input type="text"/>
215	<input type="button" value="OK" ng-click="checkInput() && closeThisDialog('Some value')"/>
216	</div>
217	```
218
219	Any value passed to this function will be attached to the object which resolves on the close promise for this dialog. For dialogs opened with the ``openConfirm()`` method the value is used as the reject reason.
220
221	##### ``data {String \| Object \| Array}``
222
223	Any serializable data that you want to be stored in the controller's dialog scope. (``$scope.ngDialogData``). From version `0.3.6` `$scope.ngDialogData` keeps references to the objects instead of copying them.
224
225	Additionally, you will have the dialog id available as ``$scope.ngDialogId``. If you are using ``$scope.ngDialogData``, it'll be also available under ``$scope.ngDialogData.ngDialogId``.
226
227	##### ``className {String}``
228
229	This option allows you to control the dialog's look, you can use built-in [](https://github.com/likeastore/ngDialog#themesthemes](https://github.com/likeastore/ngDialog#themes](https://github.com/likeastore/ngDialog#themes) or create your own styled modals.
230
231	This example enables one of the built-in ngDialog themes - ``ngdialog-theme-default`` (do not forget to include necessary css files):
232
233	```javascript
234	ngDialog.open({
235	template: 'templateId',
236	className: 'ngdialog-theme-default'
237	});
238	```
239	Note: If the className is not mentioned, the dialog will not display correctly.
240
241	Check [](https://github.com/likeastore/ngDialog#themesthemes](https://github.com/likeastore/ngDialog#themes](https://github.com/likeastore/ngDialog#themes) block to learn more.
242
243	##### ``appendClassName {String}``
244
245	Unlike the `className` property, which overrides any default classes specified through the `setDefaults()` method ([](https://github.com/likeastore/ngDialog#setdefaultsoptionssee docs](https://github.com/likeastore/ngDialog#setdefaultsoptions](https://github.com/likeastore/ngDialog#setdefaultsoptions)), `appendClassName` allows for the addition of a class on top of any defaults.
246
247	For example, the following would add both the `ngdialog-theme-default` and `ngdialog-custom` classes to the dialog opened:
248
249	```javascript
250	ngDialogProvider.setDefaults({
251	className: 'ngdialog-theme-default'
252	});
253	```
254	```javascript
255	ngDialog.open({
256	template: 'template.html',
257	appendClassName: 'ngdialog-custom'
258	});
259	```
260
261	##### ``disableAnimation {Boolean}``
262
263	If ``true`` then animation for the dialog will be disabled, default ``false``.
264
265	##### ``overlay {Boolean}``
266
267	If ``false`` it allows to hide the overlay div behind the modals, default ``true``.
268
269	##### ``showClose {Boolean}``
270
271	If ``false`` it allows to hide the close button on modals, default ``true``.
272
273	##### ``closeByEscape {Boolean}``
274
275	It allows to close modals by clicking the ``Esc`` key, default ``true``.
276
277	This will close all open modals if there are several of them opened at the same time.
278
279	##### ``closeByNavigation {Boolean}``
280
281	It allows to close modals on state change (history.back, $state.go, etc.), default ``false``.
282	Compatible with ui-router and angular-router.
283	Set this value to true if you want your modal to close when you go back or change state.
284	Set this value to false if you want your modal to stay open when you change state within your app.
285
286	This will close all open modals if there are several of them opened at the same time.
287
288	##### ``closeByDocument {Boolean}``
289
290	It allows to close modals by clicking on overlay background, default ``true``. If [](https://github.com/EightMedia/hammer.jsHammer.js](https://github.com/EightMedia/hammer.js](https://github.com/EightMedia/hammer.js) is loaded, it will listen for ``tap`` instead of ``click``.
291
292	##### ``appendTo {String}``
293
294	Specify your element where to append dialog instance, accepts selector string (e.g. ``#yourId``, ``.yourClass``). If not specified appends dialog to ``body`` as default behavior.
295
296	##### ``cache {Boolean}``
297
298	Pass ``false`` to disable template caching. Useful for developing purposes, default is ``true``.
299
300	##### ``name {String} \| {Number}``
301
302	Give a name for a dialog instance. It is useful for identifying specific dialog if there are multiple dialog boxes opened.
303
304	#### ``onOpenCallback {String} \| {Function}``
305
306	Provide either the name of a function or a function to be called after the dialog is opened. This callback can be used instead of the `ngdialog.opened` event.
307	It provides with a way to register a hook for when the dialog is appended to the DOM and about to be shown to the user.
308
309	##### ``preCloseCallback {String} \| {Function}``
310
311	Provide either the name of a function or a function to be called before the dialog is closed. If the callback function specified in the option returns ``false`` then the dialog will not be closed. Alternatively, if the callback function returns a promise that gets resolved the dialog will be closed.
312
313	The ``preCloseCallback`` function receives as a parameter ``value`` which is the same value sent to ``.close(id, value)``.
314
315	The primary use case for this feature is a dialog which contains user actions (e.g. editing data) for which you want the ability to confirm whether to discard unsaved changes upon exiting the dialog (e.g. via the escape key).
316
317	This example uses an inline function with a ``window.confirm`` call in the ``preCloseCallback`` function:
318
319	```javascript
320	ngDialog.open({
321	preCloseCallback: function(value) {
322	if (confirm('Are you sure you want to close without saving your changes?')) {
323	return true;
324	}
325	return false;
326	}
327	});
328	```
329
330	In another example, a callback function with a nested confirm ngDialog is used:
331
332	```javascript
333	ngDialog.open({
334	preCloseCallback: function(value) {
335	var nestedConfirmDialog = ngDialog.openConfirm({
336	template:'\
337	<p>Are you sure you want to close the parent dialog?</p>\
338	<div class="ngdialog-buttons">\
339	<button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="closeThisDialog(0)">No</button>\
340	<button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="confirm(1)">Yes</button>\
341	</div>',
342	plain: true
343	});
344
345	// NOTE: return the promise from openConfirm
346	return nestedConfirmDialog;
347	}
348	});
349	```
350
351	##### ``trapFocus {Boolean}``
352
353	When ``true``, ensures that the focused element remains within the dialog to conform to accessibility recommendations. Default value is ``true``
354
355	##### ``preserveFocus {Boolean}``
356
357	When ``true``, closing the dialog restores focus to the element that launched it. Designed to improve keyboard accessibility. Default value is ``true``
358
359	##### ``ariaAuto {Boolean}``
360
361	When ``true``, automatically selects appropriate values for any unspecified accessibility attributes. Default value is ``true``
362
363	See [](#AccessibilityAccessibility](#Accessibility](#Accessibility) for more information.
364
365	##### ``ariaRole {String}``
366
367	Specifies the value for the ``role`` attribute that should be applied to the dialog element. Default value is ``null`` (unspecified)
368
369	See [](#AccessibilityAccessibility](#Accessibility](#Accessibility) for more information.
370
371	##### ``ariaLabelledById {String}``
372
373	Specifies the value for the ``aria-labelledby`` attribute that should be applied to the dialog element. Default value is ``null`` (unspecified)
374
375	If specified, the value is not validated against the DOM. See [](#AccessibilityAccessibility](#Accessibility](#Accessibility) for more information.
376
377	##### ``ariaLabelledBySelector {String}``
378
379	Specifies the CSS selector for the element to be referenced by the ``aria-labelledby`` attribute on the dialog element. Default value is ``null`` (unspecified)
380
381	If specified, the first matching element is used. See [](#AccessibilityAccessibility](#Accessibility](#Accessibility) for more information.
382
383	##### ``ariaDescribedById {String}``
384
385	Specifies the value for the ``aria-describedby`` attribute that should be applied to the dialog element. Default value is ``null`` (unspecified)
386
387	If specified, the value is not validated against the DOM. See [](#AccessibilityAccessibility](#Accessibility](#Accessibility) for more information.
388
389	##### ``ariaDescribedBySelector {String}``
390
391	Specifies the CSS selector for the element to be referenced by the ``aria-describedby`` attribute on the dialog element. Default value is ``null`` (unspecified)
392
393	If specified, the first matching element is used. See [](#AccessibilityAccessibility](#Accessibility](#Accessibility) for more information.
394
395	##### ``width {Number \| String}``
396
397	This option allows you to control the dialog's width. Default value is `null` (unspecified)
398
399	If you provide a Number, 'px' will be appended. To use a custom metric, use a String, e.g. `'40%'`.
400
401	For example, the following will add `width: 400px;` to the dialog when opened:
402
403	```
404	ngDialog.open({
405	template: 'template.html',
406	width: 400
407	});
408	```
409
410	In another example, the following will add `width: 40%;`:
411
412	```
413	ngDialog.open({
414	template: 'template.html',
415	width: '40%'
416	});
417	```
418
419	##### ``height {Number \| String}``
420
421	This option allows you to control the dialog's height. Default value is `null` (unspecified)
422
423	If you provide a Number, 'px' will be appended. To use a custom metric, use a String, e.g. `'40%'`.
424
425	For example, the following will add `height: 400px;` to the dialog when opened:
426
427	```
428	ngDialog.open({
429	template: 'template.html',
430	height: 400
431	});
432	```
433
434	In another example, the following will add `height: 40%;`:
435
436	```
437	ngDialog.open({
438	template: 'template.html',
439	height: '40%'
440	});
441	```
442
443	#### Returns:
444
445	The ``open()`` method returns an object with some useful properties.
446
447	##### ``id {String}``
448
449	This is the ID of the dialog which was just created. It is the ID on the dialog's DOM element.
450
451	##### ``close(value) {Function}``
452
453	This is a function which will close the dialog which was opened by the current call to ``open()``. It takes an optional value to pass to the close promise.
454
455	##### ``closePromise {Promise}``
456
457	A promise which will resolve when the dialog is closed. It is resolved with an object containing: ``id`` - the ID of the closed dialog, ``value`` - the value the dialog was closed with, ``$dialog`` - the dialog element which at this point has been removed from the DOM and ``remainingDialogs`` - the number of dialogs still open.
458
459	The value property will be a special string if the dialog is dismissed by one of the built in mechanisms: `'$escape'`, `'$closeButton'` or `'$document'`.
460
461	This allows you do to something like this:
462
463	```javascript
464	var dialog = ngDialog.open({
465	template: 'templateId'
466	});
467
468	dialog.closePromise.then(function (data) {
469	console.log(data.id + ' has been dismissed.');
470	});
471	```
472
473	===
474
475	### ``.setDefaults(options)``
476
477	You're able to set default settings through ``ngDialogProvider``:
478
479	```javascript
480	var app = angular.module('myApp', ['ngDialog']);
481	app.config(['ngDialogProvider', function (ngDialogProvider) {
482	ngDialogProvider.setDefaults({
483	className: 'ngdialog-theme-default',
484	plain: true,
485	showClose: true,
486	closeByDocument: true,
487	closeByEscape: true
488	});
489	}]);
490	```
491
492	===
493
494	### ``.openConfirm(options)``
495
496	Opens a dialog that by default does not close when hitting escape or clicking outside the dialog window. The function returns a promise that is either resolved or rejected depending on the way the dialog was closed.
497
498	#### Options:
499
500	The options are the same as the regular [](https://github.com/likeastore/ngDialog#options``.open()``](https://github.com/likeastore/ngDialog#options](https://github.com/likeastore/ngDialog#options) method with an extra function added to the scope:
501
502	##### ``scope.confirm()``
503
504	In addition to the ``.closeThisDialog()`` method. The method ``.confirm()`` is also injected to passed ``$scope``. Use this method to close the dialog and ``resolve`` the promise that was returned when opening the modal.
505
506	The function accepts a single optional parameter which is used as the value of the resolved promise.
507
508	```html
509	<div class="dialog-contents">
510	Some message
511	<button ng-click="closeThisDialog()">Cancel</button>
512	<button ng-click="confirm()">Confirm</button>
513	</div>
514	```
515
516	#### Returns:
517
518	An Angular promise object that is resolved if the ``.confirm()`` function is used to close the dialog, otherwise the promise is rejected. The resolve value and the reject reason is defined by the value passed to the ``confirm()`` or ``closeThisDialog()`` call respectively.
519
520	===
521
522	### ``.isOpen(id)``
523
524	Method accepts dialog's ``id`` and returns a ``Boolean`` value indicating whether the specified dialog is open.
525
526	===
527
528	### ``.close(id, value)``
529
530	Method accepts dialog's ``id`` as string argument to close specific dialog window, if ``id`` is not specified it will close all currently active modals (same behavior as ``.closeAll()``). Takes an optional value to resolve the dialog promise with (or all dialog promises).
531
532	===
533
534	### ``.closeAll(value)``
535
536	Method manages closing all active modals on the page. Takes an optional value to resolve all of the dialog promises with.
537
538	===
539
540	### ``.getOpenDialogs()``
541
542	Method that returns array which includes the ids of opened dialogs.
543
544	===
545
546	### ``.setForceHtmlReload({Boolean})``
547
548	Adds an additional listener on every ``$locationChangeSuccess`` event and gets update version of ``html`` into dialog. May be useful in some rare cases when you're dependant on DOM changes, defaults to ``false``. Use it in module's config as provider instance:
549
550	```javascript
551	var app = angular.module('exampleApp', ['ngDialog']);
552
553	app.config(function (ngDialogProvider) {
554	ngDialogProvider.setForceHtmlReload(true);
555	});
556	```
557
558	===
559
560	### ``.setForceBodyReload({Boolean})``
561
562	Adds additional listener on every ``$locationChangeSuccess`` event and gets updated version of ``body`` into dialog. Maybe useful in some rare cases when you're dependant on DOM changes, defaults to ``false``. Use it in module's config as provider instance:
563
564	```javascript
565	var app = angular.module('exampleApp', ['ngDialog']);
566
567	app.config(function (ngDialogProvider) {
568	ngDialogProvider.setForceBodyReload(true);
569	});
570	```
571
572	===
573
574	### ``.setOpenOnePerName({Boolean})``
575	Default value: false
576
577	Define whether or not opening a dialog with the same name more than once simultaneously is allowed. Assigning true prevents opening a second dialog.
578
579	Setting it in the ngDialogProvider:
580	```javascript
581	var app = angular.module('exampleApp', ['ngDialog']);
582
583	app.config(function (ngDialogProvider) {
584	ngDialogProvider.setOpenOnePerName(true);
585	});
586	```
587
588	Make sure to remember to add a 'name' when opening a dialog.
589	ngDialog 'open' and 'openConfirm' functions will return `undefined` if the dialog was not opened.
590
591	## Directive
592
593	By default the ngDialog module is served with the ``ngDialog`` directive which can be used as attribute for buttons, links, etc. Almost all ``.open()`` options are available through tag attributes as well, the only difference is that ``ng-template`` id or path of template file is required.
594
595	Some imaginary button, for example, will look like:
596
597	```html
598	<button type="button"
599	ng-dialog="templateId.html"
600	ng-dialog-class="ngdialog-theme-flat"
601	ng-dialog-controller="ModalCtrl"
602	ng-dialog-close-previous>
603	Open modal text
604	</button>
605	```
606
607	You could optionally use ``ng-dialog-bind-to-controller`` to bind scope you've defined via parameter of directive to controller.
608	More information about bindToController is available [](http://blog.thoughtram.io/angularjs/2015/01/02/exploring-angular-1.3-bindToController.htmlhere](http://blog.thoughtram.io/angularjs/2015/01/02/exploring-angular-1.3-bindToController.html](http://blog.thoughtram.io/angularjs/2015/01/02/exploring-angular-1.3-bindToController.html).
609
610	Directive contains one more additional but very useful option, it's an attribute named ``ng-dialog-close-previous``. It allows you to close previously opened dialogs automatically.
611
612	## Events
613
614	Everytime ngDialog is opened or closed we're broadcasting three events (dispatching events downwards to all child scopes):
615
616	- ``ngDialog.opened``
617
618	- ``ngDialog.closing``
619
620	- ``ngDialog.closed``
621
622	This allows you to register your own listeners, example:
623
624	```javascript
625	$rootScope.$on('ngDialog.opened', function (e, $dialog) {
626	console.log('ngDialog opened: ' + $dialog.attr('id'));
627	});
628	```
629
630	``ngDialog.closing`` is different than ``ngDialog.closed`` in that it is fired immediately when the dialog begins closing, whereas ``ngDialog.closed`` is fired after all animations are complete. Both will be fired even when animation end support is not detected.
631
632	Additionally we trigger following 2 events related to loading of template for dialog:
633
634	- ``ngDialog.templateLoading``
635
636	- ``ngDialog.templateLoaded``
637
638	In case you are loading your templates from an external location, you could use above events to show some kind of loader.
639
640	Finally, we trigger the following event when adding padding to or removing padding from the body tag to compensate for scrollbar toggling:
641
642	- ``ngDialog.setPadding``
643
644	The ``ngDialog.setPadding`` event will communicate the pixel value being added to the body tag so you can add it to any other elements in your layout at the same time (often fixed-position elements will need this).
645
646
647	## Themes
648
649	Currently _ngDialog_ contains two default themes that show how easily you can create your own. Check ``example`` folder for demonstration purposes.
650
651	## Accessibility
652
653	ngDialog supports accessible keyboard navigation via the ``trapFocus`` and ``preserveFocus`` options.
654
655	The ``role``, ``aria-labelledby`` and ``aria-describedby`` attributes are also supported, and are rendered as follows.
656
657	Dialog ``role`` attribute:
658
659	* ``options.ariaRole``, if specified
660	* "dialog" if ``options.ariaAuto`` is ``true`` and the dialog contains any focusable elements
661	* "alertdialog" is ``options.ariaAuto`` is ``true`` and the dialog does not contain any focusable elements
662
663	Dialog ``aria-labelledby`` attribute:
664
665	* ``options.ariaLabelledById``, if specified
666	* If ``options.ariaLabelledBySelector`` is specified, the first matching element will be found and assigned an id (if required) and that id will be used
667	* If ``options.ariaAuto`` is ``true``, the first heading element in the dialog (h1-6) will be found and processed as per ``ariaLabelledBySelector``
668
669	Dialog ``aria-describedby`` attribute:
670
671	* ``options.ariaDescribedById``, if specified
672	* If ``options.ariaDescribedBySelector`` is specified, the first matching element will be found and assigned an id (if required) and that id will be used
673	* If ``options.ariaAuto`` is ``true``, the first content element in the dialog (article,section,p) will be found and processed as per ``ariaDescribedBySelector``
674
675	Dialog Content ``role`` attribute:
676
677	* Always assigned a value of "document"
678
679	## CDN
680
681	_ngDialog_ is available for public on [](http://cdnjs.com/libraries/ng-dialogcdnjs](http://cdnjs.com/libraries/ng-dialog](http://cdnjs.com/libraries/ng-dialog). For example, please use following urls for version ``0.4.0``.
682
683	```html
684	//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.4.0/css/ngDialog.min.css
685	//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.4.0/css/ngDialog-theme-default.min.css
686	//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.4.0/css/ngDialog-theme-plain.min.css
687	//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.4.0/js/ngDialog.min.js
688	```
689
690	## References
691
692	_ngDialog_ default styles are heavily inspired by awesome [](https://github.com/HubSpot/vexHubspot/Vex](https://github.com/HubSpot/vex](https://github.com/HubSpot/vex) jQuery modals.
693
694	## License
695
696	MIT Licensed
697
698	Copyright (c) 2013-2015, Likeastore.com <info@likeastore.com>
699
700	Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
701
702	The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
703
704	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
705
706	[](https://bitdeli.com/free "Bitdeli Badge"![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/likeastore/ngdialog/trend.png)](https://bitdeli.com/free "Bitdeli Badge"](https://bitdeli.com/free "Bitdeli Badge")
707
708	[contributor-guidelines]: https://github.com/likeastore/ngDialog/blob/master/CONTRIBUTING.md
709