Skip to content

Commit b140053

Browse files
cgrosscgross
committed
initial commit
1 parent aab49d7 commit b140053

35 files changed

+31102
-3
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,5 @@ build/Release
2323
# Deployed apps should consider commenting this line out:
2424
# see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git
2525
node_modules
26+
27+
temp

‎.jshintrc

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"curly": true,
3+
"eqeqeq": true,
4+
"immed": true,
5+
"latedef": true,
6+
"newcap": true,
7+
"noarg": true,
8+
"sub": true,
9+
"undef": true,
10+
"boss": true,
11+
"eqnull": true,
12+
"browser": true,
13+
"smarttabs": true,
14+
"globals": {
15+
"jQuery": true,
16+
"angular": true,
17+
"console": true,
18+
"$": true,
19+
"_": true,
20+
"moment": true,
21+
"describe": true,
22+
"beforeEach": true,
23+
"module": true,
24+
"inject": true,
25+
"it": true,
26+
"expect": true
27+
}
28+
}

‎Gruntfile.js

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
'use strict';
2+
3+
module.exports = function (grunt) {
4+
5+
require('load-grunt-tasks')(grunt);
6+
7+
grunt.initConfig({
8+
connect: {
9+
main: {
10+
options: {
11+
port: 9001
12+
}
13+
}
14+
},
15+
watch: {
16+
main: {
17+
options: {
18+
livereload: true,
19+
livereloadOnError: false,
20+
spawn: false
21+
},
22+
files: ['angular-prompt.html','angular-prompt.js','dist/**/*','demo/**/*'],
23+
tasks: ['jshint']
24+
}
25+
},
26+
jshint: {
27+
main: {
28+
options: {
29+
jshintrc: '.jshintrc'
30+
},
31+
src: 'angular-prompt.js'
32+
}
33+
},
34+
jasmine: {
35+
unit: {
36+
src: ['./bower_components/angular/angular.js','./bower_components/angular-bootstrap/ui-bootstrap-tpls.js','./dist/angular-prompt.js','./demo/demo.js'],
37+
options: {
38+
specs: 'test/*.js'
39+
}
40+
}
41+
},
42+
ngtemplates: {
43+
main: {
44+
options: {
45+
module:'cgPrompt',
46+
base:''
47+
},
48+
src:'angular-prompt.html',
49+
dest: 'temp/templates.js'
50+
}
51+
},
52+
concat: {
53+
main: {
54+
src: ['angular-prompt.js', 'temp/templates.js'],
55+
dest: 'dist/angular-prompt.js'
56+
}
57+
},
58+
uglify: {
59+
main: {
60+
files: [
61+
{src:'dist/angular-prompt.js',dest:'dist/angular-prompt.min.js'}
62+
]
63+
}
64+
}
65+
});
66+
67+
grunt.registerTask('serve', ['jshint','connect', 'watch']);
68+
grunt.registerTask('build',['ngtemplates','concat','uglify']);
69+
grunt.registerTask('test',['build','jasmine']);
70+
71+
};

‎README.md

+94-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,95 @@
1-
angular-prompt
2-
==============
1+
# angular-prompt
32

4-
Angular service to easily display prompt and confirmation modals
3+
> Angular service to easily display prompt and confirmation modals.
4+
5+
This library depends on [angular-ui-bootstrap](https://github.com/angular-ui/bootstrap).
6+
7+
## Demo
8+
9+
[Live Demo](http://cgross.github.io/angular-prompt/demo)
10+
11+
## Getting Started
12+
13+
Install with Bower or download the the files directly from the dist folder in the repo.
14+
```bash
15+
bower install angular-prompt --save
16+
```
17+
18+
Add `dist/angular-prompt.js` to your index.html.
19+
20+
Add `cgPrompt` as a module dependency for your module.
21+
22+
```js
23+
angular.module('your_app', ['ui.bootstrap','cgPrompt']);
24+
```
25+
26+
Now you can inject and use the `prompt` service.
27+
28+
```js
29+
function MyCtrl($scope, prompt) {
30+
31+
//simple confirmation
32+
prompt({
33+
title: 'Delete this Thing?',
34+
message: 'Are you sure you want to do that?'
35+
}).then(function(){
36+
//he hit ok and not cancel
37+
});
38+
39+
//ask the user for a string
40+
prompt({
41+
title: 'Give me a name',
42+
message: 'What would you like to name it?',
43+
input: true,
44+
label: 'Name',
45+
value: 'Current name',
46+
values: ['other','possible','names']
47+
}).then(function(name){
48+
//the promise is resolved with the user input
49+
});
50+
}
51+
```
52+
53+
## API
54+
55+
### prompt(options);
56+
57+
- #### options.title
58+
Type: `String`
59+
Default: `''`
60+
The title for the dialog.
61+
62+
- #### options.message
63+
Type: `String`
64+
Default: `''`
65+
The message inside the dialog.
66+
67+
- #### options.input
68+
Type: `Boolean`
69+
Default: `false`
70+
Set to `true` if you wish to prompt the user for a text value.
71+
72+
- #### options.label
73+
Type: `String`
74+
Default: `''`
75+
The label for the input if `input=true`.
76+
77+
- #### options.value
78+
Type: `String`
79+
Default: `''`
80+
The initial value of the input if `input=true`.
81+
82+
- #### options.values
83+
Type: `Array` of `String`
84+
Default: `undefined`
85+
A list of values available in a dropdown for the user to select as the input value.
86+
87+
- #### options.buttons
88+
Type: `Array` of `Object` with properties `label`,`cancel`, and `primary`
89+
Default: `[{ label:'OK', primary: true }, { label:'Cancel', cancel: true }]`
90+
A list of the buttons to display on the dialog.
91+
92+
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.
93+
94+
## Release History
95+
* v1.0.0 - Initial release.

‎angular-prompt.html

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<div>
2+
<div class="modal-header">
3+
<button type="button" class="close pull-right" ng-click="$dismiss()" aria-hidden="true">×</button>
4+
<h4>{{options.title}}</h4>
5+
</div>
6+
<div class="modal-body">
7+
8+
<p ng-if="options.message">
9+
{{options.message}}
10+
</p>
11+
12+
<form id="cgPromptForm" name="cgPromptForm" ng-if="options.input" ng-submit="submit()">
13+
<div class="form-group" ng-class="{'has-error':cgPromptForm.$invalid && changed}">
14+
<label for="cgPromptInput">{{options.label}}</label>
15+
<input id="cgPromptInput" type="text" class="form-control" placeholder="{{options.label}}" ng-model="input.name" required ng-change="changed=true" ng-if="!options.values || options.values.length === 0"/ autofocus="autofocus">
16+
<div class="input-group" ng-if="options.values">
17+
<input id="cgPromptInput" type="text" class="form-control" placeholder="{{options.label}}" ng-model="input.name" required ng-change="changed=true" autofocus="autofocus"/>
18+
19+
<div class="input-group-btn">
20+
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
21+
<ul class="dropdown-menu pull-right">
22+
<li ng-repeat="value in options.values"><a href="" ng-click="input.name = value">{{value}}</a></li>
23+
</ul>
24+
</div>
25+
</div>
26+
</div>
27+
</form>
28+
29+
</div>
30+
<div class="modal-footer">
31+
<button ng-repeat="button in options.buttons track by button.label" class="btn btn-default" ng-class="{'btn-primary':button.primary}" ng-click="buttonClicked(button)">{{button.label}}</button>
32+
</div>
33+
</div>

‎angular-prompt.js

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
angular.module('cgPrompt',['ui.bootstrap']);
2+
3+
angular.module('cgPrompt').factory('prompt',['$modal','$q',function($modal,$q){
4+
5+
var prompt = function(options){
6+
7+
var defaults = {
8+
title: '',
9+
message: '',
10+
input: false,
11+
label: '',
12+
value: '',
13+
values: false,
14+
buttons: [
15+
{label:'Cancel',cancel:true},
16+
{label:'OK',primary:true}
17+
]
18+
};
19+
20+
if (options === undefined){
21+
options = {};
22+
}
23+
24+
for (var key in defaults) {
25+
if (options[key] === undefined) {
26+
options[key] = defaults[key];
27+
}
28+
}
29+
30+
var defer = $q.defer();
31+
32+
$modal.open({
33+
templateUrl:'angular-prompt.html',
34+
controller: 'cgPromptCtrl',
35+
resolve: {
36+
options:function(){
37+
return options;
38+
}
39+
}
40+
}).result.then(function(result){
41+
if (options.input){
42+
defer.resolve(result.input);
43+
} else {
44+
defer.resolve(result.button);
45+
}
46+
}, function(){
47+
defer.reject();
48+
});
49+
50+
return defer.promise;
51+
};
52+
53+
return prompt;
54+
}
55+
]);
56+
57+
angular.module('cgPrompt').controller('cgPromptCtrl',['$scope','options','$timeout',function($scope,options,$timeout){
58+
59+
$scope.input = {name:options.value};
60+
61+
$scope.options = options;
62+
63+
$scope.buttonClicked = function(button){
64+
if (button.cancel){
65+
$scope.$dismiss();
66+
return;
67+
}
68+
if (options.input && angular.element(document.querySelector('#cgPromptForm')).scope().cgPromptForm.$invalid){
69+
$scope.changed = true;
70+
return;
71+
}
72+
$scope.$close({button:button,input:$scope.input.name});
73+
};
74+
75+
$scope.submit = function(){
76+
var ok;
77+
angular.forEach($scope.options.buttons,function(button){
78+
if (button.primary){
79+
ok = button;
80+
}
81+
});
82+
if (ok){
83+
$scope.buttonClicked(ok);
84+
}
85+
};
86+
87+
$timeout(function(){
88+
var elem = document.querySelector('#cgPromptInput');
89+
if (elem) {
90+
if (elem.select) {
91+
elem.select();
92+
}
93+
if (elem.focus) {
94+
elem.focus();
95+
}
96+
}
97+
},100);
98+
99+
100+
}]);
101+

‎bower.json

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "angular-prompt",
3+
"description": "Angular service to easily display prompt and confirmation modals.",
4+
"version": "1.0.0",
5+
"main": [
6+
"dist/angular-prompt.js"
7+
],
8+
"dependencies": {
9+
"angular": "~1.2.16",
10+
"angular-bootstrap": "~0.10.0"
11+
},
12+
"ignore": [
13+
"**/.*",
14+
"node_modules",
15+
"components",
16+
"test",
17+
"temp",
18+
"demo",
19+
"lib",
20+
"angular-prompt.html",
21+
"angular-prompt.js",
22+
"Gruntfile.js",
23+
"package.json",
24+
"README.md"
25+
],
26+
"devDependencies": {
27+
"underscore": "~1.6.0"
28+
}
29+
}

0 commit comments

Comments
 (0)