https://github.com/nikku/simple-dialog
A simple dialog component for the browser
https://github.com/nikku/simple-dialog
Last synced: 4 months ago
JSON representation
A simple dialog component for the browser
- Host: GitHub
- URL: https://github.com/nikku/simple-dialog
- Owner: nikku
- Created: 2015-03-21T23:03:45.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2016-07-31T12:43:21.000Z (about 10 years ago)
- Last Synced: 2025-10-11T14:41:29.429Z (10 months ago)
- Language: HTML
- Homepage:
- Size: 22.5 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# simple-dialog
A simple dialog component for the browser.
## Features
* content from string or element
* (optional) backdrop
* (optional) close handle
* (optional) modal
* return values
* life-cycle events
## Usage
```javascript
var SimpleDialog = require('simple-dialog');
var dialog = SimpleDialog({
template: '
HEADER
'
});
// open dialog
dialog.open(function(returnValue) {
console.log('dialog closed with', returnValue);
});
// close with value
dialog.close({ foo: 'BAR' });
```
## Configuration Options
The dialog constructor accepts the following configuration options:
```
{Boolean} [backdrop=true] if false, do not show backdrop
{Boolean} [closable=true] if false, do not close via close control/backdrop
{String} [id] an id to assign to the dialog
{Element|String} [parent='body'] the parent node to attach the dialog to
{Element|String} [template] the element to display as the dialog content
{String} [className=''] classes to add to the .dlg element
```
## API
### `open([closeFn])`
### `close([resultValue])`
### `toggleClass('class list')`
### `element: DOMElement`
## Template
The dialog is built from the following template:
```html
```
Default styling can be found in the `less/dialog.less` file.
## Access from the DOM
The dialog will attach itself to its dom node via the `dialog` property once it is attached to the document tree.
```javascript
SimpleDialog({
id: 'how-are-you',
template: 'How are you?'
});
setTimeout(function() {
SimpleDialog('#how-are-you').close();
}, 2000);
```
## Close from Template
The dialog will close on elements annotated with `.dlg-close`.
A custom close result can be provided via the `dlg-close-result` attribute
on `.dlg-close` elements.
```javascript
SimpleDialog({
id: 'how-are-you',
template: 'FOO'
});
```
## Extend the Dialog
The dialog is an [EventEmitter](https://nodejs.org/api/events.html#events_class_events_eventemitter). Extend it by hooking into one of the following life-cycle events:
```
attach(parentElement) attached to parentElement
pre-open about to open
open dialog is open
pre-close(resultValue) about to close with returnValue
close(resultValue) dialog closed with returnValue
detach(parentElement) detached from parentElement
```
The `this` argument inside an event listener will always refer to the respective dialog instance:
```javascript
SimpleDialog({ template: 'HUUUU!' }).on('pre-open', function() {
var dialog = this;
setTimeout(function() {
dialog.close('timeout, haha!');
}, 2000);
});
```
Use the life-cycle events in order to make it fit into your favourite front-end library. An example integration into [AngularJS](https://angularjs.org/) can be found [here](https://github.com/nikku/ng-simple-dialog).
## License
MIT