Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/theduke/meteor-bootstrap-modal-prompt
This Meteor package allows to display Bootstrap modal dialogs with custom content (even custom templates or autoforms) and get the result.
https://github.com/theduke/meteor-bootstrap-modal-prompt
Last synced: about 2 months ago
JSON representation
This Meteor package allows to display Bootstrap modal dialogs with custom content (even custom templates or autoforms) and get the result.
- Host: GitHub
- URL: https://github.com/theduke/meteor-bootstrap-modal-prompt
- Owner: theduke
- License: mit
- Created: 2015-02-14T02:39:57.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2015-02-26T03:03:46.000Z (almost 10 years ago)
- Last Synced: 2024-10-31T04:50:38.307Z (about 2 months ago)
- Language: JavaScript
- Size: 165 KB
- Stars: 13
- Watchers: 3
- Forks: 12
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.txt
- License: LICENSE
Awesome Lists containing this project
README
# bootstrap-modal-prompt
This [Atmosphere package](https://atmospherejs.com/theduke/bootstrap-modal-prompt) for [Meteor](http://meteor.com) makes it really easy to show a confirm dialog with custom content to the user, and get the result. You can also use a custom template for the content, and even specify a SimpleSchema to generate a form with AutoForm and get the form data in a callback.
Version: 0.0.3
## Installation
```bash
meteor add theduke:bootstrap-modal-prompt
```
## Requirements
Twitter Bootstrap 3 needs to be present.
You can manually include it in your project, or use one of the many Bootstrap packages, like https://atmospherejs.com/twbs/bootstrap.
## Usage
### Prompt
* Show a simple dialog with text content:
```javascript
BootstrapModalPrompt.prompt({
title: "Confirm something",
content: "Do you really want to confirm whatever?"
}, function(result) {
if (result) {
// User confirmed it, so go do something.
}
else {
// User did not confirm, do nothing.
}
});
```
* Use a custom template and, customize the button text:
```javascript
BootstrapModalPrompt.prompt({
title: "Confirm something",
template: Template.myCustomTemplate,
templateData: {
customKey: 333
},
btnDismissText: 'Forget it!',
btnOkText: 'Alright, let\'s do it!'
}, function(result) {
if (result) {
// User confirmed it, so go do something.
}
else {
// User did not confirm, do nothing.
}
});
```
* Render an AutoForm with a SimpleSchema, and receive the data in the callback.
```javascript
var MyFancySchema = new SimpleSchema({
comments: {
type: String,
min: 20
}
});
BootstrapModalPrompt.prompt({
title: "Confirm something",
formSchema: MyFancySchema,
}, function(data) {
if (data) {
// User confirmed it, so go do something.
console.log(data.comments);
}
else {
// User did not confirm, do nothing.
}
});
```
Hint: if you want to customize the form with {{#autoForm}} or do other javascript stuff,
use a custom template as shown above!
* Use a custom dialog template for ultimate flexibility.
```html
```
```javascript
Template.site.events({
'click .js-request-demo': function () {
BootstrapModalPrompt.prompt({
dialogTemplate: Template.RequestDemoModal
});
}
});
Template.RequestDemoModal.helpers({
requestDemoSchema: function () {
return Schema.RequestDemo;
}
});
AutoForm.hooks({
requestDemo: {
onSuccess: function(operation, result, template) {
BootstrapModalPrompt.hide();
}
}
});
```
### Hide
* Hide the current modal
```javascript
BootstrapModalPrompt.hide();
```
## API & Options
BootstrapModalPrompt.prompt(options, callback);
The following options are supported:
Option | Description
------ | -----------
title | The modal title
content | A string that will be used as the modal body content
template | A Meteor Template instance that should be rendered as the body content (supersedes "content")
templateData | an object with data that will be available to the custom template
dialogTemplate | A Meteor Template instance that should be rendered as the modal dialog (supersedes 'content' and 'template') (works with templateData)
btnDismissText | Text of the dismiss button - set to null to hide
btnOkText | Text of the confirm button - set to null to hide
beforeShow | Callback that will be called before the modal is displayed. Receives the options and the modal DOM node as arguments
afterShow | Callback that will be called once the modal is displayed and all transitions are complete. Receives the options and the modal DOM node as arguments
beforeHide | Callback that will be called before the modal is hidden. Receives the options and the modal DOM node as arguments
afterHide | Callback that will be called once the modal is hidden and all transitions are completed. Receives the options and the modal DOM node as arguments
onConfirm | Callback that is called when the user clicks the confirm button. Receives the options and the modal DOM node as arguments. *If this function returns false, the confirmation is aborted and the modal will not be hidden.*
## License
This project is under the MIT License.
## Authors
* Christoph Herzog - [email protected]