Skip to content

added prompt wrapper class so that anyone can override modal style #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -24,4 +24,6 @@ build/Release
# see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git
node_modules

temp
temp
.idea
_SpecRunner.html
26 changes: 21 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

> Angular service to easily display prompt and confirmation modals.

This library depends on [angular-ui-bootstrap](https://github.com/angular-ui/bootstrap).
This library depends on [angular-ui-bootstrap](https://github.com/angular-ui/bootstrap).

## Demo

Expand All @@ -23,7 +23,7 @@ Add `cgPrompt` as a module dependency for your module.
angular.module('your_app', ['ui.bootstrap','cgPrompt']);
```

Now you can inject and use the `prompt` service.
Now you can inject and use the `prompt` service. If you are going to use **html messages** in prompt, you must have installed [`angular-sanitize`](https://github.com/angular/bower-angular-sanitize) module in your app.

```js
function MyCtrl($scope, prompt) {
Expand Down Expand Up @@ -57,12 +57,12 @@ function MyCtrl($scope, prompt) {
- #### options.title
Type: `String`
Default: `''`
The title for the dialog.
The title for the dialog. This can be html.

- #### options.message
Type: `String`
Default: `''`
The message inside the dialog.
The message inside the dialog. This can be html.

- #### options.input
Type: `Boolean`
Expand All @@ -87,11 +87,27 @@ function MyCtrl($scope, prompt) {
- #### options.buttons
Type: `Array` of `Object` with properties `label`,`cancel`, `style`, and `primary`
Default: `[{ label:'OK', primary: true }, { label:'Cancel', cancel: true }]`
A list of the buttons to display on the dialog.
A list of the buttons to display on the dialog. Label property can be html.

- #### options.backdrop
Type: `Boolean` or `String`
Default: `true`
You can set modal backdrop using bootstrap modal options. [See here](https://angular-ui.github.io/bootstrap/#/modal)
- `true` by default, modal will be dismissed when clicking anywhere on backdrop.
- `false` for removing backdrop.
- `static` to make user click on close button to dismiss prompt.

The function returns a promise. That promise is resolved with either the button that was pressed, or in the case of input prompts, the value the user entered. If the user pressed a button where `cancel=true` or canceled the dialog another way (hit ESC, etc) then the promise is rejected.

## Release History
* v1.1.2
* Added HTML support for modal header/title and button labels in footer
* v1.1.1
* Added a base class `cg-prompt-wrapper` for customization.
* Added `html` message support.
* Added bootstrap modal `backdrop` option.
* Moved to *angular v1.3.15*.
* Moved to *angular-bootstrap v0.13*.
* v1.1.0
* Added `style` option to buttons.
* v1.0.1
Expand Down
11 changes: 5 additions & 6 deletions angular-prompt.html
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
<div>
<div class="cg-prompt-wrapper">
<div class="modal-header">
<button type="button" class="close pull-right" ng-click="$dismiss()" aria-hidden="true">×</button>
<h4 class="modal-title">{{options.title}}</h4>
<h4 class="modal-title" ng-bind-html="options.title"></h4>
</div>
<div class="modal-body">

<p ng-if="options.message">
{{options.message}}
</p>
<div class="cg-prompt-message-wrapper" ng-if="options.message" ng-bind-html="options.message"></div>


<form id="cgPromptForm" name="cgPromptForm" ng-if="options.input" ng-submit="submit()">
<div class="form-group" ng-class="{'has-error':cgPromptForm.$invalid && changed}">
Expand All @@ -28,6 +27,6 @@ <h4 class="modal-title">{{options.title}}</h4>

</div>
<div class="modal-footer">
<button ng-repeat="button in options.buttons track by button.label" class="btn btn-default {{button.class}}" ng-class="{'btn-primary':button.primary}" ng-click="buttonClicked(button)">{{button.label}}</button>
<button ng-repeat="button in options.buttons track by button.label" class="btn btn-default {{button.class}}" ng-class="{'btn-primary':button.primary}" ng-click="buttonClicked(button)" ng-bind-html="button.label"></button>
</div>
</div>
2 changes: 2 additions & 0 deletions angular-prompt.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ angular.module('cgPrompt').factory('prompt',['$modal','$q',function($modal,$q){
var defaults = {
title: '',
message: '',
backdrop: true,
input: false,
label: '',
value: '',
Expand All @@ -32,6 +33,7 @@ angular.module('cgPrompt').factory('prompt',['$modal','$q',function($modal,$q){
$modal.open({
templateUrl:'angular-prompt.html',
controller: 'cgPromptCtrl',
backdrop: options.backdrop,
resolve: {
options:function(){
return options;
Expand Down
7 changes: 4 additions & 3 deletions bower.json
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
{
"name": "angular-prompt",
"description": "Angular service to easily display prompt and confirmation modals.",
"version": "1.1.1",
"version": "1.1.2",
"main": [
"dist/angular-prompt.js"
],
"dependencies": {
"angular": "~1.2.16",
"angular-bootstrap": "~0.12.0"
"angular": "~1.3.15",
"angular-bootstrap": "~0.13.0",
"angular-sanitize": "~1.3.15"
},
"ignore": [
"**/.*",
Expand Down
12 changes: 6 additions & 6 deletions bower_components/angular-bootstrap/.bower.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,21 @@
"license": "MIT",
"ignore": [],
"description": "Native AngularJS (Angular) directives for Bootstrap.",
"version": "0.12.1",
"version": "0.13.0",
"main": [
"./ui-bootstrap-tpls.js"
],
"dependencies": {
"angular": ">=1 <1.3.0"
"angular": ">=1.3.0"
},
"homepage": "https://github.com/angular-ui/bootstrap-bower",
"_release": "0.12.1",
"_release": "0.13.0",
"_resolution": {
"type": "version",
"tag": "0.12.1",
"commit": "ab14fbaaf3d592f8e76018f0666c5af6f68ebaa3"
"tag": "0.13.0",
"commit": "a75d899addcafb73344b724bec647620adeebc9a"
},
"_source": "git://github.com/angular-ui/bootstrap-bower.git",
"_target": "~0.12.0",
"_target": "~0.13.0",
"_originalSource": "angular-bootstrap"
}
6 changes: 3 additions & 3 deletions bower_components/angular-bootstrap/bower.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@
"license": "MIT",
"ignore": [],
"description": "Native AngularJS (Angular) directives for Bootstrap.",
"version": "0.12.1",
"version": "0.13.0",
"main": ["./ui-bootstrap-tpls.js"],
"dependencies": {
"angular": ">=1 <1.3.0"
}
"angular": ">=1.3.0"
}
}
6 changes: 6 additions & 0 deletions bower_components/angular-bootstrap/ui-bootstrap-csp.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/* Include this file in your html if you are using the CSP mode. */

.ng-animate.item:not(.left):not(.right) {
-webkit-transition: 0s ease-in-out left;
transition: 0s ease-in-out left
}
Loading